diff --git a/src/stylesheets/bell.scss b/src/stylesheets/bell.scss index 650ed334a..aa7dc87f8 100755 --- a/src/stylesheets/bell.scss +++ b/src/stylesheets/bell.scss @@ -26,8 +26,8 @@ $badge-font-size-base: 12px; $bell-border-width: 3px; $bell-foreground: white; -$bell-shadow: drop-shadow(0 2px 4px rgba(34,36,38,0.35)); -$badge-shadow: drop-shadow(0 2px 4px rgba(34,36,38,0)); +$bell-shadow: drop-shadow(0 2px 4px rgba(34, 36, 38, 0.35)); +$badge-shadow: drop-shadow(0 2px 4px rgba(34, 36, 38, 0)); $transition-duration: 175ms; $hover-size-increase: 1.15; $launcher-width: 330px; @@ -40,625 +40,643 @@ $dialog-background: white; $dialog-border-width: 2px; $dialog-border-color: rgba(0, 0, 0, 0.1); //$dialog-border-color: rgba($red, 0.1); -$dialog-shadow: drop-shadow(0px 2px 2px rgba(34,36,38,.15)); +$dialog-shadow: drop-shadow(0px 2px 2px rgba(34, 36, 38, 0.15)); -$font-sans-serif: Helvetica Neue, Helvetica, Arial, sans-serif; +$font-sans-serif: + Helvetica Neue, + Helvetica, + Arial, + sans-serif; $positions: 'bottom-left' 'bottom-right'; $sizes: ( - 'sm': 32px, - 'md': 48px, - 'lg': 64px, + 'sm': 32px, + 'md': 48px, + 'lg': 64px, ); - #onesignal-bell-container.onesignal-reset { + z-index: 2147483000; + position: fixed; + + &.onesignal-bell-container-bottom-left { + bottom: 0; + left: 0; + } + + &.onesignal-bell-container-bottom-right { + bottom: 0; + right: 0; + } + + .onesignal-bell-launcher { + @include unselectable(); + -webkit-font-smoothing: initial; + position: absolute; z-index: 2147483000; - position: fixed; + font-family: $font-sans-serif; + transform: scale(0.01) translateZ(0); + opacity: 0; + transition: + transform $transition-duration ease-in-out, + opacity $transition-duration ease-in-out; + + @each $position in $positions { + $leftOrRight: 'right'; + @if $position == 'bottom-left' { + $leftOrRight: 'left'; + } @else if $position == 'bottom-right' { + $leftOrRight: 'right'; + } + + &.onesignal-bell-launcher-#{$position} { + bottom: $dock-offset; + #{$leftOrRight}: $dock-offset; - &.onesignal-bell-container-bottom-left { - bottom: 0; - left: 0; - } + @each $size-name, $size-amount in $sizes { + $arrow-size: ceil($size-amount * 0.20625); + @if $position == 'bottom-left' { + $transform-origin-x-offset: #{ceil($size-amount * 0.5)}; + } @else if $position == 'bottom-right' { + $transform-origin-x-offset: #{$launcher-width - + (ceil($size-amount * 0.5))}; + } + + &.onesignal-bell-launcher-#{$size-name} { + //transform-origin: $transform-origin-x-offset center; + transform-origin: center center; + width: $size-amount; + + .onesignal-bell-launcher-message { + #{$leftOrRight}: #{($size-amount + $arrow-size) + 3px}; + } - &.onesignal-bell-container-bottom-right { - bottom: 0; - right: 0; - } + .onesignal-bell-launcher-dialog { + bottom: #{$size-amount + $arrow-size}; + #{$leftOrRight}: 0; + transform-origin: #{$leftOrRight} bottom; + + &:before { + #{$leftOrRight}: #{ceil(($size-amount * 0.5)) - + 5 - + ($dialog-border-width + (ceil($arrow-size * 0.5)))}; + } + + &:after { + #{$leftOrRight}: #{ceil(($size-amount * 0.5)) - + 5 - ceil(($arrow-size * 0.5))}; + } + } + } + } - .onesignal-bell-launcher { - @include unselectable(); - -webkit-font-smoothing: initial; - position: absolute; - z-index: 2147483000; - font-family: $font-sans-serif; - transform: scale(0.01) translateZ(0); - opacity: 0; - transition: transform $transition-duration ease-in-out, - opacity $transition-duration ease-in-out; + .onesignal-bell-launcher-badge { + #{$leftOrRight}: 4px; + } - @each $position in $positions { + .onesignal-bell-launcher-message { + &:after { + #{opposite-direction($leftOrRight)}: 100%; + border-#{opposite-direction($leftOrRight)}-color: black; + } - $leftOrRight: 'right'; - @if $position == 'bottom-left' { - $leftOrRight: 'left'; - } @else if $position == 'bottom-right' { - $leftOrRight: 'right'; - } + transform-origin: #{$leftOrRight} center; + } - &.onesignal-bell-launcher-#{$position} { - bottom: $dock-offset; - #{$leftOrRight}: $dock-offset; - - @each $size-name, $size-amount in $sizes { - $arrow-size: ceil($size-amount * 0.20625); - @if $position == 'bottom-left' { - $transform-origin-x-offset: #{ceil($size-amount / 2)}; - } @else if $position == 'bottom-right' { - $transform-origin-x-offset: #{$launcher-width - (ceil($size-amount / 2))}; - } - - &.onesignal-bell-launcher-#{$size-name} { - //transform-origin: $transform-origin-x-offset center; - transform-origin: center center; - width: $size-amount; - - .onesignal-bell-launcher-message { - #{$leftOrRight}: #{($size-amount + $arrow-size) + 3px}; - } - - .onesignal-bell-launcher-dialog { - bottom: #{$size-amount + $arrow-size}; - #{$leftOrRight}: 0; - transform-origin: #{$leftOrRight} bottom; - - &:before { - #{$leftOrRight}: #{ceil(($size-amount / 2)) - 5 - ($dialog-border-width + (ceil($arrow-size / 2)))}; - } - - &:after { - #{$leftOrRight}: #{ceil(($size-amount / 2)) - 5 - ceil(($arrow-size / 2))}; - } - } - } - } + .onesignal-bell-launcher-button { + #{$leftOrRight}: 0px; + } + } + } - .onesignal-bell-launcher-badge { - #{$leftOrRight}: 4px; - } + .onesignal-bell-launcher-button { + position: absolute; + bottom: 0; + border-radius: 50%; + transition: + transform $transition-duration ease-in-out, + border $transition-duration ease-in-out, + width $transition-duration ease-in-out, + height $transition-duration ease-in-out; + cursor: pointer; + z-index: 2147483000; + + svg { + width: 100%; + height: 100%; + overflow: visible; + + // TODO: Add this back in once Safari 9.1 beta fixes its bug with drop-shadow making the SVG disappear + //-webkit-filter: $bell-shadow; + //filter: $bell-shadow; + } + + &.onesignal-bell-launcher-button-hover { + cursor: pointer; + } + } - .onesignal-bell-launcher-message { - &:after { - #{opposite-direction($leftOrRight)}: 100%; - border-#{opposite-direction($leftOrRight)}-color: black; - } + .onesignal-bell-launcher-badge { + position: absolute; + bottom: 0; + border-radius: 50%; + text-align: center; + top: 0; + cursor: pointer; + // TODO: Add this back in once Safari 9.1 beta fixes its bug with drop-shadow making the SVG disappear + -webkit-filter: $badge-shadow; + filter: $badge-shadow; + transition: + transform $transition-duration ease-in-out, + border $transition-duration ease-in-out, + opacity $transition-duration * 1.2 ease-in-out, + width $transition-duration * 1.2 ease-in-out, + height $transition-duration * 1.2 ease-in-out, + position $transition-duration * 1.2 ease-in-out, + right $transition-duration * 1.2 ease-in-out, + top $transition-duration * 1.2 ease-in-out, + bottom $transition-duration * 1.2 ease-in-out, + left $transition-duration * 1.2 ease-in-out; + z-index: 2147483400; + opacity: 0; + transform: scale(0.01); + pointer-events: none; + + &.onesignal-bell-launcher-badge-hover { + cursor: pointer; + } + + &.onesignal-bell-launcher-badge-opened { + opacity: 1; + transform: scale(1); + } + } - transform-origin: #{$leftOrRight} center; - } + .onesignal-bell-launcher-message { + position: absolute; + color: white; + background: black; + cursor: pointer; + border-radius: 5px; + transform: translateY(-50%) scaleX(0) translateZ(0); + opacity: 0; + pointer-events: none; + transition: + transform $transition-duration ease-in-out, + opacity $transition-duration ease-in-out; + top: 50%; + z-index: 2147481000; + + &:after { + top: 50%; + border: solid transparent; + content: ' '; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + border-color: transparent; + } + + .onesignal-bell-launcher-message-body { + z-index: 2147482000; + max-width: 100%; + white-space: nowrap; + // overflow: hidden; # Re-enable this if things get janky + text-overflow: ellipsis; + } + + &.onesignal-bell-launcher-message-opened { + pointer-events: auto; + opacity: 1; + transform: translateY(-50%) scaleX(1) translateZ(0); + } + } - .onesignal-bell-launcher-button { - #{$leftOrRight}: 0px; - } + .onesignal-bell-launcher-dialog { + cursor: pointer; + position: absolute; + background-color: $dialog-background; + border-radius: 5px; + border: 1px solid $dialog-border-color; + // TODO: Add this back in once Safari 9.1 beta fixes its bug with drop-shadow making the SVG disappear + //-webkit-filter: $dialog-shadow; + //filter: $dialog-shadow; + opacity: 0; + width: 200px; + + transform: scale(0, 0) translateZ(0); + transition: + transform $transition-duration ease-in-out, + opacity $transition-duration ease-in-out; + z-index: 2147481000; + + ol { + counter-reset: foo; + display: table; + border-spacing: 0.3em 0.75em; + } + + ol > li { + counter-increment: foo; + display: table-row; + margin-bottom: 0.75em; + } + + ol > li::before { + content: counter(foo) '.'; + display: table-cell; /* aha! */ + text-align: right; + } + + &:after, + &:before { + top: 100%; + border: solid transparent; + content: ' '; + height: 0; + width: 0; + position: absolute; + } + + .onesignal-bell-launcher-dialog-body { + z-index: 2147482000; + max-width: 100%; + white-space: nowrap; + // overflow: hidden; # Re-enable this if things get janky + text-overflow: ellipsis; + font-family: $font-sans-serif; + } - } + &.onesignal-bell-launcher-dialog-opened { + transform: scale(1, 1) translateZ(0); + opacity: 1; + } + + a { + box-sizing: border-box; + text-decoration: none; + color: initial; + + &:visited, + &:hover, + &:hover:active, + &:active, + &:focus { + text-decoration: none; + color: initial; } + } + + button { + box-sizing: border-box; + border: 1px solid transparent; + padding: 0.625em 1em; + box-shadow: none; + border-radius: 4px; + font-weight: 400; + font-family: $font-sans-serif; + font-size: #{$message-font-size-base - 2px}; + letter-spacing: 0.65px; + cursor: pointer; + + &.action { + color: white; + background: $red; + width: 100%; + + &:hover { + background: darken($red, 10%); + } + + &:active { + background: darken($red, 20%); + } + } + } + } - .onesignal-bell-launcher-button { - position: absolute; - bottom: 0; - border-radius: 50%; - transition: transform $transition-duration ease-in-out, - border $transition-duration ease-in-out, - width $transition-duration ease-in-out, - height $transition-duration ease-in-out; - cursor: pointer; - z-index: 2147483000; - - svg { - width: 100%; - height: 100%; - overflow: visible; - - // TODO: Add this back in once Safari 9.1 beta fixes its bug with drop-shadow making the SVG disappear - //-webkit-filter: $bell-shadow; - //filter: $bell-shadow; - } + @each $size-name, $size-amount in $sizes { + $badge-font-size: $badge-font-size-base; + @if $size-name == 'sm' { + $badge-font-size: $badge-font-size-base - 4; + $message-font-size: $message-font-size-base; + } @else if $size-name == 'md' { + $badge-font-size: $badge-font-size-base; + $message-font-size: $message-font-size-base + 1; + } @else if $size-name == 'lg' { + $badge-font-size: $badge-font-size-base; + $message-font-size: $message-font-size-base + 2; + } + + &.onesignal-bell-launcher-#{$size-name} { + height: $size-amount; - &.onesignal-bell-launcher-button-hover { - cursor: pointer; - } + .onesignal-bell-launcher-button { + width: $size-amount; + height: $size-amount; } .onesignal-bell-launcher-badge { - position: absolute; - bottom: 0; - border-radius: 50%; - text-align: center; - top: 0; - cursor: pointer; - // TODO: Add this back in once Safari 9.1 beta fixes its bug with drop-shadow making the SVG disappear - -webkit-filter: $badge-shadow; - filter: $badge-shadow; - transition: transform $transition-duration ease-in-out, - border $transition-duration ease-in-out, - opacity $transition-duration * 1.2 ease-in-out, - width $transition-duration * 1.2 ease-in-out, - height $transition-duration * 1.2 ease-in-out, - position $transition-duration * 1.2 ease-in-out, - right $transition-duration * 1.2 ease-in-out, - top $transition-duration * 1.2 ease-in-out, - bottom $transition-duration * 1.2 ease-in-out, - left $transition-duration * 1.2 ease-in-out; - z-index: 2147483400; - opacity: 0; - transform: scale(0.01); - pointer-events: none; - - &.onesignal-bell-launcher-badge-hover { - cursor: pointer; - } - - &.onesignal-bell-launcher-badge-opened { - opacity: 1; - transform: scale(1); - } + font-size: #{$badge-font-size}; + width: $size-amount * 0.375; + height: $size-amount * 0.375; + line-height: $size-amount * 0.375; } .onesignal-bell-launcher-message { - position: absolute; - color: white; - background: black; - cursor: pointer; - border-radius: 5px; - transform: translateY(-50%) scaleX(0) translateZ(0); - opacity: 0; - pointer-events: none; - transition: transform $transition-duration ease-in-out, - opacity $transition-duration ease-in-out; - top: 50%; - z-index: 2147481000; - - &:after { - top: 50%; - border: solid transparent; - content: " "; - height: 0; - width: 0; - position: absolute; - pointer-events: none; - border-color: transparent; - } + $arrow-size: $size-amount * 0.20625; + padding: $size-amount * 0.3; - .onesignal-bell-launcher-message-body { - z-index: 2147482000; - max-width: 100%; - white-space: nowrap; - // overflow: hidden; # Re-enable this if things get janky - text-overflow: ellipsis; - } + &:after { + border-width: $arrow-size; + margin-top: -$arrow-size; + } - &.onesignal-bell-launcher-message-opened { - pointer-events: auto; - opacity: 1; - transform: translateY(-50%) scaleX(1) translateZ(0); - } + .onesignal-bell-launcher-message-body { + font-size: $message-font-size-base; + } } .onesignal-bell-launcher-dialog { - cursor: pointer; - position: absolute; - background-color: $dialog-background; - border-radius: 5px; - border: 1px solid $dialog-border-color; - // TODO: Add this back in once Safari 9.1 beta fixes its bug with drop-shadow making the SVG disappear - //-webkit-filter: $dialog-shadow; - //filter: $dialog-shadow; - opacity: 0; - width: 200px; - - transform: scale(0, 0) translateZ(0); - transition: transform $transition-duration ease-in-out, - opacity $transition-duration ease-in-out; - z-index: 2147481000; - - ol { - counter-reset: foo; - display: table; - border-spacing: 0.3em 0.75em; - } - - ol > li { - counter-increment: foo; - display: table-row; - margin-bottom: 0.75em; - } - - ol > li::before { - content: counter(foo) "."; - display: table-cell; /* aha! */ - text-align: right; + $arrow-size: $size-amount * 0.20625; + //padding: $size-amount * 0.1 $size-amount * 0.3; + padding: 0.3em 0.8em 0.6em 0.8em; + color: rgb(51, 51, 51); + + &:after { + border-top-color: $dialog-background; + border-width: $arrow-size; + } + + &:before { + border-top-color: rgba(180, 180, 180, 0.1); + border-width: #{$arrow-size + $dialog-border-width}; + } + + .onesignal-bell-launcher-dialog-body { + font-size: $message-font-size-base; + font-family: $font-sans-serif; + + h1 { + font-size: 15px; + line-height: 1.2em; + font-weight: 500; + font-family: $font-sans-serif; + letter-spacing: 0.2px; + text-align: center; + color: darken($red, 45%); } - &:after, &:before { - top: 100%; - border: solid transparent; - content: " "; - height: 0; - width: 0; - position: absolute; + p { + font-size: $message-font-size-base; + font-weight: 400; + font-family: $font-sans-serif; } - .onesignal-bell-launcher-dialog-body { - z-index: 2147482000; - max-width: 100%; - white-space: nowrap; - // overflow: hidden; # Re-enable this if things get janky - text-overflow: ellipsis; - font-family: $font-sans-serif; + .divider { + border-bottom: 1px solid $dialog-border-color; + margin: 0.25em -0.93em; } - &.onesignal-bell-launcher-dialog-opened { - transform: scale(1, 1) translateZ(0); - opacity: 1; + .kickback { + text-align: center; + font-family: $font-sans-serif; + font-weight: 300; + font-size: $message-font-size-base * 0.7; + letter-spacing: 0.5px; } - a { - box-sizing: border-box; - text-decoration: none; - color: initial; + .instructions { + max-width: 95vw; + max-height: 70vh; + font-family: $font-sans-serif; + font-weight: 400; + font-size: $message-font-size-base; - &:visited, &:hover, &:hover:active, &:active, &:focus { - text-decoration: none; - color: initial; - } - } - - button { - box-sizing: border-box; - border: 1px solid transparent; - padding: 0.625em 1em; - box-shadow: none; - border-radius: 4px; - font-weight: 400; - font-family: $font-sans-serif; - font-size: #{$message-font-size-base - 2px}; - letter-spacing: 0.65px; - cursor: pointer; - - &.action { - color: white; - background: $red; - width: 100%; - - &:hover { - background: darken($red, 10%); - } - - &:active { - background: darken($red, 20%); - } - } - } - } - - @each $size-name, $size-amount in $sizes { - $badge-font-size: $badge-font-size-base; - @if $size-name == 'sm' { - $badge-font-size: $badge-font-size-base - 4; - $message-font-size: $message-font-size-base; - } @else if $size-name == 'md' { - $badge-font-size: $badge-font-size-base; - $message-font-size: $message-font-size-base + 1; - } @else if $size-name == 'lg' { - $badge-font-size: $badge-font-size-base; - $message-font-size: $message-font-size-base + 2; + img { + width: 100%; + } } - &.onesignal-bell-launcher-#{$size-name} { - height: $size-amount; - - .onesignal-bell-launcher-button { - width: $size-amount; - height: $size-amount; + .push-notification { + display: -webkit-flex; + display: flex; + max-width: 330px; + border: 1px solid $dialog-border-color; + border-radius: 3px; + background: rgba(250, 250, 250, 0.5); + overflow: auto; + margin: 0.5em 0; + + .push-notification-icon { + $dimensions: 50px; + width: $dimensions; + height: $dimensions; + margin: 6px; + margin-right: 3px; + border-radius: 2px; + + &.push-notification-icon-default { + background: $gray; } - .onesignal-bell-launcher-badge { - font-size: #{$badge-font-size}; - width: $size-amount * 0.375; - height: $size-amount * 0.375; - line-height: $size-amount * 0.375; + img { + width: $dimensions; + height: $dimensions; + border-radius: 1px; } - - .onesignal-bell-launcher-message { - $arrow-size: $size-amount * 0.20625; - padding: $size-amount * 0.3; - - &:after { - border-width: $arrow-size; - margin-top: -$arrow-size; - } - - .onesignal-bell-launcher-message-body { - font-size: $message-font-size-base; - } - } - - .onesignal-bell-launcher-dialog { - $arrow-size: $size-amount * 0.20625; - //padding: $size-amount * 0.1 $size-amount * 0.3; - padding: 0.3em 0.8em 0.6em 0.8em; - color: rgb(51, 51, 51); - - &:after { - border-top-color: $dialog-background; - border-width: $arrow-size; - } - - &:before { - border-top-color: rgba(180, 180, 180, 0.1); - border-width: #{$arrow-size + $dialog-border-width}; - } - - .onesignal-bell-launcher-dialog-body { - font-size: $message-font-size-base; - font-family: $font-sans-serif; - - h1 { - font-size: 15px; - line-height: 1.2em; - font-weight: 500; - font-family: $font-sans-serif; - letter-spacing: 0.2px; - text-align: center; - color: darken($red, 45%); - } - - p { - font-size: $message-font-size-base; - font-weight: 400; - font-family: $font-sans-serif; - } - - .divider { - border-bottom: 1px solid $dialog-border-color; - margin: 0.25em -0.93em; - } - - .kickback { - text-align: center; - font-family: $font-sans-serif; - font-weight: 300; - font-size: $message-font-size-base * 0.7; - letter-spacing: 0.5px; - } - - .instructions { - max-width: 95vw; - max-height: 70vh; - font-family: $font-sans-serif; - font-weight: 400; - font-size: $message-font-size-base; - - img { - width: 100%; - } - } - - .push-notification { - display: -webkit-flex; - display: flex; - max-width: 330px; - border: 1px solid $dialog-border-color; - border-radius: 3px; - background: rgba(250, 250, 250, 0.5); - overflow: auto; - margin: 0.5em 0; - - .push-notification-icon { - $dimensions: 50px; - width: $dimensions; - height: $dimensions; - margin: 6px; - margin-right: 3px; - border-radius: 2px; - - &.push-notification-icon-default { - background: $gray; - } - - img { - width: $dimensions; - height: $dimensions; - border-radius: 1px; - } - } - - .push-notification-text-container { - margin: 6px; - margin-left: 3px; - -webkit-flex: 1; - flex: 1; - - .push-notification-text { - height: 5px; - width: 100%; - background: $gray; - margin: 5px 0; - border-radius: 1px; - - &.push-notification-text-short { - width: 75%; - } - - &.push-notification-text-medium { - width: 87%; - } - - &:first-of-type { - margin-top: 2px; - } - - &:last-of-type { - margin-bottom: 0; - } - } - } - } - } + } + + .push-notification-text-container { + margin: 6px; + margin-left: 3px; + -webkit-flex: 1; + flex: 1; + + .push-notification-text { + height: 5px; + width: 100%; + background: $gray; + margin: 5px 0; + border-radius: 1px; + + &.push-notification-text-short { + width: 75%; + } + + &.push-notification-text-medium { + width: 87%; + } + + &:first-of-type { + margin-top: 2px; + } + + &:last-of-type { + margin-bottom: 0; + } } + } } + } } + } + } - &.onesignal-bell-launcher-theme-default { - .onesignal-bell-launcher-button { - svg { - .background { - fill: $whitered-background; - } - - .foreground { - fill: $default-primary; - } - - .stroke { - fill: none; - stroke: $default-primary; - stroke-width: $bell-border-width; - stroke-miterlimit: 10; - } - } - - &.onesignal-bell-launcher-button-active, &.onesignal-bell-launcher-badge-active { - svg { - .background { - fill: $whitered-background-active !important; - } - } - } - - .pulse-ring { - border: 7px solid rgba(255, 255, 255, 0.4); - } - } + &.onesignal-bell-launcher-theme-default { + .onesignal-bell-launcher-button { + svg { + .background { + fill: $whitered-background; + } + + .foreground { + fill: $default-primary; + } + + .stroke { + fill: none; + stroke: $default-primary; + stroke-width: $bell-border-width; + stroke-miterlimit: 10; + } + } - .onesignal-bell-launcher-badge { - border: 1px solid $default-primary; - background: $default-tertiary; - color: $default-primary; + &.onesignal-bell-launcher-button-active, + &.onesignal-bell-launcher-badge-active { + svg { + .background { + fill: $whitered-background-active !important; } + } } - &.onesignal-bell-launcher-theme-inverse { - .onesignal-bell-launcher-button { - svg { - .background { - fill: $redwhite-background - } - - .foreground { - fill: $inverse-primary; - } - - .stroke { - fill: none; - stroke: $inverse-primary; - stroke-width: $bell-border-width; - stroke-miterlimit: 10; - } - } + .pulse-ring { + border: 7px solid rgba(255, 255, 255, 0.4); + } + } - &.onesignal-bell-launcher-button-active, &.onesignal-bell-launcher-badge-active { - svg { - .background { - fill: $redwhite-background-active !important; - } - } - } + .onesignal-bell-launcher-badge { + border: 1px solid $default-primary; + background: $default-tertiary; + color: $default-primary; + } + } - .pulse-ring { - border: 7px solid rgba(229, 75, 77, 0.4); - } - } + &.onesignal-bell-launcher-theme-inverse { + .onesignal-bell-launcher-button { + svg { + .background { + fill: $redwhite-background; + } + + .foreground { + fill: $inverse-primary; + } + + .stroke { + fill: none; + stroke: $inverse-primary; + stroke-width: $bell-border-width; + stroke-miterlimit: 10; + } + } - .onesignal-bell-launcher-badge { - border: 1px solid $inverse-secondary; - background: $inverse-primary; - color: $inverse-secondary; + &.onesignal-bell-launcher-button-active, + &.onesignal-bell-launcher-badge-active { + svg { + .background { + fill: $redwhite-background-active !important; } + } } - } - - .onesignal-bell-launcher-enabled, .onesignal-bell-launcher-active { - transform: scale(1); - opacity: 1; - } - - .onesignal-bell-launcher-disabled { - visibility: hidden; - } - .onesignal-bell-launcher-inactive { - opacity: $inactive-opacity; - } + .pulse-ring { + border: 7px solid rgba(229, 75, 77, 0.4); + } + } - .pulse-ring { - border-radius: 50%; - position: absolute; - left: 0; - top: 0; - bottom: 0; - right: 0; - -webkit-animation: notifyButtonPulse 0.35s ease-in-out; - animation: notifyButtonPulse 0.35s ease-in-out; - -webkit-animation-iteration-count: 1; - animation-iteration-count: 1; - opacity: 0; - z-index: 1000; - pointer-events: none; + .onesignal-bell-launcher-badge { + border: 1px solid $inverse-secondary; + background: $inverse-primary; + color: $inverse-secondary; + } } + } + + .onesignal-bell-launcher-enabled, + .onesignal-bell-launcher-active { + transform: scale(1); + opacity: 1; + } + + .onesignal-bell-launcher-disabled { + visibility: hidden; + } + + .onesignal-bell-launcher-inactive { + opacity: $inactive-opacity; + } + + .pulse-ring { + border-radius: 50%; + position: absolute; + left: 0; + top: 0; + bottom: 0; + right: 0; + -webkit-animation: notifyButtonPulse 0.35s ease-in-out; + animation: notifyButtonPulse 0.35s ease-in-out; + -webkit-animation-iteration-count: 1; + animation-iteration-count: 1; + opacity: 0; + z-index: 1000; + pointer-events: none; + } } @media print { - #onesignal-bell-container { - display: none; - } + #onesignal-bell-container { + display: none; + } } @-webkit-keyframes notifyButtonPulse { - 0% { - -webkit-transform: scale(0.1); - transform: scale(0.1); - opacity: 0.0; - border-width: 10px; - } - 50% { - opacity: 1.0; - border-width: 5px; - } - 100% { - -webkit-transform: scale(1.2); - transform: scale(1.2); - opacity: 0.0; - border-width: 1px; - } + 0% { + -webkit-transform: scale(0.1); + transform: scale(0.1); + opacity: 0; + border-width: 10px; + } + 50% { + opacity: 1; + border-width: 5px; + } + 100% { + -webkit-transform: scale(1.2); + transform: scale(1.2); + opacity: 0; + border-width: 1px; + } } @keyframes notifyButtonPulse { - 0% { - -webkit-transform: scale(0.1); - transform: scale(0.1); - opacity: 0.0; - border-width: 10px; - } - 50% { - opacity: 1.0; - border-width: 5px; - } - 100% { - -webkit-transform: scale(1.2); - transform: scale(1.2); - opacity: 0.0; - border-width: 1px; - } -} \ No newline at end of file + 0% { + -webkit-transform: scale(0.1); + transform: scale(0.1); + opacity: 0; + border-width: 10px; + } + 50% { + opacity: 1; + border-width: 5px; + } + 100% { + -webkit-transform: scale(1.2); + transform: scale(1.2); + opacity: 0; + border-width: 1px; + } +} diff --git a/src/stylesheets/customlink.scss b/src/stylesheets/customlink.scss index 9569870e2..ba1ee27bb 100644 --- a/src/stylesheets/customlink.scss +++ b/src/stylesheets/customlink.scss @@ -20,7 +20,8 @@ $customlink-base-padding-vertical: 8px; .onesignal-customlink-subscribe { display: inline-block; transition: all 0.1s; - font-family: -apple-system, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; + font-family: -apple-system, system-ui, 'Segoe UI', Roboto, Helvetica, Arial, + sans-serif; &:hover { filter: brightness(0.9); @@ -31,7 +32,8 @@ $customlink-base-padding-vertical: 8px; } &.onesignal-reset { - font-family: -apple-system, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; + font-family: -apple-system, system-ui, 'Segoe UI', Roboto, Helvetica, Arial, + sans-serif; display: inline-block; transition: all 0.1s; } @@ -41,7 +43,9 @@ $customlink-base-padding-vertical: 8px; font-weight: 600px; border-radius: 4px; cursor: pointer; - &:hover, &:focus, &:active { + &:hover, + &:focus, + &:active { text-decoration: none; } &.state-subscribed { @@ -57,7 +61,9 @@ $customlink-base-padding-vertical: 8px; text-transform: none; font-weight: 400; } - &:hover, &:focus, &:active { + &:hover, + &:focus, + &:active { text-decoration: underline; } } @@ -91,15 +97,17 @@ $customlink-base-padding-vertical: 8px; } .onesignal-customlink-explanation { - color: rgba(0,0,0,0.64); + color: rgba(0, 0, 0, 0.64); transition: all 0.1s; - font-family: "Proxima-Nova", "Proxima Nova", "Open Sans", Arial, Helvetica, sans-serif; + font-family: 'Proxima-Nova', 'Proxima Nova', 'Open Sans', Arial, Helvetica, + sans-serif; margin-bottom: 12px; &.onesignal-reset { - color: rgba(0,0,0,0.64); + color: rgba(0, 0, 0, 0.64); transition: all 0.1s; - font-family: "Proxima-Nova", "Proxima Nova", "Open Sans", Arial, Helvetica, sans-serif; + font-family: 'Proxima-Nova', 'Proxima Nova', 'Open Sans', Arial, Helvetica, + sans-serif; margin-bottom: 12px; } diff --git a/src/stylesheets/helpers.scss b/src/stylesheets/helpers.scss index 9d4e6b33a..debc0d1d9 100755 --- a/src/stylesheets/helpers.scss +++ b/src/stylesheets/helpers.scss @@ -1,48 +1,50 @@ /* http://stackoverflow.com/a/6900392 */ @mixin unselectable() { - -webkit-touch-callout: none; - -webkit-user-select: none; - -khtml-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; + -webkit-touch-callout: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; } @mixin default-cursor() { - cursor: default; + cursor: default; } @mixin debug() { - border: 2px solid magenta !important; + border: 2px solid magenta !important; } @mixin size($width, $height: $width) { - width: $width; - height: $height; + width: $width; + height: $height; } @function opposite-direction($directions) { - $opposite-directions: (); - $direction-map: ( - 'top': 'bottom', - 'right': 'left', - 'bottom': 'top', - 'left': 'right', - 'ltr': 'rtl', - 'rtl': 'ltr' - ); + $opposite-directions: (); + $direction-map: ( + 'top': 'bottom', + 'right': 'left', + 'bottom': 'top', + 'left': 'right', + 'ltr': 'rtl', + 'rtl': 'ltr', + ); - @each $direction in $directions { - $opposite-direction: map-get($direction-map, $direction); - @if $opposite-direction != null { - $opposite-directions: append($opposite-directions, #{$opposite-direction}); - } - @else { - @warn "No opposite direction can be found for `#{$direction}`."; - } + @each $direction in $directions { + $opposite-direction: map-get($direction-map, $direction); + @if $opposite-direction != null { + $opposite-directions: append( + $opposite-directions, + #{$opposite-direction} + ); + } @else { + @warn "No opposite direction can be found for `#{$direction}`."; } + } - @return $opposite-directions; + @return $opposite-directions; } // [Private] @@ -53,15 +55,14 @@ // @param [list] $args: list of offsets and values // --- @mixin _position($position, $args) { - @each $o in top right bottom left { - $i: index($args, $o); - @if $i - and $i + 1 <= length($args) - and type-of( nth($args, $i + 1) ) == number { - #{$o}: nth($args, $i + 1); - } + @each $o in top right bottom left { + $i: index($args, $o); + @if $i and $i + 1 <= length($args) and type-of(nth($args, $i + 1)) == number + { + #{$o}: nth($args, $i + 1); } - position: $position; + } + position: $position; } // Absolute positioning helper mixin @@ -70,7 +71,7 @@ // @param [list] $args: list of offsets and values // --- @mixin absolute($args) { - @include _position(absolute, $args); + @include _position(absolute, $args); } // Arrow helper mixin @@ -81,23 +82,23 @@ // @param [number] $size (1em): arrow size // --- @mixin triangle($direction, $position, $color: currentColor, $size: 1em) { - // Make sure the direction is valid - @if not index(top right bottom left, $direction) { - @warn "Direction must be one of top, right, bottom or left."; - } @else { - @include absolute($position); // Position - @include size(0); // Size - content: ''; - z-index: 2; - border-#{opposite-position($direction)}: $size * 1.5 solid $color; - $perpendicular-borders: $size solid transparent; + // Make sure the direction is valid + @if not index(top right bottom left, $direction) { + @warn "Direction must be one of top, right, bottom or left."; + } @else { + @include absolute($position); // Position + @include size(0); // Size + content: ''; + z-index: 2; + border-#{opposite-position($direction)}: $size * 1.5 solid $color; + $perpendicular-borders: $size solid transparent; - @if $direction == top or $direction == bottom { - border-left: $perpendicular-borders; - border-right: $perpendicular-borders; - } @else if $direction == right or $direction == left { - border-bottom: $perpendicular-borders; - border-top: $perpendicular-borders; - } + @if $direction == top or $direction == bottom { + border-left: $perpendicular-borders; + border-right: $perpendicular-borders; + } @else if $direction == right or $direction == left { + border-bottom: $perpendicular-borders; + border-top: $perpendicular-borders; } -} \ No newline at end of file + } +} diff --git a/src/stylesheets/reset.scss b/src/stylesheets/reset.scss index 27d2074df..81c8188ab 100755 --- a/src/stylesheets/reset.scss +++ b/src/stylesheets/reset.scss @@ -22,484 +22,764 @@ /* == BLANKET RESET RULES == */ /* HTML 4.01 */ -.onesignal-reset:not([class^="iti"]), .onesignal-reset h1, .onesignal-reset h2, .onesignal-reset h3, .onesignal-reset h4, .onesignal-reset h5, .onesignal-reset h6, .onesignal-reset p, .onesignal-reset td, .onesignal-reset dl, .onesignal-reset tr, .onesignal-reset dt, .onesignal-reset ol, .onesignal-reset form, .onesignal-reset select, .onesignal-reset option, .onesignal-reset pre, .onesignal-reset div:not([class^="iti"]), .onesignal-reset table, .onesignal-reset th, .onesignal-reset tbody, .onesignal-reset tfoot, .onesignal-reset caption, .onesignal-reset thead, .onesignal-reset ul:not([class^="iti"]), .onesignal-reset address, .onesignal-reset blockquote, .onesignal-reset dd, .onesignal-reset fieldset, .onesignal-reset li:not([class^="iti"]), .onesignal-reset iframe, .onesignal-reset strong, .onesignal-reset legend, .onesignal-reset em, .onesignal-reset summary, .onesignal-reset cite, .onesignal-reset span:not([class^="iti"]), .onesignal-reset input:not([class^="iti"]), .onesignal-reset sup, .onesignal-reset label, .onesignal-reset dfn, .onesignal-reset object, .onesignal-reset big, .onesignal-reset q, .onesignal-reset samp, .onesignal-reset acronym, .onesignal-reset small, .onesignal-reset img, .onesignal-reset strike, .onesignal-reset code, .onesignal-reset sub, .onesignal-reset ins, .onesignal-reset textarea, .onesignal-reset button, .onesignal-reset var, .onesignal-reset a, .onesignal-reset abbr, .onesignal-reset applet, .onesignal-reset del, .onesignal-reset kbd, .onesignal-reset tt, .onesignal-reset b, .onesignal-reset i, .onesignal-reset hr, -.onesignal-reset article, .onesignal-reset aside, .onesignal-reset figure, .onesignal-reset figcaption, .onesignal-reset footer, .onesignal-reset header, .onesignal-reset menu, .onesignal-reset nav, .onesignal-reset section, .onesignal-reset time, .onesignal-reset mark, .onesignal-reset audio, .onesignal-reset video, .onesignal-reset abbr, .onesignal-reset address, .onesignal-reset area, .onesignal-reset blockquote, .onesignal-reset canvas, .onesignal-reset caption, .onesignal-reset cite, .onesignal-reset code, .onesignal-reset colgroup, .onesignal-reset col, .onesignal-reset datalist, .onesignal-reset fieldset, .onesignal-reset main, .onesignal-reset map, .onesignal-reset meta, .onesignal-reset optgroup, .onesignal-reset output, .onesignal-reset progress { - background-attachment: scroll ; - background-color: transparent ; - background-image: none ; /* This rule affects the use of pngfix JavaScript http://dillerdesign.com/experiment/DD_BelatedPNG for IE6, which is used to force the browser to recognise alpha-transparent PNGs files that replace the IE6 lack of PNG transparency. (The rule overrides the VML image that is used to replace the given CSS background-image). If you don't know what that means, then you probably haven't used the pngfix script, and this comment may be ignored :) */ - background-position: 0 0 ; - background-repeat: repeat ; - border-color: black ; - border-color: currentColor ; /* `border-color` should match font color. Modern browsers (incl. IE9) allow the use of "currentColor" to match the current font 'color' value . For older browsers, a default of 'black' is given before this rule. Guideline to support older browsers: if you haven't already declared a border-color for an element, be sure to do so, e.g. when you first declare the border-width. */ - border-radius: 0 ; - border-style: none ; - border-width: medium ; - bottom: auto ; - clear: none ; - clip: auto ; - color: inherit ; - counter-increment: none ; - counter-reset: none ; - cursor: auto ; - direction: inherit ; - display: inline ; - float: none ; - font-family: inherit ; /* As with other inherit values, this needs to be set on the root container element */ - font-size: inherit ; - font-style: inherit ; - font-variant: normal ; - font-weight: inherit ; - left: auto ; - letter-spacing: normal ; - line-height: inherit ; - list-style-type: inherit ; /* Could set list-style-type to none */ - list-style-position: outside ; - list-style-image: none ; - margin: 0 ; - max-height: none ; - max-width: none ; - min-height: 0 ; - min-width: 0 ; - opacity: 1; - outline: invert none medium ; - overflow: visible ; - padding: 0 ; - position: static ; - quotes: "" "" ; - right: auto ; - table-layout: auto ; - text-align: inherit ; - text-decoration: inherit ; - text-indent: 0 ; - text-transform: none ; - top: auto ; - unicode-bidi: normal ; - vertical-align: baseline ; - visibility: inherit ; - white-space: normal ; - width: auto ; - word-spacing: normal ; - z-index: auto ; - /* CSS3 */ - /* Including all prefixes according to http://caniuse.com/ */ - /* CSS Animations don't cascade, so don't require resetting */ - -webkit-background-origin: padding-box ; - background-origin: padding-box ; - -webkit-background-clip: border-box ; - background-clip: border-box ; - -webkit-background-size: auto ; - -moz-background-size: auto ; - background-size: auto ; - -webkit-border-image: none ; - -moz-border-image: none ; - -o-border-image: none ; - border-image: none ; - -webkit-border-radius: 0 ; - -moz-border-radius: 0 ; - border-radius: 0 ; - -webkit-box-shadow: none ; - box-shadow: none ; - -webkit-box-sizing: content-box ; - -moz-box-sizing: content-box ; - box-sizing: content-box ; - -webkit-column-count: auto ; - -moz-column-count: auto ; - column-count: auto ; - -webkit-column-gap: normal ; - -moz-column-gap: normal ; - column-gap: normal ; - -webkit-column-rule: medium none black ; - -moz-column-rule: medium none black ; - column-rule: medium none black ; - -webkit-column-span: 1 ; - -moz-column-span: 1 ; /* doesn't exist yet but probably will */ - column-span: 1 ; - -webkit-column-width: auto ; - -moz-column-width: auto ; - column-width: auto ; - font-feature-settings: normal ; - overflow-x: visible ; - overflow-y: visible ; - -webkit-hyphens: manual ; - -moz-hyphens: manual ; - hyphens: manual ; - -webkit-perspective: none ; - -moz-perspective: none ; - -ms-perspective: none ; - -o-perspective: none ; - perspective: none ; - -webkit-perspective-origin: 50% 50% ; - -moz-perspective-origin: 50% 50% ; - -ms-perspective-origin: 50% 50% ; - -o-perspective-origin: 50% 50% ; - perspective-origin: 50% 50% ; - -webkit-backface-visibility: visible ; - -moz-backface-visibility: visible ; - -ms-backface-visibility: visible ; - -o-backface-visibility: visible ; - backface-visibility: visible ; - text-shadow: none ; - -webkit-transition: all 0s ease 0s ; - transition: all 0s ease 0s ; - -webkit-transform: none ; - -moz-transform: none ; - -ms-transform: none ; - -o-transform: none ; - transform: none ; - -webkit-transform-origin: 50% 50% ; - -moz-transform-origin: 50% 50% ; - -ms-transform-origin: 50% 50% ; - -o-transform-origin: 50% 50% ; - transform-origin: 50% 50% ; - -webkit-transform-style: flat ; - -moz-transform-style: flat ; - -ms-transform-style: flat ; - -o-transform-style: flat ; - transform-style: flat ; - word-break: normal ; +.onesignal-reset:not([class^='iti']), +.onesignal-reset h1, +.onesignal-reset h2, +.onesignal-reset h3, +.onesignal-reset h4, +.onesignal-reset h5, +.onesignal-reset h6, +.onesignal-reset p, +.onesignal-reset td, +.onesignal-reset dl, +.onesignal-reset tr, +.onesignal-reset dt, +.onesignal-reset ol, +.onesignal-reset form, +.onesignal-reset select, +.onesignal-reset option, +.onesignal-reset pre, +.onesignal-reset div:not([class^='iti']), +.onesignal-reset table, +.onesignal-reset th, +.onesignal-reset tbody, +.onesignal-reset tfoot, +.onesignal-reset caption, +.onesignal-reset thead, +.onesignal-reset ul:not([class^='iti']), +.onesignal-reset address, +.onesignal-reset blockquote, +.onesignal-reset dd, +.onesignal-reset fieldset, +.onesignal-reset li:not([class^='iti']), +.onesignal-reset iframe, +.onesignal-reset strong, +.onesignal-reset legend, +.onesignal-reset em, +.onesignal-reset summary, +.onesignal-reset cite, +.onesignal-reset span:not([class^='iti']), +.onesignal-reset input:not([class^='iti']), +.onesignal-reset sup, +.onesignal-reset label, +.onesignal-reset dfn, +.onesignal-reset object, +.onesignal-reset big, +.onesignal-reset q, +.onesignal-reset samp, +.onesignal-reset acronym, +.onesignal-reset small, +.onesignal-reset img, +.onesignal-reset strike, +.onesignal-reset code, +.onesignal-reset sub, +.onesignal-reset ins, +.onesignal-reset textarea, +.onesignal-reset button, +.onesignal-reset var, +.onesignal-reset a, +.onesignal-reset abbr, +.onesignal-reset applet, +.onesignal-reset del, +.onesignal-reset kbd, +.onesignal-reset tt, +.onesignal-reset b, +.onesignal-reset i, +.onesignal-reset hr, +.onesignal-reset article, +.onesignal-reset aside, +.onesignal-reset figure, +.onesignal-reset figcaption, +.onesignal-reset footer, +.onesignal-reset header, +.onesignal-reset menu, +.onesignal-reset nav, +.onesignal-reset section, +.onesignal-reset time, +.onesignal-reset mark, +.onesignal-reset audio, +.onesignal-reset video, +.onesignal-reset abbr, +.onesignal-reset address, +.onesignal-reset area, +.onesignal-reset blockquote, +.onesignal-reset canvas, +.onesignal-reset caption, +.onesignal-reset cite, +.onesignal-reset code, +.onesignal-reset colgroup, +.onesignal-reset col, +.onesignal-reset datalist, +.onesignal-reset fieldset, +.onesignal-reset main, +.onesignal-reset map, +.onesignal-reset meta, +.onesignal-reset optgroup, +.onesignal-reset output, +.onesignal-reset progress { + background-attachment: scroll; + background-color: transparent; + background-image: none; /* This rule affects the use of pngfix JavaScript http://dillerdesign.com/experiment/DD_BelatedPNG for IE6, which is used to force the browser to recognise alpha-transparent PNGs files that replace the IE6 lack of PNG transparency. (The rule overrides the VML image that is used to replace the given CSS background-image). If you don't know what that means, then you probably haven't used the pngfix script, and this comment may be ignored :) */ + background-position: 0 0; + background-repeat: repeat; + border-color: black; + border-color: currentColor; /* `border-color` should match font color. Modern browsers (incl. IE9) allow the use of "currentColor" to match the current font 'color' value . For older browsers, a default of 'black' is given before this rule. Guideline to support older browsers: if you haven't already declared a border-color for an element, be sure to do so, e.g. when you first declare the border-width. */ + border-radius: 0; + border-style: none; + border-width: medium; + bottom: auto; + clear: none; + clip: auto; + color: inherit; + counter-increment: none; + counter-reset: none; + cursor: auto; + direction: inherit; + display: inline; + float: none; + font-family: inherit; /* As with other inherit values, this needs to be set on the root container element */ + font-size: inherit; + font-style: inherit; + font-variant: normal; + font-weight: inherit; + left: auto; + letter-spacing: normal; + line-height: inherit; + list-style-type: inherit; /* Could set list-style-type to none */ + list-style-position: outside; + list-style-image: none; + margin: 0; + max-height: none; + max-width: none; + min-height: 0; + min-width: 0; + opacity: 1; + outline: invert none medium; + overflow: visible; + padding: 0; + position: static; + quotes: '' ''; + right: auto; + table-layout: auto; + text-align: inherit; + text-decoration: inherit; + text-indent: 0; + text-transform: none; + top: auto; + unicode-bidi: normal; + vertical-align: baseline; + visibility: inherit; + white-space: normal; + width: auto; + word-spacing: normal; + z-index: auto; + /* CSS3 */ + /* Including all prefixes according to http://caniuse.com/ */ + /* CSS Animations don't cascade, so don't require resetting */ + -webkit-background-origin: padding-box; + background-origin: padding-box; + -webkit-background-clip: border-box; + background-clip: border-box; + -webkit-background-size: auto; + -moz-background-size: auto; + background-size: auto; + -webkit-border-image: none; + -moz-border-image: none; + -o-border-image: none; + border-image: none; + -webkit-border-radius: 0; + -moz-border-radius: 0; + border-radius: 0; + -webkit-box-shadow: none; + box-shadow: none; + -webkit-box-sizing: content-box; + -moz-box-sizing: content-box; + box-sizing: content-box; + -webkit-column-count: auto; + -moz-column-count: auto; + column-count: auto; + -webkit-column-gap: normal; + -moz-column-gap: normal; + column-gap: normal; + -webkit-column-rule: medium none black; + -moz-column-rule: medium none black; + column-rule: medium none black; + -webkit-column-span: 1; + -moz-column-span: 1; /* doesn't exist yet but probably will */ + column-span: 1; + -webkit-column-width: auto; + -moz-column-width: auto; + column-width: auto; + font-feature-settings: normal; + overflow-x: visible; + overflow-y: visible; + -webkit-hyphens: manual; + -moz-hyphens: manual; + hyphens: manual; + -webkit-perspective: none; + -moz-perspective: none; + -ms-perspective: none; + -o-perspective: none; + perspective: none; + -webkit-perspective-origin: 50% 50%; + -moz-perspective-origin: 50% 50%; + -ms-perspective-origin: 50% 50%; + -o-perspective-origin: 50% 50%; + perspective-origin: 50% 50%; + -webkit-backface-visibility: visible; + -moz-backface-visibility: visible; + -ms-backface-visibility: visible; + -o-backface-visibility: visible; + backface-visibility: visible; + text-shadow: none; + -webkit-transition: all 0s ease 0s; + transition: all 0s ease 0s; + -webkit-transform: none; + -moz-transform: none; + -ms-transform: none; + -o-transform: none; + transform: none; + -webkit-transform-origin: 50% 50%; + -moz-transform-origin: 50% 50%; + -ms-transform-origin: 50% 50%; + -o-transform-origin: 50% 50%; + transform-origin: 50% 50%; + -webkit-transform-style: flat; + -moz-transform-style: flat; + -ms-transform-style: flat; + -o-transform-style: flat; + transform-style: flat; + word-break: normal; } /* == BLOCK-LEVEL == */ /* Actually, some of these should be inline-block and other values, but block works fine */ /* HTML 4.01 */ -.onesignal-reset:not([class^="iti"]), .onesignal-reset h3, .onesignal-reset h5, .onesignal-reset p, .onesignal-reset h1, .onesignal-reset dl, .onesignal-reset dt, .onesignal-reset h6, .onesignal-reset ol, .onesignal-reset form, .onesignal-reset option, .onesignal-reset pre, .onesignal-reset div:not([class^="iti"]), .onesignal-reset h2, .onesignal-reset caption, .onesignal-reset h4, .onesignal-reset ul:not([class^="iti"]), .onesignal-reset address, .onesignal-reset blockquote, .onesignal-reset dd, .onesignal-reset fieldset, .onesignal-reset hr, -.onesignal-reset article, .onesignal-reset dialog, .onesignal-reset figure, .onesignal-reset footer, .onesignal-reset header, .onesignal-reset hgroup, .onesignal-reset menu, .onesignal-reset nav, .onesignal-reset section, .onesignal-reset audio, .onesignal-reset video, .onesignal-reset address, .onesignal-reset blockquote, .onesignal-reset colgroup, .onesignal-reset main, .onesignal-reset progress, .onesignal-reset summary { - display: block ; -} - -.onesignal-reset h1, .onesignal-reset h2, .onesignal-reset h3, .onesignal-reset h4, .onesignal-reset h5, .onesignal-reset h6 { - font-weight: bold ; +.onesignal-reset:not([class^='iti']), +.onesignal-reset h3, +.onesignal-reset h5, +.onesignal-reset p, +.onesignal-reset h1, +.onesignal-reset dl, +.onesignal-reset dt, +.onesignal-reset h6, +.onesignal-reset ol, +.onesignal-reset form, +.onesignal-reset option, +.onesignal-reset pre, +.onesignal-reset div:not([class^='iti']), +.onesignal-reset h2, +.onesignal-reset caption, +.onesignal-reset h4, +.onesignal-reset ul:not([class^='iti']), +.onesignal-reset address, +.onesignal-reset blockquote, +.onesignal-reset dd, +.onesignal-reset fieldset, +.onesignal-reset hr, +.onesignal-reset article, +.onesignal-reset dialog, +.onesignal-reset figure, +.onesignal-reset footer, +.onesignal-reset header, +.onesignal-reset hgroup, +.onesignal-reset menu, +.onesignal-reset nav, +.onesignal-reset section, +.onesignal-reset audio, +.onesignal-reset video, +.onesignal-reset address, +.onesignal-reset blockquote, +.onesignal-reset colgroup, +.onesignal-reset main, +.onesignal-reset progress, +.onesignal-reset summary { + display: block; +} + +.onesignal-reset h1, +.onesignal-reset h2, +.onesignal-reset h3, +.onesignal-reset h4, +.onesignal-reset h5, +.onesignal-reset h6 { + font-weight: bold; } .onesignal-reset h1 { - font-size: 2em ; - padding: .67em 0 ; + font-size: 2em; + padding: 0.67em 0; } .onesignal-reset h2 { - font-size: 1.5em ; - padding: .83em 0 ; + font-size: 1.5em; + padding: 0.83em 0; } .onesignal-reset h3 { - font-size: 1.17em ; - padding: .83em 0 ; + font-size: 1.17em; + padding: 0.83em 0; } .onesignal-reset h4 { - font-size: 1em ; + font-size: 1em; } .onesignal-reset h5 { - font-size: .83em ; + font-size: 0.83em; } .onesignal-reset p { - margin: 1em 0 ; + margin: 1em 0; } .onesignal-reset table { - display: table ; + display: table; } .onesignal-reset thead { - display: table-header-group ; + display: table-header-group; } .onesignal-reset tbody { - display: table-row-group ; + display: table-row-group; } .onesignal-reset tfoot { - display: table-footer-group ; + display: table-footer-group; } .onesignal-reset tr { - display: table-row ; + display: table-row; } -.onesignal-reset th, .onesignal-reset td { - display: table-cell ; - padding: 2px ; +.onesignal-reset th, +.onesignal-reset td { + display: table-cell; + padding: 2px; } /* == SPECIFIC ELEMENTS == */ /* Some of these are browser defaults; some are just useful resets */ -.onesignal-reset ol, .onesignal-reset ul:not([class^="iti"]) { - margin: 1em 0 ; -} - -.onesignal-reset ul li:not([class^="iti"]), .onesignal-reset ul ul li, .onesignal-reset ul ul ul li, .onesignal-reset ol li, .onesignal-reset ol ol li, .onesignal-reset ol ol ol li, .onesignal-reset ul ol ol li, .onesignal-reset ul ul ol li, .onesignal-reset ol ul ul li, .onesignal-reset ol ol ul li { - list-style-position: inside ; - margin-top: .08em ; -} - -.onesignal-reset ol ol, .onesignal-reset ol ol ol, .onesignal-reset ul ul, .onesignal-reset ul ul ul, .onesignal-reset ol ul, .onesignal-reset ol ul ul, .onesignal-reset ol ol ul, .onesignal-reset ul ol, .onesignal-reset ul ol ol, .onesignal-reset ul ul ol { - padding-left: 40px ; - margin: 0 ; +.onesignal-reset ol, +.onesignal-reset ul:not([class^='iti']) { + margin: 1em 0; +} + +.onesignal-reset ul li:not([class^='iti']), +.onesignal-reset ul ul li, +.onesignal-reset ul ul ul li, +.onesignal-reset ol li, +.onesignal-reset ol ol li, +.onesignal-reset ol ol ol li, +.onesignal-reset ul ol ol li, +.onesignal-reset ul ul ol li, +.onesignal-reset ol ul ul li, +.onesignal-reset ol ol ul li { + list-style-position: inside; + margin-top: 0.08em; +} + +.onesignal-reset ol ol, +.onesignal-reset ol ol ol, +.onesignal-reset ul ul, +.onesignal-reset ul ul ul, +.onesignal-reset ol ul, +.onesignal-reset ol ul ul, +.onesignal-reset ol ol ul, +.onesignal-reset ul ol, +.onesignal-reset ul ol ol, +.onesignal-reset ul ul ol { + padding-left: 40px; + margin: 0; } /* helper for general navigation */ -.onesignal-reset nav ul, .onesignal-reset nav ol { - list-style-type: none ; +.onesignal-reset nav ul, +.onesignal-reset nav ol { + list-style-type: none; } -.onesignal-reset ul:not([class^="iti"]), .onesignal-reset menu { - list-style-type: disc ; +.onesignal-reset ul:not([class^='iti']), +.onesignal-reset menu { + list-style-type: disc; } .onesignal-reset ol { - list-style-type: decimal ; -} - -.onesignal-reset ol ul, .onesignal-reset ul ul, .onesignal-reset menu ul, .onesignal-reset ol menu, .onesignal-reset ul menu, .onesignal-reset menu menu { - list-style-type: circle ; -} - -.onesignal-reset ol ol ul, .onesignal-reset ol ul ul, .onesignal-reset ol menu ul, .onesignal-reset ol ol menu, .onesignal-reset ol ul menu, .onesignal-reset ol menu menu, .onesignal-reset ul ol ul, .onesignal-reset ul ul ul, .onesignal-reset ul menu ul, .onesignal-reset ul ol menu, .onesignal-reset ul ul menu, .onesignal-reset ul menu menu, .onesignal-reset menu ol ul, .onesignal-reset menu ul ul, .onesignal-reset menu menu ul, .onesignal-reset menu ol menu, .onesignal-reset menu ul menu, .onesignal-reset menu menu menu { - list-style-type: square ; -} - -.onesignal-reset li:not([class^="iti"]) { - display: list-item ; - /* Fixes IE7 issue with positioning of nested bullets */ - min-height: auto ; - min-width: auto ; - padding-left: 20px ; /* replace -webkit-padding-start: 40px; */ + list-style-type: decimal; +} + +.onesignal-reset ol ul, +.onesignal-reset ul ul, +.onesignal-reset menu ul, +.onesignal-reset ol menu, +.onesignal-reset ul menu, +.onesignal-reset menu menu { + list-style-type: circle; +} + +.onesignal-reset ol ol ul, +.onesignal-reset ol ul ul, +.onesignal-reset ol menu ul, +.onesignal-reset ol ol menu, +.onesignal-reset ol ul menu, +.onesignal-reset ol menu menu, +.onesignal-reset ul ol ul, +.onesignal-reset ul ul ul, +.onesignal-reset ul menu ul, +.onesignal-reset ul ol menu, +.onesignal-reset ul ul menu, +.onesignal-reset ul menu menu, +.onesignal-reset menu ol ul, +.onesignal-reset menu ul ul, +.onesignal-reset menu menu ul, +.onesignal-reset menu ol menu, +.onesignal-reset menu ul menu, +.onesignal-reset menu menu menu { + list-style-type: square; +} + +.onesignal-reset li:not([class^='iti']) { + display: list-item; + /* Fixes IE7 issue with positioning of nested bullets */ + min-height: auto; + min-width: auto; + padding-left: 20px; /* replace -webkit-padding-start: 40px; */ } .onesignal-reset strong { - font-weight: bold ; + font-weight: bold; } .onesignal-reset em { - font-style: italic ; + font-style: italic; } -.onesignal-reset kbd, .onesignal-reset samp, .onesignal-reset code, .onesignal-reset pre { - font-family: monospace ; +.onesignal-reset kbd, +.onesignal-reset samp, +.onesignal-reset code, +.onesignal-reset pre { + font-family: monospace; } .onesignal-reset a { - color: blue ; - text-decoration: underline ; + color: blue; + text-decoration: underline; } .onesignal-reset a:visited { - color: #529 ; -} - -.onesignal-reset a, .onesignal-reset a *, .onesignal-reset input[type=submit], .onesignal-reset input[type=radio], .onesignal-reset input[type=checkbox], .onesignal-reset select { - cursor: pointer ; -} - -.onesignal-reset button, .onesignal-reset input[type=submit] { - text-align: center ; - padding: 2px 6px 3px ; - border-radius: 4px ; - text-decoration: none ; - font-family: arial, helvetica, sans-serif ; - font-size: small ; - background: white ; - -webkit-appearance: push-button ; - color: buttontext ; - border: 1px #a6a6a6 solid ; - background: lightgrey ; /* Old browsers */ - background: rgb(255, 255, 255); /* Old browsers */ - background: -moz-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(221, 221, 221, 1) 100%, rgba(209, 209, 209, 1) 100%, rgba(221, 221, 221, 1) 100%) ; /* FF3.6+ */ - background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 255, 255, 1)), color-stop(100%, rgba(221, 221, 221, 1)), color-stop(100%, rgba(209, 209, 209, 1)), color-stop(100%, rgba(221, 221, 221, 1))) ; /* Chrome,Safari4+ */ - background: -webkit-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(221, 221, 221, 1) 100%, rgba(209, 209, 209, 1) 100%, rgba(221, 221, 221, 1) 100%) ; /* Chrome10+,Safari5.1+ */ - background: -o-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(221, 221, 221, 1) 100%, rgba(209, 209, 209, 1) 100%, rgba(221, 221, 221, 1) 100%) ; /* Opera 11.10+ */ - background: -ms-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(221, 221, 221, 1) 100%, rgba(209, 209, 209, 1) 100%, rgba(221, 221, 221, 1) 100%) ; /* IE10+ */ - background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(221, 221, 221, 1) 100%, rgba(209, 209, 209, 1) 100%, rgba(221, 221, 221, 1) 100%) ; /* W3C */ - filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#dddddd',GradientType=0 ) ; /* IE6-9 */ - -webkit-box-shadow: 1px 1px 0px #eee ; - -moz-box-shadow: 1px 1px 0px #eee ; - -o-box-shadow: 1px 1px 0px #eee ; - box-shadow: 1px 1px 0px #eee ; - outline: initial ; + color: #529; +} + +.onesignal-reset a, +.onesignal-reset a *, +.onesignal-reset input[type='submit'], +.onesignal-reset input[type='radio'], +.onesignal-reset input[type='checkbox'], +.onesignal-reset select { + cursor: pointer; +} + +.onesignal-reset button, +.onesignal-reset input[type='submit'] { + text-align: center; + padding: 2px 6px 3px; + border-radius: 4px; + text-decoration: none; + font-family: arial, helvetica, sans-serif; + font-size: small; + background: white; + appearance: button; + color: buttontext; + border: 1px #a6a6a6 solid; + background: lightgrey; /* Old browsers */ + background: rgb(255, 255, 255); /* Old browsers */ + background: -moz-linear-gradient( + top, + rgba(255, 255, 255, 1) 0%, + rgba(221, 221, 221, 1) 100%, + rgba(209, 209, 209, 1) 100%, + rgba(221, 221, 221, 1) 100% + ); /* FF3.6+ */ + background: -webkit-gradient( + linear, + left top, + left bottom, + color-stop(0%, rgba(255, 255, 255, 1)), + color-stop(100%, rgba(221, 221, 221, 1)), + color-stop(100%, rgba(209, 209, 209, 1)), + color-stop(100%, rgba(221, 221, 221, 1)) + ); /* Chrome,Safari4+ */ + background: -webkit-linear-gradient( + top, + rgba(255, 255, 255, 1) 0%, + rgba(221, 221, 221, 1) 100%, + rgba(209, 209, 209, 1) 100%, + rgba(221, 221, 221, 1) 100% + ); /* Chrome10+,Safari5.1+ */ + background: -o-linear-gradient( + top, + rgba(255, 255, 255, 1) 0%, + rgba(221, 221, 221, 1) 100%, + rgba(209, 209, 209, 1) 100%, + rgba(221, 221, 221, 1) 100% + ); /* Opera 11.10+ */ + background: -ms-linear-gradient( + top, + rgba(255, 255, 255, 1) 0%, + rgba(221, 221, 221, 1) 100%, + rgba(209, 209, 209, 1) 100%, + rgba(221, 221, 221, 1) 100% + ); /* IE10+ */ + background: linear-gradient( + to bottom, + rgba(255, 255, 255, 1) 0%, + rgba(221, 221, 221, 1) 100%, + rgba(209, 209, 209, 1) 100%, + rgba(221, 221, 221, 1) 100% + ); /* W3C */ + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#dddddd',GradientType=0 ); /* IE6-9 */ + -webkit-box-shadow: 1px 1px 0px #eee; + -moz-box-shadow: 1px 1px 0px #eee; + -o-box-shadow: 1px 1px 0px #eee; + box-shadow: 1px 1px 0px #eee; + outline: initial; } .onesignal-reset button { - padding: 1px 6px 2px 6px ; - margin-right: 5px ; + padding: 1px 6px 2px 6px; + margin-right: 5px; } -.onesignal-reset input[type=hidden]:not([class^="iti"]) { - display: none ; +.onesignal-reset input[type='hidden']:not([class^='iti']) { + display: none; } /* restore form defaults */ .onesignal-reset textarea { - -webkit-appearance: textarea ; - background: white ; - padding: 2px ; - margin-left: 4px ; - word-wrap: break-word ; - white-space: pre-wrap ; - font-size: 11px ; - font-family: arial, helvetica, sans-serif ; - line-height: 13px ; - resize: both ; + -webkit-appearance: textarea; + background: white; + padding: 2px; + margin-left: 4px; + word-wrap: break-word; + white-space: pre-wrap; + font-size: 11px; + font-family: arial, helvetica, sans-serif; + line-height: 13px; + resize: both; } -.onesignal-reset select, .onesignal-reset textarea, .onesignal-reset input { - border: 1px solid #ccc ; +.onesignal-reset select, +.onesignal-reset textarea, +.onesignal-reset input { + border: 1px solid #ccc; } .onesignal-reset select { - font-size: 11px ; - font-family: helvetica, arial, sans-serif ; - display: inline-block; -} - -.onesignal-reset textarea:focus, .onesignal-reset input:focus { - outline: auto 5px -webkit-focus-ring-color ; - outline: initial ; -} - -.onesignal-reset input[type=text] { - background: white ; - padding: 1px ; - font-family: initial ; - font-size: small ; -} - -.onesignal-reset input[type=checkbox], .onesignal-reset input[type=radio] { - border: 1px #2b2b2b solid ; - border-radius: 4px ; -} - -.onesignal-reset input[type=checkbox], .onesignal-reset input[type=radio] { - outline: intial ; -} - -.onesignal-reset input[type=radio] { - margin: 2px 2px 3px 2px ; -} - -.onesignal-reset input[type=submit]:active, .onesignal-reset button:active { - background: rgb(59, 103, 158) ; /* Old browsers */ - background: -moz-linear-gradient(top, rgba(59, 103, 158, 1) 0%, rgba(43, 136, 217, 1) 50%, rgba(32, 124, 202, 1) 51%, rgba(125, 185, 232, 1) 100%) ; /* FF3.6+ */ - background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(59, 103, 158, 1)), color-stop(50%, rgba(43, 136, 217, 1)), color-stop(51%, rgba(32, 124, 202, 1)), color-stop(100%, rgba(125, 185, 232, 1))) ; /* Chrome,Safari4+ */ - background: -webkit-linear-gradient(top, rgba(59, 103, 158, 1) 0%, rgba(43, 136, 217, 1) 50%, rgba(32, 124, 202, 1) 51%, rgba(125, 185, 232, 1) 100%) ; /* Chrome10+,Safari5.1+ */ - background: -o-linear-gradient(top, rgba(59, 103, 158, 1) 0%, rgba(43, 136, 217, 1) 50%, rgba(32, 124, 202, 1) 51%, rgba(125, 185, 232, 1) 100%) ; /* Opera 11.10+ */ - background: -ms-linear-gradient(top, rgba(59, 103, 158, 1) 0%, rgba(43, 136, 217, 1) 50%, rgba(32, 124, 202, 1) 51%, rgba(125, 185, 232, 1) 100%) ; /* IE10+ */ - background: linear-gradient(to bottom, rgba(59, 103, 158, 1) 0%, rgba(43, 136, 217, 1) 50%, rgba(32, 124, 202, 1) 51%, rgba(125, 185, 232, 1) 100%) ; /* W3C */ - border-color: #5259b0 ; -} - -.onesignal-reset abbr[title], .onesignal-reset acronym[title], .onesignal-reset dfn[title] { - cursor: help ; - border-bottom-width: 1px ; - border-bottom-style: dotted ; + font-size: 11px; + font-family: helvetica, arial, sans-serif; + display: inline-block; +} + +.onesignal-reset textarea:focus, +.onesignal-reset input:focus { + outline: auto 5px -webkit-focus-ring-color; + outline: initial; +} + +.onesignal-reset input[type='text'] { + background: white; + padding: 1px; + font-family: initial; + font-size: small; +} + +.onesignal-reset input[type='checkbox'], +.onesignal-reset input[type='radio'] { + border: 1px #2b2b2b solid; + border-radius: 4px; +} + +.onesignal-reset input[type='checkbox'], +.onesignal-reset input[type='radio'] { + outline: intial; +} + +.onesignal-reset input[type='radio'] { + margin: 2px 2px 3px 2px; +} + +.onesignal-reset input[type='submit']:active, +.onesignal-reset button:active { + background: rgb(59, 103, 158); /* Old browsers */ + background: -moz-linear-gradient( + top, + rgba(59, 103, 158, 1) 0%, + rgba(43, 136, 217, 1) 50%, + rgba(32, 124, 202, 1) 51%, + rgba(125, 185, 232, 1) 100% + ); /* FF3.6+ */ + background: -webkit-gradient( + linear, + left top, + left bottom, + color-stop(0%, rgba(59, 103, 158, 1)), + color-stop(50%, rgba(43, 136, 217, 1)), + color-stop(51%, rgba(32, 124, 202, 1)), + color-stop(100%, rgba(125, 185, 232, 1)) + ); /* Chrome,Safari4+ */ + background: -webkit-linear-gradient( + top, + rgba(59, 103, 158, 1) 0%, + rgba(43, 136, 217, 1) 50%, + rgba(32, 124, 202, 1) 51%, + rgba(125, 185, 232, 1) 100% + ); /* Chrome10+,Safari5.1+ */ + background: -o-linear-gradient( + top, + rgba(59, 103, 158, 1) 0%, + rgba(43, 136, 217, 1) 50%, + rgba(32, 124, 202, 1) 51%, + rgba(125, 185, 232, 1) 100% + ); /* Opera 11.10+ */ + background: -ms-linear-gradient( + top, + rgba(59, 103, 158, 1) 0%, + rgba(43, 136, 217, 1) 50%, + rgba(32, 124, 202, 1) 51%, + rgba(125, 185, 232, 1) 100% + ); /* IE10+ */ + background: linear-gradient( + to bottom, + rgba(59, 103, 158, 1) 0%, + rgba(43, 136, 217, 1) 50%, + rgba(32, 124, 202, 1) 51%, + rgba(125, 185, 232, 1) 100% + ); /* W3C */ + border-color: #5259b0; +} + +.onesignal-reset abbr[title], +.onesignal-reset acronym[title], +.onesignal-reset dfn[title] { + cursor: help; + border-bottom-width: 1px; + border-bottom-style: dotted; } .onesignal-reset ins { - background-color: #ff9 ; - color: black ; + background-color: #ff9; + color: black; } .onesignal-reset del { - text-decoration: line-through ; + text-decoration: line-through; } -.onesignal-reset blockquote, .onesignal-reset q { - quotes: none ; /* HTML5 */ +.onesignal-reset blockquote, +.onesignal-reset q { + quotes: none; /* HTML5 */ } -.onesignal-reset blockquote:before, .onesignal-reset blockquote:after, .onesignal-reset q:before, .onesignal-reset q:after, .onesignal-reset li:before, .onesignal-reset li:after { - content: "" ; +.onesignal-reset blockquote:before, +.onesignal-reset blockquote:after, +.onesignal-reset q:before, +.onesignal-reset q:after, +.onesignal-reset li:before, +.onesignal-reset li:after { + content: ''; } -.onesignal-reset input, .onesignal-reset select { - vertical-align: middle ; +.onesignal-reset input, +.onesignal-reset select { + vertical-align: middle; } .onesignal-reset table { - border-collapse: collapse ; - border-spacing: 0 ; + border-collapse: collapse; + border-spacing: 0; } .onesignal-reset hr { - display: block ; - height: 1px ; - border: 0 ; - border-top: 1px solid #ccc ; - margin: 1em 0 ; + display: block; + height: 1px; + border: 0; + border-top: 1px solid #ccc; + margin: 1em 0; } -.onesignal-reset *[dir=rtl] { - direction: rtl ; +.onesignal-reset *[dir='rtl'] { + direction: rtl; } .onesignal-reset mark { - background-color: #ff9 ; - color: black ; - font-style: italic ; - font-weight: bold ; + background-color: #ff9; + color: black; + font-style: italic; + font-weight: bold; } .onesignal-reset menu { - padding-left: 40px ; - padding-top: 8px ; + padding-left: 40px; + padding-top: 8px; } /* additional helpers */ .onesignal-reset [hidden], .onesignal-reset template { - display: none ; + display: none; } .onesignal-reset abbr[title] { - border-bottom: 1px dotted ; + border-bottom: 1px dotted; } -.onesignal-reset sub, .onesignal-reset sup { - font-size: 75% ; - line-height: 0 ; - position: relative ; - vertical-align: baseline ; +.onesignal-reset sub, +.onesignal-reset sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; } .onesignal-reset sup { - top: -0.5em ; + top: -0.5em; } .onesignal-reset sub { - bottom: -0.25em ; + bottom: -0.25em; } .onesignal-reset img { - border: 0 ; + border: 0; } .onesignal-reset figure { - margin: 0 ; + margin: 0; } .onesignal-reset textarea { - overflow: auto ; - vertical-align: top ; + overflow: auto; + vertical-align: top; } /* == ROOT CONTAINER ELEMENT == */ /* This contains default values for child elements to inherit */ .onesignal-reset { - font-size: medium ; - line-height: 1 ; - direction: ltr ; - text-align: left ; /* for IE, Opera */ - text-align: start ; /* recommended W3C Spec */ - font-family: "Times New Roman", Times, serif ; /* Override this with whatever font-family is required */ - color: black ; - font-style: normal ; - font-weight: normal ; - text-decoration: none ; - list-style-type: disc ; + font-size: medium; + line-height: 1; + direction: ltr; + text-align: left; /* for IE, Opera */ + text-align: start; /* recommended W3C Spec */ + font-family: 'Times New Roman', Times, serif; /* Override this with whatever font-family is required */ + color: black; + font-style: normal; + font-weight: normal; + text-decoration: none; + list-style-type: disc; } .onesignal-reset pre { - white-space: pre ; -} \ No newline at end of file + white-space: pre; +} diff --git a/src/stylesheets/slidedown.scss b/src/stylesheets/slidedown.scss index e1e5e0b82..5964cdcb3 100755 --- a/src/stylesheets/slidedown.scss +++ b/src/stylesheets/slidedown.scss @@ -17,7 +17,8 @@ $desktop-width: 1024px; } .iti--container { - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, + Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; @include mobile { z-index: 2258594001 !important; @@ -32,7 +33,8 @@ $desktop-width: 1024px; } } -#onesignal-slidedown-container, #onesignal-popover-container { +#onesignal-slidedown-container, +#onesignal-popover-container { font-size: 16px; position: fixed; z-index: 2258594000; @@ -73,23 +75,23 @@ $desktop-width: 1024px; .onesignal-error-input { label: { - color:#646D74; + color: #646d74; } input { - background: #FCECEC; - border:1px solid #E54B4D; + background: #fcecec; + border: 1px solid #e54b4d; &:focus { - background: #FCECEC; - border:1px solid #E54B4D; + background: #fcecec; + border: 1px solid #e54b4d; } } } input { - border: 1px solid #CED3D8; - background: #FFFFFF; + border: 1px solid #ced3d8; + background: #ffffff; box-sizing: border-box; border-radius: 4px; height: 36px; @@ -102,8 +104,8 @@ $desktop-width: 1024px; } &:focus { - background: #E5F2FC; - border: 1px solid #1F8FEB; + background: #e5f2fc; + border: 1px solid #1f8feb; } } } @@ -122,7 +124,7 @@ $desktop-width: 1024px; } label { - color: #051B2C; + color: #051b2c; } @include tablet { @@ -143,7 +145,7 @@ $desktop-width: 1024px; background-color: transparent; border-radius: 4px; - &:focus{ + &:focus { outline: #0078d1; } } @@ -152,7 +154,7 @@ $desktop-width: 1024px; width: 356px; box-shadow: 0px 1px 4px rgba(5, 27, 44, 0.2); border-radius: 4px; - background: #FFFFFF; + background: #ffffff; border: none; line-height: 28px; } @@ -180,7 +182,8 @@ $desktop-width: 1024px; top: 0; &.close-slidedown { - #onesignal-slidedown-dialog, #onesignal-popover-dialog { + #onesignal-slidedown-dialog, + #onesignal-popover-dialog { -webkit-animation-name: slideDownExit; -webkit-animation-iteration-count: 1; -webkit-animation-timing-function: ease-out; @@ -194,7 +197,8 @@ $desktop-width: 1024px; } } - #onesignal-slidedown-dialog, #onesignal-popover-dialog { + #onesignal-slidedown-dialog, + #onesignal-popover-dialog { width: 500px; -webkit-animation-name: slideDownEnter; @@ -212,10 +216,12 @@ $desktop-width: 1024px; #blocked-slidedown { display: block; } - #normal-slidedown, #normal-popover { + #normal-slidedown, + #normal-popover { display: none; } - .slidedown-body-message, .popover-body-message { + .slidedown-body-message, + .popover-body-message { padding: 0 0.2em 0 0.2em; text-align: center; width: 100%; @@ -231,22 +237,26 @@ $desktop-width: 1024px; width: 612px; margin-bottom: 18px; - .slidedown-button.secondary, .popover-button.secondary { + .slidedown-button.secondary, + .popover-button.secondary { padding: 0.714em 2em; } } } } - #blocked-slidedown, #blocked-popover { + #blocked-slidedown, + #blocked-popover { display: none; } &.slide-up { bottom: 0; - &.close-slidedown, &.close-popover { - #onesignal-slidedown-dialog, #onesignal-popover-dialog { + &.close-slidedown, + &.close-popover { + #onesignal-slidedown-dialog, + #onesignal-popover-dialog { -webkit-animation-name: slideUpExit; -webkit-animation-iteration-count: 1; -webkit-animation-timing-function: ease-out; @@ -260,7 +270,8 @@ $desktop-width: 1024px; } } - #onesignal-slidedown-dialog, #onesignal-popover-dialog { + #onesignal-slidedown-dialog, + #onesignal-popover-dialog { border-bottom-left-radius: unset; border-bottom-right-radius: unset; width: 100%; @@ -293,7 +304,7 @@ $desktop-width: 1024px; position: relative; padding-left: 2.5em; margin-bottom: 1.5em; - color: #051B2C; + color: #051b2c; font-size: 1em; -webkit-user-select: none; -moz-user-select: none; @@ -302,7 +313,7 @@ $desktop-width: 1024px; height: 1.5em; width: 80%; line-height: 1.5em; - float:left; + float: left; .onesignal-category-label-input { position: absolute; @@ -314,7 +325,7 @@ $desktop-width: 1024px; /* When the checkbox is checked, add a blue background */ &:checked ~ .onesignal-checkmark { transition: ease 75ms; - background-color: #0078D1; + background-color: #0078d1; } &:checked ~ .onesignal-checkmark:after { @@ -343,13 +354,13 @@ $desktop-width: 1024px; left: 0; height: 1.5em; width: 1.5em; - border-radius: .25em; + border-radius: 0.25em; cursor: pointer; background-color: #ebedef; /* Create the checkmark/indicator (hidden when not checked) */ &:after { - content: ""; + content: ''; position: absolute; display: none; left: 0.5em; @@ -375,8 +386,8 @@ $desktop-width: 1024px; & .onesignal-loading-message { flex: 1; - color: #CED3D8; - margin-top: .8125em; + color: #ced3d8; + margin-top: 0.8125em; } } @@ -385,24 +396,31 @@ $desktop-width: 1024px; margin-left: 0.5em; } - #onesignal-slidedown-dialog, #onesignal-popover-dialog { + #onesignal-slidedown-dialog, + #onesignal-popover-dialog { box-sizing: border-box; max-width: 100%; margin: 0 auto; - box-shadow: 0 1px 6px rgba(5,27,44,.06), 0 2px 32px rgba(5,27,44,.16) !important; + box-shadow: + 0 1px 6px rgba(5, 27, 44, 0.06), + 0 2px 32px rgba(5, 27, 44, 0.16) !important; background: white !important; color: #051b2c; padding: 1.5em 1.5em; border-bottom-left-radius: $border-radius; border-bottom-right-radius: $border-radius; - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Seoe UI Symbol"; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, + Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', + 'Seoe UI Symbol'; - .slidedown-body, .popover-body { + .slidedown-body, + .popover-body { box-sizing: border-box; margin: 0; } - .slidedown-body-icon, .popover-body-icon { + .slidedown-body-icon, + .popover-body-icon { box-sizing: border-box; float: left; width: 80px; @@ -424,7 +442,8 @@ $desktop-width: 1024px; } } - .slidedown-body-message, .popover-body-message { + .slidedown-body-message, + .popover-body-message { box-sizing: border-box; padding: 0 0 0 1em; font-weight: 400; @@ -434,13 +453,13 @@ $desktop-width: 1024px; -o-user-select: none; user-select: none; cursor: default; - color: #051B2C !important; + color: #051b2c !important; } button { box-sizing: border-box; display: inline-block; - padding: .375rem 1rem; + padding: 0.375rem 1rem; font-size: 0.9625em; font-weight: 400; line-height: 1.5; @@ -453,7 +472,7 @@ $desktop-width: 1024px; -ms-user-select: none; user-select: none; border: 1px solid transparent; - border-radius: .25rem; + border-radius: 0.25rem; font-family: inherit; letter-spacing: 0.05em; -webkit-transition: background-color 75ms ease; @@ -461,35 +480,36 @@ $desktop-width: 1024px; margin: 0; } - .slidedown-button, .popover-button { + .slidedown-button, + .popover-button { padding: 0.75em 1.5em; font-size: 1em; - border-radius: .25em; + border-radius: 0.25em; font-weight: 400; box-shadow: unset; display: flex; &.primary { - background: #0078D1; + background: #0078d1; color: white !important; transition: linear 75ms; &:hover { - background: darken(#0078D1, 7.5%); + background: darken(#0078d1, 7.5%); } &:active { - background: darken(#0078D1, 15%); + background: darken(#0078d1, 15%); } &.disabled { - background-color: #CED3D8; + background-color: #ced3d8; cursor: default; } &.onesignal-saving-state-button { padding: 0.75em 1em; - background: #CED3D8; + background: #ced3d8; transition: linear 75ms; } @@ -518,23 +538,25 @@ $desktop-width: 1024px; We sparingly use an !important tag here because it's important for the user to be able to click "No Thanks". Some sites set their own !important tag for text and we don't want that to be able to override ours. */ - color: #0078D1 !important; + color: #0078d1 !important; &:hover { - color: darken(#0078D1, 12.5%); + color: darken(#0078d1, 12.5%); } &:active { - color: darken(#0078D1, 30.5%); + color: darken(#0078d1, 30.5%); } } } - .primary.slidedown-button+.secondary.slidedown-button, .primary.popover-button+.secondary.popover-button { + .primary.slidedown-button + .secondary.slidedown-button, + .primary.popover-button + .secondary.popover-button { margin-right: 0.714em; } - .slidedown-footer, .popover-footer { + .slidedown-footer, + .popover-footer { position: relative; } @@ -556,8 +578,8 @@ $desktop-width: 1024px; .onesignal-tag-failure-message { display: flex; - float:left; - color:red; + float: left; + color: red; } } }