Skip to content

Commit

Permalink
Merge pull request #1355 from pat270/clay-1354
Browse files Browse the repository at this point in the history 
Fixes #1354 Clay CSS Buttons in Input Group should be more customizable
  • Loading branch information
@jbalsas
jbalsas authored Dec 5, 2018
2 parents cbd4e41 + 956332c commit 24e378f
Show file tree
Hide file tree
Showing 3 changed files with 204 additions and 105 deletions.
114 changes: 19 additions & 95 deletions packages/clay-css/src/scss/components/_input-groups.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@
display: flex;
flex-grow: 1;
flex-wrap: wrap;
margin-left: 0.5rem;
margin-left: $input-group-item-margin-left;
width: 1%;
word-wrap: break-word;

Expand Down Expand Up @@ -215,16 +215,20 @@
border-style: solid;
border-top-width: $input-border-top-width;
display: flex;
padding-left: 5px;
padding-right: 5px;
padding-left: $input-group-inset-item-padding-left;
padding-right: $input-group-inset-item-padding-right;
transition: $input-transition;

.btn {
@include clay-button-size($input-group-inset-item-btn);
}

.form-file {
height: 75%;
padding-bottom: 0;
padding-top: 0;
padding-left: ($btn-padding-x - 0.1875rem);
padding-right: ($btn-padding-x - 0.1875rem);

.btn {
@include clay-button-size($input-group-inset-form-file-btn);
}
}
}

