mirror of
https://github.com/FJurmanovic/wallet-web.git
synced 2026-02-06 06:08:10 +00:00
implemented styles
This commit is contained in:
Fran Jurmanović
3
src/styles/main.scss
Normal file
3
src/styles/main.scss
Normal file
@@ -0,0 +1,3 @@
|
||||
@import "./thorn/index.scss";
|
||||
@import "./sidebar/index.scss";
|
||||
@import "./modal/index.scss";
|
||||
1
src/styles/modal/index.scss
Normal file
1
src/styles/modal/index.scss
Normal file
@@ -0,0 +1 @@
|
||||
@import "./modal.scss";
|
||||
24
src/styles/modal/modal.scss
Normal file
24
src/styles/modal/modal.scss
Normal file
@@ -0,0 +1,24 @@
|
||||
app-modal {
|
||||
[data-target="app-modal.modalOverlay"] {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 1001;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
overflow-x: auto;
|
||||
overflow-y: auto;
|
||||
|
||||
[data-target="app-modal.modalContent"] {
|
||||
z-index: 1005;
|
||||
top: 5%;
|
||||
width: 1080px;
|
||||
padding-bottom: 10px;
|
||||
margin: 25px auto;
|
||||
background: #ffffff;
|
||||
box-shadow: 1px 1px 5px -5px #868686;
|
||||
border-radius: 0.5em;
|
||||
}
|
||||
}
|
||||
}
|
||||
1
src/styles/sidebar/index.scss
Normal file
1
src/styles/sidebar/index.scss
Normal file
@@ -0,0 +1 @@
|
||||
@import "./sidebar.scss";
|
||||
20
src/styles/sidebar/sidebar.scss
Normal file
20
src/styles/sidebar/sidebar.scss
Normal file
@@ -0,0 +1,20 @@
|
||||
app-menu {
|
||||
[data-target="app-menu.sidebar"] {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 200px;
|
||||
background-color: #f1f1f1;
|
||||
position: fixed;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
app-slot {
|
||||
[data-target="base-layout.content"] {
|
||||
margin-left: 200px;
|
||||
padding: 1px 16px;
|
||||
}
|
||||
}
|
||||
106
src/styles/thorn/button/button-groups.scss
Normal file
106
src/styles/thorn/button/button-groups.scss
Normal file
@@ -0,0 +1,106 @@
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
209
src/styles/thorn/button/buttons.scss
Normal file
209
src/styles/thorn/button/buttons.scss
Normal file
@@ -0,0 +1,209 @@
|
||||
.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;
|
||||
}
|
||||
}
|
||||
286
src/styles/thorn/button/dropdown.scss
Normal file
286
src/styles/thorn/button/dropdown.scss
Normal file
@@ -0,0 +1,286 @@
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
3
src/styles/thorn/button/index.scss
Normal file
3
src/styles/thorn/button/index.scss
Normal file
@@ -0,0 +1,3 @@
|
||||
@import "./buttons.scss";
|
||||
@import "./button-groups.scss";
|
||||
@import "./dropdown.scss";
|
||||
44
src/styles/thorn/card/cards.scss
Normal file
44
src/styles/thorn/card/cards.scss
Normal file
@@ -0,0 +1,44 @@
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
3
src/styles/thorn/card/index.scss
Normal file
3
src/styles/thorn/card/index.scss
Normal file
@@ -0,0 +1,3 @@
|
||||
@import "../core/support/index.scss";
|
||||
|
||||
@import "./cards.scss";
|
||||
70
src/styles/thorn/core/default/elements.scss
Normal file
70
src/styles/thorn/core/default/elements.scss
Normal file
@@ -0,0 +1,70 @@
|
||||
* { // 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;
|
||||
}
|
||||
|
||||
5
src/styles/thorn/core/default/index.scss
Normal file
5
src/styles/thorn/core/default/index.scss
Normal file
@@ -0,0 +1,5 @@
|
||||
@import "../support/index.scss";
|
||||
|
||||
@import "./normalize.scss";
|
||||
@import "./elements.scss";
|
||||
@import "./typography.scss";
|
||||
349
src/styles/thorn/core/default/normalize.scss
vendored
Normal file
349
src/styles/thorn/core/default/normalize.scss
vendored
Normal file
@@ -0,0 +1,349 @@
|
||||
/*! 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;
|
||||
}
|
||||
74
src/styles/thorn/core/default/typography.scss
Normal file
74
src/styles/thorn/core/default/typography.scss
Normal file
@@ -0,0 +1,74 @@
|
||||
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;
|
||||
}
|
||||
3
src/styles/thorn/core/index.scss
Normal file
3
src/styles/thorn/core/index.scss
Normal file
@@ -0,0 +1,3 @@
|
||||
@import "./support/index.scss";
|
||||
|
||||
@import "./default/index.scss";
|
||||
2
src/styles/thorn/core/support/index.scss
Normal file
2
src/styles/thorn/core/support/index.scss
Normal file
@@ -0,0 +1,2 @@
|
||||
@import "./variables/index.scss";
|
||||
@import "./mixins/index.scss";
|
||||
2
src/styles/thorn/core/support/mixins/index.scss
Normal file
2
src/styles/thorn/core/support/mixins/index.scss
Normal file
@@ -0,0 +1,2 @@
|
||||
@import "./layout.scss";
|
||||
@import "./typography.scss";
|
||||
49
src/styles/thorn/core/support/mixins/layout.scss
Normal file
49
src/styles/thorn/core/support/mixins/layout.scss
Normal file
@@ -0,0 +1,49 @@
|
||||
@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: "";
|
||||
}
|
||||
}
|
||||
|
||||
71
src/styles/thorn/core/support/mixins/typography.scss
Normal file
71
src/styles/thorn/core/support/mixins/typography.scss
Normal file
@@ -0,0 +1,71 @@
|
||||
@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;
|
||||
}
|
||||
349
src/styles/thorn/core/support/variables/colors.scss
Normal file
349
src/styles/thorn/core/support/variables/colors.scss
Normal file
@@ -0,0 +1,349 @@
|
||||
$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;
|
||||
3
src/styles/thorn/core/support/variables/index.scss
Normal file
3
src/styles/thorn/core/support/variables/index.scss
Normal file
@@ -0,0 +1,3 @@
|
||||
@import "./colors.scss";
|
||||
@import "./layout.scss";
|
||||
@import "./typography.scss";
|
||||
164
src/styles/thorn/core/support/variables/layout.scss
Normal file
164
src/styles/thorn/core/support/variables/layout.scss
Normal file
@@ -0,0 +1,164 @@
|
||||
//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;
|
||||
85
src/styles/thorn/core/support/variables/typography.scss
Normal file
85
src/styles/thorn/core/support/variables/typography.scss
Normal file
@@ -0,0 +1,85 @@
|
||||
// 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;
|
||||
9
src/styles/thorn/index.scss
Normal file
9
src/styles/thorn/index.scss
Normal file
@@ -0,0 +1,9 @@
|
||||
//@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';
|
||||
3
src/styles/thorn/labels/index.scss
Normal file
3
src/styles/thorn/labels/index.scss
Normal file
@@ -0,0 +1,3 @@
|
||||
@import "../core/support/index.scss";
|
||||
|
||||
@import "./labels.scss";
|
||||
75
src/styles/thorn/labels/labels.scss
Normal file
75
src/styles/thorn/labels/labels.scss
Normal file
@@ -0,0 +1,75 @@
|
||||
.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;
|
||||
}
|
||||
}
|
||||
35
src/styles/thorn/layout/container.scss
Normal file
35
src/styles/thorn/layout/container.scss
Normal file
@@ -0,0 +1,35 @@
|
||||
.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;
|
||||
}
|
||||
15
src/styles/thorn/layout/grid-offset.scss
Normal file
15
src/styles/thorn/layout/grid-offset.scss
Normal file
@@ -0,0 +1,15 @@
|
||||
@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; }
|
||||
}
|
||||
}
|
||||
59
src/styles/thorn/layout/grid.scss
Normal file
59
src/styles/thorn/layout/grid.scss
Normal file
@@ -0,0 +1,59 @@
|
||||
.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); }
|
||||
}
|
||||
}
|
||||
149
src/styles/thorn/layout/header.scss
Normal file
149
src/styles/thorn/layout/header.scss
Normal file
@@ -0,0 +1,149 @@
|
||||
.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;
|
||||
}
|
||||
}
|
||||
6
src/styles/thorn/layout/index.scss
Normal file
6
src/styles/thorn/layout/index.scss
Normal file
@@ -0,0 +1,6 @@
|
||||
@import "../core/support/index.scss";
|
||||
|
||||
@import "./container.scss";
|
||||
@import "./grid.scss";
|
||||
@import "./grid-offset.scss";
|
||||
@import "./header.scss";
|
||||
171
src/styles/thorn/utilities/animations.scss
Normal file
171
src/styles/thorn/utilities/animations.scss
Normal file
@@ -0,0 +1,171 @@
|
||||
.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);
|
||||
}
|
||||
}
|
||||
196
src/styles/thorn/utilities/borders.scss
Normal file
196
src/styles/thorn/utilities/borders.scss
Normal file
@@ -0,0 +1,196 @@
|
||||
.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;
|
||||
}
|
||||
}
|
||||
15
src/styles/thorn/utilities/box-shadow.scss
Normal file
15
src/styles/thorn/utilities/box-shadow.scss
Normal file
@@ -0,0 +1,15 @@
|
||||
.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;
|
||||
}
|
||||
78
src/styles/thorn/utilities/colors.scss
Normal file
78
src/styles/thorn/utilities/colors.scss
Normal file
@@ -0,0 +1,78 @@
|
||||
@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; }
|
||||
23
src/styles/thorn/utilities/details.scss
Normal file
23
src/styles/thorn/utilities/details.scss
Normal file
@@ -0,0 +1,23 @@
|
||||
.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; }
|
||||
}
|
||||
117
src/styles/thorn/utilities/flexbox.scss
Normal file
117
src/styles/thorn/utilities/flexbox.scss
Normal file
@@ -0,0 +1,117 @@
|
||||
@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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
14
src/styles/thorn/utilities/index.scss
Normal file
14
src/styles/thorn/utilities/index.scss
Normal file
@@ -0,0 +1,14 @@
|
||||
@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";
|
||||
55
src/styles/thorn/utilities/layout.scss
Normal file
55
src/styles/thorn/utilities/layout.scss
Normal file
@@ -0,0 +1,55 @@
|
||||
@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; }
|
||||
}
|
||||
}
|
||||
|
||||
51
src/styles/thorn/utilities/margin.scss
Normal file
51
src/styles/thorn/utilities/margin.scss
Normal file
@@ -0,0 +1,51 @@
|
||||
@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;
|
||||
}
|
||||
}
|
||||
}
|
||||
45
src/styles/thorn/utilities/padding.scss
Normal file
45
src/styles/thorn/utilities/padding.scss
Normal file
@@ -0,0 +1,45 @@
|
||||
@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;
|
||||
}
|
||||
}
|
||||
|
||||
270
src/styles/thorn/utilities/typography.scss
Normal file
270
src/styles/thorn/utilities/typography.scss
Normal file
@@ -0,0 +1,270 @@
|
||||
.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;
|
||||
}
|
||||
63
src/styles/thorn/utilities/visibility-display.scss
Normal file
63
src/styles/thorn/utilities/visibility-display.scss
Normal file
@@ -0,0 +1,63 @@
|
||||
@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;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user