diff options
Diffstat (limited to 'sass/google-analytics-message.sass')
| -rw-r--r-- | sass/google-analytics-message.sass | 189 |
1 files changed, 130 insertions, 59 deletions
diff --git a/sass/google-analytics-message.sass b/sass/google-analytics-message.sass index 3789f86..91a1ea9 100644 --- a/sass/google-analytics-message.sass +++ b/sass/google-analytics-message.sass @@ -1,70 +1,141 @@ -@import settings.sass +@import settings .google-analytics-message position: fixed left: 0 - right: 0 bottom: 0 - height: auto + z-index: 2 display: none - align-items: center + width: 100% background-color: $white - box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.08) - padding: 44px 0 - +resp(lg) - padding: 28px 0 - +resp(sm) - padding: 20px 0 - +resp(esm) - padding: 13px 0 + box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.12) + +resolution(0, 991) + padding: 32px + +resolution(992, 1200) + padding: 32px 50px + +resolution(1201) + padding: 32px + &.open display: flex - &__content + justify-content: center + box-sizing: border-box + + .containerCustom display: flex - align-items: center - &__img - border-right: 1px solid #E0DFDF - padding-right: 21px - &__text - p - padding-left: 20px - line-height: 160% - font-size: 15px - hyphens: inherit - +resp(md) - font-size: 14px - p:first-child - margin-bottom: 16px - &__buttons - text-align: right - margin-top: 20px - +resp(esm) - text-align: inherit - display: flex - &__accept, &__decline - height: 40px - width: 151px - font-weight: 700 - cursor: pointer - outline: none - transition: 0.3s - +resp(esm) - width: 50% - &__accept - background-color: $orange - border: 1px solid $orange - color: $black - margin-right: 6px - +resp(esm) - margin-right: 5px - &:hover - background-color: $white - &__decline - background-color: $black - border: 1px solid $black - color: $white - +resp(esm) - margin-left: 5px + flex-direction: column + position: relative + box-sizing: border-box + +resolution(0, 575) + padding: 0 + +resolution(576) + padding: 0 + +resolution(992, 1200) + max-width: unset + + svg + position: absolute + z-index: 3 + right: 0 + width: 18px + height: 18px + top: 0 + stroke: $grey-dark + transition: stroke 250ms linear + &:hover - background-color: $white - color: $black
\ No newline at end of file + stroke: $primary + &:active + stroke: $secondary + + h5 + font-weight: 600 + letter-spacing: -0.04em + +resolution(0, 575) + font-size: 16px + +resolution(576) + font-size: 20px + + p + font-family: $r + letter-spacing: $em + color: $grey-dark + font-weight: 400 + margin-top: 16px + +resolution(0, 575) + font-size: 14px + +resolution(576) + font-size: 16px + +resolution(992) + max-width: 95% + + .buttons + display: grid + margin-top: 24px + +resolution(576) + grid-template-columns: auto auto 1fr + grid-column-gap: 20px + +resolution(0, 575) + grid-column-gap: 10px + grid-template-columns: 1fr 1fr + + .accept, + .decline + height: 40px + border-radius: 4px + display: flex + justify-content: center + align-items: center + font-family: $a + font-weight: 700 + letter-spacing: $em + font-size: 16px + +resolution(576) + width: 120px + +resolution(0, 575) + width: 100% + + .accept + color: $white + border: none + transition: outline 250ms linear + position: relative + z-index: 2 + background-color: #FFBF12 + + &::before + content: '' + position: absolute + top: 0 + left: 0 + background: linear-gradient(135deg, #FF9000 0%, #FFBF12 100%) + width: 100% + height: 100% + transition: opacity 0.250s linear + z-index: -1 + border-radius: 4px + + &:hover + &::before + opacity: 0.2 + + &:active + outline: 3px solid rgba(255, 144, 0, 0.25) + + &::before + opacity: 0.80 + + .decline + color: $black + border: 2px solid $primary + background-color: transparent + transition: color 250ms linear, outline 250ms linear, border-color 250ms linear + + &:hover + color: $primary + border-color: $secondary + + &:active + color: $black + border-coolor: $primary + outline: 3px solid rgba(255, 144, 0, 0.25) |