sdga-ui 1.0.28 → 1.0.30
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/css/dga-ui.css +205 -123
- package/css/dga-ui.css.map +1 -1
- package/package.json +1 -1
- package/theme/config/_base.scss +8 -0
- package/theme/customizations/_cards.scss +1 -15
- package/theme/customizations/_carousel.scss +118 -0
- package/theme/dga-ui.scss +1 -0
package/package.json
CHANGED
package/theme/config/_base.scss
CHANGED
|
@@ -9,6 +9,14 @@
|
|
|
9
9
|
|
|
10
10
|
$prefix: dga-;
|
|
11
11
|
|
|
12
|
+
// ============================================
|
|
13
|
+
// CONTRAST
|
|
14
|
+
// ============================================
|
|
15
|
+
|
|
16
|
+
// Lower threshold so Bootstrap picks white text on warning ($warning-600 = #DC6803,
|
|
17
|
+
// which has a ~3.5:1 contrast ratio against white, below the default 4.5 cutoff).
|
|
18
|
+
$min-contrast-ratio: 3;
|
|
19
|
+
|
|
12
20
|
// ============================================
|
|
13
21
|
// BODY
|
|
14
22
|
// ============================================
|
|
@@ -21,13 +21,6 @@
|
|
|
21
21
|
background-color: $gray-50;
|
|
22
22
|
}
|
|
23
23
|
|
|
24
|
-
&:focus-visible,
|
|
25
|
-
&.card-expandable-focused {
|
|
26
|
-
outline: none;
|
|
27
|
-
border-color: $gray-900 !important;
|
|
28
|
-
box-shadow: 0 0 0 2px $gray-900 !important;
|
|
29
|
-
}
|
|
30
|
-
|
|
31
24
|
.form-check-input:focus {
|
|
32
25
|
box-shadow: none;
|
|
33
26
|
border-color: $gray-300;
|
|
@@ -83,13 +76,6 @@
|
|
|
83
76
|
background-color: $gray-50;
|
|
84
77
|
}
|
|
85
78
|
|
|
86
|
-
&:focus-visible,
|
|
87
|
-
&.card-select-focused {
|
|
88
|
-
outline: none;
|
|
89
|
-
border-color: $gray-900 !important;
|
|
90
|
-
box-shadow: 0 0 0 2px $gray-900 !important;
|
|
91
|
-
}
|
|
92
|
-
|
|
93
79
|
&.disabled {
|
|
94
80
|
background-color: $gray-100;
|
|
95
81
|
cursor: not-allowed;
|
|
@@ -157,7 +143,7 @@
|
|
|
157
143
|
&.card-selectable-focused {
|
|
158
144
|
outline: none;
|
|
159
145
|
border-color: $gray-900 !important;
|
|
160
|
-
box-shadow: 0 0 0
|
|
146
|
+
box-shadow: 0 0 0 1px $gray-900 !important;
|
|
161
147
|
}
|
|
162
148
|
|
|
163
149
|
&.disabled {
|
|
@@ -0,0 +1,118 @@
|
|
|
1
|
+
// Carousel Customizations
|
|
2
|
+
// Circular primary-colour nav buttons + indicator dots with size variants
|
|
3
|
+
|
|
4
|
+
// ─── Sizes ──────────────────────────────────
|
|
5
|
+
$carousel-btn-size-sm: 32px;
|
|
6
|
+
$carousel-btn-size-md: 40px;
|
|
7
|
+
$carousel-btn-size-lg: 48px;
|
|
8
|
+
|
|
9
|
+
$carousel-btn-icon-size-sm: 1rem;
|
|
10
|
+
$carousel-btn-icon-size-md: 1.25rem;
|
|
11
|
+
$carousel-btn-icon-size-lg: 1.5rem;
|
|
12
|
+
|
|
13
|
+
// ─── Disabled-state icons (gray chevrons) ───
|
|
14
|
+
$carousel-disabled-prev-icon: escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$gray-400}'><path d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/></svg>"));
|
|
15
|
+
$carousel-disabled-next-icon: escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$gray-400}'><path d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/></svg>"));
|
|
16
|
+
|
|
17
|
+
// ─── Base control button ─────────────────────
|
|
18
|
+
.carousel-control-prev,
|
|
19
|
+
.carousel-control-next {
|
|
20
|
+
// Reset Bootstrap full-height strip to a compact circle
|
|
21
|
+
top: 50%;
|
|
22
|
+
bottom: auto;
|
|
23
|
+
transform: translateY(-50%);
|
|
24
|
+
width: $carousel-btn-size-md;
|
|
25
|
+
height: $carousel-btn-size-md;
|
|
26
|
+
border-radius: 50%;
|
|
27
|
+
background-color: $primary-600;
|
|
28
|
+
opacity: 1;
|
|
29
|
+
transition: background-color 0.15s ease;
|
|
30
|
+
|
|
31
|
+
.carousel-control-prev-icon,
|
|
32
|
+
.carousel-control-next-icon {
|
|
33
|
+
width: $carousel-btn-icon-size-md;
|
|
34
|
+
height: $carousel-btn-icon-size-md;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
&:hover {
|
|
38
|
+
background-color: $primary-700;
|
|
39
|
+
opacity: 1;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
&:active {
|
|
43
|
+
background-color: $primary-800;
|
|
44
|
+
opacity: 1;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
&:disabled,
|
|
48
|
+
&.disabled {
|
|
49
|
+
background-color: $gray-200;
|
|
50
|
+
opacity: 1;
|
|
51
|
+
pointer-events: none;
|
|
52
|
+
|
|
53
|
+
.carousel-control-prev-icon {
|
|
54
|
+
background-image: $carousel-disabled-prev-icon;
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
.carousel-control-next-icon {
|
|
58
|
+
background-image: $carousel-disabled-next-icon;
|
|
59
|
+
}
|
|
60
|
+
}
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
// ─── Size variants (control buttons) ────────
|
|
64
|
+
.carousel-control-sm {
|
|
65
|
+
width: $carousel-btn-size-sm;
|
|
66
|
+
height: $carousel-btn-size-sm;
|
|
67
|
+
|
|
68
|
+
.carousel-control-prev-icon,
|
|
69
|
+
.carousel-control-next-icon {
|
|
70
|
+
width: $carousel-btn-icon-size-sm;
|
|
71
|
+
height: $carousel-btn-icon-size-sm;
|
|
72
|
+
}
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
.carousel-control-lg {
|
|
76
|
+
width: $carousel-btn-size-lg;
|
|
77
|
+
height: $carousel-btn-size-lg;
|
|
78
|
+
|
|
79
|
+
.carousel-control-prev-icon,
|
|
80
|
+
.carousel-control-next-icon {
|
|
81
|
+
width: $carousel-btn-icon-size-lg;
|
|
82
|
+
height: $carousel-btn-icon-size-lg;
|
|
83
|
+
}
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
// ─── Indicator dots ──────────────────────────
|
|
87
|
+
$carousel-dot-size-sm: 8px;
|
|
88
|
+
$carousel-dot-size-md: 12px;
|
|
89
|
+
$carousel-dot-size-lg: 16px;
|
|
90
|
+
|
|
91
|
+
.carousel-indicators [data-bs-target] {
|
|
92
|
+
// Disable Bootstrap's opacity-based differentiation — use colour instead
|
|
93
|
+
--#{$prefix}carousel-indicator-opacity: 1;
|
|
94
|
+
--#{$prefix}carousel-indicator-active-opacity: 1;
|
|
95
|
+
|
|
96
|
+
width: $carousel-dot-size-md;
|
|
97
|
+
height: $carousel-dot-size-md;
|
|
98
|
+
border-radius: 50%;
|
|
99
|
+
background-color: $gray-200; // not-selected
|
|
100
|
+
border-top-color: transparent;
|
|
101
|
+
border-bottom-color: transparent;
|
|
102
|
+
transition: background-color 0.2s ease;
|
|
103
|
+
|
|
104
|
+
&.active {
|
|
105
|
+
background-color: $primary-600; // selected
|
|
106
|
+
}
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
// ─── Size variants (indicator dots) ─────────
|
|
110
|
+
.carousel-indicators-sm [data-bs-target] {
|
|
111
|
+
width: $carousel-dot-size-sm;
|
|
112
|
+
height: $carousel-dot-size-sm;
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
.carousel-indicators-lg [data-bs-target] {
|
|
116
|
+
width: $carousel-dot-size-lg;
|
|
117
|
+
height: $carousel-dot-size-lg;
|
|
118
|
+
}
|