From 18896866da2febb2facf889860a56e9dbdc624d9 Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Tue, 1 Aug 2017 13:05:25 -0400 Subject: [PATCH] Remove components and reorganize files a bit --- src/base.less | 2 - src/base/colors.less | 109 -- src/colors.less | 35 + src/components.less | 13 - src/components/alert.less | 14 - src/components/buttons.less | 265 ----- src/components/dropdown.less | 40 - src/components/forms.less | 215 ---- src/components/grid.less | 1024 ----------------- src/components/horizontal-rules.less | 18 - src/components/icons.less | 23 - src/components/links.less | 71 -- src/components/lists.less | 15 - src/components/markdown.less | 100 -- src/components/media-object.less | 13 - src/components/progress.less | 74 -- src/glitter.less | 2 - src/glitter/animations.less | 4 - src/glitter/transitions.less | 122 -- src/{base/base.less => reset.less} | 8 +- src/utilities.less | 4 + src/utilities/backgrounds.less | 14 + src/utilities/borders.less | 14 + .../grid.less} | 0 src/{components => utilities}/images.less | 0 src/utilities/text.less | 14 + 26 files changed, 85 insertions(+), 2128 deletions(-) delete mode 100644 src/base.less delete mode 100644 src/base/colors.less create mode 100644 src/colors.less delete mode 100644 src/components.less delete mode 100644 src/components/alert.less delete mode 100644 src/components/buttons.less delete mode 100644 src/components/dropdown.less delete mode 100644 src/components/forms.less delete mode 100644 src/components/grid.less delete mode 100644 src/components/horizontal-rules.less delete mode 100644 src/components/icons.less delete mode 100644 src/components/links.less delete mode 100644 src/components/lists.less delete mode 100644 src/components/markdown.less delete mode 100644 src/components/media-object.less delete mode 100644 src/components/progress.less delete mode 100644 src/glitter.less delete mode 100644 src/glitter/animations.less delete mode 100644 src/glitter/transitions.less rename src/{base/base.less => reset.less} (74%) rename src/{components/generated-grid.less => utilities/grid.less} (100%) rename src/{components => utilities}/images.less (100%) diff --git a/src/base.less b/src/base.less deleted file mode 100644 index 5b94dbf3b..000000000 --- a/src/base.less +++ /dev/null @@ -1,2 +0,0 @@ -@import "base/base"; -@import "base/colors"; diff --git a/src/base/colors.less b/src/base/colors.less deleted file mode 100644 index a2fc22687..000000000 --- a/src/base/colors.less +++ /dev/null @@ -1,109 +0,0 @@ -@hue-slate: 208; -@hue-cream: 50; - -@hue-brand-primary: 171; -@color-brand-primary: #00ceae; - -@color-brand-gradient-start: #00b8c6; -@color-brand-gradient-stop: #00c6a2; - -@hue-blue: 193; -@color-blue: hsl(@hue-blue, 77%, 58%); - -@hue-green: 167; -@color-green: hsl(@hue-green, 53%, 55%); - -@hue-red: 2; -@color-danger: hsl(@hue-red, 75%, 55%); - -@hue-gray: 208; -// @hue-gray: 50; -@color-gray-10: #fff; -@color-gray-9: hsl(@hue-gray, 20%, 98%); -@color-gray-8: hsl(@hue-gray, 25%, 96%); -@color-gray-7: hsl(@hue-gray, 25%, 90%); -@color-gray-6: hsl(@hue-gray, 25%, 82%); -@color-gray-5: hsl(@hue-gray, 25%, 62%); -@color-gray-4: hsl(@hue-gray, 25%, 52%); -@color-gray-3: hsl(@hue-gray, 25%, 35%); -@color-gray-2: hsl(@hue-gray, 25%, 25%); -@color-gray-1: hsl(@hue-gray, 25%, 16%); - -@color-white: @color-gray-10; -@color-black: @color-gray-1; - -@color-blue-highlight: hsl(215, 99%, 63%); - -// Backgrounds -@bg-light-hue: @hue-slate; -@bg-light: hsl(@bg-light-hue, 0%, 100%); -@bg-light-soft: hsl(@bg-light-hue, 20%, 98%); -@bg-light-softer: hsl(@bg-light-hue, 20%, 96%); - -@bg-dark-hue: @hue-slate; -@bg-dark: hsl(@bg-dark-hue, 14%, 33%); -@bg-dark-soft: hsl(@bg-dark-hue, 14%, 42%); -@bg-dark-softer: hsl(@bg-dark-hue, 14%, 52%); - -@bg-primary: @color-brand-primary; - -@bg-highlight: hsl(215, 99%, 63%); - - -// Borders -@border-dark-hue: @hue-slate; -@border-dark: hsl(@border-dark-hue, 25%, 82%); -@border-dark-soft: hsl(@border-dark-hue, 25%, 90%); -@border-dark-softer: hsl(@border-dark-hue, 25%, 96%); - -@border-light: @color-white; -@border-light-soft: fade(@color-white, 60%); -@border-light-softer: fade(@color-white, 35%); - -@border-danger: @color-danger; -@border-danger-soft: fade(@color-danger, 50%); - -@border-brand: @color-brand-primary; - -@border-default: @border-dark-soft; - - -// Text -@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-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; - - -// Buttons -@btn-primary-text-color: @color-white; -@btn-primary-bg-color: @color-brand-primary; - -@btn-secondary-text-color: @text-dark-soft; -@btn-secondary-bg-color: @color-white; -@btn-secondary-border-color: @border-dark; - -@btn-blue-text-color: @color-white; -@btn-blue-bg-color: @color-blue; - -@btn-themed-text-color: @color-white; - -@btn-inv-outline-text-color: @color-white; - -@btn-disabled-bg: @color-gray-8; -@btn-disabled-border: @color-gray-4; -@btn-disabled-text: @btn-disabled-border; - - -// Forms -@form-input-placeholder-color: @text-dark-softest; -@form-input-border-error-color: lighten(@color-danger, 25%); diff --git a/src/colors.less b/src/colors.less new file mode 100644 index 000000000..363b4e107 --- /dev/null +++ b/src/colors.less @@ -0,0 +1,35 @@ +@hue-slate: 208; +@hue-cream: 50; + +@hue-brand-primary: 171; +@color-brand-primary: #00ceae; + +@color-brand-gradient-start: #00b8c6; +@color-brand-gradient-stop: #00c6a2; + +@hue-blue: 193; +@color-blue: hsl(@hue-blue, 77%, 58%); + +@hue-green: 167; +@color-green: hsl(@hue-green, 53%, 55%); + +@hue-red: 2; +@color-danger: hsl(@hue-red, 75%, 55%); + +@hue-gray: 208; +// @hue-gray: 50; +@color-gray-10: #fff; +@color-gray-9: hsl(@hue-gray, 20%, 98%); +@color-gray-8: hsl(@hue-gray, 25%, 96%); +@color-gray-7: hsl(@hue-gray, 25%, 90%); +@color-gray-6: hsl(@hue-gray, 25%, 82%); +@color-gray-5: hsl(@hue-gray, 25%, 62%); +@color-gray-4: hsl(@hue-gray, 25%, 52%); +@color-gray-3: hsl(@hue-gray, 25%, 35%); +@color-gray-2: hsl(@hue-gray, 25%, 25%); +@color-gray-1: hsl(@hue-gray, 25%, 16%); + +@color-white: @color-gray-10; +@color-black: @color-gray-1; + +@color-blue-highlight: hsl(215, 99%, 63%); diff --git a/src/components.less b/src/components.less deleted file mode 100644 index fc8e5b574..000000000 --- a/src/components.less +++ /dev/null @@ -1,13 +0,0 @@ -@import "components/alert"; -@import "components/buttons"; -@import "components/dropdown"; -@import "components/forms"; -@import "components/generated-grid"; -@import "components/horizontal-rules"; -@import "components/icons"; -@import "components/images"; -@import "components/links"; -@import "components/lists"; -@import "components/markdown"; -@import "components/media-object"; -@import "components/progress"; diff --git a/src/components/alert.less b/src/components/alert.less deleted file mode 100644 index d8426eee7..000000000 --- a/src/components/alert.less +++ /dev/null @@ -1,14 +0,0 @@ -@alert-border-radius: @border-radius-1; - -.alert { - 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; -} diff --git a/src/components/buttons.less b/src/components/buttons.less deleted file mode 100644 index edafb8ed7..000000000 --- a/src/components/buttons.less +++ /dev/null @@ -1,265 +0,0 @@ -@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; - text-decoration: none; - font-family: @font-family-base; - - &:focus, &:hover { - text-decoration: none; - } - - &:active, &:focus { - .tab-focus; - } - - &:disabled, &.is-disabled { - cursor: not-allowed; - opacity: 0.2; - } -} - -.btn-loading { - position: relative; - 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: ""; - } -} - -.button-outline-variant(@color) { - @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: fade(@color, 10%); - border-color: @color; - } - - &:focus { - color: @color; - } - - &:disabled, &.is-disabled { - &:active, &:hover { - border-color: @inactive-border; - } - } -} - -.btn-variant(@text; @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; - 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; - } - } -} - -.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; - 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; - } - } -} - -.btn-primary { - .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-blue { - .btn-variant(@color-white; @color-blue); -} - -.btn-inv-outline { - .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-facebook { - .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; - - &:focus, &:hover { - color: darken(@text-dark, 15%); - text-decoration: underline; - } -} - -.btn-block { - display: block; - width: 100%; - text-align: center; -} - -.btn-sm { - font-size: @font-size-sm; -} - -.btn-lg { - font-size: @font-size-lg; -} - -@media (min-width: (@screen-sm)) { - .sm:btn-lg { - .btn-lg; - } -} - -.btn-xs { - font-size: @font-size-xs; -} - -.btn-wide { - padding-left: 2em; - padding-right: 2em; -} - -.btn-pad { - 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; - } - - &: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-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); - } -} diff --git a/src/components/dropdown.less b/src/components/dropdown.less deleted file mode 100644 index f2b9ab97f..000000000 --- a/src/components/dropdown.less +++ /dev/null @@ -1,40 +0,0 @@ -.dropdown-menu { - .absolute; - .pin-r; - .mt(px); - .bg-light; - .rounded; - .z50; - .mask; - .box-shadow; - - 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; - } -} diff --git a/src/components/forms.less b/src/components/forms.less deleted file mode 100644 index 0bd3d5a9c..000000000 --- a/src/components/forms.less +++ /dev/null @@ -1,215 +0,0 @@ -@form-control-radius: @border-radius-1; -@form-control-border: @border-default-color; - -.form-group { -} - -.form-label { - .block; - .text-sm; - .text-regular; - .mb(2); -} - -.form-control-file { - display: block; - max-width: 100%; - - &::-webkit-file-upload-button { - .btn; - .btn-xs; - .btn-secondary; - cursor: pointer; - } -} - -.form-control { - .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; - 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); - } - } -} - -.form-control-borderless { - 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 -} - -.help-block { - .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-control-feedback { - 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; - 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; - } -} - -.stacked-form { -} - -.stacked-form-group { - 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-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; - } -} - - -.inset-form-group { - 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; -} - -.inset-form-control { - position: relative; - padding-left: 2.75em; - &:focus { - .z10; - } -} - -.form-control-pad { - padding: 1em 1em; - - &.inset-form-control { - padding-left: 3em; - } -} - -.inset-form-icon-pad { - width: 1.4em; - left: ~"calc(1px + 1em)"; -} diff --git a/src/components/grid.less b/src/components/grid.less deleted file mode 100644 index b468ac588..000000000 --- a/src/components/grid.less +++ /dev/null @@ -1,1024 +0,0 @@ -// Use Bootstrap 4 breakpoints as a starting point -@screen-xs: 420px; // Not used for grid, just changing font size for tiny fucking iPhones -@screen-sm: 576px; -@screen-md: 768px; -@screen-lg: 992px; -@screen-xl: 1200px; - -@container-width-sm: 540px; -@container-width-md: 720px; -@container-width-lg: 960px; -@container-width-xl: 1140px; - -// From flexboxgrid.com -@gutter-width: 2rem; -@half-gutter-width: @gutter-width * 0.5; -@gutter-compensation: @half-gutter-width * -1; -@outer-margin: @half-gutter-width; -@screen-sm-min :@screen-sm; -@screen-md-min: @screen-md; -@screen-lg-min: @screen-lg; -@screen-xl-min: @screen-xl; -@container-sm: @container-width-sm; -@container-md: @container-width-md; -@container-lg: @container-width-lg; -@container-xl: @container-width-xl; - -.container-fluid, .container { - width: 100%; - margin-right: auto; - margin-left: auto; - padding-right: @outer-margin; - padding-left: @outer-margin; -} - -.row { - box-sizing: border-box; - display: flex; - flex: 0 1 auto; - flex-direction: row; - flex-wrap: wrap; - margin-right: @gutter-compensation; - margin-left: @gutter-compensation; -} - -.row.reverse { - flex-direction: row-reverse; -} - -.col.reverse { - flex-direction: column-reverse; -} - -.col, -.col-1, -.col-2, -.col-3, -.col-4, -.col-5, -.col-6, -.col-7, -.col-8, -.col-9, -.col-10, -.col-11, -.col-12, -.offset-0, -.offset-1, -.offset-2, -.offset-3, -.offset-4, -.offset-5, -.offset-6, -.offset-7, -.offset-8, -.offset-9, -.offset-10, -.offset-11, -.offset-12 { - box-sizing: border-box; - flex: 0 0 auto; - padding-right: @half-gutter-width; - padding-left: @half-gutter-width; -} - -.col { - flex-grow: 1; - flex-basis: 0; - max-width: 100%; -} - -.col-1 { - flex-basis: 8.33333333%; - max-width: 8.33333333%; -} - -.col-2 { - flex-basis: 16.66666667%; - max-width: 16.66666667%; -} - -.col-3 { - flex-basis: 25%; - max-width: 25%; -} - -.col-4 { - flex-basis: 33.33333333%; - max-width: 33.33333333%; -} - -.col-5 { - flex-basis: 41.66666667%; - max-width: 41.66666667%; -} - -.col-6 { - flex-basis: 50%; - max-width: 50%; -} - -.col-7 { - flex-basis: 58.33333333%; - max-width: 58.33333333%; -} - -.col-8 { - flex-basis: 66.66666667%; - max-width: 66.66666667%; -} - -.col-9 { - flex-basis: 75%; - max-width: 75%; -} - -.col-10 { - flex-basis: 83.33333333%; - max-width: 83.33333333%; -} - -.col-11 { - flex-basis: 91.66666667%; - max-width: 91.66666667%; -} - -.col-12 { - flex-basis: 100%; - max-width: 100%; -} - -.offset-0 { - margin-left: 0; -} - -.offset-1 { - margin-left: 8.33333333%; -} - -.offset-2 { - margin-left: 16.66666667%; -} - -.offset-3 { - margin-left: 25%; -} - -.offset-4 { - margin-left: 33.33333333%; -} - -.offset-5 { - margin-left: 41.66666667%; -} - -.offset-6 { - margin-left: 50%; -} - -.offset-7 { - margin-left: 58.33333333%; -} - -.offset-8 { - margin-left: 66.66666667%; -} - -.offset-9 { - margin-left: 75%; -} - -.offset-10 { - margin-left: 83.33333333%; -} - -.offset-11 { - margin-left: 91.66666667%; -} - -// These need to be renamed before being brought back... - -// .start-xs { -// justify-content: flex-start; -// text-align: start; -// } - -// .center-xs { -// justify-content: center; -// text-align: center; -// } - -// .end-xs { -// justify-content: flex-end; -// text-align: end; -// } - -// .top-xs { -// align-items: flex-start; -// } - -// .middle-xs { -// align-items: center; -// } - -// .bottom-xs { -// align-items: flex-end; -// } - -// .around-xs { -// justify-content: space-around; -// } - -// .between-xs { -// justify-content: space-between; -// } - -.xs-col-first { - order: -1; -} - -.xs-col-last { - order: 1; -} - -@media only screen and (min-width: @screen-sm-min) { - .container { - max-width: @container-sm; - } - - .sm\:col, - .sm\:col-1, - .sm\:col-2, - .sm\:col-3, - .sm\:col-4, - .sm\:col-5, - .sm\:col-6, - .sm\:col-7, - .sm\:col-8, - .sm\:col-9, - .sm\:col-10, - .sm\:col-11, - .sm\:col-12, - .sm\:offset-0, - .sm\:offset-1, - .sm\:offset-2, - .sm\:offset-3, - .sm\:offset-4, - .sm\:offset-5, - .sm\:offset-6, - .sm\:offset-7, - .sm\:offset-8, - .sm\:offset-9, - .sm\:offset-10, - .sm\:offset-11, - .sm\:offset-12 { - box-sizing: border-box; - flex: 0 0 auto; - padding-right: @half-gutter-width; - padding-left: @half-gutter-width; - } - - .sm\:col { - flex-grow: 1; - flex-basis: 0; - max-width: 100%; - } - - .sm\:col-1 { - flex-basis: 8.33333333%; - max-width: 8.33333333%; - } - - .sm\:col-2 { - flex-basis: 16.66666667%; - max-width: 16.66666667%; - } - - .sm\:col-3 { - flex-basis: 25%; - max-width: 25%; - } - - .sm\:col-4 { - flex-basis: 33.33333333%; - max-width: 33.33333333%; - } - - .sm\:col-5 { - flex-basis: 41.66666667%; - max-width: 41.66666667%; - } - - .sm\:col-6 { - flex-basis: 50%; - max-width: 50%; - } - - .sm\:col-7 { - flex-basis: 58.33333333%; - max-width: 58.33333333%; - } - - .sm\:col-8 { - flex-basis: 66.66666667%; - max-width: 66.66666667%; - } - - .sm\:col-9 { - flex-basis: 75%; - max-width: 75%; - } - - .sm\:col-10 { - flex-basis: 83.33333333%; - max-width: 83.33333333%; - } - - .sm\:col-11 { - flex-basis: 91.66666667%; - max-width: 91.66666667%; - } - - .sm\:col-12 { - flex-basis: 100%; - max-width: 100%; - } - - .sm\:offset-0 { - margin-left: 0; - } - - .sm\:offset-1 { - margin-left: 8.33333333%; - } - - .sm\:offset-2 { - margin-left: 16.66666667%; - } - - .sm\:offset-3 { - margin-left: 25%; - } - - .sm\:offset-4 { - margin-left: 33.33333333%; - } - - .sm\:offset-5 { - margin-left: 41.66666667%; - } - - .sm\:offset-6 { - margin-left: 50%; - } - - .sm\:offset-7 { - margin-left: 58.33333333%; - } - - .sm\:offset-8 { - margin-left: 66.66666667%; - } - - .sm\:offset-9 { - margin-left: 75%; - } - - .sm\:offset-10 { - margin-left: 83.33333333%; - } - - .sm\:offset-11 { - margin-left: 91.66666667%; - } - - // .start-sm { - // justify-content: flex-start; - // text-align: start; - // } - - // .center-sm { - // justify-content: center; - // text-align: center; - // } - - // .end-sm { - // justify-content: flex-end; - // text-align: end; - // } - - // .top-sm { - // align-items: flex-start; - // } - - // .middle-sm { - // align-items: center; - // } - - // .bottom-sm { - // align-items: flex-end; - // } - - // .around-sm { - // justify-content: space-around; - // } - - // .between-sm { - // justify-content: space-between; - // } - - .sm\:col-first { - order: -1; - } - - .sm\:col-last { - order: 1; - } -} - -@media only screen and (min-width: @screen-md-min) { - .container { - max-width: @container-md; - } - - .md\:col, - .md\:col-1, - .md\:col-2, - .md\:col-3, - .md\:col-4, - .md\:col-5, - .md\:col-6, - .md\:col-7, - .md\:col-8, - .md\:col-9, - .md\:col-10, - .md\:col-11, - .md\:col-12, - .md\:offset-0, - .md\:offset-1, - .md\:offset-2, - .md\:offset-3, - .md\:offset-4, - .md\:offset-5, - .md\:offset-6, - .md\:offset-7, - .md\:offset-8, - .md\:offset-9, - .md\:offset-10, - .md\:offset-11, - .md\:offset-12 { - box-sizing: border-box; - flex: 0 0 auto; - padding-right: @half-gutter-width; - padding-left: @half-gutter-width; - } - - .md\:col { - flex-grow: 1; - flex-basis: 0; - max-width: 100%; - } - - .md\:col-1 { - flex-basis: 8.33333333%; - max-width: 8.33333333%; - } - - .md\:col-2 { - flex-basis: 16.66666667%; - max-width: 16.66666667%; - } - - .md\:col-3 { - flex-basis: 25%; - max-width: 25%; - } - - .md\:col-4 { - flex-basis: 33.33333333%; - max-width: 33.33333333%; - } - - .md\:col-5 { - flex-basis: 41.66666667%; - max-width: 41.66666667%; - } - - .md\:col-6 { - flex-basis: 50%; - max-width: 50%; - } - - .md\:col-7 { - flex-basis: 58.33333333%; - max-width: 58.33333333%; - } - - .md\:col-8 { - flex-basis: 66.66666667%; - max-width: 66.66666667%; - } - - .md\:col-9 { - flex-basis: 75%; - max-width: 75%; - } - - .md\:col-10 { - flex-basis: 83.33333333%; - max-width: 83.33333333%; - } - - .md\:col-11 { - flex-basis: 91.66666667%; - max-width: 91.66666667%; - } - - .md\:col-12 { - flex-basis: 100%; - max-width: 100%; - } - - .md\:offset-0 { - margin-left: 0; - } - - .md\:offset-1 { - margin-left: 8.33333333%; - } - - .md\:offset-2 { - margin-left: 16.66666667%; - } - - .md\:offset-3 { - margin-left: 25%; - } - - .md\:offset-4 { - margin-left: 33.33333333%; - } - - .md\:offset-5 { - margin-left: 41.66666667%; - } - - .md\:offset-6 { - margin-left: 50%; - } - - .md\:offset-7 { - margin-left: 58.33333333%; - } - - .md\:offset-8 { - margin-left: 66.66666667%; - } - - .md\:offset-9 { - margin-left: 75%; - } - - .md\:offset-10 { - margin-left: 83.33333333%; - } - - .md\:offset-11 { - margin-left: 91.66666667%; - } - - // .start-md { - // justify-content: flex-start; - // text-align: start; - // } - - // .center-md { - // justify-content: center; - // text-align: center; - // } - - // .end-md { - // justify-content: flex-end; - // text-align: end; - // } - - // .top-md { - // align-items: flex-start; - // } - - // .middle-md { - // align-items: center; - // } - - // .bottom-md { - // align-items: flex-end; - // } - - // .around-md { - // justify-content: space-around; - // } - - // .between-md { - // justify-content: space-between; - // } - - .md\:col-first { - order: -1; - } - - .md\:col-last { - order: 1; - } -} - -@media only screen and (min-width: @screen-lg-min) { - .container { - max-width: @container-lg; - } - - .lg\:col, - .lg\:col-1, - .lg\:col-2, - .lg\:col-3, - .lg\:col-4, - .lg\:col-5, - .lg\:col-6, - .lg\:col-7, - .lg\:col-8, - .lg\:col-9, - .lg\:col-10, - .lg\:col-11, - .lg\:col-12, - .lg\:offset-0, - .lg\:offset-1, - .lg\:offset-2, - .lg\:offset-3, - .lg\:offset-4, - .lg\:offset-5, - .lg\:offset-6, - .lg\:offset-7, - .lg\:offset-8, - .lg\:offset-9, - .lg\:offset-10, - .lg\:offset-11, - .lg\:offset-12 { - box-sizing: border-box; - flex: 0 0 auto; - padding-right: @half-gutter-width; - padding-left: @half-gutter-width; - } - - .lg\:col { - flex-grow: 1; - flex-basis: 0; - max-width: 100%; - } - - .lg\:col-1 { - flex-basis: 8.33333333%; - max-width: 8.33333333%; - } - - .lg\:col-2 { - flex-basis: 16.66666667%; - max-width: 16.66666667%; - } - - .lg\:col-3 { - flex-basis: 25%; - max-width: 25%; - } - - .lg\:col-4 { - flex-basis: 33.33333333%; - max-width: 33.33333333%; - } - - .lg\:col-5 { - flex-basis: 41.66666667%; - max-width: 41.66666667%; - } - - .lg\:col-6 { - flex-basis: 50%; - max-width: 50%; - } - - .lg\:col-7 { - flex-basis: 58.33333333%; - max-width: 58.33333333%; - } - - .lg\:col-8 { - flex-basis: 66.66666667%; - max-width: 66.66666667%; - } - - .lg\:col-9 { - flex-basis: 75%; - max-width: 75%; - } - - .lg\:col-10 { - flex-basis: 83.33333333%; - max-width: 83.33333333%; - } - - .lg\:col-11 { - flex-basis: 91.66666667%; - max-width: 91.66666667%; - } - - .lg\:col-12 { - flex-basis: 100%; - max-width: 100%; - } - - .lg\:offset-0 { - margin-left: 0; - } - - .lg\:offset-1 { - margin-left: 8.33333333%; - } - - .lg\:offset-2 { - margin-left: 16.66666667%; - } - - .lg\:offset-3 { - margin-left: 25%; - } - - .lg\:offset-4 { - margin-left: 33.33333333%; - } - - .lg\:offset-5 { - margin-left: 41.66666667%; - } - - .lg\:offset-6 { - margin-left: 50%; - } - - .lg\:offset-7 { - margin-left: 58.33333333%; - } - - .lg\:offset-8 { - margin-left: 66.66666667%; - } - - .lg\:offset-9 { - margin-left: 75%; - } - - .lg\:offset-10 { - margin-left: 83.33333333%; - } - - .lg\:offset-11 { - margin-left: 91.66666667%; - } - - // .start-lg { - // justify-content: flex-start; - // text-align: start; - // } - - // .center-lg { - // justify-content: center; - // text-align: center; - // } - - // .end-lg { - // justify-content: flex-end; - // text-align: end; - // } - - // .top-lg { - // align-items: flex-start; - // } - - // .middle-lg { - // align-items: center; - // } - - // .bottom-lg { - // align-items: flex-end; - // } - - // .around-lg { - // justify-content: space-around; - // } - - // .between-lg { - // justify-content: space-between; - // } - - .lg\:col-first { - order: -1; - } - - .lg\:col-last { - order: 1; - } -} - - -@media only screen and (min-width: @screen-xl-min) { - .container { - max-width: @container-xl; - } - - .xl\:col, - .xl\:col-1, - .xl\:col-2, - .xl\:col-3, - .xl\:col-4, - .xl\:col-5, - .xl\:col-6, - .xl\:col-7, - .xl\:col-8, - .xl\:col-9, - .xl\:col-10, - .xl\:col-11, - .xl\:col-12, - .xl\:offset-0, - .xl\:offset-1, - .xl\:offset-2, - .xl\:offset-3, - .xl\:offset-4, - .xl\:offset-5, - .xl\:offset-6, - .xl\:offset-7, - .xl\:offset-8, - .xl\:offset-9, - .xl\:offset-10, - .xl\:offset-11, - .xl\:offset-12 { - box-sizing: border-box; - flex: 0 0 auto; - padding-right: @half-gutter-width; - padding-left: @half-gutter-width; - } - - .xl\:col { - flex-grow: 1; - flex-basis: 0; - max-width: 100%; - } - - .xl\:col-1 { - flex-basis: 8.33333333%; - max-width: 8.33333333%; - } - - .xl\:col-2 { - flex-basis: 16.66666667%; - max-width: 16.66666667%; - } - - .xl\:col-3 { - flex-basis: 25%; - max-width: 25%; - } - - .xl\:col-4 { - flex-basis: 33.33333333%; - max-width: 33.33333333%; - } - - .xl\:col-5 { - flex-basis: 41.66666667%; - max-width: 41.66666667%; - } - - .xl\:col-6 { - flex-basis: 50%; - max-width: 50%; - } - - .xl\:col-7 { - flex-basis: 58.33333333%; - max-width: 58.33333333%; - } - - .xl\:col-8 { - flex-basis: 66.66666667%; - max-width: 66.66666667%; - } - - .xl\:col-9 { - flex-basis: 75%; - max-width: 75%; - } - - .xl\:col-10 { - flex-basis: 83.33333333%; - max-width: 83.33333333%; - } - - .xl\:col-11 { - flex-basis: 91.66666667%; - max-width: 91.66666667%; - } - - .xl\:col-12 { - flex-basis: 100%; - max-width: 100%; - } - - .xl\:offset-0 { - margin-left: 0; - } - - .xl\:offset-1 { - margin-left: 8.33333333%; - } - - .xl\:offset-2 { - margin-left: 16.66666667%; - } - - .xl\:offset-3 { - margin-left: 25%; - } - - .xl\:offset-4 { - margin-left: 33.33333333%; - } - - .xl\:offset-5 { - margin-left: 41.66666667%; - } - - .xl\:offset-6 { - margin-left: 50%; - } - - .xl\:offset-7 { - margin-left: 58.33333333%; - } - - .xl\:offset-8 { - margin-left: 66.66666667%; - } - - .xl\:offset-9 { - margin-left: 75%; - } - - .xl\:offset-10 { - margin-left: 83.33333333%; - } - - .xl\:offset-11 { - margin-left: 91.66666667%; - } - - // .start-xl { - // justify-content: flex-start; - // text-align: start; - // } - - // .center-xl { - // justify-content: center; - // text-align: center; - // } - - // .end-xl { - // justify-content: flex-end; - // text-align: end; - // } - - // .top-xl { - // align-items: flex-start; - // } - - // .middle-xl { - // align-items: center; - // } - - // .bottom-xl { - // align-items: flex-end; - // } - - // .around-xl { - // justify-content: space-around; - // } - - // .between-xl { - // justify-content: space-between; - // } - - .xl\:col-first { - order: -1; - } - - .xl\:col-last { - order: 1; - } -} - diff --git a/src/components/horizontal-rules.less b/src/components/horizontal-rules.less deleted file mode 100644 index f7d940410..000000000 --- a/src/components/horizontal-rules.less +++ /dev/null @@ -1,18 +0,0 @@ -.hr { - display: block; - box-sizing: border-box; -} - -.hr-brand { - border: none; - background-color: @color-brand-primary; -} - -.hr-thick { - height: .375rem; -} - -.hr-short { - width: 6rem; - margin-left: 0; -} diff --git a/src/components/icons.less b/src/components/icons.less deleted file mode 100644 index 7097c7896..000000000 --- a/src/components/icons.less +++ /dev/null @@ -1,23 +0,0 @@ -.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 -} - -.icon-xs { - height: .5em; -} - -.icon-sm { - height: 1em; -} - -.icon-lg { - height: 2em; -} - -.icon-xl { - height: 4em; -} diff --git a/src/components/links.less b/src/components/links.less deleted file mode 100644 index 7637bda2c..000000000 --- a/src/components/links.less +++ /dev/null @@ -1,71 +0,0 @@ -.link { - font-weight: @font-weight-regular; - color: @text-dark; - text-decoration: none; - - &:hover, &:focus { - color: darken(@text-dark, 15%); - text-decoration: underline; - } - &:focus { - .tab-focus; - } -} - -.link-brand { - color: @text-brand; - - &:hover, &:focus { - color: darken(@text-brand, 15%); - } -} - -.link-underline { - text-decoration: underline; -} - -.link-plain { - &:hover, &:focus { - text-decoration: none; - } -} - -.link-soft { - .text-dark-soft; - - &:hover, &:focus { - .text-dark; - } -} - -.link-softer { - .text-dark-soft; - - &:hover, &:focus { - .text-dark; - } -} - -.link-softest { - .text-dark-softest; - - &:hover, &:focus { - .text-dark; - } -} - -.link-light { - color: @text-light; - - &:hover, &:focus { - color: @text-light; - } -} - -.link-light-soft { - color: @text-light-soft; - - &:hover, &:focus { - color: @text-light; - } -} diff --git a/src/components/lists.less b/src/components/lists.less deleted file mode 100644 index 5f3a8d4ad..000000000 --- a/src/components/lists.less +++ /dev/null @@ -1,15 +0,0 @@ -.bullet-list { - 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; - } -} diff --git a/src/components/markdown.less b/src/components/markdown.less deleted file mode 100644 index 8f88ff0ab..000000000 --- a/src/components/markdown.less +++ /dev/null @@ -1,100 +0,0 @@ -.markdown { - h1, h2, h3, h4, h5, h6 { - font-weight: 600; - color: @text-dark-soft; - margin-bottom: 1rem; - } - - h1 { - font-size: @font-size-xl; - } - - h2 { - font-size: @font-size-lg; - font-weight: @font-weight-regular; - color: @text-dark-soft; - } - - h3 { - font-size: @font-size-base; - font-weight: @font-weight-medium; - color: @text-dark-soft; - } - - p { - font-size: @font-size-base; - line-height: 1.5; - margin-bottom: 1.5em; - color: @text-dark; - } - - blockquote { - background-color: @bg-light-softer; - padding: 1.5rem; - border-radius: 4px; - margin-bottom: 2em; - } - - blockquote > p { - font-size: @font-size-base; - margin-bottom: 0; - color: @text-dark; - } - - blockquote p code { - background-color: #e5e5e5; - } - - ul, ol { - margin: 0 0 2em; - } - - ul { - list-style: disc inside; - } - - ol { - list-style: decimal inside; - } - - li { - font-size: @font-size-base; - line-height: 2; - color: @text-dark; - } - - a { - .link-brand; - } - - pre { - margin-top: 2em; - margin-bottom: 2em; - overflow: auto; - padding: 1.5rem; - border: 1px solid @bg-light-softer; - border-radius: 4px; - max-width: 100%; - background-color: @bg-light-softer; - } - - pre > code { - font-family: monospace; - font-size: 14px; - background-color: transparent; - line-height: 1.8; - word-break: normal; - word-spacing: normal; - white-space: pre; - hyphens: none; - direction: ltr; - tab-size: 4; - } - - code { - background-color: @bg-light-softer; - padding: 0.6rem 0.5rem; - font-size: 13px; - border-radius: 3px; - } -} diff --git a/src/components/media-object.less b/src/components/media-object.less deleted file mode 100644 index 38537fa09..000000000 --- a/src/components/media-object.less +++ /dev/null @@ -1,13 +0,0 @@ -.media-object { - display: flex; -} - -.media-left { - > .zondicon { - vertical-align: sub; // Trial and error bullshit - } -} - -.media-body { - flex: 1; -} diff --git a/src/components/progress.less b/src/components/progress.less deleted file mode 100644 index 5a708da86..000000000 --- a/src/components/progress.less +++ /dev/null @@ -1,74 +0,0 @@ -@progress-bg: @color-gray-8; -@progress-bar-color: #79bc70; -@progress-border-radius: @border-radius-1; - -.progress { - display: block; - width: 100%; - height: @spacer-2; -} - -.progress[value] { - // Set overall background - background-color: @progress-bg; - // Remove Firefox and Opera border - border: 0; - // Reset the default appearance - appearance: none; - // Set overall border radius - border-radius: @progress-border-radius; -} - -// Filled-in portion of the bar -.progress[value]::-ms-fill { - background-color: @progress-bar-color; - // Remove right-hand border of value bar from IE10+/Edge - border: 0; -} -.progress[value]::-moz-progress-bar { - background-color: @progress-bar-color; - border-top-left-radius: @progress-border-radius; - border-bottom-left-radius: @progress-border-radius; -} -.progress[value]::-webkit-progress-value { - background-color: @progress-bar-color; - border-top-left-radius: @progress-border-radius; - border-bottom-left-radius: @progress-border-radius; -} -// Tweaks for full progress bar -.progress[value="100"]::-moz-progress-bar { - border-top-right-radius: @progress-border-radius; - border-bottom-right-radius: @progress-border-radius; -} -.progress[value="100"]::-webkit-progress-value { - border-top-right-radius: @progress-border-radius; - border-bottom-right-radius: @progress-border-radius; -} - -// Unfilled portion of the bar -.progress[value]::-webkit-progress-bar { - background-color: @progress-bg; - border-radius: @progress-border-radius; -} - -// Absurd-but-syntactically-valid selector to make these styles Firefox-only -base::-moz-progress-bar, -.progress[value] { - background-color: @progress-bg; - border-radius: @progress-border-radius; -} - -.progress-variant (@color) { - &[value]::-webkit-progress-value { - background-color: @color; - } - - &[value]::-moz-progress-bar { - background-color: @color; - } - - // IE10+, Microsoft Edge - &[value]::-ms-fill { - background-color: @color; - } -} diff --git a/src/glitter.less b/src/glitter.less deleted file mode 100644 index d130aaa13..000000000 --- a/src/glitter.less +++ /dev/null @@ -1,2 +0,0 @@ -@import "glitter/animations"; -@import "glitter/transitions"; diff --git a/src/glitter/animations.less b/src/glitter/animations.less deleted file mode 100644 index a207221b1..000000000 --- a/src/glitter/animations.less +++ /dev/null @@ -1,4 +0,0 @@ -@keyframes spin-around { - from { transform: rotate(0deg); } - to { transform: rotate(359deg); } -} diff --git a/src/glitter/transitions.less b/src/glitter/transitions.less deleted file mode 100644 index 5a3945244..000000000 --- a/src/glitter/transitions.less +++ /dev/null @@ -1,122 +0,0 @@ -.slide-down-enter-active, .slide-down-leave-active { - transition: all .5s; -} -.slide-down-enter, .slide-down-leave-active { - transform: translateY(-1.5em); - opacity: 0; -} - -.transition-stretch-in-out { - -webkit-font-smoothing: subpixel-antialiased; // Prevent text rendering jank on Safari - &.v-enter-active { - transition: all .3s cubic-bezier(0.23, 1.85, 0.32, 1); - // transition: all .15s; Plain curve - // transition: all .25s cubic-bezier(0.68, -0.55, 0.265, 1.55); Cool bouncy curve? - } - &.v-leave-active { - transition: all .15s; - // transition: all .15s; Plain curve - // transition: all .25s cubic-bezier(0.68, -0.55, 0.265, 1.55); Cool bouncy curve? - } - &.v-enter, &.v-leave-to { - transform: scale(.7); - opacity: 0; - } - &.v-leave, &.v-enter-to { - transform: scale(1); - opacity: 1; - } -} - -.transition-stretch-in { - -webkit-font-smoothing: subpixel-antialiased; // Prevent text rendering jank on Safari - &.v-enter-active { - transition: all .3s cubic-bezier(0.23, 1.85, 0.32, 1); - // transition: all .15s; Plain curve - // transition: all .25s cubic-bezier(0.68, -0.55, 0.265, 1.55); Cool bouncy curve? - } - &.v-enter { - transform: scale(.7); - opacity: 0; - } - &.v-enter-to { - transform: scale(1); - opacity: 1; - } -} - -.transition-fade-in { - &.v-enter-active { - transition: opacity .3s; - } - - &.v-enter-to { - opacity: 1; - } - - &.v-enter { - opacity: 0; - } -} - -.transition-fade-out { - &.v-leave-active { - transition: opacity .3s; - } - - &.v-leave-to { - opacity: 0; - } - - &.v-leave { - opacity: 1; - } -} - -.transition-fade { - .transition-fade-in; - .transition-fade-out; -} - -.transition-fade-out-slow { - &.v-leave-active { - transition: opacity 1s ease-in; - } - - &.v-leave-to { - opacity: 0; - } - - &.v-leave { - opacity: 1; - } -} - -.transition-to-bottom-left { - transform-origin: top right; -} - -.fade-grow-enter, .fade-grow-leave-active { - transform: scale(.7); - opacity: 0; -} - -.fade-grow-enter-active, .fade-grow-leave { - transition: transform .4s cubic-bezier(.075,.82,.165,1), opacity .35s cubic-bezier(.075,.82,.165,1); -} - -.fade-enter, .fade-leave-active { - opacity: 0; -} - -.fade-enter-active, .fade-leave { - transition: opacity .3s; -} - -.fade-slow-enter, .fade-slow-leave-active { - opacity: 0; -} - -.fade-slow-enter-active, .fade-slow-leave { - transition: opacity .5s; -} diff --git a/src/base/base.less b/src/reset.less similarity index 74% rename from src/base/base.less rename to src/reset.less index fbd145294..be6e2b334 100644 --- a/src/base/base.less +++ b/src/reset.less @@ -1,10 +1,10 @@ // For local dev -@import (less, optional) "../../node_modules/normalize.css/normalize.css"; -@import (less, optional) "../../node_modules/suitcss-base/lib/base.css"; +@import (less, optional) "../node_modules/normalize.css/normalize.css"; +@import (less, optional) "../node_modules/suitcss-base/lib/base.css"; // For real projects -@import (less, optional) "../../../../node_modules/normalize.css/normalize.css"; -@import (less, optional) "../../../../node_modules/suitcss-base/lib/base.css"; +@import (less, optional) "../../../node_modules/normalize.css/normalize.css"; +@import (less, optional) "../../../node_modules/suitcss-base/lib/base.css"; @-moz-viewport { width: device-width; } @-ms-viewport { width: device-width; } diff --git a/src/utilities.less b/src/utilities.less index 1f799da00..db4374e66 100644 --- a/src/utilities.less +++ b/src/utilities.less @@ -1,7 +1,11 @@ +@import "colors"; + @import "utilities/backgrounds"; @import "utilities/borders"; @import "utilities/display"; @import "utilities/flex"; +@import "utilities/grid"; +@import "utilities/images"; @import "utilities/layout"; @import "utilities/misc"; @import "utilities/position"; diff --git a/src/utilities/backgrounds.less b/src/utilities/backgrounds.less index e2d9d7933..009abc6dc 100644 --- a/src/utilities/backgrounds.less +++ b/src/utilities/backgrounds.less @@ -1,3 +1,17 @@ +@bg-light-hue: @hue-slate; +@bg-light: hsl(@bg-light-hue, 0%, 100%); +@bg-light-soft: hsl(@bg-light-hue, 20%, 98%); +@bg-light-softer: hsl(@bg-light-hue, 20%, 96%); + +@bg-dark-hue: @hue-slate; +@bg-dark: hsl(@bg-dark-hue, 14%, 33%); +@bg-dark-soft: hsl(@bg-dark-hue, 14%, 42%); +@bg-dark-softer: hsl(@bg-dark-hue, 14%, 52%); + +@bg-primary: @color-brand-primary; + +@bg-highlight: hsl(215, 99%, 63%); + .bg-light { background-color: @bg-light; } .bg-light-soft { background-color: @bg-light-soft; } .bg-light-softer { background-color: @bg-light-softer; } diff --git a/src/utilities/borders.less b/src/utilities/borders.less index 9423c3f8c..4d433c453 100644 --- a/src/utilities/borders.less +++ b/src/utilities/borders.less @@ -1,3 +1,17 @@ +@border-dark-hue: @hue-slate; +@border-dark: hsl(@border-dark-hue, 25%, 82%); +@border-dark-soft: hsl(@border-dark-hue, 25%, 90%); +@border-dark-softer: hsl(@border-dark-hue, 25%, 96%); + +@border-light: @color-white; +@border-light-soft: fade(@color-white, 60%); +@border-light-softer: fade(@color-white, 35%); + +@border-danger: @color-danger; +@border-danger-soft: fade(@color-danger, 50%); + +@border-brand: @color-brand-primary; + @border-default-color: @border-dark-soft; @border-radius-1: .25rem; diff --git a/src/components/generated-grid.less b/src/utilities/grid.less similarity index 100% rename from src/components/generated-grid.less rename to src/utilities/grid.less diff --git a/src/components/images.less b/src/utilities/images.less similarity index 100% rename from src/components/images.less rename to src/utilities/images.less diff --git a/src/utilities/text.less b/src/utilities/text.less index 5ef0a76b9..94d0a59bc 100644 --- a/src/utilities/text.less +++ b/src/utilities/text.less @@ -17,6 +17,20 @@ @font-weight-medium: 600; @font-weight-bold: 700; +@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-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; + .text-xs { font-size: @font-size-xs; } .text-sm { font-size: @font-size-sm; } .text-base { font-size: @font-size-base; }