diff --git a/src/Sass/_esuiteVariables.scss b/src/Sass/_esuiteVariables.scss index 9553559..70ee59d 100644 --- a/src/Sass/_esuiteVariables.scss +++ b/src/Sass/_esuiteVariables.scss @@ -6,6 +6,7 @@ $pink: #de6c74 !default; $red: #b00020 !default; $orange: #fd7e14 !default; $yellow: #ee9700 !default; +$yellow-bright: #fffe4e !default; $green: #004733 !default; $teal: #00bb9c !default; $cyan: #0dcaf0 !default; @@ -29,3 +30,8 @@ $leftMenu-color: #ddd; $leftMenu-HoverColour: $blue; $leftMenu-selected-color: $blue; $leftMenu-submenu-open: $blue; + +// Sticker +$sticker-background: $yellow-bright; +$sticker-color: $leftMenu-background; +$sticker-border-color: darken($yellow-bright, 10%); diff --git a/src/Sass/_frame.scss b/src/Sass/_frame.scss index d7550c0..d9e20b7 100644 --- a/src/Sass/_frame.scss +++ b/src/Sass/_frame.scss @@ -4,29 +4,6 @@ width: 100vw; height: 100vh; overflow: hidden; - - .sticker { - position: fixed; - top: 30px; - left: -60px; - padding: 4px 0; - width: 200px; - text-align: center; - text-transform: uppercase; - font-weight: bold; - font-size: 0.875em; - line-height: 1em; - background: #fffe4e; - color: #333; - border-top: 2px solid #c9c353; - border-bottom: 2px solid #c9c353; - -webkit-transform: rotate(-45deg); - -moz-transform: rotate(-45deg); - -ms-transform: rotate(-45deg); - -o-transform: rotate(-45deg); - transform: rotate(-45deg); - z-index: 2; - } } .frame-row { diff --git a/src/Sass/_sticker.scss b/src/Sass/_sticker.scss new file mode 100644 index 0000000..79a9d9d --- /dev/null +++ b/src/Sass/_sticker.scss @@ -0,0 +1,24 @@ +@import "./_esuiteVariables.scss"; + +.sticker { + position: fixed; + top: 30px; + left: -60px; + padding: 4px 0; + width: 200px; + text-align: center; + text-transform: uppercase; + font-weight: bold; + font-size: 0.875em; + line-height: 1em; + background: $sticker-background; + color: $sticker-color; + border-top: 2px solid $sticker-border-color; + border-bottom: 2px solid $sticker-border-color; + -webkit-transform: rotate(-45deg); + -moz-transform: rotate(-45deg); + -ms-transform: rotate(-45deg); + -o-transform: rotate(-45deg); + transform: rotate(-45deg); + z-index: 2; +}