Expand Down Expand Up @@ -273,38 +277,11 @@
.input-group-lg {
.input-group-item {
.btn {
font-size: $btn-font-size-lg;

@include clay-scale-component {
font-size: $btn-font-size-lg-mobile;
padding-bottom: $btn-padding-y-lg-mobile;
padding-left: $btn-padding-x-lg-mobile;
padding-right: $btn-padding-x-lg-mobile;
padding-top: $btn-padding-y-lg-mobile;
}

.inline-item {
font-size: $btn-inline-item-font-size-lg;
}

.btn-section {
font-size: $btn-section-font-size-lg;
}
@include clay-button-size($input-group-lg-item-btn);
}

.btn-monospaced {
height: $btn-monospaced-size-lg;
line-height: 1;
padding-bottom: $btn-monospaced-padding-y-lg;
padding-left: $btn-monospaced-padding-x-lg;
padding-right: $btn-monospaced-padding-x-lg;
padding-top: $btn-monospaced-padding-y-lg;
width: $btn-monospaced-size-lg;

@include clay-scale-component {
height: $btn-monospaced-size-lg-mobile;
width: $btn-monospaced-size-lg-mobile;
}
@include clay-button-size($input-group-lg-item-btn-monospaced);
}

.form-control,
Expand Down Expand Up @@ -347,27 +324,14 @@

.input-group-inset-item {
.btn {
font-size: $btn-font-size-lg;

@include clay-scale-component {
font-size: $btn-font-size-lg-mobile;
}
@include clay-button-size($input-group-lg-inset-item-btn);
}

.form-file {
height: 75%;

.btn {
font-size: $btn-font-size-lg;
height: 100%;
padding-bottom: 0;
padding-top: 0;
padding-left: ($btn-padding-x - 0.1875rem);
padding-right: ($btn-padding-x - 0.1875rem);

@include clay-scale-component {
font-size: $btn-font-size-lg-mobile;
}
@include clay-button-size($input-group-lg-inset-item-form-file-btn);
}
}
}
Expand All @@ -376,38 +340,11 @@
.input-group-sm {
.input-group-item {
.btn {
font-size: $btn-font-size-sm;

@include clay-scale-component {
font-size: $btn-font-size-sm-mobile;
padding-bottom: $btn-padding-y-sm-mobile;
padding-left: $btn-padding-x-sm-mobile;
padding-right: $btn-padding-x-sm-mobile;
padding-top: $btn-padding-y-sm-mobile;
}

.inline-item {
font-size: $btn-inline-item-font-size-sm;
}

.btn-section {
font-size: $btn-section-font-size-sm;
}
@include clay-button-size($input-group-sm-item-btn);
}

.btn-monospaced {
height: $btn-monospaced-size-sm;
line-height: 1;
padding-bottom: $btn-monospaced-padding-y-sm;
padding-left: $btn-monospaced-padding-x-sm;
padding-right: $btn-monospaced-padding-x-sm;
padding-top: $btn-monospaced-padding-y-sm;
width: $btn-monospaced-size-sm;

@include clay-scale-component {
height: $btn-monospaced-size-sm-mobile;
width: $btn-monospaced-size-sm-mobile;
}
@include clay-button-size($input-group-sm-item-btn-monospaced);
}

.form-control,
Expand Down Expand Up @@ -450,27 +387,14 @@

.input-group-inset-item {
.btn {
font-size: $btn-font-size-sm;

@include clay-scale-component {
font-size: $btn-font-size-sm-mobile;
}
@include clay-button-size($input-group-sm-inset-item-btn);
}

.form-file {
height: 75%;

.btn {
font-size: $btn-font-size-sm;
height: 100%;
padding-bottom: 0;
padding-top: 0;
padding-left: ($btn-padding-x - 0.1875rem);
padding-right: ($btn-padding-x - 0.1875rem);

@include clay-scale-component {
font-size: $btn-font-size-sm-mobile;
}
@include clay-button-size($input-group-sm-inset-item-form-file-btn);
}
}
}
Expand Down
79 changes: 79 additions & 0 deletions packages/clay-css/src/scss/mixins/_buttons.scss
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,82 @@
@mixin clay-button-size($map) {
$breakpoint-down: map-get($map, breakpoint-down);

$border-color: map-get($map, border-color);
$border-radius: map-get($map, border-radius);
$border-style: map-get($map, border-style);
$border-width: map-get($map, border-width);
$display: map-get($map, display);
$font-size: map-get($map, font-size);
$font-weight: map-get($map, font-weight);
$height: map-get($map, height);
$line-height: map-get($map, line-height);
$padding-bottom: map-get($map, padding-bottom);
$padding-left: map-get($map, padding-left);
$padding-right: map-get($map, padding-right);
$padding-top: map-get($map, padding-top);
$transition: map-get($map, transition);
$user-select: map-get($map, user-select);
$vertical-align: map-get($map, vertical-align);
$white-space: map-get($map, white-space);
$width: map-get($map, width);
$word-wrap: map-get($map, word-wrap);

$inline-item-font-size: map-get($map, inline-item-font-size);

$section-font-size: map-get($map, section-font-size);
$section-font-weight: map-get($map, section-font-weight);
$section-line-height: map-get($map, section-line-height);

$font-size-mobile: map-get($map, font-size-mobile);
$height-mobile: map-get($map, height-mobile);
$padding-bottom-mobile: map-get($map, padding-bottom-mobile);
$padding-left-mobile: map-get($map, padding-left-mobile);
$padding-right-mobile: map-get($map, padding-right-mobile);
$padding-top-mobile: map-get($map, padding-top-mobile);
$width-mobile: map-get($map, width-mobile);

border-color: $border-color;
border-radius: $border-radius;
border-style: $border-style;
border-width: $border-width;
display: $display;
font-size: $font-size;
font-weight: $font-weight;
height: $height;
line-height: $line-height;
padding-bottom: $padding-bottom;
padding-left: $padding-left;
padding-right: $padding-right;
padding-top: $padding-top;
transition: $transition;
user-select: $user-select;
vertical-align: $vertical-align;
white-space: $white-space;
width: $width;

@if ($breakpoint-down) {
@include media-breakpoint-down($breakpoint-down) {
font-size: $font-size-mobile;
height: $height-mobile;
padding-bottom: $padding-bottom-mobile;
padding-left: $padding-left-mobile;
padding-right: $padding-right-mobile;
padding-top: $padding-top-mobile;
width: $width-mobile;
}
}

.inline-item {
font-size: $inline-item-font-size;
}

.btn-section {
font-size: $section-font-size;
font-weight: $section-font-weight;
line-height: $section-line-height;
}
}

@mixin clay-button-variant($map) {
$bg: map-get($map, bg);
$border-color: map-get($map, border-color);
Expand Down
116 changes: 106 additions & 10 deletions packages/clay-css/src/scss/variables/_forms.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -185,26 +185,122 @@ $input-group-addon-min-width: 2.375rem !default; // 38px
$input-group-addon-padding-x: null !default;
$input-group-addon-padding-y: null !default;

// Input Group Sizes

$input-group-addon-min-width-lg: 3rem !default; // 48px
$input-group-addon-padding-x-lg: $input-padding-x-lg !default;
$input-group-addon-padding-y-lg: null !default;

$input-group-addon-min-width-sm: 1.9375rem !default; // 31px
$input-group-addon-padding-x-sm: $input-padding-x-sm !default;
$input-group-addon-padding-y-sm: null !default;

// Input Group Secondary

$input-group-secondary-addon-bg: $secondary !default;
$input-group-secondary-addon-border-color: $secondary !default;
$input-group-secondary-addon-border-width: 0.0625rem !default; // 1px
$input-group-secondary-addon-color: $white !default;

// Input Group Item

$input-group-item-margin-left: 0.5rem !default;

// Input Group Inset

$input-group-inset-item-color: $input-group-addon-color !default;
$input-group-inset-item-padding-left: 5px !default;
$input-group-inset-item-padding-right: 5px !default;

$input-group-inset-item-btn: () !default;
$input-group-inset-item-btn: map-merge((
height: 75%,
line-height: 1,
padding-bottom: 0,
padding-left: $btn-padding-x - 0.1875rem,
padding-right: $btn-padding-x - 0.1875rem,
padding-top: 0,
), $input-group-inset-item-btn);

$input-group-inset-form-file-btn: () !default;
$input-group-inset-form-file-btn: map-merge((
height: 100%,
), $input-group-inset-form-file-btn);

// Input Group Lg

$input-group-addon-min-width-lg: 3rem !default; // 48px
$input-group-addon-padding-x-lg: $input-padding-x-lg !default;
$input-group-addon-padding-y-lg: null !default;

$input-group-lg-item-btn: () !default; // .input-group-lg .input-group-item
$input-group-lg-item-btn: map-merge((
breakpoint-down: null,
font-size: $btn-font-size-lg,
inline-item-font-size: $btn-inline-item-font-size-lg,
section-font-size: $btn-section-font-size-lg,
font-size-mobile: $btn-font-size-lg-mobile,
padding-bottom: $btn-padding-y-lg-mobile,
padding-left: $btn-padding-x-lg-mobile,
padding-right: $btn-padding-x-lg-mobile,
padding-top: $btn-padding-y-lg-mobile,
), $input-group-lg-item-btn);

$input-group-lg-item-btn-monospaced: () !default;
$input-group-lg-item-btn-monospaced: map-merge((
breakpoint-down: null,
height: $btn-monospaced-size-lg,
padding-bottom: $btn-monospaced-padding-y-lg,
padding-left: $btn-monospaced-padding-x-lg,
padding-right: $btn-monospaced-padding-x-lg,
padding-top: $btn-monospaced-padding-y-lg,
width: $btn-monospaced-size-lg,
height-mobile: $btn-monospaced-size-lg-mobile,
width-mobile: $btn-monospaced-size-lg-mobile,
), $input-group-lg-item-btn-monospaced);

$input-group-lg-inset-item-btn: () !default;

$input-group-lg-inset-item-form-file-btn: () !default;
$input-group-lg-inset-item-form-file-btn: map-merge((
breakpoint-down: null,
height: 100%,
padding-bottom: 0,
padding-left: $btn-padding-x - 0.1875rem,
padding-right: $btn-padding-x - 0.1875rem,
padding-top: 0,
), $input-group-lg-inset-item-form-file-btn);

// Input Group Sm

$input-group-addon-min-width-sm: 1.9375rem !default; // 31px
$input-group-addon-padding-x-sm: $input-padding-x-sm !default;
$input-group-addon-padding-y-sm: null !default;

$input-group-sm-item-btn: () !default;
$input-group-sm-item-btn: map-merge((
font-size: $btn-font-size-sm,
inline-item-font-size: $btn-inline-item-font-size-sm,
section-font-size: $btn-section-font-size-sm,
font-size-mobile: $btn-font-size-sm-mobile,
padding-bottom-mobile: $btn-padding-y-sm-mobile,
padding-left-mobile: $btn-padding-x-sm-mobile,
padding-right-mobile: $btn-padding-x-sm-mobile,
padding-top-mobile: $btn-padding-y-sm-mobile,
), $input-group-sm-item-btn);

$input-group-sm-item-btn-monospaced: () !default;
$input-group-sm-item-btn-monospaced: map-merge((
height: $btn-monospaced-size-sm,
padding-bottom: $btn-monospaced-padding-y-sm,
padding-left: $btn-monospaced-padding-x-sm,
padding-right: $btn-monospaced-padding-x-sm,
padding-top: $btn-monospaced-padding-y-sm,
width: $btn-monospaced-size-sm,
height-mobile: $btn-monospaced-size-sm-mobile,
width-mobile: $btn-monospaced-size-sm-mobile,
), $input-group-sm-item-btn-monospaced);

$input-group-sm-inset-item-btn: () !default;

$input-group-sm-inset-item-form-file-btn: () !default;
$input-group-sm-inset-item-form-file-btn: map-merge((
height: 100%,
padding-bottom: 0,
padding-left: $btn-padding-x - 0.1875rem,
padding-right: $btn-padding-x - 0.1875rem,
padding-top: 0,
), $input-group-sm-inset-item-form-file-btn);

// Input Group Stacked

Expand Down

0 comments on commit 24e378f

Please sign in to comment.