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

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

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

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

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

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