sdga-ui 1.0.9 → 1.0.11
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 +545 -205
- package/css/dga-ui.css.map +1 -1
- package/package.json +1 -1
- package/theme/_variables.scss +1 -1
- package/theme/components/_buttons.scss +2 -2
- package/theme/components/_dropdowns.scss +2 -2
- package/theme/components/_forms-floating.scss +12 -11
- package/theme/components/_forms-form-control.scss +80 -0
- package/theme/components/_forms.scss +28 -1
- package/theme/components/_navbar.scss +10 -9
- package/theme/config/_base.scss +1 -1
- package/theme/customizations/_alerts.scss +29 -45
- package/theme/customizations/_cards.scss +2 -71
- package/theme/customizations/_forms-form-control.scss +107 -0
- package/theme/customizations/_forms.scss +1 -1
- package/theme/customizations/_global.scss +7 -4
- package/theme/customizations/_icon-featured.scss +122 -0
- package/theme/customizations/_navbar.scss +167 -0
- package/theme/dga-ui.scss +2 -0
- package/theme/components/_forms-inputs.scss +0 -70
- package/theme/customizations/_forms-inputs.scss +0 -9
|
@@ -0,0 +1,122 @@
|
|
|
1
|
+
// Define card icon color variants
|
|
2
|
+
$card-icon-variants: (
|
|
3
|
+
"success": (icon-bg: $success-50,
|
|
4
|
+
icon-color: $success-700 ),
|
|
5
|
+
"primary": (icon-bg: $primary-50,
|
|
6
|
+
icon-color: $primary-700 ),
|
|
7
|
+
"danger": (icon-bg: $danger-50,
|
|
8
|
+
icon-color: $danger-700 ),
|
|
9
|
+
"warning": (icon-bg: $warning-50,
|
|
10
|
+
icon-color: $warning-700 ),
|
|
11
|
+
"info": (icon-bg: $info-50,
|
|
12
|
+
icon-color: $info-700 ),
|
|
13
|
+
"secondary": (icon-bg: $secondary-50,
|
|
14
|
+
icon-color: $secondary-700 ),
|
|
15
|
+
"neutral": (icon-bg: $neutral-50,
|
|
16
|
+
icon-color: $neutral-700 )
|
|
17
|
+
);
|
|
18
|
+
|
|
19
|
+
.dga-featured-icon {
|
|
20
|
+
display: flex;
|
|
21
|
+
width: 3rem;
|
|
22
|
+
height: 3rem;
|
|
23
|
+
justify-content: center;
|
|
24
|
+
align-items: center;
|
|
25
|
+
gap: .5rem;
|
|
26
|
+
background: $primary-50;
|
|
27
|
+
font-size: 1.3rem;
|
|
28
|
+
|
|
29
|
+
&.dga-featured-icon-sm {
|
|
30
|
+
width: 2.5rem;
|
|
31
|
+
height: 2.5rem;
|
|
32
|
+
font-size: 0.875rem;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
&.dga-featured-icon-md {
|
|
36
|
+
width: 3rem;
|
|
37
|
+
height: 3rem;
|
|
38
|
+
font-size: 1.3rem;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
&.dga-featured-icon-lg {
|
|
42
|
+
width: 4rem;
|
|
43
|
+
height: 4rem;
|
|
44
|
+
font-size: 1.875rem;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
&.dga-featured-icon-circle {
|
|
48
|
+
border-radius: $radius-full;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
&.dga-featured-icon-rounded-lg {
|
|
52
|
+
border-radius: $radius-lg;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
&.dga-featured-icon-rounded-sm {
|
|
56
|
+
border-radius: $radius-sm;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
&.dga-featured-icon-rounded-md,
|
|
60
|
+
&.dga-featured-icon-rounded {
|
|
61
|
+
border-radius: $radius-md;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
@each $name, $colors in $card-icon-variants {
|
|
65
|
+
&.dga-featured-icon-#{$name} {
|
|
66
|
+
background-color: map-get($colors, icon-bg);
|
|
67
|
+
|
|
68
|
+
svg,
|
|
69
|
+
i {
|
|
70
|
+
fill: map-get($colors, icon-color);
|
|
71
|
+
color: map-get($colors, icon-color);
|
|
72
|
+
stroke: map-get($colors, icon-color);
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
&.disabled {
|
|
76
|
+
background-color: $gray-100;
|
|
77
|
+
|
|
78
|
+
svg,
|
|
79
|
+
i {
|
|
80
|
+
fill: $gray-400;
|
|
81
|
+
color: $gray-400;
|
|
82
|
+
stroke: $gray-400;
|
|
83
|
+
}
|
|
84
|
+
}
|
|
85
|
+
}
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
&.disabled {
|
|
89
|
+
background-color: $gray-100;
|
|
90
|
+
|
|
91
|
+
svg,
|
|
92
|
+
i {
|
|
93
|
+
fill: $gray-400;
|
|
94
|
+
color: $gray-400;
|
|
95
|
+
stroke: $gray-400;
|
|
96
|
+
}
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
svg,
|
|
100
|
+
i {
|
|
101
|
+
fill: $primary-600;
|
|
102
|
+
color: $primary-600;
|
|
103
|
+
font-size: 1em;
|
|
104
|
+
display: grid;
|
|
105
|
+
place-items: center;
|
|
106
|
+
}
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
|
|
110
|
+
.on-primary {
|
|
111
|
+
.dga-featured-icon,
|
|
112
|
+
&.dga-featured-icon {
|
|
113
|
+
background: rgba($white, 0.1);
|
|
114
|
+
|
|
115
|
+
svg,
|
|
116
|
+
i {
|
|
117
|
+
stroke: $white;
|
|
118
|
+
fill: $white;
|
|
119
|
+
color: $white;
|
|
120
|
+
}
|
|
121
|
+
}
|
|
122
|
+
}
|
|
@@ -0,0 +1,167 @@
|
|
|
1
|
+
.navbar {
|
|
2
|
+
position: relative;
|
|
3
|
+
|
|
4
|
+
.nav-link {
|
|
5
|
+
display: flex;
|
|
6
|
+
height: 4.5rem;
|
|
7
|
+
min-width: 4.5rem;
|
|
8
|
+
font-size: 1rem;
|
|
9
|
+
padding: var(--spacing-md, $navbar-nav-link-padding-y) var(--spacing-xl, $navbar-nav-link-padding-x);
|
|
10
|
+
justify-content: center;
|
|
11
|
+
align-items: center;
|
|
12
|
+
border-radius: $radius-sm;
|
|
13
|
+
gap: 0.25rem;
|
|
14
|
+
position: relative;
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
&.icon-top {
|
|
18
|
+
flex-direction: column;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
&::before {
|
|
22
|
+
content: '';
|
|
23
|
+
transition: transform 0.3s ease-in-out;
|
|
24
|
+
position: absolute;
|
|
25
|
+
bottom: 0;
|
|
26
|
+
left: 50%;
|
|
27
|
+
transform: translateX(-50%);
|
|
28
|
+
width: calc(100% - 1rem);
|
|
29
|
+
height: 0.375rem;
|
|
30
|
+
border-radius: $radius-full;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
&:hover {
|
|
34
|
+
background-color: $neutral-100;
|
|
35
|
+
|
|
36
|
+
&::before {
|
|
37
|
+
background-color: $neutral-400;
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
&:active {
|
|
42
|
+
background-color: $neutral-200;
|
|
43
|
+
|
|
44
|
+
&::before {
|
|
45
|
+
background-color: $neutral-800;
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
&:disabled,
|
|
50
|
+
&.disabled {
|
|
51
|
+
pointer-events: none;
|
|
52
|
+
cursor: default;
|
|
53
|
+
background-color: transparent;
|
|
54
|
+
color: $neutral-400;
|
|
55
|
+
|
|
56
|
+
&::before {
|
|
57
|
+
background-color: transparent;
|
|
58
|
+
}
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
&.active {
|
|
62
|
+
background-color: $primary-600;
|
|
63
|
+
color: $white;
|
|
64
|
+
|
|
65
|
+
&::before {
|
|
66
|
+
background-color: $primary-400;
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
&:hover {
|
|
70
|
+
background-color: $primary-700;
|
|
71
|
+
|
|
72
|
+
&::before {
|
|
73
|
+
background-color: $primary-400;
|
|
74
|
+
}
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
&:active {
|
|
78
|
+
background-color: $primary-900;
|
|
79
|
+
|
|
80
|
+
&::before {
|
|
81
|
+
background-color: $primary-400;
|
|
82
|
+
}
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
&:disabled,
|
|
86
|
+
&.disabled {
|
|
87
|
+
pointer-events: none;
|
|
88
|
+
cursor: default;
|
|
89
|
+
color: $neutral-400;
|
|
90
|
+
background-color: transparent;
|
|
91
|
+
|
|
92
|
+
&::before {
|
|
93
|
+
background-color: $neutral-200;
|
|
94
|
+
}
|
|
95
|
+
}
|
|
96
|
+
}
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
.dropdown {
|
|
100
|
+
position: unset;
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
.dropdown-menu {
|
|
104
|
+
height: max-content;
|
|
105
|
+
transition: transform 1s ease-in-out;
|
|
106
|
+
inset: auto 0 auto auto !important;
|
|
107
|
+
padding: 2rem 5rem;
|
|
108
|
+
width: 100%;
|
|
109
|
+
border: none;
|
|
110
|
+
margin: 0;
|
|
111
|
+
border-top-left-radius: 0;
|
|
112
|
+
border-top-right-radius: 0;
|
|
113
|
+
|
|
114
|
+
.dropdown-header {
|
|
115
|
+
color: $primary;
|
|
116
|
+
font-size: $font-size-lg;
|
|
117
|
+
font-weight: $font-weight-bold;
|
|
118
|
+
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
.dropdown-item-group {
|
|
122
|
+
display: flex;
|
|
123
|
+
flex-direction: column;
|
|
124
|
+
gap: .25rem;
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
&.show {
|
|
128
|
+
display: flex;
|
|
129
|
+
align-items: flex-start;
|
|
130
|
+
align-content: flex-start;
|
|
131
|
+
gap: 1.5rem var(--spacing-3xl, 1.5rem);
|
|
132
|
+
align-self: stretch;
|
|
133
|
+
flex-wrap: wrap;
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
}
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
|
|
140
|
+
.on-primary {
|
|
141
|
+
.dropdown-menu,
|
|
142
|
+
&.dropdown-menu {
|
|
143
|
+
|
|
144
|
+
.dropdown-item,
|
|
145
|
+
.dropdown-header {
|
|
146
|
+
color: $white;
|
|
147
|
+
}
|
|
148
|
+
|
|
149
|
+
.dropdown-item:hover {
|
|
150
|
+
background-color: rgb($white, 0.2);
|
|
151
|
+
color: $white;
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
.dropdown-item:active {
|
|
155
|
+
background-color: rgb($white, 0.4);
|
|
156
|
+
color: $white;
|
|
157
|
+
}
|
|
158
|
+
|
|
159
|
+
.dropdown-item.disabled,
|
|
160
|
+
.dropdown-item.disabled:hover,
|
|
161
|
+
.dropdown-item.disabled:active {
|
|
162
|
+
background-color: transparent;
|
|
163
|
+
color: $neutral-400;
|
|
164
|
+
}
|
|
165
|
+
|
|
166
|
+
}
|
|
167
|
+
}
|
package/theme/dga-ui.scss
CHANGED
|
@@ -16,6 +16,7 @@
|
|
|
16
16
|
|
|
17
17
|
// Import all component customizations
|
|
18
18
|
@import './customizations/global';
|
|
19
|
+
@import './customizations/icon-featured';
|
|
19
20
|
@import './customizations/links';
|
|
20
21
|
@import './customizations/buttons';
|
|
21
22
|
@import './customizations/cards';
|
|
@@ -26,3 +27,4 @@
|
|
|
26
27
|
@import './customizations/forms-switch';
|
|
27
28
|
@import './customizations/tables';
|
|
28
29
|
@import './customizations/footer';
|
|
30
|
+
@import './customizations/navbar';
|
|
@@ -1,70 +0,0 @@
|
|
|
1
|
-
// Bootstrap 5.3 - Form Input Variables
|
|
2
|
-
|
|
3
|
-
@use 'sass:color';
|
|
4
|
-
|
|
5
|
-
// ============================================
|
|
6
|
-
// FORM INPUTS
|
|
7
|
-
// ============================================
|
|
8
|
-
|
|
9
|
-
// Form Controls
|
|
10
|
-
$input-padding-y: 0.5rem;
|
|
11
|
-
$input-padding-x: 0.75rem;
|
|
12
|
-
$input-font-family: $font-family-base;
|
|
13
|
-
$input-font-size: $font-size-base;
|
|
14
|
-
$input-font-weight: $font-weight-base;
|
|
15
|
-
$input-line-height: $line-height-base;
|
|
16
|
-
|
|
17
|
-
$input-padding-y-sm: 0.375rem;
|
|
18
|
-
$input-padding-x-sm: 0.625rem;
|
|
19
|
-
$input-font-size-sm: $font-size-sm;
|
|
20
|
-
|
|
21
|
-
$input-padding-y-lg: 0.625rem;
|
|
22
|
-
$input-padding-x-lg: 1rem;
|
|
23
|
-
$input-font-size-lg: $font-size-lg;
|
|
24
|
-
|
|
25
|
-
$input-bg: $white;
|
|
26
|
-
$input-disabled-color: null;
|
|
27
|
-
$input-disabled-bg: $gray-200;
|
|
28
|
-
$input-disabled-border-color: null;
|
|
29
|
-
|
|
30
|
-
$input-color: $body-color;
|
|
31
|
-
$input-border-color: $gray-300;
|
|
32
|
-
$input-border-width: 1px;
|
|
33
|
-
$input-box-shadow: inset 0 1px 2px rgba($black, 0.075);
|
|
34
|
-
|
|
35
|
-
$input-border-radius: $radius-sm;
|
|
36
|
-
$input-border-radius-sm: $radius-sm;
|
|
37
|
-
$input-border-radius-lg: $radius-lg;
|
|
38
|
-
|
|
39
|
-
$input-focus-bg: $input-bg;
|
|
40
|
-
$input-focus-border-color: color.scale($primary, $lightness: 50%);
|
|
41
|
-
$input-focus-color: $input-color;
|
|
42
|
-
$input-focus-width: 0.25rem;
|
|
43
|
-
$input-focus-box-shadow: 0 0 0 $input-focus-width rgba($primary, 0.25);
|
|
44
|
-
|
|
45
|
-
$input-placeholder-color: $gray-500;
|
|
46
|
-
$input-plaintext-color: $body-color;
|
|
47
|
-
|
|
48
|
-
$input-height-border: calc(#{$input-border-width} * 2);
|
|
49
|
-
$input-height-inner: calc(#{$input-line-height * 1em} + #{$input-padding-y * 2});
|
|
50
|
-
$input-height-inner-half: calc(#{$input-line-height * 0.5em} + #{$input-padding-y});
|
|
51
|
-
$input-height-inner-quarter: calc(#{$input-line-height * 0.25em} + calc(#{$input-padding-y} / 2));
|
|
52
|
-
$input-height: calc(#{$input-line-height * 1em} + #{$input-padding-y * 2} + #{$input-height-border});
|
|
53
|
-
$input-height-sm: calc(#{$input-line-height * 1em} + #{$input-padding-y-sm * 2} + #{$input-height-border});
|
|
54
|
-
$input-height-lg: calc(#{$input-line-height * 1em} + #{$input-padding-y-lg * 2} + #{$input-height-border});
|
|
55
|
-
|
|
56
|
-
$input-transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
|
|
57
|
-
|
|
58
|
-
// Form Labels
|
|
59
|
-
$form-label-margin-bottom: 0.5rem;
|
|
60
|
-
$form-label-font-size: $font-size-base;
|
|
61
|
-
$form-label-font-style: null;
|
|
62
|
-
$form-label-font-weight: 500;
|
|
63
|
-
$form-label-color: $body-color;
|
|
64
|
-
|
|
65
|
-
// Form Text
|
|
66
|
-
$form-text-margin-top: 0.25rem;
|
|
67
|
-
$form-text-font-size: $font-size-sm;
|
|
68
|
-
$form-text-font-style: null;
|
|
69
|
-
$form-text-font-weight: null;
|
|
70
|
-
$form-text-color: $gray-600;
|