| 1 |
/** |
| 2 |
* Frontend Styles |
| 3 |
*/ |
| 4 |
@import "./variables"; |
| 5 |
|
| 6 |
.ghostkit-alert { |
| 7 |
display: flex; |
| 8 |
flex-wrap: wrap; |
| 9 |
padding: var(--gkt-alert__padding-v) var(--gkt-alert__padding-h); |
| 10 |
border: var(--gkt-alert__border-width) solid var(--gkt-alert__border-color); |
| 11 |
border-left-width: var(--gkt-alert__border-left-width); |
| 12 |
border-radius: var(--gkt-alert__border-radius); |
| 13 |
transition: var(--gkt-alert__transition-duration) border-color var(--gkt-alert__transition-easing); |
| 14 |
|
| 15 |
&-icon { |
| 16 |
display: flex; |
| 17 |
padding: var(--gkt-alert--icon__padding); |
| 18 |
padding-right: var(--gkt-alert--icon__padding-right); |
| 19 |
font-size: var(--gkt-alert--icon__font-size); |
| 20 |
color: var(--gkt-alert--icon__color); |
| 21 |
transition: var(--gkt-alert__transition-duration) color var(--gkt-alert__transition-easing); |
| 22 |
} |
| 23 |
|
| 24 |
&-content { |
| 25 |
flex: 1; |
| 26 |
} |
| 27 |
|
| 28 |
&-hide-button { |
| 29 |
display: flex; |
| 30 |
padding-left: var(--gkt-alert--hide-button__padding-left); |
| 31 |
font-size: var(--gkt-alert--hide-button__font-size); |
| 32 |
cursor: pointer; |
| 33 |
opacity: 1; |
| 34 |
transition: var(--gkt-alert__transition-duration) opacity var(--gkt-alert__transition-easing); |
| 35 |
|
| 36 |
&:hover, |
| 37 |
&:focus { |
| 38 |
opacity: var(--gkt-alert--hide-button__hover__opacity); |
| 39 |
} |
| 40 |
} |
| 41 |
} |
| 42 |
|
