changed search field and button colors

pull/3/head
Rebecca Hollis 5 years ago
parent 0c7d228ef9
commit d8625fe017

@ -102,27 +102,35 @@ body {
position: relative; position: relative;
display: flex; display: flex;
margin: auto; margin: auto;
max-width: 1100px max-width: 1100px;
} }
.sb-example-1 .searchTerm { .sb-example-1 .searchTerm {
width: 100%; width: 100%;
border: 1px solid; border: 1px solid;
border-color: map-get($theme-colors, boxborder2); border-color: map-get($theme-colors, boxborder3);
border-right: none; border-right: none;
padding-left: 15px; padding-left: 15px;
padding-right: 15px; padding-right: 15px;
border-radius: 25px 0 0 25px; border-radius: 25px 0 0 25px;
stroke: map-get($theme-colors, searchicon); stroke: map-get($theme-colors, searchicon);
color: map-get($theme-colors, searchhint); color: map-get($theme-colors, searchhint);
background-color: map-get($theme-colors, info); background-color: map-get($theme-colors, searchfill);
box-shadow: none;
outline: none;
}
.sb-example-1 .searchTerm:hover {
stroke: map-get($theme-colors, searchiconhover);
background-color: map-get($theme-colors, searchfill);
box-shadow: none; box-shadow: none;
color: map-get($theme-colors, searchfont) !important;
outline: none; outline: none;
} }
.sb-example-1 .searchTerm:focus { .sb-example-1 .searchTerm:focus {
stroke: map-get($theme-colors, searchicon); stroke: map-get($theme-colors, searchiconhover);
background-color: map-get($theme-colors, info); background-color: map-get($theme-colors, searchfill);
box-shadow: none; box-shadow: none;
color: map-get($theme-colors, searchfont) !important; color: map-get($theme-colors, searchfont) !important;
outline: none; outline: none;
@ -143,14 +151,29 @@ body {
outline: none; outline: none;
} }
.sb-example-1 .searchbutton:hover {
width: 40px;
height: 50px;
border: 1px solid;
border-color: map-get($theme-colors, boxborder2);
background-color: map-get($theme-colors, searchbuttonfill);
text-align: center;
fill: map-get($theme-colors, searchiconhover) !important;
border-radius: 0 25px 25px 0;
cursor: pointer;
font-weight: normal;
box-shadow: none;
outline: none;
}
.sb-example-1 .searchbutton:focus { .sb-example-1 .searchbutton:focus {
width: 40px; width: 40px;
height: 50px; height: 50px;
border: 1px solid; border: 1px solid;
border-color: map-get($theme-colors, boxborder2); border-color: map-get($theme-colors, boxborder2);
background-color: map-get($theme-colors, searchbuttonfillfocus); background-color: map-get($theme-colors, searchbuttonfill);
text-align: center; text-align: center;
fill: map-get($theme-colors, searchiconfocus); fill: map-get($theme-colors, searchiconfocus) !important;
border-radius: 0 25px 25px 0; border-radius: 0 25px 25px 0;
cursor: pointer; cursor: pointer;
font-weight: normal; font-weight: normal;

@ -11,15 +11,19 @@ $theme-colors: (
"inactivecard": #333337, "inactivecard": #333337,
"activecard": #4f4f56, "activecard": #4f4f56,
"boxborder": #272727, "boxborder": #272727,
"boxborder2": #2f2f2f, "boxborder2": #3c3c42,
"boxborder3": #323237,
"activecardfont":#e1e4e8, "activecardfont":#e1e4e8,
"searchhint": #6b6866, "searchhint": #6b6866,
"searchfont": #9f9c9a, "searchfont": #9f9c9a,
"searchfill": #323237,
"sidebarfill": #202023, "sidebarfill": #202023,
"searchbuttonfill": #39393f, "searchbuttonfill": #585861,
"searchbuttonfillfocus": #3e3e45, "searchbuttonfillhover": #808080,
"searchicon": #737373, "searchbuttonfillfocus": #585861,
"searchiconfocus": #878787, "searchicon": #808080,
"searchiconhover": #c5c5c5,
"searchiconfocus": #c5c5c5,
"sidebartext": #7d7d7d, "sidebartext": #7d7d7d,
"sidebarbg": #29292d, "sidebarbg": #29292d,
"webcardimagebackground": #707070, "webcardimagebackground": #707070,

@ -11,17 +11,21 @@ $theme-colors: (
"inactivecard": #ffffff, "inactivecard": #ffffff,
"activecard": #13a04a, "activecard": #13a04a,
"boxborder": #c0c2c6, "boxborder": #c0c2c6,
"boxborder2": #c0c2c6, "boxborder2": #ececec,
"boxborder3": #ebebeb,
"activecardfont": #e1e4e8, "activecardfont": #e1e4e8,
"searchhint": #c0c2c6, "searchhint": #c0c2c6,
"searchfont": #2c2c2c, "searchfont": #2c2c2c,
"sidebarfill": #efefef, "sidebarfill": #efefef,
"sidebartext": #3f4959, "sidebartext": #3f4959,
"sidebarbg": #e5e5e5, "sidebarbg": #e5e5e5,
"searchbuttonfill": #f6f6f6, "searchfill": #f0f0f2,
"searchbuttonfill": #ffffff,
"searchbuttonfillhover": #f6f6f6,
"searchbuttonfillfocus": #f1f1f1, "searchbuttonfillfocus": #f1f1f1,
"searchicon": #3f4959, "searchicon": #3f4959,
"searchiconfocus": #38414f, "searchiconhover": #000,
"searchiconfocus": #000,
"webcardimagebackground": #eeeeee, "webcardimagebackground": #eeeeee,
"webcardimagebackgroundhover": #f0f0f0, "webcardimagebackgroundhover": #f0f0f0,
"headertextcolor": #080404, "headertextcolor": #080404,

Loading…
Cancel
Save