Skip to content

Commit

Permalink
feat(@clayui/css): Input Group convert to Clay mixin pattern
Browse files Browse the repository at this point in the history 
    -.input-group, .input-group-item, .input-group-item-shrink, .input-group-text, .input-group-text-secondary, .input-group-lg, .input-group-sm, .input-group-inset, .input-group-inset[readonly]
    - Adds Sass maps $input-group, $input-group-text,  $input-group-text-secondary, $input-group-item, $input-group-item-shrink, $input-group-lg, $input-group-sm, $input-group-inset, $input-group-inset-readonly
  • Loading branch information
@pat270
pat270 committed Dec 23, 2021
1 parent 6e02e60 commit 98d8319
Show file tree
Hide file tree
Showing 2 changed files with 417 additions and 330 deletions.
320 changes: 12 additions & 308 deletions packages/clay-css/src/scss/components/_input-groups.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -121,117 +121,27 @@
// Input Group

.input-group {
align-items: stretch;
display: flex;
flex-wrap: wrap;
position: relative;
width: 100%;

.btn-unstyled {
color: inherit;
}
@include clay-input-group-variant($input-group);
}

// Input Group Item

.input-group-item {
display: flex;
flex-grow: 1;
flex-wrap: wrap;
margin-left: $input-group-item-margin-left;
width: 1%;
word-wrap: break-word;

&:first-child {
margin-left: 0;
}

> .btn {
align-self: flex-start;
}

> .dropdown {
display: flex;
flex-wrap: wrap;
word-wrap: break-word;
width: 100%;
}
@include clay-input-group-item-variant($input-group-item);
}

.input-group-item-shrink {
flex-grow: 0;
width: auto;
@include clay-input-group-item-variant($input-group-item-shrink);
}

// Input Group Text

.input-group-text {
align-items: center;
background-color: $input-group-addon-bg;
border-color: $input-group-addon-border-color;
border-style: solid;

border-bottom-width: $input-border-bottom-width;
border-left-width: $input-border-left-width;
border-right-width: $input-border-right-width;
border-top-width: $input-border-top-width;

@include border-radius($input-border-radius);

color: $input-group-addon-color;
display: flex;
font-size: $input-font-size;
font-weight: $input-group-addon-font-weight;
height: $input-height;
justify-content: center;
line-height: $input-line-height;

// Allow use of <label> elements by overriding our default margin-bottom

margin-bottom: 0;
min-width: $input-group-addon-min-width;
padding-bottom: $input-group-addon-padding-y;
padding-left: $input-group-addon-padding-x;
padding-right: $input-group-addon-padding-x;
padding-top: $input-group-addon-padding-y;
text-align: center;
white-space: nowrap;

@include clay-scale-component {
height: $input-height-mobile;
}

label {
color: $input-group-addon-color;
}

// Nuke default margins from checkboxes and radios to vertically center within.

input[type='radio'],
input[type='checkbox'] {
margin-top: 0;
}

.custom-control,
.form-check {
margin-bottom: 0;
}

.lexicon-icon {
margin-top: 0;
}
@include clay-input-group-text-variant($input-group-text);
}

.input-group-text-secondary {
background-color: $input-group-secondary-addon-bg;
border-color: $input-group-secondary-addon-border-color;
border-width: $input-group-secondary-addon-border-width;
color: $input-group-secondary-addon-color;
z-index: 2;

label {
color: $input-group-secondary-addon-color;
}
@include clay-input-group-text-variant($input-group-text-secondary);
}

// Input Group Stacked
Expand All @@ -243,167 +153,15 @@
// Input Group Sizes

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

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

> .form-control,
> .form-file .btn {
@include border-radius($input-border-radius-lg);

font-size: $input-font-size-lg;
height: $input-height-lg;
line-height: $input-line-height-lg;
padding-bottom: $input-padding-y-lg;
padding-left: $input-padding-x-lg;
padding-right: $input-padding-x-lg;
padding-top: $input-padding-y-lg;

@include clay-scale-component {
height: $input-height-lg-mobile;
}
}

> textarea.form-control,
> .form-control-textarea {
height: $input-textarea-height-lg;
}

