Summary Files Commits Branches @commit @diff @stats
path: root / src
diff options
context:
space:
mode:
12 files changed, 56 insertions, 46 deletions
-rw-r--r--src/_breadcrumbs.scss2
-rw-r--r--src/_chips.scss6
-rw-r--r--src/_forms.scss47
-rw-r--r--src/_pagination.scss1
-rw-r--r--src/_popovers.scss8
-rw-r--r--src/_timelines.scss4
-rw-r--r--src/_tooltips.scss2
-rw-r--r--src/_variables.scss12
-rw-r--r--src/mixins/_color.scss4
-rw-r--r--src/mixins/_toast.scss2
-rw-r--r--src/utilities/_colors.scss2
-rw-r--r--src/utilities/_position.scss12
diff --git a/src/_breadcrumbs.scss b/src/_breadcrumbs.scss
index f2c9185..6a5af31 100644
--- a/src/_breadcrumbs.scss
+++ b/src/_breadcrumbs.scss
@@ -20,7 +20,7 @@
&:not(:first-child) {
&::before {
- color: $gray-color-light;
+ color: $gray-color-dark;
content: "/";
padding-right: $unit-2;
}
diff --git a/src/_chips.scss b/src/_chips.scss
index 1763567..d2c0fe2 100644
--- a/src/_chips.scss
+++ b/src/_chips.scss
@@ -3,16 +3,18 @@
align-items: center;
background: $bg-color-dark;
border-radius: 5rem;
- color: $gray-color-dark;
display: inline-flex;
font-size: 90%;
height: $unit-6;
line-height: $unit-4;
margin: $unit-h;
- max-width: 100%;
+ max-width: $control-width-sm;
+ overflow-x: hidden;
padding: $unit-1 $unit-2;
text-decoration: none;
+ text-overflow: ellipsis;
vertical-align: middle;
+ white-space: nowrap;
&.active {
background: $primary-color;
diff --git a/src/_forms.scss b/src/_forms.scss
index 8b53df9..b7ef0fa 100644
--- a/src/_forms.scss
+++ b/src/_forms.scss
@@ -118,19 +118,7 @@ textarea.form-input {
padding: $control-padding-y $control-padding-x;
vertical-align: middle;
width: 100%;
-
- &[size],
- &[multiple] {
- height: auto;
-
- option {
- padding: $unit-h $unit-1;
- }
- }
- &:not([multiple]):not([size]) {
- 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;
- }
+ background: $bg-color-light;
&:focus {
@include control-shadow();
border-color: $primary-color;
@@ -151,6 +139,21 @@ textarea.form-input {
height: $control-size-lg;
padding: $control-padding-y-lg ($control-icon-size + $control-padding-x-lg) $control-padding-y-lg $control-padding-x-lg;
}
+
+ // Multiple select
+ &[size],
+ &[multiple] {
+ height: auto;
+ padding: $control-padding-y $control-padding-x;
+
+ option {
+ padding: $unit-h $unit-1;
+ }
+ }
+ &:not([multiple]):not([size]) {
+ background: $bg-color-light 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;
+ }
}
// Form Icons
@@ -266,14 +269,14 @@ textarea.form-input {
border-left-width: 0;
border-top-width: 0;
content: "";
- height: 12px;
+ height: 9px;
left: 50%;
- margin-left: -4px;
- margin-top: -8px;
+ margin-left: -3px;
+ margin-top: -6px;
position: absolute;
top: 50%;
transform: rotate(45deg);
- width: 8px;
+ width: 6px;
}
}
&:indeterminate + .form-icon {
@@ -304,12 +307,12 @@ textarea.form-input {
background: $bg-color-light;
border-radius: 50%;
content: "";
- height: 4px;
+ height: 6px;
left: 50%;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
- width: 4px;
+ width: 6px;
}
}
}
@@ -320,7 +323,7 @@ textarea.form-input {
padding-left: ($unit-8 + $control-padding-x);
.form-icon {
- background: $gray-color-light;
+ background: $gray-color;
background-clip: padding-box;
border-radius: $unit-2 + $border-width;
height: $unit-4 + $border-width * 2;
@@ -447,7 +450,7 @@ textarea.form-input {
.form-icon {
border-color: $error-color;
}
-
+
input {
&:checked + .form-icon {
background: $error-color;
@@ -542,4 +545,4 @@ input {
// Form inline
.form-inline {
display: inline-block;
-} \ No newline at end of file
+}
diff --git a/src/_pagination.scss b/src/_pagination.scss
index 6efc7ba..4c0e011 100644
--- a/src/_pagination.scss
+++ b/src/_pagination.scss
@@ -15,7 +15,6 @@
a {
border-radius: $border-radius;
- color: $gray-color-dark;
display: inline-block;
padding: $unit-1 $unit-2;
text-decoration: none;
diff --git a/src/_popovers.scss b/src/_popovers.scss
index c43a6d1..6fbac0f 100644
--- a/src/_popovers.scss
+++ b/src/_popovers.scss
@@ -19,7 +19,7 @@
&:hover .popover-container {
display: block;
opacity: 1;
- transform: translate(-50%, -100%);
+ transform: translate(-50%, -100%) scale(1);
}
&.popover-right {
@@ -30,7 +30,7 @@
*:focus + .popover-container,
&:hover .popover-container {
- transform: translate(0, -50%);
+ transform: translate(0, -50%) scale(1);
}
}
@@ -42,7 +42,7 @@
*:focus + .popover-container,
&:hover .popover-container {
- transform: translate(-50%, 0);
+ transform: translate(-50%, 0) scale(1);
}
}
@@ -54,7 +54,7 @@
*:focus + .popover-container,
&:hover .popover-container {
- transform: translate(-100%, -50%);
+ transform: translate(-100%, -50%) scale(1);
}
}
diff --git a/src/_timelines.scss b/src/_timelines.scss
index 67041a8..c56746d 100644
--- a/src/_timelines.scss
+++ b/src/_timelines.scss
@@ -24,10 +24,12 @@
}
.timeline-icon {
+ align-items: center;
border-radius: 50%;
color: $light-color;
- display: block;
+ display: flex;
height: $unit-6;
+ justify-content: center;
text-align: center;
width: $unit-6;
&::before {
diff --git a/src/_tooltips.scss b/src/_tooltips.scss
index 061f9d3..d6929e1 100644
--- a/src/_tooltips.scss
+++ b/src/_tooltips.scss
@@ -2,7 +2,7 @@
.tooltip {
position: relative;
&::after {
- background: rgba($dark-color, .9);
+ background: rgba($dark-color, .95);
border-radius: $border-radius;
bottom: 100%;
color: $light-color;
diff --git a/src/_variables.scss b/src/_variables.scss
index c101520..ae47abe 100644
--- a/src/_variables.scss
+++ b/src/_variables.scss
@@ -1,5 +1,5 @@
// Core variables
-$version: "0.5.3";
+$version: "0.5.4";
// Core features
$rtl: false !default;
@@ -13,15 +13,15 @@ $secondary-color-dark: darken($secondary-color, 3%) !default;
$secondary-color-light: lighten($secondary-color, 3%) !default;
// Gray colors
-$dark-color: #454d5d !default;
+$dark-color: #303742 !default;
$light-color: #fff !default;
-$gray-color: lighten($dark-color, 40%) !default;
-$gray-color-dark: darken($gray-color, 25%) !default;
+$gray-color: lighten($dark-color, 55%) !default;
+$gray-color-dark: darken($gray-color, 30%) !default;
$gray-color-light: lighten($gray-color, 20%) !default;
-$border-color: lighten($dark-color, 60%) !default;
+$border-color: lighten($dark-color, 65%) !default;
$border-color-dark: darken($border-color, 10%) !default;
-$bg-color: lighten($dark-color, 66%) !default;
+$bg-color: lighten($dark-color, 75%) !default;
$bg-color-dark: darken($bg-color, 3%) !default;
$bg-color-light: $light-color !default;
diff --git a/src/mixins/_color.scss b/src/mixins/_color.scss
index 3ac9041..697d0c3 100644
--- a/src/mixins/_color.scss
+++ b/src/mixins/_color.scss
@@ -1,7 +1,7 @@
// Background color utility mixin
@mixin bg-color-variant($name: ".bg-primary", $color: $primary-color) {
#{$name} {
- background: $color;
+ background: $color !important;
@if (lightness($color) < 60) {
color: $light-color;
@@ -12,7 +12,7 @@
// Text color utility mixin
@mixin text-color-variant($name: ".text-primary", $color: $primary-color) {
#{$name} {
- color: $color;
+ color: $color !important;
}
a#{$name} {
diff --git a/src/mixins/_toast.scss b/src/mixins/_toast.scss
index a7d3bbf..fa2bb13 100644
--- a/src/mixins/_toast.scss
+++ b/src/mixins/_toast.scss
@@ -1,5 +1,5 @@
// Toast variant mixin
@mixin toast-variant($color: $dark-color) {
- background: rgba($color, .9);
+ background: rgba($color, .95);
border-color: $color;
}
diff --git a/src/utilities/_colors.scss b/src/utilities/_colors.scss
index 28dd221..2039038 100644
--- a/src/utilities/_colors.scss
+++ b/src/utilities/_colors.scss
@@ -3,7 +3,7 @@
@include text-color-variant(".text-secondary", $secondary-color-dark);
-@include text-color-variant(".text-gray", $gray-color);
+@include text-color-variant(".text-gray", $gray-color-dark);
@include text-color-variant(".text-light", $light-color);
diff --git a/src/utilities/_position.scss b/src/utilities/_position.scss
index 229bd34..c1a7f75 100644
--- a/src/utilities/_position.scss
+++ b/src/utilities/_position.scss
@@ -11,19 +11,23 @@
float: right !important;
}
-.relative {
+.p-relative {
position: relative !important;
}
-.absolute {
+.p-absolute {
position: absolute !important;
}
-.fixed {
+.p-fixed {
position: fixed !important;
}
-.centered {
+.p-sticky {
+ position: sticky !important;
+}
+
+.p-centered {
display: block;
float: none;
margin-left: auto;
generated by cgit v1.3.1-23-gd82d (git 2.54.0) at 2026-11-12 11:02:33 +0000