@import 'colors'; // 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); } @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; 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 tags { i.tags-label { vertical-align: bottom; font-size: medium; color: $light_gray; } ul.tags { li { font-size: 0.6rem; background-color: lighten($action_buttons, 12); color: white; display: inline; padding: 2px 3px; margin: 0 1px; position: relative; @include border-radius(2px); &[data-tag="drafts"] { color: $attention; background: $contrast; } &.tag:hover { text-decoration: line-through; cursor: pointer; } &.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; } } } &.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; } } } } } @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; } } } @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;