> .form-control-plaintext {
font-size: $input-font-size-lg;
height: $input-height-lg;
line-height: $input-line-height-lg;
padding-bottom: $input-padding-y-lg;
padding-top: $input-padding-y-lg;

@include clay-scale-component {
height: $input-height-lg-mobile;
}
}

> .input-group-text {
@include border-radius($input-border-radius-lg);

font-size: $input-font-size-lg;
height: $input-height-lg;
min-width: $input-group-addon-min-width-lg;
padding-bottom: $input-group-addon-padding-y-lg;
padding-left: $input-group-addon-padding-x-lg;
padding-right: $input-group-addon-padding-x-lg;
padding-top: $input-group-addon-padding-y-lg;
}

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

> .btn-monospaced {
@include clay-button-variant(
$input-group-lg-inset-item-btn-monospaced
);
}

> .form-file {
height: 75%;

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

.input-group-lg {
@extend %clay-input-group-lg;
}

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

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

> .form-control,
> .form-file .btn {
@include border-radius($input-border-radius-sm);

font-size: $input-font-size-sm;
height: $input-height-sm;
line-height: $input-line-height-sm;
padding-bottom: $input-padding-y-sm;
padding-left: $input-padding-x-sm;
padding-right: $input-padding-x-sm;
padding-top: $input-padding-y-sm;

@include clay-scale-component {
height: $input-height-sm-mobile;
}
}

> .form-control-plaintext {
font-size: $input-font-size-sm;
height: $input-height-sm;
line-height: $input-line-height-sm;
padding-bottom: $input-padding-y-sm;
padding-top: $input-padding-y-sm;

@include clay-scale-component {
height: $input-height-sm-mobile;
}
}

> textarea.form-control,
> .form-control-textarea {
height: $input-textarea-height-sm;
}

> .input-group-text {
@include border-radius($input-border-radius-sm);

font-size: $input-font-size-sm;
height: $input-height-sm;
min-width: $input-group-addon-min-width-sm;
padding-bottom: $input-group-addon-padding-y-sm;
padding-left: $input-group-addon-padding-x-sm;
padding-right: $input-group-addon-padding-x-sm;
padding-top: $input-group-addon-padding-y-sm;
}

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

> .btn-monospaced {
@include clay-button-variant(
$input-group-sm-inset-item-btn-monospaced
);
}

> .form-file {
height: 75%;

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

&.clay-color {
> .input-group-item > .input-group-text {
Expand Down Expand Up @@ -432,72 +190,18 @@

// Input Group Inset

.input-group-item.focus {
@include border-radius($input-border-radius);

box-shadow: $input-focus-box-shadow;

.form-control,
.form-control[readonly] ~ .input-group-inset-item,
.input-group-inset-item {
background-color: $input-focus-bg;
border-color: $input-focus-border-color;
}
}

.input-group-item.input-group-prepend.focus {
@include border-right-radius(0);

z-index: 1;
}

.input-group-item.input-group-append.focus {
@include border-left-radius(0);
}

.input-group-inset {
flex-grow: 1;
order: 5;
width: 1%;

&[readonly] {
&:focus {
~ .input-group-inset-item {
background-color: $input-readonly-focus-bg;
border-color: $input-readonly-focus-border-color;
color: $input-readonly-focus-color;
}
}

~ .input-group-inset-item {
background-color: $input-readonly-bg;
border-color: $input-readonly-border-color;
color: $input-readonly-color;
cursor: $input-readonly-cursor;
}
}

&:focus {
box-shadow: none;

~ .input-group-inset-item {
background-color: $input-focus-bg;
border-color: $input-focus-border-color;
}
}

&:disabled {
~ .input-group-inset-item {
background-color: $input-disabled-bg;
border-color: $input-disabled-border-color;
}
}
@include clay-form-control-variant($input-group-inset);

~ .form-feedback-group {
order: 13;
}
}

.input-group-inset[readonly] {
@include clay-form-control-variant($input-group-inset-readonly);
}

.input-group {
.input-group-inset-item {
align-items: center;
Expand Down
Loading

0 comments on commit 98d8319

Please sign in to comment.