updated
This commit is contained in:
parent
4f3c944e93
commit
23cfac8380
1078
css/compiled.css
1078
css/compiled.css
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
2
css/compiled.min.css
vendored
2
css/compiled.min.css
vendored
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -58,22 +58,48 @@ $danger-700: shade-color($danger, 40%) !default;
|
|||
$danger-800: shade-color($danger, 60%) !default;
|
||||
$danger-900: shade-color($danger, 80%) !default;
|
||||
|
||||
$light-100: tint-color($light, 80%) !default;
|
||||
$light-200: tint-color($light, 60%) !default;
|
||||
$light-300: tint-color($light, 40%) !default;
|
||||
$light-400: tint-color($light, 20%) !default;
|
||||
$light-500: $light !default;
|
||||
$light-600: shade-color($light, 20%) !default;
|
||||
$light-700: shade-color($light, 40%) !default;
|
||||
$light-800: shade-color($light, 60%) !default;
|
||||
$light-900: shade-color($light, 80%) !default;
|
||||
// $light-100: tint-color($light, 80%) !default;
|
||||
// $light-200: tint-color($light, 60%) !default;
|
||||
// $light-300: tint-color($light, 40%) !default;
|
||||
// $light-400: tint-color($light, 20%) !default;
|
||||
// $light-500: $light !default;
|
||||
// $light-600: shade-color($light, 20%) !default;
|
||||
// $light-700: shade-color($light, 40%) !default;
|
||||
// $light-800: shade-color($light, 60%) !default;
|
||||
// $light-900: shade-color($light, 80%) !default;
|
||||
|
||||
$dark-100: tint-color($dark, 80%) !default;
|
||||
$dark-200: tint-color($dark, 60%) !default;
|
||||
$dark-300: tint-color($dark, 40%) !default;
|
||||
$dark-400: tint-color($dark, 20%) !default;
|
||||
$dark-500: $dark !default;
|
||||
$dark-600: shade-color($dark, 20%) !default;
|
||||
$dark-700: shade-color($dark, 40%) !default;
|
||||
$dark-800: shade-color($dark, 60%) !default;
|
||||
$dark-900: shade-color($dark, 80%) !default;
|
||||
// $dark-100: tint-color($dark, 80%) !default;
|
||||
// $dark-200: tint-color($dark, 60%) !default;
|
||||
// $dark-300: tint-color($dark, 40%) !default;
|
||||
// $dark-400: tint-color($dark, 20%) !default;
|
||||
// $dark-500: $dark !default;
|
||||
// $dark-600: shade-color($dark, 20%) !default;
|
||||
// $dark-700: shade-color($dark, 40%) !default;
|
||||
// $dark-800: shade-color($dark, 60%) !default;
|
||||
// $dark-900: shade-color($dark, 80%) !default;
|
||||
|
||||
$light-100: #f5f5f5;
|
||||
$light-200: #f2f2f2;
|
||||
$light-300: #cccccc;
|
||||
$light-400: #bfbfbf;
|
||||
$light-500: #b3b3b3;
|
||||
$light-600: #a6a6a6;
|
||||
$light-700: #999999;
|
||||
$light-800: #8c8c8c;
|
||||
$light-900: #808080;
|
||||
|
||||
$dark-100: #737373;
|
||||
$dark-200: #666666;
|
||||
$dark-300: #595959;
|
||||
$dark-400: #4d4d4d;
|
||||
$dark-500: #424242;
|
||||
$dark-600: #333333;
|
||||
$dark-700: #262626;
|
||||
$dark-800: #1a1a1a;
|
||||
$dark-900: #0d0d0d;
|
||||
|
||||
|
||||
$body-color: $dark-900;
|
||||
$body-bg: $light-100;
|
||||
$body-color-dark: $light-100;
|
||||
$body-bg-dark: $dark-900;
|
||||
|
|
@ -117,3 +117,15 @@ $all-colors: map-merge-multiple(
|
|||
$light-map,
|
||||
$dark-map
|
||||
);
|
||||
|
||||
$aspect-ratio: (
|
||||
'1x1': 100%,
|
||||
'3x2': math.div(3,2),
|
||||
'2x3': math.div(2,3),
|
||||
'4x3': math.div(4,3),
|
||||
'3x4': math.div(3,4),
|
||||
'16x9': math.div(16,9),
|
||||
'6x16': math.div(9,16),
|
||||
'21x9': math.div(21,9),
|
||||
'9x21': math.div(9,21)
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,37 +1,41 @@
|
|||
$utilities: map-merge(
|
||||
$utilities,
|
||||
(
|
||||
'display': (
|
||||
"display": (
|
||||
responsive: true,
|
||||
print: true,
|
||||
property: display,
|
||||
class: d,
|
||||
values: inline inline-block block grid inline-grid table table-row table-cell contents flex
|
||||
inline-flex none
|
||||
values: inline inline-block block grid inline-grid table table-row
|
||||
table-cell contents flex inline-flex none,
|
||||
),
|
||||
'color':
|
||||
"color":
|
||||
map-merge(
|
||||
map-get($utilities, 'color'),
|
||||
map-get($utilities, "color"),
|
||||
(
|
||||
values: map-merge(map-get(map-get($utilities, 'color'), 'values'), ($all-colors))
|
||||
values:
|
||||
map-merge(
|
||||
map-get(map-get($utilities, "color"), "values"),
|
||||
($all-colors)
|
||||
),
|
||||
)
|
||||
),
|
||||
'text-wrap': (
|
||||
property: 'text-wrap',
|
||||
"text-wrap": (
|
||||
property: "text-wrap",
|
||||
values: wrap nowrap pretty stable balance,
|
||||
class: 'text-wrap'
|
||||
class: "text-wrap",
|
||||
),
|
||||
'font-family': (
|
||||
property: 'font-family',
|
||||
"font-family": (
|
||||
property: "font-family",
|
||||
values: (
|
||||
'sans': $headings-font-family,
|
||||
'serif': $font-family-base,
|
||||
'serif-alt': $display-font-family,
|
||||
'mono': $font-family-code
|
||||
"sans": $headings-font-family,
|
||||
"serif": $font-family-base,
|
||||
"serif-alt": $display-font-family,
|
||||
"mono": $font-family-code,
|
||||
),
|
||||
class: 'font-family'
|
||||
class: "font-family",
|
||||
),
|
||||
'font-weight': (
|
||||
"font-weight": (
|
||||
property: font-weight,
|
||||
class: fw,
|
||||
values: (
|
||||
|
|
@ -40,10 +44,10 @@ $utilities: map-merge(
|
|||
normal: $font-weight-normal,
|
||||
bold: $font-weight-bold,
|
||||
bolder: $font-weight-bolder,
|
||||
black: $font-weight-black
|
||||
)
|
||||
black: $font-weight-black,
|
||||
),
|
||||
'width': (
|
||||
),
|
||||
"width": (
|
||||
property: width,
|
||||
responsive: true,
|
||||
class: w,
|
||||
|
|
@ -59,10 +63,10 @@ $utilities: map-merge(
|
|||
50: 50%,
|
||||
75: 75%,
|
||||
100: 100%,
|
||||
auto: auto
|
||||
)
|
||||
auto: auto,
|
||||
),
|
||||
'height': (
|
||||
),
|
||||
"height": (
|
||||
property: height,
|
||||
responsive: true,
|
||||
class: h,
|
||||
|
|
@ -78,10 +82,10 @@ $utilities: map-merge(
|
|||
50: 50%,
|
||||
75: 75%,
|
||||
100: 100%,
|
||||
auto: auto
|
||||
)
|
||||
auto: auto,
|
||||
),
|
||||
'inset': (
|
||||
),
|
||||
"inset": (
|
||||
property: inset,
|
||||
class: inset,
|
||||
values: (
|
||||
|
|
@ -95,11 +99,12 @@ $utilities: map-merge(
|
|||
50: 50%,
|
||||
75: 75%,
|
||||
100: 100%,
|
||||
auto: auto
|
||||
)
|
||||
auto: auto,
|
||||
),
|
||||
'rounded-tl': (
|
||||
),
|
||||
"rounded-tl": (
|
||||
property: border-top-left-radius,
|
||||
responsive: true,
|
||||
class: rounded-tl,
|
||||
values: (
|
||||
null: var(--#{$prefix}border-radius),
|
||||
|
|
@ -110,11 +115,12 @@ $utilities: map-merge(
|
|||
4: var(--#{$prefix}border-radius-xl),
|
||||
5: var(--#{$prefix}border-radius-xxl),
|
||||
circle: 50%,
|
||||
pill: var(--#{$prefix}border-radius-pill)
|
||||
)
|
||||
pill: var(--#{$prefix}border-radius-pill),
|
||||
),
|
||||
'rounded-bl': (
|
||||
),
|
||||
"rounded-bl": (
|
||||
property: border-bottom-left-radius,
|
||||
responsive: true,
|
||||
class: rounded-bl,
|
||||
values: (
|
||||
null: var(--#{$prefix}border-radius),
|
||||
|
|
@ -125,11 +131,12 @@ $utilities: map-merge(
|
|||
4: var(--#{$prefix}border-radius-xl),
|
||||
5: var(--#{$prefix}border-radius-xxl),
|
||||
circle: 50%,
|
||||
pill: var(--#{$prefix}border-radius-pill)
|
||||
)
|
||||
pill: var(--#{$prefix}border-radius-pill),
|
||||
),
|
||||
'rounded-tr': (
|
||||
),
|
||||
"rounded-tr": (
|
||||
property: border-top-right-radius,
|
||||
responsive: true,
|
||||
class: rounded-tr,
|
||||
values: (
|
||||
null: var(--#{$prefix}border-radius),
|
||||
|
|
@ -140,11 +147,12 @@ $utilities: map-merge(
|
|||
4: var(--#{$prefix}border-radius-xl),
|
||||
5: var(--#{$prefix}border-radius-xxl),
|
||||
circle: 50%,
|
||||
pill: var(--#{$prefix}border-radius-pill)
|
||||
)
|
||||
pill: var(--#{$prefix}border-radius-pill),
|
||||
),
|
||||
'rounded-br': (
|
||||
),
|
||||
"rounded-br": (
|
||||
property: border-bottom-right-radius,
|
||||
responsive: true,
|
||||
class: rounded-br,
|
||||
values: (
|
||||
null: var(--#{$prefix}border-radius),
|
||||
|
|
@ -155,78 +163,94 @@ $utilities: map-merge(
|
|||
4: var(--#{$prefix}border-radius-xl),
|
||||
5: var(--#{$prefix}border-radius-xxl),
|
||||
circle: 50%,
|
||||
pill: var(--#{$prefix}border-radius-pill)
|
||||
)
|
||||
pill: var(--#{$prefix}border-radius-pill),
|
||||
),
|
||||
'overflow': (
|
||||
),
|
||||
"overflow": (
|
||||
class: overflow,
|
||||
property: overflow,
|
||||
responsive: true,
|
||||
values: hidden visible clip scroll auto
|
||||
values: hidden visible clip scroll auto,
|
||||
),
|
||||
'overflow-x': (
|
||||
"overflow-x": (
|
||||
class: overflow-x,
|
||||
property: overflow-x,
|
||||
responsive: true,
|
||||
values: hidden visible clip scroll auto
|
||||
values: hidden visible clip scroll auto,
|
||||
),
|
||||
'overflow-y': (
|
||||
"overflow-y": (
|
||||
class: overflow-y,
|
||||
property: overflow-y,
|
||||
responsive: true,
|
||||
values: hidden visible clip scroll auto
|
||||
values: hidden visible clip scroll auto,
|
||||
),
|
||||
'position': (
|
||||
"position": (
|
||||
property: position,
|
||||
responsive: true,
|
||||
values: static relative absolute fixed sticky
|
||||
values: static relative absolute fixed sticky,
|
||||
),
|
||||
'border': (
|
||||
"border": (
|
||||
property: border,
|
||||
responsive: true,
|
||||
values: (
|
||||
null: var(--#{$prefix}border-width) var(--#{$prefix}border-style)
|
||||
var(--#{$prefix}border-color),
|
||||
0: 0
|
||||
)
|
||||
0: 0,
|
||||
),
|
||||
'border-top': (
|
||||
),
|
||||
"border-top": (
|
||||
property: border-top,
|
||||
responsive: true,
|
||||
values: (
|
||||
null: var(--#{$prefix}border-width) var(--#{$prefix}border-style)
|
||||
var(--#{$prefix}border-color),
|
||||
0: 0
|
||||
)
|
||||
0: 0,
|
||||
),
|
||||
'border-end': (
|
||||
),
|
||||
"border-end": (
|
||||
property: border-right,
|
||||
responsive: true,
|
||||
class: border-end,
|
||||
values: (
|
||||
null: var(--#{$prefix}border-width) var(--#{$prefix}border-style)
|
||||
var(--#{$prefix}border-color),
|
||||
0: 0
|
||||
)
|
||||
0: 0,
|
||||
),
|
||||
'border-bottom': (
|
||||
),
|
||||
"border-bottom": (
|
||||
property: border-bottom,
|
||||
responsive: true,
|
||||
values: (
|
||||
null: var(--#{$prefix}border-width) var(--#{$prefix}border-style)
|
||||
var(--#{$prefix}border-color),
|
||||
0: 0
|
||||
)
|
||||
0: 0,
|
||||
),
|
||||
'border-start': (
|
||||
),
|
||||
"border-start": (
|
||||
property: border-left,
|
||||
responsive: true,
|
||||
class: border-start,
|
||||
values: (
|
||||
null: var(--#{$prefix}border-width) var(--#{$prefix}border-style)
|
||||
var(--#{$prefix}border-color),
|
||||
0: 0
|
||||
)
|
||||
)
|
||||
0: 0,
|
||||
),
|
||||
),
|
||||
"ratio": (
|
||||
property: aspect-ratio,
|
||||
responsive: true,
|
||||
class: ratio,
|
||||
values: (
|
||||
null: unset,
|
||||
3x2: math.div(3, 2),
|
||||
2x3: math.div(2, 3),
|
||||
4x3: math.div(4, 3),
|
||||
3x4: math.div(3, 4),
|
||||
16x9: math.div(16, 9),
|
||||
6x16: math.div(9, 16),
|
||||
21x9: math.div(21, 9),
|
||||
9x21: math.div(9, 21),
|
||||
),
|
||||
),
|
||||
)
|
||||
);
|
||||
|
|
|
|||
|
|
@ -7,13 +7,11 @@ $info: #41b6e6;
|
|||
$warning: #ffc72c;
|
||||
$danger: #da291c;
|
||||
|
||||
$light: #fff9e5;
|
||||
$light: #b3b3b3;
|
||||
$dark: #33322e;
|
||||
|
||||
$body-color: $dark;
|
||||
$body-bg: $light;
|
||||
$body-color-dark: $light;
|
||||
$body-bg-dark: $dark;
|
||||
|
||||
$form-valid-color: #5B8100;
|
||||
|
||||
$font-family-base: 'Sentient', serif;
|
||||
$font-family-sans: 'Libre Franklin', sans-serif;
|
||||
|
|
@ -126,3 +124,4 @@ $gnosis-sidebar-item-status-width: 2px 0 0 0;
|
|||
|
||||
$grid-row-columns: 12;
|
||||
$enable-grid: true;
|
||||
|
||||
|
|
|
|||
|
|
@ -6,12 +6,16 @@ $customPrefix: 'bs-';
|
|||
--#{$customPrefix}sidebar-border-color: #{$gnosis-sidebar-border-color};
|
||||
--#{$customPrefix}sidebar-mobile-border-width: #{$gnosis-sidebar-mobile-border-width};
|
||||
--#{$customPrefix}sidebar-item-border-width: #{$gnosis-sidebar-item-border-width};
|
||||
--#{$customPrefix}sidebar-item-status-color: #{$primary-100};
|
||||
--#{$customPrefix}sidebar-item-active-color: #{$primary-200};
|
||||
--#{$customPrefix}sidebar-item-status-witdh: #{$gnosis-sidebar-item-border-width};
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 100;
|
||||
|
||||
border-width: var(--#{$customPrefix}sidebar-border-width);
|
||||
border-style: var(--#{$customPrefix}sidebar-border-style);
|
||||
|
|
@ -28,7 +32,6 @@ $customPrefix: 'bs-';
|
|||
}
|
||||
}
|
||||
|
||||
padding: 1rem;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
|
|
@ -37,6 +40,8 @@ $customPrefix: 'bs-';
|
|||
border-width: var(--#{$customPrefix}sidebar-item-border-width);
|
||||
border-style: var(--#{$customPrefix}sidebar-border-style);
|
||||
border-color: var(--#{$customPrefix}sidebar-border-color);
|
||||
border-top-width: var(--#{$customPrefix}sidebar-item-status-witdh);
|
||||
border-top-color: transparent;
|
||||
|
||||
text-decoration: none;
|
||||
|
||||
|
|
@ -58,6 +63,30 @@ $customPrefix: 'bs-';
|
|||
opacity: 1;
|
||||
}
|
||||
}
|
||||
&:focus-visible &:not(.active) {
|
||||
border-width: var(--#{$customPrefix}sidebar-item-status-width);
|
||||
|
||||
}
|
||||
&:focus-visible &.active {
|
||||
border-width: var(--#{$customPrefix}sidebar-item-status-width);
|
||||
border-style: var(--#{$customPrefix}sidebar-border-style);
|
||||
border-color: var(--#{$customPrefix}sidebar-border-color);
|
||||
|
||||
}
|
||||
&.active {
|
||||
background-color: var(--#{$customPrefix}sidebar-item-active-color);
|
||||
border-top-width: var(--#{$customPrefix}sidebar-item-status-witdh);
|
||||
border-style: var(--#{$customPrefix}sidebar-border-style);
|
||||
border-color: var(--#{$customPrefix}sidebar-border-color);
|
||||
}
|
||||
// &.disabled {
|
||||
// }
|
||||
&:hover {
|
||||
background-color: var(--#{$customPrefix}sidebar-item-status-color);
|
||||
border-top-width: var(--#{$customPrefix}sidebar-item-status-witdh);
|
||||
border-style: var(--#{$customPrefix}sidebar-border-style);
|
||||
border-color: var(--#{$customPrefix}sidebar-border-color);
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(md) {
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user