minor fix for broken styles / animation

This commit is contained in:
btzr-io 2017-08-18 18:06:53 -06:00
parent 5a9fdcdd26
commit 6455f49956
6 changed files with 15 additions and 12 deletions

View file

@ -144,7 +144,7 @@ $width-page-constrained: 800px;
&:hover &:hover
{ {
opacity: $hover-opacity; opacity: $hover-opacity;
transition: opacity var(--transition-standard); transition: opacity var(--transition-duration) var(--transition-type);
text-decoration: underline; text-decoration: underline;
.icon { .icon {
text-decoration: none; text-decoration: none;

View file

@ -28,10 +28,13 @@
/* Misc */ /* Misc */
--content-max-width: 1000px; --content-max-width: 1000px;
--standard-transition: .225s ease;
--nsfw-blur-intensity: 20px; --nsfw-blur-intensity: 20px;
--height-video-embedded: $width-page-constrained * 9 / 16 ; --height-video-embedded: $width-page-constrained * 9 / 16 ;
/* Transitions */
--transition-duration: .225s;
--transition-type: ease;
/* Text */ /* Text */
--text-color: #000; --text-color: #000;
--text-max-width: 660px; --text-max-width: 660px;
@ -47,9 +50,10 @@
--button-height: $spacing-vertical * 1.5; --button-height: $spacing-vertical * 1.5;
/* Header */ /* Header */
--header-bg: #FFF; --header-bg: var(--color-bg);
--header-color: #666; --header-color: #666;
--header-height: $spacing-vertical * 2.5; --header-height: $spacing-vertical * 2.5;
--header-shadow: var(--box-shadow-layer);
/* Window */ /* Window */
--window-bg: var(--color-canvas); --window-bg: var(--color-canvas);

View file

@ -52,7 +52,7 @@ $button-focus-shift: 12%;
.button-primary .button-primary
{ {
color: inherit; color: var(--button-primary-color);
background-color: var(--button-primary-bg); background-color: var(--button-primary-bg);
box-shadow: var(--box-shadow-layer); box-shadow: var(--box-shadow-layer);
&:focus { &:focus {

View file

@ -44,8 +44,7 @@ input[type="text"].input-copyable {
} }
select { select {
transition: outline var(--standar-transition); transition: outline var(--transition-duration) var(--transition-type);
cursor: pointer;
box-sizing: border-box; box-sizing: border-box;
padding-left: 5px; padding-left: 5px;
padding-right: 5px; padding-right: 5px;
@ -65,7 +64,7 @@ input[type="text"].input-copyable {
@include placeholder { @include placeholder {
//color: lighten($color-text-dark, 60%); //color: lighten($color-text-dark, 60%);
} }
transition: all var(--standar-transition); transition: all var(--transition-duration) var(--transition-type);
cursor: pointer; cursor: pointer;
padding-left: 1px; padding-left: 1px;
padding-right: 1px; padding-right: 1px;
@ -154,7 +153,7 @@ input[type="text"].input-copyable {
.form-field__error, .form-field__helper { .form-field__error, .form-field__helper {
margin-top: $spacing-vertical * 1/3; margin-top: $spacing-vertical * 1/3;
font-size: 0.8em; font-size: 0.8em;
transition: opacity var(--standar-transition); transition: opacity var(--transition-duration) var(--transition-type);
} }
.form-field__error { .form-field__error {

View file

@ -50,7 +50,7 @@ $color-header-active: darken($color-header, 20%);
@include border-radius(2px); @include border-radius(2px);
border: 1px solid #ccc; border: 1px solid #ccc;
&:focus { &:focus {
color: var(--color-header-active); color: $color-header-active;
box-shadow: var(--box-shadow-focus); box-shadow: var(--box-shadow-focus);
border-color: var(--color-primary); border-color: var(--color-primary);
} }
@ -81,12 +81,12 @@ nav.sub-header
} }
&.sub-header-selected &.sub-header-selected
{ {
border-bottom: $sub-header-selected-underline-height solid var(--color-header-active); border-bottom: $sub-header-selected-underline-height solid $color-header-active;
color: $color-header-active; color: $color-header-active;
} }
&:hover &:hover
{ {
color: var(--color-header-active); color: $color-header-active;
} }
} }
} }

View file

@ -125,6 +125,6 @@ video {
top: 0; top: 0;
&:hover { &:hover {
opacity: 1; opacity: 1;
transition: opacity var(--standar-transition); transition: opacity var(--transition-duration) var(--transition-type);
} }
} }