Skip to content

Commit

Permalink
feat(chore): more variation options
Browse files Browse the repository at this point in the history 
This PR adds lots of additional options for the variation.variables customization for switching CSS Variations to be able to shorten a custom build even more.
  • Loading branch information
@lubber-de
lubber-de committed Sep 17, 2021
1 parent 905f3a9 commit d2fed5f
Show file tree
Hide file tree
Showing 21 changed files with 2,488 additions and 2,155 deletions.
236 changes: 123 additions & 113 deletions src/definitions/collections/form.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -291,19 +291,21 @@
width: auto;
}

/* Full Width Input */
.ui.form .ten.fields .ui.input input,
.ui.form .nine.fields .ui.input input,
.ui.form .eight.fields .ui.input input,
.ui.form .seven.fields .ui.input input,
.ui.form .six.fields .ui.input input,
.ui.form .five.fields .ui.input input,
.ui.form .four.fields .ui.input input,
.ui.form .three.fields .ui.input input,
.ui.form .two.fields .ui.input input,
.ui.form .wide.field .ui.input input {
flex: 1 0 auto;
width: 0;
& when (@variationFormEqualWidth) or (@variationFormWide) {
/* Full Width Input */
.ui.form .ten.fields .ui.input input,
.ui.form .nine.fields .ui.input input,
.ui.form .eight.fields .ui.input input,
.ui.form .seven.fields .ui.input input,
.ui.form .six.fields .ui.input input,
.ui.form .five.fields .ui.input input,
.ui.form .four.fields .ui.input input,
.ui.form .three.fields .ui.input input,
.ui.form .two.fields .ui.input input,
.ui.form .wide.field .ui.input input {
flex: 1 0 auto;
width: 0;
}
}


Expand Down Expand Up @@ -626,13 +628,15 @@
/*------------------
Input State
--------------------*/
/* Transparent */
.ui.form .field.@{state} .transparent.input input,
.ui.form .field.@{state} .transparent.input textarea,
.ui.form .field.@{state} input.transparent,
.ui.form .field.@{state} textarea.transparent {
background-color: @formStates[@@state][transparentBackground] !important;
color: @formStates[@@state][transparentColor] !important;
& when (@variationFormTransparent) {
/* Transparent */
.ui.form .field.@{state} .transparent.input input,
.ui.form .field.@{state} .transparent.input textarea,
.ui.form .field.@{state} input.transparent,
.ui.form .field.@{state} textarea.transparent {
background-color: @formStates[@@state][transparentBackground] !important;
color: @formStates[@@state][transparentColor] !important;
}
}

/* Autofilled */
Expand Down Expand Up @@ -942,42 +946,44 @@
box-shadow: none;
}

/* Other Combinations */
.ui.form .two.fields > .fields,
.ui.form .two.fields > .field {
width: @twoColumn;
}
.ui.form .three.fields > .fields,
.ui.form .three.fields > .field {
width: @threeColumn;
}
.ui.form .four.fields > .fields,
.ui.form .four.fields > .field {
width: @fourColumn;
}
.ui.form .five.fields > .fields,
.ui.form .five.fields > .field {
width: @fiveColumn;
}
.ui.form .six.fields > .fields,
.ui.form .six.fields > .field {
width: @sixColumn;
}
.ui.form .seven.fields > .fields,
.ui.form .seven.fields > .field {
width: @sevenColumn;
}
.ui.form .eight.fields > .fields,
.ui.form .eight.fields > .field {
width: @eightColumn;
}
.ui.form .nine.fields > .fields,
.ui.form .nine.fields > .field {
width: @nineColumn;
}
.ui.form .ten.fields > .fields,
.ui.form .ten.fields > .field {
width: @tenColumn;
& when (@variationFormEqualWidth) {
/* Other Combinations */
.ui.form .two.fields > .fields,
.ui.form .two.fields > .field {
width: @twoColumn;
}
.ui.form .three.fields > .fields,
.ui.form .three.fields > .field {
width: @threeColumn;
}
.ui.form .four.fields > .fields,
.ui.form .four.fields > .field {
width: @fourColumn;
}
.ui.form .five.fields > .fields,
.ui.form .five.fields > .field {
width: @fiveColumn;
}
.ui.form .six.fields > .fields,
.ui.form .six.fields > .field {
width: @sixColumn;
}
.ui.form .seven.fields > .fields,
.ui.form .seven.fields > .field {
width: @sevenColumn;
}
.ui.form .eight.fields > .fields,
.ui.form .eight.fields > .field {
width: @eightColumn;
}
.ui.form .nine.fields > .fields,
.ui.form .nine.fields > .field {
width: @nineColumn;
}
.ui.form .ten.fields > .fields,
.ui.form .ten.fields > .field {
width: @tenColumn;
}
}

/* Swap to full width on mobile */
Expand All @@ -994,72 +1000,76 @@
}
}

