diff --git a/src/base/base.less b/src/base/base.less index 0caa10e98..b2ac79413 100644 --- a/src/base/base.less +++ b/src/base/base.less @@ -8,16 +8,16 @@ @viewport { width: device-width; } html { - font-size: 12px; + font-size: 12px; - // Changes the default tap highlight to be completely transparent in iOS. - -webkit-tap-highlight-color: rgba(0,0,0,0); + // Changes the default tap highlight to be completely transparent in iOS. + -webkit-tap-highlight-color: rgba(0,0,0,0); - // -webkit-font-smoothing: antialiased; + // -webkit-font-smoothing: antialiased; - @media (min-width: @screen-xs) { - font-size: 16px; - } + @media (min-width: @screen-xs) { + font-size: 16px; + } } body { @@ -30,7 +30,7 @@ body { } textarea { - resize: vertical; + resize: vertical; } button, [role=button] { @@ -38,13 +38,13 @@ button, [role=button] { } small { - font-size: @font-size-sm; + font-size: @font-size-sm; } pre, code { - font-family: @font-family-mono; + font-family: @font-family-mono; } img { - vertical-align: middle; + vertical-align: middle; } diff --git a/src/base/colors.less b/src/base/colors.less index 9eb59826e..a2fc22687 100644 --- a/src/base/colors.less +++ b/src/base/colors.less @@ -69,16 +69,16 @@ // Text -@text-light: @color-white; -@text-light-soft: fade(@color-white, 60%); +@text-light: @color-white; +@text-light-soft: fade(@color-white, 60%); @text-light-softer: fade(@color-white, 45%); -@text-light-softest: fade(@color-white, 35%); +@text-light-softest: fade(@color-white, 35%); -@text-dark-hue: @hue-slate; -@text-dark: hsl(@text-dark-hue, 10%, 25%); -@text-dark-soft: hsl(@text-dark-hue, 10%, 50%); -@text-dark-softer: hsl(@text-dark-hue, 10%, 65%); -@text-dark-softest: hsl(@text-dark-hue, 10%, 75%); +@text-dark-hue: @hue-slate; +@text-dark: hsl(@text-dark-hue, 10%, 25%); +@text-dark-soft: hsl(@text-dark-hue, 10%, 50%); +@text-dark-softer: hsl(@text-dark-hue, 10%, 65%); +@text-dark-softest: hsl(@text-dark-hue, 10%, 75%); @text-brand: hsl(@hue-brand-primary, 100%, 40%); @text-danger: @color-danger; diff --git a/src/components/alert.less b/src/components/alert.less index ac30c9bf2..d8426eee7 100644 --- a/src/components/alert.less +++ b/src/components/alert.less @@ -1,14 +1,14 @@ @alert-border-radius: @border-radius-1; .alert { - border-width: 1px; - border-style: solid; - padding: @spacer-2 @spacer-4; - border-radius: @border-radius-1; + border-width: 1px; + border-style: solid; + padding: @spacer-2 @spacer-4; + border-radius: @border-radius-1; } .alert-success { - background-color: #e0fffa; - border-color: #7be0d0; - color: #00ab90; + background-color: #e0fffa; + border-color: #7be0d0; + color: #00ab90; } diff --git a/src/components/buttons.less b/src/components/buttons.less index 79753bc82..edafb8ed7 100644 --- a/src/components/buttons.less +++ b/src/components/buttons.less @@ -1,265 +1,265 @@ @button-border-radius: @border-radius-1; .btn { - display: inline-block; - padding: 0.5em 1em; - font-weight: @font-weight-bold; - line-height: 1.25; - border-radius: @button-border-radius; + display: inline-block; + padding: 0.5em 1em; + font-weight: @font-weight-bold; + line-height: 1.25; + border-radius: @button-border-radius; + text-decoration: none; + font-family: @font-family-base; + + &:focus, &:hover { text-decoration: none; - font-family: @font-family-base; + } - &:focus, &:hover { - text-decoration: none; - } + &:active, &:focus { + .tab-focus; + } - &:active, &:focus { - .tab-focus; - } - - &:disabled, &.is-disabled { - cursor: not-allowed; - opacity: 0.2; - } + &:disabled, &.is-disabled { + cursor: not-allowed; + opacity: 0.2; + } } .btn-loading { - position: relative; + position: relative; + color: transparent !important; + + * { color: transparent !important; + } - * { - color: transparent !important; - } - - &:after { - position: absolute !important; - display: block; - height: 1rem; - width: 1rem; - top: 50%; - left: 50%; - margin-left: -0.5rem; - margin-top: -0.5rem; - border: 2px solid @text-dark; - border-radius: 0.5rem; - border-right-color: transparent; - border-top-color: transparent; - animation: spin-around 500ms infinite linear; - content: ""; - } + &:after { + position: absolute !important; + display: block; + height: 1rem; + width: 1rem; + top: 50%; + left: 50%; + margin-left: -0.5rem; + margin-top: -0.5rem; + border: 2px solid @text-dark; + border-radius: 0.5rem; + border-right-color: transparent; + border-top-color: transparent; + animation: spin-around 500ms infinite linear; + content: ""; + } } .button-outline-variant(@color) { - @inactive-border: lighten(@color, 0%); + @inactive-border: lighten(@color, 0%); + color: @color; + background-color: transparent; + border: 1px solid @inactive-border; + font-weight: @font-weight-regular; + + &:active, &:hover, &.is-active { color: @color; - background-color: transparent; - border: 1px solid @inactive-border; - font-weight: @font-weight-regular; + background-color: fade(@color, 10%); + border-color: @color; + } - &:active, &:hover, &.is-active { - color: @color; - background-color: fade(@color, 10%); - border-color: @color; - } + &:focus { + color: @color; + } - &:focus { - color: @color; - } - - &:disabled, &.is-disabled { - &:active, &:hover { - border-color: @inactive-border; - } + &:disabled, &.is-disabled { + &:active, &:hover { + border-color: @inactive-border; } + } } .btn-variant(@text; @background) { - @border-color: @background; + @border-color: @background; + color: @text; + font-weight: 700; + background-color: @background; + border: 1px solid @border-color; + + &:focus { + color: @text; + } + + &:not(.btn-themed) { + &:active, &:hover, &.is-active { + color: lighten(@text, 5%); + + background-color: darken(@background, 5%); + border: 1px solid darken(@border-color, 5%); + } + } + + &:disabled, &.is-disabled { color: @text; - font-weight: 700; background-color: @background; - border: 1px solid @border-color; + border-color: @border-color; + opacity: 0.5; + } - &:focus { - color: @text; + &.btn-loading { + &:after { + border-left-color: fade(@text, 70%); + border-bottom-color: fade(@text, 70%); } - - &:not(.btn-themed) { - &:active, &:hover, &.is-active { - color: lighten(@text, 5%); - - background-color: darken(@background, 5%); - border: 1px solid darken(@border-color, 5%); - } - } - - &:disabled, &.is-disabled { - color: @text; - background-color: @background; - border-color: @border-color; - opacity: 0.5; - } - - &.btn-loading { - &:after { - border-left-color: fade(@text, 70%); - border-bottom-color: fade(@text, 70%); - } - &:disabled { - color: @text; - background-color: @background; - border-color: @border-color; - opacity: 0.5; - } + &:disabled { + color: @text; + background-color: @background; + border-color: @border-color; + opacity: 0.5; } + } } .btn-bordered-variant(@text; @background; @border-color) { + color: @text; + font-weight: @font-weight-medium; + background-color: @background; + border: 1px solid @border-color; + + &:focus { + color: @text; + } + + &:active, &:hover, &.is-active { + color: darken(@text, 5%); + background-color: darken(@background, 5%); + border: 1px solid darken(@border-color, 5%); + } + + &:disabled, &.is-disabled { color: @text; - font-weight: @font-weight-medium; background-color: @background; - border: 1px solid @border-color; + border-color: @border-color; + opacity: 0.5; + } - &:focus { - color: @text; + &.btn-loading { + &:after { + border-left-color: fade(@text, 70%); + border-bottom-color: fade(@text, 70%); } - - &:active, &:hover, &.is-active { - color: darken(@text, 5%); - background-color: darken(@background, 5%); - border: 1px solid darken(@border-color, 5%); - } - - &:disabled, &.is-disabled { - color: @text; - background-color: @background; - border-color: @border-color; - opacity: 0.5; - } - - &.btn-loading { - &:after { - border-left-color: fade(@text, 70%); - border-bottom-color: fade(@text, 70%); - } - &:disabled { - color: @text; - background-color: @background; - border-color: @border-color; - opacity: 0.5; - } + &:disabled { + color: @text; + background-color: @background; + border-color: @border-color; + opacity: 0.5; } + } } .btn-primary { - .btn-variant(@btn-primary-text-color; @btn-primary-bg-color); + .btn-variant(@btn-primary-text-color; @btn-primary-bg-color); } .btn-secondary { - .btn-bordered-variant(@btn-secondary-text-color; @btn-secondary-bg-color; @btn-secondary-border-color); + .btn-bordered-variant(@btn-secondary-text-color; @btn-secondary-bg-color; @btn-secondary-border-color); } .btn-blue { - .btn-variant(@color-white; @color-blue); + .btn-variant(@color-white; @color-blue); } .btn-inv-outline { - .button-outline-variant(@btn-inv-outline-text-color); + .button-outline-variant(@btn-inv-outline-text-color); } .btn-twitter { - .btn-variant(@color-white; #26a0f0); - font-family: "Helvetica Neue", Arial, sans-serif; - font-weight: 500; + .btn-variant(@color-white; #26a0f0); + font-family: "Helvetica Neue", Arial, sans-serif; + font-weight: 500; } .btn-facebook { - .btn-variant(@color-white; #334F8D); - font-family: "Helvetica Neue", Arial, sans-serif; - font-weight: 500; + .btn-variant(@color-white; #334F8D); + font-family: "Helvetica Neue", Arial, sans-serif; + font-weight: 500; } .btn-link { - font-weight: @font-weight-regular; - color: @text-dark; - background-color: transparent; + font-weight: @font-weight-regular; + color: @text-dark; + background-color: transparent; - &:focus, &:hover { - color: darken(@text-dark, 15%); - text-decoration: underline; - } + &:focus, &:hover { + color: darken(@text-dark, 15%); + text-decoration: underline; + } } .btn-block { - display: block; - width: 100%; - text-align: center; + display: block; + width: 100%; + text-align: center; } .btn-sm { - font-size: @font-size-sm; + font-size: @font-size-sm; } .btn-lg { - font-size: @font-size-lg; + font-size: @font-size-lg; } @media (min-width: (@screen-sm)) { .sm:btn-lg { - .btn-lg; + .btn-lg; } } .btn-xs { - font-size: @font-size-xs; + font-size: @font-size-xs; } .btn-wide { - padding-left: 2em; - padding-right: 2em; + padding-left: 2em; + padding-right: 2em; } .btn-pad { - padding: 1em 2em; + padding: 1em 2em; } .btn-themed { + color: @btn-themed-text-color; + border: 1px solid; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: transparent; + border-left-color: transparent; + font-weight: 700; + + &:active, &:hover, &:focus { color: @btn-themed-text-color; - border: 1px solid; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: transparent; - font-weight: 700; + } - &:active, &:hover, &:focus { - color: @btn-themed-text-color; + &:disabled { + color: @btn-themed-text-color; + opacity: 0.5; + } + + &.btn-loading { + &:after { + border-left-color: fade(@btn-themed-text-color, 70%); + border-bottom-color: fade(@btn-themed-text-color, 70%); } - &:disabled { - color: @btn-themed-text-color; - opacity: 0.5; - } - - &.btn-loading { - &:after { - border-left-color: fade(@btn-themed-text-color, 70%); - border-bottom-color: fade(@btn-themed-text-color, 70%); - } - &:disabled { - color: @btn-themed-text-color; - opacity: 0.5; - } + color: @btn-themed-text-color; + opacity: 0.5; } + } } .btn-float { - -webkit-font-smoothing: subpixel-antialiased; // Prevent text rendering jank on Safari - transition: transform .4s, box-shadow .4s; - &:hover { - box-shadow: 0 6px 16px -4px rgba(0,0,0,0.25); - transform: translateY(-1 * @spacer-1); - } + -webkit-font-smoothing: subpixel-antialiased; // Prevent text rendering jank on Safari + transition: transform .4s, box-shadow .4s; + &:hover { + box-shadow: 0 6px 16px -4px rgba(0,0,0,0.25); + transform: translateY(-1 * @spacer-1); + } } diff --git a/src/components/card.less b/src/components/card.less index 16fef868f..6098aa28e 100644 --- a/src/components/card.less +++ b/src/components/card.less @@ -2,10 +2,10 @@ @card-border-radius: @border-radius-1; .card { - background: @color-white; - overflow: hidden; // Prevent things breaking out of border radius + background: @color-white; + overflow: hidden; // Prevent things breaking out of border radius } .card-section { - padding: @spacer-5 @spacer-6; + padding: @spacer-5 @spacer-6; } diff --git a/src/components/dropdown.less b/src/components/dropdown.less index 03d17b90a..f2b9ab97f 100644 --- a/src/components/dropdown.less +++ b/src/components/dropdown.less @@ -1,40 +1,40 @@ .dropdown-menu { - .absolute; - .pin-r; - .mt(px); - .bg-light; - .rounded; - .z50; - .mask; - .box-shadow; + .absolute; + .pin-r; + .mt(px); + .bg-light; + .rounded; + .z50; + .mask; + .box-shadow; - left: auto; + left: auto; } .dropdown-item { - .px(4); - .py(2); - .pull-t(px); - .border; - .border-dark; - .no-select; - &:first-child { - margin-top: 0; - .rounded-t; - } - &:last-child { - .rounded-b; - } - &:not(.is-disabled):hover { - .clickable; - .relative; - .bg-highlight; - .border-invisible; - * { - .text-light; - } - } - &.is-disabled { - cursor: not-allowed; + .px(4); + .py(2); + .pull-t(px); + .border; + .border-dark; + .no-select; + &:first-child { + margin-top: 0; + .rounded-t; + } + &:last-child { + .rounded-b; + } + &:not(.is-disabled):hover { + .clickable; + .relative; + .bg-highlight; + .border-invisible; + * { + .text-light; } + } + &.is-disabled { + cursor: not-allowed; + } } diff --git a/src/components/forms.less b/src/components/forms.less index e9988e113..0bd3d5a9c 100644 --- a/src/components/forms.less +++ b/src/components/forms.less @@ -2,215 +2,214 @@ @form-control-border: @border-default-color; .form-group { - } .form-label { - .block; - .text-sm; - .text-regular; - .mb(2); + .block; + .text-sm; + .text-regular; + .mb(2); } .form-control-file { - display: block; - max-width: 100%; + display: block; + max-width: 100%; - &::-webkit-file-upload-button { - .btn; - .btn-xs; - .btn-secondary; - cursor: pointer; - } + &::-webkit-file-upload-button { + .btn; + .btn-xs; + .btn-secondary; + cursor: pointer; + } } .form-control { - .py(2); - .px(3); + .py(2); + .px(3); + .bg-light; + .border; + .rounded; + + display: block; + width: 100%; + line-height: 1.25; + font-family: @font-family-base; + + &:focus { + .tab-focus; + } + + &.has-error { + border-color: @form-input-border-error-color; + } + + select& { + .pr(5); .bg-light; - .border; - .rounded; + background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAANCAYAAABlyXS1AAAABGdBTUEAALGPC/xhBQAAALJJREFUGBm9UCEOwkAQ3L3Cf2pwpKkhoQkej0GRUE/bpSdwbR3BYXlAwwOQmP4Eh7xlh4BFsuJmZzK7N3dMnxJp4xD05ByvRfIBssMh0i1CoJsqP4Hg0KOybDcmnIn44H2+SpJsrKrHNJ0/MDljpr332xpuIDh08H8XF0XTM/O9rnP5Xm4vEEs8sbSuV6VdVTVISEBw6AzBnJk5L7ZhMIwNl7bp+v4hNFHkpuYbAcEx9LNeG4xMYRDZ28cAAAAASUVORK5CYII=); + background-position: right 8px center; + background-repeat: no-repeat; + appearance: none; + } - display: block; - width: 100%; - line-height: 1.25; - font-family: @font-family-base; + [type="date"]& { + // Get the date picker to be the same height as a regular form control + &::-webkit-datetime-edit-fields-wrapper { padding: 0; } + &::-webkit-inner-spin-button { height: 1.25em; } + } - &:focus { - .tab-focus; + [type="number"]& { + // Hide the up/down spinner in Webkit + &::-webkit-inner-spin-button { -webkit-appearance: none; } + + // ...and Firefox + -moz-appearance: textfield; + } + + &::placeholder { + color: @form-input-placeholder-color; + } + + [type="color"]& { + position: relative; + + // Increased padding values simulate height of regular text content + padding-top: 1.125rem; + padding-bottom: 1.125rem; + + &::-webkit-color-swatch-wrapper { + .absolute; + .pin; + .py(2); + .px(3); } - - &.has-error { - border-color: @form-input-border-error-color; - } - - select& { - .pr(5); - .bg-light; - background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAANCAYAAABlyXS1AAAABGdBTUEAALGPC/xhBQAAALJJREFUGBm9UCEOwkAQ3L3Cf2pwpKkhoQkej0GRUE/bpSdwbR3BYXlAwwOQmP4Eh7xlh4BFsuJmZzK7N3dMnxJp4xD05ByvRfIBssMh0i1CoJsqP4Hg0KOybDcmnIn44H2+SpJsrKrHNJ0/MDljpr332xpuIDh08H8XF0XTM/O9rnP5Xm4vEEs8sbSuV6VdVTVISEBw6AzBnJk5L7ZhMIwNl7bp+v4hNFHkpuYbAcEx9LNeG4xMYRDZ28cAAAAASUVORK5CYII=); - background-position: right 8px center; - background-repeat: no-repeat; - appearance: none; - } - - [type="date"]& { - // Get the date picker to be the same height as a regular form control - &::-webkit-datetime-edit-fields-wrapper { padding: 0; } - &::-webkit-inner-spin-button { height: 1.25em; } - } - - [type="number"]& { - // Hide the up/down spinner in Webkit - &::-webkit-inner-spin-button { -webkit-appearance: none; } - - // ...and Firefox - -moz-appearance: textfield; - } - - &::placeholder { - color: @form-input-placeholder-color; - } - - [type="color"]& { - position: relative; - - // Increased padding values simulate height of regular text content - padding-top: 1.125rem; - padding-bottom: 1.125rem; - - &::-webkit-color-swatch-wrapper { - .absolute; - .pin; - .py(2); - .px(3); - } - &::-webkit-color-swatch { - border: 1px solid rgba(0,0,0,0.2); - } + &::-webkit-color-swatch { + border: 1px solid rgba(0,0,0,0.2); } + } } .form-control-borderless { - border-color: transparent; + border-color: transparent; } .form-control-static { - .py(2); - display: block; - width: 100%; - line-height: 1.25; - border: 1px solid transparent; // To ensure matches regular control height + .py(2); + display: block; + width: 100%; + line-height: 1.25; + border: 1px solid transparent; // To ensure matches regular control height } .help-block { - .text-sm; - .mt(1); + .text-sm; + .mt(1); } .form-group.has-error { - .form-label, .help-block { - .text-danger; - } - .form-control, .input-group { - border-color: @form-input-border-error-color; - } - .form-control-feedback { - .text-danger; - } + .form-label, .help-block { + .text-danger; + } + .form-control, .input-group { + border-color: @form-input-border-error-color; + } + .form-control-feedback { + .text-danger; + } } .form-control-feedback { - margin-top: @spacer-2; + margin-top: @spacer-2; } .input-group { + display: flex; + border: 1px solid @form-control-border; + border-radius: @form-control-radius; + background: @color-white; + overflow: hidden; + + .input-group-addon { display: flex; - border: 1px solid @form-control-border; - border-radius: @form-control-radius; - background: @color-white; - overflow: hidden; + padding-left: @spacer-3; + padding-right: @spacer-3; + border-right: 1px solid @form-control-border; + align-items: center; + } - .input-group-addon { - display: flex; - padding-left: @spacer-3; - padding-right: @spacer-3; - border-right: 1px solid @form-control-border; - align-items: center; - } - - .form-control { - flex: 1; - border: none; - border-radius: 0; - } + .form-control { + flex: 1; + border: none; + border-radius: 0; + } } .stacked-form { } .stacked-form-group { - margin-top: -1px; + margin-top: -1px; + position: relative; + .form-control, .input-group { + border-radius: 0; + box-shadow: none; position: relative; + &:focus { + .z10; + } + } + &:first-of-type { + margin-top: 0; .form-control, .input-group { - border-radius: 0; - box-shadow: none; - position: relative; - &:focus { - .z10; - } + border-top-left-radius: @form-control-radius; + border-top-right-radius: @form-control-radius; } - &:first-of-type { - margin-top: 0; - .form-control, .input-group { - border-top-left-radius: @form-control-radius; - border-top-right-radius: @form-control-radius; - } - } - &:last-of-type { - .form-control, .input-group { - border-bottom-left-radius: @form-control-radius; - border-bottom-right-radius: @form-control-radius; - } - } - .inset-form-icon { - .z20; + } + &:last-of-type { + .form-control, .input-group { + border-bottom-left-radius: @form-control-radius; + border-bottom-right-radius: @form-control-radius; } + } + .inset-form-icon { + .z20; + } } .inset-form-group { - position: relative; + position: relative; } .inset-form-icon { - display: flex; - align-items: center; - justify-content: center; - position: absolute; - top: 0; - bottom: 0; - left: 1px; // Make up for border - width: 2.75em; - color: @text-dark-soft; - .z20; + display: flex; + align-items: center; + justify-content: center; + position: absolute; + top: 0; + bottom: 0; + left: 1px; // Make up for border + width: 2.75em; + color: @text-dark-soft; + .z20; } .inset-form-control { - position: relative; - padding-left: 2.75em; - &:focus { - .z10; - } + position: relative; + padding-left: 2.75em; + &:focus { + .z10; + } } .form-control-pad { - padding: 1em 1em; + padding: 1em 1em; - &.inset-form-control { - padding-left: 3em; - } + &.inset-form-control { + padding-left: 3em; + } } .inset-form-icon-pad { - width: 1.4em; - left: ~"calc(1px + 1em)"; + width: 1.4em; + left: ~"calc(1px + 1em)"; } diff --git a/src/components/horizontal-rules.less b/src/components/horizontal-rules.less index 42c0fa3a2..f7d940410 100644 --- a/src/components/horizontal-rules.less +++ b/src/components/horizontal-rules.less @@ -1,18 +1,18 @@ .hr { - display: block; - box-sizing: border-box; + display: block; + box-sizing: border-box; } .hr-brand { - border: none; - background-color: @color-brand-primary; + border: none; + background-color: @color-brand-primary; } .hr-thick { - height: .375rem; + height: .375rem; } .hr-short { - width: 6rem; - margin-left: 0; + width: 6rem; + margin-left: 0; } diff --git a/src/components/icons.less b/src/components/icons.less index 769c3a566..7097c7896 100644 --- a/src/components/icons.less +++ b/src/components/icons.less @@ -1,23 +1,23 @@ .icon { - display: inline-block; - height: 1.25em; - width: auto; - fill: currentColor; - vertical-align: text-bottom; // Trial and error, this is the best option for 20px icon + 16px text + display: inline-block; + height: 1.25em; + width: auto; + fill: currentColor; + vertical-align: text-bottom; // Trial and error, this is the best option for 20px icon + 16px text } .icon-xs { - height: .5em; + height: .5em; } .icon-sm { - height: 1em; + height: 1em; } .icon-lg { - height: 2em; + height: 2em; } .icon-xl { - height: 4em; + height: 4em; } diff --git a/src/components/images.less b/src/components/images.less index 6b9cd1048..06f18d49f 100644 --- a/src/components/images.less +++ b/src/components/images.less @@ -1,49 +1,49 @@ .img-fit { - max-width: 100%; + max-width: 100%; } .img-inline { - height: 2em; - width: auto; + height: 2em; + width: auto; } .img-circle { border-radius: 50%; } .img-md { - height: 4rem; - width: auto; + height: 4rem; + width: auto; } .img-100 { - max-width: 100px; + max-width: 100px; } .sm:img-fit { - @media (min-width: @screen-sm) { - max-width: 100%; - } + @media (min-width: @screen-sm) { + max-width: 100%; + } } .img-7r { - height: auto; - width: 100%; - max-width: 7rem; + height: auto; + width: 100%; + max-width: 7rem; } .img-12r { - height: auto; - width: 100%; - max-width: 12rem; + height: auto; + width: 100%; + max-width: 12rem; } .img-16r { - height: auto; - width: 100%; - max-width: 16rem; + height: auto; + width: 100%; + max-width: 16rem; } .img-24r { - height: auto; - width: 100%; - max-width: 24rem; + height: auto; + width: 100%; + max-width: 24rem; } diff --git a/src/components/lists.less b/src/components/lists.less index 0e5d7497a..5f3a8d4ad 100644 --- a/src/components/lists.less +++ b/src/components/lists.less @@ -1,15 +1,15 @@ .bullet-list { - list-style-type: disc; - padding-left: 2.5rem; - > li { - margin-bottom: @spacer-2; - } + list-style-type: disc; + padding-left: 2.5rem; + > li { + margin-bottom: @spacer-2; + } } .numbered-list { - list-style-type: decimal; - padding-left: 2rem; - > li { - margin-bottom: @spacer-2; - } + list-style-type: decimal; + padding-left: 2rem; + > li { + margin-bottom: @spacer-2; + } } diff --git a/src/components/media-object.less b/src/components/media-object.less index a0cbf988d..38537fa09 100644 --- a/src/components/media-object.less +++ b/src/components/media-object.less @@ -1,13 +1,13 @@ .media-object { - display: flex; + display: flex; } .media-left { - > .zondicon { - vertical-align: sub; // Trial and error bullshit - } + > .zondicon { + vertical-align: sub; // Trial and error bullshit + } } .media-body { - flex: 1; + flex: 1; } diff --git a/src/glitter/animations.less b/src/glitter/animations.less index 2be09967e..a207221b1 100644 --- a/src/glitter/animations.less +++ b/src/glitter/animations.less @@ -1,4 +1,4 @@ @keyframes spin-around { - from { transform: rotate(0deg); } - to { transform: rotate(359deg); } + from { transform: rotate(0deg); } + to { transform: rotate(359deg); } } diff --git a/src/libraries/stripe-elements.less b/src/libraries/stripe-elements.less index e7fc197da..8d8a8fc7c 100644 --- a/src/libraries/stripe-elements.less +++ b/src/libraries/stripe-elements.less @@ -1,9 +1,9 @@ .StripeElement--focus { - .tab-focus; + .tab-focus; } .stacked-form-group { - .StripeElement--focus { - .z10; - } + .StripeElement--focus { + .z10; + } } diff --git a/src/utilities/backgrounds.less b/src/utilities/backgrounds.less index 38d429a8c..e2d9d7933 100644 --- a/src/utilities/backgrounds.less +++ b/src/utilities/backgrounds.less @@ -24,12 +24,12 @@ .hover-bg-highlight { &:hover { .bg-highlight; } } .generate-responsive-versions({ - &bg-light { .bg-light; } - &bg-light-soft { .bg-light-soft; } - &bg-light-softer { .bg-light-softer; } - &bg-primary { .bg-primary; } - &bg-primary-soft { .bg-primary-soft; } - &bg-primary-dark { .bg-primary-dark; } - &bg-overlay-soft { .bg-overlay-soft; } - &bg-overlay-dark { .bg-overlay-dark; } + &bg-light { .bg-light; } + &bg-light-soft { .bg-light-soft; } + &bg-light-softer { .bg-light-softer; } + &bg-primary { .bg-primary; } + &bg-primary-soft { .bg-primary-soft; } + &bg-primary-dark { .bg-primary-dark; } + &bg-overlay-soft { .bg-overlay-soft; } + &bg-overlay-dark { .bg-overlay-dark; } }); diff --git a/src/utilities/borders.less b/src/utilities/borders.less index 5ae8e808b..9423c3f8c 100644 --- a/src/utilities/borders.less +++ b/src/utilities/borders.less @@ -100,70 +100,70 @@ // Responsive .generate-responsive-versions({ - &border { .border; } - &border-t { .border-t; } - &border-b { .border-b; } - &border-l { .border-l; } - &border-r { .border-r; } - &border-2 { .border-2; } - &border-t-2 { .border-t-2; } - &border-b-2 { .border-b-2; } - &border-l-2 { .border-l-2; } - &border-r-2 { .border-r-2; } - &border-3 { .border-3; } - &border-t-3 { .border-t-3; } - &border-b-3 { .border-b-3; } - &border-l-3 { .border-l-3; } - &border-r-3 { .border-r-3; } - &border-4 { .border-4; } - &border-t-4 { .border-t-4; } - &border-b-4 { .border-b-4; } - &border-l-4 { .border-l-4; } - &border-r-4 { .border-r-4; } - &border-0 { .border-0; } - &border-t-0 { .border-t-0; } - &border-b-0 { .border-b-0; } - &border-l-0 { .border-l-0; } - &border-r-0 { .border-r-0; } - &border-dark { .border-dark; } - &border-dark-soft { .border-dark-soft; } - &border-dark-softer { .border-dark-softer; } - &border-light { .border-light; } - &border-light-soft { .border-light-soft; } - &border-light-softer { .border-light-softer; } - &border-t-dark { .border-t-dark; } - &border-t-dark-soft { .border-t-dark-soft; } - &border-t-dark-softer { .border-t-dark-softer; } - &border-t-light { .border-t-light; } - &border-t-light-soft { .border-t-light-soft; } - &border-t-light-softer { .border-t-light-softer; } - &border-r-dark { .border-r-dark; } - &border-r-dark-soft { .border-r-dark-soft; } - &border-r-dark-softer { .border-r-dark-softer; } - &border-r-light { .border-r-light; } - &border-r-light-soft { .border-r-light-soft; } - &border-r-light-softer { .border-r-light-softer; } - &border-b-dark { .border-b-dark; } - &border-b-dark-soft { .border-b-dark-soft; } - &border-b-dark-softer { .border-b-dark-softer; } - &border-b-light { .border-b-light; } - &border-b-light-soft { .border-b-light-soft; } - &border-b-light-softer { .border-b-light-softer; } - &border-l-dark { .border-l-dark; } - &border-l-dark-soft { .border-l-dark-soft; } - &border-l-dark-softer { .border-l-dark-softer; } - &border-l-light { .border-l-light; } - &border-l-light-soft { .border-l-light-soft; } - &border-l-light-softer { .border-l-light-softer; } - &rounded { .rounded; } - &rounded-t { .rounded-t; } - &rounded-r { .rounded-r; } - &rounded-b { .rounded-b; } - &rounded-l { .rounded-l; } - &rounded-lg { .rounded-lg; } - &rounded-t-lg { .rounded-t-lg; } - &rounded-r-lg { .rounded-r-lg; } - &rounded-b-lg { .rounded-b-lg; } - &rounded-l-lg { .rounded-l-lg; } - &pill { .pill; } + &border { .border; } + &border-t { .border-t; } + &border-b { .border-b; } + &border-l { .border-l; } + &border-r { .border-r; } + &border-2 { .border-2; } + &border-t-2 { .border-t-2; } + &border-b-2 { .border-b-2; } + &border-l-2 { .border-l-2; } + &border-r-2 { .border-r-2; } + &border-3 { .border-3; } + &border-t-3 { .border-t-3; } + &border-b-3 { .border-b-3; } + &border-l-3 { .border-l-3; } + &border-r-3 { .border-r-3; } + &border-4 { .border-4; } + &border-t-4 { .border-t-4; } + &border-b-4 { .border-b-4; } + &border-l-4 { .border-l-4; } + &border-r-4 { .border-r-4; } + &border-0 { .border-0; } + &border-t-0 { .border-t-0; } + &border-b-0 { .border-b-0; } + &border-l-0 { .border-l-0; } + &border-r-0 { .border-r-0; } + &border-dark { .border-dark; } + &border-dark-soft { .border-dark-soft; } + &border-dark-softer { .border-dark-softer; } + &border-light { .border-light; } + &border-light-soft { .border-light-soft; } + &border-light-softer { .border-light-softer; } + &border-t-dark { .border-t-dark; } + &border-t-dark-soft { .border-t-dark-soft; } + &border-t-dark-softer { .border-t-dark-softer; } + &border-t-light { .border-t-light; } + &border-t-light-soft { .border-t-light-soft; } + &border-t-light-softer { .border-t-light-softer; } + &border-r-dark { .border-r-dark; } + &border-r-dark-soft { .border-r-dark-soft; } + &border-r-dark-softer { .border-r-dark-softer; } + &border-r-light { .border-r-light; } + &border-r-light-soft { .border-r-light-soft; } + &border-r-light-softer { .border-r-light-softer; } + &border-b-dark { .border-b-dark; } + &border-b-dark-soft { .border-b-dark-soft; } + &border-b-dark-softer { .border-b-dark-softer; } + &border-b-light { .border-b-light; } + &border-b-light-soft { .border-b-light-soft; } + &border-b-light-softer { .border-b-light-softer; } + &border-l-dark { .border-l-dark; } + &border-l-dark-soft { .border-l-dark-soft; } + &border-l-dark-softer { .border-l-dark-softer; } + &border-l-light { .border-l-light; } + &border-l-light-soft { .border-l-light-soft; } + &border-l-light-softer { .border-l-light-softer; } + &rounded { .rounded; } + &rounded-t { .rounded-t; } + &rounded-r { .rounded-r; } + &rounded-b { .rounded-b; } + &rounded-l { .rounded-l; } + &rounded-lg { .rounded-lg; } + &rounded-t-lg { .rounded-t-lg; } + &rounded-r-lg { .rounded-r-lg; } + &rounded-b-lg { .rounded-b-lg; } + &rounded-l-lg { .rounded-l-lg; } + &pill { .pill; } }); diff --git a/src/utilities/flex.less b/src/utilities/flex.less index a7d866b97..e4acba06b 100644 --- a/src/utilities/flex.less +++ b/src/utilities/flex.less @@ -2,46 +2,46 @@ .flex-top { align-items: flex-start; } .flex-col { - display: flex; - flex-direction: column; - .flex-reverse { - flex-direction: column-reverse; - } + display: flex; + flex-direction: column; + .flex-reverse { + flex-direction: column-reverse; + } } .flex-center { - display: flex; - justify-content: center; - align-items: center; + display: flex; + justify-content: center; + align-items: center; } .flex-y-center { - display: flex; - align-items: center; + display: flex; + align-items: center; } .flex-y-end { - display: flex; - align-items: flex-end; + display: flex; + align-items: flex-end; } .flex-y-baseline { - display: flex; - align-items: baseline; + display: flex; + align-items: baseline; } .flex-right { - justify-content: flex-end; + justify-content: flex-end; } .flex-spaced { - display: flex; - justify-content: space-between; + display: flex; + justify-content: space-between; } .flex-around { - display: flex; - justify-content: space-around; + display: flex; + justify-content: space-around; } .flex-fill { max-width: 100%; flex: 1; } @@ -50,4 +50,3 @@ .flex-reverse { flex-direction: row-reverse; } .flex-wrap { flex-wrap: wrap; } - diff --git a/src/utilities/layout.less b/src/utilities/layout.less index 34344741a..30b564d8c 100644 --- a/src/utilities/layout.less +++ b/src/utilities/layout.less @@ -6,11 +6,10 @@ .constrain-xxl { max-width: 52rem; flex-basis: 52rem; } .responsive({ - &constrain-xs { .constrain-xs; } - &constrain-sm { .constrain-sm; } - &constrain-md { .constrain-md; } - &constrain-lg { .constrain-lg; } - &constrain-xl { .constrain-xl; } - &constrain-xxl { .constrain-xxl; } + &constrain-xs { .constrain-xs; } + &constrain-sm { .constrain-sm; } + &constrain-md { .constrain-md; } + &constrain-lg { .constrain-lg; } + &constrain-xl { .constrain-xl; } + &constrain-xxl { .constrain-xxl; } }); - diff --git a/src/utilities/links.less b/src/utilities/links.less index 30e5b6281..a2f86fdfb 100644 --- a/src/utilities/links.less +++ b/src/utilities/links.less @@ -1,71 +1,71 @@ a, .link { - font-weight: @font-weight-regular; - color: @text-dark; - text-decoration: none; + font-weight: @font-weight-regular; + color: @text-dark; + text-decoration: none; - &:hover, &:focus { - color: darken(@text-dark, 15%); - text-decoration: underline; - } - &:focus { - .tab-focus; - } + &:hover, &:focus { + color: darken(@text-dark, 15%); + text-decoration: underline; + } + &:focus { + .tab-focus; + } } .link-brand { - color: @text-brand; + color: @text-brand; - &:hover, &:focus { - color: darken(@text-brand, 15%); - } + &:hover, &:focus { + color: darken(@text-brand, 15%); + } } .link-underline { - text-decoration: underline; + text-decoration: underline; } .link-plain { - &:hover, &:focus { - text-decoration: none; - } + &:hover, &:focus { + text-decoration: none; + } } .link-soft { - .text-dark-soft; + .text-dark-soft; - &:hover, &:focus { - .text-dark; - } + &:hover, &:focus { + .text-dark; + } } .link-softer { - .text-dark-soft; + .text-dark-soft; - &:hover, &:focus { - .text-dark; - } + &:hover, &:focus { + .text-dark; + } } .link-softest { - .text-dark-softest; + .text-dark-softest; - &:hover, &:focus { - .text-dark; - } + &:hover, &:focus { + .text-dark; + } } .link-light { - color: @text-light; + color: @text-light; - &:hover, &:focus { - color: @text-light; - } + &:hover, &:focus { + color: @text-light; + } } .link-light-soft { - color: @text-light-soft; + color: @text-light-soft; - &:hover, &:focus { - color: @text-light; - } + &:hover, &:focus { + color: @text-light; + } } diff --git a/src/utilities/misc.less b/src/utilities/misc.less index 2a775c10f..5fcc4eee5 100644 --- a/src/utilities/misc.less +++ b/src/utilities/misc.less @@ -4,105 +4,105 @@ .screen-xl(@ruleset) { @media (min-width: @screen-xl) { @ruleset(); }} .responsive(@ruleset) { - .screen-sm({ .sm\: { @ruleset(); }}); - .screen-md({ .md\: { @ruleset(); }}); - .screen-lg({ .lg\: { @ruleset(); }}); - .screen-xl({ .xl\: { @ruleset(); }}); + .screen-sm({ .sm\: { @ruleset(); }}); + .screen-md({ .md\: { @ruleset(); }}); + .screen-lg({ .lg\: { @ruleset(); }}); + .screen-xl({ .xl\: { @ruleset(); }}); } .generate-responsive-versions(@ruleset; @i: 1) when (@i <= length(@screens)) { - @screen: extract(@screens, @i); - @name: extract(@screen, 1); - @screen-width: extract(@screen, 3); + @screen: extract(@screens, @i); + @name: extract(@screen, 1); + @screen-width: extract(@screen, 3); - .generate-responsive-version(@ruleset, @name, @screen-width); - .generate-responsive-versions(@ruleset, @i + 1); + .generate-responsive-version(@ruleset, @name, @screen-width); + .generate-responsive-versions(@ruleset, @i + 1); } .generate-responsive-version(@ruleset, @screen, @min-width) { - @prefix: ~"@{screen}\:"; + @prefix: ~"@{screen}\:"; - @media (min-width: @min-width) { - .@{prefix} { @ruleset(); }; - } + @media (min-width: @min-width) { + .@{prefix} { @ruleset(); }; + } } .no-focus { - &:focus, &:active { - outline: none; - } + &:focus, &:active { + outline: none; + } } .no-wrap { - white-space: nowrap; + white-space: nowrap; } .box-shadow { - box-shadow: 0 2px 4px rgba(0,0,0,0.1); + box-shadow: 0 2px 4px rgba(0,0,0,0.1); } .box-shadow-soft { - box-shadow: 0 2px 4px rgba(0,0,0,0.02); + box-shadow: 0 2px 4px rgba(0,0,0,0.02); } .box-shadow-z2 { - box-shadow: 0 15px 35px hsla(240, 10%, 28%, 0.15), 0 5px 15px rgba(0,0,0,.07); + box-shadow: 0 15px 35px hsla(240, 10%, 28%, 0.15), 0 5px 15px rgba(0,0,0,.07); } .responsive({ - &box-shadow-z2 { .box-shadow-z2; } + &box-shadow-z2 { .box-shadow-z2; } }); .inset-shadow { - box-shadow: inset 0 1px 2px rgba(0,0,0,0.05); + box-shadow: inset 0 1px 2px rgba(0,0,0,0.05); } .tab-focus { - // Default - outline: thin dotted; - // WebKit - outline: 5px auto -webkit-focus-ring-color; - outline-offset: -2px; + // Default + outline: thin dotted; + // WebKit + outline: 5px auto -webkit-focus-ring-color; + outline-offset: -2px; } .full-height { - min-height: 100vh; + min-height: 100vh; } .full-width { - width: 100%; + width: 100%; } .clickable { - cursor: pointer; - user-select: none; + cursor: pointer; + user-select: none; } .no-select { - user-select: none; + user-select: none; } .ease { - transition: all 0.2s ease; + transition: all 0.2s ease; } // Useful for hiding things like radio buttons without making them inaccessible // to the keyboard when navigating forms. .pseudo-hidden { - position: absolute; - opacity: 0; - z-index: -1; + position: absolute; + opacity: 0; + z-index: -1; } .sr-only { - position: absolute; - width: 1px; - height: 1px; - padding: 0; - margin: -1px; - overflow: hidden; - clip: rect(0,0,0,0); - border: 0; + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0,0,0,0); + border: 0; } // Display @@ -114,9 +114,9 @@ .table-cell { display: table-cell; } .responsive({ - &block { .block; } - &inline-block { .inline-block; } - &hidden { .hidden; } + &block { .block; } + &inline-block { .inline-block; } + &hidden { .hidden; } }); // Position @@ -135,25 +135,25 @@ .mask { overflow: hidden; } .aspect-2\:1 { - padding-bottom: 50%; + padding-bottom: 50%; } .aspect-16\:9 { - padding-bottom: 56.25%; + padding-bottom: 56.25%; } .hover-only { - opacity: 0; - &:hover { - opacity: 1; - } + opacity: 0; + &:hover { + opacity: 1; + } } .responsive({ - &hover-only { .hover-only; } + &hover-only { .hover-only; } }); .bg-cover { - background-size: cover; - background-position: center; + background-size: cover; + background-position: center; } diff --git a/src/utilities/spacing.less b/src/utilities/spacing.less index 798f87763..e802d784c 100644 --- a/src/utilities/spacing.less +++ b/src/utilities/spacing.less @@ -16,43 +16,43 @@ @spacer-15: 30rem; @spacer-map: - px 1px, - 0 @spacer-0, - 1 @spacer-1, - 2 @spacer-2, - 3 @spacer-3, - 4 @spacer-4, - 5 @spacer-5, - 6 @spacer-6, - 7 @spacer-7, - 8 @spacer-8, - 9 @spacer-9, - 10 @spacer-10, - 11 @spacer-11, - 12 @spacer-12, - 13 @spacer-13, - 14 @spacer-14, - 15 @spacer-15; + px 1px, + 0 @spacer-0, + 1 @spacer-1, + 2 @spacer-2, + 3 @spacer-3, + 4 @spacer-4, + 5 @spacer-5, + 6 @spacer-6, + 7 @spacer-7, + 8 @spacer-8, + 9 @spacer-9, + 10 @spacer-10, + 11 @spacer-11, + 12 @spacer-12, + 13 @spacer-13, + 14 @spacer-14, + 15 @spacer-15; .apply-match(@map; @search; @ruleset) { - @current: extract(extract(@map, 1), 1); - .apply-match(@map; @search; @current; @ruleset; 1); + @current: extract(extract(@map, 1), 1); + .apply-match(@map; @search; @current; @ruleset; 1); } .apply-match(@map; @search; @current; @ruleset; @i) when not (@search = @current) and (@i <= length(@spacer-map)) { - @current: extract(extract(@map, @i + 1), 1); - .apply-match(@map; @search; @current; @ruleset; @i + 1); + @current: extract(extract(@map, @i + 1), 1); + .apply-match(@map; @search; @current; @ruleset; @i + 1); } .apply-match(@map; @search; @current; @ruleset; @i) when (@search = @current) and (@i <= length(@spacer-map)) { - & { - @__spacer-size: extract(extract(@map, @i), 2); - @ruleset(); - } + & { + @__spacer-size: extract(extract(@map, @i), 2); + @ruleset(); + } } .apply-spacer(@search; @ruleset) { - .apply-match(@spacer-map; @search; @ruleset); + .apply-match(@spacer-map; @search; @ruleset); } .pt(@spacer) { .apply-spacer(@spacer, { padding-top: @__spacer-size; }); } @@ -60,91 +60,91 @@ .pb(@spacer) { .apply-spacer(@spacer, { padding-bottom: @__spacer-size; }); } .pl(@spacer) { .apply-spacer(@spacer, { padding-left: @__spacer-size; }); } .py(@spacer) { - .apply-spacer(@spacer, { - padding-top: @__spacer-size; - padding-bottom: @__spacer-size; - }); + .apply-spacer(@spacer, { + padding-top: @__spacer-size; + padding-bottom: @__spacer-size; + }); } .px(@spacer) { - .apply-spacer(@spacer, { - padding-right: @__spacer-size; - padding-left: @__spacer-size; - }); + .apply-spacer(@spacer, { + padding-right: @__spacer-size; + padding-left: @__spacer-size; + }); } .p(@spacer) { - .apply-spacer(@spacer, { - padding-top: @__spacer-size; - padding-right: @__spacer-size; - padding-bottom: @__spacer-size; - padding-left: @__spacer-size; - }); + .apply-spacer(@spacer, { + padding-top: @__spacer-size; + padding-right: @__spacer-size; + padding-bottom: @__spacer-size; + padding-left: @__spacer-size; + }); } .generate-padding-utilities(@i: 1) when (@i <= length(@spacer-map)) { - @spacer: extract(@spacer-map, @i); + @spacer: extract(@spacer-map, @i); - @n: extract(@spacer, 1); - @size: extract(@spacer, 2); + @n: extract(@spacer, 1); + @size: extract(@spacer, 2); - .pt-@{n} { padding-top: @size; } - .pr-@{n} { padding-right: @size; } - .pb-@{n} { padding-bottom: @size; } - .pl-@{n} { padding-left: @size; } - .py-@{n} { - padding-top: @size; - padding-bottom: @size; - } - .px-@{n} { - padding-right: @size; - padding-left: @size; - } - .p-@{n} { - padding-top: @size; - padding-bottom: @size; - padding-right: @size; - padding-left: @size; - } + .pt-@{n} { padding-top: @size; } + .pr-@{n} { padding-right: @size; } + .pb-@{n} { padding-bottom: @size; } + .pl-@{n} { padding-left: @size; } + .py-@{n} { + padding-top: @size; + padding-bottom: @size; + } + .px-@{n} { + padding-right: @size; + padding-left: @size; + } + .p-@{n} { + padding-top: @size; + padding-bottom: @size; + padding-right: @size; + padding-left: @size; + } - .generate-padding-utilities(@i + 1); + .generate-padding-utilities(@i + 1); } .generate-screen-padding-utilities(@screen; @screen-width; @i: 1) when (@i <= length(@spacer-map)) { - @prefix: ~"@{screen}\:"; - @spacer: extract(@spacer-map, @i); - @n: extract(@spacer, 1); - @size: extract(@spacer, 2); + @prefix: ~"@{screen}\:"; + @spacer: extract(@spacer-map, @i); + @n: extract(@spacer, 1); + @size: extract(@spacer, 2); - @media (min-width: @screen-width) { - .@{prefix}pt-@{n} { padding-top: @size; } - .@{prefix}pr-@{n} { padding-right: @size; } - .@{prefix}pb-@{n} { padding-bottom: @size; } - .@{prefix}pl-@{n} { padding-left: @size; } - .@{prefix}py-@{n} { - padding-top: @size; - padding-bottom: @size; - } - .@{prefix}px-@{n} { - padding-right: @size; - padding-left: @size; - } - .@{prefix}p-@{n} { - padding-top: @size; - padding-bottom: @size; - padding-right: @size; - padding-left: @size; - } + @media (min-width: @screen-width) { + .@{prefix}pt-@{n} { padding-top: @size; } + .@{prefix}pr-@{n} { padding-right: @size; } + .@{prefix}pb-@{n} { padding-bottom: @size; } + .@{prefix}pl-@{n} { padding-left: @size; } + .@{prefix}py-@{n} { + padding-top: @size; + padding-bottom: @size; } + .@{prefix}px-@{n} { + padding-right: @size; + padding-left: @size; + } + .@{prefix}p-@{n} { + padding-top: @size; + padding-bottom: @size; + padding-right: @size; + padding-left: @size; + } + } - .generate-screen-padding-utilities(@screen; @screen-width; (@i + 1)); + .generate-screen-padding-utilities(@screen; @screen-width; (@i + 1)); } .generate-responsive-padding-utilities(@i: 1) when (@i <= length(@screens)) { - @screen: extract(@screens, @i); - @name: extract(@screen, 1); - @screen-width: extract(@screen, 3); + @screen: extract(@screens, @i); + @name: extract(@screen, 1); + @screen-width: extract(@screen, 3); - .generate-screen-padding-utilities(@name, @screen-width); - .generate-responsive-padding-utilities(@i + 1); + .generate-screen-padding-utilities(@name, @screen-width); + .generate-responsive-padding-utilities(@i + 1); } .mt(@spacer) { .apply-spacer(@spacer, { margin-top: @__spacer-size; }); } @@ -153,97 +153,97 @@ .mb(@spacer) { .apply-spacer(@spacer, { margin-bottom: @__spacer-size; }); } .ml(@spacer) { .apply-spacer(@spacer, { margin-left: @__spacer-size; }); } .my(@spacer) { - .apply-spacer(@spacer, { - margin-top: @__spacer-size; - margin-bottom: @__spacer-size; - }); + .apply-spacer(@spacer, { + margin-top: @__spacer-size; + margin-bottom: @__spacer-size; + }); } .mx(@spacer) { - .apply-spacer(@spacer, { - margin-right: @__spacer-size; - margin-left: @__spacer-size; - }); + .apply-spacer(@spacer, { + margin-right: @__spacer-size; + margin-left: @__spacer-size; + }); } .m(@spacer) { - .apply-spacer(@spacer, { - margin-top: @__spacer-size; - margin-right: @__spacer-size; - margin-bottom: @__spacer-size; - margin-left: @__spacer-size; - }); + .apply-spacer(@spacer, { + margin-top: @__spacer-size; + margin-right: @__spacer-size; + margin-bottom: @__spacer-size; + margin-left: @__spacer-size; + }); } .generate-margin-utilities(@i: 1) when (@i <= length(@spacer-map)) { - @spacer: extract(@spacer-map, @i); + @spacer: extract(@spacer-map, @i); - @n: extract(@spacer, 1); - @size: extract(@spacer, 2); + @n: extract(@spacer, 1); + @size: extract(@spacer, 2); - .mt-@{n} { margin-top: @size; } - .mr-@{n} { margin-right: @size; } - .mb-@{n} { margin-bottom: @size; } - .ml-@{n} { margin-left: @size; } - .my-@{n} { - margin-top: @size; - margin-bottom: @size; - } - .mx-@{n} { - margin-right: @size; - margin-left: @size; - } - .m-@{n} { - margin-top: @size; - margin-bottom: @size; - margin-right: @size; - margin-left: @size; - } + .mt-@{n} { margin-top: @size; } + .mr-@{n} { margin-right: @size; } + .mb-@{n} { margin-bottom: @size; } + .ml-@{n} { margin-left: @size; } + .my-@{n} { + margin-top: @size; + margin-bottom: @size; + } + .mx-@{n} { + margin-right: @size; + margin-left: @size; + } + .m-@{n} { + margin-top: @size; + margin-bottom: @size; + margin-right: @size; + margin-left: @size; + } - .generate-margin-utilities(@i + 1); + .generate-margin-utilities(@i + 1); } .generate-screen-margin-utilities(@screen; @screen-width; @i: 1) when (@i <= length(@spacer-map)) { - @prefix: ~"@{screen}\:"; - @spacer: extract(@spacer-map, @i); - @n: extract(@spacer, 1); - @size: extract(@spacer, 2); + @prefix: ~"@{screen}\:"; + @spacer: extract(@spacer-map, @i); + @n: extract(@spacer, 1); + @size: extract(@spacer, 2); - @media (min-width: @screen-width) { - .@{prefix}mt-@{n} { margin-top: @size; } - .@{prefix}mr-@{n} { margin-right: @size; } - .@{prefix}mb-@{n} { margin-bottom: @size; } - .@{prefix}ml-@{n} { margin-left: @size; } - .@{prefix}my-@{n} { - margin-top: @size; - margin-bottom: @size; - } - .@{prefix}mx-@{n} { - margin-right: @size; - margin-left: @size; - } - .@{prefix}m-@{n} { - margin-top: @size; - margin-bottom: @size; - margin-right: @size; - margin-left: @size; - } + @media (min-width: @screen-width) { + .@{prefix}mt-@{n} { margin-top: @size; } + .@{prefix}mr-@{n} { margin-right: @size; } + .@{prefix}mb-@{n} { margin-bottom: @size; } + .@{prefix}ml-@{n} { margin-left: @size; } + .@{prefix}my-@{n} { + margin-top: @size; + margin-bottom: @size; } + .@{prefix}mx-@{n} { + margin-right: @size; + margin-left: @size; + } + .@{prefix}m-@{n} { + margin-top: @size; + margin-bottom: @size; + margin-right: @size; + margin-left: @size; + } + } - .generate-screen-margin-utilities(@screen; @screen-width; (@i + 1)); + .generate-screen-margin-utilities(@screen; @screen-width; (@i + 1)); } .generate-responsive-margin-utilities(@i: 1) when (@i <= length(@screens)) { - @screen: extract(@screens, @i); - @name: extract(@screen, 1); - @screen-width: extract(@screen, 3); + @screen: extract(@screens, @i); + @name: extract(@screen, 1); + @screen-width: extract(@screen, 3); - .generate-screen-margin-utilities(@name, @screen-width); + .generate-screen-margin-utilities(@name, @screen-width); - @media (min-width: @screen-width) { - @prefix: ~"@{name}\:"; - .@{prefix}mx-auto { margin-left: auto; margin-right: auto; } - } + @media (min-width: @screen-width) { + @prefix: ~"@{name}\:"; + .@{prefix}mx-auto { margin-left: auto; margin-right: auto; } + } - .generate-responsive-margin-utilities(@i + 1); + .generate-responsive-margin-utilities(@i + 1); } .pull-t(@spacer) { .apply-spacer(@spacer, { margin-top: ~"-@{__spacer-size}"; }); } @@ -252,94 +252,93 @@ .pull-b(@spacer) { .apply-spacer(@spacer, { margin-bottom: ~"-@{__spacer-size}"; }); } .pull-l(@spacer) { .apply-spacer(@spacer, { margin-left: ~"-@{__spacer-size}"; }); } .pull-y(@spacer) { - .apply-spacer(@spacer, { - margin-top: ~"-@{__spacer-size}"; - margin-bottom: ~"-@{__spacer-size}"; - }); + .apply-spacer(@spacer, { + margin-top: ~"-@{__spacer-size}"; + margin-bottom: ~"-@{__spacer-size}"; + }); } .pull-x(@spacer) { - .apply-spacer(@spacer, { - margin-right: ~"-@{__spacer-size}"; - margin-left: ~"-@{__spacer-size}"; - }); + .apply-spacer(@spacer, { + margin-right: ~"-@{__spacer-size}"; + margin-left: ~"-@{__spacer-size}"; + }); } .pull(@spacer) { - .apply-spacer(@spacer, { - margin-top: ~"-@{__spacer-size}"; - margin-right: ~"-@{__spacer-size}"; - margin-bottom: ~"-@{__spacer-size}"; - margin-left: ~"-@{__spacer-size}"; - }); + .apply-spacer(@spacer, { + margin-top: ~"-@{__spacer-size}"; + margin-right: ~"-@{__spacer-size}"; + margin-bottom: ~"-@{__spacer-size}"; + margin-left: ~"-@{__spacer-size}"; + }); } .generate-pull-utilities(@i: 1) when (@i <= length(@spacer-map)) { - @spacer: extract(@spacer-map, @i); + @spacer: extract(@spacer-map, @i); - @n: extract(@spacer, 1); - @size: extract(@spacer, 2); + @n: extract(@spacer, 1); + @size: extract(@spacer, 2); - .pull-t-@{n} { margin-top: ~"-@{size}"; } - .pull-r-@{n} { margin-right: ~"-@{size}"; } - .pull-b-@{n} { margin-bottom: ~"-@{size}"; } - .pull-l-@{n} { margin-left: ~"-@{size}"; } - .pull-y-@{n} { - margin-top: ~"-@{size}"; - margin-bottom: ~"-@{size}"; - } - .pull-x-@{n} { - margin-right: ~"-@{size}"; - margin-left: ~"-@{size}"; - } - .pull-@{n} { - margin-top: ~"-@{size}"; - margin-bottom: ~"-@{size}"; - margin-right: ~"-@{size}"; - margin-left: ~"-@{size}"; - } + .pull-t-@{n} { margin-top: ~"-@{size}"; } + .pull-r-@{n} { margin-right: ~"-@{size}"; } + .pull-b-@{n} { margin-bottom: ~"-@{size}"; } + .pull-l-@{n} { margin-left: ~"-@{size}"; } + .pull-y-@{n} { + margin-top: ~"-@{size}"; + margin-bottom: ~"-@{size}"; + } + .pull-x-@{n} { + margin-right: ~"-@{size}"; + margin-left: ~"-@{size}"; + } + .pull-@{n} { + margin-top: ~"-@{size}"; + margin-bottom: ~"-@{size}"; + margin-right: ~"-@{size}"; + margin-left: ~"-@{size}"; + } - .generate-pull-utilities(@i + 1); + .generate-pull-utilities(@i + 1); } .generate-screen-pull-utilities(@screen; @screen-width; @i: 1) when (@i <= length(@spacer-map)) { - @prefix: ~"@{screen}\:"; - @spacer: extract(@spacer-map, @i); - @n: extract(@spacer, 1); - @size: extract(@spacer, 2); + @prefix: ~"@{screen}\:"; + @spacer: extract(@spacer-map, @i); + @n: extract(@spacer, 1); + @size: extract(@spacer, 2); - @media (min-width: @screen-width) { - .@{prefix}pull-t-@{n} { margin-top: ~"-@{size}";; } - .@{prefix}pull-r-@{n} { margin-right: ~"-@{size}";; } - .@{prefix}pull-b-@{n} { margin-bottom: ~"-@{size}";; } - .@{prefix}pull-l-@{n} { margin-left: ~"-@{size}";; } - .@{prefix}pull-y-@{n} { - margin-top: ~"-@{size}";; - margin-bottom: ~"-@{size}";; - } - .@{prefix}pull-x-@{n} { - margin-right: ~"-@{size}";; - margin-left: ~"-@{size}";; - } - .@{prefix}pull-@{n} { - margin-top: ~"-@{size}";; - margin-bottom: ~"-@{size}";; - margin-right: ~"-@{size}";; - margin-left: ~"-@{size}";; - } + @media (min-width: @screen-width) { + .@{prefix}pull-t-@{n} { margin-top: ~"-@{size}";; } + .@{prefix}pull-r-@{n} { margin-right: ~"-@{size}";; } + .@{prefix}pull-b-@{n} { margin-bottom: ~"-@{size}";; } + .@{prefix}pull-l-@{n} { margin-left: ~"-@{size}";; } + .@{prefix}pull-y-@{n} { + margin-top: ~"-@{size}";; + margin-bottom: ~"-@{size}";; } + .@{prefix}pull-x-@{n} { + margin-right: ~"-@{size}";; + margin-left: ~"-@{size}";; + } + .@{prefix}pull-@{n} { + margin-top: ~"-@{size}";; + margin-bottom: ~"-@{size}";; + margin-right: ~"-@{size}";; + margin-left: ~"-@{size}";; + } + } - .generate-screen-pull-utilities(@screen; @screen-width; (@i + 1)); + .generate-screen-pull-utilities(@screen; @screen-width; (@i + 1)); } .generate-responsive-pull-utilities(@i: 1) when (@i <= length(@screens)) { - @screen: extract(@screens, @i); - @name: extract(@screen, 1); - @screen-width: extract(@screen, 3); + @screen: extract(@screens, @i); + @name: extract(@screen, 1); + @screen-width: extract(@screen, 3); - .generate-screen-pull-utilities(@name, @screen-width); - .generate-responsive-pull-utilities(@i + 1); + .generate-screen-pull-utilities(@name, @screen-width); + .generate-responsive-pull-utilities(@i + 1); } - .generate-padding-utilities(); .generate-margin-utilities(); .generate-pull-utilities(); diff --git a/src/utilities/text.less b/src/utilities/text.less index d0f4f3603..5ef0a76b9 100644 --- a/src/utilities/text.less +++ b/src/utilities/text.less @@ -58,17 +58,17 @@ .text-right { text-align: right; } .responsive({ - &text-center { .text-center; } - &text-left { .text-left; } - &text-right { .text-right; } + &text-center { .text-center; } + &text-left { .text-left; } + &text-right { .text-right; } }); .text-uppercase { text-transform: uppercase; } .text-ellipsis { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; } .text-break { white-space: pre-line; }