mirror of https://github.com/keeweb/keeweb.git
theming with css variables
This commit is contained in:
antelle
parent
9067eee63b
commit
354ebe626b
|
|
@ -130,8 +130,8 @@
|
|||
padding: $base-padding;
|
||||
text-align: center;
|
||||
@include th {
|
||||
background-color: error-color();
|
||||
color: text-contrast-color(error-color());
|
||||
background-color: th(error-color);
|
||||
color: th(text-contrast-error-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
.at-select {
|
||||
@include position(absolute, 0 null null 0);
|
||||
@include size(100%);
|
||||
@include th { background-color: background-color(); }
|
||||
@include th { background-color: th(background-color); }
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
|
|
|
|||
|
|
@ -39,7 +39,7 @@
|
|||
&:hover {
|
||||
transition: border-color $base-duration $base-timing;
|
||||
@include th {
|
||||
border: 1px solid light-border-color();
|
||||
border: 1px solid th(light-border-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -79,8 +79,8 @@
|
|||
z-index: $z-index-no-modal;
|
||||
border-radius: $base-border-radius;
|
||||
@include th {
|
||||
background: background-color();
|
||||
box-shadow: 0 0 3px background-color();
|
||||
background: th(background-color);
|
||||
box-shadow: 0 0 3px th(background-color);
|
||||
}
|
||||
top: 13px;
|
||||
left: 6px;
|
||||
|
|
@ -164,7 +164,7 @@
|
|||
margin-bottom: .5em;
|
||||
|
||||
&-label {
|
||||
@include th { color: muted-color(); }
|
||||
@include th { color: th(muted-color); }
|
||||
@include user-select(text);
|
||||
width: 7em;
|
||||
text-align: right;
|
||||
|
|
@ -174,7 +174,7 @@
|
|||
line-height: $details-field-line-height;
|
||||
position: relative;
|
||||
&:hover {
|
||||
@include th { color: medium-color(); }
|
||||
@include th { color: th(medium-color); }
|
||||
}
|
||||
.details__field--can-edit-title & {
|
||||
cursor: text;
|
||||
|
|
@ -185,7 +185,7 @@
|
|||
line-height: $details-field-line-height;
|
||||
height: $details-field-line-height;
|
||||
width: 100%;
|
||||
@include th { color: text-color(); }
|
||||
@include th { color: th(text-color); }
|
||||
.chrome & { padding-bottom: 1px; } // TODO: find a better cross-browser way to do it
|
||||
}
|
||||
}
|
||||
|
|
@ -212,11 +212,11 @@
|
|||
transition: border-color $base-duration $base-timing;
|
||||
border: 1px solid;
|
||||
@include th {
|
||||
border-color: light-border-color();
|
||||
box-shadow: 0 0 3px form-box-shadow-color();
|
||||
border-color: th(light-border-color);
|
||||
box-shadow: 0 0 3px th(form-box-shadow-color);
|
||||
}
|
||||
.details__field-value-add-label {
|
||||
@include th { color: muted-color(); }
|
||||
@include th { color: th(muted-color); }
|
||||
transition: color $base-duration $base-timing;
|
||||
}
|
||||
}
|
||||
|
|
@ -246,10 +246,10 @@
|
|||
transition: background-color $slow-transition-in, border-color $slow-transition-in;
|
||||
}
|
||||
.details__field--edit[active-mobile-action=apply] & {
|
||||
@include th { background: action-color(); }
|
||||
@include th { background: th(action-color); }
|
||||
}
|
||||
.details__field--edit[active-mobile-action=cancel] & {
|
||||
@include th { background: error-color(); border-color: error-color(); }
|
||||
@include th { background: th(error-color); border-color: th(error-color); }
|
||||
}
|
||||
}
|
||||
>input {
|
||||
|
|
@ -266,8 +266,8 @@
|
|||
@include user-select(none);
|
||||
}
|
||||
.details__body-aside & {
|
||||
@include th { color: muted-color(); }
|
||||
a { @include th { color: muted-color(); } }
|
||||
@include th { color: th(muted-color); }
|
||||
a { @include th { color: th(muted-color); } }
|
||||
width: 13em;
|
||||
padding-right: 0;
|
||||
margin-right: 0;
|
||||
|
|
@ -275,10 +275,10 @@
|
|||
}
|
||||
&-btn {
|
||||
@include position(absolute, 0 0 null null);
|
||||
@include th { color: muted-color(); }
|
||||
@include th { color: th(muted-color); }
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
@include th { color: medium-color(); }
|
||||
@include th { color: th(medium-color); }
|
||||
}
|
||||
&:before {
|
||||
@include position(absolute, 0 0 null null);
|
||||
|
|
@ -300,7 +300,7 @@
|
|||
top: 0;
|
||||
@include user-select(none);
|
||||
&:before { padding: .2em 1.5em; }
|
||||
@include th { background: background-color(); }
|
||||
@include th { background: th(background-color); }
|
||||
}
|
||||
&-btn-apply {
|
||||
&:before { content: $fa-var-check; }
|
||||
|
|
@ -356,7 +356,7 @@
|
|||
text-overflow: ellipsis;
|
||||
i { margin-right: .4em; }
|
||||
&--active {
|
||||
@include th { border-bottom: 1px solid action-color(); };
|
||||
@include th { border-bottom: 1px solid th(action-color); };
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -364,7 +364,7 @@
|
|||
@include user-select(none);
|
||||
align-self: flex-end;
|
||||
flex: 0 0 auto;
|
||||
@include th { color: muted-color(); }
|
||||
@include th { color: th(muted-color); }
|
||||
border: 1px solid transparent;
|
||||
margin-right: $small-spacing;
|
||||
padding: $base-padding;
|
||||
|
|
@ -372,7 +372,7 @@
|
|||
overflow: hidden;
|
||||
transition: color $base-duration $base-timing;
|
||||
&:hover {
|
||||
@include th { color: medium-color(); }
|
||||
@include th { color: th(medium-color); }
|
||||
}
|
||||
&-title {
|
||||
display: none;
|
||||
|
|
@ -382,7 +382,7 @@
|
|||
.details__attachment-add:hover & {
|
||||
display: inline;
|
||||
transition: color $slow-transition-in;
|
||||
@include th { color: muted-color(); }
|
||||
@include th { color: th(muted-color); }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -448,7 +448,7 @@
|
|||
}
|
||||
|
||||
&-trash-del {
|
||||
@include th { color: muted-color(); }
|
||||
@include th { color: th(muted-color); }
|
||||
}
|
||||
|
||||
button ~ button {
|
||||
|
|
@ -489,12 +489,12 @@
|
|||
cursor: pointer;
|
||||
transform: translateX(-48%);
|
||||
&:hover {
|
||||
@include th { color: mix(action-color(), text-color(), 50%); }
|
||||
@include th { color: th(text-semi-muted-color); }
|
||||
}
|
||||
&--active, &--active:hover {
|
||||
z-index: $z-index-no-modal;
|
||||
cursor: default;
|
||||
@include th { color: action-color(); }
|
||||
@include th { color: th(action-color); }
|
||||
}
|
||||
}
|
||||
&-label {
|
||||
|
|
@ -502,7 +502,7 @@
|
|||
top: 16px;
|
||||
white-space: nowrap;
|
||||
transform: translateX(-50%);
|
||||
@include th { color: muted-color(); }
|
||||
@include th { color: th(muted-color); }
|
||||
}
|
||||
}
|
||||
&-arrow-prev, &-arrow-next {
|
||||
|
|
@ -512,7 +512,7 @@
|
|||
position: absolute;
|
||||
top: 30px;
|
||||
font-size: 14px;
|
||||
&:hover { @include th { color: mix(action-color(), text-color(), 50%); } }
|
||||
&:hover { @include th { color: th(text-semi-muted-color); } }
|
||||
}
|
||||
&-arrow-prev {
|
||||
left: -5px;
|
||||
|
|
@ -563,7 +563,7 @@
|
|||
@include area-selectable(bottom);
|
||||
&--selected {
|
||||
@include th {
|
||||
background-color: secondary-background-color();
|
||||
background-color: th(secondary-background-color);
|
||||
border-bottom: selected-hover-border();
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -15,9 +15,9 @@
|
|||
text-overflow: ellipsis;
|
||||
&.footer__db--dimmed {
|
||||
@include th {
|
||||
color: muted-color();
|
||||
color: th(muted-color);
|
||||
&:hover {
|
||||
color: medium-color();
|
||||
color: th(medium-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -39,8 +39,8 @@
|
|||
position: absolute;
|
||||
right: 1em;
|
||||
top: 1em;
|
||||
@include th { color: action-color(); }
|
||||
&--error { @include th { color: error-color(); } }
|
||||
@include th { color: th(action-color); }
|
||||
&--error { @include th { color: th(error-color); } }
|
||||
}
|
||||
|
||||
&-open-title {
|
||||
|
|
@ -69,7 +69,7 @@
|
|||
}
|
||||
|
||||
&__update-icon {
|
||||
@include th { color: action-color(); }
|
||||
@include th { color: th(action-color); }
|
||||
@include animation(shake 50s cubic-bezier(.36,.07,.19,.97) 0s infinite);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@
|
|||
&__sample {
|
||||
font-weight: normal;
|
||||
@include user-select(text);
|
||||
@include th { color: muted-color(); }
|
||||
@include th { color: th(muted-color); }
|
||||
}
|
||||
|
||||
&__example {
|
||||
|
|
|
|||
|
|
@ -11,8 +11,8 @@
|
|||
position: relative;
|
||||
top: 2px;
|
||||
@include th {
|
||||
color: muted-color();
|
||||
&:hover { color: text-color(); }
|
||||
color: th(muted-color);
|
||||
&:hover { color: th(text-color); }
|
||||
}
|
||||
}
|
||||
&__sel-tpl {
|
||||
|
|
|
|||
|
|
@ -34,8 +34,8 @@
|
|||
margin: $small-spacing 0 0;
|
||||
}
|
||||
&__keyfile {
|
||||
@include th { color: muted-color(); }
|
||||
&:hover { @include th { color: medium-color(); } }
|
||||
@include th { color: th(muted-color); }
|
||||
&:hover { @include th { color: th(medium-color); } }
|
||||
margin-top: $base-padding-v;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -47,13 +47,13 @@
|
|||
width: 100%;
|
||||
}
|
||||
&-icon-search {
|
||||
@include th { color: muted-color(); }
|
||||
@include th { color: th(muted-color); }
|
||||
position: absolute;
|
||||
top: .5em;
|
||||
right: .5em;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
@include th { color: medium-color(); }
|
||||
@include th { color: th(medium-color); }
|
||||
}
|
||||
}
|
||||
&-btn-new {
|
||||
|
|
@ -152,7 +152,7 @@
|
|||
|
||||
&-descr {
|
||||
font-size: .8em;
|
||||
@include th { color: muted-color(); }
|
||||
@include th { color: th(muted-color); }
|
||||
display: block;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
|
|
|
|||
|
|
@ -135,7 +135,7 @@
|
|||
padding-left: .4em;
|
||||
.menu__item-colors & {
|
||||
display: inline-block;
|
||||
@include th { color: text-color(); }
|
||||
@include th { color: th(text-color); }
|
||||
}
|
||||
.menu__item--with-options:hover & {
|
||||
display: none;
|
||||
|
|
@ -151,8 +151,8 @@
|
|||
cursor: pointer;
|
||||
transition: opacity $base-duration $base-timing, color $base-duration $base-timing;
|
||||
@include th {
|
||||
color: muted-color();
|
||||
&:hover { color: medium-color(); }
|
||||
color: th(muted-color);
|
||||
&:hover { color: th(medium-color); }
|
||||
}
|
||||
.menu__item--active>.menu__item-body>& {
|
||||
display: block;
|
||||
|
|
@ -177,12 +177,12 @@
|
|||
|
||||
&--drag-top > .menu__item-body > .menu__item-drag-top {
|
||||
transition: background-color $slow-transition-in;
|
||||
@include th { background-color: action-color(); }
|
||||
@include th { background-color: th(action-color); }
|
||||
}
|
||||
|
||||
&--drag:not(.menu__item--drag-top) {
|
||||
>.menu__item-body {
|
||||
@include th { color: action-color(); }
|
||||
@include th { color: th(action-color); }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
align-items: center;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
@include th { background: background-color(); }
|
||||
@include th { background: th(background-color); }
|
||||
|
||||
&__icons {
|
||||
display: flex;
|
||||
|
|
@ -22,11 +22,11 @@
|
|||
cursor: pointer;
|
||||
margin: 20px;
|
||||
transition: color $base-duration $base-timing;
|
||||
&:hover { @include th { color: medium-color(); } }
|
||||
&:hover { @include th { color: th(medium-color); } }
|
||||
&-i, &-svg { font-size: 4em; }
|
||||
&-text {
|
||||
@include th { color: muted-color(); }
|
||||
.open__icon:hover>& { @include th { color: medium-color(); } }
|
||||
@include th { color: th(muted-color); }
|
||||
.open__icon:hover>& { @include th { color: th(medium-color); } }
|
||||
}
|
||||
&-svg {
|
||||
line-height: 0;
|
||||
|
|
@ -70,14 +70,14 @@
|
|||
position: absolute;
|
||||
left: 100%;
|
||||
@include mobile { display: none; }
|
||||
@include th { color: muted-color(); }
|
||||
@include th { color: th(muted-color); }
|
||||
>i { font-size: 3em; }
|
||||
}
|
||||
&-enter-btn {
|
||||
.open--file & {
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
@include th { color: medium-color(); }
|
||||
@include th { color: th(medium-color); }
|
||||
}
|
||||
}
|
||||
.open--opening & { display: none; }
|
||||
|
|
@ -138,7 +138,7 @@
|
|||
height: 2em;
|
||||
&-key-file {
|
||||
.open--file:not(.open--opening) & { cursor: pointer; }
|
||||
.open--key-file & { @include th { color: medium-color(); } }
|
||||
.open--key-file & { @include th { color: th(medium-color); } }
|
||||
&-icon {
|
||||
width: 2em;
|
||||
}
|
||||
|
|
@ -159,11 +159,11 @@
|
|||
|
||||
&-key-file, &-key-file-dropbox {
|
||||
@include th {
|
||||
color: muted-color();
|
||||
color: th(muted-color);
|
||||
}
|
||||
&:hover {
|
||||
.open--file:not(.open--opening) & {
|
||||
@include th { color: medium-color(); }
|
||||
@include th { color: th(medium-color); }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -184,7 +184,7 @@
|
|||
.open:not(.open--opening) & {
|
||||
@include area-selectable;
|
||||
}
|
||||
@include th { color: muted-color(); }
|
||||
@include th { color: th(muted-color); }
|
||||
padding: $base-padding;
|
||||
&-icon {
|
||||
width: 2em;
|
||||
|
|
@ -192,7 +192,7 @@
|
|||
vertical-align: middle;
|
||||
@include size(1em);
|
||||
path {
|
||||
@include th { fill: muted-color(); }
|
||||
@include th { fill: th(muted-color); }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -203,10 +203,10 @@
|
|||
opacity: .3;
|
||||
cursor: pointer;
|
||||
}
|
||||
@include th { color: muted-color(); }
|
||||
@include th { color: th(muted-color); }
|
||||
&:hover {
|
||||
.open__last-item:hover & { opacity: 1; }
|
||||
@include th { color: medium-color(); }
|
||||
@include th { color: th(medium-color); }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@
|
|||
}
|
||||
|
||||
.shortcut {
|
||||
@include th { border: 1px solid muted-color(); }
|
||||
@include th { border: 1px solid th(muted-color); }
|
||||
display: inline-block;
|
||||
border-radius: $base-border-radius;
|
||||
width: 40px;
|
||||
|
|
@ -51,8 +51,8 @@
|
|||
padding: $base-padding-v * 2 0 1px 0;
|
||||
z-index: 1;
|
||||
@include th {
|
||||
background: background-color();
|
||||
box-shadow: 0 0 5px 5px background-color();
|
||||
background: th(background-color);
|
||||
box-shadow: 0 0 5px 5px th(background-color);
|
||||
}
|
||||
&-post { display: inline; }
|
||||
}
|
||||
|
|
@ -117,7 +117,7 @@
|
|||
}
|
||||
&:hover {
|
||||
transition: color $base-duration $base-timing;
|
||||
@include th { color: medium-color(); }
|
||||
@include th { color: th(medium-color); }
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@
|
|||
// Copyright 2013-2015 thoughtbot, inc.
|
||||
// MIT License
|
||||
|
||||
@import "theme-vars";
|
||||
@import "themes";
|
||||
@import "colors";
|
||||
@import "variables";
|
||||
|
|
|
|||
|
|
@ -18,39 +18,39 @@
|
|||
min-width: 80px;
|
||||
|
||||
@include th {
|
||||
border: 1px solid action-color();
|
||||
background-color: action-color();
|
||||
color: text-contrast-color(action-color());
|
||||
border: 1px solid th(action-color);
|
||||
background-color: th(action-color);
|
||||
color: th(text-contrast-action-color);
|
||||
|
||||
&.btn-error, &.btn-silent {
|
||||
border-color: base-border-color();
|
||||
border-color: th(base-border-color);
|
||||
background-color: transparent;
|
||||
color: text-contrast-color(background-color());
|
||||
color: th(text-contrast-background-color);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-color: action-background-color-focus();
|
||||
background-color: action-background-color-focus();
|
||||
border-color: th(action-background-color-focus);
|
||||
background-color: th(action-background-color-focus);
|
||||
&.btn-error {
|
||||
border-color: error-background-color-focus();
|
||||
background-color: rgba(error-background-color-focus(), .1);
|
||||
border-color: th(error-background-color-focus);
|
||||
background-color: th(error-background-color-focus-opaque);
|
||||
}
|
||||
&.btn-silent {
|
||||
border-color: action-background-color-focus();
|
||||
background-color: rgba(action-background-color-focus(), .1);
|
||||
border-color: th(action-background-color-focus);
|
||||
background-color: th(action-background-color-focus-opaque);
|
||||
}
|
||||
}
|
||||
|
||||
&:active {
|
||||
border-color: action-background-color-active();
|
||||
background-color: action-background-color-active();
|
||||
border-color: th(action-background-color-active);
|
||||
background-color: th(action-background-color-active);
|
||||
&.btn-error {
|
||||
border-color: error-background-color-active();
|
||||
background-color: rgba(error-background-color-active(), .15);
|
||||
border-color: th(error-background-color-active);
|
||||
background-color: th(error-background-color-active-opqaue);
|
||||
}
|
||||
&.btn-silent {
|
||||
border-color: action-background-color-active();
|
||||
background-color: rgba(action-background-color-active(), .15);
|
||||
border-color: th(action-background-color-active);
|
||||
background-color: th(action-background-color-active-opaque);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -58,14 +58,14 @@
|
|||
cursor: default;
|
||||
opacity: 0.5;
|
||||
&:hover {
|
||||
border-color: action-color();
|
||||
background-color: action-color();
|
||||
border-color: th(action-color);
|
||||
background-color: th(action-color);
|
||||
&.btn-error {
|
||||
border-color: error-color();
|
||||
border-color: th(error-color);
|
||||
background-color: transparent;
|
||||
}
|
||||
&.btn-silent {
|
||||
border-color: action-color();
|
||||
border-color: th(action-color);
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
|
@ -82,7 +82,7 @@
|
|||
}
|
||||
@if $error {
|
||||
&:hover {
|
||||
@include th { border-color: error-color(); }
|
||||
@include th { border-color: th(error-color); }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -90,9 +90,9 @@
|
|||
.svg-btn {
|
||||
svg path {
|
||||
transition: fill $base-duration $base-timing;
|
||||
@include th { fill: text-color(); }
|
||||
@include th { fill: th(text-color); }
|
||||
}
|
||||
&:hover svg path {
|
||||
@include th { fill: medium-color(); }
|
||||
@include th { fill: th(medium-color); }
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,62 @@
|
|||
@function val-th($val) {
|
||||
@if type_of($val) == 'string' {
|
||||
@return th($val);
|
||||
}
|
||||
@if unitless($val) {
|
||||
@return $val;
|
||||
}
|
||||
@return $val / 100%;
|
||||
}
|
||||
|
||||
@function raw-hsla($h, $s, $l, $a: 1) {
|
||||
@return #{'hsla(#{$h},#{$s},#{$l},#{$a})'};
|
||||
}
|
||||
|
||||
@function col-mix($color1, $color2, $weight: .5, $weightMultiplier: 1) {
|
||||
@if $th {
|
||||
@return mix(th($color1), th($color2), val-th($weight) * $weightMultiplier);
|
||||
}
|
||||
$mul1: #{'#{val-th($weight)}'};
|
||||
$mul2: #{'(1 - #{val-th($weight)})'};
|
||||
@return raw-hsla(
|
||||
#{'calc((#{th($color1 + '-h')} * #{$mul1} + #{th($color2 + '-h')} * #{$mul2}))'},
|
||||
#{'calc((#{th($color1 + '-s')} * #{$mul1} + #{th($color2 + '-s')} * #{$mul2}))'},
|
||||
#{'calc((#{th($color1 + '-l')} * #{$mul1} + #{th($color2 + '-l')} * #{$mul2}))'},
|
||||
1
|
||||
);
|
||||
}
|
||||
|
||||
@function col-shade($color, $percent, $opacity: 1) {
|
||||
@if $th {
|
||||
@return rgba(mix(#000, th($color), $percent), $opacity);
|
||||
}
|
||||
$mul: #{'(1 - #{val-th($percent)})'};
|
||||
@return raw-hsla(
|
||||
#{'calc((#{th($color + '-h')}) * #{$mul})'},
|
||||
#{'calc((#{th($color + '-s')}) * #{$mul})'},
|
||||
#{'calc((#{th($color + '-l')}) * #{$mul})'},
|
||||
val-th($opacity)
|
||||
);
|
||||
}
|
||||
|
||||
@function col-lightness($color, $lightness, $alpha: 1) {
|
||||
@if $th { @return adjust_color(th($color), $lightness: $lightness, $alpha: 1 - $alpha); }
|
||||
@return raw-hsla(
|
||||
th(#{$color}-h),
|
||||
th(#{$color}-s),
|
||||
#{'calc(#{th($color + '-l')} + #{$lightness * 100%})'},
|
||||
val-th($alpha)
|
||||
);
|
||||
}
|
||||
|
||||
@function col-rgba($color, $alpha) {
|
||||
@if $th {
|
||||
@return rgba(th($color), val-th($alpha));
|
||||
}
|
||||
@return raw-hsla(
|
||||
th(#{$color}-h),
|
||||
th(#{$color}-s),
|
||||
th(#{$color}-l),
|
||||
val-th($alpha)
|
||||
);
|
||||
}
|
||||
|
|
@ -1,4 +1,3 @@
|
|||
// Named colors
|
||||
$black: #111;
|
||||
$white: #d8e5f1;
|
||||
$red: #df3c06;
|
||||
|
|
@ -8,43 +7,6 @@ $green: #0dc94b;
|
|||
$blue: #4e6af8;
|
||||
$violet: #d946db;
|
||||
|
||||
// Theme colors
|
||||
@function background-color() { @return th(background-color); }
|
||||
@function medium-color() { @return th(medium-color); }
|
||||
@function text-color() { @return th(text-color); }
|
||||
@function action-color() { @return th(action-color); }
|
||||
@function error-color() { @return th(error-color); }
|
||||
|
||||
// Text
|
||||
@function muted-color() { @return mix(medium-color(), background-color(), th(mute-percent)); }
|
||||
@function muted-color-border() { @return mix(medium-color(), background-color(), th(mute-percent) / 2); }
|
||||
@function text-selection-bg-color() { @return rgba(action-color(), .3); }
|
||||
@function text-selection-bg-color-error() { @return rgba(error-color(), .8); }
|
||||
@function text-contrast-color($bg) {
|
||||
@if ($bg == background-color()) { @return text-color(); }
|
||||
@if (lightness($bg) - th(color-lightness-shift) >= lightness(background-color())) { @return text-color(); }
|
||||
@else { @return background-color(); }
|
||||
}
|
||||
|
||||
// Borders, shadows
|
||||
@function base-border-color() { @return mix(medium-color(), background-color(), 50%); }
|
||||
@function accent-border-color() { @return mix(medium-color(), background-color(), 65%); }
|
||||
@function light-border-color() { @return mix(medium-color(), background-color(), th(light-border-percent)); }
|
||||
@function form-box-shadow-color() { @return rgba($black, 0.06); }
|
||||
@function form-box-shadow-color-focus() { @return adjust-color(action-color(), $lightness: -5%, $alpha: -0.3); }
|
||||
@function form-box-shadow-color-focus-error() { @return adjust-color(error-color(), $lightness: -5%, $alpha: -0.3); }
|
||||
@function dropdown-box-shadow-color() { @return rgba(medium-color(), .05); }
|
||||
|
||||
// Backgrounds
|
||||
@function secondary-background-color() { @return mix(medium-color(), background-color(), 10%); }
|
||||
@function intermediate-background-color() { @return mix(medium-color(), background-color(), 3%); }
|
||||
@function intermediate-pressed-background-color() { @return mix(medium-color(), background-color(), 2.6%); }
|
||||
@function disabled-background-color() { @return shade(background-color(), 5%); }
|
||||
@function action-background-color-focus() { @return shade(action-color(), 20%); }
|
||||
@function error-background-color-focus() { @return shade(error-color(), 20%); }
|
||||
@function action-background-color-active() { @return shade(action-color(), 25%); }
|
||||
@function error-background-color-active() { @return shade(error-color(), 25%); }
|
||||
|
||||
$all-colors: (
|
||||
"white": $white,
|
||||
"black": $black,
|
||||
|
|
@ -59,6 +21,6 @@ $all-colors: (
|
|||
@each $col, $val in $all-colors {
|
||||
.#{$col}-color { color: #{$val}; }
|
||||
}
|
||||
.muted-color { @include th { color: muted-color(); }; }
|
||||
.action-color { @include th { color: action-color(); }; }
|
||||
.error-color { @include th { color: error-color(); }; }
|
||||
.muted-color { @include th { color: th(muted-color); }; }
|
||||
.action-color { @include th { color: th(action-color); }; }
|
||||
.error-color { @include th { color: th(error-color); }; }
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
fieldset {
|
||||
@include th {
|
||||
background-color: secondary-background-color();
|
||||
background-color: th(secondary-background-color);
|
||||
border: base-border();
|
||||
}
|
||||
margin: 0 0 $small-spacing;
|
||||
|
|
@ -48,23 +48,23 @@ input[type=text], input[type=password], textarea, input:not([type]) {
|
|||
&::-ms-clear { display: none; }
|
||||
|
||||
@include th {
|
||||
color: text-color();
|
||||
background-color: background-color();
|
||||
color: th(text-color);
|
||||
background-color: th(background-color);
|
||||
border: base-border();
|
||||
box-shadow: form-box-shadow();
|
||||
|
||||
&:hover {
|
||||
border-color: accent-border-color();
|
||||
border-color: th(accent-border-color);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
border-color: action-color();
|
||||
border-color: th(action-color);
|
||||
box-shadow: form-box-shadow-focus();
|
||||
outline: none;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
background-color: disabled-background-color();
|
||||
background-color: th(disabled-background-color);
|
||||
cursor: not-allowed;
|
||||
|
||||
&:hover {
|
||||
|
|
@ -73,10 +73,10 @@ input[type=text], input[type=password], textarea, input:not([type]) {
|
|||
}
|
||||
|
||||
&.input--error, &.input--error:hover, &.input--error:focus, &:invalid {
|
||||
border-color: error-color();
|
||||
border-color: th(error-color);
|
||||
box-shadow: form-box-shadow-focus-error();
|
||||
@include selection(true) {
|
||||
background-color: text-selection-bg-color-error();
|
||||
background-color: th(text-selection-bg-color-error);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -86,7 +86,7 @@ input[type=text], input[type=password], textarea, input:not([type]) {
|
|||
}
|
||||
|
||||
@include placeholder {
|
||||
@include th { color: muted-color(); }
|
||||
@include th { color: th(muted-color); }
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -129,20 +129,20 @@ select {
|
|||
background-repeat: no-repeat;
|
||||
|
||||
@include th {
|
||||
background-color: background-color();
|
||||
background-color: th(background-color);
|
||||
border: base-border();
|
||||
color: text-color();
|
||||
color: th(text-color);
|
||||
box-shadow: form-box-shadow();
|
||||
&:hover {
|
||||
border-color: accent-border-color();
|
||||
border-color: th(accent-border-color);
|
||||
}
|
||||
&:focus {
|
||||
border-color: action-color();
|
||||
border-color: th(action-color);
|
||||
box-shadow: form-box-shadow-focus();
|
||||
outline: none;
|
||||
}
|
||||
&:disabled {
|
||||
background-color: disabled-background-color();
|
||||
background-color: th(disabled-background-color);
|
||||
cursor: not-allowed;
|
||||
&:hover {
|
||||
border: base-border();
|
||||
|
|
@ -154,8 +154,8 @@ select {
|
|||
|
||||
option {
|
||||
@include th {
|
||||
background-color: background-color();
|
||||
color: text-color();
|
||||
background-color: th(background-color);
|
||||
color: th(text-color);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -164,7 +164,7 @@ input[type=checkbox] {
|
|||
|
||||
&:not([disabled]) + label:hover:before {
|
||||
@include th {
|
||||
color: action-color();
|
||||
color: th(action-color);
|
||||
}
|
||||
}
|
||||
& + label:before {
|
||||
|
|
@ -173,7 +173,7 @@ input[type=checkbox] {
|
|||
display: inline-block;
|
||||
width: 1.3em;
|
||||
@include th {
|
||||
color: text-color();
|
||||
color: th(text-color);
|
||||
}
|
||||
}
|
||||
&:checked + label:before {
|
||||
|
|
@ -190,7 +190,7 @@ input[type=range] {
|
|||
padding: 0;
|
||||
&:focus { outline: none; }
|
||||
&::-webkit-slider-runnable-track {
|
||||
@include th { background: text-color(); }
|
||||
@include th { background: th(text-color); }
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
cursor: pointer;
|
||||
|
|
@ -198,7 +198,7 @@ input[type=range] {
|
|||
border: none;
|
||||
}
|
||||
&::-webkit-slider-thumb {
|
||||
@include th { background: text-color(); }
|
||||
@include th { background: th(text-color); }
|
||||
border: none;
|
||||
height: $thumb-size;
|
||||
width: $thumb-size;
|
||||
|
|
@ -208,7 +208,7 @@ input[type=range] {
|
|||
margin-top: -6.5px;
|
||||
}
|
||||
&::-moz-range-track {
|
||||
@include th { background: text-color(); }
|
||||
@include th { background: th(text-color); }
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
cursor: pointer;
|
||||
|
|
@ -216,7 +216,7 @@ input[type=range] {
|
|||
border: none;
|
||||
}
|
||||
&::-moz-range-thumb {
|
||||
@include th { background: text-color(); }
|
||||
@include th { background: th(text-color); }
|
||||
border: none;
|
||||
height: $thumb-size;
|
||||
width: $thumb-size;
|
||||
|
|
@ -239,7 +239,7 @@ input[type=range] {
|
|||
display: none;
|
||||
}
|
||||
&::-ms-fill-lower, &::-ms-fill-upper, &:focus::-ms-fill-lower, &:focus::-ms-fill-upper {
|
||||
@include th { background: text-color(); }
|
||||
@include th { background: th(text-color); }
|
||||
}
|
||||
&::-ms-thumb {
|
||||
border: none;
|
||||
|
|
@ -247,7 +247,7 @@ input[type=range] {
|
|||
width: $thumb-size;
|
||||
border-radius: $thumb-size;
|
||||
cursor: pointer;
|
||||
@include th { background: text-color(); }
|
||||
@include th { background: th(text-color); }
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,48 @@
|
|||
@function text-contrast-color($t, $bg) {
|
||||
@if ($bg == map-get($t, background-color)) {
|
||||
@return map-get($t, text-color);
|
||||
}
|
||||
@if (lightness($bg) - map-get($t, color-lightness-shift) >= lightness(map-get($t, background-color))) {
|
||||
@return map-get($t, text-color);
|
||||
}
|
||||
@return map-get($t, background-color);
|
||||
}
|
||||
|
||||
@function set-theme-vars($t) {
|
||||
@return map-merge($t, (
|
||||
// Colors
|
||||
muted-color: mix(map-get($t, medium-color), map-get($t, background-color), map-get($t, mute-percent)),
|
||||
muted-color-border: mix(map-get($t, medium-color), map-get($t, background-color), map-get($t, mute-percent) / 2),
|
||||
text-selection-bg-color: rgba(map-get($t, action-color), .3),
|
||||
text-selection-bg-color-error: rgba(map-get($t, error-color), .8),
|
||||
text-semi-muted-color: mix(map-get($t, action-color), map-get($t, text-color), .5),
|
||||
text-contrast-action-color: text-contrast-color($t, map-get($t, action-color)),
|
||||
text-contrast-error-color: text-contrast-color($t, map-get($t, error-color)),
|
||||
text-contrast-background-color: text-contrast-color($t, map-get($t, background-color)),
|
||||
|
||||
// Borders, shadows
|
||||
base-border-color: mix(map-get($t, medium-color), map-get($t, background-color), 50%),
|
||||
accent-border-color: mix(map-get($t, medium-color), map-get($t, background-color), 65%),
|
||||
light-border-color: mix(map-get($t, medium-color), map-get($t, background-color), map-get($t, light-border-percent)),
|
||||
form-box-shadow-color: rgba(0, 0, 0, 0.06),
|
||||
form-box-shadow-color-focus: adjust_color(map-get($t, action-color), $lightness: -5%, $alpha: -.3),
|
||||
form-box-shadow-color-focus-error: adjust_color(map-get($t, error-color), $lightness: -5%, $alpha: -.3),
|
||||
dropdown-box-shadow-color: rgba(map-get($t, medium-color), .05),
|
||||
|
||||
// Backgrounds
|
||||
secondary-background-color: mix(map-get($t, medium-color), map-get($t, background-color), 10%),
|
||||
intermediate-background-color: mix(map-get($t, medium-color), map-get($t, background-color), 3%),
|
||||
intermediate-pressed-background-color: mix(map-get($t, medium-color), map-get($t, background-color), 2.6%),
|
||||
disabled-background-color: shade(map-get($t, background-color), 5%),
|
||||
action-background-color-focus: shade(map-get($t, action-color), 20%),
|
||||
action-background-color-focus-opaque: rgba(shade(map-get($t, action-color), 20%), .1),
|
||||
error-background-color-focus: shade(map-get($t, error-color), 20%),
|
||||
error-background-color-focus-opaque: rgba(shade(map-get($t, error-color), 20%), .1),
|
||||
action-background-color-active: shade(map-get($t, action-color), 25%),
|
||||
action-background-color-active-opaque: rgba(shade(map-get($t, action-color), 25%), .15),
|
||||
error-background-color-active: shade(map-get($t, error-color), 25%),
|
||||
error-background-color-active-opqaue: rgba(shade(map-get($t, error-color), 25%), .15),
|
||||
modal-background-color: rgba(map-get($t, background-color), map-get($t, modal-opacity)),
|
||||
modal-background-color-transparent: rgba(map-get($t, background-color), 0),
|
||||
));
|
||||
}
|
||||
|
|
@ -1,30 +1,35 @@
|
|||
// modified version of http://www.sitepoint.com/sass-theming-neverending-story/
|
||||
// allows to write themified code without breaking modular project structure
|
||||
// only one global variable
|
||||
|
||||
$th: null;
|
||||
$th-default: null;
|
||||
|
||||
@function th($key) {
|
||||
@if not map-has-key($th, $key) { @error "Bad theme key: #{$key}"; }
|
||||
@return map-get($th, $key);
|
||||
@if $th {
|
||||
@if not map-has-key($th, $key) { @error "Bad theme key: #{$key}"; }
|
||||
@return map-get($th, $key);
|
||||
}
|
||||
@return var(--#{$key});
|
||||
}
|
||||
|
||||
@mixin th {
|
||||
@each $theme, $data in $themes {
|
||||
.th-#{$theme} & {
|
||||
$th: $data !global;
|
||||
@content;
|
||||
$th: null !global;
|
||||
// TODO: remove it, when we don't have to support browsers without CSS variables, replace with @content
|
||||
$th: $th-default !global;
|
||||
@content;
|
||||
$th: null !global;
|
||||
@content;
|
||||
}
|
||||
|
||||
@mixin th-self {
|
||||
@content;
|
||||
}
|
||||
|
||||
@each $theme-name, $theme-vars in $themes {
|
||||
$theme-vars: set-theme-vars($theme-vars);
|
||||
$themes: map-merge($themes, ( $theme-name: $theme-vars ));
|
||||
|
||||
.th-#{$theme-name} {
|
||||
@each $key, $value in $theme-vars {
|
||||
--#{$key}: #{$value};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin th-self {
|
||||
@each $theme, $data in $themes {
|
||||
&.th-#{$theme} {
|
||||
$th: $data !global;
|
||||
@content;
|
||||
$th: null !global;
|
||||
}
|
||||
}
|
||||
}
|
||||
$th-default: map-get($themes, 'fb');
|
||||
|
|
|
|||
|
|
@ -6,8 +6,8 @@ body {
|
|||
@include size(100%);
|
||||
@include user-select(none);
|
||||
@include th-self {
|
||||
color: text-color();
|
||||
background-color: background-color();
|
||||
color: th(text-color);
|
||||
background-color: th(background-color);
|
||||
}
|
||||
font-family: $base-font-family;
|
||||
font-feature-settings: "kern", "liga 0";
|
||||
|
|
@ -46,7 +46,7 @@ p {
|
|||
|
||||
a {
|
||||
@include th {
|
||||
color: text-color();
|
||||
color: th(text-color);
|
||||
border-bottom: 1px dotted;
|
||||
}
|
||||
text-decoration: none;
|
||||
|
|
@ -84,7 +84,7 @@ img {
|
|||
* {
|
||||
@include selection(true) {
|
||||
@include th {
|
||||
background-color: text-selection-bg-color();
|
||||
background-color: th(text-selection-bg-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -26,20 +26,20 @@ $modal-icon-size: 6em;
|
|||
$large-padding: 2em;
|
||||
|
||||
// Borders
|
||||
@function base-border() { @return 1px solid base-border-color(); };
|
||||
@function light-border() { @return 1px solid light-border-color(); };
|
||||
@function base-border() { @return 1px solid th(base-border-color); };
|
||||
@function light-border() { @return 1px solid th(light-border-color); };
|
||||
@function selected-border-width() { @return 3px; }
|
||||
@function selected-border() { @return selected-border-width() solid th(action-color); }
|
||||
@function selected-hover-border() { @return 1px solid action-color(); }
|
||||
@function selected-hover-border() { @return 1px solid th(action-color); }
|
||||
@function selected-transparent-border() { @return 1px solid transparent; }
|
||||
|
||||
// Forms
|
||||
@function form-box-shadow() { @return inset 0 1px 3px form-box-shadow-color(); }
|
||||
@function form-box-shadow-focus() { @return form-box-shadow(), 0 0 3px form-box-shadow-color-focus(); }
|
||||
@function form-box-shadow-focus-error() { @return form-box-shadow(), 0 0 3px form-box-shadow-color-focus-error(); }
|
||||
@function form-box-shadow() { @return inset 0 1px 3px th(form-box-shadow-color); }
|
||||
@function form-box-shadow-focus() { @return form-box-shadow(), 0 0 3px th(form-box-shadow-color-focus); }
|
||||
@function form-box-shadow-focus-error() { @return form-box-shadow(), 0 0 3px th(form-box-shadow-color-focus-error); }
|
||||
|
||||
// Shadows
|
||||
@function dropdown-box-shadow() { @return 0 0 50px dropdown-box-shadow-color(); }
|
||||
@function dropdown-box-shadow() { @return 0 0 50px th(dropdown-box-shadow-color); }
|
||||
|
||||
// Animations
|
||||
$base-duration: 150ms;
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
|
||||
.pika-label {
|
||||
@include th {
|
||||
background: background-color();
|
||||
background: th(background-color);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -24,47 +24,47 @@ button.pika-next {
|
|||
}
|
||||
|
||||
.pika-table th {
|
||||
@include th { color: medium-color(); };
|
||||
@include th { color: th(medium-color); };
|
||||
}
|
||||
|
||||
.pika-button, button.pika-button {
|
||||
min-width: 0;
|
||||
border: none;
|
||||
@include th {
|
||||
color: text-color();
|
||||
background-color: background-color();
|
||||
color: th(text-color);
|
||||
background-color: th(background-color);
|
||||
border-radius: $base-border-radius;
|
||||
}
|
||||
}
|
||||
|
||||
.pika-week {
|
||||
@include th {
|
||||
color: medium-color();
|
||||
color: th(medium-color);
|
||||
}
|
||||
}
|
||||
|
||||
.is-today .pika-button {
|
||||
@include th {
|
||||
color: action-color();
|
||||
color: th(action-color);
|
||||
}
|
||||
}
|
||||
|
||||
.is-selected .pika-button {
|
||||
@include th {
|
||||
color: text-color();
|
||||
background: action-color();
|
||||
box-shadow: inset 0 1px 3px action-color(); // make darker?
|
||||
color: th(text-color);
|
||||
background: th(action-color);
|
||||
box-shadow: inset 0 1px 3px th(action-color); // make darker?
|
||||
}
|
||||
}
|
||||
|
||||
.is-disabled .pika-button {
|
||||
@include th { color: muted-color(); }
|
||||
@include th { color: th(muted-color); }
|
||||
opacity: .3;
|
||||
}
|
||||
|
||||
.pika-button:hover {
|
||||
@include th {
|
||||
color: text-color() !important;
|
||||
background: action-color() !important;
|
||||
color: th(text-color) !important;
|
||||
background: th(action-color) !important;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
z-index: $z-index-no-modal;
|
||||
border-radius: $base-border-radius;
|
||||
@include th {
|
||||
background: background-color();
|
||||
background: th(background-color);
|
||||
border: light-border();
|
||||
box-shadow: dropdown-box-shadow();
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
padding-bottom: $base-padding-h;
|
||||
&--custom {
|
||||
padding-top: $base-padding-h;
|
||||
@include th { border-top: 1px solid light-border-color(); }
|
||||
@include th { border-top: 1px solid th(light-border-color); }
|
||||
}
|
||||
}
|
||||
&__icon {
|
||||
|
|
|
|||
|
|
@ -1,12 +1,12 @@
|
|||
.modal {
|
||||
@include position(absolute, 0 null null 0);
|
||||
@include size(100%);
|
||||
@include th { background-color: rgba(background-color(), th(modal-opacity)); }
|
||||
@include th { background-color: th(modal-background-color); }
|
||||
z-index: $z-index-modal;
|
||||
|
||||
transition: background-color $base-duration $base-timing;
|
||||
&.modal--hidden {
|
||||
@include th { background-color: rgba(background-color(), 0); }
|
||||
@include th { background-color: th(modal-background-color-transparent); }
|
||||
}
|
||||
|
||||
&__content {
|
||||
|
|
|
|||
|
|
@ -12,8 +12,6 @@
|
|||
bottom: 10px;
|
||||
right: 5px;
|
||||
width: 8px;
|
||||
//border-radius: 5px;
|
||||
//background: rgba(128, 128, 128, .05);
|
||||
}
|
||||
&__bar {
|
||||
position: absolute;
|
||||
|
|
|
|||
|
|
@ -33,53 +33,53 @@
|
|||
&.tip--bottom:after {
|
||||
@include position(absolute, - nth($arrow-size-small, 2) null null 50%);
|
||||
@include transform(translate(-50%, 0));
|
||||
@include th { @include triangle($arrow-size-small, background-color(), up); }
|
||||
@include th { @include triangle($arrow-size-small, th(background-color), up); }
|
||||
}
|
||||
&.tip--top:after {
|
||||
@include position(absolute, 100% null null 50%);
|
||||
@include transform(translate(-50%, 0));
|
||||
@include th { @include triangle($arrow-size-small, background-color(), down); }
|
||||
@include th { @include triangle($arrow-size-small, th(background-color), down); }
|
||||
}
|
||||
&.tip--top-left:after {
|
||||
@include position(absolute, 100% null null calc(100% - #{$arrow-offset-small}));
|
||||
@include transform(translate(-50%, 0));
|
||||
@include th { @include triangle($arrow-size-small, background-color(), down); }
|
||||
@include th { @include triangle($arrow-size-small, th(background-color), down); }
|
||||
}
|
||||
&.tip--left:after {
|
||||
@include position(absolute, 50% null null 100%);
|
||||
@include transform(translate(0, -50%));
|
||||
@include th { @include triangle($arrow-size-small, background-color(), right); }
|
||||
@include th { @include triangle($arrow-size-small, th(background-color), right); }
|
||||
}
|
||||
&.tip--right:after {
|
||||
@include position(absolute, 50% null null (- nth($arrow-size-small, 2)));
|
||||
@include transform(translate(0, -50%));
|
||||
@include th { @include triangle($arrow-size-small, background-color(), left); }
|
||||
@include th { @include triangle($arrow-size-small, th(background-color), left); }
|
||||
}
|
||||
|
||||
&.tip--bottom:before {
|
||||
@include position(absolute, - nth($arrow-size-large, 2) null null 50%);
|
||||
@include transform(translate(-50%, 0));
|
||||
@include th { @include triangle($arrow-size-large, light-border-color(), up); }
|
||||
@include th { @include triangle($arrow-size-large, th(light-border-color), up); }
|
||||
}
|
||||
&.tip--top:before {
|
||||
@include position(absolute, 100% null null 50%);
|
||||
@include transform(translate(-50%, 0));
|
||||
@include th { @include triangle($arrow-size-large, light-border-color(), down); }
|
||||
@include th { @include triangle($arrow-size-large, th(light-border-color), down); }
|
||||
}
|
||||
&.tip--top-left:before {
|
||||
@include position(absolute, 100% null null calc(100% - #{$arrow-offset-small}));
|
||||
@include transform(translate(-50%, 0));
|
||||
@include th { @include triangle($arrow-size-large, light-border-color(), down); }
|
||||
@include th { @include triangle($arrow-size-large, th(light-border-color), down); }
|
||||
}
|
||||
&.tip--left:before {
|
||||
@include position(absolute, 50% null null 100%);
|
||||
@include transform(translate(0, -50%));
|
||||
@include th { @include triangle($arrow-size-large, light-border-color(), right); }
|
||||
@include th { @include triangle($arrow-size-large, th(light-border-color), right); }
|
||||
}
|
||||
&.tip--right:before {
|
||||
@include position(absolute, 50% null null (- nth($arrow-size-large, 2)));
|
||||
@include transform(translate(0, -50%));
|
||||
@include th { @include triangle($arrow-size-large, light-border-color(), left); }
|
||||
@include th { @include triangle($arrow-size-large, th(light-border-color), left); }
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
@mixin common-dropdown {
|
||||
@include th {
|
||||
color: text-color();
|
||||
background: background-color();
|
||||
border: 1px solid light-border-color();
|
||||
color: th(text-color);
|
||||
background: th(background-color);
|
||||
border: 1px solid th(light-border-color);
|
||||
box-shadow: dropdown-box-shadow();
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,12 +8,12 @@
|
|||
position: relative;
|
||||
-webkit-app-region: no-drag;
|
||||
transition: background-color $slow-transition-out;
|
||||
@include th { background: light-border-color(); }
|
||||
@include th { background: th(light-border-color); }
|
||||
&:hover, &.dragging {
|
||||
@include nomobile {
|
||||
transition: background-color $slow-transition-in;
|
||||
@include th {
|
||||
background: accent-border-color();
|
||||
background: th(accent-border-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,14 +7,14 @@
|
|||
border-#{$border}: selected-transparent-border();
|
||||
}
|
||||
&:hover, &.sel--active {
|
||||
background-color: intermediate-background-color();
|
||||
color: medium-color();
|
||||
background-color: th(intermediate-background-color);
|
||||
color: th(medium-color);
|
||||
@if ($border) {
|
||||
border-#{$border}: selected-hover-border();
|
||||
}
|
||||
}
|
||||
&:active {
|
||||
background-color: intermediate-pressed-background-color();
|
||||
background-color: th(intermediate-pressed-background-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -24,9 +24,9 @@
|
|||
-webkit-app-region: no-drag;
|
||||
@include th {
|
||||
border-#{$border}: selected-border();
|
||||
background-color: secondary-background-color();
|
||||
background-color: th(secondary-background-color);
|
||||
}
|
||||
&:hover {
|
||||
@include th { color: text-color(); }
|
||||
@include th { color: th(text-color); }
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue