diff --git a/src/styles/thorn/button/button-groups.scss b/src/styles/thorn/button/button-groups.scss deleted file mode 100644 index 730c3ea..0000000 --- a/src/styles/thorn/button/button-groups.scss +++ /dev/null @@ -1,106 +0,0 @@ -.btn-group { - display: inline-block; - vertical-align: middle; - @include clearfix(); - - + .btn-group, - + .btn { - margin-left: $spacer-1; - } - - .btn-group-item { - position: relative; - float: left; - border-right-width: 0; - border-radius: 0; - - &:first-child { - border-top-left-radius: 0.25em; - border-bottom-left-radius: 0.25em; - } - - &:last-child { - border-right-width: $border-width; - border-top-right-radius: 0.25em; - border-bottom-right-radius: 0.25em; - } - - &.btn-rounder { - &:first-child { - border-top-left-radius: 2em; - border-bottom-left-radius: 2em; - } - &:last-child { - border-top-right-radius: 2em; - border-bottom-right-radius: 2em; - } - } - - &.btn-squared { - &:first-child { - border-top-left-radius: 0; - border-bottom-left-radius: 0; - } - &:last-child { - border-top-right-radius: 0; - border-bottom-right-radius: 0; - } - } - } - - .btn-group-parent { - float: left; - - &:first-child .btn-group-item { - border-top-left-radius: 0.25em; - border-bottom-left-radius: 0.25em; - - &.btn-rounder { - border-top-right-radius: 0; - border-bottom-right-radius: 0; - border-top-left-radius: 2em; - border-bottom-left-radius: 2em; - } - - &.btn-squared { - border-top-right-radius: 0; - border-bottom-right-radius: 0; - border-top-left-radius: 0; - border-bottom-left-radius: 0; - } - } - - &:last-child .btn-group-item { - border-right-width: $border-width; - border-top-right-radius: 0.25em; - border-bottom-right-radius: 0.25em; - - &.btn-rounder { - border-top-left-radius: 0; - border-bottom-left-radius: 0; - border-top-right-radius: 2em; - border-bottom-right-radius: 2em; - } - - &.btn-squared { - border-top-left-radius: 0; - border-bottom-left-radius: 0; - border-top-right-radius: 0; - border-bottom-right-radius: 0; - } - } - - .btn-group-item { - border-right-width: 0; - border-radius: 0; - } - } - - .btn-group-item, - .btn-group-parent { - &:focus, - &:active { - z-index: 1; - } - } -} \ No newline at end of file diff --git a/src/styles/thorn/button/buttons.scss b/src/styles/thorn/button/buttons.scss deleted file mode 100644 index 45c701f..0000000 --- a/src/styles/thorn/button/buttons.scss +++ /dev/null @@ -1,209 +0,0 @@ -.btn { - display: inline-block; - padding: 6px 12px; - text-align: center; - vertical-align: middle; - cursor: pointer; - user-select: none; - background-color: transparent; - border: $border-width $border-style transparent; - font-size: map-get($text-size-map, 6); - font-weight: $font-weight-semibold; - border-radius: 0.25em; - appearance: none; - line-height: 20px; - - &:hover { - text-decoration: none; - background-repeat: repeat-x; - } - - &:focus { - outline: 0; - } - - &:disabled, - &.disabled, - &[aria-disabled=true] { - cursor: default; - background-position: 0 0; - } - - &:active, - &.selected, - &[aria-selected=true] { - background-image: none; - } - - &.btn-squared { - border-radius: 0; - } - - &.btn-rounder { - border-radius: 2em; - } - - @each $color, $value in $button-map { - &.btn-#{$color} { - background-color: nth($value, 1); - color: nth($value, 2); - &:hover { - background-color: darken(nth($value, 1), 10%); - color: lighten(nth($value, 2), 5%); - } - - &-transparent { - background: transparent; - color: $black; - &:hover { - background-color: nth($value, 1); - color: nth($value, 2); - } - } - } - } - - &.btn-link { - color: $text-blue; - text-decoration: none; - - &:hover { - text-decoration: underline; - } - } - - &.btn-sm { - padding: 3px 10px; - font-size: $font-size-small; - line-height: 20px; - } - - &.btn-lg { - padding: $em-spacer-6 1.25em; - font-size: inherit; - border-radius: 6px; - } - - &.btn-block { - display: block; - width: 100%; - text-align: center; - } - - -} - -.btn-icon { - display: inline-block; - padding: 5px; - margin-left: 5px; - line-height: $lh-condensed-ultra; - color: $text-gray; - vertical-align: middle; - background: transparent; - border: $border-width $border-style transparent; - - &:hover { - color: $text-blue; - } - - &:disabled, - &[aria-disabled=true] { - color: $gray-400; - cursor: default; - - &:hover { - color: $gray-400; - } - } - - &-round { - text-decoration: none; - outline: none; - cursor: pointer; - background: transparent; - border-radius: 100%; - overflow: none; - text-align: center; - padding: 5px; - border: $border-width $border-style transparent; - - span, - div { - display:inline-block; - vertical-align:top; - } - - @each $color, $value in $button-map { - &.btn-#{$color} { - background-color: nth($value, 1); - color: nth($value, 2); - &:hover { - @if ($color == "black") { - background-color: lighten(nth($value, 1), 20%); - color: nth($value, 2); - } @else if ($color == "white") { - background-color: darken(nth($value, 1), 20%); - color: nth($value, 2); - } @else if ($color == "yellow") { - background-color: darken(nth($value, 1), 10%); - color: lighten(nth($value, 2), 5%); - } @else if (str-index($color, "light")) { - background-color: darken(nth($value, 1), 20%); - color: lighten(nth($value, 2), 5%); - } @else { - background-color: darken(nth($value, 1), 10%); - color: invert(nth($value, 2), 90%); - } - } - - &-transparent { - background: transparent; - color: $black; - &:hover { - background-color: nth($value, 1); - color: nth($value, 2); - } - } - } - } - } -} - -.hidden-text-expander { - display: block; - - &.inline { - position: relative; - top: -1px; - display: inline-block; - margin-left: 5px; - line-height: 0; - } -} - -.hidden-text-expander a, -.ellipsis-expander { - display: inline-block; - height: 12px; - padding: 0 5px 5px; - font-size: $font-size-small; - font-weight: $font-weight-bold; - line-height: 6px; - color: $gray-700; - text-decoration: none; - vertical-align: middle; - background: lighten($gray-300, 5%); - border: 0; - border-radius: 1px; - - &:hover { - text-decoration: none; - background-color: darken($gray-300, 4%); - } - - &:active { - color: $text-white; - background-color: $blue-400; - } -} \ No newline at end of file diff --git a/src/styles/thorn/button/dropdown.scss b/src/styles/thorn/button/dropdown.scss deleted file mode 100644 index c188829..0000000 --- a/src/styles/thorn/button/dropdown.scss +++ /dev/null @@ -1,286 +0,0 @@ -.dropdown { - position: relative -} - -.dropdown-menu { - position: absolute; - top: 100%; - left: 0; - z-index: 100; - width: 150px; - padding-top: $spacer-2; - padding-bottom: $spacer-2; - margin-top: 2px; - list-style: none; - background-color: $bg-white; - background-clip: padding-box; - border: $border-width $border-style $border-gray; - border-radius: $spacer-1; - box-shadow: $box-shadow-lg; - - &.-inherit { - width: 100%; - } - - &::before, - &::after { - position: absolute; - display: inline-block; - content: ""; - } - - &::before { - border: $spacer-2 $border-style transparent; - border-bottom-color: $border-black-fade; - } - - &::after { - border: 7px $border-style transparent; - border-bottom-color: $border-white; - } - - > ul { - list-style: none; - } - - &-w { - top: 0; - right: 100%; - left: auto; - width: auto; - margin-top: 0; - margin-right: $spacer-2; - - &::before { - top: 10px; - right: -$spacer-3; - left: auto; - border-color: transparent; - border-left-color: $border-black-fade; - } - - &::after { - top: 11px; - right: -14px; - left: auto; - border-color: transparent; - border-left-color: $border-white; - } - } - - &-e { - top: 0; - left: 100%; - width: auto; - margin-top: 0; - margin-left: $spacer-2; - - &::before { - top: $spacer-2; - left: -$spacer-3; - border-color: transparent; - border-right-color: $border-black-fade; - } - - &::after { - top: 11px; - left: -14px; - border-color: transparent; - border-right-color: $border-white; - } - } - - &-ne { - top: auto; - bottom: 100%; - left: 0; - margin-bottom: 3px; - - &::before, - &::after { - top: auto; - right: auto; - } - - &::before { - bottom: -$spacer-2; - left: 9px; - border-top: $spacer-2 $border-style $border-black-fade; - border-right: $spacer-2 $border-style transparent; - border-bottom: 0; - border-left: $spacer-2 $border-style transparent; - } - - &::after { - bottom: -7px; - left: 10px; - border-top: 7px $border-style $border-white; - border-right: 7px $border-style transparent; - border-bottom: 0; - border-left: 7px $border-style transparent; - } - } - - &-s { - right: 50%; - left: auto; - transform: translateX(50%); - - &::before { - top: -$spacer-3; - right: 50%; - transform: translateX(50%); - } - - &::after { - top: -14px; - right: 50%; - transform: translateX(50%); - } - } - - &-sw { - right: 0; - left: auto; - - &::before { - top: -$spacer-3; - right: 9px; - left: auto; - } - - &::after { - top: -14px; - right: 10px; - left: auto; - } - } - - &-se { - &::before { - top: -$spacer-3; - left: 9px; - } - - &::after { - top: -14px; - left: 10px; - } - } - - .dropdown-item { - display: block; - padding: $spacer-1 $spacer-2 $spacer-1 $spacer-3; - overflow: hidden; - color: $text-gray-darker; - text-overflow: ellipsis; - white-space: nowrap; - - &:focus, - &:hover { - color: $text-black; - text-decoration: none; - background-color: $gray-100; - outline: none; - - > .icon { - color: inherit; - opacity: 1; - } - } - - &.btn-link { - width: 100%; - text-align: left; - } - } - - .dropdown-signout { - width: 100%; - text-align: left; - background: none; - border: 0; - } - - .dropdown-divider { - display: block; - height: 0; - margin: $spacer-2 0; - border-top: $border; - } - - .dropdown-header { - padding: $spacer-1 $spacer-3; - font-size: $h6-size; - color: $text-gray-darker; - } - - .dropdown-item[aria-checked="false"] .icon-check { - display: none; - } -} - -.dropdown-menu-dark { - color: $text-white !important; - background: $gray-800 !important; - border-color: $border-gray-darker !important; - box-shadow: $box-shadow-lg; - - &::before { - border-bottom-color: $border-gray-darker; - } - - &::after { - border-bottom-color: $gray-800; - } - - - .dropdown-header { - color: $gray-300 !important; - } - - .dropdown-divider { - border-top-color: $border-gray-darker !important; - } - - .dropdown-item { - color: inherit !important; - - &:focus, - &:hover { - background-color: lighten($gray-800, 10%) !important; - color: $white !important; - } - } - - - &.dropdown-menu-w { - &::before { - border-color: transparent transparent transparent $border-gray-darker !important; - } - - &::after { - border-color: transparent transparent transparent $gray-800 !important; - } - } - - &.dropdown-menu-e { - &::before { - border-color: transparent $border-gray-darker transparent transparent !important; - } - - &::after { - border-color: transparent $gray-800 transparent transparent !important; - } - } - - &.dropdown-menu-ne { - &::before { - border-color: $border-gray-darker transparent transparent transparent !important; - } - - &::after { - border-color: $gray-800 transparent transparent transparent !important; - } - } -} diff --git a/src/styles/thorn/button/index.scss b/src/styles/thorn/button/index.scss deleted file mode 100644 index 891181e..0000000 --- a/src/styles/thorn/button/index.scss +++ /dev/null @@ -1,3 +0,0 @@ -@import "./buttons.scss"; -@import "./button-groups.scss"; -@import "./dropdown.scss"; \ No newline at end of file diff --git a/src/styles/thorn/card/cards.scss b/src/styles/thorn/card/cards.scss deleted file mode 100644 index e5a0e9f..0000000 --- a/src/styles/thorn/card/cards.scss +++ /dev/null @@ -1,44 +0,0 @@ -.card { - position: relative; - display: block; - margin: auto; - min-width: 0; - word-wrap: break-word; - background-color: $bg-white; - background-clip: border-box; - border: $border-width $border-style $black-fade-30; - border-radius: .25em; - - &::after, - &::before { - box-sizing: border-box; - } - - &:hover, &:active, &:focus { - border: $border-width $border-style $black-fade-15; - } - - .card-img-top { - width: 100%; - border-top-left-radius: calc(.25rem - 1px); - border-top-right-radius: calc(.25rem - 1px); - - &img { - object-fit: contain; - max-width: 100%; - max-height: 100%; - width: auto; - height: auto; - } - } - - .card-body { - flex: 1 1 auto; - min-height: 1px; - padding: 1.25rem; - - .card-title { - margin-bottom: .75rem; - } - } -} diff --git a/src/styles/thorn/card/index.scss b/src/styles/thorn/card/index.scss deleted file mode 100644 index 09aa672..0000000 --- a/src/styles/thorn/card/index.scss +++ /dev/null @@ -1,3 +0,0 @@ -@import "../core/support/index.scss"; - -@import "./cards.scss"; \ No newline at end of file diff --git a/src/styles/thorn/core/default/elements.scss b/src/styles/thorn/core/default/elements.scss deleted file mode 100644 index f678a26..0000000 --- a/src/styles/thorn/core/default/elements.scss +++ /dev/null @@ -1,70 +0,0 @@ -* { // With border-box box sizing, padding and margin will be included in width and height which gives much better results - box-sizing: border-box; -} - -body { // Default colors and fonts for entire body element - background-color: $bg-white; - color: $text-black-lighter; - font-family: $body-font; - font-size: $body-font-size; - line-height: $body-line-height; -} - -input, -select, -textarea, -button { - font-family: inherit; - font-size: inherit; - line-height: inherit; -} - -a { - color: $text-blue; - text-decoration: none; - - &:hover { - text-decoration: underline; - } -} - -hr, -.line { // Horizontal line should look more clean - height: 0; - margin: 15px 0; - overflow: hidden; - background: transparent; - border: 0; - border-bottom: $border-width $border-style $gray-300; -} - -table { - border-spacing: 0; - border-collapse: collapse; -} - -td, -th { - padding: 0; -} - -button { - cursor: pointer; - border-radius: 0; -} - -details { - summary { - cursor: pointer; - } - &:not([open]) { - > *:not(summary) { - display: none !important; - } - } -} - -[hidden][hidden] { - display: none !important; -} - diff --git a/src/styles/thorn/core/default/index.scss b/src/styles/thorn/core/default/index.scss deleted file mode 100644 index 637e73a..0000000 --- a/src/styles/thorn/core/default/index.scss +++ /dev/null @@ -1,5 +0,0 @@ -@import "../support/index.scss"; - -@import "./normalize.scss"; -@import "./elements.scss"; -@import "./typography.scss"; diff --git a/src/styles/thorn/core/default/normalize.scss b/src/styles/thorn/core/default/normalize.scss deleted file mode 100644 index c45a85f..0000000 --- a/src/styles/thorn/core/default/normalize.scss +++ /dev/null @@ -1,349 +0,0 @@ -/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ - -/* Document - ========================================================================== */ - -/** - * 1. Correct the line height in all browsers. - * 2. Prevent adjustments of font size after orientation changes in iOS. - */ - - html { - line-height: 1.15; /* 1 */ - -webkit-text-size-adjust: 100%; /* 2 */ - } - - /* Sections - ========================================================================== */ - - /** - * Remove the margin in all browsers. - */ - - body { - margin: 0; - } - - /** - * Render the `main` element consistently in IE. - */ - - main { - display: block; - } - - /** - * Correct the font size and margin on `h1` elements within `section` and - * `article` contexts in Chrome, Firefox, and Safari. - */ - - h1 { - font-size: 2em; - margin: 0.67em 0; - } - - /* Grouping content - ========================================================================== */ - - /** - * 1. Add the correct box sizing in Firefox. - * 2. Show the overflow in Edge and IE. - */ - - hr { - box-sizing: content-box; /* 1 */ - height: 0; /* 1 */ - overflow: visible; /* 2 */ - } - - /** - * 1. Correct the inheritance and scaling of font size in all browsers. - * 2. Correct the odd `em` font sizing in all browsers. - */ - - pre { - font-family: monospace, monospace; /* 1 */ - font-size: 1em; /* 2 */ - } - - /* Text-level semantics - ========================================================================== */ - - /** - * Remove the gray background on active links in IE 10. - */ - - a { - background-color: transparent; - } - - /** - * 1. Remove the bottom border in Chrome 57- - * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. - */ - - abbr[title] { - border-bottom: none; /* 1 */ - text-decoration: underline; /* 2 */ - text-decoration: underline dotted; /* 2 */ - } - - /** - * Add the correct font weight in Chrome, Edge, and Safari. - */ - - b, - strong { - font-weight: bolder; - } - - /** - * 1. Correct the inheritance and scaling of font size in all browsers. - * 2. Correct the odd `em` font sizing in all browsers. - */ - - code, - kbd, - samp { - font-family: monospace, monospace; /* 1 */ - font-size: 1em; /* 2 */ - } - - /** - * Add the correct font size in all browsers. - */ - - small { - font-size: 80%; - } - - /** - * Prevent `sub` and `sup` elements from affecting the line height in - * all browsers. - */ - - sub, - sup { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; - } - - sub { - bottom: -0.25em; - } - - sup { - top: -0.5em; - } - - /* Embedded content - ========================================================================== */ - - /** - * Remove the border on images inside links in IE 10. - */ - - img { - border-style: none; - } - - /* Forms - ========================================================================== */ - - /** - * 1. Change the font styles in all browsers. - * 2. Remove the margin in Firefox and Safari. - */ - - button, - input, - optgroup, - select, - textarea { - font-family: inherit; /* 1 */ - font-size: 100%; /* 1 */ - line-height: 1.15; /* 1 */ - margin: 0; /* 2 */ - } - - /** - * Show the overflow in IE. - * 1. Show the overflow in Edge. - */ - - button, - input { /* 1 */ - overflow: visible; - } - - /** - * Remove the inheritance of text transform in Edge, Firefox, and IE. - * 1. Remove the inheritance of text transform in Firefox. - */ - - button, - select { /* 1 */ - text-transform: none; - } - - /** - * Correct the inability to style clickable types in iOS and Safari. - */ - - button, - [type="button"], - [type="reset"], - [type="submit"] { - -webkit-appearance: button; - } - - /** - * Remove the inner border and padding in Firefox. - */ - - button::-moz-focus-inner, - [type="button"]::-moz-focus-inner, - [type="reset"]::-moz-focus-inner, - [type="submit"]::-moz-focus-inner { - border-style: none; - padding: 0; - } - - /** - * Restore the focus styles unset by the previous rule. - */ - - button:-moz-focusring, - [type="button"]:-moz-focusring, - [type="reset"]:-moz-focusring, - [type="submit"]:-moz-focusring { - outline: 1px dotted ButtonText; - } - - /** - * Correct the padding in Firefox. - */ - - fieldset { - padding: 0.35em 0.75em 0.625em; - } - - /** - * 1. Correct the text wrapping in Edge and IE. - * 2. Correct the color inheritance from `fieldset` elements in IE. - * 3. Remove the padding so developers are not caught out when they zero out - * `fieldset` elements in all browsers. - */ - - legend { - box-sizing: border-box; /* 1 */ - color: inherit; /* 2 */ - display: table; /* 1 */ - max-width: 100%; /* 1 */ - padding: 0; /* 3 */ - white-space: normal; /* 1 */ - } - - /** - * Add the correct vertical alignment in Chrome, Firefox, and Opera. - */ - - progress { - vertical-align: baseline; - } - - /** - * Remove the default vertical scrollbar in IE 10+. - */ - - textarea { - overflow: auto; - } - - /** - * 1. Add the correct box sizing in IE 10. - * 2. Remove the padding in IE 10. - */ - - [type="checkbox"], - [type="radio"] { - box-sizing: border-box; /* 1 */ - padding: 0; /* 2 */ - } - - /** - * Correct the cursor style of increment and decrement buttons in Chrome. - */ - - [type="number"]::-webkit-inner-spin-button, - [type="number"]::-webkit-outer-spin-button { - height: auto; - } - - /** - * 1. Correct the odd appearance in Chrome and Safari. - * 2. Correct the outline style in Safari. - */ - - [type="search"] { - -webkit-appearance: textfield; /* 1 */ - outline-offset: -2px; /* 2 */ - } - - /** - * Remove the inner padding in Chrome and Safari on macOS. - */ - - [type="search"]::-webkit-search-decoration { - -webkit-appearance: none; - } - - /** - * 1. Correct the inability to style clickable types in iOS and Safari. - * 2. Change font properties to `inherit` in Safari. - */ - - ::-webkit-file-upload-button { - -webkit-appearance: button; /* 1 */ - font: inherit; /* 2 */ - } - - /* Interactive - ========================================================================== */ - - /* - * Add the correct display in Edge, IE 10+, and Firefox. - */ - - details { - display: block; - } - - /* - * Add the correct display in all browsers. - */ - - summary { - display: list-item; - } - - /* Misc - ========================================================================== */ - - /** - * Add the correct display in IE 10+. - */ - - template { - display: none; - } - - /** - * Add the correct display in IE 10. - */ - - [hidden] { - display: none; - } \ No newline at end of file diff --git a/src/styles/thorn/core/default/typography.scss b/src/styles/thorn/core/default/typography.scss deleted file mode 100644 index 5f8a1f2..0000000 --- a/src/styles/thorn/core/default/typography.scss +++ /dev/null @@ -1,74 +0,0 @@ -h1, -h2, -h3, -h4, -h5, -h6 { - margin-top: 0; - margin-bottom: 0; -} - -h1 { @include h1; } -h2 { @include h2; } -h3 { @include h3; } -h4 { @include h4; } -h5 { @include h5; } -h6 { @include h6; } - -p { - margin-top: 0; - margin-bottom: 10px; -} - -b, -strong { - font-weight: $font-weight-bold; -} - -small { - font-size: 90%; -} - -blockquote { - margin: 0; -} - -ul, -ol { - padding-left: 0; - margin-top: 0; - margin-bottom: 0; -} - -ol ol, -ul ol { - list-style-type: upper-roman; -} - -ul ul ol, -ul ol ol, -ol ul ol, -ol ol ol { - list-style-type: lower-latin; -} - -dd { - margin-left: 0; -} - -tt, -code { - font-family: $mono-font; - font-size: $font-size-small; -} - -pre { - margin-top: 0; - margin-bottom: 0; - font-family: $mono-font; - font-size: $font-size-small -} - -.icon { - vertical-align: text-bottom; -} \ No newline at end of file diff --git a/src/styles/thorn/core/index.scss b/src/styles/thorn/core/index.scss deleted file mode 100644 index f86f16e..0000000 --- a/src/styles/thorn/core/index.scss +++ /dev/null @@ -1,3 +0,0 @@ -@import "./support/index.scss"; - -@import "./default/index.scss"; \ No newline at end of file diff --git a/src/styles/thorn/core/support/index.scss b/src/styles/thorn/core/support/index.scss deleted file mode 100644 index 26bb847..0000000 --- a/src/styles/thorn/core/support/index.scss +++ /dev/null @@ -1,2 +0,0 @@ -@import "./variables/index.scss"; -@import "./mixins/index.scss"; \ No newline at end of file diff --git a/src/styles/thorn/core/support/mixins/index.scss b/src/styles/thorn/core/support/mixins/index.scss deleted file mode 100644 index 95bd555..0000000 --- a/src/styles/thorn/core/support/mixins/index.scss +++ /dev/null @@ -1,2 +0,0 @@ -@import "./layout.scss"; -@import "./typography.scss"; \ No newline at end of file diff --git a/src/styles/thorn/core/support/mixins/layout.scss b/src/styles/thorn/core/support/mixins/layout.scss deleted file mode 100644 index a259f25..0000000 --- a/src/styles/thorn/core/support/mixins/layout.scss +++ /dev/null @@ -1,49 +0,0 @@ -@mixin breakpoint($breakpoint) { - @if $breakpoint == "" { - @content; - } - - @else { - $value: map-get($breakpoints, $breakpoint); - - @if $value != null { - @media (min-width: $value) { - @content; - } - } - - @else { - @warn "Unfortunately, no value could be retrieved from `#{$breakpoint}`. " - + "Please make sure it is defined in `$breakpoints` map."; - } - } -} - - -@mixin retina-media-query { - @media - only screen and (-webkit-min-device-pixel-ratio: 2), - only screen and (min--moz-device-pixel-ratio: 2), - only screen and (-moz-min-device-pixel-ratio: 2), - only screen and (-o-min-device-pixel-ratio: 2/1), - only screen and (min-device-pixel-ratio: 2), - only screen and (min-resolution: 192dpi), - only screen and (min-resolution: 2dppx) { - @content; - } -} - - -@mixin clearfix { - &::before { - display: table; - content: ""; - } - - &::after { - display: table; - clear: both; - content: ""; - } -} - \ No newline at end of file diff --git a/src/styles/thorn/core/support/mixins/typography.scss b/src/styles/thorn/core/support/mixins/typography.scss deleted file mode 100644 index 3668c6f..0000000 --- a/src/styles/thorn/core/support/mixins/typography.scss +++ /dev/null @@ -1,71 +0,0 @@ -@mixin hide-text() { - overflow: hidden; - text-indent: 100%; - white-space: nowrap; -} - -@mixin h1 { - font-size: $h1-size; - font-weight: $font-weight-bold; -} - -@mixin h2 { - font-size: $h2-size; - font-weight: $font-weight-bold; -} - -@mixin h3 { - font-size: $h3-size; - font-weight: $font-weight-bold; -} - -@mixin h4 { - font-size: $h4-size; - font-weight: $font-weight-bold; -} - -@mixin h5 { - font-size: $h5-size; - font-weight: $font-weight-bold; -} - -@mixin h6 { - font-size: $h6-size; - font-weight: $font-weight-bold; -} - -@mixin f1-responsive { - font-size: $h1-size-mobile; - @include breakpoint(md) { - font-size: $h1-size; - } -} - -@mixin f2-responsive { - font-size: $h2-size-mobile; - @include breakpoint(md) { - font-size: $h2-size; - } -} - -@mixin f3-responsive { - font-size: $h3-size-mobile; - @include breakpoint(md) { - font-size: $h3-size; - } -} - -@mixin h1-responsive { - @include f1-responsive; - font-weight: $font-weight-bold; -} - -@mixin h2-responsive { - @include f2-responsive; - font-weight: $font-weight-bold; -} - -@mixin h3-responsive { - @include f3-responsive; - font-weight: $font-weight-bold; -} diff --git a/src/styles/thorn/core/support/variables/colors.scss b/src/styles/thorn/core/support/variables/colors.scss deleted file mode 100644 index 7451a4d..0000000 --- a/src/styles/thorn/core/support/variables/colors.scss +++ /dev/null @@ -1,349 +0,0 @@ -$black: #1c1d1f !default; -$black-light: #202020 !default; - -$white: #fff !default; -$darkwhite: darken($white, 5%) !default; - -// Grays -$gray-000: #ececec !default; -$gray-100: #e2e2e2 !default; -$gray-200: #cfcaca !default; -$gray-300: #b6b1b1 !default; -$gray-400: #a1a6ac !default; -$gray-500: #7f8286 !default; -$gray-600: #6c6e70 !default; -$gray-700: #5d5f61 !default; -$gray-800: #434446 !default; -$gray-900: #2f3131 !default; - -$gray: $gray-500 !default; -$gray-light: $gray-300 !default; -$gray-dark: $gray-800 !default; - -$grays: ( - 0: $gray-000, - 1: $gray-100, - 2: $gray-200, - 3: $gray-300, - 4: $gray-400, - 5: $gray-500, - 6: $gray-600, - 7: $gray-700, - 8: $gray-800, - 9: $gray-900 -) !default; - -// Red -$red-000: #ffd5d5 !default; -$red-100: #ffbfbf !default; -$red-200: #ff8a8a !default; -$red-300: #ff5858 !default; -$red-400: #ec4e32 !default; -$red-500: #ec1818 !default; -$red-600: #d41f1f !default; -$red-700: #b30a0a !default; -$red-800: #880707 !default; -$red-900: #680707 !default; - -$red: $red-500 !default; - -$reds: ( - 0: $red-000, - 1: $red-100, - 2: $red-200, - 3: $red-300, - 4: $red-400, - 5: $red-500, - 6: $red-600, - 7: $red-700, - 8: $red-800, - 9: $red-900 -) !default; - -// Green -$green-000: #d5ffdf !default; -$green-100: #95eba9 !default; -$green-200: #63ee84 !default; -$green-300: #3aec63 !default; -$green-400: #2cf85c !default; -$green-500: #16c725 !default; -$green-600: #0caa19 !default; -$green-700: #12901c !default; -$green-800: #0c6b14 !default; -$green-900: #094e0f !default; - -$green: $green-500 !default; - -$greens: ( - 0: $green-000, - 1: $green-100, - 2: $green-200, - 3: $green-300, - 4: $green-400, - 5: $green-500, - 6: $green-600, - 7: $green-700, - 8: $green-800, - 9: $green-900 -) !default; - -// Blue -$blue-000: #d5e2ff !default; -$blue-100: #afc7fa !default; -$blue-200: #89a4e0 !default; -$blue-300: #678ee2 !default; -$blue-400: #427af3 !default; -$blue-500: #296cff !default; -$blue-600: #0c52eb !default; -$blue-700: #1347b9 !default; -$blue-800: #0c3692 !default; -$blue-900: #082562 !default; - -$blue: $blue-500 !default; - -$blues: ( - 0: $blue-000, - 1: $blue-100, - 2: $blue-200, - 3: $blue-300, - 4: $blue-400, - 5: $blue-500, - 6: $blue-600, - 7: $blue-700, - 8: $blue-800, - 9: $blue-900 -) !default; - -// Yellow -$yellow-000: #fffbdd !default; -$yellow-100: #fdf7c7 !default; -$yellow-200: #f3e89f !default; -$yellow-300: #ffec8d !default; -$yellow-400: #ffdc4f !default; -$yellow-500: #ffd036 !default; -$yellow-600: #e6b208 !default; -$yellow-700: #ca9c05 !default; -$yellow-800: #ac860a !default; -$yellow-900: #7c6006 !default; - -$yellow: $yellow-500 !default; - -$yellows: ( - 0: $yellow-000, - 1: $yellow-100, - 2: $yellow-200, - 3: $yellow-300, - 4: $yellow-400, - 5: $yellow-500, - 6: $yellow-600, - 7: $yellow-700, - 8: $yellow-800, - 9: $yellow-900 -) !default; - -// Orange -$orange-000: #fae8d8 !default; -$orange-100: #fcdec4 !default; -$orange-200: #f8c69d !default; -$orange-300: #f8a971 !default; -$orange-400: #fb8f42 !default; -$orange-500: #f6731b !default; -$orange-600: #d85e0d !default; -$orange-700: #bb4f07 !default; -$orange-800: #aa4705 !default; -$orange-900: #b84f09 !default; - -$orange: $orange-500 !default; - -$oranges: ( - 0: $orange-000, - 1: $orange-100, - 2: $orange-200, - 3: $orange-300, - 4: $orange-400, - 5: $orange-500, - 6: $orange-600, - 7: $orange-700, - 8: $orange-800, - 9: $orange-900 -) !default; - -// Purple -$purple-000: #f5f0ff !default; -$purple-100: #e6dcfd !default; -$purple-200: #d1bcf9 !default; -$purple-300: #b392f0 !default; -$purple-400: #8a63d2 !default; -$purple-500: #6f42c1 !default; -$purple-600: #5a32a3 !default; -$purple-700: #4c2889 !default; -$purple-800: #3a1d6e !default; -$purple-900: #29134e !default; - -$purple: $purple-500 !default; - -$purples: ( - 0: $purple-000, - 1: $purple-100, - 2: $purple-200, - 3: $purple-300, - 4: $purple-400, - 5: $purple-500, - 6: $purple-600, - 7: $purple-700, - 8: $purple-800, - 9: $purple-900 -) !default; - -// Pink -$pink-000: #ffeef8 !default; -$pink-100: #fedbf0 !default; -$pink-200: #f9b3dd !default; -$pink-300: #f692ce !default; -$pink-400: #ec6cb9 !default; -$pink-500: #ea4aaa !default; -$pink-600: #d03592 !default; -$pink-700: #b93a86 !default; -$pink-800: #99306f !default; -$pink-900: #6d224f !default; - -$pink: $pink-500 !default; - -$pinks: ( - 0: $pink-000, - 1: $pink-100, - 2: $pink-200, - 3: $pink-300, - 4: $pink-400, - 5: $pink-500, - 6: $pink-600, - 7: $pink-700, - 8: $pink-800, - 9: $pink-900 -) !default; - -// buttons - -$button-map: ( - "default": ($gray, $white), - "black": ($black, $white), - "white": ($white, $black), - "red": ($red, $white), - "green": ($green, $white), - "blue": ($blue, $white), - "orange": ($orange, $white), - "yellow": ($yellow, $black), - "lightred": ($red-200, $black), - "lightgreen": ($green-200, $black), - "lightblue": ($blue-200, $black), - "lightorange": ($orange-200, $black), - "lightyellow": ($yellow-200, $black) - -) !default; - -// Fades -$black-fade-05: rgba($black, 0.05) !default; -$black-fade-10: rgba($black, 0.1) !default; -$black-fade-15: rgba($black, 0.15) !default; -$black-fade-30: rgba($black, 0.3) !default; -$black-fade-50: rgba($black, 0.5) !default; -$black-fade-70: rgba($black, 0.7) !default; -$black-fade-85: rgba($black, 0.85) !default; - -$white-fade-05: rgba($white, 0.05) !default; -$white-fade-10: rgba($white, 0.1) !default; -$white-fade-15: rgba($white, 0.15) !default; -$white-fade-30: rgba($white, 0.3) !default; -$white-fade-50: rgba($white, 0.5) !default; -$white-fade-70: rgba($white, 0.7) !default; -$white-fade-85: rgba($white, 0.85) !default; - -$hue-maps: ( - "gray": $grays, - "red": $reds, - "green": $greens, - "blue": $blues, - "yellow": $yellows, - "orange": $oranges, - "purple": $purples, - "pink": $pinks -) !default; - -// Border colors -$border-default: $gray-500 !default; -$border-white: $white !default; -$border-black-fade: $black-fade-15 !default; -$border-white-fade: $white-fade-15 !default; -$border-gray-dark: $gray-300 !default; -$border-gray-darker: $gray-700 !default; -$border-gray-light: $gray-100 !default; -$border-gray: $gray-200 !default; -$border-red: $red !default; -$border-red-light: $red-200 !default; -$border-green: $green !default; -$border-green-light: $green-200 !default; -$border-blue: $blue !default; -$border-blue-light: $blue-200 !default; -$border-yellow: $yellow !default; -$border-yellow-light: $yellow-200 !default; -$border-orange: $orange !default; -$border-orange-light: $orange-200 !default; -$border-purple: $purple !default; -$border-purple-light: $purple-200 !default; -$border-pink: $pink !default; -$border-pink-light: $pink-200 !default; - -$border-color-button: $border-black-fade !default; - -// Background colors -$bg-white: $white !default; -$bg-darkwhite: $darkwhite !default; -$bg-black: $black !default; -$bg-black-fade: $black-fade-50 !default; -$bg-gray-dark: $gray-300 !default; -$bg-gray-darker: $gray-800 !default; -$bg-gray-light: $gray-100 !default; -$bg-gray: $gray-200 !default; -$bg-red: $red !default; -$bg-red-light: $red-200 !default; -$bg-green: $green !default; -$bg-green-light: $green-200 !default; -$bg-blue: $blue !default; -$bg-blue-light: $blue-200 !default; -$bg-yellow: $yellow !default; -$bg-yellow-light: $yellow-200 !default; -$bg-orange: $orange !default; -$bg-orange-light: $orange-200 !default; -$bg-purple: $purple !default; -$bg-purple-light: $purple-200 !default; -$bg-pink: $pink !default; -$bg-pink-light: $pink-200 !default; - -// diffstat background -$bg-diffstat-added: darken($green-400, 5%) !default; -$bg-diffstat-deleted: $red-600 !default; -$bg-diffstat-neutral: $gray-300 !default; - -// Text colors -$text-white: $white !default; -$text-darkwhite: $darkwhite !default; -$text-black: $black !default; -$text-black-lighter: $black-light !default; -$text-gray-dark: $gray-300 !default; -$text-gray-darker: $gray-700 !default; -$text-gray-light: $gray-100 !default; -$text-gray: gray-200 !default; -$text-red: $red !default; -$text-red-light: $red-200 !default; -$text-green: $green !default; -$text-green-light: $green-200 !default; -$text-blue: $blue !default; -$text-blue-light: $blue-200 !default; -$text-yellow: $yellow !default; -$text-yellow-light: $yellow-200 !default; -$text-orange: $orange !default; -$text-orange-light: $orange-200 !default; -$text-purple: $purple !default; -$text-purple-light: $purple-200 !default; -$text-pink: $pink !default; -$text-pink-light: $pink-200 !default; \ No newline at end of file diff --git a/src/styles/thorn/core/support/variables/index.scss b/src/styles/thorn/core/support/variables/index.scss deleted file mode 100644 index 44e1cdd..0000000 --- a/src/styles/thorn/core/support/variables/index.scss +++ /dev/null @@ -1,3 +0,0 @@ -@import "./colors.scss"; -@import "./layout.scss"; -@import "./typography.scss"; diff --git a/src/styles/thorn/core/support/variables/layout.scss b/src/styles/thorn/core/support/variables/layout.scss deleted file mode 100644 index cd22ac1..0000000 --- a/src/styles/thorn/core/support/variables/layout.scss +++ /dev/null @@ -1,164 +0,0 @@ -//Spacers for margins and padding - -// default spacer -$spacer: 4px !default; - -// spacer scale -$spacer-0: 0 !default; // 0 -$spacer-1: round($spacer / 2) !default; // 2px -$spacer-2: $spacer !default; // 4px -$spacer-3: $spacer * 2 !default; // 8px -$spacer-4: $spacer * 3 !default; // 12px -$spacer-5: $spacer * 4 !default; // 16px -$spacer-6: $spacer-4 * 2 !default; // 24px -$spacer-7: $spacer-5 * 2 !default; // 32px -$spacer-8: $spacer-4 * 3 !default; // 36px -$spacer-9: $spacer-6 * 2 !default; // 42px -$spacer-10: $spacer * 9 !default; // 56px -$spacer-11: $spacer-7 * 2 !default; // 64px -$spacer-12: $spacer-8 * 2 !default; // 72px - -// Lists of spacers, one is for loops - -$spacers: ( - $spacer-0, - $spacer-1, - $spacer-2, - $spacer-3, - $spacer-4, - $spacer-5, - $spacer-6, - $spacer-7, - $spacer-8, - $spacer-9, - $spacer-10, - $spacer-11, - $spacer-12 -) !default; - -$spacer-map: ( - 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 -) !default; - -// em spacers - -$em-spacer-1: 0.0625em !default; // 1/16 -$em-spacer-2: 0.125em !default; // 1/8 -$em-spacer-3: 0.25em !default; // 1/4 -$em-spacer-4: 0.375em !default; // 3/8 -$em-spacer-5: 0.5em !default; // 1/2 -$em-spacer-6: 0.75em !default; // 3/4 - -// widths - -// container widths - -$container-default: 840px !default; -$container-sm: 540px !default; -$container-md: 720px !default; -$container-lg: 960px !default; -$container-xl: 1140px !default; -$container-xxl: 1320px !default; - -$width-default: 840px !default; -$width-sm: 540px !default; -$width-md: 720px !default; -$width-lg: 960px !default; -$width-xl: 1140px !default; -$width-xxl: 1320px !default; - -$container-width: ( - sm: $container-sm, - md: $container-md, - default: $container-default, - lg: $container-lg, - xl: $container-xl, - xxl: $container-xxl -) !default; - -// form breakpoints -$breakpoints: ( - sm: 540px, - md: 720px, - lg: 960px, - xl: 1140px, - xxl: 1320px -) !default; - -$responsive-variants: ( - "": "", - sm: "-sm", - md: "-md", - lg: "-lg", - xl: "-xl", - xxl: "-xxl" -) !default; - -$responsive-positions: ( - static, - relative, - absolute, - fixed, - sticky -) !default; - -$display-values: ( - inline, - block, - inline-block, - flex, - inline-flex, - table, - table-cell, - none -) !default; - -// map of edges - -$edges: ( - top: (top-left, top-right), - right: (top-right, bottom-right), - bottom: (bottom-right, bottom-left), - left: (bottom-left, top-left) -) !default; - -// Border variables - -$border-width: 1px !default; -$border-color: $border-default !default; -$border-style: solid !default; -$border: $border-width $border-color $border-style !default; -$border-radius: 2px !default; - -// Tooltip variables - -$tooltip-max-width: 260px !default; -$tooltip-background-color: $black !default; -$tooltip-text-color: $darkwhite !default; -$tooltip-delay: 0.4s !default; -$tooltip-duration: 0.2s !default; - -// Box shadow - -$box-shadow: 0 1px 2px $black-fade-10 !default; -$box-shadow-md: 0 1px 5px $black-fade-15 !default; -$box-shadow-lg: 0 1px 15px $black-fade-15 !default; -$box-shadow-xl: 0 10px 50px $black-fade-05 !default; - -// Other shadow - -$btn-active-shadow: inset 0 0.15em 0.3em $black-fade-15 !default; -$btn-input-focus-shadow: 0 0 0 0.2em rgba($blue, 0.3) !default; -$form-control-shadow: inset 0 1px 2px rgba($black, 0.075) !default; \ No newline at end of file diff --git a/src/styles/thorn/core/support/variables/typography.scss b/src/styles/thorn/core/support/variables/typography.scss deleted file mode 100644 index 347ee85..0000000 --- a/src/styles/thorn/core/support/variables/typography.scss +++ /dev/null @@ -1,85 +0,0 @@ -// Heading sizes - mobile -$h00-size-mobile: 40px !default; -$h0-size-mobile: 32px !default; -$h1-size-mobile: 26px !default; -$h2-size-mobile: 22px !default; -$h3-size-mobile: 18px !default; - -// Heading sizes - desktop -$h00-size: 48px !default; -$h0-size: 40px !default; -$h1-size: 32px !default; -$h2-size: 24px !default; -$h3-size: 20px !default; -$h4-size: 16px !default; -$h5-size: 14px !default; -$h6-size: 12px !default; - -$font-size-small: 12px !default; - -// Font weights -$font-weight-bold: 600 !default; -$font-weight-semibold: 500 !default; -$font-weight-normal: 400 !default; -$font-weight-light: 300 !default; - -// Line heights -$lh-condensed-ultra: 1 !default; -$lh-condensed: 1.25 !default; -$lh-default: 1.5 !default; - -// Text size map - -$text-size-mobile-map: ( - 0: 0px, - 1: 4px, - 2: 6px, - 3: 8px, - 4: 10px, - 5: 12px, - 6: 14px, - 7: 16px, - 8: 18px, - 9: 20px, - 10: 22px, - 11: 24px, - 12: 28px, - 13: 32px, - 14: 40px, - 15: 48px, - 16: 56px, - 17: 64px -) !default; - -$text-size-map: ( - 0: 0px, - 1: 6px, - 2: 8px, - 3: 10px, - 4: 12px, - 5: 14px, - 6: 16px, - 7: 18px, - 8: 20px, - 9: 22px, - 10: 24px, - 11: 28px, - 12: 32px, - 13: 40px, - 14: 48px, - 15: 56px, - 16: 64px, - 17: 72px -) !default; - - - -// Font stacks -$body-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji" !default; - -// Monospace font stack -$mono-font: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace !default; - -// The base body size -$body-font-size: 14px !default; -$body-line-height: $lh-default !default; diff --git a/src/styles/thorn/index.scss b/src/styles/thorn/index.scss deleted file mode 100644 index 3550b2d..0000000 --- a/src/styles/thorn/index.scss +++ /dev/null @@ -1,9 +0,0 @@ -//@import "../node_modules/css.gg/icons/all.scss"; - -@import './core/index.scss'; - -@import './utilities/index.scss'; -@import './layout/index.scss'; -@import './button/index.scss'; -@import './labels/index.scss'; -@import './card/index.scss'; \ No newline at end of file diff --git a/src/styles/thorn/labels/index.scss b/src/styles/thorn/labels/index.scss deleted file mode 100644 index ff23d61..0000000 --- a/src/styles/thorn/labels/index.scss +++ /dev/null @@ -1,3 +0,0 @@ -@import "../core/support/index.scss"; - -@import "./labels.scss"; \ No newline at end of file diff --git a/src/styles/thorn/labels/labels.scss b/src/styles/thorn/labels/labels.scss deleted file mode 100644 index 8e56f46..0000000 --- a/src/styles/thorn/labels/labels.scss +++ /dev/null @@ -1,75 +0,0 @@ -.label { - display: inline-block; - padding: 3px $spacer-1; - font-size: $font-size-small; - font-weight: $font-weight-bold; - line-height: $lh-condensed-ultra; - color: $text-white; - background-color: $bg-blue; - border-radius: 2px; - box-shadow: inset 0 -1px 0 rgba($black, 0.12); - - &:hover { - text-decoration: none; - } - - &-gray { - color: $text-gray-darker; - background-color: lighten($gray, 20%); - } - - &-dark-gray { - color: $text-darkwhite; - background-color: $gray; - } - - &-outline { - margin-top: -1px; - margin-bottom: -1px; - font-weight: $font-weight-normal; - color: $text-gray; - background-color: transparent; - border: $border-width $border-style $border-black-fade; - box-shadow: none; - } -} - -.state { - display: inline-block; - padding: $spacer-2 $spacer-3; - font-weight: $font-weight-bold; - font-size: $body-font-size; - line-height: 20px; - color: $text-white; - text-align: center; - white-space: nowrap; - border-radius: $border-radius; - background-color: $bg-blue; - border-radius: 2px; - box-shadow: inset 0 -1px 0 rgba($black, 0.12); -} - -.counter { - display: inline-block; - padding: $spacer-1 $spacer-2; - font-size: $font-size-small; - font-weight: $font-weight-bold; - line-height: $lh-condensed-ultra; - color: $text-gray; - background-color: rgba($black, 0.08); - border-radius: 15px; - - &:empty { - visibility: hidden; - } - - &.-dark { - background-color: $gray; - color: $text-white; - } - - &.-light { - background-color: $black-fade-15; - color: $text-gray-dark; - } -} \ No newline at end of file diff --git a/src/styles/thorn/layout/container.scss b/src/styles/thorn/layout/container.scss deleted file mode 100644 index 71fd923..0000000 --- a/src/styles/thorn/layout/container.scss +++ /dev/null @@ -1,35 +0,0 @@ -.container { - max-width: $container-default; - margin-right: auto; - margin-left: auto; -} - -.container-sm { - max-width: $container-sm; - margin-right: auto; - margin-left: auto; -} - -.container-md { - max-width: $container-md; - margin-right: auto; - margin-left: auto; -} - -.container-lg { - max-width: $container-lg; - margin-right: auto; - margin-left: auto; -} - -.container-xl { - max-width: $container-xl; - margin-right: auto; - margin-left: auto; -} - -.container-xxl { - max-width: $container-xxl; - margin-right: auto; - margin-left: auto; -} \ No newline at end of file diff --git a/src/styles/thorn/layout/grid-offset.scss b/src/styles/thorn/layout/grid-offset.scss deleted file mode 100644 index e50f766..0000000 --- a/src/styles/thorn/layout/grid-offset.scss +++ /dev/null @@ -1,15 +0,0 @@ -@each $breakpoint, $variant in $responsive-variants { - @include breakpoint($breakpoint) { - .offset#{$variant}-1 { margin-left: (1 / 12 * 100%) !important; } - .offset#{$variant}-2 { margin-left: (2 / 12 * 100%) !important; } - .offset#{$variant}-3 { margin-left: (3 / 12 * 100%) !important; } - .offset#{$variant}-4 { margin-left: (4 / 12 * 100%) !important; } - .offset#{$variant}-5 { margin-left: (5 / 12 * 100%) !important; } - .offset#{$variant}-6 { margin-left: (6 / 12 * 100%) !important; } - .offset#{$variant}-7 { margin-left: (7 / 12 * 100%) !important; } - .offset#{$variant}-8 { margin-left: (8 / 12 * 100%) !important; } - .offset#{$variant}-9 { margin-left: (9 / 12 * 100%) !important; } - .offset#{$variant}-10 { margin-left: (10 / 12 * 100%) !important; } - .offset#{$variant}-11 { margin-left: (11 / 12 * 100%) !important; } - } -} \ No newline at end of file diff --git a/src/styles/thorn/layout/grid.scss b/src/styles/thorn/layout/grid.scss deleted file mode 100644 index cbcefa9..0000000 --- a/src/styles/thorn/layout/grid.scss +++ /dev/null @@ -1,59 +0,0 @@ -.col-1 { width: (1 / 12 * 100%); } -.col-2 { width: (2 / 12 * 100%); } -.col-3 { width: (3 / 12 * 100%); } -.col-4 { width: (4 / 12 * 100%); } -.col-5 { width: (5 / 12 * 100%); } -.col-6 { width: (6 / 12 * 100%); } -.col-7 { width: (7 / 12 * 100%); } -.col-8 { width: (8 / 12 * 100%); } -.col-9 { width: (9 / 12 * 100%); } -.col-10 { width: (10 / 12 * 100%); } -.col-11 { width: (11 / 12 * 100%); } -.col-12 { width: 100%; } - -@each $breakpoint in map-keys($breakpoints) { - @include breakpoint($breakpoint) { - .col-#{$breakpoint}-1 { width: ( 1 / 12 * 100%); } - .col-#{$breakpoint}-2 { width: ( 2 / 12 * 100%); } - .col-#{$breakpoint}-3 { width: ( 3 / 12 * 100%); } - .col-#{$breakpoint}-4 { width: ( 4 / 12 * 100%); } - .col-#{$breakpoint}-5 { width: ( 5 / 12 * 100%); } - .col-#{$breakpoint}-6 { width: ( 6 / 12 * 100%); } - .col-#{$breakpoint}-7 { width: ( 7 / 12 * 100%); } - .col-#{$breakpoint}-8 { width: ( 8 / 12 * 100%); } - .col-#{$breakpoint}-9 { width: ( 9 / 12 * 100%); } - .col-#{$breakpoint}-10 { width: ( 10 / 12 * 100%); } - .col-#{$breakpoint}-11 { width: ( 11 / 12 * 100%); } - .col-#{$breakpoint}-12 { width: 100%; } - } -} - -@mixin gutters ($gutter-width: $spacer-3) { - margin-right: -$gutter-width; - margin-left: -$gutter-width; - - > [class*="col-"] { - padding-right: $gutter-width !important; - padding-left: $gutter-width !important; - } -} - -.gutter { - @include gutters($spacer-3); -} - -.gutter-condensed { - @include gutters($spacer-2); -} - -.gutter-spacious { - @include gutters($spacer-4); -} - -@each $breakpoint in map-keys($breakpoints) { - @include breakpoint($breakpoint) { - .gutter-#{$breakpoint} { @include gutters($spacer-3); } - .gutter-#{$breakpoint}-condensed { @include gutters($spacer-2); } - .gutter-#{$breakpoint}-spacious { @include gutters($spacer-4); } - } -} \ No newline at end of file diff --git a/src/styles/thorn/layout/header.scss b/src/styles/thorn/layout/header.scss deleted file mode 100644 index f27e53f..0000000 --- a/src/styles/thorn/layout/header.scss +++ /dev/null @@ -1,149 +0,0 @@ -.header { - z-index: 32; - display: flex; - padding: $spacer-3; - font-size: $body-font-size; - line-height: $lh-default; - color: $darkwhite; - background-color: $bg-gray-darker; - align-items: center; - flex-wrap: nowrap; - - &.--light { - background-color: $bg-darkwhite; - color: $black; - - .header-link{ - color: $black; - &:hover, - &:focus { - color: $text-gray-darker; - } - - - } - } -} - -.header-item { - display: flex; - margin-right: $spacer-3; - align-self: stretch; - align-items: center; - flex-wrap: nowrap; -} - -.header-item--full { - flex: auto; -} - -.header-link { - font-weight: $font-weight-bold; - color: $text-white; - white-space: nowrap; - - &:hover, - &:focus { - color: $text-gray-light; - text-decoration: none; - } -} - -.header-dropdown { - position: relative; - - ul { - list-style-type: none; - } - - .header-dropdown-menu { - border: $border-width $border-style $gray; - border-top-left-radius: 0; - border-top-right-radius: 0; - background-color: $bg-white; - border-bottom-left-radius: .25rem; - border-bottom-right-radius: .25rem; - position: absolute; - width: 100%; - - li { - display: block; - } - - .dropdown-item { - display: block; - padding: $spacer-2 $spacer-2 $spacer-2 $spacer-4; - width: 100%; - overflow: hidden; - color: $gray; - text-overflow: ellipsis; - white-space: nowrap; - - &:focus, - &:hover { - color: $text-black; - text-decoration: none; - background-color: $gray-100; - outline: none; - - > .icon { - color: inherit; - opacity: 1; - } - } - - &.btn-link { - width: 100%; - text-align: left; - } - - a { - text-decoration: none; - color: inherit; - } - } - - .dropdown-signout { - width: 100%; - text-align: left; - background: none; - border: 0; - } - - .dropdown-divider { - display: block; - height: 0; - margin: 0 0; - border-top: $border; - } - - .dropdown-header { - padding: $spacer-1 $spacer-3; - font-size: $h6-size; - color: $text-gray-darker; - } - - .dropdown-item[aria-checked="false"] .icon-check { - display: none; - } - - *:last-child { - border-bottom-left-radius: calc(.25rem - 1px); - border-bottom-right-radius: calc(.25rem - 1px); - } - - } -} - - -.header-dropdown[open] { - .header-button { - border-bottom-left-radius: 0; - border-bottom-right-radius: 0; - border: $border-width $border-style $gray; - } - - .header-dropdown-menu { - position: absolute; - } -} diff --git a/src/styles/thorn/layout/index.scss b/src/styles/thorn/layout/index.scss deleted file mode 100644 index 0405e91..0000000 --- a/src/styles/thorn/layout/index.scss +++ /dev/null @@ -1,6 +0,0 @@ -@import "../core/support/index.scss"; - -@import "./container.scss"; -@import "./grid.scss"; -@import "./grid-offset.scss"; -@import "./header.scss"; \ No newline at end of file diff --git a/src/styles/thorn/utilities/animations.scss b/src/styles/thorn/utilities/animations.scss deleted file mode 100644 index 963db6b..0000000 --- a/src/styles/thorn/utilities/animations.scss +++ /dev/null @@ -1,171 +0,0 @@ -.anim-fade-in { - animation-name: fade-in; - animation-duration: 1s; - animation-timing-function: ease-in-out; - - &.fast { - animation-duration: 300ms; - } -} - -@keyframes fade-in { - 0% { - opacity: 0; - } - - 100% { - opacity: 1; - } -} - -.anim-fade-out { - animation-name: fade-out; - animation-duration: 1s; - animation-timing-function: ease-out; - - &.fast { - animation-duration: 0.3s; - } -} - -@keyframes fade-out { - 0% { - opacity: 1; - } - - 100% { - opacity: 0; - } -} - -.anim-fade-up { - opacity: 0; - animation-name: fade-up; - animation-duration: 0.3s; - animation-fill-mode: forwards; - animation-timing-function: ease-out; - animation-delay: 1s; -} - -@keyframes fade-up { - 0% { - opacity: 0.8; - transform: translateY(100%); - } - - 100% { - opacity: 1; - transform: translateY(0); - } -} - -.anim-fade-down { - animation-name: fade-down; - animation-duration: 0.3s; - animation-fill-mode: forwards; - animation-timing-function: ease-in; -} - -@keyframes fade-down { - 0% { - opacity: 1; - transform: translateY(0); - } - - 100% { - opacity: 0.5; - transform: translateY(100%); - } -} - -.anim-grow-x { - width: 0%; - animation-name: grow-x; - animation-duration: 0.3s; - animation-fill-mode: forwards; - animation-timing-function: ease; - animation-delay: 0.5s; -} - -@keyframes grow-x { - to { width: 100%; } -} - -.anim-shrink-x { - animation-name: shrink-x; - animation-duration: 0.3s; - animation-fill-mode: forwards; - animation-timing-function: ease-in-out; - animation-delay: 0.5s; -} - -@keyframes shrink-x { - to { width: 0%; } -} - -.anim-scale-in { - animation-name: scale-in; - animation-duration: 0.15s; - animation-timing-function: cubic-bezier(0.2, 0, 0.13, 1.5); -} - -@keyframes scale-in { - 0% { - opacity: 0; - transform: scale(0.5); - } - - 100% { - opacity: 1; - transform: scale(1); - } -} - -.anim-pulse { - animation-name: pulse; - animation-duration: 2s; - animation-timing-function: linear; - animation-iteration-count: infinite; -} - -@keyframes pulse { - 0% { - opacity: 0.3; - } - - 10% { - opacity: 1; - } - - 100% { - opacity: 0.3; - } -} - - .anim-pulse-in { - animation-name: pulse-in; - animation-duration: 0.5s; -} - -@keyframes pulse-in { - 0% { - transform: scale3d(1, 1, 1); - } - - 50% { - transform: scale3d(1.1, 1.1, 1.1); - } - - 100% { - transform: scale3d(1, 1, 1); - } -} - -.hover-grow { - transition: transform 0.3s; - backface-visibility: hidden; - - &:hover { - transform: scale(1.025); - } -} diff --git a/src/styles/thorn/utilities/borders.scss b/src/styles/thorn/utilities/borders.scss deleted file mode 100644 index c90c278..0000000 --- a/src/styles/thorn/utilities/borders.scss +++ /dev/null @@ -1,196 +0,0 @@ -.border-x { - border-right: $border !important; - border-left: $border !important; -} - -.border-y { - border-top: $border !important; - border-bottom: $border !important; -} - -@each $breakpoint, $variant in $responsive-variants { - @include breakpoint($breakpoint){ - .border#{$variant} { - border: $border !important; - } - .border#{$variant}-0 { - border: 0 !important; - } - .border#{$variant}-top { - border-top: $border !important; - } - .border#{$variant}-bottom { - border-bottom: $border !important; - } - .border#{$variant}-right { - border-right: $border !important; - } - .border#{$variant}-left { - border-left: $border !important; - } - .border#{$variant}-top-0 { - border-top: 0 !important; - } - .border#{$variant}-bottom-0 { - border-bottom: 0 !important; - } - .border#{$variant}-right-0 { - border-right: 0 !important; - } - .border#{$variant}-left-0 { - border-left: 0 !important; - } - .rounded#{$variant}-0 { - border-radius: 0 !important; - } - .rounded#{$variant}-1 { - border-radius: $border-radius !important; - } - .rounded#{$variant}-2 { - border-radius: $border-radius * 2 !important; - } - - @each $edge, $corners in $edges { - .rounded#{$variant}-#{$edge}-0 { - @each $corner in $corners { - border-#{$corner}-radius: 0 !important; - } - } - .rounded#{$variant}-#{$edge}-1 { - @each $corner in $corners { - border-#{$corner}-radius: $border-radius !important; - } - } - .rounded#{$variant}-#{$edge}-2 { - @each $corner in $corners { - border-#{$corner}-radius: $border-radius * 2 !important; - } - } - } - } -} - -.circle { - border-radius: 50% !important; -} - -.border-dashed { - border-style: dashed !important; -} - -.border-green { border-color: $border-green !important; } -.border-green-light { border-color: $border-green-light !important; } -.border-red { border-color: $border-red !important; } -.border-red-light { border-color: $border-red-light !important; } -.border-blue { border-color: $border-blue !important; } -.border-blue-light { border-color: $border-blue-light !important; } -.border-purple { border-color: $border-purple !important; } -.border-purple-light { border-color: $border-purple-light !important; } -.border-pink { border-color: $border-pink !important; } -.border-pink-light { border-color: $border-pink-light !important; } -.border-orange { border-color: $border-orange !important; } -.border-orange-light { border-color: $border-orange-light !important; } -.border-yellow { border-color: $border-yellow !important; } -.border-yellow-light { border-color: $border-yellow-light !important; } -.border-gray { border-color: $border-gray !important; } -.border-gray-light { border-color: $border-gray-light !important; } -.border-gray-dark { border-color: $border-gray-dark !important; } -.border-gray-darker { border-color: $border-gray-darker !important; } -.border-black { border-color: $black !important; } -.border-white { border-color: $white !important; } - -.border-black-fade { border-color: $border-black-fade !important; } -.border-white-fade { border-color: $border-white-fade !important; } - -.border-white-fade-15 { border-color: $border-white-fade !important; } -.border-white-fade-30 { border-color: $white-fade-30 !important; } -.border-white-fade-50 { border-color: $white-fade-50 !important; } -.border-white-fade-70 { border-color: $white-fade-70 !important; } -.border-white-fade-85 { border-color: $white-fade-85 !important; } - -.border-hover { - &:hover{ - border-color: $border-gray; - } - &-green:hover{ - border-color: $border-green !important; - } - &-green-light:hover{ - border-color: $border-green-light !important; - } - &-red:hover{ - border-color: $border-red !important; - } - &-red-light:hover{ - border-color: $border-red-light !important; - } - &-blue:hover{ - border-color: $border-blue !important; - } - &-blue-light:hover{ - border-color: $border-blue-light !important; - } - &-purple:hover{ - border-color: $border-purple !important; - } - &-purple-light:hover{ - border-color: $border-purple-light !important; - } - &-pink:hover{ - border-color: $border-pink !important; - } - &-pink-light:hover{ - border-color: $border-pink-light !important; - } - &-orange:hover{ - border-color: $border-orange !important; - } - &-orange-light:hover{ - border-color: $border-orange-light !important; - } - &-yellow:hover{ - border-color: $border-yellow !important; - } - &-yellow-light:hover{ - border-color: $border-yellow-light !important; - } - &-gray:hover{ - border-color: $border-gray !important; - } - &-gray-light:hover{ - border-color: $border-gray-light !important; - } - &-gray-dark:hover{ - border-color: $border-gray-dark !important; - } - &-gray-darker:hover{ - border-color: $border-gray-darker !important; - } - &-black:hover{ - border-color: $black !important; - } - &-white:hover{ - border-color: $white !important; - } - &-black-fade:hover{ - border-color: $border-black-fade !important; - } - &-white-fade :hover{ - border-color: $border-white-fade !important; - } - &-white-fade-15:hover{ - border-color: $white-fade-15 !important; - } - &-white-fade-30:hover{ - border-color: $white-fade-30 !important; - } - &-white-fade-50:hover{ - border-color: $white-fade-50 !important; - } - &-white-fade-70:hover{ - border-color: $white-fade-70 !important; - } - &-white-fade-85:hover{ - border-color: $white-fade-85 !important; - } -} \ No newline at end of file diff --git a/src/styles/thorn/utilities/box-shadow.scss b/src/styles/thorn/utilities/box-shadow.scss deleted file mode 100644 index 7da86cd..0000000 --- a/src/styles/thorn/utilities/box-shadow.scss +++ /dev/null @@ -1,15 +0,0 @@ -.box-shadow { - box-shadow: $box-shadow !important; -} -.box-shadow-md { - box-shadow: $box-shadow-md !important; -} -.box-shadow-lg { - box-shadow: $box-shadow-lg !important; -} -.box-shadow-xl { - box-shadow: $box-shadow-xl !important; -} -.box-shadow-none { - box-shadow: none !important; -} \ No newline at end of file diff --git a/src/styles/thorn/utilities/colors.scss b/src/styles/thorn/utilities/colors.scss deleted file mode 100644 index e3a297b..0000000 --- a/src/styles/thorn/utilities/colors.scss +++ /dev/null @@ -1,78 +0,0 @@ -@each $hue, $shades in $hue-maps { - @each $index, $color in $shades { - .color-#{$hue}-#{$index} { color: $color !important; } - .bg-#{$hue}-#{$index} { background-color: $color !important; } - } -} - -.link-gray { - color: $text-gray !important; - - &:hover { - color: $text-blue !important; - } -} -.link-gray-dark { - color: $text-gray-dark !important; - - &:hover { - color: $text-blue !important; - } -} -.link-hover-blue { - &:hover { - color: $text-blue !important; - } -} -.muted-link { - color: $text-gray !important; - &:hover { - color: $text-blue !important; - text-decoration: none; - } -} - -.bg-white { background-color: $bg-white !important; } -.bg-darkwhite { background-color: $bg-darkwhite !important; } -.bg-black { background-color: $bg-black !important; } -.bg-black-fade { background-color: $bg-black-fade !important; } -.bg-gray-dark { background-color: $bg-gray-dark !important; } -.bg-gray-darker { background-color: $bg-gray-darker !important; } -.bg-gray-light { background-color: $bg-gray-light !important; } -.bg-gray { background-color: $bg-gray !important; } -.bg-red { background-color: $bg-red !important; } -.bg-red-light { background-color: $bg-red-light !important; } -.bg-green { background-color: $bg-green !important; } -.bg-green-light { background-color: $bg-green-light !important; } -.bg-blue { background-color: $bg-blue !important; } -.bg-blue-light { background-color: $bg-blue-light !important; } -.bg-yellow { background-color: $bg-yellow !important; } -.bg-yellow-light { background-color: $bg-yellow-light !important; } -.bg-orange { background-color: $bg-orange !important; } -.bg-orange-light { background-color: $bg-orange-light !important; } -.bg-purple { background-color: $bg-purple !important; } -.bg-purple-light { background-color: $bg-purple-light !important; } -.bg-pink { background-color: $bg-pink !important; } -.bg-pink-light { background-color: $bg-pink-light !important; } - -.text-white { color: $text-white !important; } -.text-darkwhite { color: $text-darkwhite !important; } -.text-black { color: $text-black !important; } -.text-gray-dark { color: $text-gray-dark !important; } -.text-gray-darker { color: $text-gray-darker !important; } -.text-gray-light { color: $text-gray-light !important; } -.text-gray { color: $text-gray !important; } -.text-red { color: $text-red !important; } -.text-red-light { color: $text-red-light !important; } -.text-green { color: $text-green !important; } -.text-green-light { color: $text-green-light !important; } -.text-blue { color: $text-blue !important; } -.text-blue-light { color: $text-blue-light !important; } -.text-yellow { color: $text-yellow !important; } -.text-yellow-light { color: $text-yellow-light !important; } -.text-orange { color: $text-orange !important; } -.text-orange-light { color: $text-orange-light !important; } -.text-purple { color: $text-purple !important; } -.text-purple-light { color: $text-purple-light !important; } -.text-pink { color: $text-pink !important; } -.text-pink-light { color: $text-pink-light !important; } \ No newline at end of file diff --git a/src/styles/thorn/utilities/details.scss b/src/styles/thorn/utilities/details.scss deleted file mode 100644 index 327b27b..0000000 --- a/src/styles/thorn/utilities/details.scss +++ /dev/null @@ -1,23 +0,0 @@ -.details-overlay[open] > summary::before { - position: fixed; - top: 0; - bottom: 0; - right: 0; - left: 0; - z-index: 80; - display: block; - cursor: default; - content: " "; - background: transparent; -} - -.details-overlay-dark[open] > summary::before { - z-index: 99; - background: $bg-black-fade; -} - -.details-fade { - > summary { list-style: none; } - > summary::before { display: none; } - > summary::-webkit-details-marker { display: none; } -} \ No newline at end of file diff --git a/src/styles/thorn/utilities/flexbox.scss b/src/styles/thorn/utilities/flexbox.scss deleted file mode 100644 index 73da311..0000000 --- a/src/styles/thorn/utilities/flexbox.scss +++ /dev/null @@ -1,117 +0,0 @@ -@each $breakpoint, $variant in $responsive-variants { - @include breakpoint($breakpoint) { - .flex#{$variant}-row { - flex-direction: row !important; - } - .flex#{$variant}-row-reverse { - flex-direction: row-reverse !important; - } - .flex#{$variant}-column { - flex-direction: column !important; - } - .flex#{$variant}-column-reverse { - flex-direction: column-reverse !important; - } - - .flex#{$variant}-wrap { - flex-wrap: wrap !important; - } - .flex#{$variant}-nowrap { - flex-wrap: nowrap !important; - } - - .flex#{$variant}-justify-start { - justify-content: flex-start !important; - } - .flex#{$variant}-justify-end { - justify-content: flex-end !important; - } - .flex#{$variant}-justify-center { - justify-content: center !important; - } - .flex#{$variant}-justify-between { - justify-content: space-between !important; - } - .flex#{$variant}-justify-around { - justify-content: space-around !important; - } - - .flex#{$variant}-items-start { - align-items: flex-start !important; - } - .flex#{$variant}-items-end { - align-items: flex-end !important; - } - .flex#{$variant}-items-center { - align-items: center !important; - } - .flex#{$variant}-items-baseline { - align-items: baseline !important; - } - .flex#{$variant}-items-stretch { - align-items: stretch !important; - } - - .flex#{$variant}-content-start { - align-content: flex-start !important; - } - .flex#{$variant}-content-end { - align-content: flex-end !important; - } - .flex#{$variant}-content-center { - align-content: center !important; - } - .flex#{$variant}-content-between { - align-content: space-between !important; - } - .flex#{$variant}-content-around { - align-content: space-around !important; - } - .flex#{$variant}-content-stretch { - align-content: stretch !important; - } - - .flex#{$variant}-1 { - flex: 1 !important; - } - .flex#{$variant}-auto { - flex: auto !important; - } - .flex#{$variant}-grow-0 { - flex-grow: 0 !important; - } - .flex#{$variant}-shrink-0 { - flex-shrink: 0 !important; - } - - .flex#{$variant}-self-auto { - align-self: auto !important; - } - .flex#{$variant}-self-start { - align-self: flex-start !important; - } - .flex#{$variant}-self-end { - align-self: flex-end !important; - } - .flex#{$variant}-self-center { - align-self: center !important; - } - .flex#{$variant}-self-baseline { - align-self: baseline !important; - } - .flex#{$variant}-self-stretch { - align-self: stretch !important; - } - - .flex#{$variant}-order-1 { - order: 1 !important; - } - .flex#{$variant}-order-2 { - order: 2 !important; - } - .flex#{$variant}-order-none { - order: inherit !important; - } - } -} - \ No newline at end of file diff --git a/src/styles/thorn/utilities/index.scss b/src/styles/thorn/utilities/index.scss deleted file mode 100644 index f036bdd..0000000 --- a/src/styles/thorn/utilities/index.scss +++ /dev/null @@ -1,14 +0,0 @@ -@import "../core/support/index.scss"; - -@import "./animations.scss"; -@import "./borders.scss"; -@import "./box-shadow.scss"; -@import "./colors.scss"; -@import "./details.scss"; -@import "./flexbox.scss"; -@import "./layout.scss"; -@import "./margin.scss"; -@import "./padding.scss"; -@import "./typography.scss"; - -@import "./visibility-display.scss"; diff --git a/src/styles/thorn/utilities/layout.scss b/src/styles/thorn/utilities/layout.scss deleted file mode 100644 index 3b81957..0000000 --- a/src/styles/thorn/utilities/layout.scss +++ /dev/null @@ -1,55 +0,0 @@ -@each $breakpoint, $variant in $responsive-variants { - @include breakpoint($breakpoint) { - @each $position in $responsive-positions { - .position#{$variant}-#{$position} { - position: $position !important; - } - } - } -} - -.top-0 { top: 0 !important; } -.right-0 { right: 0 !important; } -.bottom-0 { bottom: 0 !important; } -.left-0 { left: 0 !important; } - -.v-align-middle { vertical-align: middle !important; } -.v-align-top { vertical-align: top !important; } -.v-align-bottom { vertical-align: bottom !important; } -.v-align-text-top { vertical-align: text-top !important; } -.v-align-text-bottom { vertical-align: text-bottom !important; } -.v-align-baseline { vertical-align: baseline !important; } - -@each $overflow in (visible, hidden, auto, scroll) { - .overflow-#{$overflow} { overflow: $overflow !important; } - .overflow-x-#{$overflow} { overflow-x: $overflow !important; } - .overflow-y-#{$overflow} { overflow-y: $overflow !important; } -} - -.clearfix { - @include clearfix; -} - -@each $breakpoint, $variant in $responsive-variants { - @include breakpoint($breakpoint) { - .float#{$variant}-left { float: left !important; } - .float#{$variant}-right { float: right !important; } - .float#{$variant}-none { float: none !important; } - } -} - -.width-fit { max-width: 100% !important; } -.width-full { width: 100% !important; } -.height-fit { max-height: 100% !important; } -.height-full { height: 100% !important; } - -.min-width-0 { min-width: 0 !important; } - -@each $breakpoint, $variant in $responsive-variants { - @include breakpoint($breakpoint) { - .width#{$variant}-auto { width: auto !important; } - .direction#{$variant}-rtl { direction: rtl !important; } - .direction#{$variant}-ltr { direction: ltr !important; } - } -} - \ No newline at end of file diff --git a/src/styles/thorn/utilities/margin.scss b/src/styles/thorn/utilities/margin.scss deleted file mode 100644 index ea31cf5..0000000 --- a/src/styles/thorn/utilities/margin.scss +++ /dev/null @@ -1,51 +0,0 @@ -@each $breakpoint, $variant in $responsive-variants { - @include breakpoint($breakpoint) { - @each $scale, $size in $spacer-map { - .m#{$variant}-#{$scale} { - margin: $size !important; - } - .mt#{$variant}-#{$scale} { - margin-top: $size !important; - } - .mr#{$variant}-#{$scale} { - margin-right: $size !important; - } - .mb#{$variant}-#{$scale} { - margin-bottom: $size !important; - } - .ml#{$variant}-#{$scale} { - margin-left: $size !important; - } - - @if ($size != 0) { - .mt#{$variant}-n#{$scale} { - margin-top : -$size !important; - } - .mr#{$variant}-n#{$scale} { - margin-right : -$size !important; - } - .mb#{$variant}-n#{$scale} { - margin-bottom: -$size !important; - } - .ml#{$variant}-n#{$scale} { - margin-left : -$size !important; - } - } - - .mx#{$variant}-#{$scale} { - margin-right: $size !important; - margin-left: $size !important; - } - - .my#{$variant}-#{$scale} { - margin-top: $size !important; - margin-bottom: $size !important; - } - } - - .mx#{$variant}-auto { - margin-right: auto !important; - margin-left: auto !important; - } - } -} diff --git a/src/styles/thorn/utilities/padding.scss b/src/styles/thorn/utilities/padding.scss deleted file mode 100644 index 137fef5..0000000 --- a/src/styles/thorn/utilities/padding.scss +++ /dev/null @@ -1,45 +0,0 @@ -@each $breakpoint, $variant in $responsive-variants { - @include breakpoint($breakpoint) { - @each $scale, $size in $spacer-map { - .p#{$variant}-#{$scale} { - padding: $size !important; - } - .pt#{$variant}-#{$scale} { - padding-top: $size !important; - } - .pr#{$variant}-#{$scale} { - padding-right: $size !important; - } - .pb#{$variant}-#{$scale} { - padding-bottom: $size !important; - } - .pl#{$variant}-#{$scale} { - padding-left: $size !important; - } - .px#{$variant}-#{$scale} { - padding-right: $size !important; - padding-left: $size !important; - } - .py#{$variant}-#{$scale} { - padding-top: $size !important; - padding-bottom: $size !important; - } - } - } -} - -.p-responsive { - padding-right: $spacer-3 !important; - padding-left: $spacer-3 !important; - - @include breakpoint(sm) { - padding-right: $spacer-6 !important; - padding-left: $spacer-6 !important; - } - - @include breakpoint(lg) { - padding-right: $spacer-3 !important; - padding-left: $spacer-3 !important; - } -} - \ No newline at end of file diff --git a/src/styles/thorn/utilities/typography.scss b/src/styles/thorn/utilities/typography.scss deleted file mode 100644 index 0b8d009..0000000 --- a/src/styles/thorn/utilities/typography.scss +++ /dev/null @@ -1,270 +0,0 @@ -.h00 { - font-size: $h00-size-mobile !important; - - @include breakpoint(md) { - font-size: $h00-size !important; - } -} - -.h0 { - font-size: $h0-size-mobile !important; - - @include breakpoint(md) { - font-size: $h0-size !important; - } -} - -.h1 { - font-size: $h1-size-mobile !important; - - @include breakpoint(md) { - font-size: $h1-size !important; - } -} - -.h2 { - font-size: $h2-size-mobile !important; - - @include breakpoint(md) { - font-size: $h2-size !important; - } -} - -.h3 { - font-size: $h3-size-mobile !important; - - @include breakpoint(md) { - font-size: $h3-size !important; - } -} - -.h4 { - font-size: $h4-size !important; -} - -.h5 { - font-size: $h5-size !important; -} - -.h6 { - font-size: $h6-size !important; -} - -.h00, -.h0, -.h1, -.h2, -.h3, -.h4, -.h5, -.h6 { - font-weight: $font-weight-bold !important; -} - - -.f00 { - font-size: $h00-size-mobile !important; - - @include breakpoint(md) { - font-size: $h00-size !important; - } -} - -.f0 { - font-size: $h0-size-mobile !important; - - @include breakpoint(md) { - font-size: $h0-size !important; - } -} - -.f1 { - font-size: $h1-size-mobile !important; - - @include breakpoint(md) { - font-size: $h1-size !important; - } -} - -.f2 { - font-size: $h2-size-mobile !important; - - @include breakpoint(md) { - font-size: $h2-size !important; - } -} - -.f3 { - font-size: $h3-size-mobile !important; - - @include breakpoint(md) { - font-size: $h3-size !important; - } -} - -.f4 { - font-size: $h4-size !important; - - @include breakpoint(md) { - font-size: $h4-size !important; - } -} - -.f5 { - font-size: $h5-size !important; -} -.f6 { - font-size: $h6-size !important; -} - -.f00-light { - font-size: $h00-size-mobile !important; - font-weight: $font-weight-light !important; - - @include breakpoint(md) { - font-size: $h00-size !important; - } -} - -.f0-light { - font-size: $h0-size-mobile !important; - font-weight: $font-weight-light !important; - - @include breakpoint(md) { - font-size: $h0-size !important; - } -} - -.f1-light { - font-size: $h1-size-mobile !important; - font-weight: $font-weight-light !important; - - @include breakpoint(md) { - font-size: $h1-size !important; - } -} - - .f2-light { - font-size: $h2-size-mobile !important; - font-weight: $font-weight-light !important; - - @include breakpoint(md) { - font-size: $h2-size !important; - } -} - -.f3-light { - font-size: $h3-size-mobile !important; - font-weight: $font-weight-light !important; - - @include breakpoint(md) { - font-size: $h3-size !important; - } -} - -@each $scale, $size in $text-size-map { - .text-size-#{$scale}{ - font-size: map-get($text-size-mobile-map, $scale) !important; - - @include breakpoint(md) { - font-size: $size !important; - } - } -} - -.lead { - margin-bottom: 30px; - font-size: $h3-size; - font-weight: $font-weight-light; - color: $text-gray; -} - -@each $breakpoint, $variant in $responsive-variants { - @include breakpoint($breakpoint) { - .lh#{$variant}-condensed-ultra { - line-height: $lh-condensed-ultra !important; - } - .lh#{$variant}-condensed { - line-height: $lh-condensed !important; - } - .lh#{$variant}-default { - line-height: $lh-default !important; - } - .lh#{$variant}-0 { - line-height: 0 !important; - } - } -} - -@each $breakpoint, $variant in $responsive-variants { - @include breakpoint($breakpoint) { - .text#{$variant}-right { - text-align: right !important; - } - .text#{$variant}-left { - text-align: left !important; - } - .text#{$variant}-center { - text-align: center !important; - } - } -} - -.text-normal { - font-weight: $font-weight-normal !important; -} -.text-bold { - font-weight: $font-weight-bold !important; -} -.text-italic { - font-style: italic !important; -} -.text-uppercase { - text-transform: uppercase !important; -} -.text-underline { - text-decoration: underline !important; -} -.no-underline { - text-decoration: none !important; -} -.no-wrap { - white-space: nowrap !important; -} -.ws-normal { - white-space: normal !important; -} - -.break-word { - word-break: break-word !important; - word-wrap: break-word !important; - overflow-wrap: break-word !important; -} - -.wb-break-all { - word-break: break-all !important; -} - -.text-emphasized { - font-weight: $font-weight-bold; - color: $text-gray-dark; -} - -.list-style-none { - list-style: none !important; -} - -.text-shadow-dark { - text-shadow: 0 1px 1px rgba($black, 0.25), 0 1px 25px rgba($black, 0.75); -} -.text-shadow-light { - text-shadow: 0 1px 0 rgba($white, 0.5); -} - -.text-mono { - font-family: $mono-font !important; -} - -.user-select-none { - user-select: none !important; -} diff --git a/src/styles/thorn/utilities/visibility-display.scss b/src/styles/thorn/utilities/visibility-display.scss deleted file mode 100644 index 2e908f8..0000000 --- a/src/styles/thorn/utilities/visibility-display.scss +++ /dev/null @@ -1,63 +0,0 @@ -@each $breakpoint, $variant in $responsive-variants { - @include breakpoint($breakpoint) { - @each $display in $display-values { - .d#{$variant}-#{$display} { display: $display !important; } - } - } -} - -.v-hidden { visibility: hidden !important; } -.v-visible { visibility: visible !important; } - -@media (max-width: $width-sm - 1px) { - .hide-sm { - display: none !important; - } -} - -@media (min-width: $width-sm) and (max-width: $width-md - 1px) { - .hide-md { - display: none !important; - } -} - -@media (min-width: $width-md) and (max-width: $width-lg - 1px) { - .hide-lg { - display: none !important; - } -} - -@media (min-width: $width-lg) { - .hide-xl { - display: none !important; - } -} - -.table-fixed { table-layout: fixed !important; } - -.sr-only { - position: absolute; - width: 1px; - height: 1px; - padding: 0; - overflow: hidden; - clip: rect(0, 0, 0, 0); - word-wrap: normal; - border: 0; -} - -.show-on-focus { - position: absolute; - width: 1px; - height: 1px; - margin: 0; - overflow: hidden; - clip: rect(1px, 1px, 1px, 1px); - - &:focus { - z-index: 20; - width: auto; - height: auto; - clip: auto; - } -}