Matching select-kit padding with inputs

This commit is contained in:
Kris 2018-04-19 11:36:09 -04:00
parent 2b0e505121
commit 108e622a61
8 changed files with 16 additions and 15 deletions

View File

@ -186,7 +186,7 @@ input {
&[type="color"] { &[type="color"] {
@include appearance-none; @include appearance-none;
display: inline-block; display: inline-block;
padding: 4px 10px; padding: $input-padding;
margin-bottom: 9px; margin-bottom: 9px;
font-size: $font-0; font-size: $font-0;
line-height: $line-height-large; line-height: $line-height-large;

View File

@ -9,6 +9,8 @@ $small-width: 800px !default;
$medium-width: 995px !default; $medium-width: 995px !default;
$large-width: 1110px !default; $large-width: 1110px !default;
$input-padding: 4px 10px;
// Brand color variables // Brand color variables
// -------------------------------------------------- // --------------------------------------------------

View File

@ -3,10 +3,6 @@
&.category-chooser { &.category-chooser {
width: 300px; width: 300px;
.combo-box-header {
padding: 4px;
}
.select-kit-row { .select-kit-row {
display: -webkit-box; display: -webkit-box;
display: -ms-flexbox; display: -ms-flexbox;

View File

@ -70,6 +70,7 @@
min-width: 100px; min-width: 100px;
max-height: 300px; max-height: 300px;
max-width: 30em; max-width: 30em;
padding: 4px 0;
.collection-header { .collection-header {
.category-filter { .category-filter {
@ -79,7 +80,7 @@
line-height: $line-height-medium; line-height: $line-height-medium;
font-weight: bold; font-weight: bold;
display: block; display: block;
padding: 10px 5px; padding: 6px 10px;
&:hover { &:hover {
text-decoration: underline; text-decoration: underline;
@ -101,7 +102,7 @@
font-weight: bold; font-weight: bold;
flex-direction: column; flex-direction: column;
align-items: flex-start; align-items: flex-start;
padding: 5px; padding: 5px 10px;
.category-desc { .category-desc {
font-weight: normal; font-weight: normal;
@ -117,7 +118,7 @@
} }
&:not(.no-content) { &:not(.no-content) {
padding: 5px; padding: 6px 10px;
} }
.topic-count { .topic-count {

View File

@ -5,14 +5,14 @@
} }
.select-kit-row { .select-kit-row {
margin: 4px; margin: 0;
min-height: 1px; min-height: 1px;
padding: 4px; padding: 6px 10px;
} }
.select-kit-filter { .select-kit-filter {
line-height: $line-height-medium; line-height: $line-height-medium;
padding: 5px 6px; padding: $input-padding;
border-top: 1px solid dark-light-diff($primary, $secondary, 90%, -60%); border-top: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
border-bottom: 1px solid dark-light-diff($primary, $secondary, 90%, -60%); border-bottom: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
@ -24,7 +24,7 @@
.select-kit-header { .select-kit-header {
background: $secondary; background: $secondary;
border: 1px solid $primary-medium; border: 1px solid $primary-medium;
padding: 4px; padding: $input-padding;
font-weight: 500; font-weight: 500;
font-size: $font-0; font-size: $font-0;
line-height: $line-height-large; line-height: $line-height-large;

View File

@ -28,6 +28,7 @@
flex-direction: column; flex-direction: column;
padding: 0; padding: 0;
max-height: 300px; max-height: 300px;
padding: 4px 0;
.collection-header { .collection-header {
.group-dropdown-filter { .group-dropdown-filter {

View File

@ -63,7 +63,7 @@
.selected-tags { .selected-tags {
display: flex; display: flex;
padding: 3px; padding: 4px 8px;
flex-wrap: wrap; flex-wrap: wrap;
border-bottom: 1px solid $primary-low; border-bottom: 1px solid $primary-low;
} }

View File

@ -30,8 +30,9 @@
.select-kit-collection { .select-kit-collection {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: 0;
max-height: 300px; max-height: 300px;
padding: 4px 0;
.collection-header { .collection-header {
.tag-filter { .tag-filter {
@ -41,7 +42,7 @@
line-height: $line-height-medium; line-height: $line-height-medium;
font-weight: bold; font-weight: bold;
display: block; display: block;
padding: 5px; padding: 6px 10px;
&:hover { &:hover {
text-decoration: underline; text-decoration: underline;