& when (@variationFormWide) {

/* Sizing Combinations */
.ui.form .fields .wide.field {
width: @oneWide;
padding-left: (@gutterWidth / 2);
padding-right: (@gutterWidth / 2);
}
/* Sizing Combinations */
.ui.form .fields .wide.field {
width: @oneWide;
padding-left: (@gutterWidth / 2);
padding-right: (@gutterWidth / 2);
}

.ui.form .one.wide.field {
width: @oneWide;
}
.ui.form .two.wide.field {
width: @twoWide;
}
.ui.form .three.wide.field {
width: @threeWide;
}
.ui.form .four.wide.field {
width: @fourWide;
}
.ui.form .five.wide.field {
width: @fiveWide;
}
.ui.form .six.wide.field {
width: @sixWide;
}
.ui.form .seven.wide.field {
width: @sevenWide;
}
.ui.form .eight.wide.field {
width: @eightWide;
}
.ui.form .nine.wide.field {
width: @nineWide;
}
.ui.form .ten.wide.field {
width: @tenWide;
}
.ui.form .eleven.wide.field {
width: @elevenWide;
}
.ui.form .twelve.wide.field {
width: @twelveWide;
}
.ui.form .thirteen.wide.field {
width: @thirteenWide;
}
.ui.form .fourteen.wide.field {
width: @fourteenWide;
}
.ui.form .fifteen.wide.field {
width: @fifteenWide;
}
.ui.form .sixteen.wide.field {
width: @sixteenWide;
.ui.form .one.wide.field {
width: @oneWide;
}
.ui.form .two.wide.field {
width: @twoWide;
}
.ui.form .three.wide.field {
width: @threeWide;
}
.ui.form .four.wide.field {
width: @fourWide;
}
.ui.form .five.wide.field {
width: @fiveWide;
}
.ui.form .six.wide.field {
width: @sixWide;
}
.ui.form .seven.wide.field {
width: @sevenWide;
}
.ui.form .eight.wide.field {
width: @eightWide;
}
.ui.form .nine.wide.field {
width: @nineWide;
}
.ui.form .ten.wide.field {
width: @tenWide;
}
.ui.form .eleven.wide.field {
width: @elevenWide;
}
.ui.form .twelve.wide.field {
width: @twelveWide;
}
.ui.form .thirteen.wide.field {
width: @thirteenWide;
}
.ui.form .fourteen.wide.field {
width: @fourteenWide;
}
.ui.form .fifteen.wide.field {
width: @fifteenWide;
}
.ui.form .sixteen.wide.field {
width: @sixteenWide;
}
}


/*--------------------
Equal Width
---------------------*/

.ui[class*="equal width"].form .fields > .field,
.ui.form [class*="equal width"].fields > .field {
width: 100%;
flex: 1 1 auto;
& when (@variationFormEqualWidth) {
.ui[class*="equal width"].form .fields > .field,
.ui.form [class*="equal width"].fields > .field {
width: 100%;
flex: 1 1 auto;
}
}

& when (@variationFormInline) {
Expand Down
Loading

0 comments on commit d2fed5f

Please sign in to comment.