summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--web-ui/app/scss/_mixins.scss148
-rw-r--r--web-ui/app/scss/views/_compose-view.scss156
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;
+ }
+}