diff options
5 files changed, 95 insertions, 84 deletions
| -rw-r--r-- | src/forms.less | 7 | ||||
| -rw-r--r-- | src/layout.less | 93 | ||||
| -rw-r--r-- | src/media.less | 1 | ||||
| -rw-r--r-- | src/mixins.less | 68 | ||||
| -rw-r--r-- | src/utilities/position.less | 10 |
diff --git a/src/forms.less b/src/forms.less index 616f53d..bc9b571 100644 --- a/src/forms.less +++ b/src/forms.less @@ -109,20 +109,23 @@ legend { border-radius: @border-radius; color: inherit; font-size: @font-size; + height: @control-size; line-height: @line-height; outline: none; padding: @control-padding-v @control-padding-h; vertical-align: middle; width: 100%; + &[size], &[multiple] { + height: auto; + option { padding: @unit-h @unit-1; } } - &:not([multiple]) { + &:not([multiple]):not([size]) { background: @bg-color-light url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23667189' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E") no-repeat right (@control-icon-size / 2) center / .4rem .5rem; - height: @control-size; padding-right: @control-icon-size + @control-padding-h; } &:focus { diff --git a/src/layout.less b/src/layout.less index 36323ff..7fd2c60 100644 --- a/src/layout.less +++ b/src/layout.less @@ -28,6 +28,15 @@ } } +// Responsive breakpoint system +.show-xs, +.show-sm, +.show-md, +.show-lg, +.show-xl { + display: none !important; +} + // Responsive grid system .columns { display: flex; @@ -39,7 +48,7 @@ margin-left: 0; margin-right: 0; - .column { + & > .column { padding-left: 0; padding-right: 0; } @@ -106,6 +115,21 @@ .col-1 { width: 8.33333333%; } +.col-auto { + flex: 0 0 auto; + max-width: none; + width: auto; +} +.col-mx-auto { + margin-left: auto; + margin-right: auto; +} +.col-ml-auto { + margin-left: auto; +} +.col-mr-auto { + margin-right: auto; +} @media screen and (max-width: @size-xl ) { .col-xl-12, .col-xl-11, @@ -157,6 +181,12 @@ .col-xl-1 { width: 8.33333333%; } + .hide-xl { + display: none !important; + } + .show-xl { + display: block !important; + } } @media screen and (max-width: @size-lg ) { .col-lg-12, @@ -209,6 +239,12 @@ .col-lg-1 { width: 8.33333333%; } + .hide-lg { + display: none !important; + } + .show-lg { + display: block !important; + } } @media screen and (max-width: @size-md ) { .col-md-12, @@ -261,6 +297,12 @@ .col-md-1 { width: 8.33333333%; } + .hide-md { + display: none !important; + } + .show-md { + display: block !important; + } } @media screen and (max-width: @size-sm ) { .col-sm-12, @@ -313,6 +355,12 @@ .col-sm-1 { width: 8.33333333%; } + .hide-sm { + display: none !important; + } + .show-sm { + display: block !important; + } } @media screen and (max-width: @size-xs) { .col-xs-12, @@ -365,17 +413,6 @@ .col-xs-1 { width: 8.33333333%; } -} - -// Responsive breakpoint system -.show-xs, -.show-sm, -.show-md, -.show-lg, -.show-xl { - display: none !important; -} -@media screen and (max-width: @size-xs) { .hide-xs { display: none !important; } @@ -383,35 +420,3 @@ display: block !important; } } -@media screen and (max-width: @size-sm) { - .hide-sm { - display: none !important; - } - .show-sm { - display: block !important; - } -} -@media screen and (max-width: @size-md) { - .hide-md { - display: none !important; - } - .show-md { - display: block !important; - } -} -@media screen and (max-width: @size-lg) { - .hide-lg { - display: none !important; - } - .show-lg { - display: block !important; - } -} -@media screen and (max-width: @size-xl) { - .hide-xl { - display: none !important; - } - .show-xl { - display: block !important; - } -} diff --git a/src/media.less b/src/media.less index 455d77c..a55b8cb 100644 --- a/src/media.less +++ b/src/media.less @@ -32,6 +32,7 @@ iframe, object, embed { + border: 0; bottom: 0; height: 100%; left: 0; diff --git a/src/mixins.less b/src/mixins.less index 62f0371..8b0f817 100644 --- a/src/mixins.less +++ b/src/mixins.less @@ -51,55 +51,55 @@ } // Position utility mixin -.margin-variant(@size: 1) { - .m-@{size} { - margin: @size * @unit-1; +.margin-variant(@id: 1, @size: 1) { + .m-@{id} { + margin: @size; } - .mb-@{size} { - margin-bottom: @size * @unit-1; + .mb-@{id} { + margin-bottom: @size; } - .ml-@{size} { - margin-left: @size * @unit-1; + .ml-@{id} { + margin-left: @size; } - .mr-@{size} { - margin-right: @size * @unit-1; + .mr-@{id} { + margin-right: @size; } - .mt-@{size} { - margin-top: @size * @unit-1; + .mt-@{id} { + margin-top: @size; } - .mx-@{size} { - margin-left: @size * @unit-1; - margin-right: @size * @unit-1; + .mx-@{id} { + margin-left: @size; + margin-right: @size; } - .my-@{size} { - margin-bottom: @size * @unit-1; - margin-top: @size * @unit-1; + .my-@{id} { + margin-bottom: @size; + margin-top: @size; } } -.padding-variant(@size: 1) { - .p-@{size} { - padding: @size * @unit-1; +.padding-variant(@id: 1, @size: 1) { + .p-@{id} { + padding: @size; } - .pb-@{size} { - padding-bottom: @size * @unit-1; + .pb-@{id} { + padding-bottom: @size; } - .pl-@{size} { - padding-left: @size * @unit-1; + .pl-@{id} { + padding-left: @size; } - .pr-@{size} { - padding-right: @size * @unit-1; + .pr-@{id} { + padding-right: @size; } - .pt-@{size} { - padding-top: @size * @unit-1; + .pt-@{id} { + padding-top: @size; } - .px-@{size} { - padding-left: @size * @unit-1; - padding-right: @size * @unit-1; + .px-@{id} { + padding-left: @size; + padding-right: @size; } - .py-@{size} { - padding-bottom: @size * @unit-1; - padding-top: @size * @unit-1; + .py-@{id} { + padding-bottom: @size; + padding-top: @size; } } diff --git a/src/utilities/position.less b/src/utilities/position.less index 1bf33b5..235d6a6 100644 --- a/src/utilities/position.less +++ b/src/utilities/position.less @@ -26,8 +26,10 @@ } // Spacing -.margin-variant(1); -.margin-variant(2); +.margin-variant(0, 0); +.margin-variant(1, @unit-1); +.margin-variant(2, @unit-2); -.padding-variant(1); -.padding-variant(2);
\ No newline at end of file +.padding-variant(0, 0); +.padding-variant(1, @unit-1); +.padding-variant(2, @unit-2);
\ No newline at end of file |