]>
Commit | Line | Data |
---|---|---|
1 | /* You can add global styles to this file, and also import other style files */ | |
2 | @use './src/styles/defaults' as *; | |
3 | ||
4 | // Angular2-Tree Component | |
5 | @import '~@circlon/angular-tree-component/css/angular-tree-component.css'; | |
6 | ||
7 | // Fork-Awesome | |
8 | $fa-font-path: '~fork-awesome/fonts'; | |
9 | $font-family-icon: 'ForkAwesome'; | |
10 | ||
11 | $badge-font-size: 1rem; | |
12 | $form-feedback-font-size: 100%; | |
13 | $popover-max-width: 350px; | |
14 | $popover-font-size: 1rem; | |
15 | ||
16 | // https://getbootstrap.com/docs/4.5/layout/grid/#variables | |
17 | $grid-breakpoints: ( | |
18 | xs: 0, | |
19 | sm: 576px, | |
20 | md: 768px, | |
21 | lg: 992px, | |
22 | xl: 1200px, | |
23 | 2xl: 1450px | |
24 | ); | |
25 | ||
26 | @import '~bootstrap/scss/bootstrap'; | |
27 | @import '~fork-awesome/scss/fork-awesome'; | |
28 | @import 'app/ceph/dashboard/info-card/info-card-popover.scss'; | |
29 | @import './src/styles/bootstrap-extends'; | |
30 | ||
31 | @import './src/styles/ceph-custom/basics'; | |
32 | @import './src/styles/ceph-custom/buttons'; | |
33 | @import './src/styles/ceph-custom/dropdown'; | |
34 | @import './src/styles/ceph-custom/forms'; | |
35 | @import './src/styles/ceph-custom/grid'; | |
36 | @import './src/styles/ceph-custom/icons'; | |
37 | @import './src/styles/ceph-custom/navs'; | |
38 | @import './src/styles/ceph-custom/toast'; | |
39 | ||
40 | /* If javascript is disabled. */ | |
41 | .noscript { | |
42 | padding-top: 5em; | |
43 | } | |
44 | ||
45 | // TODO: Replace (cd-)col-form-label with something more generic. | |
46 | @include media-breakpoint-up(sm) { | |
47 | .col-form-label { | |
48 | text-align: right; | |
49 | } | |
50 | } | |
51 | ||
52 | .col-form-label { | |
53 | font-weight: 700; | |
54 | } | |
55 | ||
56 | //Displaying the password strength | |
57 | .password-strength-level { | |
58 | flex: 100%; | |
59 | margin-top: 2px; | |
60 | ||
61 | .weak, | |
62 | .ok, | |
63 | .strong, | |
64 | .very-strong { | |
65 | border-radius: 0.25rem; | |
66 | height: 13px; | |
67 | } | |
68 | ||
69 | .weak { | |
70 | background: $danger; | |
71 | width: 25%; | |
72 | } | |
73 | ||
74 | .ok { | |
75 | background: $warning; | |
76 | width: 50%; | |
77 | } | |
78 | ||
79 | .strong { | |
80 | background: $success; | |
81 | width: 75%; | |
82 | } | |
83 | ||
84 | .very-strong { | |
85 | background: darken($success, 15%); | |
86 | width: 100%; | |
87 | } | |
88 | } | |
89 | ||
90 | // Custom badges. | |
91 | .badge-background-gray, | |
92 | .badge-hdd { | |
93 | background-color: $gray-600; | |
94 | color: $white; | |
95 | } | |
96 | ||
97 | .badge-background-primary, | |
98 | .badge-ssd { | |
99 | background-color: $primary; | |
100 | color: $white; | |
101 | } | |
102 | ||
103 | .badge-tab { | |
104 | background-color: $gray-200; | |
105 | color: $gray-700; | |
106 | } | |
107 | ||
108 | .badge-cd-label-green { | |
109 | background-color: $green-300; | |
110 | color: $white; | |
111 | } | |
112 | ||
113 | .badge-cd-label-cyan { | |
114 | background-color: $cyan-300; | |
115 | color: $white; | |
116 | } | |
117 | ||
118 | .badge-cd-label-purple { | |
119 | background-color: $purple-300; | |
120 | color: $white; | |
121 | } | |
122 | ||
123 | .badge-cd-label-light-blue { | |
124 | background-color: $light-blue-300; | |
125 | color: $white; | |
126 | } | |
127 | ||
128 | .badge-cd-label-gold { | |
129 | background-color: $gold-300; | |
130 | color: $white; | |
131 | } | |
132 | ||
133 | .badge-cd-label-light-green { | |
134 | background-color: $light-green-300; | |
135 | color: $white; | |
136 | font-weight: bolder; | |
137 | } | |
138 | ||
139 | // angular-tree-component | |
140 | tree-root { | |
141 | tree-viewport { | |
142 | // Fix visual bug when tree is empty | |
143 | min-height: 1em; | |
144 | } | |
145 | } | |
146 | ||
147 | // Other | |
148 | tags-input .tags { | |
149 | border: 1px solid $gray-400; | |
150 | border-radius: 4px; | |
151 | box-shadow: inset 0 1px 1px rgba($black, 0.09); | |
152 | } | |
153 | ||
154 | .card-header { | |
155 | font-size: 1.3em; | |
156 | } | |
157 | ||
158 | .card-body h2:first-child { | |
159 | margin-top: 0; | |
160 | } | |
161 | ||
162 | .disabled { | |
163 | pointer-events: none; | |
164 | } | |
165 | ||
166 | a { | |
167 | &:hover { | |
168 | text-decoration: underline; | |
169 | } | |
170 | } | |
171 | ||
172 | .clickable, | |
173 | a { | |
174 | cursor: pointer; | |
175 | text-decoration: none; | |
176 | } | |
177 | ||
178 | a.nav-link, | |
179 | a.btn-light { | |
180 | text-decoration: none; | |
181 | } | |
182 | ||
183 | // Overrides the badge to rounded-pill | |
184 | .badge { | |
185 | @extend .badge, .rounded-pill, .mb-1; | |
186 | } | |
187 | ||
188 | // Overriding badges to match the class name of badges in Bootstrap v5 | |
189 | .badge-primary { | |
190 | @extend .badge, .bg-primary; | |
191 | } | |
192 | ||
193 | .badge-secondary { | |
194 | @extend .badge, .bg-secondary; | |
195 | } | |
196 | ||
197 | .badge-success { | |
198 | @extend .badge, .bg-success; | |
199 | } | |
200 | ||
201 | .badge-danger { | |
202 | @extend .badge, .bg-danger; | |
203 | } | |
204 | ||
205 | .badge-info { | |
206 | @extend .badge, .bg-primary; | |
207 | } | |
208 | ||
209 | .badge-warning { | |
210 | @extend .badge, .bg-warning, .text-dark; | |
211 | } | |
212 | ||
213 | .badge-light { | |
214 | @extend .badge, .bg-light, .text-dark; | |
215 | } | |
216 | ||
217 | .badge-dark { | |
218 | @extend .badge, .bg-dark; | |
219 | } | |
220 | ||
221 | formly-form { | |
222 | .ng-touched.ng-invalid { | |
223 | @extend .is-invalid; | |
224 | } | |
225 | ||
226 | .ng-touched.ng-valid { | |
227 | @extend .is-valid; | |
228 | } | |
229 | ||
230 | .form-label { | |
231 | @extend .cd-col-form-label; | |
232 | text-align: start; | |
233 | white-space: nowrap; | |
234 | width: fit-content; | |
235 | ||
236 | span[aria-hidden='true'] { | |
237 | color: $danger; | |
238 | } | |
239 | } | |
240 | } |