Summary Files Commits Branches @commit @diff @stats
path: root / src
diff options
context:
space:
mode:
16 files changed, 754 insertions, 705 deletions
-rw-r--r--src/_accordions.scss1
-rw-r--r--src/_avatars.scss2
-rw-r--r--src/_buttons.scss6
-rw-r--r--src/_empty.scss2
-rw-r--r--src/_filters.scss34
-rw-r--r--src/_forms.scss38
-rw-r--r--src/_icons.scss659
-rw-r--r--src/_labels.scss4
-rw-r--r--src/_modals.scss20
-rw-r--r--src/_tooltips.scss2
-rw-r--r--src/_variables.scss14
-rw-r--r--src/icons/_icons-action.scss316
-rw-r--r--src/icons/_icons-core.scss47
-rw-r--r--src/icons/_icons-navigation.scss133
-rw-r--r--src/icons/_icons-object.scss176
-rw-r--r--src/spectre-icons.scss5
diff --git a/src/_accordions.scss b/src/_accordions.scss
index 47b6c6b..4c69686 100644
--- a/src/_accordions.scss
+++ b/src/_accordions.scss
@@ -30,6 +30,7 @@
}
}
+// Remove default details marker in Webkit
summary.accordion-header {
&::-webkit-details-marker {
display: none;
diff --git a/src/_avatars.scss b/src/_avatars.scss
index 53bda1d..5eb23f8 100644
--- a/src/_avatars.scss
+++ b/src/_avatars.scss
@@ -6,7 +6,7 @@
color: rgba($light-color, .85);
display: inline-block;
font-weight: 300;
- line-height: 1;
+ line-height: 1.25;
margin: 0;
position: relative;
vertical-align: middle;
diff --git a/src/_buttons.scss b/src/_buttons.scss
index 1860ed8..c4dc0a6 100644
--- a/src/_buttons.scss
+++ b/src/_buttons.scss
@@ -12,7 +12,7 @@
height: $control-size;
line-height: $line-height;
outline: none;
- padding: $control-padding-v $control-padding-h;
+ padding: $control-padding-y $control-padding-x;
text-align: center;
text-decoration: none;
user-select: none;
@@ -90,13 +90,13 @@
&.btn-sm {
font-size: $font-size-sm;
height: $control-size-sm;
- padding: $control-padding-v-sm $control-padding-h * .75;
+ padding: $control-padding-y-sm $control-padding-x-sm;
}
&.btn-lg {
font-size: $font-size-lg;
height: $control-size-lg;
- padding: $control-padding-v-lg $control-padding-h * 1.25;
+ padding: $control-padding-y-lg $control-padding-x-lg;
}
// Button Block
diff --git a/src/_empty.scss b/src/_empty.scss
index 29cddac..accba9c 100644
--- a/src/_empty.scss
+++ b/src/_empty.scss
@@ -4,7 +4,7 @@
border-radius: $border-radius;
color: $gray-color-dark;
text-align: center;
- padding: 4 * $layout-spacing;
+ padding: $unit-16 $unit-8;
.empty-icon {
margin-bottom: $layout-spacing-lg;
diff --git a/src/_filters.scss b/src/_filters.scss
index 965dfa3..37ccc89 100644
--- a/src/_filters.scss
+++ b/src/_filters.scss
@@ -1,4 +1,16 @@
-// Filters
+// Filters
+// The number of filter options
+$filter-number: 8 !default;
+
+%filter-checked-nav {
+ background: $primary-color;
+ color: $light-color;
+}
+
+%filter-checked-body {
+ display: none;
+}
+
.filter {
.filter-nav {
margin: $layout-spacing 0;
@@ -10,20 +22,16 @@
}
.filter-tag {
- &#tag-all:checked ~ .filter-nav .chip[for="tag-all"],
- &#tag-action:checked ~ .filter-nav .chip[for="tag-action"],
- &#tag-roleplaying:checked ~ .filter-nav .chip[for="tag-roleplaying"],
- &#tag-shooter:checked ~ .filter-nav .chip[for="tag-shooter"],
- &#tag-sports:checked ~ .filter-nav .chip[for="tag-sports"] {
- background: $primary-color;
- color: $light-color;
+ @for $i from 0 through ($filter-number) {
+ &#tag-#{$i}:checked ~ .filter-nav .chip[for="tag-#{$i}"] {
+ @extend %filter-checked-nav;
+ }
}
- &#tag-action:checked ~ .filter-body .column:not([data-tag~="tag-action"]),
- &#tag-roleplaying:checked ~ .filter-body .column:not([data-tag~="tag-roleplaying"]),
- &#tag-shooter:checked ~ .filter-body .column:not([data-tag~="tag-shooter"]),
- &#tag-sports:checked ~ .filter-body .column:not([data-tag~="tag-sports"]) {
- display: none;
+ @for $i from 1 through ($filter-number) {
+ &#tag-#{$i}:checked ~ .filter-body .filter-item:not([data-tag~="tag-#{$i}"]) {
+ @extend %filter-checked-body;
+ }
}
}
}
diff --git a/src/_forms.scss b/src/_forms.scss
index c23841e..3fa2c87 100644
--- a/src/_forms.scss
+++ b/src/_forms.scss
@@ -18,14 +18,14 @@ legend {
// Form element: Label
.form-label {
display: block;
- padding: $control-padding-v + $border-width 0;
+ padding: $control-padding-y + $border-width 0;
&.label-sm {
- padding: $control-padding-v-sm + $border-width 0;
+ padding: $control-padding-y-sm + $border-width 0;
}
&.label-lg {
- padding: $control-padding-v-lg + $border-width 0;
+ padding: $control-padding-y-lg + $border-width 0;
}
}
@@ -44,7 +44,7 @@ legend {
line-height: $line-height;
max-width: 100%;
outline: none;
- padding: $control-padding-v $control-padding-h;
+ padding: $control-padding-y $control-padding-x;
position: relative;
width: 100%;
&:focus {
@@ -59,13 +59,13 @@ legend {
&.input-sm {
font-size: $font-size-sm;
height: $control-size-sm;
- padding: $control-padding-v-sm $control-padding-h;
+ padding: $control-padding-y-sm $control-padding-x-sm;
}
&.input-lg {
font-size: $font-size-lg;
height: $control-size-lg;
- padding: $control-padding-v-lg $control-padding-h;
+ padding: $control-padding-y-lg $control-padding-x-lg;
}
&.input-inline {
@@ -112,7 +112,7 @@ textarea.form-input {
height: $control-size;
line-height: $line-height;
outline: none;
- padding: $control-padding-v $control-padding-h;
+ padding: $control-padding-y $control-padding-x;
vertical-align: middle;
width: 100%;
@@ -125,8 +125,8 @@ textarea.form-input {
}
}
&:not([multiple]):not([size]) {
- background: $bg-color-light url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23667189' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E") no-repeat right ($control-icon-size / 2) center / .4rem .5rem;
- padding-right: $control-icon-size + $control-padding-h;
+ background: #fff url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%204%205'%3E%3Cpath%20fill='%23667189'%20d='M2%200L0%202h4zm0%205L0%203h4z'/%3E%3C/svg%3E") no-repeat right .35rem center/.4rem .5rem;
+ padding-right: $control-icon-size + $control-padding-x;
}
&:focus {
@include control-shadow();
@@ -140,13 +140,13 @@ textarea.form-input {
&.select-sm {
font-size: $font-size-sm;
height: $control-size-sm;
- padding: $control-padding-v-sm ($control-icon-size + $control-padding-h) $control-padding-v-sm $control-padding-h;
+ padding: $control-padding-y-sm ($control-icon-size + $control-padding-x-sm) $control-padding-y-sm $control-padding-x-sm;
}
&.select-lg {
font-size: $font-size-lg;
height: $control-size-lg;
- padding: $control-padding-v-lg ($control-icon-size + $control-padding-h) $control-padding-v-lg $control-padding-h;
+ padding: $control-padding-y-lg ($control-icon-size + $control-padding-x-lg) $control-padding-y-lg $control-padding-x-lg;
}
}
@@ -157,7 +157,7 @@ textarea.form-input {
.form-icon {
height: $control-icon-size;
- margin: 0 $control-padding-v;
+ margin: 0 $control-padding-y;
position: absolute;
top: 50%;
transform: translateY(-50%);
@@ -171,7 +171,7 @@ textarea.form-input {
}
.form-input {
- padding-left: $control-icon-size + $control-padding-v * 2;
+ padding-left: $control-icon-size + $control-padding-y * 2;
}
}
@@ -181,7 +181,7 @@ textarea.form-input {
}
.form-input {
- padding-right: $control-icon-size + $control-padding-v * 2;
+ padding-right: $control-icon-size + $control-padding-y * 2;
}
}
@@ -191,7 +191,7 @@ textarea.form-input {
.form-switch {
display: inline-block;
line-height: $line-height;
- padding: (($control-size-sm - $line-height) / 2) ($control-icon-size + $control-padding-h);
+ padding: (($control-size-sm - $line-height) / 2) ($control-icon-size + $control-padding-x);
position: relative;
input {
@@ -301,7 +301,7 @@ textarea.form-input {
// Form element: Switch
.form-switch {
- padding-left: ($unit-8 + $control-padding-h);
+ padding-left: ($unit-8 + $control-padding-x);
.form-icon {
background: $gray-color-light;
@@ -348,15 +348,15 @@ textarea.form-input {
border: $border-width solid $border-color-dark;
border-radius: $border-radius;
line-height: $line-height;
- padding: $control-padding-v $control-padding-h;
+ padding: $control-padding-y $control-padding-x;
&.addon-sm {
font-size: $font-size-sm;
- padding: $control-padding-v-sm $control-padding-h;
+ padding: $control-padding-y-sm $control-padding-x-sm;
}
&.addon-lg {
font-size: $font-size-lg;
- padding: $control-padding-v-lg $control-padding-h;
+ padding: $control-padding-y-lg $control-padding-x-lg;
}
}
diff --git a/src/_icons.scss b/src/_icons.scss
index ad092b8..4f3c5ce 100644
--- a/src/_icons.scss
+++ b/src/_icons.scss
@@ -1,656 +1,5 @@
// CSS Icons
-$icon-border-width: $border-width-lg;
-
-.icon {
- box-sizing: border-box;
- display: inline-block;
- font-size: inherit;
- font-style: normal;
- height: 1em;
- position: relative;
- text-indent: -9999px;
- vertical-align: middle;
- width: 1em;
- &::before,
- &::after {
- display: block;
- left: 50%;
- position: absolute;
- top: 50%;
- transform: translate(-50%, -50%);
- }
-}
-
-// Icon arrows
-.icon-arrow-down,
-.icon-arrow-left,
-.icon-arrow-right,
-.icon-arrow-up,
-.icon-downward,
-.icon-back,
-.icon-forward,
-.icon-upward {
- &::before {
- border: $icon-border-width solid currentColor;
- border-bottom: 0;
- border-right: 0;
- content: "";
- height: .65em;
- width: .65em;
- }
-}
-
-.icon-arrow-down {
- &::before {
- transform: translate(-50%, -75%) rotate(225deg);
- }
-}
-
-.icon-arrow-left {
- &::before {
- transform: translate(-25%, -50%) rotate(-45deg);
- }
-}
-
-.icon-arrow-right {
- &::before {
- transform: translate(-75%, -50%) rotate(135deg);
- }
-}
-
-.icon-arrow-up {
- &::before {
- transform: translate(-50%, -25%) rotate(45deg);
- }
-}
-
-.icon-back,
-.icon-forward {
- &::after {
- background: currentColor;
- content: "";
- height: $icon-border-width;
- width: .8em;
- }
-}
-
-.icon-downward,
-.icon-upward {
- &::after {
- background: currentColor;
- content: "";
- height: .8em;
- width: $icon-border-width;
- }
-}
-
-.icon-back {
- &::after {
- left: 55%;
- }
- &::before {
- transform: translate(-50%, -50%) rotate(-45deg);
- }
-}
-
-.icon-downward {
- &::after {
- top: 45%;
- }
- &::before {
- transform: translate(-50%, -50%) rotate(-135deg);
- }
-}
-
-.icon-forward {
- &::after {
- left: 45%;
- }
- &::before {
- transform: translate(-50%, -50%) rotate(135deg);
- }
-}
-
-.icon-upward {
- &::after {
- top: 55%;
- }
- &::before {
- transform: translate(-50%, -50%) rotate(45deg);
- }
-}
-
-// Icon caret
-.icon-caret {
- &::before {
- border-top: .3em solid currentColor;
- border-right: .3em solid transparent;
- border-left: .3em solid transparent;
- content: "";
- height: 0;
- width: 0;
- transform: translate(-50%, -25%);
- }
-}
-
-// Icon menu
-.icon-menu {
- &::before {
- background: currentColor;
- box-shadow: 0 -.35em, 0 .35em;
- content: "";
- height: $icon-border-width;
- width: 100%;
- }
-}
-
-// Icon apps
-.icon-apps {
- &::before {
- background: currentColor;
- box-shadow: -.35em -.35em, -.35em 0, -.35em .35em, 0 -.35em, 0 .35em, .35em -.35em, .35em 0, .35em .35em;
- content: "";
- height: 3px;
- width: 3px;
- }
-}
-
-// Icon resize
-.icon-resize-horiz,
-.icon-resize-vert {
- &::before,
- &::after {
- border: $icon-border-width solid currentColor;
- border-bottom: 0;
- border-right: 0;
- content: "";
- height: .45em;
- width: .45em;
- }
- &::before {
- transform: translate(-50%, -90%) rotate(45deg);
- }
- &::after {
- transform: translate(-50%, -10%) rotate(225deg);
- }
-}
-
-.icon-resize-horiz {
- &::before {
- transform: translate(-90%, -50%) rotate(-45deg);
- }
- &::after {
- transform: translate(-10%, -50%) rotate(135deg);
- }
-}
-
-// Icon more
-.icon-more-horiz,
-.icon-more-vert {
- &::before {
- background: currentColor;
- box-shadow: -.4em 0, .4em 0;
- border-radius: 50%;
- content: "";
- height: 3px;
- width: 3px;
- }
-}
-.icon-more-vert {
- &::before {
- box-shadow: 0 -.4em, 0 .4em;
- }
-}
-
-// Icon plus, minus, cross
-.icon-plus,
-.icon-minus,
-.icon-cross {
- &::before {
- background: currentColor;
- content: "";
- height: $icon-border-width;
- width: 100%;
- }
-}
-.icon-plus,
-.icon-cross {
- &::after {
- background: currentColor;
- content: "";
- height: 100%;
- width: $icon-border-width;
- }
-}
-.icon-cross {
- &::before {
- width: 100%;
- }
- &::after {
- height: 100%;
- }
- &::before,
- &::after {
- transform: translate(-50%, -50%) rotate(45deg);
- }
-}
-
-// Icon check
-.icon-check {
- &::before {
- border: $icon-border-width solid currentColor;
- border-right: 0;
- border-top: 0;
- content: "";
- height: .5em;
- width: .9em;
- transform: translate(-50%, -75%) rotate(-45deg);
- }
-}
-
-// Icon stop
-.icon-stop {
- border: $icon-border-width solid currentColor;
- border-radius: 50%;
- &::before {
- background: currentColor;
- content: "";
- height: $icon-border-width;
- transform: translate(-50%, -50%) rotate(45deg);
- width: 1em;
- }
-}
-
-// Icon shutdown
-.icon-shutdown {
- border: $icon-border-width solid currentColor;
- border-radius: 50%;
- border-top-color: transparent;
- &::before {
- background: currentColor;
- content: "";
- height: .5em;
- top: .1em;
- width: $icon-border-width;
- }
-}
-
-// Icon refresh
-.icon-refresh {
- &::before {
- border: $icon-border-width solid currentColor;
- border-radius: 50%;
- border-right-color: transparent;
- content: "";
- height: 1em;
- width: 1em;
- }
- &::after {
- border: .2em solid currentColor;
- border-top-color: transparent;
- border-left-color: transparent;
- content: "";
- height: 0;
- left: 80%;
- top: 20%;
- width: 0;
- }
-}
-
-// Icon search
-.icon-search {
- &::before {
- border: $icon-border-width solid currentColor;
- border-radius: 50%;
- content: "";
- height: .75em;
- left: 5%;
- top: 5%;
- transform: translate(0, 0) rotate(45deg);
- width: .75em;
- }
- &::after {
- background: currentColor;
- content: "";
- height: $icon-border-width;
- left: 80%;
- top: 80%;
- transform: translate(-50%, -50%) rotate(45deg);
- width: .4em;
- }
-}
-
-// Icon edit
-.icon-edit {
- &::before {
- border: $icon-border-width solid currentColor;
- content: "";
- height: .4em;
- transform: translate(-40%, -60%) rotate(-45deg);
- width: .85em;
- }
- &::after {
- border: .15em solid currentColor;
- border-top-color: transparent;
- border-right-color: transparent;
- content: "";
- height: 0;
- left: 5%;
- top: 95%;
- transform: translate(0, -100%);
- width: 0;
- }
-}
-
-// Icon delete
-.icon-delete {
- &::before {
- border: $icon-border-width solid currentColor;
- border-bottom-left-radius: $border-radius;
- border-bottom-right-radius: $border-radius;
- border-top: 0;
- content: "";
- height: .75em;
- top: 60%;
- width: .75em;
- }
- &::after {
- background: currentColor;
- box-shadow: -.25em .2em, .25em .2em;
- content: "";
- height: $icon-border-width;
- top: $icon-border-width/2;
- width: .5em;
- }
-}
-
-// Icon share
-.icon-share {
- border: $icon-border-width solid currentColor;
- border-radius: $border-radius;
- border-right: 0;
- border-top: 0;
- &::before {
- border: $icon-border-width solid currentColor;
- border-left: 0;
- border-top: 0;
- content: "";
- height: .4em;
- left: 100%;
- top: .25em;
- transform: translate(-125%, -50%) rotate(-45deg);
- width: .4em;
- }
- &::after {
- border: $icon-border-width solid currentColor;
- border-bottom: 0;
- border-right: 0;
- border-radius: 75% 0;
- content: "";
- height: .5em;
- width: .6em;
- }
-}
-
-// Icon flag
-.icon-flag {
- &::before {
- background: currentColor;
- content: "";
- height: 1em;
- left: 15%;
- width: $icon-border-width;
- }
- &::after {
- border: $icon-border-width solid currentColor;
- border-bottom-right-radius: $border-radius;
- border-left: 0;
- border-top-right-radius: $border-radius;
- content: "";
- height: .65em;
- top: 35%;
- left: 60%;
- width: .8em;
- }
-}
-
-// Icon bookmark
-.icon-bookmark {
- &::before {
- border: $icon-border-width solid currentColor;
- border-bottom: 0;
- border-top-left-radius: $border-radius;
- border-top-right-radius: $border-radius;
- content: "";
- height: .9em;
- width: .8em;
- }
- &::after {
- border: $icon-border-width solid currentColor;
- border-bottom: 0;
- border-left: 0;
- border-radius: $border-radius;
- content: "";
- height: .5em;
- transform: translate(-50%, 35%) rotate(-45deg) skew(15deg, 15deg);
- width: .5em;
- }
-}
-
-// Icon download & upload
-.icon-download,
-.icon-upload {
- border-bottom: $icon-border-width solid currentColor;
- &::before {
- border: $icon-border-width solid currentColor;
- border-bottom: 0;
- border-right: 0;
- content: "";
- height: .5em;
- width: .5em;
- transform: translate(-50%, -60%) rotate(-135deg);
- }
- &::after {
- background: currentColor;
- content: "";
- height: .6em;
- top: 40%;
- width: $icon-border-width;
- }
-}
-
-.icon-upload {
- &::before {
- transform: translate(-50%, -60%) rotate(45deg);
- }
- &::after {
- top: 50%;
- }
-}
-
-// Icon time
-.icon-time {
- border: $icon-border-width solid currentColor;
- border-radius: 50%;
- &::before {
- background: currentColor;
- content: "";
- height: .4em;
- transform: translate(-50%, -75%);
- width: $icon-border-width;
- }
- &::after {
- background: currentColor;
- content: "";
- height: .3em;
- transform: translate(-50%, -75%) rotate(90deg);
- transform-origin: 50% 90%;
- width: $icon-border-width;
- }
-}
-
-// Icon mail
-.icon-mail {
- &::before {
- border: $icon-border-width solid currentColor;
- border-radius: $border-radius;
- content: "";
- height: .8em;
- width: 1em;
- }
- &::after {
- border: $icon-border-width solid currentColor;
- border-right: 0;
- border-top: 0;
- content: "";
- height: .5em;
- transform: translate(-50%, -90%) rotate(-45deg) skew(10deg, 10deg);
- width: .5em;
- }
-}
-
-// Icon people
-.icon-people {
- &::before {
- border: $icon-border-width solid currentColor;
- border-radius: 50%;
- content: "";
- height: .45em;
- top: 25%;
- width: .45em;
- }
- &::after {
- border: $icon-border-width solid currentColor;
- border-radius: 50% 50% 0 0;
- content: "";
- height: .4em;
- top: 75%;
- width: .9em;
- }
-}
-
-// Icon message
-.icon-message {
- border: $icon-border-width solid currentColor;
- border-bottom: 0;
- border-radius: $border-radius;
- border-right: 0;
- &::before {
- border: $icon-border-width solid currentColor;
- border-left: 0;
- border-bottom-right-radius: $border-radius;
- border-top: 0;
- content: "";
- height: .8em;
- left: 65%;
- top: 40%;
- width: .7em;
- }
- &::after {
- background: currentColor;
- border-radius: $border-radius;
- content: "";
- height: .3em;
- left: 10%;
- top: 100%;
- transform: translate(0, -90%) rotate(45deg);
- width: $icon-border-width;
- }
-}
-
-// Icon photo
-.icon-photo {
- border: $icon-border-width solid currentColor;
- border-radius: $border-radius;
- &::before {
- border: $icon-border-width solid currentColor;
- border-radius: 50%;
- content: "";
- height: .25em;
- left: 35%;
- top: 35%;
- width: .25em;
- }
- &::after {
- border: $icon-border-width solid currentColor;
- border-bottom: 0;
- border-left: 0;
- content: "";
- height: .5em;
- left: 60%;
- transform: translate(-50%, 25%) rotate(-45deg);
- width: .5em;
- }
-}
-
-// Icon link
-.icon-link {
- &::before,
- &::after {
- border: $icon-border-width solid currentColor;
- border-radius: 5em 0 0 5em;
- border-right: 0;
- content: "";
- height: .5em;
- width: .75em;
- }
- &::before {
- transform: translate(-70%, -45%) rotate(-45deg);
- }
- &::after {
- transform: translate(-30%, -55%) rotate(135deg);
- }
-}
-
-// Icon location
-.icon-location {
- &::before {
- border: $icon-border-width solid currentColor;
- border-radius: 50% 50% 50% 0;
- content: "";
- height: .8em;
- transform: translate(-50%, -60%) rotate(-45deg);
- width: .8em;
- }
- &::after {
- border: $icon-border-width solid currentColor;
- border-radius: 50%;
- content: "";
- height: .2em;
- transform: translate(-50%, -80%);
- width: .2em;
- }
-}
-
-// Icon emoji
-.icon-emoji {
- border: $icon-border-width solid currentColor;
- border-radius: 50%;
- &::before {
- border-radius: 50%;
- box-shadow: -.17em -.15em, .17em -.15em;
- content: "";
- height: .1em;
- width: .1em;
- }
- &::after {
- border: $icon-border-width solid currentColor;
- border-bottom-color: transparent;
- border-radius: 50%;
- border-right-color: transparent;
- content: "";
- height: .5em;
- transform: translate(-50%, -40%) rotate(-135deg);
- width: .5em;
- }
-}
-
-// Component icon support
-.accordion,
-.btn,
-.toast,
-.menu {
- .icon {
- vertical-align: -10%;
- }
-}
+@import "icons/icons-core";
+@import "icons/icons-navigation";
+@import "icons/icons-action";
+@import "icons/icons-object"; \ No newline at end of file
diff --git a/src/_labels.scss b/src/_labels.scss
index 271c6f0..ca693cd 100644
--- a/src/_labels.scss
+++ b/src/_labels.scss
@@ -1,15 +1,17 @@
// Labels
.label {
@include label-base();
- @include label-variant(lighten($body-font-color, 5%), $bg-color);
+ @include label-variant(lighten($body-font-color, 5%), $bg-color-dark);
display: inline-block;
+ // Label rounded
&.label-rounded {
border-radius: 5rem;
padding-left: .4rem;
padding-right: .4rem;
}
+ // Label colors
&.label-primary {
@include label-variant($light-color, $primary-color);
}
diff --git a/src/_modals.scss b/src/_modals.scss
index 21d6ed8..ced52a8 100644
--- a/src/_modals.scss
+++ b/src/_modals.scss
@@ -32,13 +32,25 @@
.modal-container {
animation: slide-down .2s ease 1;
max-width: 640px;
+ width: 100%;
z-index: $zindex-0;
}
}
&.modal-sm {
.modal-container {
- max-width: $control-max-width;
+ max-width: 320px;
+ }
+ }
+
+ &.modal-lg {
+ .modal-overlay {
+ background: $bg-color-light;
+ }
+
+ .modal-container {
+ box-shadow: none;
+ max-width: 960px;
}
}
}
@@ -52,7 +64,7 @@
text-align: left;
.modal-header {
- padding: $layout-spacing-lg;
+ padding: $unit-4 $unit-6;
.modal-title {
margin: 0;
@@ -62,12 +74,12 @@
.modal-body {
max-height: 50vh;
overflow-y: auto;
- padding: $layout-spacing-lg;
+ padding: $unit-4 $unit-6;
position: relative;
}
.modal-footer {
- padding: $layout-spacing-lg;
+ padding: $unit-4 $unit-6;
text-align: right;
}
}
diff --git a/src/_tooltips.scss b/src/_tooltips.scss
index 1ee4d97..938afc2 100644
--- a/src/_tooltips.scss
+++ b/src/_tooltips.scss
@@ -19,7 +19,7 @@
text-overflow: ellipsis;
transform: translate(-50%, $unit-2);
transition: all .2s ease;
- white-space: nowrap;
+ white-space: pre;
z-index: $zindex-3;
}
&:focus,
diff --git a/src/_variables.scss b/src/_variables.scss
index 4216d4a..2068adc 100644
--- a/src/_variables.scss
+++ b/src/_variables.scss
@@ -1,10 +1,10 @@
// Core variables
// Colors
// Core colors
-$primary-color: #5764c6 !default;
+$primary-color: #5755d9 !default;
$primary-color-dark: darken($primary-color, 3%) !default;
$primary-color-light: lighten($primary-color, 3%) !default;
-$secondary-color: lighten($primary-color, 40%) !default;
+$secondary-color: lighten($primary-color, 37.5%) !default;
$secondary-color-dark: darken($secondary-color, 3%) !default;
$secondary-color-light: lighten($secondary-color, 3%) !default;
@@ -79,10 +79,12 @@ $border-width-lg: $unit-h !default;
$control-size: $unit-8 !default;
$control-size-sm: $unit-6 !default;
$control-size-lg: $unit-10 !default;
-$control-padding-h: $unit-2 !default;
-$control-padding-v: ($control-size - $line-height) / 2 - $border-width !default;
-$control-padding-v-sm: ($control-size-sm - $line-height) / 2 - $border-width !default;
-$control-padding-v-lg: ($control-size-lg - $line-height) / 2 - $border-width !default;
+$control-padding-x: $unit-2 !default;
+$control-padding-x-sm: $unit-2 * .75 !default;
+$control-padding-x-lg: $unit-2 * 1.5 !default;
+$control-padding-y: ($control-size - $line-height) / 2 - $border-width !default;
+$control-padding-y-sm: ($control-size-sm - $line-height) / 2 - $border-width !default;
+$control-padding-y-lg: ($control-size-lg - $line-height) / 2 - $border-width !default;
$control-icon-size: .7rem !default;
$control-min-width: 180px !default;
$control-max-width: 320px !default;
diff --git a/src/icons/_icons-action.scss b/src/icons/_icons-action.scss
new file mode 100644
index 0000000..807f05e
--- /dev/null
+++ b/src/icons/_icons-action.scss
@@ -0,0 +1,316 @@
+
+// Icon resize
+.icon-resize-horiz,
+.icon-resize-vert {
+ &::before,
+ &::after {
+ border: $icon-border-width solid currentColor;
+ border-bottom: 0;
+ border-right: 0;
+ content: "";
+ height: .45em;
+ width: .45em;
+ }
+ &::before {
+ transform: translate(-50%, -90%) rotate(45deg);
+ }
+ &::after {
+ transform: translate(-50%, -10%) rotate(225deg);
+ }
+}
+
+.icon-resize-horiz {
+ &::before {
+ transform: translate(-90%, -50%) rotate(-45deg);
+ }
+ &::after {
+ transform: translate(-10%, -50%) rotate(135deg);
+ }
+}
+
+// Icon more
+.icon-more-horiz,
+.icon-more-vert {
+ &::before {
+ background: currentColor;
+ box-shadow: -.4em 0, .4em 0;
+ border-radius: 50%;
+ content: "";
+ height: 3px;
+ width: 3px;
+ }
+}
+
+.icon-more-vert {
+ &::before {
+ box-shadow: 0 -.4em, 0 .4em;
+ }
+}
+
+// Icon plus, minus, cross
+.icon-plus,
+.icon-minus,
+.icon-cross {
+ &::before {
+ background: currentColor;
+ content: "";
+ height: $icon-border-width;
+ width: 100%;
+ }
+}
+
+.icon-plus,
+.icon-cross {
+ &::after {
+ background: currentColor;
+ content: "";
+ height: 100%;
+ width: $icon-border-width;
+ }
+}
+
+.icon-cross {
+ &::before {
+ width: 100%;
+ }
+ &::after {
+ height: 100%;
+ }
+ &::before,
+ &::after {
+ transform: translate(-50%, -50%) rotate(45deg);
+ }
+}
+
+// Icon check
+.icon-check {
+ &::before {
+ border: $icon-border-width solid currentColor;
+ border-right: 0;
+ border-top: 0;
+ content: "";
+ height: .5em;
+ width: .9em;
+ transform: translate(-50%, -75%) rotate(-45deg);
+ }
+}
+
+// Icon stop
+.icon-stop {
+ border: $icon-border-width solid currentColor;
+ border-radius: 50%;
+ &::before {
+ background: currentColor;
+ content: "";
+ height: $icon-border-width;
+ transform: translate(-50%, -50%) rotate(45deg);
+ width: 1em;
+ }
+}
+
+// Icon shutdown
+.icon-shutdown {
+ border: $icon-border-width solid currentColor;
+ border-radius: 50%;
+ border-top-color: transparent;
+ &::before {
+ background: currentColor;
+ content: "";
+ height: .5em;
+ top: .1em;
+ width: $icon-border-width;
+ }
+}
+
+// Icon refresh
+.icon-refresh {
+ &::before {
+ border: $icon-border-width solid currentColor;
+ border-radius: 50%;
+ border-right-color: transparent;
+ content: "";
+ height: 1em;
+ width: 1em;
+ }
+ &::after {
+ border: .2em solid currentColor;
+ border-top-color: transparent;
+ border-left-color: transparent;
+ content: "";
+ height: 0;
+ left: 80%;
+ top: 20%;
+ width: 0;
+ }
+}
+
+// Icon search
+.icon-search {
+ &::before {
+ border: $icon-border-width solid currentColor;
+ border-radius: 50%;
+ content: "";
+ height: .75em;
+ left: 5%;
+ top: 5%;
+ transform: translate(0, 0) rotate(45deg);
+ width: .75em;
+ }
+ &::after {
+ background: currentColor;
+ content: "";
+ height: $icon-border-width;
+ left: 80%;
+ top: 80%;
+ transform: translate(-50%, -50%) rotate(45deg);
+ width: .4em;
+ }
+}
+
+// Icon edit
+.icon-edit {
+ &::before {
+ border: $icon-border-width solid currentColor;
+ content: "";
+ height: .4em;
+ transform: translate(-40%, -60%) rotate(-45deg);
+ width: .85em;
+ }
+ &::after {
+ border: .15em solid currentColor;
+ border-top-color: transparent;
+ border-right-color: transparent;
+ content: "";
+ height: 0;
+ left: 5%;
+ top: 95%;
+ transform: translate(0, -100%);
+ width: 0;
+ }
+}
+
+// Icon delete
+.icon-delete {
+ &::before {
+ border: $icon-border-width solid currentColor;
+ border-bottom-left-radius: $border-radius;
+ border-bottom-right-radius: $border-radius;
+ border-top: 0;
+ content: "";
+ height: .75em;
+ top: 60%;
+ width: .75em;
+ }
+ &::after {
+ background: currentColor;
+ box-shadow: -.25em .2em, .25em .2em;
+ content: "";
+ height: $icon-border-width;
+ top: $icon-border-width/2;
+ width: .5em;
+ }
+}
+
+// Icon share
+.icon-share {
+ border: $icon-border-width solid currentColor;
+ border-radius: $border-radius;
+ border-right: 0;
+ border-top: 0;
+ &::before {
+ border: $icon-border-width solid currentColor;
+ border-left: 0;
+ border-top: 0;
+ content: "";
+ height: .4em;
+ left: 100%;
+ top: .25em;
+ transform: translate(-125%, -50%) rotate(-45deg);
+ width: .4em;
+ }
+ &::after {
+ border: $icon-border-width solid currentColor;
+ border-bottom: 0;
+ border-right: 0;
+ border-radius: 75% 0;
+ content: "";
+ height: .5em;
+ width: .6em;
+ }
+}
+
+// Icon flag
+.icon-flag {
+ &::before {
+ background: currentColor;
+ content: "";
+ height: 1em;
+ left: 15%;
+ width: $icon-border-width;
+ }
+ &::after {
+ border: $icon-border-width solid currentColor;
+ border-bottom-right-radius: $border-radius;
+ border-left: 0;
+ border-top-right-radius: $border-radius;
+ content: "";
+ height: .65em;
+ top: 35%;
+ left: 60%;
+ width: .8em;
+ }
+}
+
+// Icon bookmark
+.icon-bookmark {
+ &::before {
+ border: $icon-border-width solid currentColor;
+ border-bottom: 0;
+ border-top-left-radius: $border-radius;
+ border-top-right-radius: $border-radius;
+ content: "";
+ height: .9em;
+ width: .8em;
+ }
+ &::after {
+ border: $icon-border-width solid currentColor;
+ border-bottom: 0;
+ border-left: 0;
+ border-radius: $border-radius;
+ content: "";
+ height: .5em;
+ transform: translate(-50%, 35%) rotate(-45deg) skew(15deg, 15deg);
+ width: .5em;
+ }
+}
+
+// Icon download & upload
+.icon-download,
+.icon-upload {
+ border-bottom: $icon-border-width solid currentColor;
+ &::before {
+ border: $icon-border-width solid currentColor;
+ border-bottom: 0;
+ border-right: 0;
+ content: "";
+ height: .5em;
+ width: .5em;
+ transform: translate(-50%, -60%) rotate(-135deg);
+ }
+ &::after {
+ background: currentColor;
+ content: "";
+ height: .6em;
+ top: 40%;
+ width: $icon-border-width;
+ }
+}
+
+.icon-upload {
+ &::before {
+ transform: translate(-50%, -60%) rotate(45deg);
+ }
+ &::after {
+ top: 50%;
+ }
+}
diff --git a/src/icons/_icons-core.scss b/src/icons/_icons-core.scss
new file mode 100644
index 0000000..1bcc10e
--- /dev/null
+++ b/src/icons/_icons-core.scss
@@ -0,0 +1,47 @@
+// Icon variables
+$icon-border-width: $border-width-lg;
+$icon-prefix: "icon";
+
+// Icon base style
+.#{$icon-prefix} {
+ box-sizing: border-box;
+ display: inline-block;
+ font-size: inherit;
+ font-style: normal;
+ height: 1em;
+ position: relative;
+ text-indent: -9999px;
+ vertical-align: middle;
+ width: 1em;
+ &::before,
+ &::after {
+ display: block;
+ left: 50%;
+ position: absolute;
+ top: 50%;
+ transform: translate(-50%, -50%);
+ }
+
+ // Icon sizes
+ &.icon-2x {
+ font-size: 1.6rem;
+ }
+
+ &.icon-3x {
+ font-size: 2.4rem;
+ }
+
+ &.icon-4x {
+ font-size: 3.2rem;
+ }
+}
+
+// Component icon support
+.accordion,
+.btn,
+.toast,
+.menu {
+ .#{$icon-prefix} {
+ vertical-align: -10%;
+ }
+}
diff --git a/src/icons/_icons-navigation.scss b/src/icons/_icons-navigation.scss
new file mode 100644
index 0000000..7d7fcd3
--- /dev/null
+++ b/src/icons/_icons-navigation.scss
@@ -0,0 +1,133 @@
+// Icon arrows
+.icon-arrow-down,
+.icon-arrow-left,
+.icon-arrow-right,
+.icon-arrow-up,
+.icon-downward,
+.icon-back,
+.icon-forward,
+.icon-upward {
+ &::before {
+ border: $icon-border-width solid currentColor;
+ border-bottom: 0;
+ border-right: 0;
+ content: "";
+ height: .65em;
+ width: .65em;
+ }
+}
+
+.icon-arrow-down {
+ &::before {
+ transform: translate(-50%, -75%) rotate(225deg);
+ }
+}
+
+.icon-arrow-left {
+ &::before {
+ transform: translate(-25%, -50%) rotate(-45deg);
+ }
+}
+
+.icon-arrow-right {
+ &::before {
+ transform: translate(-75%, -50%) rotate(135deg);
+ }
+}
+
+.icon-arrow-up {
+ &::before {
+ transform: translate(-50%, -25%) rotate(45deg);
+ }
+}
+
+.icon-back,
+.icon-forward {
+ &::after {
+ background: currentColor;
+ content: "";
+ height: $icon-border-width;
+ width: .8em;
+ }
+}
+
+.icon-downward,
+.icon-upward {
+ &::after {
+ background: currentColor;
+ content: "";
+ height: .8em;
+ width: $icon-border-width;
+ }
+}
+
+.icon-back {
+ &::after {
+ left: 55%;
+ }
+ &::before {
+ transform: translate(-50%, -50%) rotate(-45deg);
+ }
+}
+
+.icon-downward {
+ &::after {
+ top: 45%;
+ }
+ &::before {
+ transform: translate(-50%, -50%) rotate(-135deg);
+ }
+}
+
+.icon-forward {
+ &::after {
+ left: 45%;
+ }
+ &::before {
+ transform: translate(-50%, -50%) rotate(135deg);
+ }
+}
+
+.icon-upward {
+ &::after {
+ top: 55%;
+ }
+ &::before {
+ transform: translate(-50%, -50%) rotate(45deg);
+ }
+}
+
+// Icon caret
+.icon-caret {
+ &::before {
+ border-top: .3em solid currentColor;
+ border-right: .3em solid transparent;
+ border-left: .3em solid transparent;
+ content: "";
+ height: 0;
+ transform: translate(-50%, -25%);
+ width: 0;
+ }
+}
+
+// Icon menu
+.icon-menu {
+ &::before {
+ background: currentColor;
+ box-shadow: 0 -.35em, 0 .35em;
+ content: "";
+ height: $icon-border-width;
+ width: 100%;
+ }
+}
+
+// Icon apps
+.icon-apps {
+ &::before {
+ background: currentColor;
+ box-shadow: -.35em -.35em, -.35em 0, -.35em .35em, 0 -.35em, 0 .35em, .35em -.35em, .35em 0, .35em .35em;
+ content: "";
+ height: 3px;
+ width: 3px;
+ }
+}
diff --git a/src/icons/_icons-object.scss b/src/icons/_icons-object.scss
new file mode 100644
index 0000000..746d25b
--- /dev/null
+++ b/src/icons/_icons-object.scss
@@ -0,0 +1,176 @@
+// Icon time
+.icon-time {
+ border: $icon-border-width solid currentColor;
+ border-radius: 50%;
+ &::before {
+ background: currentColor;
+ content: "";
+ height: .4em;
+ transform: translate(-50%, -75%);
+ width: $icon-border-width;
+ }
+ &::after {
+ background: currentColor;
+ content: "";
+ height: .3em;
+ transform: translate(-50%, -75%) rotate(90deg);
+ transform-origin: 50% 90%;
+ width: $icon-border-width;
+ }
+}
+
+// Icon mail
+.icon-mail {
+ &::before {
+ border: $icon-border-width solid currentColor;
+ border-radius: $border-radius;
+ content: "";
+ height: .8em;
+ width: 1em;
+ }
+ &::after {
+ border: $icon-border-width solid currentColor;
+ border-right: 0;
+ border-top: 0;
+ content: "";
+ height: .5em;
+ transform: translate(-50%, -90%) rotate(-45deg) skew(10deg, 10deg);
+ width: .5em;
+ }
+}
+
+// Icon people
+.icon-people {
+ &::before {
+ border: $icon-border-width solid currentColor;
+ border-radius: 50%;
+ content: "";
+ height: .45em;
+ top: 25%;
+ width: .45em;
+ }
+ &::after {
+ border: $icon-border-width solid currentColor;
+ border-radius: 50% 50% 0 0;
+ content: "";
+ height: .4em;
+ top: 75%;
+ width: .9em;
+ }
+}
+
+// Icon message
+.icon-message {
+ border: $icon-border-width solid currentColor;
+ border-bottom: 0;
+ border-radius: $border-radius;
+ border-right: 0;
+ &::before {
+ border: $icon-border-width solid currentColor;
+ border-bottom-right-radius: $border-radius;
+ border-left: 0;
+ border-top: 0;
+ content: "";
+ height: .8em;
+ left: 65%;
+ top: 40%;
+ width: .7em;
+ }
+ &::after {
+ background: currentColor;
+ border-radius: $border-radius;
+ content: "";
+ height: .3em;
+ left: 10%;
+ top: 100%;
+ transform: translate(0, -90%) rotate(45deg);
+ width: $icon-border-width;
+ }
+}
+
+// Icon photo
+.icon-photo {
+ border: $icon-border-width solid currentColor;
+ border-radius: $border-radius;
+ &::before {
+ border: $icon-border-width solid currentColor;
+ border-radius: 50%;
+ content: "";
+ height: .25em;
+ left: 35%;
+ top: 35%;
+ width: .25em;
+ }
+ &::after {
+ border: $icon-border-width solid currentColor;
+ border-bottom: 0;
+ border-left: 0;
+ content: "";
+ height: .5em;
+ left: 60%;
+ transform: translate(-50%, 25%) rotate(-45deg);
+ width: .5em;
+ }
+}
+
+// Icon link
+.icon-link {
+ &::before,
+ &::after {
+ border: $icon-border-width solid currentColor;
+ border-radius: 5em 0 0 5em;
+ border-right: 0;
+ content: "";
+ height: .5em;
+ width: .75em;
+ }
+ &::before {
+ transform: translate(-70%, -45%) rotate(-45deg);
+ }
+ &::after {
+ transform: translate(-30%, -55%) rotate(135deg);
+ }
+}
+
+// Icon location
+.icon-location {
+ &::before {
+ border: $icon-border-width solid currentColor;
+ border-radius: 50% 50% 50% 0;
+ content: "";
+ height: .8em;
+ transform: translate(-50%, -60%) rotate(-45deg);
+ width: .8em;
+ }
+ &::after {
+ border: $icon-border-width solid currentColor;
+ border-radius: 50%;
+ content: "";
+ height: .2em;
+ transform: translate(-50%, -80%);
+ width: .2em;
+ }
+}
+
+// Icon emoji
+.icon-emoji {
+ border: $icon-border-width solid currentColor;
+ border-radius: 50%;
+ &::before {
+ border-radius: 50%;
+ box-shadow: -.17em -.15em, .17em -.15em;
+ content: "";
+ height: .1em;
+ width: .1em;
+ }
+ &::after {
+ border: $icon-border-width solid currentColor;
+ border-bottom-color: transparent;
+ border-radius: 50%;
+ border-right-color: transparent;
+ content: "";
+ height: .5em;
+ transform: translate(-50%, -40%) rotate(-135deg);
+ width: .5em;
+ }
+}
diff --git a/src/spectre-icons.scss b/src/spectre-icons.scss
index 137fe70..63c8034 100644
--- a/src/spectre-icons.scss
+++ b/src/spectre-icons.scss
@@ -5,4 +5,7 @@
@import "mixins";
// Icons
-@import "icons";
+@import "icons/icons-core";
+@import "icons/icons-navigation";
+@import "icons/icons-action";
+@import "icons/icons-object";
generated by cgit v1.3.1-23-gd82d (git 2.54.0) at 2026-11-07 20:46:21 +0000