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)
);

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

@ -1,232 +1,256 @@
$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"),
'text-wrap': ( ($all-colors)
property: 'text-wrap', ),
values: wrap nowrap pretty stable balance, )
class: 'text-wrap' ),
), "text-wrap": (
'font-family': ( property: "text-wrap",
property: 'font-family', values: wrap nowrap pretty stable balance,
values: ( class: "text-wrap",
'sans': $headings-font-family, ),
'serif': $font-family-base, "font-family": (
'serif-alt': $display-font-family, property: "font-family",
'mono': $font-family-code values: (
), "sans": $headings-font-family,
class: 'font-family' "serif": $font-family-base,
), "serif-alt": $display-font-family,
'font-weight': ( "mono": $font-family-code,
property: font-weight, ),
class: fw, class: "font-family",
values: ( ),
light: $font-weight-light, "font-weight": (
lighter: $font-weight-lighter, property: font-weight,
normal: $font-weight-normal, class: fw,
bold: $font-weight-bold, values: (
bolder: $font-weight-bolder, light: $font-weight-light,
black: $font-weight-black lighter: $font-weight-lighter,
) normal: $font-weight-normal,
), bold: $font-weight-bold,
'width': ( bolder: $font-weight-bolder,
property: width, black: $font-weight-black,
responsive: true, ),
class: w, ),
values: ( "width": (
0: 0, property: width,
1: $spacer * 0.25, responsive: true,
2: $spacer * 0.5, class: w,
3: $spacer, values: (
4: $spacer * 1.5, 0: 0,
5: $spacer * 3, 1: $spacer * 0.25,
6: $spacer * 6, 2: $spacer * 0.5,
25: 25%, 3: $spacer,
50: 50%, 4: $spacer * 1.5,
75: 75%, 5: $spacer * 3,
100: 100%, 6: $spacer * 6,
auto: auto 25: 25%,
) 50: 50%,
), 75: 75%,
'height': ( 100: 100%,
property: height, auto: auto,
responsive: true, ),
class: h, ),
values: ( "height": (
0: 0, property: height,
1: $spacer * 0.25, responsive: true,
2: $spacer * 0.5, class: h,
3: $spacer, values: (
4: $spacer * 1.5, 0: 0,
5: $spacer * 3, 1: $spacer * 0.25,
6: $spacer * 6, 2: $spacer * 0.5,
25: 25%, 3: $spacer,
50: 50%, 4: $spacer * 1.5,
75: 75%, 5: $spacer * 3,
100: 100%, 6: $spacer * 6,
auto: auto 25: 25%,
) 50: 50%,
), 75: 75%,
'inset': ( 100: 100%,
property: inset, auto: auto,
class: inset, ),
values: ( ),
0: 0, "inset": (
1: $spacer * 0.25, property: inset,
2: $spacer * 0.5, class: inset,
3: $spacer, values: (
4: $spacer * 1.5, 0: 0,
5: $spacer * 3, 1: $spacer * 0.25,
25: 25%, 2: $spacer * 0.5,
50: 50%, 3: $spacer,
75: 75%, 4: $spacer * 1.5,
100: 100%, 5: $spacer * 3,
auto: auto 25: 25%,
) 50: 50%,
), 75: 75%,
'rounded-tl': ( 100: 100%,
property: border-top-left-radius, auto: auto,
class: rounded-tl, ),
values: ( ),
null: var(--#{$prefix}border-radius), "rounded-tl": (
0: 0, property: border-top-left-radius,
1: var(--#{$prefix}border-radius-sm), responsive: true,
2: var(--#{$prefix}border-radius), class: rounded-tl,
3: var(--#{$prefix}border-radius-lg), values: (
4: var(--#{$prefix}border-radius-xl), null: var(--#{$prefix}border-radius),
5: var(--#{$prefix}border-radius-xxl), 0: 0,
circle: 50%, 1: var(--#{$prefix}border-radius-sm),
pill: var(--#{$prefix}border-radius-pill) 2: var(--#{$prefix}border-radius),
) 3: var(--#{$prefix}border-radius-lg),
), 4: var(--#{$prefix}border-radius-xl),
'rounded-bl': ( 5: var(--#{$prefix}border-radius-xxl),
property: border-bottom-left-radius, circle: 50%,
class: rounded-bl, pill: var(--#{$prefix}border-radius-pill),
values: ( ),
null: var(--#{$prefix}border-radius), ),
0: 0, "rounded-bl": (
1: var(--#{$prefix}border-radius-sm), property: border-bottom-left-radius,
2: var(--#{$prefix}border-radius), responsive: true,
3: var(--#{$prefix}border-radius-lg), class: rounded-bl,
4: var(--#{$prefix}border-radius-xl), values: (
5: var(--#{$prefix}border-radius-xxl), null: var(--#{$prefix}border-radius),
circle: 50%, 0: 0,
pill: var(--#{$prefix}border-radius-pill) 1: var(--#{$prefix}border-radius-sm),
) 2: var(--#{$prefix}border-radius),
), 3: var(--#{$prefix}border-radius-lg),
'rounded-tr': ( 4: var(--#{$prefix}border-radius-xl),
property: border-top-right-radius, 5: var(--#{$prefix}border-radius-xxl),
class: rounded-tr, circle: 50%,
values: ( pill: var(--#{$prefix}border-radius-pill),
null: var(--#{$prefix}border-radius), ),
0: 0, ),
1: var(--#{$prefix}border-radius-sm), "rounded-tr": (
2: var(--#{$prefix}border-radius), property: border-top-right-radius,
3: var(--#{$prefix}border-radius-lg), responsive: true,
4: var(--#{$prefix}border-radius-xl), class: rounded-tr,
5: var(--#{$prefix}border-radius-xxl), values: (
circle: 50%, null: var(--#{$prefix}border-radius),
pill: var(--#{$prefix}border-radius-pill) 0: 0,
) 1: var(--#{$prefix}border-radius-sm),
), 2: var(--#{$prefix}border-radius),
'rounded-br': ( 3: var(--#{$prefix}border-radius-lg),
property: border-bottom-right-radius, 4: var(--#{$prefix}border-radius-xl),
class: rounded-br, 5: var(--#{$prefix}border-radius-xxl),
values: ( circle: 50%,
null: var(--#{$prefix}border-radius), pill: var(--#{$prefix}border-radius-pill),
0: 0, ),
1: var(--#{$prefix}border-radius-sm), ),
2: var(--#{$prefix}border-radius), "rounded-br": (
3: var(--#{$prefix}border-radius-lg), property: border-bottom-right-radius,
4: var(--#{$prefix}border-radius-xl), responsive: true,
5: var(--#{$prefix}border-radius-xxl), class: rounded-br,
circle: 50%, values: (
pill: var(--#{$prefix}border-radius-pill) null: var(--#{$prefix}border-radius),
) 0: 0,
), 1: var(--#{$prefix}border-radius-sm),
'overflow': ( 2: var(--#{$prefix}border-radius),
class: overflow, 3: var(--#{$prefix}border-radius-lg),
property: overflow, 4: var(--#{$prefix}border-radius-xl),
responsive: true, 5: var(--#{$prefix}border-radius-xxl),
values: hidden visible clip scroll auto circle: 50%,
), pill: var(--#{$prefix}border-radius-pill),
'overflow-x': ( ),
class: overflow-x, ),
property: overflow-x, "overflow": (
responsive: true, class: overflow,
values: hidden visible clip scroll auto property: overflow,
), responsive: true,
'overflow-y': ( values: hidden visible clip scroll auto,
class: overflow-y, ),
property: overflow-y, "overflow-x": (
responsive: true, class: overflow-x,
values: hidden visible clip scroll auto property: overflow-x,
), responsive: true,
'position': ( values: hidden visible clip scroll auto,
property: position, ),
responsive: true, "overflow-y": (
values: static relative absolute fixed sticky class: overflow-y,
), property: overflow-y,
'border': ( responsive: true,
property: border, values: hidden visible clip scroll auto,
responsive: true, ),
values: ( "position": (
null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) property: position,
var(--#{$prefix}border-color), responsive: true,
0: 0 values: static relative absolute fixed sticky,
) ),
), "border": (
'border-top': ( property: border,
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-top": (
'border-end': ( property: border-top,
property: border-right, responsive: true,
responsive: true, values: (
class: border-end, null: var(--#{$prefix}border-width) var(--#{$prefix}border-style)
values: ( var(--#{$prefix}border-color),
null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) 0: 0,
var(--#{$prefix}border-color), ),
0: 0 ),
) "border-end": (
), property: border-right,
'border-bottom': ( responsive: true,
property: border-bottom, class: border-end,
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-bottom": (
'border-start': ( property: border-bottom,
property: border-left, responsive: true,
responsive: true, values: (
class: border-start, null: var(--#{$prefix}border-width) var(--#{$prefix}border-style)
values: ( var(--#{$prefix}border-color),
null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) 0: 0,
var(--#{$prefix}border-color), ),
0: 0 ),
) "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,
),
),
"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) {