diff options
Diffstat (limited to 'web-ui/app/scss')
| -rw-r--r-- | web-ui/app/scss/_mixins.scss | 25 | ||||
| -rw-r--r-- | web-ui/app/scss/_styles.scss | 31 | ||||
| -rw-r--r-- | web-ui/app/scss/mixins/_tags.scss | 156 | ||||
| -rw-r--r-- | web-ui/app/scss/views/_read-view.scss | 18 |
4 files changed, 107 insertions, 123 deletions
diff --git a/web-ui/app/scss/_mixins.scss b/web-ui/app/scss/_mixins.scss index b752e8a5..099a216c 100644 --- a/web-ui/app/scss/_mixins.scss +++ b/web-ui/app/scss/_mixins.scss @@ -20,30 +20,6 @@ @include border-radius(2px); } -@mixin tt-hint { - .tt-hint { - color: $medium_light_grey - } - .tt-dropdown-menu { - width: 400px; - margin-top: 6px; - padding: 8px 0; - background-color: $contrast; - border: 1px solid darken($contrast, 5%); - } - .tt-suggestion { - padding: 3px 10px; - font-size: 18px; - line-height: 24px; - &.tt-cursor { - background-color: $white; - } - p { - margin: 0; - } - } -} - // FORM MIXINS @mixin check-box { background-color: $white; @@ -277,5 +253,4 @@ } } -@include tt-hint; @include logo; diff --git a/web-ui/app/scss/_styles.scss b/web-ui/app/scss/_styles.scss index 98c70c68..b4ffbd75 100644 --- a/web-ui/app/scss/_styles.scss +++ b/web-ui/app/scss/_styles.scss @@ -132,7 +132,6 @@ ul#mail-list { clear: both; li { - height: 66px; position: relative; padding: 8px 10px 10px 10px; background: $contrast; @@ -159,36 +158,28 @@ width: 106%; } } - .subject-and-tags { + + .subject { display: block; width: 90%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; - @include tags; - ul.tags { - display: block; - line-height: 1.2; - margin: -3px 0 0 0; - li { - font-size: 0.6rem; - background-color: lighten($action_buttons, 12); - color: white; - display: inline-block; - height: auto; - font-weight: 400; - border: none; - &.tag:hover { - text-decoration: none; - } - } - } i.fa-pencil, i.fa-trash-o { color: $indicator_icon_color; } } + .tags { + @include tags; + + // HACK: overwrite default from ul li property + &-tag { + border-bottom: none; + } + } + .received-date, .sent-date { position: absolute; right: 10px; diff --git a/web-ui/app/scss/mixins/_tags.scss b/web-ui/app/scss/mixins/_tags.scss index c018156a..fcb4a280 100644 --- a/web-ui/app/scss/mixins/_tags.scss +++ b/web-ui/app/scss/mixins/_tags.scss @@ -1,78 +1,110 @@ +$tags-font-size: 0.6rem; + @mixin tags { - i.tags-label { + & > * { + display: inline; + } + + &-tag { + font-size: $tags-font-size; + font-weight: normal; + background-color: lighten($action_buttons, 12); + color: white; + padding: 2px 3px; + 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; - font-size: medium; color: $light_gray; } - ul.tags { - margin-bottom: 0; + &-new-button { + font-size: $tags-font-size; + padding: 0; + background: transparent; + border-radius: 2px; + padding: 2px; - li { - font-size: 0.6rem; - background-color: lighten($action_buttons, 12); - color: white; - display: inline; - padding: 2px 3px; - margin: 0 1px; - position: relative; + &:hover { + opacity: 1; + background: $lighter_gray; + } + } - @include border-radius(2px); + &-name-input { + opacity: 0.6; + transition: background-color 150ms ease-out; - &[data-tag="drafts"] { - color: $attention; - background: $contrast; - } + &:hover { + opacity: 1; + } - &.tag:hover { - text-decoration: line-through; - cursor: pointer; - } + // 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; - &.add-new { - opacity: 0.6; - transition: background-color 150ms ease-out; - background: transparent; - border: 1px solid $lighter_gray; - line-height: 0; - padding: 1px 2px; - margin-left: -5px; - - @include border-radius(2px); - - &:hover { - opacity: 1; - background: $lighter_gray; - } - - i { - &:before { - vertical-align: middle; - font-size: smaller; - } - } + & * .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; } - &.new-tag { - font-size: 0.7em; - display: inline-block; - padding: 0; - background: transparent; - - input { - display: inline; - font-size: 1em; - padding: 1px 5px; - width: 120px; - margin: 0; - } - - @include tt-hint; - - .tt-dropdown-menu { - width: 250px; - } + p { + margin: 0; } } + + & * .tt-cursor { + background-color: $white; + } } } diff --git a/web-ui/app/scss/views/_read-view.scss b/web-ui/app/scss/views/_read-view.scss index 7a797909..25aaf92e 100644 --- a/web-ui/app/scss/views/_read-view.scss +++ b/web-ui/app/scss/views/_read-view.scss @@ -113,24 +113,10 @@ } &-tags { + @include tags-editable; + clear: both; margin: 0 0 10px; - - // TODO refactor - - @include tags; - - ul li { - &.tag:hover { - &:before { - content: "click to remove"; - text-transform: lowercase; - font-size: 0.5rem; - - @include tooltip(18px, 8px); - } - } - } } } |