urania/gnosis-css
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

updated

Browse Source
This commit is contained in:
urania 2024-07-25 10:43:36 +00:00
parent 4f3c944e93
commit 23cfac8380
9 changed files with 1254 additions and 428 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1078
css/compiled.css
View File

File diff suppressed because it is too large Load Diff

2
css/compiled.css.map
View File

File diff suppressed because one or more lines are too long

2
css/compiled.min.css vendored
View File

File diff suppressed because one or more lines are too long

2
css/compiled.min.css.map
View File

File diff suppressed because one or more lines are too long

62
css/scss/bootstrap/_colors.scss
View File

@ -58,22 +58,48 @@ $danger-700: shade-color($danger, 40%) !default;
$danger-800: shade-color($danger, 60%) !default; $danger-800: shade-color($danger, 60%) !default;
$danger-900: shade-color($danger, 80%) !default; $danger-900: shade-color($danger, 80%) !default;
$light-100: tint-color($light, 80%) !default; // $light-100: tint-color($light, 80%) !default;
$light-200: tint-color($light, 60%) !default; // $light-200: tint-color($light, 60%) !default;
$light-300: tint-color($light, 40%) !default; // $light-300: tint-color($light, 40%) !default;
$light-400: tint-color($light, 20%) !default; // $light-400: tint-color($light, 20%) !default;
$light-500: $light !default; // $light-500: $light !default;
$light-600: shade-color($light, 20%) !default; // $light-600: shade-color($light, 20%) !default;
$light-700: shade-color($light, 40%) !default; // $light-700: shade-color($light, 40%) !default;
$light-800: shade-color($light, 60%) !default; // $light-800: shade-color($light, 60%) !default;
$light-900: shade-color($light, 80%) !default; // $light-900: shade-color($light, 80%) !default;
$dark-100: tint-color($dark, 80%) !default; // $dark-100: tint-color($dark, 80%) !default;
$dark-200: tint-color($dark, 60%) !default; // $dark-200: tint-color($dark, 60%) !default;
$dark-300: tint-color($dark, 40%) !default; // $dark-300: tint-color($dark, 40%) !default;
$dark-400: tint-color($dark, 20%) !default; // $dark-400: tint-color($dark, 20%) !default;
$dark-500: $dark !default; // $dark-500: $dark !default;
$dark-600: shade-color($dark, 20%) !default; // $dark-600: shade-color($dark, 20%) !default;
$dark-700: shade-color($dark, 40%) !default; // $dark-700: shade-color($dark, 40%) !default;
$dark-800: shade-color($dark, 60%) !default; // $dark-800: shade-color($dark, 60%) !default;
$dark-900: shade-color($dark, 80%) !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;

12
css/scss/bootstrap/_maps.scss
View File

@ -117,3 +117,15 @@ $all-colors: map-merge-multiple(
$light-map, $light-map,
$dark-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)
);

152
css/scss/bootstrap/_utilities.scss
View File

@ -1,37 +1,41 @@
$utilities: map-merge( $utilities: map-merge(
$utilities, $utilities,
( (
'display': ( "display": (
responsive: true, responsive: true,
print: true, print: true,
property: display, property: display,
class: d, class: d,
values: inline inline-block block grid inline-grid table table-row table-cell contents flex values: inline inline-block block grid inline-grid table table-row
inline-flex none table-cell contents flex inline-flex none,
), ),
'color': "color":
map-merge( 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': ( "text-wrap": (
property: 'text-wrap', property: "text-wrap",
values: wrap nowrap pretty stable balance, values: wrap nowrap pretty stable balance,
class: 'text-wrap' class: "text-wrap",
), ),
'font-family': ( "font-family": (
property: 'font-family', property: "font-family",
values: ( values: (
'sans': $headings-font-family, "sans": $headings-font-family,
'serif': $font-family-base, "serif": $font-family-base,
'serif-alt': $display-font-family, "serif-alt": $display-font-family,
'mono': $font-family-code "mono": $font-family-code,
), ),
class: 'font-family' class: "font-family",
), ),
'font-weight': ( "font-weight": (
property: font-weight, property: font-weight,
class: fw, class: fw,
values: ( values: (
@ -40,10 +44,10 @@ $utilities: map-merge(
normal: $font-weight-normal, normal: $font-weight-normal,
bold: $font-weight-bold, bold: $font-weight-bold,
bolder: $font-weight-bolder, bolder: $font-weight-bolder,
black: $font-weight-black black: $font-weight-black,
)
), ),
'width': ( ),
"width": (
property: width, property: width,
responsive: true, responsive: true,
class: w, class: w,
@ -59,10 +63,10 @@ $utilities: map-merge(
50: 50%, 50: 50%,
75: 75%, 75: 75%,
100: 100%, 100: 100%,
auto: auto auto: auto,
)
), ),
'height': ( ),
"height": (
property: height, property: height,
responsive: true, responsive: true,
class: h, class: h,
@ -78,10 +82,10 @@ $utilities: map-merge(
50: 50%, 50: 50%,
75: 75%, 75: 75%,
100: 100%, 100: 100%,
auto: auto auto: auto,
)
), ),
'inset': ( ),
"inset": (
property: inset, property: inset,
class: inset, class: inset,
values: ( values: (
@ -95,11 +99,12 @@ $utilities: map-merge(
50: 50%, 50: 50%,
75: 75%, 75: 75%,
100: 100%, 100: 100%,
auto: auto auto: auto,
)
), ),
'rounded-tl': ( ),
"rounded-tl": (
property: border-top-left-radius, property: border-top-left-radius,
responsive: true,
class: rounded-tl, class: rounded-tl,
values: ( values: (
null: var(--#{$prefix}border-radius), null: var(--#{$prefix}border-radius),
@ -110,11 +115,12 @@ $utilities: map-merge(
4: var(--#{$prefix}border-radius-xl), 4: var(--#{$prefix}border-radius-xl),
5: var(--#{$prefix}border-radius-xxl), 5: var(--#{$prefix}border-radius-xxl),
circle: 50%, circle: 50%,
pill: var(--#{$prefix}border-radius-pill) pill: var(--#{$prefix}border-radius-pill),
)
), ),
'rounded-bl': ( ),
"rounded-bl": (
property: border-bottom-left-radius, property: border-bottom-left-radius,
responsive: true,
class: rounded-bl, class: rounded-bl,
values: ( values: (
null: var(--#{$prefix}border-radius), null: var(--#{$prefix}border-radius),
@ -125,11 +131,12 @@ $utilities: map-merge(
4: var(--#{$prefix}border-radius-xl), 4: var(--#{$prefix}border-radius-xl),
5: var(--#{$prefix}border-radius-xxl), 5: var(--#{$prefix}border-radius-xxl),
circle: 50%, circle: 50%,
pill: var(--#{$prefix}border-radius-pill) pill: var(--#{$prefix}border-radius-pill),
)
), ),
'rounded-tr': ( ),
"rounded-tr": (
property: border-top-right-radius, property: border-top-right-radius,
responsive: true,
class: rounded-tr, class: rounded-tr,
values: ( values: (
null: var(--#{$prefix}border-radius), null: var(--#{$prefix}border-radius),
@ -140,11 +147,12 @@ $utilities: map-merge(
4: var(--#{$prefix}border-radius-xl), 4: var(--#{$prefix}border-radius-xl),
5: var(--#{$prefix}border-radius-xxl), 5: var(--#{$prefix}border-radius-xxl),
circle: 50%, circle: 50%,
pill: var(--#{$prefix}border-radius-pill) pill: var(--#{$prefix}border-radius-pill),
)
), ),
'rounded-br': ( ),
"rounded-br": (
property: border-bottom-right-radius, property: border-bottom-right-radius,
responsive: true,
class: rounded-br, class: rounded-br,
values: ( values: (
null: var(--#{$prefix}border-radius), null: var(--#{$prefix}border-radius),
@ -155,78 +163,94 @@ $utilities: map-merge(
4: var(--#{$prefix}border-radius-xl), 4: var(--#{$prefix}border-radius-xl),
5: var(--#{$prefix}border-radius-xxl), 5: var(--#{$prefix}border-radius-xxl),
circle: 50%, circle: 50%,
pill: var(--#{$prefix}border-radius-pill) pill: var(--#{$prefix}border-radius-pill),
)
), ),
'overflow': ( ),
"overflow": (
class: overflow, class: overflow,
property: overflow, property: overflow,
responsive: true, responsive: true,
values: hidden visible clip scroll auto values: hidden visible clip scroll auto,
), ),
'overflow-x': ( "overflow-x": (
class: overflow-x, class: overflow-x,
property: overflow-x, property: overflow-x,
responsive: true, responsive: true,
values: hidden visible clip scroll auto values: hidden visible clip scroll auto,
), ),
'overflow-y': ( "overflow-y": (
class: overflow-y, class: overflow-y,
property: overflow-y, property: overflow-y,
responsive: true, responsive: true,
values: hidden visible clip scroll auto values: hidden visible clip scroll auto,
), ),
'position': ( "position": (
property: position, property: position,
responsive: true, responsive: true,
values: static relative absolute fixed sticky values: static relative absolute fixed sticky,
), ),
'border': ( "border": (
property: border, property: border,
responsive: true, responsive: true,
values: ( values: (
null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) null: var(--#{$prefix}border-width) var(--#{$prefix}border-style)
var(--#{$prefix}border-color), var(--#{$prefix}border-color),
0: 0 0: 0,
)
), ),
'border-top': ( ),
"border-top": (
property: border-top, property: border-top,
responsive: true, responsive: true,
values: ( values: (
null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) null: var(--#{$prefix}border-width) var(--#{$prefix}border-style)
var(--#{$prefix}border-color), var(--#{$prefix}border-color),
0: 0 0: 0,
)
), ),
'border-end': ( ),
"border-end": (
property: border-right, property: border-right,
responsive: true, responsive: true,
class: border-end, class: border-end,
values: ( values: (
null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) null: var(--#{$prefix}border-width) var(--#{$prefix}border-style)
var(--#{$prefix}border-color), var(--#{$prefix}border-color),
0: 0 0: 0,
)
), ),
'border-bottom': ( ),
"border-bottom": (
property: border-bottom, property: border-bottom,
responsive: true, responsive: true,
values: ( values: (
null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) null: var(--#{$prefix}border-width) var(--#{$prefix}border-style)
var(--#{$prefix}border-color), var(--#{$prefix}border-color),
0: 0 0: 0,
)
), ),
'border-start': ( ),
"border-start": (
property: border-left, property: border-left,
responsive: true, responsive: true,
class: border-start, class: border-start,
values: ( values: (
null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) null: var(--#{$prefix}border-width) var(--#{$prefix}border-style)
var(--#{$prefix}border-color), 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),
),
),
) )
); );

9
css/scss/bootstrap/_variables.scss
View File

@ -7,13 +7,11 @@ $info: #41b6e6;
$warning: #ffc72c; $warning: #ffc72c;
$danger: #da291c; $danger: #da291c;
$light: #fff9e5; $light: #b3b3b3;
$dark: #33322e; $dark: #33322e;
$body-color: $dark;
$body-bg: $light; $form-valid-color: #5B8100;
$body-color-dark: $light;
$body-bg-dark: $dark;
$font-family-base: 'Sentient', serif; $font-family-base: 'Sentient', serif;
$font-family-sans: 'Libre Franklin', sans-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; $grid-row-columns: 12;
$enable-grid: true; $enable-grid: true;

31
css/scss/bootstrap/g-components/_sidebar.scss
View File

@ -6,12 +6,16 @@ $customPrefix: 'bs-';
--#{$customPrefix}sidebar-border-color: #{$gnosis-sidebar-border-color}; --#{$customPrefix}sidebar-border-color: #{$gnosis-sidebar-border-color};
--#{$customPrefix}sidebar-mobile-border-width: #{$gnosis-sidebar-mobile-border-width}; --#{$customPrefix}sidebar-mobile-border-width: #{$gnosis-sidebar-mobile-border-width};
--#{$customPrefix}sidebar-item-border-width: #{$gnosis-sidebar-item-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; display: flex;
flex-direction: column; flex-direction: column;
width: 100%; width: 100%;
height: 100%; height: 100%;
z-index: 100;
border-width: var(--#{$customPrefix}sidebar-border-width); border-width: var(--#{$customPrefix}sidebar-border-width);
border-style: var(--#{$customPrefix}sidebar-border-style); border-style: var(--#{$customPrefix}sidebar-border-style);
@ -28,7 +32,6 @@ $customPrefix: 'bs-';
} }
} }
padding: 1rem;
width: 100%; width: 100%;
display: flex; display: flex;
gap: 0.5rem; gap: 0.5rem;
@ -37,6 +40,8 @@ $customPrefix: 'bs-';
border-width: var(--#{$customPrefix}sidebar-item-border-width); border-width: var(--#{$customPrefix}sidebar-item-border-width);
border-style: var(--#{$customPrefix}sidebar-border-style); border-style: var(--#{$customPrefix}sidebar-border-style);
border-color: var(--#{$customPrefix}sidebar-border-color); border-color: var(--#{$customPrefix}sidebar-border-color);
border-top-width: var(--#{$customPrefix}sidebar-item-status-witdh);
border-top-color: transparent;
text-decoration: none; text-decoration: none;
@ -58,6 +63,30 @@ $customPrefix: 'bs-';
opacity: 1; 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) { @include media-breakpoint-down(md) {