sdga-ui 1.0.29 → 1.0.31
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 +324 -112
- package/css/dga-ui.css.map +1 -1
- package/package.json +1 -1
- package/theme/config/_base.scss +8 -0
- package/theme/customizations/_carousel.scss +198 -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
|
// ============================================
|
|
@@ -0,0 +1,198 @@
|
|
|
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
|
+
// ─── Custom icon sets ────────────────────────
|
|
14
|
+
// Gray chevrons for disabled state
|
|
15
|
+
$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>"));
|
|
16
|
+
$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>"));
|
|
17
|
+
|
|
18
|
+
// Dark chevrons for light-background variants (neutral/dark text icon)
|
|
19
|
+
$carousel-dark-prev-icon: escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$neutral-950}'><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>"));
|
|
20
|
+
$carousel-dark-next-icon: escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$neutral-950}'><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>"));
|
|
21
|
+
|
|
22
|
+
// Primary-colored chevrons for secondary/subtle/transparent variants
|
|
23
|
+
$carousel-primary-prev-icon: escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$primary-700}'><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>"));
|
|
24
|
+
$carousel-primary-next-icon: escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$primary-700}'><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>"));
|
|
25
|
+
|
|
26
|
+
// ─── Base control button ─────────────────────
|
|
27
|
+
.carousel-control-prev,
|
|
28
|
+
.carousel-control-next {
|
|
29
|
+
// Reset Bootstrap full-height strip to a compact circle
|
|
30
|
+
top: 50%;
|
|
31
|
+
bottom: auto;
|
|
32
|
+
transform: translateY(-50%);
|
|
33
|
+
width: $carousel-btn-size-md;
|
|
34
|
+
height: $carousel-btn-size-md;
|
|
35
|
+
border-radius: 50%;
|
|
36
|
+
background-color: $primary-600;
|
|
37
|
+
opacity: 1;
|
|
38
|
+
transition: background-color 0.15s ease;
|
|
39
|
+
|
|
40
|
+
.carousel-control-prev-icon,
|
|
41
|
+
.carousel-control-next-icon {
|
|
42
|
+
width: $carousel-btn-icon-size-md;
|
|
43
|
+
height: $carousel-btn-icon-size-md;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
&:hover {
|
|
47
|
+
background-color: $primary-700;
|
|
48
|
+
opacity: 1;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
&:active {
|
|
52
|
+
background-color: $primary-800;
|
|
53
|
+
opacity: 1;
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
&:disabled,
|
|
57
|
+
&.disabled {
|
|
58
|
+
background-color: $gray-200;
|
|
59
|
+
opacity: 1;
|
|
60
|
+
pointer-events: none;
|
|
61
|
+
|
|
62
|
+
.carousel-control-prev-icon { background-image: $carousel-disabled-prev-icon; }
|
|
63
|
+
.carousel-control-next-icon { background-image: $carousel-disabled-next-icon; }
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
// ── Demo / standalone use: remove the absolute-positioning side-effects ──
|
|
67
|
+
&.position-static {
|
|
68
|
+
transform: none;
|
|
69
|
+
display: inline-flex;
|
|
70
|
+
}
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
// ─── Size variants (control buttons) ────────
|
|
74
|
+
.carousel-control-sm {
|
|
75
|
+
width: $carousel-btn-size-sm;
|
|
76
|
+
height: $carousel-btn-size-sm;
|
|
77
|
+
|
|
78
|
+
.carousel-control-prev-icon,
|
|
79
|
+
.carousel-control-next-icon {
|
|
80
|
+
width: $carousel-btn-icon-size-sm;
|
|
81
|
+
height: $carousel-btn-icon-size-sm;
|
|
82
|
+
}
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
.carousel-control-lg {
|
|
86
|
+
width: $carousel-btn-size-lg;
|
|
87
|
+
height: $carousel-btn-size-lg;
|
|
88
|
+
|
|
89
|
+
.carousel-control-prev-icon,
|
|
90
|
+
.carousel-control-next-icon {
|
|
91
|
+
width: $carousel-btn-icon-size-lg;
|
|
92
|
+
height: $carousel-btn-icon-size-lg;
|
|
93
|
+
}
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
// ─── Indicator dots ──────────────────────────
|
|
97
|
+
$carousel-dot-size-sm: 8px;
|
|
98
|
+
$carousel-dot-size-md: 12px;
|
|
99
|
+
$carousel-dot-size-lg: 16px;
|
|
100
|
+
|
|
101
|
+
.carousel-indicators [data-bs-target] {
|
|
102
|
+
// Disable Bootstrap's opacity-based differentiation — use colour instead
|
|
103
|
+
--#{$prefix}carousel-indicator-opacity: 1;
|
|
104
|
+
--#{$prefix}carousel-indicator-active-opacity: 1;
|
|
105
|
+
|
|
106
|
+
width: $carousel-dot-size-md;
|
|
107
|
+
height: $carousel-dot-size-md;
|
|
108
|
+
border-radius: 50%;
|
|
109
|
+
background-color: $gray-200; // not-selected
|
|
110
|
+
border-top-color: transparent;
|
|
111
|
+
border-bottom-color: transparent;
|
|
112
|
+
transition: background-color 0.2s ease;
|
|
113
|
+
|
|
114
|
+
&.active {
|
|
115
|
+
background-color: $primary-600; // selected
|
|
116
|
+
}
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
// ─── Size variants (indicator dots) ─────────
|
|
120
|
+
.carousel-indicators-sm [data-bs-target] {
|
|
121
|
+
width: $carousel-dot-size-sm;
|
|
122
|
+
height: $carousel-dot-size-sm;
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
.carousel-indicators-lg [data-bs-target] {
|
|
126
|
+
width: $carousel-dot-size-lg;
|
|
127
|
+
height: $carousel-dot-size-lg;
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
// ─── Color variants ──────────────────────────────────────────
|
|
131
|
+
// neutral: matches btn-neutral
|
|
132
|
+
.carousel-control-neutral {
|
|
133
|
+
background-color: $neutral-950;
|
|
134
|
+
|
|
135
|
+
&:hover { background-color: $neutral-800; opacity: 1; }
|
|
136
|
+
&:active { background-color: $neutral-600; opacity: 1; }
|
|
137
|
+
&:disabled, &.disabled { background-color: $gray-200; }
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
// secondary: matches btn-secondary — light gray bg, primary-colored icon
|
|
141
|
+
.carousel-control-secondary {
|
|
142
|
+
background-color: $secondary-100;
|
|
143
|
+
|
|
144
|
+
.carousel-control-prev-icon { background-image: $carousel-primary-prev-icon; }
|
|
145
|
+
.carousel-control-next-icon { background-image: $carousel-primary-next-icon; }
|
|
146
|
+
|
|
147
|
+
&:hover { background-color: $secondary-200; opacity: 1; }
|
|
148
|
+
&:active { background-color: $secondary-300; opacity: 1; }
|
|
149
|
+
&:disabled, &.disabled { background-color: $secondary-50; }
|
|
150
|
+
}
|
|
151
|
+
|
|
152
|
+
// subtle: matches btn-subtle — transparent bg, dark neutral icon; gray fill on pressed
|
|
153
|
+
.carousel-control-subtle {
|
|
154
|
+
background-color: transparent;
|
|
155
|
+
|
|
156
|
+
.carousel-control-prev-icon { background-image: $carousel-dark-prev-icon; }
|
|
157
|
+
.carousel-control-next-icon { background-image: $carousel-dark-next-icon; }
|
|
158
|
+
|
|
159
|
+
&:hover { background-color: transparent; }
|
|
160
|
+
&:active { background-color: $secondary-200; opacity: 1; }
|
|
161
|
+
&:disabled, &.disabled {
|
|
162
|
+
background-color: transparent; opacity: 1;
|
|
163
|
+
color: $secondary-400;
|
|
164
|
+
}
|
|
165
|
+
}
|
|
166
|
+
|
|
167
|
+
// transparent: matches btn-transparent — fully transparent, primary icon
|
|
168
|
+
.carousel-control-transparent {
|
|
169
|
+
background-color: transparent;
|
|
170
|
+
|
|
171
|
+
.carousel-control-prev-icon { background-image: $carousel-primary-prev-icon; }
|
|
172
|
+
.carousel-control-next-icon { background-image: $carousel-primary-next-icon; }
|
|
173
|
+
|
|
174
|
+
&:hover { background-color: transparent; opacity: 0.8; }
|
|
175
|
+
&:active { background-color: transparent; opacity: 0.6; }
|
|
176
|
+
&:disabled, &.disabled { background-color: transparent; }
|
|
177
|
+
}
|
|
178
|
+
|
|
179
|
+
// light: white circle with dark chevron — for use on dark/image slides
|
|
180
|
+
.carousel-control-light {
|
|
181
|
+
background-color: rgba($white, 0.85);
|
|
182
|
+
|
|
183
|
+
.carousel-control-prev-icon { background-image: $carousel-dark-prev-icon; }
|
|
184
|
+
.carousel-control-next-icon { background-image: $carousel-dark-next-icon; }
|
|
185
|
+
|
|
186
|
+
&:hover { background-color: rgba($white, 0.95); opacity: 1; }
|
|
187
|
+
&:active { background-color: $white; opacity: 1; }
|
|
188
|
+
&:disabled, &.disabled { background-color: $gray-200; }
|
|
189
|
+
}
|
|
190
|
+
|
|
191
|
+
// danger: matches btn-danger-primary
|
|
192
|
+
.carousel-control-danger {
|
|
193
|
+
background-color: $danger-600;
|
|
194
|
+
|
|
195
|
+
&:hover { background-color: $danger-700; opacity: 1; }
|
|
196
|
+
&:active { background-color: $danger-800; opacity: 1; }
|
|
197
|
+
&:disabled, &.disabled { background-color: $gray-200; }
|
|
198
|
+
}
|