Get rid of some inconsistent shadows and borders.
This commit is contained in:
parent
8560f15047
commit
6e5702290a
|
@ -10,12 +10,10 @@ $background-color-dark: darken($background-color, 4%);
|
||||||
$error-color: #f01d43;
|
$error-color: #f01d43;
|
||||||
$error-color-dark: darken(#f01d43, 10%);
|
$error-color-dark: darken(#f01d43, 10%);
|
||||||
|
|
||||||
$active-input-color: lighten($background-color-light, 2%);
|
$inactive-input-color: lighten($background-color-light, 5%);
|
||||||
$active-input-border-color: $primary-color;
|
$active-input-color: lighten($inactive-input-color, 5%);
|
||||||
$inactive-input-color: $background-color-light;
|
|
||||||
$inactive-input-border-color: darken($inactive-input-color, 10%);
|
|
||||||
|
|
||||||
$transition-duration: .125s;
|
$transition-duration: .250s;
|
||||||
|
|
||||||
$inset-shadow: inset 0px 0px 5px rgba(0, 0, 0, .25);
|
$inset-shadow: inset 0px 0px 5px rgba(0, 0, 0, .25);
|
||||||
|
|
||||||
|
@ -36,20 +34,24 @@ body {
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
outline: none;
|
outline: none;
|
||||||
|
|
||||||
transition: background-color $transition-duration;
|
|
||||||
font-family: inherit;
|
font-family: inherit;
|
||||||
font-size: inherit;
|
font-size: inherit;
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
transition: background-color $transition-duration;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
input, textarea {
|
input, textarea {
|
||||||
@include input-common();
|
@include input-common();
|
||||||
|
overflow-x: hidden;
|
||||||
background-color: $inactive-input-color;
|
background-color: $inactive-input-color;
|
||||||
color: white;
|
color: white;
|
||||||
border: .5px solid $inactive-input-border-color;
|
border: none;
|
||||||
|
padding: 10px;
|
||||||
|
|
||||||
&:focus {
|
&:focus {
|
||||||
background-color: $active-input-color;
|
background-color: $active-input-color;
|
||||||
border-color: $active-input-border-color;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -105,7 +107,6 @@ div.errors-wrapper {
|
||||||
div.error-wrapper {
|
div.error-wrapper {
|
||||||
pointer-events: auto;
|
pointer-events: auto;
|
||||||
width: 400px;
|
width: 400px;
|
||||||
box-shadow: 0px 0px 5px rgba(0, 0, 0, .25);
|
|
||||||
padding: 5px;
|
padding: 5px;
|
||||||
background-color: $error-color;
|
background-color: $error-color;
|
||||||
border: 1px solid $error-color-dark;
|
border: 1px solid $error-color-dark;
|
||||||
|
@ -175,7 +176,6 @@ div.reconnect-wrapper {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
background-color: $inactive-input-color;
|
background-color: $inactive-input-color;
|
||||||
border: 1px solid $inactive-input-border-color;
|
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
|
|
||||||
.feather-icon {
|
.feather-icon {
|
||||||
|
@ -191,13 +191,12 @@ div.room-wrapper {
|
||||||
display: flex;
|
display: flex;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
box-shadow: $inset-shadow;
|
|
||||||
padding: 5px;
|
padding: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
div.typing-wrapper {
|
div.typing-wrapper {
|
||||||
padding: 5px;
|
padding: 5px;
|
||||||
height: 12px;
|
height: 1em;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -217,7 +216,6 @@ div.message-wrapper {
|
||||||
margin: 3px;
|
margin: 3px;
|
||||||
height: 40px;
|
height: 40px;
|
||||||
width: 40px;
|
width: 40px;
|
||||||
border-radius: 50px;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue
Block a user