diff options
| -rw-r--r-- | web-ui/app/scss/_mixins.scss | 148 | ||||
| -rw-r--r-- | web-ui/app/scss/views/_compose-view.scss | 156 |
2 files changed, 151 insertions, 153 deletions
diff --git a/web-ui/app/scss/_mixins.scss b/web-ui/app/scss/_mixins.scss index 4583c55d..4e7b1fbb 100644 --- a/web-ui/app/scss/_mixins.scss +++ b/web-ui/app/scss/_mixins.scss @@ -162,151 +162,3 @@ } } - -@mixin recipients { - - .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; - } - - .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: 4px; - - } - &.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: "\f13e "; - } - } - - &.deleting span { - text-decoration: line-through; - } - & span { - margin: 0px; - padding: 0px; - 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: "Click to remove"; - 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; - } -} - -@include tt-hint; diff --git a/web-ui/app/scss/views/_compose-view.scss b/web-ui/app/scss/views/_compose-view.scss index 6b172433..2ed305c8 100644 --- a/web-ui/app/scss/views/_compose-view.scss +++ b/web-ui/app/scss/views/_compose-view.scss @@ -8,9 +8,6 @@ position: relative; } - margin: 5px 0 50px 30px; - padding: 0; - .input-container { padding: 1px; } @@ -169,6 +166,155 @@ } } - @include recipients; -} + .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; + } + .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: 4px; + } + + &.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: "\f13e "; + } + } + + &.deleting span { + text-decoration: line-through; + } + + & span { + margin: 0px; + padding: 0px; + 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: "Click to remove"; + 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; + } +} |