From b14833fbb56bcd5bff0750c16fd9214009b955be Mon Sep 17 00:00:00 2001 From: Zara Gebru Date: Fri, 2 Dec 2016 15:25:23 +0100 Subject: [refactor] move app dir into public dir --- web-ui/app/scss/_mixins.scss | 71 - web-ui/app/scss/_others.scss | 72 - web-ui/app/scss/base/_colors.scss | 64 - web-ui/app/scss/base/_fonts.scss | 68 - web-ui/app/scss/base/_scaffolding.scss | 10 - web-ui/app/scss/mixins/_position-helpers.scss | 9 - web-ui/app/scss/mixins/_tags.scss | 110 -- web-ui/app/scss/sandbox.scss | 27 - web-ui/app/scss/style.scss | 39 - .../scss/templates/_no-content-placeholder.scss | 5 - web-ui/app/scss/templates/_unread-count.scss | 14 - web-ui/app/scss/vendor/_customfont.scss | 9 - web-ui/app/scss/vendor/_foundation.scss | 2066 -------------------- web-ui/app/scss/vendor/_reset.scss | 421 ---- web-ui/app/scss/vendor/_scut.scss | 1518 -------------- web-ui/app/scss/views/_action-bar.scss | 159 -- web-ui/app/scss/views/_close-button.scss | 22 - web-ui/app/scss/views/_compose-button.scss | 27 - web-ui/app/scss/views/_compose-view.scss | 451 ----- web-ui/app/scss/views/_mail-list.scss | 124 -- web-ui/app/scss/views/_message-panel.scss | 26 - web-ui/app/scss/views/_navigation.scss | 589 ------ web-ui/app/scss/views/_no-mails-available.scss | 3 - web-ui/app/scss/views/_no-message-selected.scss | 14 - web-ui/app/scss/views/_read-view.scss | 165 -- web-ui/app/scss/views/_security-labels.scss | 67 - 26 files changed, 6150 deletions(-) delete mode 100644 web-ui/app/scss/_mixins.scss delete mode 100644 web-ui/app/scss/_others.scss delete mode 100644 web-ui/app/scss/base/_colors.scss delete mode 100644 web-ui/app/scss/base/_fonts.scss delete mode 100644 web-ui/app/scss/base/_scaffolding.scss delete mode 100644 web-ui/app/scss/mixins/_position-helpers.scss delete mode 100644 web-ui/app/scss/mixins/_tags.scss delete mode 100644 web-ui/app/scss/sandbox.scss delete mode 100644 web-ui/app/scss/style.scss delete mode 100644 web-ui/app/scss/templates/_no-content-placeholder.scss delete mode 100644 web-ui/app/scss/templates/_unread-count.scss delete mode 100644 web-ui/app/scss/vendor/_customfont.scss delete mode 100644 web-ui/app/scss/vendor/_foundation.scss delete mode 100644 web-ui/app/scss/vendor/_reset.scss delete mode 100644 web-ui/app/scss/vendor/_scut.scss delete mode 100644 web-ui/app/scss/views/_action-bar.scss delete mode 100644 web-ui/app/scss/views/_close-button.scss delete mode 100644 web-ui/app/scss/views/_compose-button.scss delete mode 100644 web-ui/app/scss/views/_compose-view.scss delete mode 100644 web-ui/app/scss/views/_mail-list.scss delete mode 100644 web-ui/app/scss/views/_message-panel.scss delete mode 100644 web-ui/app/scss/views/_navigation.scss delete mode 100644 web-ui/app/scss/views/_no-mails-available.scss delete mode 100644 web-ui/app/scss/views/_no-message-selected.scss delete mode 100644 web-ui/app/scss/views/_read-view.scss delete mode 100644 web-ui/app/scss/views/_security-labels.scss (limited to 'web-ui/app/scss') diff --git a/web-ui/app/scss/_mixins.scss b/web-ui/app/scss/_mixins.scss deleted file mode 100644 index d3aa0220..00000000 --- a/web-ui/app/scss/_mixins.scss +++ /dev/null @@ -1,71 +0,0 @@ -// SHARED MIXINS -@mixin btn-transition { - @include transition-property(background-color); - @include transition-duration(300ms); - @include transition-timing-function(ease-out); -} - -@mixin tooltip($top: 8px, $left: 40px) { - background: rgba(0, 0, 0, 0.7); - color: $white; - position: absolute; - z-index: 2; - left: $left; - top: $top; - font-size: 0.8rem; - padding: 2px 10px; - white-space: nowrap; - @include border-radius(2px); -} - -// FORM MIXINS -@mixin check-box { - background-color: $white; - border: 1px solid $light_gray; - padding: 7px; - margin: 3px 0; - cursor: pointer; - display: inline-block; - position: relative; - @include border-radius(2px); - @include appearance(none); - - &:focus { - outline: none; - border-color: $medium_dark_grey; - } - - &:active, &:checked:active { - } - - &:checked { - background-color: $contrast; - border: 1px solid darken($lighter_gray, 10%); - color: $dark_grey; - } - - &:checked:after { - content: '\2714'; - font-size: 1em; - position: absolute; - bottom: -2px; - left: 1px; - color: $navigation_background; - } -} - - -@mixin searching($top, $left, $color, $size){ - &.searching { - &:after { - font-family: FontAwesome; - content: "\f002"; - font-size: $size; - top: $top; - left: $left; - position: absolute; - color: $color; - text-shadow: -1px 0 $contrast, 0 1px $contrast, 1px 0 $contrast, 0 -1px $contrast; - } - } -} diff --git a/web-ui/app/scss/_others.scss b/web-ui/app/scss/_others.scss deleted file mode 100644 index 039d94bd..00000000 --- a/web-ui/app/scss/_others.scss +++ /dev/null @@ -1,72 +0,0 @@ -.hidden { - display: none; -} - -.no-padding { - padding: 0; -} - -.text-right { - text-align: right; -} - -.search-highlight { - background-color: $search-highlight; -} - -button { - border: 1px solid transparent; - - i { - margin-left: 5px; - } - - &#trash-button { - background: $white; - border: 1px solid $medium_light_grey; - color: $medium_light_grey; - float: right; - margin-left: 5px; - - &:hover, &:focus { - background: $contrast; - } - } - - &.no-style { - background: transparent; - color: $medium_light_grey; - padding: 0; - margin: 0; - - i { - margin: 0; - padding: 0; - vertical-align: middle; - } - } -} - -section { - display: inline-block; - vertical-align: top; - height: 100vh; - overflow-y: scroll; - - &#left-pane { - background-color: $navigation_background; - color: white; - } - - &#middle-pane { - background: $white; - } - - &#right-pane { - padding: 0 10px 60px 0px; - background: $white; - box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.12); - z-index: 2; - overflow-y: auto; - } -} diff --git a/web-ui/app/scss/base/_colors.scss b/web-ui/app/scss/base/_colors.scss deleted file mode 100644 index 17333ff9..00000000 --- a/web-ui/app/scss/base/_colors.scss +++ /dev/null @@ -1,64 +0,0 @@ -/* Pixelated Color Palette - don't change these! */ -$dark_slate_gray: #3E3A37; -$light_gray: #C2C2C2; -$lighter_blue: #91C2D1; -$light_blue: #3DABC4; -$dark_blue: #178CA6; -$bullet-blue: #5cacde; -$light_orange: #FF9C00; -$dark_orange: #FF7902; - - -/* Side nav background color */ -$navigation_background: $dark_slate_gray; - -/* Action buttons and links */ -$action_buttons: $light_blue; - -/* Primary Highlight*/ -$primary_highlight: $light_orange; - -/* Logo color*/ -$logo_color: $light_orange; - -/* Unread count dialog bubble background color */ -$secondary_callout: darken($primary_highlight, 5); - -/* Grayscale */ -$contrast: #EEE; -$white: #FFF; -$dark_white: #FAFAFA; -$lighter_gray: #DDD; -$medium_light_grey: #999; -$medium_grey: #777; -$medium_dark_grey: #666; -$dark_grey: #333; -$black: #000; -$top_pane: $contrast; -$total_count_bg: #C0B9B9; -$background_dropdown_grey: #f0f0f0; - -$background_light_grey: #F5F5F5; -$border_light_grey: #D9D9D9; - -/* Feedback to Users */ -$warning: #F7E8AF; -$search-highlight: #FFEF29; - -/* Light gray indicator icons */ -$indicator_icon_color: $light_gray; - -$error: #D93C38; -$attention: #F6A41C; -$success: #50BA5B; - -$will_be_encrypted: $success; -$wont_be_encrypted: $attention; -$recipients_font_color: #828282; - -/* Attachments */ -$attachment_text: #555; -$attachment_icon: lighten($attachment_text, 30); -$attachment_size: lighten($attachment_text, 30); -$attachment_area_background: #F5F5F5; -$attachment_area_border: #D9D9D9; diff --git a/web-ui/app/scss/base/_fonts.scss b/web-ui/app/scss/base/_fonts.scss deleted file mode 100644 index dfc56dd8..00000000 --- a/web-ui/app/scss/base/_fonts.scss +++ /dev/null @@ -1,68 +0,0 @@ -@font-face { - font-family: 'Open Sans'; - font-style: normal; - font-weight: 300; - src: local('Open Sans Light'), local('OpenSans-Light'), url('/assets/fonts/OpenSans-Light.woff') format('woff'); -} -@font-face { - font-family: 'Open Sans'; - font-style: normal; - font-weight: 400; - src: local('Open Sans'), local('OpenSans'), url('/assets/fonts/OpenSans.woff') format('woff'); -} -@font-face { - font-family: 'Open Sans'; - font-style: normal; - font-weight: 600; - src: local('Open Sans Semibold'), local('OpenSans-Semibold'), url('/assets/fonts/OpenSans-Semibold.woff') format('woff'); -} -@font-face { - font-family: 'Open Sans'; - font-style: normal; - font-weight: 700; - src: local('Open Sans Bold'), local('OpenSans-Bold'), url('/assets/fonts/OpenSans-Bold.woff') format('woff'); -} -@font-face { - font-family: 'Open Sans'; - font-style: normal; - font-weight: 800; - src: local('Open Sans Extrabold'), local('OpenSans-Extrabold'), url('/assets/fonts/OpenSans-Extrabold.woff') format('woff'); -} -@font-face { - font-family: 'Open Sans'; - font-style: italic; - font-weight: 300; - src: local('Open Sans Light Italic'), local('OpenSansLight-Italic'), url('/assets/fonts/OpenSansLight-Italic.woff') format('woff'); -} -@font-face { - font-family: 'Open Sans'; - font-style: italic; - font-weight: 400; - src: local('Open Sans Italic'), local('OpenSans-Italic'), url('/assets/fonts/OpenSans-Italic.woff') format('woff'); -} -@font-face { - font-family: 'Open Sans'; - font-style: italic; - font-weight: 600; - src: local('Open Sans Semibold Italic'), local('OpenSans-SemiboldItalic'), url('/assets/fonts/OpenSans-SemiboldItalic.woff') format('woff'); -} -@font-face { - font-family: 'Open Sans'; - font-style: italic; - font-weight: 700; - src: local('Open Sans Bold Italic'), local('OpenSans-BoldItalic'), url('/assets/fonts/OpenSans-BoldItalic.woff') format('woff'); -} -@font-face { - font-family: 'Open Sans'; - font-style: italic; - font-weight: 800; - src: local('Open Sans Extrabold Italic'), local('OpenSans-ExtraboldItalic'), url('/assets/fonts/OpenSans-ExtraboldItalic.woff') format('woff'); -} - -@font-face { - font-family: 'icomoon'; - font-style: normal; - font-weight: 400; - src: url('/assets/fonts/icomoon.woff') format('woff'), url('/assets/fonts/icomoon.ttf') format('truetype'), ; -} - diff --git a/web-ui/app/scss/base/_scaffolding.scss b/web-ui/app/scss/base/_scaffolding.scss deleted file mode 100644 index b8b5fa3b..00000000 --- a/web-ui/app/scss/base/_scaffolding.scss +++ /dev/null @@ -1,10 +0,0 @@ -html { - height: 100% ; -} - -body { - min-height: 100% ; - overflow: hidden; - background: $white; -} - diff --git a/web-ui/app/scss/mixins/_position-helpers.scss b/web-ui/app/scss/mixins/_position-helpers.scss deleted file mode 100644 index 254bfc6c..00000000 --- a/web-ui/app/scss/mixins/_position-helpers.scss +++ /dev/null @@ -1,9 +0,0 @@ -@mixin absolute-center-unknown-height-width() { - margin: auto; - position: absolute; - left: 50%; - top: 50%; - -ms-transform: translate(-50%, -50%); - -webkit-transform: translate(-50%, -50%); - transform: translate(-50%, -50%); -} diff --git a/web-ui/app/scss/mixins/_tags.scss b/web-ui/app/scss/mixins/_tags.scss deleted file mode 100644 index 9bb287ea..00000000 --- a/web-ui/app/scss/mixins/_tags.scss +++ /dev/null @@ -1,110 +0,0 @@ -$tags-font-size: 0.6rem; - -@mixin tags { - & > * { - display: inline; - } - - &-tag { - font-size: $tags-font-size; - font-weight: 700; - background-color: $dark_blue; - color: white; - padding: 2px 4px; - margin: 0 1px; - border-radius: 2px; - } -} - -@mixin tags-editable { - @include tags; - - &-tag:hover { - text-decoration: line-through; - cursor: pointer; - position: relative; - - &:before { - @include tooltip(130%, 25%); - - content: "click to remove"; - text-transform: lowercase; - } - } - - &-label { - vertical-align: bottom; - color: $light_gray; - } - - &-new-button { - font-size: $tags-font-size; - padding: 0; - background: transparent; - border-radius: 2px; - padding: 2px; - - &:hover { - opacity: 1; - background: $lighter_gray; - } - } - - &-name-input { - opacity: 0.6; - transition: background-color 150ms ease-out; - - &:hover { - opacity: 1; - } - - // twitter typeahead classes. those are set via JS, with relatively high specificity, - // hence box-model-related properties are repeated - // https://github.com/twitter/typeahead.js/blob/master/doc/jquery_typeahead.md#class-names - - $suggestion-border: 1px solid darken($contrast, 5%); - $input-field-padding: 1px 5px; - $input-field-margin: 2px; - - & * .tt-input { - border-radius: $input-field-margin; - padding: $input-field-padding; - margin-top: 2px; - font-size: $tags-font-size; - } - - & * .tt-hint { - color: $medium_light_grey; - padding: $input-field-padding; - margin-top: $input-field-margin; - font-size: $tags-font-size; - background: transparent; - } - - & * .tt-dropdown-menu { - min-width: 250px; - padding: 0; - font-size: $tags-font-size; - background-color: $contrast; - border: $suggestion-border; - } - - & * .tt-suggestion { - padding: 5px 10px; - font-size: $tags-font-size; - border-bottom: $suggestion-border; - - &:last-child { - border-bottom: none; - } - - p { - margin: 0; - } - } - - & * .tt-cursor { - background-color: $white; - } - } -} diff --git a/web-ui/app/scss/sandbox.scss b/web-ui/app/scss/sandbox.scss deleted file mode 100644 index 3c1be358..00000000 --- a/web-ui/app/scss/sandbox.scss +++ /dev/null @@ -1,27 +0,0 @@ -$search-highlight: #FFEF29; - -@font-face { - font-family: 'Open Sans'; - font-style: normal; - font-weight: 400; - src: local('Open Sans'), local('OpenSans'), url('/sandbox/fonts/OpenSans.woff') format('woff'); -} - -body { - font-family: "Open Sans", "Microsoft YaHei", "Hiragino Sans GB", "Hiragino Sans GB W3", "微软雅黑", "Helvetica Neue", Arial, sans-serif; - font-size: 13px; - line-height: 1.2em; - background: white; - color: #333; - padding: 0; - margin: 0; - font-weight: normal; - -webkit-font-smoothing: antialiased; - font-style: normal; - box-sizing: border-box; - word-wrap: break-word; -} - -.search-highlight { - background-color: $search-highlight; -} diff --git a/web-ui/app/scss/style.scss b/web-ui/app/scss/style.scss deleted file mode 100644 index e99ab194..00000000 --- a/web-ui/app/scss/style.scss +++ /dev/null @@ -1,39 +0,0 @@ -// vendor stylesheets and resets -@import "vendor/reset"; -@import "vendor/scut"; -@import "compass/css3"; -@import "vendor/foundation"; -@import "vendor/customfont"; - -// basic configuration -@import "base/fonts"; -@import "base/colors"; -@import "base/scaffolding"; - -// mixins -@import "mixins/position-helpers"; -@import "mixins/tags"; - -// TODO -@import "mixins"; - -// templates -@import "templates/no-content-placeholder"; -@import "templates/unread-count"; - -// views -@import "views/message-panel"; -@import "views/close-button"; -@import "views/no-message-selected"; -@import "views/no-mails-available"; -@import "views/read-view"; -@import "views/security-labels"; -@import "views/compose-view"; -@import "views/compose-button"; -@import "views/mail-list"; -@import "views/_action-bar.scss"; -@import "views/_navigation.scss"; - -// misc stuff -@import "others"; - diff --git a/web-ui/app/scss/templates/_no-content-placeholder.scss b/web-ui/app/scss/templates/_no-content-placeholder.scss deleted file mode 100644 index c6807011..00000000 --- a/web-ui/app/scss/templates/_no-content-placeholder.scss +++ /dev/null @@ -1,5 +0,0 @@ -.no-content-placeholder { - @include absolute-center-unknown-height-width; - - color: $medium_dark_grey; -} diff --git a/web-ui/app/scss/templates/_unread-count.scss b/web-ui/app/scss/templates/_unread-count.scss deleted file mode 100644 index f7852227..00000000 --- a/web-ui/app/scss/templates/_unread-count.scss +++ /dev/null @@ -1,14 +0,0 @@ -.mail-count { - background: $white; - border-radius: 50%; - border: 1px solid $white; - color: $white; - font-size: 0.7em; - font-weight: 700; - left: 0; - margin-left: 5px; - opacity: 0.95; - padding: 0px 5px 0; - position: absolute; - top: 1px; -} diff --git a/web-ui/app/scss/vendor/_customfont.scss b/web-ui/app/scss/vendor/_customfont.scss deleted file mode 100644 index d72cca0f..00000000 --- a/web-ui/app/scss/vendor/_customfont.scss +++ /dev/null @@ -1,9 +0,0 @@ -[class^="icon-"], [class*=" icon-"] { - /* use !important to prevent issues with browser extensions that change fonts */ - font-family: 'icomoon' !important; - line-height: 1; -} - -.icon-px-sent:before { - content: "\e900"; -} diff --git a/web-ui/app/scss/vendor/_foundation.scss b/web-ui/app/scss/vendor/_foundation.scss deleted file mode 100644 index 7918cf26..00000000 --- a/web-ui/app/scss/vendor/_foundation.scss +++ /dev/null @@ -1,2066 +0,0 @@ -@import 'compass/css3'; - -meta { - &.foundation-version { - font-family: "/5.2.3/"; - } - &.foundation-mq-small { - font-family: "/only screen/"; - width: 0em; - } - &.foundation-mq-medium { - font-family: "/only screen and (min-width:40.063em)/"; - width: 40.063em; - } - &.foundation-mq-large { - font-family: "/only screen and (min-width:64.063em)/"; - width: 64.063em; - } - &.foundation-mq-xlarge { - font-family: "/only screen and (min-width:90.063em)/"; - width: 90.063em; - } - &.foundation-mq-xxlarge { - font-family: "/only screen and (min-width:120.063em)/"; - width: 120.063em; - } - &.foundation-data-attribute-namespace { - font-family: false; - } -} - -html, body { - height: 100%; -} - -* { - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; - &:before, &:after { - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; - } -} - -html { - font-size: 100%; -} - -body { - font-family: "Open Sans", "Microsoft YaHei", "Hiragino Sans GB", "Hiragino Sans GB W3", "微软雅黑", "Helvetica Neue", Arial, sans-serif; - font-size: 13px; - line-height: 1.2em; - background: white; - color: #333; - padding: 0; - margin: 0; - font-weight: normal; - -webkit-font-smoothing: antialiased; - font-style: normal; - position: relative; - cursor: default; -} - -a:hover { - cursor: pointer; -} - -img { - max-width: 100%; - height: auto; - -ms-interpolation-mode: bicubic; -} - -#map_canvas { - img, embed, object { - max-width: none !important; - } -} - -.map_canvas { - img, embed, object { - max-width: none !important; - } -} - -.left { - float: left !important; -} - -.right { - float: right !important; -} - -.clearfix { - &:before { - content: " "; - display: table; - } - &:after { - content: " "; - display: table; - clear: both; - } -} - -.hide { - display: none; -} - -.antialiased { - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -img { - display: inline-block; - vertical-align: middle; -} - -textarea { - height: auto; - min-height: 50px; - &:focus { - outline: none; - } -} - -select { - width: 100%; -} - -.row { - width: 100%; - margin-left: auto; - margin-right: auto; - margin-top: 0; - margin-bottom: 0; - &:before { - content: " "; - display: table; - } - &:after { - content: " "; - display: table; - clear: both; - } - &.collapse { - > { - .column, .columns { - padding-left: 0; - padding-right: 0; - } - } - .row { - margin-left: 0; - margin-right: 0; - } - } - .row { - width: auto; - margin-left: -0.9375em; - margin-right: -0.9375em; - margin-top: 0; - margin-bottom: 0; - max-width: none; - &:before { - content: " "; - display: table; - } - &:after { - content: " "; - display: table; - clear: both; - } - &.collapse { - width: auto; - margin: 0; - max-width: none; - &:before { - content: " "; - display: table; - } - &:after { - content: " "; - display: table; - clear: both; - } - } - } -} - -.column, .columns { - padding-left: 0.9375em; - padding-right: 0.9375em; - width: 100%; - float: left; -} - -@media only screen { - .small-push-0 { - position: relative; - left: 0%; - right: auto; - } - .small-pull-0 { - position: relative; - right: 0%; - left: auto; - } - .small-push-1 { - position: relative; - left: 8.33333%; - right: auto; - } - .small-pull-1 { - position: relative; - right: 8.33333%; - left: auto; - } - .small-push-2 { - position: relative; - left: 16.66667%; - right: auto; - } - .small-pull-2 { - position: relative; - right: 16.66667%; - left: auto; - } - .small-push-3 { - position: relative; - left: 25%; - right: auto; - } - .small-pull-3 { - position: relative; - right: 25%; - left: auto; - } - .small-push-4 { - position: relative; - left: 33.33333%; - right: auto; - } - .small-pull-4 { - position: relative; - right: 33.33333%; - left: auto; - } - .small-push-5 { - position: relative; - left: 41.66667%; - right: auto; - } - .small-pull-5 { - position: relative; - right: 41.66667%; - left: auto; - } - .small-push-6 { - position: relative; - left: 50%; - right: auto; - } - .small-pull-6 { - position: relative; - right: 50%; - left: auto; - } - .small-push-7 { - position: relative; - left: 58.33333%; - right: auto; - } - .small-pull-7 { - position: relative; - right: 58.33333%; - left: auto; - } - .small-push-8 { - position: relative; - left: 66.66667%; - right: auto; - } - .small-pull-8 { - position: relative; - right: 66.66667%; - left: auto; - } - .small-push-9 { - position: relative; - left: 75%; - right: auto; - } - .small-pull-9 { - position: relative; - right: 75%; - left: auto; - } - .small-push-10 { - position: relative; - left: 83.33333%; - right: auto; - } - .small-pull-10 { - position: relative; - right: 83.33333%; - left: auto; - } - .small-push-11 { - position: relative; - left: 91.66667%; - right: auto; - } - .small-pull-11 { - position: relative; - right: 91.66667%; - left: auto; - } - .column, .columns { - position: relative; - padding-left: 0.9375em; - padding-right: 0.9375em; - float: left; - } - .small-1 { - width: 8.33333%; - } - .small-2 { - width: 16.66667%; - } - .small-3 { - width: 25%; - } - .small-4 { - width: 33.33333%; - } - .small-5 { - width: 41.66667%; - } - .small-6 { - width: 50%; - } - .small-7 { - width: 58.33333%; - } - .small-8 { - width: 66.66667%; - } - .small-9 { - width: 75%; - } - .small-10 { - width: 83.33333%; - } - .small-11 { - width: 91.66667%; - } - .small-12 { - width: 100%; - } - [class*="column"] + [class*="column"] { - &:last-child { - float: right; - } - &.end { - float: left; - } - } - .small-offset-0 { - margin-left: 0% !important; - } - .small-offset-1 { - margin-left: 8.33333% !important; - } - .small-offset-2 { - margin-left: 16.66667% !important; - } - .small-offset-3 { - margin-left: 25% !important; - } - .small-offset-4 { - margin-left: 33.33333% !important; - } - .small-offset-5 { - margin-left: 41.66667% !important; - } - .small-offset-6 { - margin-left: 50% !important; - } - .small-offset-7 { - margin-left: 58.33333% !important; - } - .small-offset-8 { - margin-left: 66.66667% !important; - } - .small-offset-9 { - margin-left: 75% !important; - } - .small-offset-10 { - margin-left: 83.33333% !important; - } - .small-offset-11 { - margin-left: 91.66667% !important; - } - .small-reset-order { - margin-left: 0; - margin-right: 0; - left: auto; - right: auto; - float: left; - } - .column.small-centered, .columns.small-centered { - margin-left: auto; - margin-right: auto; - float: none !important; - } - .column.small-uncentered, .columns.small-uncentered { - margin-left: 0; - margin-right: 0; - float: left !important; - } - .column.small-uncentered.opposite, .columns.small-uncentered.opposite { - float: right; - } -} - -@media only screen and (min-width: 40.063em) { - .medium-push-0 { - position: relative; - left: 0%; - right: auto; - } - .medium-pull-0 { - position: relative; - right: 0%; - left: auto; - } - .medium-push-1 { - position: relative; - left: 8.33333%; - right: auto; - } - .medium-pull-1 { - position: relative; - right: 8.33333%; - left: auto; - } - .medium-push-2 { - position: relative; - left: 16.66667%; - right: auto; - } - .medium-pull-2 { - position: relative; - right: 16.66667%; - left: auto; - } - .medium-push-3 { - position: relative; - left: 25%; - right: auto; - } - .medium-pull-3 { - position: relative; - right: 25%; - left: auto; - } - .medium-push-4 { - position: relative; - left: 33.33333%; - right: auto; - } - .medium-pull-4 { - position: relative; - right: 33.33333%; - left: auto; - } - .medium-push-5 { - position: relative; - left: 41.66667%; - right: auto; - } - .medium-pull-5 { - position: relative; - right: 41.66667%; - left: auto; - } - .medium-push-6 { - position: relative; - left: 50%; - right: auto; - } - .medium-pull-6 { - position: relative; - right: 50%; - left: auto; - } - .medium-push-7 { - position: relative; - left: 58.33333%; - right: auto; - } - .medium-pull-7 { - position: relative; - right: 58.33333%; - left: auto; - } - .medium-push-8 { - position: relative; - left: 66.66667%; - right: auto; - } - .medium-pull-8 { - position: relative; - right: 66.66667%; - left: auto; - } - .medium-push-9 { - position: relative; - left: 75%; - right: auto; - } - .medium-pull-9 { - position: relative; - right: 75%; - left: auto; - } - .medium-push-10 { - position: relative; - left: 83.33333%; - right: auto; - } - .medium-pull-10 { - position: relative; - right: 83.33333%; - left: auto; - } - .medium-push-11 { - position: relative; - left: 91.66667%; - right: auto; - } - .medium-pull-11 { - position: relative; - right: 91.66667%; - left: auto; - } - .column, .columns { - position: relative; - padding-left: 0.9375em; - padding-right: 0.9375em; - float: left; - } - .medium-1 { - width: 8.33333%; - } - .medium-2 { - width: 16.66667%; - } - .medium-3 { - width: 25%; - } - .medium-4 { - width: 33.33333%; - } - .medium-5 { - width: 41.66667%; - } - .medium-6 { - width: 50%; - } - .medium-7 { - width: 58.33333%; - } - .medium-8 { - width: 66.66667%; - } - .medium-9 { - width: 75%; - } - .medium-10 { - width: 83.33333%; - } - .medium-11 { - width: 91.66667%; - } - .medium-12 { - width: 100%; - } - [class*="column"] + [class*="column"] { - &:last-child { - float: right; - } - &.end { - float: left; - } - } - .medium-offset-0 { - margin-left: 0% !important; - } - .medium-offset-1 { - margin-left: 8.33333% !important; - } - .medium-offset-2 { - margin-left: 16.66667% !important; - } - .medium-offset-3 { - margin-left: 25% !important; - } - .medium-offset-4 { - margin-left: 33.33333% !important; - } - .medium-offset-5 { - margin-left: 41.66667% !important; - } - .medium-offset-6 { - margin-left: 50% !important; - } - .medium-offset-7 { - margin-left: 58.33333% !important; - } - .medium-offset-8 { - margin-left: 66.66667% !important; - } - .medium-offset-9 { - margin-left: 75% !important; - } - .medium-offset-10 { - margin-left: 83.33333% !important; - } - .medium-offset-11 { - margin-left: 91.66667% !important; - } - .medium-reset-order { - margin-left: 0; - margin-right: 0; - left: auto; - right: auto; - float: left; - } - .column.medium-centered, .columns.medium-centered { - margin-left: auto; - margin-right: auto; - float: none !important; - } - .column.medium-uncentered, .columns.medium-uncentered { - margin-left: 0; - margin-right: 0; - float: left !important; - } - .column.medium-uncentered.opposite, .columns.medium-uncentered.opposite { - float: right; - } - .push-0 { - position: relative; - left: 0%; - right: auto; - } - .pull-0 { - position: relative; - right: 0%; - left: auto; - } - .push-1 { - position: relative; - left: 8.33333%; - right: auto; - } - .pull-1 { - position: relative; - right: 8.33333%; - left: auto; - } - .push-2 { - position: relative; - left: 16.66667%; - right: auto; - } - .pull-2 { - position: relative; - right: 16.66667%; - left: auto; - } - .push-3 { - position: relative; - left: 25%; - right: auto; - } - .pull-3 { - position: relative; - right: 25%; - left: auto; - } - .push-4 { - position: relative; - left: 33.33333%; - right: auto; - } - .pull-4 { - position: relative; - right: 33.33333%; - left: auto; - } - .push-5 { - position: relative; - left: 41.66667%; - right: auto; - } - .pull-5 { - position: relative; - right: 41.66667%; - left: auto; - } - .push-6 { - position: relative; - left: 50%; - right: auto; - } - .pull-6 { - position: relative; - right: 50%; - left: auto; - } - .push-7 { - position: relative; - left: 58.33333%; - right: auto; - } - .pull-7 { - position: relative; - right: 58.33333%; - left: auto; - } - .push-8 { - position: relative; - left: 66.66667%; - right: auto; - } - .pull-8 { - position: relative; - right: 66.66667%; - left: auto; - } - .push-9 { - position: relative; - left: 75%; - right: auto; - } - .pull-9 { - position: relative; - right: 75%; - left: auto; - } - .push-10 { - position: relative; - left: 83.33333%; - right: auto; - } - .pull-10 { - position: relative; - right: 83.33333%; - left: auto; - } - .push-11 { - position: relative; - left: 91.66667%; - right: auto; - } - .pull-11 { - position: relative; - right: 91.66667%; - left: auto; - } -} - -@media only screen and (min-width: 64.063em) { - .large-push-0 { - position: relative; - left: 0%; - right: auto; - } - .large-pull-0 { - position: relative; - right: 0%; - left: auto; - } - .large-push-1 { - position: relative; - left: 8.33333%; - right: auto; - } - .large-pull-1 { - position: relative; - right: 8.33333%; - left: auto; - } - .large-push-2 { - position: relative; - left: 16.66667%; - right: auto; - } - .large-pull-2 { - position: relative; - right: 16.66667%; - left: auto; - } - .large-push-3 { - position: relative; - left: 25%; - right: auto; - } - .large-pull-3 { - position: relative; - right: 25%; - left: auto; - } - .large-push-4 { - position: relative; - left: 33.33333%; - right: auto; - } - .large-pull-4 { - position: relative; - right: 33.33333%; - left: auto; - } - .large-push-5 { - position: relative; - left: 41.66667%; - right: auto; - } - .large-pull-5 { - position: relative; - right: 41.66667%; - left: auto; - } - .large-push-6 { - position: relative; - left: 50%; - right: auto; - } - .large-pull-6 { - position: relative; - right: 50%; - left: auto; - } - .large-push-7 { - position: relative; - left: 58.33333%; - right: auto; - } - .large-pull-7 { - position: relative; - right: 58.33333%; - left: auto; - } - .large-push-8 { - position: relative; - left: 66.66667%; - right: auto; - } - .large-pull-8 { - position: relative; - right: 66.66667%; - left: auto; - } - .large-push-9 { - position: relative; - left: 75%; - right: auto; - } - .large-pull-9 { - position: relative; - right: 75%; - left: auto; - } - .large-push-10 { - position: relative; - left: 83.33333%; - right: auto; - } - .large-pull-10 { - position: relative; - right: 83.33333%; - left: auto; - } - .large-push-11 { - position: relative; - left: 91.66667%; - right: auto; - } - .large-pull-11 { - position: relative; - right: 91.66667%; - left: auto; - } - .column, .columns { - position: relative; - padding-left: 0.9375em; - padding-right: 0.9375em; - float: left; - } - .large-1 { - width: 8.33333%; - } - .large-2 { - width: 16.66667%; - } - .large-3 { - width: 25%; - } - .large-4 { - width: 33.33333%; - } - .large-5 { - width: 41.66667%; - } - .large-6 { - width: 50%; - } - .large-7 { - width: 58.33333%; - } - .large-8 { - width: 66.66667%; - } - .large-9 { - width: 75%; - } - .large-10 { - width: 83.33333%; - } - .large-11 { - width: 91.66667%; - } - .large-12 { - width: 100%; - } - [class*="column"] + [class*="column"] { - &:last-child { - float: right; - } - &.end { - float: left; - } - } - .large-offset-0 { - margin-left: 0% !important; - } - .large-offset-1 { - margin-left: 8.33333% !important; - } - .large-offset-2 { - margin-left: 16.66667% !important; - } - .large-offset-3 { - margin-left: 25% !important; - } - .large-offset-4 { - margin-left: 33.33333% !important; - } - .large-offset-5 { - margin-left: 41.66667% !important; - } - .large-offset-6 { - margin-left: 50% !important; - } - .large-offset-7 { - margin-left: 58.33333% !important; - } - .large-offset-8 { - margin-left: 66.66667% !important; - } - .large-offset-9 { - margin-left: 75% !important; - } - .large-offset-10 { - margin-left: 83.33333% !important; - } - .large-offset-11 { - margin-left: 91.66667% !important; - } - .large-reset-order { - margin-left: 0; - margin-right: 0; - left: auto; - right: auto; - float: left; - } - .column.large-centered, .columns.large-centered { - margin-left: auto; - margin-right: auto; - float: none !important; - } - .column.large-uncentered, .columns.large-uncentered { - margin-left: 0; - margin-right: 0; - float: left !important; - } - .column.large-uncentered.opposite, .columns.large-uncentered.opposite { - float: right; - } - .push-0 { - position: relative; - left: 0%; - right: auto; - } - .pull-0 { - position: relative; - right: 0%; - left: auto; - } - .push-1 { - position: relative; - left: 8.33333%; - right: auto; - } - .pull-1 { - position: relative; - right: 8.33333%; - left: auto; - } - .push-2 { - position: relative; - left: 16.66667%; - right: auto; - } - .pull-2 { - position: relative; - right: 16.66667%; - left: auto; - } - .push-3 { - position: relative; - left: 25%; - right: auto; - } - .pull-3 { - position: relative; - right: 25%; - left: auto; - } - .push-4 { - position: relative; - left: 33.33333%; - right: auto; - } - .pull-4 { - position: relative; - right: 33.33333%; - left: auto; - } - .push-5 { - position: relative; - left: 41.66667%; - right: auto; - } - .pull-5 { - position: relative; - right: 41.66667%; - left: auto; - } - .push-6 { - position: relative; - left: 50%; - right: auto; - } - .pull-6 { - position: relative; - right: 50%; - left: auto; - } - .push-7 { - position: relative; - left: 58.33333%; - right: auto; - } - .pull-7 { - position: relative; - right: 58.33333%; - left: auto; - } - .push-8 { - position: relative; - left: 66.66667%; - right: auto; - } - .pull-8 { - position: relative; - right: 66.66667%; - left: auto; - } - .push-9 { - position: relative; - left: 75%; - right: auto; - } - .pull-9 { - position: relative; - right: 75%; - left: auto; - } - .push-10 { - position: relative; - left: 83.33333%; - right: auto; - } - .pull-10 { - position: relative; - right: 83.33333%; - left: auto; - } - .push-11 { - position: relative; - left: 91.66667%; - right: auto; - } - .pull-11 { - position: relative; - right: 91.66667%; - left: auto; - } -} - -.inline-list { - margin: 0 auto 1.0625rem auto; - margin-left: -1.375rem; - margin-right: 0; - padding: 0; - list-style: none; - overflow: hidden; - > li { - list-style: none; - float: left; - margin-left: 1.375rem; - display: block; - > * { - display: block; - } - } -} - -.text-left { - text-align: left !important; -} - -.text-right { - text-align: right !important; -} - -.text-center { - text-align: center !important; -} - -.text-justify { - text-align: justify !important; -} - -@media only screen and (max-width: 40em) { - .small-only-text-left { - text-align: left !important; - } - .small-only-text-right { - text-align: right !important; - } - .small-only-text-center { - text-align: center !important; - } - .small-only-text-justify { - text-align: justify !important; - } -} - -@media only screen { - .small-text-left { - text-align: left !important; - } - .small-text-right { - text-align: right !important; - } - .small-text-center { - text-align: center !important; - } - .small-text-justify { - text-align: justify !important; - } -} - -@media only screen and (min-width: 40.063em) and (max-width: 64em) { - .medium-only-text-left { - text-align: left !important; - } - .medium-only-text-right { - text-align: right !important; - } - .medium-only-text-center { - text-align: center !important; - } - .medium-only-text-justify { - text-align: justify !important; - } -} - -@media only screen and (min-width: 40.063em) { - .medium-text-left { - text-align: left !important; - } - .medium-text-right { - text-align: right !important; - } - .medium-text-center { - text-align: center !important; - } - .medium-text-justify { - text-align: justify !important; - } -} - -@media only screen and (min-width: 64.063em) and (max-width: 90em) { - .large-only-text-left { - text-align: left !important; - } - .large-only-text-right { - text-align: right !important; - } - .large-only-text-center { - text-align: center !important; - } - .large-only-text-justify { - text-align: justify !important; - } -} - -@media only screen and (min-width: 64.063em) { - .large-text-left { - text-align: left !important; - } - .large-text-right { - text-align: right !important; - } - .large-text-center { - text-align: center !important; - } - .large-text-justify { - text-align: justify !important; - } -} - -@media only screen and (min-width: 90.063em) and (max-width: 120em) { - .xlarge-only-text-left { - text-align: left !important; - } - .xlarge-only-text-right { - text-align: right !important; - } - .xlarge-only-text-center { - text-align: center !important; - } - .xlarge-only-text-justify { - text-align: justify !important; - } -} - -@media only screen and (min-width: 90.063em) { - .xlarge-text-left { - text-align: left !important; - } - .xlarge-text-right { - text-align: right !important; - } - .xlarge-text-center { - text-align: center !important; - } - .xlarge-text-justify { - text-align: justify !important; - } -} - -@media only screen and (min-width: 120.063em) and (max-width: 99999999em) { - .xxlarge-only-text-left { - text-align: left !important; - } - .xxlarge-only-text-right { - text-align: right !important; - } - .xxlarge-only-text-center { - text-align: center !important; - } - .xxlarge-only-text-justify { - text-align: justify !important; - } -} - -@media only screen and (min-width: 120.063em) { - .xxlarge-text-left { - text-align: left !important; - } - .xxlarge-text-right { - text-align: right !important; - } - .xxlarge-text-center { - text-align: center !important; - } - .xxlarge-text-justify { - text-align: justify !important; - } -} - -/* Typography resets */ - -div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, p, blockquote, th, td { - margin: 0; - padding: 0; -} - -/* Default Link Styles */ - -a { - color: #2ba6cb; - text-decoration: none; - line-height: inherit; - &:hover, &:focus { - color: #258faf; - outline: none; - } - img { - border: none; - } -} - -/* Default paragraph styles */ - -p { - font-family: inherit; - font-weight: normal; - font-size: 0.9rem; - line-height: 1.4; - margin-bottom: 1.25rem; - text-rendering: optimizeLegibility; - &.lead { - font-size: 1.21875rem; - line-height: 1.4; - } - aside { - font-size: 0.875rem; - line-height: 1.35; - font-style: italic; - } -} - -/* Default header styles */ - -h1, h2, h3, h4, h5, h6 { - font-weight: normal; - font-style: normal; - color: #222; - text-rendering: optimizeLegibility; - margin-top: 0.2rem; - margin-bottom: 0.5rem; - line-height: 1.2; -} - -h1 small, h2 small, h3 small, h4 small, h5 small, h6 small { - font-size: 60%; - color: #6f6f6f; - line-height: 0; -} - -h1 { - font-size: 2.125rem; -} - -h2 { - font-size: 1.6875rem; -} - -h3 { - font-size: 1.375rem; -} - -h4, h5 { - font-size: 1.125rem; -} - -h6 { - font-size: 1rem; -} - -.subheader { - line-height: 1.4; - color: #6f6f6f; - font-weight: normal; - margin-top: 0.2rem; - margin-bottom: 0.5rem; -} - -hr { - border: solid #dddddd; - border-width: 1px 0 0; - clear: both; - margin: 1.25rem 0 1.1875rem; - height: 0; -} - -/* Helpful Typography Defaults */ - -em, i { - font-style: italic; - line-height: inherit; -} - -strong, b { - font-weight: bold; - line-height: inherit; -} - -small { - font-size: 60%; - line-height: inherit; -} - -code { - font-family: Consolas, "Liberation Mono", Courier, monospace; - font-weight: bold; - color: #910b0e; -} - -/* Lists */ - -ul, ol, dl { - font-size: 0.9rem; - line-height: 1.6; - margin-bottom: 1.25rem; - list-style-position: outside; - font-family: inherit; -} - -ul { - margin-left: 0; - &.bullets { - margin-left: 1.1rem; - li { - margin-left: 1.25rem; - margin-bottom: 0; - list-style: circle; - } - } - li { - margin-bottom: 0; - list-style: none; - } -} - -/* Abbreviations */ - -abbr, acronym { - text-transform: uppercase; - font-size: 90%; - color: #222222; - border-bottom: 1px dotted #dddddd; - cursor: help; -} - -abbr { - text-transform: none; -} - -/* Blockquotes */ - -blockquote { - margin: 0 0 1.25rem; - padding: 0.5625rem 1.25rem 0 1.1875rem; - border-left: 1px solid #dddddd; - cite { - display: block; - font-size: 0.8125rem; - color: #555555; - &:before { - content: "\2014 \0020"; - } - a { - color: #555555; - &:visited { - color: #555555; - } - } - } - line-height: 1.6; - color: #6f6f6f; - p { - line-height: 1.6; - color: #6f6f6f; - } -} - -/* Microformats */ - -.vcard { - display: inline-block; - margin: 0 0 1.25rem 0; - border: 1px solid #dddddd; - padding: 0.625rem 0.75rem; - li { - margin: 0; - display: block; - } - .fn { - font-weight: bold; - font-size: 0.9375rem; - } -} - -.vevent { - .summary { - font-weight: bold; - } - abbr { - cursor: default; - text-decoration: none; - font-weight: bold; - border: none; - padding: 0 0.0625rem; - } -} - -@media only screen and (min-width: 40.063em) { - h1, h2, h3, h4, h5, h6 { - line-height: 1.2; - } - h1 { - font-size: 2.55rem; - } - h2 { - font-size: 2.3125rem; - } - h3 { - font-size: 1.4875rem; - } - h4 { - font-size: 1.1375rem; - } -} - -/* - * Print styles. - * - * Inlined to avoid required HTTP connection: www.phpied.com/delay-loading-your-print-css/ - * Credit to Paul Irish and HTML5 Boilerplate (html5boilerplate.com) -*/ - -.print-only { - display: none !important; -} - -@media print { - * { - background: transparent !important; - color: black !important; - /* Black prints faster: h5bp.com/s */ - box-shadow: none !important; - text-shadow: none !important; - } - a { - text-decoration: underline; - &:visited { - text-decoration: underline; - } - &[href]:after { - content: " (" attr(href) ")"; - } - } - abbr[title]:after { - content: " (" attr(title) ")"; - } - .ir a:after { - content: ""; - } - a { - &[href^="javascript:"]:after, &[href^="#"]:after { - content: ""; - } - } - pre, blockquote { - border: 1px solid #999999; - page-break-inside: avoid; - } - thead { - display: table-header-group; - /* h5bp.com/t */ - } - tr { - page-break-inside: avoid; - } - img { - page-break-inside: avoid; - max-width: 100% !important; - } - @page { - margin: 0.5cm; - } - - p, h2, h3 { - orphans: 3; - widows: 3; - } - h2, h3 { - page-break-after: avoid; - } - .hide-on-print { - display: none !important; - } - .print-only { - display: block !important; - } - .hide-for-print { - display: none !important; - } - .show-for-print { - display: inherit !important; - } -} - -.reveal-modal-bg { - position: fixed; - height: 100%; - width: 100%; - background: black; - background: rgba(0, 0, 0, 0.45); - z-index: 99; - display: none; - top: 0; - left: 0; -} - -dialog, .reveal-modal { - visibility: hidden; - display: none; - position: absolute; - z-index: 100; - width: 100vw; - top: 0; - left: 0; - background-color: white; - padding: 1.25rem; - border: solid 1px #666666; - box-shadow: 0 0 10px rgba(0, 0, 0, 0.4); -} - -@media only screen and (max-width: 40em) { - dialog, .reveal-modal { - min-height: 100vh; - } -} - -@media only screen and (min-width: 40.063em) { - dialog, .reveal-modal { - left: 50%; - } -} - -dialog { - .column, .columns { - min-width: 0; - } -} - -.reveal-modal { - .column, .columns { - min-width: 0; - } -} - -dialog > :first-child, .reveal-modal > :first-child { - margin-top: 0; -} - -dialog > :last-child, .reveal-modal > :last-child { - margin-bottom: 0; -} - -@media only screen and (min-width: 40.063em) { - dialog, .reveal-modal { - margin-left: -26%; - width: 50%; - } -} - -@media only screen and (min-width: 40.063em) { - dialog, .reveal-modal { - top: 6.25rem; - } -} - -dialog .close-reveal-modal, .reveal-modal .close-reveal-modal { - font-size: 2.5rem; - line-height: 1; - position: absolute; - top: 0.5rem; - right: 0.6875rem; - color: #aaaaaa; - font-weight: bold; - cursor: pointer; -} - -dialog[open] { - display: block; - visibility: visible; -} - -@media only screen and (min-width: 40.063em) { - dialog, .reveal-modal { - padding: 1.875rem; - } - dialog.radius, .reveal-modal.radius { - border-radius: 3px; - } - dialog.round, .reveal-modal.round { - border-radius: 1000px; - } - dialog.collapse, .reveal-modal.collapse { - padding: 0; - } - dialog.full, .reveal-modal.full { - top: 0; - left: 0; - height: 100vh; - min-height: 100vh; - margin-left: 0 !important; - } -} - -@media only screen and (min-width: 40.063em) and (min-width: 40.063em) { - dialog.tiny, .reveal-modal.tiny { - margin-left: -15%; - width: 30%; - } -} - -@media only screen and (min-width: 40.063em) and (min-width: 40.063em) { - dialog.small, .reveal-modal.small { - margin-left: -20%; - width: 40%; - } -} - -@media only screen and (min-width: 40.063em) and (min-width: 40.063em) { - dialog.medium, .reveal-modal.medium { - margin-left: -30%; - width: 60%; - } -} - -@media only screen and (min-width: 40.063em) and (min-width: 40.063em) { - dialog.large, .reveal-modal.large { - margin-left: -35%; - width: 70%; - } -} - -@media only screen and (min-width: 40.063em) and (min-width: 40.063em) { - dialog.xlarge, .reveal-modal.xlarge { - margin-left: -47.5%; - width: 95%; - } -} - -@media only screen and (min-width: 40.063em) and (min-width: 40.063em) { - dialog.full, .reveal-modal.full { - margin-left: -50vw; - width: 100vw; - } -} - -@media print { - dialog, .reveal-modal { - background: white !important; - } -} - -.label { - font-weight: normal; - text-align: center; - text-decoration: none; - line-height: 1; - white-space: nowrap; - display: inline-block; - position: relative; - margin-bottom: inherit; - padding: 0.25rem 0.5rem 0.375rem; - font-size: 0.6875rem; - background-color: #2ba6cb; - color: white; - &.radius { - border-radius: 3px; - } - &.round { - border-radius: 1000px; - } - &.alert { - background-color: #c60f13; - color: white; - } - &.success { - background-color: #5da423; - color: white; - } - &.secondary { - background-color: #e9e9e9; - color: #333333; - } -} - -button, .button, input[type=button] { - cursor: pointer; - margin: 0 0 1.25rem; - border: none; - position: relative; - text-decoration: none; - text-align: center; - -webkit-appearance: none; - display: inline-block; - padding: 0.4rem 1.1rem; - font-size: 0.9rem; - background-color: #2ba6cb; - border-color: #2285a2; - color: white; - transition: background-color 150ms ease-out; - @include border-radius(2px); - &:hover, &:focus { - background-color: #2285a2; - outline: none; - color: white; - } - &.large { - padding-top: 1.125rem; - padding-right: 2.25rem; - padding-bottom: 1.1875rem; - padding-left: 2.25rem; - font-size: 1.25rem; - } - - &.small { - padding-top: 0.875rem; - padding-right: 1.75rem; - padding-bottom: 0.9375rem; - padding-left: 1.75rem; - font-size: 0.8125rem; - } - - &.tiny { - padding-top: 0.625rem; - padding-right: 1.25rem; - padding-bottom: 0.6875rem; - padding-left: 1.25rem; - font-size: 0.6875rem; - } - - &.expand { - padding-right: 0; - padding-left: 0; - width: 100%; - } - - &.left-align { - text-align: left; - text-indent: 0.75rem; - } - - &.right-align { - text-align: right; - padding-right: 0.75rem; - } - - &.round { - border-radius: 1000px; - } - - &.disabled, &[disabled] { - background-color: #2285a2; - border-color: #2285a2; - color: white; - cursor: default; - opacity: 0.5; - box-shadow: none; - &:hover, &:focus { - background-color: #2285a2; - opacity: 0.5; - } - } -} - - -@media only screen and (min-width: 40.063em) { - button, .button { - display: inline-block; - } -} - -.keystroke, kbd { - background-color: #ededed; - border-color: #dddddd; - color: #222222; - border-style: solid; - border-width: 1px; - margin: 0; - font-family: "Consolas", "Menlo", "Courier", monospace; - font-size: inherit; - padding: 0.125rem 0.25rem 0; - border-radius: 3px; -} - - - -/* We use this to get basic styling on all basic form elements */ -input[type="text"], -input[type="password"], -input[type="date"], -input[type="datetime"], -input[type="datetime-local"], -input[type="month"], -input[type="week"], -input[type="email"], -input[type="number"], -input[type="search"], -input[type="tel"], -input[type="time"], -input[type="url"], -textarea { - -webkit-appearance: none; - background-color: white; - font-family: inherit; - border: 1px solid #cccccc; - color: rgba(0, 0, 0, 0.75); - display: block; - font-size: 0.875rem; - margin: 0 0 1rem 0; - padding: 0.4rem; - width: 100%; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; -} - input[type="text"]:focus, - input[type="password"]:focus, - input[type="date"]:focus, - input[type="datetime"]:focus, - input[type="datetime-local"]:focus, - input[type="month"]:focus, - input[type="week"]:focus, - input[type="email"]:focus, - input[type="number"]:focus, - input[type="search"]:focus, - input[type="tel"]:focus, - input[type="time"]:focus, - input[type="url"]:focus, - textarea:focus {} - input[type="text"]:focus, - input[type="password"]:focus, - input[type="date"]:focus, - input[type="datetime"]:focus, - input[type="datetime-local"]:focus, - input[type="month"]:focus, - input[type="week"]:focus, - input[type="email"]:focus, - input[type="number"]:focus, - input[type="search"]:focus, - input[type="tel"]:focus, - input[type="time"]:focus, - input[type="url"]:focus, - textarea:focus { - background: #fafafa; - border-color: #999999; - outline: none; } - input[type="text"][disabled], fieldset[disabled] input[type="text"], - input[type="password"][disabled], fieldset[disabled] - input[type="password"], - input[type="date"][disabled], fieldset[disabled] - input[type="date"], - input[type="datetime"][disabled], fieldset[disabled] - input[type="datetime"], - input[type="datetime-local"][disabled], fieldset[disabled] - input[type="datetime-local"], - input[type="month"][disabled], fieldset[disabled] - input[type="month"], - input[type="week"][disabled], fieldset[disabled] - input[type="week"], - input[type="email"][disabled], fieldset[disabled] - input[type="email"], - input[type="number"][disabled], fieldset[disabled] - input[type="number"], - input[type="search"][disabled], fieldset[disabled] - input[type="search"], - input[type="tel"][disabled], fieldset[disabled] - input[type="tel"], - input[type="time"][disabled], fieldset[disabled] - input[type="time"], - input[type="url"][disabled], fieldset[disabled] - input[type="url"], - textarea[disabled], fieldset[disabled] - textarea { - background-color: #dddddd; } - input[type="text"].radius, - input[type="password"].radius, - input[type="date"].radius, - input[type="datetime"].radius, - input[type="datetime-local"].radius, - input[type="month"].radius, - input[type="week"].radius, - input[type="email"].radius, - input[type="number"].radius, - input[type="search"].radius, - input[type="tel"].radius, - input[type="time"].radius, - input[type="url"].radius, - textarea.radius { - border-radius: 3px; } - -input[type="submit"] { - -webkit-appearance: none; } - -/* Respect enforced amount of rows for textarea */ -textarea[rows] { - height: auto; } - -/* Add height value for select elements to match text input height */ -select { - -webkit-appearance: none !important; - background-color: #fafafa; - background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2cHgiIGhlaWdodD0iM3B4IiB2aWV3Qm94PSIwIDAgNiAzIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA2IDMiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxwb2x5Z29uIHBvaW50cz0iNS45OTIsMCAyLjk5MiwzIC0wLjAwOCwwICIvPjwvc3ZnPg=="); - background-repeat: no-repeat; - background-position: 97% center; - border: 1px solid #cccccc; - padding: 0.5rem; - font-size: 0.875rem; - color: rgba(0, 0, 0, 0.75); - line-height: normal; - border-radius: 0; -} - select.radius { - border-radius: 3px; } - select:hover { - background-color: #f3f3f3; - border-color: #999999; } - -/* Adjust margin for form elements below */ -input[type="file"], -input[type="checkbox"], -input[type="radio"], -select { - margin: 0 0 1rem 0; } - -input[type="checkbox"] + label, -input[type="radio"] + label { - display: inline-block; - - margin-left: 0.5rem; - margin-right: 1rem; - margin-bottom: 0; - vertical-align: baseline; } - -/* Normalize file input width */ -input[type="file"] { - width: 100%; } diff --git a/web-ui/app/scss/vendor/_reset.scss b/web-ui/app/scss/vendor/_reset.scss deleted file mode 100644 index 55f8d054..00000000 --- a/web-ui/app/scss/vendor/_reset.scss +++ /dev/null @@ -1,421 +0,0 @@ -/*! normalize.css v3.0.1 | MIT License | git.io/normalize */ - -/** - * 1. Set default font family to sans-serif. - * 2. Prevent iOS text size adjust after orientation change, without disabling - * user zoom. - */ - -html { - font-family: sans-serif; - /* 1 */ - -ms-text-size-adjust: 100%; - /* 2 */ - -webkit-text-size-adjust: 100%; - /* 2 */ -} - -/** - * Remove default margin. - */ - -body { - margin: 0; -} - -/* HTML5 display definitions - ========================================================================== */ - -/** - * Correct `block` display not defined for any HTML5 element in IE 8/9. - * Correct `block` display not defined for `details` or `summary` in IE 10/11 and Firefox. - * Correct `block` display not defined for `main` in IE 11. - */ - -article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary { - display: block; -} - -/** - * 1. Correct `inline-block` display not defined in IE 8/9. - * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. - */ - -audio, canvas, progress, video { - display: inline-block; - /* 1 */ - vertical-align: baseline; - /* 2 */ -} - -/** - * Prevent modern browsers from displaying `audio` without controls. - * Remove excess height in iOS 5 devices. - */ - -audio:not([controls]) { - display: none; - height: 0; -} - -/** - * Address `[hidden]` styling not present in IE 8/9/10. - * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22. - */ - -[hidden], template { - display: none; -} - -/* Links - ========================================================================== */ - -/** - * Remove the gray background color from active links in IE 10. - */ - -a { - background: transparent; - &:active, &:hover { - outline: 0; - } -} - -/** - * Improve readability when focused and also mouse hovered in all browsers. - */ - -/* Text-level semantics - ========================================================================== */ - -/** - * Address styling not present in IE 8/9/10/11, Safari, and Chrome. - */ - -abbr[title] { - border-bottom: 1px dotted; -} - -/** - * Address style set to `bolder` in Firefox 4+, Safari, and Chrome. - */ - -b, strong { - font-weight: bold; -} - -/** - * Address styling not present in Safari and Chrome. - */ - -dfn { - font-style: italic; -} - -/** - * Address variable `h1` font-size and margin within `section` and `article` - * contexts in Firefox 4+, Safari, and Chrome. - */ - -h1 { - font-size: 2em; - margin: 0.67em 0; -} - -/** - * Address styling not present in IE 8/9. - */ - -mark { - background: #ff0; - color: #000; -} - -/** - * Address inconsistent and variable font size in all browsers. - */ - -small { - font-size: 80%; -} - -/** - * Prevent `sub` and `sup` affecting `line-height` in all browsers. - */ - -sub { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; -} - -sup { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; - top: -0.5em; -} - -sub { - bottom: -0.25em; -} - -/* Embedded content - ========================================================================== */ - -/** - * Remove border when inside `a` element in IE 8/9/10. - */ - -img { - border: 0; -} - -/** - * Correct overflow not hidden in IE 9/10/11. - */ - -svg:not(:root) { - overflow: hidden; -} - -/* Grouping content - ========================================================================== */ - -/** - * Address margin not present in IE 8/9 and Safari. - */ - -figure { - margin: 1em 40px; -} - -/** - * Address differences between Firefox and other browsers. - */ - -hr { - -moz-box-sizing: content-box; - box-sizing: content-box; - height: 0; -} - -/** - * Contain overflow in all browsers. - */ - -pre { - overflow: auto; -} - -/** - * Address odd `em`-unit font size rendering in all browsers. - */ - -code, kbd, pre, samp { - font-family: monospace, monospace; - font-size: 1em; -} - -/* Forms - ========================================================================== */ - -/** - * Known limitation: by default, Chrome and Safari on OS X allow very limited - * styling of `select`, unless a `border` property is set. - */ - -/** - * 1. Correct color not being inherited. - * Known issue: affects color of disabled elements. - * 2. Correct font properties not being inherited. - * 3. Address margins set differently in Firefox 4+, Safari, and Chrome. - */ - -button, input, optgroup, select, textarea { - color: inherit; - /* 1 */ - font: inherit; - /* 2 */ - margin: 0; - /* 3 */ -} - -/** - * Address `overflow` set to `hidden` in IE 8/9/10/11. - */ - -button { - overflow: visible; - text-transform: none; -} - -/** - * Address inconsistent `text-transform` inheritance for `button` and `select`. - * All other form control elements do not inherit `text-transform` values. - * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera. - * Correct `select` style inheritance in Firefox. - */ - -select { - text-transform: none; -} - -/** - * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` - * and `video` controls. - * 2. Correct inability to style clickable `input` types in iOS. - * 3. Improve usability and consistency of cursor style between image-type - * `input` and others. - */ - -button, html input[type="button"] { - -webkit-appearance: button; - /* 2 */ - cursor: pointer; - /* 3 */ -} - -input { - &[type="reset"], &[type="submit"] { - -webkit-appearance: button; - /* 2 */ - cursor: pointer; - /* 3 */ - } -} - -/** - * Re-set default cursor for disabled elements. - */ - -button[disabled], html input[disabled] { - cursor: default; -} - -/** - * Remove inner padding and border in Firefox 4+. - */ - -button::-moz-focus-inner { - border: 0; - padding: 0; -} - -input { - &::-moz-focus-inner { - border: 0; - padding: 0; - } - line-height: normal; - &[type="checkbox"], &[type="radio"] { - box-sizing: border-box; - /* 1 */ - padding: 0; - /* 2 */ - } - &[type="number"] { - &::-webkit-inner-spin-button, &::-webkit-outer-spin-button { - height: auto; - } - } - &[type="search"] { - -webkit-appearance: textfield; - /* 1 */ - -moz-box-sizing: content-box; - -webkit-box-sizing: content-box; - /* 2 */ - box-sizing: content-box; - &::-webkit-search-cancel-button, &::-webkit-search-decoration { - -webkit-appearance: none; - } - } -} - -/** - * Address Firefox 4+ setting `line-height` on `input` using `!important` in - * the UA stylesheet. - */ - -/** - * It's recommended that you don't attempt to style these elements. - * Firefox's implementation doesn't respect box-sizing, padding, or width. - * - * 1. Address box sizing set to `content-box` in IE 8/9/10. - * 2. Remove excess padding in IE 8/9/10. - */ - -/** - * Fix the cursor style for Chrome's increment/decrement buttons. For certain - * `font-size` values of the `input`, it causes the cursor style of the - * decrement button to change from `default` to `text`. - */ - -/** - * 1. Address `appearance` set to `searchfield` in Safari and Chrome. - * 2. Address `box-sizing` set to `border-box` in Safari and Chrome - * (include `-moz` to future-proof). - */ - -/** - * Remove inner padding and search cancel button in Safari and Chrome on OS X. - * Safari (but not Chrome) clips the cancel button when the search input has - * padding (and `textfield` appearance). - */ - -/** - * Define consistent border, margin, and padding. - */ - -fieldset { - border: 1px solid #c0c0c0; - margin: 0 2px; - padding: 0.35em 0.625em 0.75em; -} - -/** - * 1. Correct `color` not being inherited in IE 8/9/10/11. - * 2. Remove padding so people aren't caught out if they zero out fieldsets. - */ - -legend { - border: 0; - /* 1 */ - padding: 0; - /* 2 */ -} - -/** - * Remove default vertical scrollbar in IE 8/9/10/11. - */ - -textarea { - overflow: auto; -} - -/** - * Don't inherit the `font-weight` (applied by a rule above). - * NOTE: the default cannot safely be changed in Chrome and Safari on OS X. - */ - -optgroup { - font-weight: bold; -} - -/* Tables - ========================================================================== */ - -/** - * Remove most spacing between table cells. - */ - -table { - border-collapse: collapse; - border-spacing: 0; -} - -td, th { - padding: 0; -} diff --git a/web-ui/app/scss/vendor/_scut.scss b/web-ui/app/scss/vendor/_scut.scss deleted file mode 100644 index 3e16fa65..00000000 --- a/web-ui/app/scss/vendor/_scut.scss +++ /dev/null @@ -1,1518 +0,0 @@ -/* -* Scut, a collection of Sass utilities -* to ease and improve our implementations of common style-code patterns. -* v1.3.0 -* Docs at http://davidtheclark.github.io/scut -*/ - -@mixin scut-clearfix { - - &:after { - content: ""; - display: table; - clear: both; - } - -} - -%scut-clearfix { - @include scut-clearfix; -} -@mixin scut-list-unstyled( - $no-margin: true -) { - - list-style-type: none; - padding-left: 0; - - @if $no-margin { - margin-top: 0; - margin-bottom: 0; - } - -} - -%scut-list-unstyled { - @include scut-list-unstyled(); -} -// Depends on `list-unstyled` and `clearfix`. - -@mixin scut-list-floated ( - $space: false, - $dir: left, - $no-margin: true -) { - - @include scut-list-unstyled($no-margin); - @include scut-clearfix; - - & > li { - float: $dir; - } - - @if $space { - & > li + li { - margin-#{$dir}: $space; - } - } - -} - -%scut-list-floated { - @include scut-list-floated; -} - -@function scut-autoOrValue ($val) { - @if $val == a or $val == auto { - @return auto; - } - @else { - @return $val; - } -} - -@mixin scut-coords ( - $coordinates: n n n n -) { - - $top: nth($coordinates, 1); - $right: nth($coordinates, 2); - $bottom: nth($coordinates, 3); - $left: nth($coordinates, 4); - - @if $top != n { - top: scut-autoOrValue($top); - } - @if $right != n { - right: scut-autoOrValue($right); - } - @if $bottom != n { - bottom: scut-autoOrValue($bottom); - } - @if $left != n { - left: scut-autoOrValue($left); - } - -} -@function scut-strip-unit ( - $num -) { - - @return $num / ($num * 0 + 1); - -} -// Depends on `scut-strip-unit`. - -$scut-em-base: 16 !default; - -@function scut-em ( - $pixels, - $base: $scut-em-base -) { - - // $base could be in em or px (no unit = px). - // Adjust accordingly to create a $divisor that - // serves as context for $pixels. - $multiplier: if(unit($base) == em, 16, 1); - $divisor: scut-strip-unit($base) * $multiplier; - - $em-vals: (); - @each $val in $pixels { - $val-in-ems: (scut-strip-unit($val) / $divisor) * 1em; - $em-vals: append($em-vals, $val-in-ems); - } - - @if length($em-vals) == 1 { - // return a single value instead of a list, - // so it can be used in calculations - @return nth($em-vals, 1); - } - @else { - @return $em-vals; - } - -} -// Depends on `scut-strip-unit`. - -$scut-rem-base: 16 !default; - -@function scut-rem ( - $pixels -) { - - $rem-vals: (); - @each $val in $pixels { - $val-in-rems: scut-strip-unit($val) / $scut-rem-base * 1rem; - $rem-vals: append($rem-vals, $val-in-rems); - } - - @if length($rem-vals) == 1 { - // return a single value instead of a list, - // so it can be used in calculations - @return nth($rem-vals, 1); - } - @else { - @return $rem-vals; - } - -} -@mixin scut-border ( - $style, - $sides: n y -) { - - @if length($sides) == 2 { - @if nth($sides, 1) != n { - border-top: $style; - border-bottom: $style; - } - @if nth($sides, 2) != n { - border-left: $style; - border-right: $style; - } - } - - @else if length($sides) == 4 { - @if nth($sides, 1) != n { - border-top: $style; - } - @if nth($sides, 2) != n { - border-right: $style; - } - @if nth($sides, 3) != n { - border-bottom: $style; - } - @if nth($sides, 4) != n { - border-left: $style; - } - } - - @else { - @warn "Scut-border requires a $sides argument of 2 or 4 values." - } - -} -@mixin scut-circle ( - $size, - $color: inherit -) { - - border-radius: 50%; - display: inline-block; - - @if $color == inherit { - // If user wants to inherit the color, - // take advantage of the fact that border - // color defaults to the text color of the element. - border-width: $size / 2; - border-style: solid; - height: 0; - width: 0; - } - @else { - // Otherwise, just use background-color. - background-color: $color; - height: $size; - width: $size; - } - -} -@mixin scut-color-swap ( - $off, - $on, - $duration: 0, - $bg: false -) { - - $transition-properties: null; - $off-is-list: type-of($off) == list; - $on-is-list: type-of($on) == list; - - // If $off IS a list, - // assign color and background-color. - @if $off-is-list { - color: nth($off, 1); - background-color: nth($off, 2); - $transition-properties: background-color, color; - } - - // If $off IS NOT a list and $bg is TRUE, - // assign background-color. - @else if $bg and not($off-is-list) { - background-color: $off; - $transition-properties: background-color; - } - - // If $off IS NOT a list and $bg is FALSE, - // assign color. - @else { - color: $off; - $transition-properties: color; - } - - // Only set-up transition if $duration != 0. - @if $duration != 0 { - transition-property: $transition-properties; - transition-duration: $duration; - } - - &:hover, - &:focus { - - // $on is treated the same as $off, above. - @if $on-is-list { - color: nth($on, 1); - background-color: nth($on, 2); - } - - @else if $bg and not($on-is-list) { - background-color: $on; - } - - @else { - color: $on; - } - } - -} -@mixin scut-hd-bp ( - $ratio: 1.3 -) { - - @media (-o-min-device-pixel-ratio: ($ratio / 1)), - (-webkit-min-device-pixel-ratio: $ratio), - (min-resolution: (round(96 * $ratio) * 1dpi)) { - @content; - } - -} - -@mixin scut-hide-visually { - - border: 0; - clip: rect(0 0 0 0); - height: 1px; - margin: -1px; - overflow: hidden; - padding: 0; - position: absolute; - width: 1px; - -} - -%scut-hide-visually { - @include scut-hide-visually; -} -@mixin scut-image-replace { - - text-indent: 102%; - white-space: nowrap; - overflow: hidden; - padding: 0; - -} - -%scut-image-replace { - @include scut-image-replace; -} - -// Depends on scut-rem and scut-strip-unit - -@mixin scut-rem-fallback ( - $pixels, - $property: font-size -) { - - $px-vals: null; - @each $val in $pixels { - $val-in-px: scut-strip-unit($val) * 1px; - $px-vals: append($px-vals, $val-in-px); - } - $rem-vals: scut-rem($pixels); - - #{$property}: $px-vals; - #{$property}: $rem-vals; - -} -@mixin scut-reset-border-box { - // Make everything a border-box, because why not? - html { - box-sizing: border-box; - } - *, *:before, *:after { - box-sizing: inherit; - } -} - -@mixin scut-reset-antialias { - // Antialias! - body { - -webkit-font-smoothing: antialiased; - } - *, *:before, *:after { - -webkit-font-smoothing: inherit; - } -} - -@mixin scut-reset-semanticize { - // Make headers and semantic, not presentational. - h1, - h2, - h3, - h4, - h5, - h6 { - font-size: 1em; - font-weight: normal; - margin: 0; - } - b { - font-weight: normal; - } -} - -@mixin scut-reset-pointer { - // Clickable form elements should have a pointer. - label, - select, - option, - button { - cursor: pointer; - } -} - -@mixin scut-reset-form { - fieldset { - border: 0; - margin: 0; - padding: 0; - } - textarea { - resize: vertical; - } -} - -@mixin scut-reset-button { - // Reset default button styles, which are never used. - button, - input[type="button"], - input[type="submit"], - input[type="reset"] { - background: transparent; - border: 0; - color: inherit; - font: inherit; - margin: 0; - padding: 0; - width: auto; - -webkit-appearance: none; - -webkit-font-smoothing: antialiased; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - &::-moz-focus-inner { - padding: 0; - border: 0; - } - } -} - -@mixin scut-reset-paragraph { - // Some paragraph margins just get in the way. - p:first-of-type { - margin-top: 0; - } - p:last-of-type { - margin-bottom: 0; - } -} - -@mixin scut-reset-media { - // You want these elements fluid, probably. - img, - video { - max-width: 100%; - height: auto; - } -} - -@mixin scut-reset-figure { - // Remove default margins. - figure { - margin: 0; - } -} - -// Call them all, minus exclusions! -@mixin scut-reset ($exclude: false) { - @if not(index($exclude, border-box)) { - @include scut-reset-border-box; - } - @if not(index($exclude, antialias)) { - @include scut-reset-antialias; - } - @if not(index($exclude, semanticize)) { - @include scut-reset-semanticize; - } - @if not(index($exclude, pointer)) { - @include scut-reset-pointer; - } - @if not(index($exclude, form)) { - @include scut-reset-form; - } - @if not(index($exclude, button)) { - @include scut-reset-button; - } - @if not(index($exclude, paragraph)) { - @include scut-reset-paragraph; - } - @if not(index($exclude, media)) { - @include scut-reset-media; - } - @if not(index($exclude, figure)) { - @include scut-reset-figure; - } -} - -@mixin scut-selected ( - $active: false -) { - - @if $active { - &:hover, - &:focus, - &:active { - @content; - } - } - @else { - &:hover, - &:focus { - @content; - } - } - -} -@mixin scut-triangle ( - $direction: right, - $size: 0.75em, - $color: inherit -) { - - display: inline-block; - height: 0; - width: 0; - // For improved appearance in some Webkit browsers - -webkit-transform: rotate(360deg); - - // Set up some variables - $width: null; - $height: null; - $border-widths: null; - - @if type-of($size) == list { - $width: nth($size, 1); - $height: nth($size, 2); - } - @else { - $width: $size; - $height: $size; - } - - @if ($direction == up) or ($direction == down) { - // For up and down, width gets two borders but height only one, - // so divide second border-width value by 2 - $border-widths: $height ($width / 2); - } - @else if ($direction == right) or ($direction == left) { - // For right and left, height gets two borders but width only one, - // so divide first border-width value by 2 - $border-widths: ($height / 2) $width; - } - @else { - // For right triangles (the rest), both sides get two borders, - // so divide both by 2 - $border-widths: ($height / 2) ($width / 2); - } - - border-width: $border-widths; - border-style: solid; - - - // STANDARD TRIANGLES - - @if ($direction == up) or ($direction == down) or ($direction == right) or ($direction == left) { - border-color: transparent; - @if $direction == up { - border-bottom-color: $color; - border-top-width: 0; - } - @else if $direction == right { - border-left-color: $color; - border-right-width: 0; - } - @else if $direction == down { - border-top-color: $color; - border-bottom-width: 0; - } - @else if $direction == left { - border-right-color: $color; - border-left-width: 0; - } - } - - - // CORNER TRIANGLES - - @else if ($direction == top-right) or ($direction == top-left) { - border-top-color: $color; - border-bottom-color: transparent; - @if $direction == top-right { - border-left-color: transparent; - border-right-color: $color; - } - @else if $direction == top-left { - border-left-color: $color; - border-right-color: transparent; - } - } - - @else if ($direction == bottom-right) or ($direction == bottom-left) { - border-top-color: transparent; - border-bottom-color: $color; - @if $direction == bottom-right { - border-left-color: transparent; - border-right-color: $color; - } - @else if $direction == bottom-left { - border-left-color: $color; - border-right-color: transparent; - } - } - -} - -%scut-triangle { - @include scut-triangle; -} -@mixin scut-center-absolutely ( - $dimensions -) { - - $width: nth($dimensions, 1); - $height: nth($dimensions, 2); - - position: absolute; - - @if $width != n { - width: $width; - left: 50%; - margin-left: (-$width / 2); - } - - @if $height != n { - height: $height; - top: 50%; - margin-top: (-$height / 2); - } - -} -@mixin scut-center-block ( - $max-width: false -) { - - margin-left: auto; - margin-right: auto; - @if $max-width { - max-width: $max-width; - } - -} - -%scut-center-block { - @include scut-center-block; -} - -@mixin scut-center-transform ( - $axis: false // or x or y -) { - - position: absolute; - - @if $axis != x { - top: 50%; - margin-top: auto; - margin-bottom: auto; - } - - @if $axis != y { - left: 50%; - margin-left: auto; - margin-right: auto; - } - - $translate-val: null; - - @if not($axis) { - $translate-val: translate(-50%, -50%); - } - @else if $axis != x { - $translate-val: translateY(-50%); - } - @else if $axis != y { - $translate-val: translateX(-50%); - } - - -webkit-transform: $translate-val; - -ms-transform: $translate-val; - transform: $translate-val; -} - -%scut-center-transform { - @include scut-center-transform; -} - -%scut-center-transform-x { - @include scut-center-transform(x); -} - -%scut-center-transform-y { - @include scut-center-transform(y); -} - -@mixin scut-fill ( - $width-height: false -) { - - position: absolute; - left: 0; - top: 0; - @if $width-height { - width: 100%; - height: 100%; - } - @else { - right: 0; - bottom: 0; - } - -} - -%scut-fill { - @include scut-fill; -} -@mixin scut-list-custom ( - $content: "\2022", - $marker-width: 0.75em, - $pad: 0, - $no-margin: false -) { - - $content-val: null; - $counter: index($content, count); - @if $counter { - @if length($content) == 3 { - $content-val: counter(scutlistcounter, nth($content, 3))nth($content,2); - } - @else if length($content) == 2 { - $content-val: counter(scutlistcounter)nth($content,2); - } - @else { - $content-val: counter(scutlistcounter); - } - } - @else { - $content-val: $content; - } - - padding-left: $marker-width + $pad; - list-style-type: none; - - @if $no-margin { - margin-top: 0; - margin-bottom: 0; - } - - & > li { - position: relative; - @if $counter { - counter-increment: scutlistcounter; - } - &:before { - content: $content-val; - display: block; - position: absolute; - top: 0; - left: -$marker-width; - width: $marker-width; - @content; - } - } - -} -// Depends on `list-floated`, which depends in turn on `list-unstyled` and `clearfix`. - -@mixin scut-list-divided ( - $divider: "|", - $space: 0.5em, - $dir: left, - $height: false, - $no-margin: true -) { - - @include scut-list-floated($dir: $dir, $no-margin: $no-margin); - - $pseudo: if($dir == left, 'before', 'after'); - - // If an explicit height is passed, - // things are different: All
  • s - // need the pseudo-element (to force height), - // but the first's must be hidden. - - @if $height { - & > li { - height: $height; - } - & > li:#{$pseudo} { - height: $height; - content: $divider; - display: inline-block; - vertical-align: middle; - @content; - } - & > li:first-child:#{$pseudo} { - width: 0; - overflow: hidden; - } - } - - & > li + li:#{$pseudo} { - @if not($height) { - content: $divider; - display: inline-block; - @content; - } - margin-left: $space; - margin-right: $space; - } - -} - -%scut-list-bar { - @include scut-list-divided; -} - -%scut-list-breadcrumb { - @include scut-list-divided("/"); -} -// Depends on `list-unstyled`. - -@mixin scut-list-inline ( - $space: false, - $no-margin: true -) { - - @include scut-list-unstyled($no-margin); - - & > li { - display: inline-block; - } - - @if $space { - & > li + li { - margin-left: $space; - } - } - -} - -%scut-list-inline { - @include scut-list-inline; -} -// Depends on `list-unstyled`. - -@mixin scut-list-punctuated ( - $divider: ", ", - $display: inline, - $no-margin: true -) { - - @include scut-list-unstyled($no-margin); - - & > li { - display: $display; - &:not(:last-child):after { - content: $divider; - } - } - -} - -%scut-list-comma { - @include scut-list-punctuated; -} -@mixin scut-margin ( - $margin -) { - - @if length($margin) == 1 and $margin != n { - margin-top: $margin; - margin-right: $margin; - margin-bottom: $margin; - margin-left: $margin; - } - - @if length($margin) == 2 { - $margin-y: nth($margin, 1); - $margin-x: nth($margin, 2); - @if $margin-y != n { - margin-top: $margin-y; - margin-bottom: $margin-y; - } - @if $margin-x != n { - margin-left: $margin-x; - margin-right: $margin-x; - } - } - - @if length($margin) == 3 { - $margin-y-top: nth($margin, 1); - $margin-x: nth($margin, 2); - $margin-y-bottom: nth($margin, 3); - @if $margin-y-top != n { - margin-top: $margin-y-top; - } - @if $margin-x != n { - margin-right: $margin-x; - margin-left: $margin-x; - } - @if $margin-y-bottom != n { - margin-bottom: $margin-y-bottom; - } - } - - @if length($margin) == 4 { - $margin-top: nth($margin, 1); - $margin-right: nth($margin, 2); - $margin-bottom: nth($margin, 3); - $margin-left: nth($margin, 4); - @if $margin-top != n { - margin-top: $margin-top; - } - @if $margin-right != n { - margin-right: $margin-right; - } - @if $margin-bottom != n { - margin-bottom: $margin-bottom; - } - @if $margin-left != n { - margin-left: $margin-left; - } - } - -} -@mixin scut-padding ( - $padding -) { - - @if length($padding) == 1 and $padding != n { - padding-top: $padding; - padding-right: $padding; - padding-bottom: $padding; - padding-left: $padding; - } - - @if length($padding) == 2 { - $padding-y: nth($padding, 1); - $padding-x: nth($padding, 2); - @if $padding-y != n { - padding-top: $padding-y; - padding-bottom: $padding-y; - } - @if $padding-x != n { - padding-left: $padding-x; - padding-right: $padding-x; - } - } - - @if length($padding) == 3 { - $padding-y-top: nth($padding, 1); - $padding-x: nth($padding, 2); - $padding-y-bottom: nth($padding, 3); - @if $padding-y-top != n { - padding-top: $padding-y-top; - } - @if $padding-x != n { - padding-right: $padding-x; - padding-left: $padding-x; - } - @if $padding-y-bottom != n { - padding-bottom: $padding-y-bottom; - } - } - - @if length($padding) == 4 { - $padding-top: nth($padding, 1); - $padding-right: nth($padding, 2); - $padding-bottom: nth($padding, 3); - $padding-left: nth($padding, 4); - @if $padding-top != n { - padding-top: $padding-top; - } - @if $padding-right != n { - padding-right: $padding-right; - } - @if $padding-bottom != n { - padding-bottom: $padding-bottom; - } - @if $padding-left != n { - padding-left: $padding-left; - } - } -} -// Depends on `positioning-coordinates`. - -@mixin scut-absolute ( - $coordinates: 0 n n 0 -) { - - position: absolute; - @include scut-coords($coordinates); - -} - -%scut-absolute { - @include scut-absolute; -} -// Depends on `positioning-coordinates`. - -@mixin scut-fixed ( - $coordinates: 0 n n 0 -) { - - position: fixed; - @include scut-coords($coordinates); - -} - -%scut-fixed { - @include scut-fixed; -} -// Depends on `positioning-coordinates`. - -@mixin scut-relative ( - $coordinates: n n n n -) { - - position: relative; - @include scut-coords($coordinates); - -} -@mixin scut-ratio-box ( - $ratio: 1/1 -) { - - overflow: hidden; - position: relative; - - // The container's height, as a percentage of the - // container's width, is set by assigning - // padding-top to a pseudo-element. - &:before { - content: ""; - display: block; - height: 0; - padding-top: (1 / $ratio) * 100%; - } - -} - -%scut-ratio-box { - @include scut-ratio-box; -} -@mixin scut-size( - $size -) { - - @if length($size) == 1 { - width: $size; - height: $size; - } - @else if length($size) == 2 { - width: nth($size, 1); - height: nth($size, 2); - } - -} -@mixin scut-sticky-footer-fixed ( - $height, - $wrapper: ".wrapper", - $footer: ".scut-sticky" -) { - - html, - body { - height: 100%; - margin: 0; - padding: 0; - } - - #{$wrapper} { - min-height: 100%; - margin-bottom: -$height; - &:after { - content: ""; - display: block; - } - } - - #{$wrapper}:after, - #{$footer} { - height: $height; - } - -} - -// deprecated -@mixin scut-sticky-footer ( - $height, - $wrapper: ".wrapper", - $footer: ".scut-sticky" -){ - @include scut-sticky-footer-fixed($height, $wrapper, $footer); -} -@mixin scut-sticky-footer-fluid ( - $wrapper: ".wrapper", - $footer: ".scut-sticky" -) { - - html, - body { - height: 100%; - margin: 0; - padding: 0; - } - - #{$wrapper} { - display: table; - height: 100%; - width: 100%; - } - - #{$footer} { - display: table-row; - height: 1px; - } - -} -@mixin scut-vcenter-ib ( - $inner... -) { - - // The inner element is vertically centered - // by middle-aligning it with an inline pseudo-element - // whose height is 100%. - - &:before { - content: ""; - height: 100%; - display: inline-block; - vertical-align: middle; - // A small negative right margin is set - // to account for the default - // word-spacing of inline-block. - margin-right: -0.25em; - } - - $inner: if(length($inner) == 0, ".scut-inner", $inner); - @each $cell-selector in $inner { - $cell-selector: unquote($cell-selector); - & > #{$cell-selector} { - display: inline-block; - vertical-align: middle; - } - } - -} - -%scut-vcenter-ib { - @include scut-vcenter-ib; -} - -@mixin scut-vcenter-lh ( - $height -) { - - height: $height; - line-height: $height; - -} -@mixin scut-vcenter-td ( - $inner... -) { - - display: table; - - $inner: if(length($inner) == 0, ".scut-inner", $inner); - @each $cell-selector in $inner { - $cell-selector: unquote($cell-selector); - & > #{$cell-selector} { - display: table-cell; - vertical-align: middle; - } - } - -} - - -%scut-vcenter-td { - @include scut-vcenter-td; -} - -// Depends on scut-center-transform - -@mixin scut-vcenter-tt () { - @include scut-center-transform(y); -} - -%scut-vcenter-tt { - @include scut-vcenter-tt; -} -// space -$scut-space: "\0020"; -// non-breaking space -$scut-nbsp: "\00a0"; - -// quotation mark -$scut-quot: "\0022"; -// left single curly quote -$scut-lsquo: "\2018"; -// right single curly quote -$scut-rsquo: "\2019"; -// left double curly quote -$scut-ldquo: "\201C"; -// right double curly quote -$scut-rdquo: "\201D"; -// left single angle quote (guillemet) -$scut-lsaquo: "\2039"; -// right single angle quote (guillemet) -$scut-rsaquo: "\203A"; -// left double angle quote (guillemet) -$scut-laquo: "\00ab"; -// right double angle quote (guillemet) -$scut-raquo: "\00bb"; - -// em dash (mutton) -$scut-mdash: "\2014"; -// en dash (nut) -$scut-ndash: "\2013"; -// hyphen -$scut-hyphen: "\2010"; - -// ampersand -$scut-amp: "\0026"; -// greater than -$scut-gt: "\003e"; -// less than -$scut-lt: "\003c"; -// times -$scut-times: "\00D7"; -// big times -$scut-bigtimes: "\2715"; -// checkmark -$scut-checkmark: "\2713"; - -// section sign (double S, hurricane, sectional symbol, the legal doughnut, signum sectionis) -$scut-sect: "\00a7"; -// paragraph symbol (pilcrow) -$scut-para: "\00b6"; - -// middot (interpunct, interpoint) -$scut-middot: "\00b7"; -// o-slash (slashed o) -$scut-oslash: "\00f8"; -// bullet -$scut-bull: "\2022"; -// white bullet -$scut-whibull: "\25E6"; -// horizontal ellipsis -$scut-hellip: "\2026"; -// vertical ellipsis -$scut-vellip: "\22EE"; -// midline horizontal ellipsis -$scut-midhellip: "\22EF"; - -// up-pointing triangle -$scut-utri: "\25b2"; -// down-pointing triangle -$scut-dtri: "\25bc"; -// left-pointing triangle -$scut-ltri: "\25c0"; -// right-pointing triangle -$scut-rtri: "\25b6"; -// up-pointing small triangle -$scut-ustri: "\25b4"; -// down-pointing small triangle -$scut-dstri: "\25be"; -// left-pointing small triangle -$scut-lstri: "\25c2"; -// right-pointing small triangle -$scut-rstri: "\25b8"; -// diamond -$scut-diamond: "\25c6"; -// fisheye -$scut-fisheye: "\25c9"; -// bullseye -$scut-bullseye: "\25ce"; -// circle -$scut-circle: "\25cf"; -// white circle -$scut-whitecircle: "\25cb"; -// square -$scut-square: "\25a0"; -// white square -$scut-whitesquare: "\25a1"; -// small square -$scut-ssquare: "\25aa"; -// small white square -$scut-swhitesquare: "\25ab"; -@function main-src($formats, $file-path, $font-family) { - // Return the list of `src` values, in order, that - // a good `@font-face` will need, including only - // those formats specified in the list `$formats`. - $result: (); - @if index($formats, eot) { - $eot-val: url('#{$file-path}.eot?#iefix') format('embedded-opentype'); - $result: append($result, $eot-val, comma); - } - @if index($formats, woff2) { - $woff2-val: url('#{$file-path}.woff2') format('woff2'); - $result: append($result, $woff2-val, comma); - } - @if index($formats, woff) { - $woff-val: url('#{$file-path}.woff') format('woff'); - $result: append($result, $woff-val, comma); - } - @if index($formats, ttf) { - $ttf-val: url('#{$file-path}.ttf') format('truetype'); - $result: append($result, $ttf-val, comma); - } - @if index($formats, svg) { - $svg-val: url('#{$file-path}.svg##{$font-family}') format('svg'); - $result: append($result, $svg-val, comma); - } - @return $result; -} - -@mixin scut-font-face ( - $font-family, - $file-path, - $weight: normal, - $style: normal, - $formats: eot woff2 woff ttf svg -) { - - @if index('italic' 'oblique', $weight) { - $style: $weight; - $weight: normal; - } - - @font-face { - font-family: $font-family; - font-weight: $weight; - font-style: $style; - - @if index($formats, eot) { - src: url('#{$file-path}.eot'); - } - src: main-src($formats, $file-path, $font-family); - } - -} - -@mixin scut-hanging-indent ( - $indent: 1em -) { - - // padding-left creates the indent, - // while text-indent pulls the first line - // back to the edge. - - padding-left: $indent; - text-indent: -$indent; - -} - -%scut-hanging-indent { - @include scut-hanging-indent; -} -@mixin scut-indented-ps ( - $indent: 1.5em, - $no-first-indent: true -) { - - p { - margin: 0; - text-indent: $indent; - } - - @if $no-first-indent { - p:first-of-type { - text-indent: 0; - } - } - -} - -%scut-indented-ps { - @include scut-indented-ps; -} -@mixin scut-key-val ( - $divider: ":", - $pad: 0.25em, - $indent: 1em, - $spacing: 0, - $pad-left: 0 -) { - - & > dt { - clear: both; - float: left; - &:after { - content: $divider; - margin-right: $pad; - @if $pad-left != 0 { - margin-left: $pad-left; - } - } - } - - & > dd { - margin-left: $indent; - @if $spacing != 0 { - margin-bottom: $spacing; - } - } - -} - -%scut-key-val { - @include scut-key-val; -} -@mixin scut-link-bb ( - $color: inherit, - $style: solid, - $width: 1px -) { - - text-decoration: none; - - border-bottom-width: $width; - border-bottom-style: $style; - @if $color != inherit { - border-bottom-color: $color; - } - -} - -%scut-link-bb { - @include scut-link-bb; -} -// SCUT LINK UNSTYLED -// http://davidtheclark.github.io/scut/#link-unstyled - -@mixin scut-link-unstyled() { - - text-decoration: none; - color: inherit; - -} - -%scut-link-unstyled { - @include scut-link-unstyled(); -} - -@mixin scut-reverse-italics ( - $elements: null -) { - - $element-list: em, cite, i; - font-style: italic; - #{join($element-list, $elements)} { - font-style: normal; - } - -} - -%scut-reverse-italics { - @include scut-reverse-italics; -} - -@mixin scut-side-lined ( - $height: 1px, - $space: 0.5em, - $color: inherit, - $style: solid, - $v-adjust: false, - $double: false -) { - - display: block; - overflow: hidden; - text-align: center; - - &:before, - &:after { - content: ""; - display: inline-block; - vertical-align: middle; - position: relative; - width: 50%; - - border-top-style: $style; - border-top-width: $height; - - @if $color != inherit { - border-top-color: $color; - } - - @if $v-adjust != false { - bottom: $v-adjust; - } - - @if $double != false { - height: $double; - border-bottom-style: $style; - border-bottom-width: $height; - @if $color != inherit { - border-bottom-color: $color; - } - } - } - - &:before { - right: $space; - margin-left: -50%; - } - &:after { - left: $space; - margin-right: -50%; - } - -} - -%scut-side-lined { - @include scut-side-lined; -} -@mixin scut-truncate { - - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - -} - -%scut-truncate { - @include scut-truncate; -} \ No newline at end of file diff --git a/web-ui/app/scss/views/_action-bar.scss b/web-ui/app/scss/views/_action-bar.scss deleted file mode 100644 index 40e677b0..00000000 --- a/web-ui/app/scss/views/_action-bar.scss +++ /dev/null @@ -1,159 +0,0 @@ -#top-pane { - height: auto; - overflow: hidden; - background: $top_pane; - border-top: 1px solid $top_pane; - - #list-actions { - width: 100%; - height: 34px; - margin: 0; - border-top: 1px solid $white; - border-bottom: 2px solid lighten($top_pane, 30%); - background: $white; - clear: both; - overflow: hidden; - padding-left: 10px; - - li { - display: inline-block; - margin: 1px -3px; - vertical-align: top; - - input[type=checkbox] { - @include check-box; - - margin: 7px 13px 7px; - } - - select { - padding: 1px 3px; - margin: 0; - } - - input[type=button] { - margin: 2px; - padding: 4px 10px; - background: $background_light_grey; - color: $dark_grey; - text-transform: uppercase; - font-weight: 400; - font-size: 0.8em; - opacity: 0.7; - border: 1px solid darken($contrast, 10%); - - @include border-radius(1px); - - @include btn-transition; - - &:hover { - opacity: 1; - } - - &[disabled=disabled] { - opacity: 0.5; - cursor: default; - } - } - } - - #pagination-trigger { - cursor: pointer; - margin: 4px 12px 0 5px; - - span { - padding-left: 5px; - } - } - } - - #compose-search-trigger { - padding: 4px; - } - - #actions { - ul { - margin: 0; - - li { - display: inline-block; - margin-right: -5px; - - a { - transition: background-color 150ms ease-out; - background: $top_pane; - color: $white; - font-size: 1.5em; - display: block; - padding: 14px 20px; - margin: 0 1px 0px; - opacity: 0.35; - - &.selected { - background: $top_pane; - opacity: 1; - cursor: default; - } - - &:hover { - opacity: 1; - } - } - } - } - } - - #search-trigger { - padding: 5px; - padding-left: 0; - - input { - margin: 0; - padding: 8px 30px; - color: $navigation_background; - background: white; - border: none; - transition: background-color 150ms ease-out; - - &:hover { - background: darken(white, 2%); - } - - &:focus { - background: darken(white, 5%); - } - } - - form:before { - font-family: "FontAwesome"; - content: "\f002"; - position: absolute; - padding: 0 10px; - top: 15px; - color: $medium_light_grey; - } - } -} - -#refresh-mails-trigger { - i { - margin-top: 3px; - cursor: pointer; - opacity: 0.9; - padding: 4px; - - &:hover { - opacity: 1; - - &:after { - content: "\f021"; - } - - &:before { - content: attr(data-label); - font-size: 0.8em; - padding-right: 5px; - } - } - } -} diff --git a/web-ui/app/scss/views/_close-button.scss b/web-ui/app/scss/views/_close-button.scss deleted file mode 100644 index 37171c18..00000000 --- a/web-ui/app/scss/views/_close-button.scss +++ /dev/null @@ -1,22 +0,0 @@ -.close-mail-button { - $button-size: 27px; - - margin-right: 3px; - float: left; - background: $lighter_gray; - color: $medium_light_grey; - width: $button-size; - height: $button-size; - padding: 0; - border-radius: 0; - - &:hover, &:focus, &:active { - background-color: darken($lighter_gray, 2); - color: darken($medium_light_grey, 10); - } - - i { - padding: 0; - margin: 0; - } -} diff --git a/web-ui/app/scss/views/_compose-button.scss b/web-ui/app/scss/views/_compose-button.scss deleted file mode 100644 index 81e0bb33..00000000 --- a/web-ui/app/scss/views/_compose-button.scss +++ /dev/null @@ -1,27 +0,0 @@ -// COMPOSE BUTTON -#compose { - margin-bottom: 5px; - padding-right: 4px; - #compose-trigger { - width: 100%; - display: inline-block; - padding: 5px; - #compose-mails-trigger { - background: $action_buttons; - color: $white; - padding: 10px 30px; - text-align: center; - font-weight: 400; - font-size: 1.2em; - width: 100%; - height: 100%; - margin-bottom: 0px; - @include btn-transition; - &:hover { - background: lighten($action_buttons, 10%); - cursor: pointer; - } - } - } -} - diff --git a/web-ui/app/scss/views/_compose-view.scss b/web-ui/app/scss/views/_compose-view.scss deleted file mode 100644 index 9e120357..00000000 --- a/web-ui/app/scss/views/_compose-view.scss +++ /dev/null @@ -1,451 +0,0 @@ -.compose-view { - overflow: auto; - - &__buttons { - &-attachment { - cursor: pointer; - margin-left: 18px; - padding-top: 0px; - display: inline; - border: 1px $contrast solid; - background: $background_light_grey; - padding: 7px 4px; - font-size: 0.8em; - - span { - -ms-transform: rotate(224deg); - -webkit-transform: rotate(224deg); - transform: rotate(224deg); - outline: 0; - } - - i.fa-paperclip { - font-size: 1.7em; - } - - &--busy { - color: lighten($recipients_font_color, 10%); - cursor: progress; - } - } - } - - &__attachments { - &-wrapper { - padding: 0; - margin-top: 30px; - } - - &-list { - &-item { - display: block; - position: relative; - margin-bottom: 8px; - padding: 5px; - border: 1px solid $border_light_grey; - border-radius: 2px; - background-color: $contrast; - - &-label { - color: $attachment_text; - text-decoration: none; - - &:hover, &:focus { - color: $attachment_icon; - outline: none; - } - } - - &-icon { - color: #a2a2a2; - float: right; - margin-top: 7px; - cursor: pointer; - } - - &-progress { - width: 0%; - position: absolute; - right: 0; - left: 0; - top: 0; - bottom: 0; - min-height: 100%; - - &-bar { - height: 100%; - background-color: rgba($light_blue, 0.3); - } - } - - } - - &--upload { - display: none; - } - - } - - &-error { - background-color: $background_light_grey; - border-radius: 2px; - border: 1px solid $error; - display: block; - font-size: 0.9rem; - margin-bottom: 20px; - padding: 5px; - width: 100%; - - &-close { - float: left; - margin: 5px 5px 0 0; - } - - & > * { - color: $error; - } - - & > a { - display: inline-block; - text-decoration: underline; - padding: 5px; - } - } - } - -} - -// COMPOSE PANE -#compose-box, #draft-box, #reply-box, #feedback-box { - div.floatlabel { - position: relative; - } - - .input-container { - padding: 1px; - } - - label, span { - color: $recipients_font_color; - padding: 0.5rem; - display: inline-block; - } - - label { - padding: 13px 10px; - } - - span { - padding: 3px; - - &.attachment-size { - color: $attachment_size; - cursor: pointer; - } - } - - label.floatlabel { - padding: 0.4rem !important; - position: absolute; - font-size: 0.6rem; - transition: all 0.1s linear; - opacity: 0; - font-weight: bold; - } - - label.showfloatlabel { - color: $light_blue !important; - top: -0.3rem; - opacity: 1; - } - - input, textarea { - margin: 0; - border: none; - transition: all 0.1s linear; - } - - input.showfloatlabel, textarea.showfloatlabel { - padding-top: 1rem !important; - } - - input#subject, #feedback-subject { - font-size: 1.6875rem; - line-height: 1.4; - border-top: 1px solid $lighter_gray; - } - - #feedback-subject { - color: $dark_grey; - } - - textarea { - border-bottom: 2px solid $lighter_gray; - min-height: 400px; - font-family: inherit; - font-weight: normal; - font-size: 1rem; - line-height: 1.6; - text-rendering: optimizeLegibility; - } - - &.reply-box, &.forward-box { - margin: 0; - - h4 { - font-size: 0.9em; - font-style: italic; - color: $medium_grey; - margin: 2px 0; - clear: both; - cursor: pointer; - - &:hover { - background: $contrast; - } - } - - textarea { - min-height: 200px; - margin: 10px 0; - } - - p { - padding: 5px; - margin: 10px 0; - font-style: italic; - cursor: pointer; - - &:hover { - background: $contrast; - } - } - } - - button.close-mail-button { - margin: 1px; - } - - .buttons-group { - margin-top: 0px; - } - - .recipients-area { - -webkit-appearance: none; - background-color: white; - font-family: inherit; - display: flex; - flex-wrap: wrap; - font-size: 0.898em; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; - position: relative; - - .compose-column-label { - width: 5%; - display: inline-block; - } - - .compose-column-recipients { - width: 95%; - display: inline-block; - } - - .recipients-label { - width: 100%; - height: 100%; - } - - .recipients-navigation-handler { - z-index: -1; - position: absolute; - top: -200px; - } - - .twitter-typeahead { - flex: 1 1 50px; - - .tt-dropdown-menu { - background: $dark_white; - - div div { - padding: 8px; - - &:hover { - background: $background_dropdown_grey; - } - } - } - } - - .invalid-format { - border-bottom: 1px dotted $error; - } - - input[type=text] { - vertical-align: top; - height: 35px; - margin-left: 1px; - font-size: 0.9em; - width: 100%; - } - - .fixed-recipient { - display: inline-block; - margin-right: -3px; - flex: none; - position: relative; - - .recipient-value { - &.selected { - border: 1px solid $medium_dark_grey; - } - - &:before { - font-family: FontAwesome; - padding-right: 6px; - font-size: 1.4em; - } - - &.encrypted { - border-bottom-color: $will_be_encrypted; - - &:before { - color: $will_be_encrypted; - content: "\f023 "; - } - } - - &.not-encrypted { - border-bottom-color: $wont_be_encrypted; - - &:before { - color: $wont_be_encrypted; - content: "\f09c"; - } - } - - &.deleting span { - text-decoration: line-through; - } - - & span { - margin: 0px; - padding: 0px 0px 0px 0px; - vertical-align: top; - cursor: pointer; - } - - margin: 3px; - padding: 5px; - background-color: $background_light_grey; - border: 1px solid $border_light_grey; - border-radius: 2px; - } - - .recipient-del { - position: relative; - color: $recipients_font_color; - - &:hover, &:focus { - color: $recipients_font_color; - } - - &:before { - margin-left: 0.4em; - font-weight: bold; - content: "x"; - } - - &.deleteTooltip:hover:after { - position: absolute; - content: attr(data-label); - font-size: 0.5rem; - - @include tooltip(25px, 0px); - } - } - } - - input.recipients-input:focus { - background-color: $dark_white !important; - border-color: $medium_light_grey; - outline: none; - width: 270px; - } - } - - .collapse { - display: block; - position: absolute; - right: 10px; - padding-right: 15px; - padding-left: 15px; - font-family: 'FontAwesome'; - font-weight: bolder; - font-size: larger; - cursor: pointer; - } - - .collapse + input, .collapse + input + * { - display: none; - } - - .collapse + input:checked + * { - display: block; - } -} - -#reply-section { - padding-left: 30px; - - .reply-container { - margin: 10px 0; - padding: 10px; - border: 1px dashed darken($contrast, 10%); - - @include btn-transition; - } - - button { - margin: 0; - } - - #all-recipients { - color: $black; - } - - #all-recipients:focus { - background-color: darken($contrast, 10%); - } - - #reply-button, #reply-all-button, #forward-button { - text-align: center; - font-weight: 100; - font-size: 1.1em; - background: $white; - color: $medium_light_grey; - padding: 25px; - margin: 0; - - @include border-radius(0); - - &:hover { - background: darken($contrast, 5%); - cursor: pointer; - } - } -} - -.buttons-group { - clear: both; - margin: 20px 0 0; - padding: 0; -} - -#draft-save-status { - float: right; - padding: 0.4rem 1.1rem; - color: $lighter_blue; -} diff --git a/web-ui/app/scss/views/_mail-list.scss b/web-ui/app/scss/views/_mail-list.scss deleted file mode 100644 index f5c4c60f..00000000 --- a/web-ui/app/scss/views/_mail-list.scss +++ /dev/null @@ -1,124 +0,0 @@ -.mail-list-entry { - @include scut-clearfix; - - border-bottom: 1px solid white; - transition: background-color 150ms ease-out; - font-weight: bold; - height: 80px; - position: relative; - - // Workaround: - // Foundation is of the opinion that a 1.6 line height for all lists - // is a totally good idea. Please remove when Foundation is gone - line-height: normal; - - &.status-read { - font-weight: normal; - color: $attachment_text; - - .mail-list-entry__checkbox::after { - display: none; - } - } - - - &.selected { - background: $light_blue; - z-index: 10; // overlay the box-shadow of the right page (z-index: 2) - - &:hover { - background: $light_blue; - } - - a { - color: $white; - } - } - - &:hover { - background: darken($contrast, 5%); - } - - &__checkbox { - margin-right: 5px; - display: block; - float: left; - margin: { - top: 8px; - left: 20px; - } - - &::after { - content: ''; - display: inline-block; - width: 8px; - height: 8px; - -moz-border-radius: 15px; - -webkit-border-radius: 15px; - border-radius: 15px; - background-color: $bullet-blue; - position: absolute; - left: 48px; - top: 13px; - } - - & > input[type=checkbox] { - @include check-box; - } - } - - &__item { - display: block; - color: $dark_grey; - padding: 8px 10px 10px 67px; - height: 100%; - - &-from { - white-space: nowrap; - font-size: 0.8em; - overflow: hidden; - text-overflow: ellipsis; - display: inline-block; - } - - &-date { - font-size: 0.7em; - float: right; - display: inline-block; - } - - &-subject { - display: inline-block; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - width: 85%; - - &-icon { - color: $light_gray; - } - } - - &-attachment { - width: 14px; - text-align: right; - display: inline-block; - float: right; - color: $light_gray; - } - - &-tags { - @include tags; - - // Workaround: - // Foundation is of the opinion that a 1.6 line height and a 0.6 rem margin-bottom - // for all lists is a totally good idea. Please remove when Foundation is gone - line-height: normal; - margin-bottom: 0; - } - - &:hover, &:focus, &:active { - color: $dark_grey; - } - } -} diff --git a/web-ui/app/scss/views/_message-panel.scss b/web-ui/app/scss/views/_message-panel.scss deleted file mode 100644 index 4a0a7a6b..00000000 --- a/web-ui/app/scss/views/_message-panel.scss +++ /dev/null @@ -1,26 +0,0 @@ -.message-panel { - width: 100%; - margin: 10px auto; - position: fixed; - z-index: 10000; - text-align: center; - - &__growl { - padding: 5px 60px; - - &--success { - background: $warning; - color: darken($warning, 50%); - border: 1px solid darken($warning, 10%); - @include box-shadow(1px 1px 3px darken($warning, 60%)); - } - - &--error { - font-weight: bold; - color: white; - background: $error; - border: 1px solid darken($error, 10%); - @include box-shadow(1px 1px 3px darken($error, 60%)); - } - } -} diff --git a/web-ui/app/scss/views/_navigation.scss b/web-ui/app/scss/views/_navigation.scss deleted file mode 100644 index 2c33a791..00000000 --- a/web-ui/app/scss/views/_navigation.scss +++ /dev/null @@ -1,589 +0,0 @@ -#logo { - color: $white; -} - -#logout { - color: $white; - cursor: pointer; -} - -#user-settings-box { - position: fixed; - z-index: 10; - - & > div { - position: fixed; - left: 70px; - bottom: 0px; - z-index: 1; - padding: 10px 16px 10px 18px; - background-color: rgba($dark_slate_gray, 0.9); - min-width: 230px; - - &.extra-bottom-space { - bottom: 33px; - } - - header { - border-bottom: 1px solid white; - margin-bottom: 10px; - } - - #user-settings-close { - float: right; - } - - h1, i { - font-size: 1.2em; - color: white; - line-height: 1.2em; - } - - h2 { - font-size: 1.1em; - color: white; - line-height: 1.1em; - display: inline; - margin-left: 5px; - } - - i.fa-user { - margin-right: 10px; - float: left; - } - - i.fa-close { - margin-left: 10px; - float: right; - cursor: pointer; - } - - p { - font-size: 1.1em; - color: $light_orange; - } - } -} - -@keyframes hideshow { - 0% { - fill: lighten($logo_color, 30); - } - - 25% { - opacity: 1; - } - - 100% { - opacity: 0; - } -} - -.logo-part-animation-off { - animation: none; -} - -.logo-part-animation-on { - animation: hideshow 0.6s ease infinite; - opacity: 1; - - &:nth-child(2) { - opacity: 0; - animation-delay: 0.1s; - } - - &:nth-child(3) { - animation-delay: 0.2s; - } - - &:nth-child(4) { - animation-delay: 0.3s; - } - - &:nth-child(5) { - animation-delay: 0.4s; - } - - &:nth-child(6) { - animation-delay: 0.5s; - } -} - -.arrow-box:before { - right: 100%; - top: 65%; - border: 20px solid transparent; - content: " "; - height: 0; - width: 0; - position: absolute; - pointer-events: none; - border-right-color: rgba($dark_slate_gray, 0.9); - margin-top: -20px; -} - -.side-nav-toggle, .side-nav-toggle-icon { - color: white; - cursor: pointer; - - &:hover, &:focus { - color: white; - } - - background: $navigation_background; - - &.logout { - color: $action_buttons; - } -} - -.side-nav-toggle-icon { - padding: 6px 0px 8px 19px; - display: block; - left: 0; - top: 0; - position: relative; - - .fa-navicon { - font-size: 24px; - &:before { - margin-left: -5px; - } - } -} - -.left-off-canvas-logo { - svg { - width: 162px; - height: 56px; - padding-left: 6px; - padding-top: 2px; - - path, polygon, rect { - fill: $logo_color; - } - } -} - -.collapsed-nav { - width: 50px; - position: absolute; - height: 100vh; - background: $navigation_background; - - ul.shortcuts { - li { - position: relative; - margin-bottom: 5px; - opacity: 0.8; - - &.selected { - background: $contrast; - opacity: 1; - cursor: default; - - a { - color: $navigation_background; - } - } - - @include searching(6px, 26px, $medium_dark_grey, 0.9em); - - a { - display: block; - position: relative; - font-size: 1.4em; - padding: 5px; - color: white; - text-align: center; - - &:hover { - background: darken($contrast, 10%); - color: $navigation_background; - - @include btn-transition; - - &.logout { - color: $black; - background: $action_buttons; - } - } - - &[title]:hover:after { - content: attr(title); - - @include tooltip; - } - } - } - } - - #custom-tags-shortcuts { - li { - border-top: 1px solid $lighter_gray; - } - } - - div.shortcut-label { - font-size: xx-small; - text-transform: uppercase; - text-align: center; - } -} - -.move-right { - ul.shortcuts { - li { - display: none; - } - } -} - -.left-off-canvas-menu { - width: 222px; - -webkit-backface-visibility: hidden; - box-sizing: content-box; - left: 0; - top: 0; - bottom: 0; - position: absolute; - overflow-y: auto; -} - -.left-off-canvas-menu * { - -webkit-backface-visibility: hidden; -} - -.off-canvas-wrap { - -webkit-backface-visibility: hidden; - position: relative; - width: 100%; - overflow: hidden; -} - -.off-canvas-wrap.move-right, .off-canvas-wrap.move-left { - min-height: 100%; - -webkit-overflow-scrolling: touch; -} - -.inner-wrap { - -webkit-backface-visibility: hidden; - width: 100%; -} - -.inner-wrap:before, .inner-wrap:after { - content: " "; - display: table; -} - -.inner-wrap:after { - clear: both; -} - -.off-canvas-wrap.content { - -webkit-ransition: -webkit-transform 500ms ease; - -moz-transition: -moz-transform 500ms ease; - -ms-transition: -ms-transform 500ms ease; - -o-transition: -o-transform 500ms ease; - transition: transform 500ms ease; - - &.move-right { - -webkit-transform: translate3d(10rem, 0, 0); - -moz-transform: translate3d(10rem, 0, 0); - -ms-transform: translate3d(10rem, 0, 0); - -o-transform: translate3d(10rem, 0, 0); - transform: translate3d(10rem, 0, 0); - - #user-settings-box > div { - left: 20px; - } - } -} - -.move-right .exit-off-canvas { - -webkit-backface-visibility: hidden; - transition: background 300ms ease; - cursor: pointer; - display: block; - position: absolute; - background: rgba(255, 255, 255, 0.2); - top: 0; - bottom: 0; - left: 0; - right: 0; - -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -} - -@media only screen and (min-width: 40.063em) { - .move-right .exit-off-canvas:hover { - background: rgba(255, 255, 255, 0.05); - } -} - -.off-canvas-wrap.move-right.menu { - position: absolute; -} - -.off-canvas-wrap.content { - left: 50px; - padding-right: 50px; -} - -.offcanvas-overlap .left-off-canvas-menu, .offcanvas-overlap .right-off-canvas-menu { - -ms-transform: none; - -webkit-transform: none; - -moz-transform: none; - -o-transform: none; - transform: none; -} - -.offcanvas-overlap .exit-offcanvas-menu { - -webkit-backface-visibility: hidden; - transition: background 300ms ease; - cursor: pointer; - display: block; - position: absolute; - background: rgba(255, 255, 255, 0.2); - top: 0; - bottom: 0; - left: 0; - right: 0; - -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -} - -div.side-nav-bottom { - width: 100%; - position: fixed; - bottom: 20px; - background-color: $navigation_background; - - .version { - padding-left: 55px; - padding-bottom: 3px; - } -} - -#left-pane nav { - border-right: 1px solid lighten($navigation_background, 10%); - - ul#default-tag-list, #custom-tag-list { - li { - transition: background-color 150ms ease-out; - padding: 2px 10px; - cursor: pointer; - - &:hover { - background: $light_gray; - color: $navigation_background; - } - - &.selected { - font-weight: bold; - background: $contrast; - color: $navigation_background; - } - } - } - - ul#default-tag-list { - - span.tag-label { - padding-left: 2px; - } - - li { - padding: 5px 10px 5px 18px; - position: relative; - - @include searching(4px, 19px, $dark_grey, 0.7em); - - &:before { - font-size: 1.5em; - font-family: "FontAwesome"; - margin-right: 16px; - font-weight: normal; - position: relative; - top: 2px; - margin-left: -3px; - } - - &:after { - padding-left: 10px; - } - - &:nth-child(1) { - &:before { - content: "\f01c"; - } - } - - &:nth-child(2) { - &:before { - font-family: "icomoon"; - content: "\e900"; - margin-left: -5px; - } - } - - &:nth-child(3) { - &:before { - content: "\f040"; - } - } - - &:nth-child(4) { - &:before { - content: "\f014"; - } - } - - &:nth-child(5) { - &:before { - content: "\f187"; - margin-left: -5px; - } - } - } - } - - ul#custom-tag-list { - visibility: hidden; - opacity: 0; - transition-duration: 500ms; - height: 100%; - max-height: 220px; - overflow: auto; - background-color: lighten($navigation_background, 1); - - li { - white-space: nowrap; - overflow: hidden; - font-size: 0.8em; - padding: 5px 10px 5px 15px; - - &.custom-tag { - text-overflow: ellipsis; - } - - span.tag-label { - padding: 5px 20px 5px 38px; - } - } - - .unread-count, .total-count { - padding: 1px 4px; - position: relative; - } - - } - - ul#custom-tag-list.expanded { - visibility: visible; - opacity: 1; - } - - div.tags-icon { - border-top: 1px solid white; - padding-top: 25px; - margin-bottom: 20px; - - i { - font-size: 1.5em; - font-family: "FontAwesome"; - margin-right: 13px; - font-weight: normal; - position: relative; - top: 2px; - left: 16px; - } - - span.tag-label { - font-size: 0.9rem; - padding-left: 16px; - margin-bottom: 10px; - } - } - - ul#logout, ul#feedback, ul#user-settings-icon { - margin-bottom: 0; - - li { - background-color: $navigation_background; - padding: 5px 10px; - position: relative; - - @include searching(4px, 19px, $dark_grey, 0.7em); - - &:hover { - color: $navigation_background; - } - - div { - padding-left: 7px; - - &:before { - font-size: 1.5em; - font-family: "FontAwesome"; - margin-right: 13px; - font-weight: normal; - position: relative; - top: 2px; - } - } - } - } - - ul { - &#logout li { - color: $action_buttons; - - &:hover { - background-color: $action_buttons; - } - } - - &#user-settings-icon { - li { - color: white; - - &:hover { - background-color: white; - } - } - } - - &#feedback { - margin-bottom: 0; - - li { - color: $light_orange; - - &:hover { - background-color: $light_orange; - } - } - } - } - - h3 { - color: white; - text-transform: uppercase; - font-size: 0.6em; - padding: 5px; - font-weight: 600; - margin: 0 10px; - border-bottom: 1px dotted lighten($navigation_background, 10%); - } -} - -.unread-count { - @extend .mail-count; - - background: $secondary_callout; -} - -.total-count { - @extend .mail-count; - - background: $medium_light_grey; -} diff --git a/web-ui/app/scss/views/_no-mails-available.scss b/web-ui/app/scss/views/_no-mails-available.scss deleted file mode 100644 index bf5d256a..00000000 --- a/web-ui/app/scss/views/_no-mails-available.scss +++ /dev/null @@ -1,3 +0,0 @@ -.no-mails-available-pane { - @extend .no-content-placeholder; -} diff --git a/web-ui/app/scss/views/_no-message-selected.scss b/web-ui/app/scss/views/_no-message-selected.scss deleted file mode 100644 index 0e367bf2..00000000 --- a/web-ui/app/scss/views/_no-message-selected.scss +++ /dev/null @@ -1,14 +0,0 @@ -.no-message-selected-pane { - background: $contrast; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - - &__text { - @extend .no-content-placeholder; - - margin-bottom: 40px; // aligns label with "no results for XYZ" - } -} diff --git a/web-ui/app/scss/views/_read-view.scss b/web-ui/app/scss/views/_read-view.scss deleted file mode 100644 index f69d51a5..00000000 --- a/web-ui/app/scss/views/_read-view.scss +++ /dev/null @@ -1,165 +0,0 @@ -.mail-read-view { - $component-vertical-spacing: 10px; - $view-top-spacing: 3px; - - // NB! Setting overflow: hidden on an element causes - // a new float context to be created, so elements that - // are floated inside an element that has overflow: hidden - // applied are cleared. - overflow: hidden; - - hr { - margin: 0; - } - - &__header { - @include scut-clearfix; - - font-size: 0.9em; - margin: 0; - margin: $view-top-spacing 0 $component-vertical-spacing 0; - - &-recipients { - display: inline; - margin-bottom: 5px; - line-height: 1.5em; - - &-separator { - margin: 0 10px; - } - - &--highlight-sender { - font-weight: bold; - } - } - - &-date { - display: inline; - float: right; - } - - &-subject { - display: inline; - float: left; - max-width: 80%; - } - - &-actions { - display: inline; - float: right; - max-width: 20%; - background: $white; - white-space: nowrap; - margin-top: $component-vertical-spacing; - - &-button { - color: $medium_light_grey; - background-color: inherit; - display: inline; - border: 1px solid $lighter_gray; - line-height: 2em; - - margin-bottom: 0; - - i { - // workaround: remove padding and margin inserted by font-awesome - margin: 0; - padding: 0; - } - - &:hover, &:active, &:focus { - @include btn-transition; - - background: darken($contrast, 5%); - color: inherit; - } - - &--reply { - padding: 0 20px; - margin-right: -4px; // force buttons together - - } - - &--more { - padding: 0 5px; - } - } - - &-dropdown { - $container-right-padding: 10px; - - background: inherit; - position: absolute; - border: 1px solid $lighter_gray; - right: $container-right-padding; - - &-entry { - box-sizing: border-box; - background: inherit; - padding: 5px 10px; - display: block; - border-bottom: 1px solid $lighter_gray; - - &:last-child { - border-bottom: none; - } - - &:hover { - cursor: pointer; - background: $contrast; - } - } - } - } - - &-tags { - @include tags-editable; - - clear: both; - margin: 0 0 10px; - } - } - - &__body { - margin: $component-vertical-spacing 0; - width: 100%; - border: none; - } - - &__attachments { - margin: $component-vertical-spacing 0; - - &-header { - font-weight: bold; - } - - &-item { - display: block; - margin-bottom: 8px; - padding: 5px; - border: 1px solid $border_light_grey; - border-radius: 2px; - background-color: $background_light_grey; - - &-label { - color: $attachment_text; - text-decoration: none; - - &:hover, &:focus { - i.download-icon { - color: lighten($attachment_icon, 15); - } - - color: $attachment_icon; - outline: none; - } - } - - &-download { - color: #a2a2a2; - float: right; - margin-top: 5px; - } - } - } -} diff --git a/web-ui/app/scss/views/_security-labels.scss b/web-ui/app/scss/views/_security-labels.scss deleted file mode 100644 index ac966ded..00000000 --- a/web-ui/app/scss/views/_security-labels.scss +++ /dev/null @@ -1,67 +0,0 @@ -.security-status { - margin: 0 0 5px; - - &__label { - display: inline-block; - padding: 2px 6px; - white-space: nowrap; - background: $success; - color: $white; - border-radius: 12px; - - &:before { - font-family: FontAwesome; - } - - &--encrypted { - &:before { - content: "\f023"; - } - - &--with-error { - background: $attention; - &:before { - content: "\f023 \f057"; - } - } - } - - &--not-encrypted { - background: $attention; - - &:before { - content: "\f09c"; - } - } - - &--signed { - &:before { - content: "\f00c"; - } - - &--revoked, &--expired { - background: $attention; - - &:before { - content: "\f05e"; - } - } - - &--not-trusted { - background: $error; - - &:before { - content: "\f05e"; - } - } - } - - &--not-signed { - background: $attention; - - &:before { - content: "\f05e"; - } - } - } -} -- cgit v1.2.3