feat(windows): add input border color variable to theme

replaced hardcoded values to use this

references #5565
This commit is contained in:
Brandy Carney
2016-02-24 11:53:41 -05:00
parent 85c1637e5b
commit 0d4971f190
5 changed files with 25 additions and 8 deletions

View File

@ -21,11 +21,13 @@ $alert-wp-message-font-size: 13px !default;
$alert-wp-message-padding: 0 20px 10px 20px !default; $alert-wp-message-padding: 0 20px 10px 20px !default;
$alert-wp-message-text-color: #000 !default; $alert-wp-message-text-color: #000 !default;
$alert-wp-input-border-color: #dedede !default; $alert-wp-input-border-color: $input-wp-border-color !default;
$alert-wp-input-text-color: #000000 !default; $alert-wp-input-text-color: #000000 !default;
$alert-wp-input-highlight-color: map-get($colors-wp, primary) !default; $alert-wp-input-highlight-color: map-get($colors-wp, primary) !default;
$alert-wp-input-margin-top: 5px !default; $alert-wp-input-margin-top: 5px !default;
$alert-wp-input-margin-bottom: 5px !default; $alert-wp-input-margin-bottom: 5px !default;
$alert-wp-input-padding-vertical: 0 !default;
$alert-wp-input-padding-horizontal: 8px !default;
$alert-wp-button-padding: 5px !default; $alert-wp-button-padding: 5px !default;
$alert-wp-button-text-color: #000 !default; $alert-wp-button-text-color: #000 !default;
@ -36,7 +38,9 @@ $alert-wp-button-margin-right: 1% !default;
$alert-wp-button-font-weight: 300 !default; $alert-wp-button-font-weight: 300 !default;
$alert-wp-checkbox-background-color: map-get($colors-wp, primary) !default; $alert-wp-checkbox-background-color: map-get($colors-wp, primary) !default;
$alert-wp-checkbox-border-color: $input-wp-border-color !default;
$alert-wp-radio-background-color: map-get($colors-wp, primary) !default; $alert-wp-radio-background-color: map-get($colors-wp, primary) !default;
$alert-wp-radio-border-color: $input-wp-border-color !default;
$alert-wp-buttons-padding: 8px 20px 20px 20px !default; $alert-wp-buttons-padding: 8px 20px 20px 20px !default;
$alert-wp-buttons-justify-content: flex-end !default; $alert-wp-buttons-justify-content: flex-end !default;
@ -90,13 +94,14 @@ $alert-wp-buttons-justify-content: flex-end !default;
// -------------------------------------------------- // --------------------------------------------------
.alert-input { .alert-input {
border-bottom: 1px solid $alert-wp-input-border-color; border: 2px solid $alert-wp-input-border-color;
color: $alert-wp-input-text-color; color: $alert-wp-input-text-color;
margin: $alert-wp-input-margin-top 0 $alert-wp-input-margin-bottom 0; margin: $alert-wp-input-margin-top 0 $alert-wp-input-margin-bottom 0;
padding: $alert-wp-input-padding-vertical $alert-wp-input-padding-horizontal;
line-height: 3rem;
&:focus { &:focus {
border-bottom: 2px solid $alert-wp-input-highlight-color; border-color: $alert-wp-input-highlight-color;
margin-bottom: $alert-wp-input-margin-bottom - 1;
} }
} }
@ -144,7 +149,7 @@ $alert-wp-buttons-justify-content: flex-end !default;
margin: 0; margin: 0;
border-width: 2px; border-width: 2px;
border-style: solid; border-style: solid;
border-color: darken($list-wp-border-color, 40%); border-color: $alert-wp-radio-border-color;
border-radius: 50%; border-radius: 50%;
&:after { &:after {
@ -194,7 +199,7 @@ $alert-wp-buttons-justify-content: flex-end !default;
border-radius: 2px; border-radius: 2px;
border-width: 2px; border-width: 2px;
border-style: solid; border-style: solid;
border-color: #818181; border-color: $alert-wp-checkbox-border-color;
background-color: transparent; background-color: transparent;
} }

View File

@ -11,7 +11,7 @@ $item-wp-paragraph-text-color: #666 !default;
$item-wp-font-size: 1.6rem !default; $item-wp-font-size: 1.6rem !default;
$item-wp-avatar-size: 4rem !default; $item-wp-avatar-size: 4rem !default;
$item-wp-thumbnail-size: 8rem !default; $item-wp-thumbnail-size: 8rem !default;
$item-wp-note-color: darken($list-wp-border-color, 10%) !default; $item-wp-note-color: $input-wp-border-color !default;
$item-wp-divider-bg: #fff !default; $item-wp-divider-bg: #fff !default;
$item-wp-divider-color: #222 !default; $item-wp-divider-color: #222 !default;

View File

@ -7,7 +7,7 @@
$searchbar-wp-padding: 0 !default; $searchbar-wp-padding: 0 !default;
$searchbar-wp-background-color: transparent !default; $searchbar-wp-background-color: transparent !default;
$searchbar-wp-border-width: 2px !default; $searchbar-wp-border-width: 2px !default;
$searchbar-wp-border-color: #818181 !default; $searchbar-wp-border-color: $input-wp-border-color !default;
$searchbar-wp-border-color-focused: map-get($colors-wp, primary) !default; $searchbar-wp-border-color-focused: map-get($colors-wp, primary) !default;
$searchbar-wp-input-search-icon-color: #858585 !default; $searchbar-wp-input-search-icon-color: #858585 !default;

View File

@ -60,11 +60,18 @@ $item-wp-padding-icon-bottom: 10px !default;
$item-wp-divider-bg: #151515 !default; $item-wp-divider-bg: #151515 !default;
$item-wp-divider-color: map-get($colors-wp, light) !default; $item-wp-divider-color: map-get($colors-wp, light) !default;
// Windows Toggle // Windows Toggle
// --------------------------------------------------- // ---------------------------------------------------
$toggle-wp-handle-background-color-off: map-get($colors-wp, light) !default; $toggle-wp-handle-background-color-off: map-get($colors-wp, light) !default;
// Windows Input
// --------------------------------------------------
$input-wp-border-color: map-get($colors-wp, light) !default;
// Ripple Color // Ripple Color
// -------------------------------------------------- // --------------------------------------------------

View File

@ -49,6 +49,11 @@ $item-wp-padding-icon-top: 11px !default;
$item-wp-padding-icon-bottom: 10px !default; $item-wp-padding-icon-bottom: 10px !default;
// Windows Input
// --------------------------------------------------
$input-wp-border-color: #818181 !default;
// Windows Body // Windows Body
// -------------------------------------------------- // --------------------------------------------------