cats-ui-lib 2.2.5 → 2.2.7
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/README.md +780 -780
- package/assets/images/building-07.svg +3 -3
- package/assets/images/check-disabled.svg +3 -3
- package/assets/images/check-white.svg +3 -3
- package/assets/images/chevron-down-white.svg +3 -3
- package/assets/images/chevron-down.svg +3 -3
- package/assets/images/chevron-right-blue.svg +3 -3
- package/assets/images/chevron-right-red.svg +3 -3
- package/assets/images/chevron-up.svg +3 -3
- package/assets/images/clock-refresh.svg +3 -3
- package/assets/images/file-check-02.svg +3 -3
- package/assets/images/filled-dropdown.svg +3 -3
- package/assets/images/indeterminate.svg +3 -3
- package/assets/images/key-01.svg +3 -3
- package/assets/images/log-out-04.svg +3 -3
- package/assets/images/menu-collapsed.svg +4 -4
- package/assets/images/message-smile-square.svg +3 -3
- package/assets/images/settings-04.svg +3 -3
- package/assets/images/shuffle-01.svg +3 -3
- package/assets/images/spanish-flag.svg +72 -72
- package/assets/images/star-yellow.svg +3 -3
- package/assets/images/user-image.svg +9 -9
- package/assets/images/users-01.svg +3 -3
- package/assets/images/x-cancel-btn.svg +3 -3
- package/fesm2022/cats-ui-lib.mjs +153 -139
- package/fesm2022/cats-ui-lib.mjs.map +1 -1
- package/index.d.ts +2 -3
- package/package.json +1 -1
- package/styles/_fonts.scss +82 -82
- package/styles/_functions.scss +10 -10
- package/styles/_index.scss +6 -6
- package/styles/_mixins.scss +65 -65
- package/styles/_reset.scss +69 -69
- package/styles/_utilities.scss +894 -894
- package/styles/_variables.scss +126 -126
package/index.d.ts
CHANGED
|
@@ -171,7 +171,7 @@ declare class SingleSelectComponent implements OnInit, OnChanges, ControlValueAc
|
|
|
171
171
|
singleSelectConfig: SingleSelectConfig;
|
|
172
172
|
selectedOption: any;
|
|
173
173
|
onSelection: EventEmitter<any>;
|
|
174
|
-
|
|
174
|
+
valueField: string;
|
|
175
175
|
showDropdown: boolean;
|
|
176
176
|
searchText: string;
|
|
177
177
|
inValid: boolean;
|
|
@@ -179,7 +179,6 @@ declare class SingleSelectComponent implements OnInit, OnChanges, ControlValueAc
|
|
|
179
179
|
disableControl: boolean;
|
|
180
180
|
onScroll: any;
|
|
181
181
|
parentNativeElement: any;
|
|
182
|
-
selectedObj: any;
|
|
183
182
|
selectedData: TemplateRef<any>;
|
|
184
183
|
constructor(cd: ChangeDetectorRef, el: ElementRef);
|
|
185
184
|
ngOnInit(): void;
|
|
@@ -247,7 +246,7 @@ declare class SingleSelectComponent implements OnInit, OnChanges, ControlValueAc
|
|
|
247
246
|
onDivScroll(event: any): void;
|
|
248
247
|
get filteredOptionsValue(): any[];
|
|
249
248
|
static ɵfac: i0.ɵɵFactoryDeclaration<SingleSelectComponent, never>;
|
|
250
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<SingleSelectComponent, "cats-ui-single-select", never, { "optionList": { "alias": "optionList"; "required": false; }; "singleSelectConfig": { "alias": "singleSelectConfig"; "required": false; }; "selectedOption": { "alias": "selectedOption"; "required": false; }; "
|
|
249
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<SingleSelectComponent, "cats-ui-single-select", never, { "optionList": { "alias": "optionList"; "required": false; }; "singleSelectConfig": { "alias": "singleSelectConfig"; "required": false; }; "selectedOption": { "alias": "selectedOption"; "required": false; }; "valueField": { "alias": "valueField"; "required": false; }; "parentNativeElement": { "alias": "parentNativeElement"; "required": false; }; }, { "onSelection": "onSelection"; "onScroll": "onScroll"; }, ["selectedData"], never, true, never>;
|
|
251
250
|
}
|
|
252
251
|
|
|
253
252
|
declare const MULTI_SELECT_CONTROL_VALUE_ACCESSOR: any;
|
package/package.json
CHANGED
package/styles/_fonts.scss
CHANGED
|
@@ -1,82 +1,82 @@
|
|
|
1
|
-
// @use url("https://fonts.googleapis.com/css2?family=Rethink+Sans:ital,wght@0,400..800;1,400..800&display=swap");
|
|
2
|
-
|
|
3
|
-
@use "mixins" as *;
|
|
4
|
-
|
|
5
|
-
:root {
|
|
6
|
-
--fs-6: 6px;
|
|
7
|
-
--fs-8: 8px;
|
|
8
|
-
--fs-10: 10px;
|
|
9
|
-
--fs-12: 12px;
|
|
10
|
-
--fs-14: 14px;
|
|
11
|
-
--fs-16: 16px;
|
|
12
|
-
--fs-18: 18px;
|
|
13
|
-
--fs-20: 20px;
|
|
14
|
-
--fs-24: 24px;
|
|
15
|
-
--fs-28: 28px;
|
|
16
|
-
--fs-30: 30px;
|
|
17
|
-
--fs-32: 32px;
|
|
18
|
-
--fs-42: 42px;
|
|
19
|
-
--fs-48: 48px;
|
|
20
|
-
--img-w: 28px;
|
|
21
|
-
--scale: 1;
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
@include width-range($tablet, $mediumDesktop) {
|
|
25
|
-
:root {
|
|
26
|
-
--scale: 1.5;
|
|
27
|
-
--fs-6: calc(6px / var(--scale));
|
|
28
|
-
--fs-8: calc(8px / var(--scale));
|
|
29
|
-
--fs-10: calc(10px / var(--scale));
|
|
30
|
-
--fs-12: calc(12px / var(--scale));
|
|
31
|
-
--fs-14: calc(14px / var(--scale));
|
|
32
|
-
--fs-16: calc(16px / var(--scale));
|
|
33
|
-
--fs-18: calc(18px / var(--scale));
|
|
34
|
-
--fs-20: calc(20px / var(--scale));
|
|
35
|
-
--fs-24: calc(24px / var(--scale));
|
|
36
|
-
--fs-28: calc(28px / var(--scale));
|
|
37
|
-
--fs-30: calc(30px / var(--scale));
|
|
38
|
-
--fs-32: calc(32px / var(--scale));
|
|
39
|
-
--fs-42: calc(42px / var(--scale));
|
|
40
|
-
--fs-48: calc(48px / var(--scale));
|
|
41
|
-
}
|
|
42
|
-
}
|
|
43
|
-
|
|
44
|
-
@include width-range($largeDesktop, $extraLargeDesktop) {
|
|
45
|
-
:root {
|
|
46
|
-
--scale: 1.33;
|
|
47
|
-
--fs-6: calc(6px / var(--scale));
|
|
48
|
-
--fs-8: calc(8px / var(--scale));
|
|
49
|
-
--fs-10: calc(10px / var(--scale));
|
|
50
|
-
--fs-12: calc(12px / var(--scale));
|
|
51
|
-
--fs-14: calc(14px / var(--scale));
|
|
52
|
-
--fs-16: calc(16px / var(--scale));
|
|
53
|
-
--fs-18: calc(18px / var(--scale));
|
|
54
|
-
--fs-20: calc(20px / var(--scale));
|
|
55
|
-
--fs-24: calc(24px / var(--scale));
|
|
56
|
-
--fs-28: calc(28px / var(--scale));
|
|
57
|
-
--fs-30: calc(30px / var(--scale));
|
|
58
|
-
--fs-32: calc(32px / var(--scale));
|
|
59
|
-
--fs-42: calc(42px / var(--scale));
|
|
60
|
-
--fs-48: calc(48px / var(--scale));
|
|
61
|
-
}
|
|
62
|
-
}
|
|
63
|
-
|
|
64
|
-
@include width-range($xxlargeDesktop, $ultraWideDesktop) {
|
|
65
|
-
:root {
|
|
66
|
-
--scale: 1.25;
|
|
67
|
-
--fs-6: calc(6px / var(--scale));
|
|
68
|
-
--fs-8: calc(8px / var(--scale));
|
|
69
|
-
--fs-10: calc(10px / var(--scale));
|
|
70
|
-
--fs-12: calc(12px / var(--scale));
|
|
71
|
-
--fs-14: calc(14px / var(--scale));
|
|
72
|
-
--fs-16: calc(16px / var(--scale));
|
|
73
|
-
--fs-18: calc(18px / var(--scale));
|
|
74
|
-
--fs-20: calc(20px / var(--scale));
|
|
75
|
-
--fs-24: calc(24px / var(--scale));
|
|
76
|
-
--fs-28: calc(28px / var(--scale));
|
|
77
|
-
--fs-30: calc(30px / var(--scale));
|
|
78
|
-
--fs-32: calc(32px / var(--scale));
|
|
79
|
-
--fs-42: calc(42px / var(--scale));
|
|
80
|
-
--fs-48: calc(48px / var(--scale));
|
|
81
|
-
}
|
|
82
|
-
}
|
|
1
|
+
// @use url("https://fonts.googleapis.com/css2?family=Rethink+Sans:ital,wght@0,400..800;1,400..800&display=swap");
|
|
2
|
+
|
|
3
|
+
@use "mixins" as *;
|
|
4
|
+
|
|
5
|
+
:root {
|
|
6
|
+
--fs-6: 6px;
|
|
7
|
+
--fs-8: 8px;
|
|
8
|
+
--fs-10: 10px;
|
|
9
|
+
--fs-12: 12px;
|
|
10
|
+
--fs-14: 14px;
|
|
11
|
+
--fs-16: 16px;
|
|
12
|
+
--fs-18: 18px;
|
|
13
|
+
--fs-20: 20px;
|
|
14
|
+
--fs-24: 24px;
|
|
15
|
+
--fs-28: 28px;
|
|
16
|
+
--fs-30: 30px;
|
|
17
|
+
--fs-32: 32px;
|
|
18
|
+
--fs-42: 42px;
|
|
19
|
+
--fs-48: 48px;
|
|
20
|
+
--img-w: 28px;
|
|
21
|
+
--scale: 1;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
@include width-range($tablet, $mediumDesktop) {
|
|
25
|
+
:root {
|
|
26
|
+
--scale: 1.5;
|
|
27
|
+
--fs-6: calc(6px / var(--scale));
|
|
28
|
+
--fs-8: calc(8px / var(--scale));
|
|
29
|
+
--fs-10: calc(10px / var(--scale));
|
|
30
|
+
--fs-12: calc(12px / var(--scale));
|
|
31
|
+
--fs-14: calc(14px / var(--scale));
|
|
32
|
+
--fs-16: calc(16px / var(--scale));
|
|
33
|
+
--fs-18: calc(18px / var(--scale));
|
|
34
|
+
--fs-20: calc(20px / var(--scale));
|
|
35
|
+
--fs-24: calc(24px / var(--scale));
|
|
36
|
+
--fs-28: calc(28px / var(--scale));
|
|
37
|
+
--fs-30: calc(30px / var(--scale));
|
|
38
|
+
--fs-32: calc(32px / var(--scale));
|
|
39
|
+
--fs-42: calc(42px / var(--scale));
|
|
40
|
+
--fs-48: calc(48px / var(--scale));
|
|
41
|
+
}
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
@include width-range($largeDesktop, $extraLargeDesktop) {
|
|
45
|
+
:root {
|
|
46
|
+
--scale: 1.33;
|
|
47
|
+
--fs-6: calc(6px / var(--scale));
|
|
48
|
+
--fs-8: calc(8px / var(--scale));
|
|
49
|
+
--fs-10: calc(10px / var(--scale));
|
|
50
|
+
--fs-12: calc(12px / var(--scale));
|
|
51
|
+
--fs-14: calc(14px / var(--scale));
|
|
52
|
+
--fs-16: calc(16px / var(--scale));
|
|
53
|
+
--fs-18: calc(18px / var(--scale));
|
|
54
|
+
--fs-20: calc(20px / var(--scale));
|
|
55
|
+
--fs-24: calc(24px / var(--scale));
|
|
56
|
+
--fs-28: calc(28px / var(--scale));
|
|
57
|
+
--fs-30: calc(30px / var(--scale));
|
|
58
|
+
--fs-32: calc(32px / var(--scale));
|
|
59
|
+
--fs-42: calc(42px / var(--scale));
|
|
60
|
+
--fs-48: calc(48px / var(--scale));
|
|
61
|
+
}
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
@include width-range($xxlargeDesktop, $ultraWideDesktop) {
|
|
65
|
+
:root {
|
|
66
|
+
--scale: 1.25;
|
|
67
|
+
--fs-6: calc(6px / var(--scale));
|
|
68
|
+
--fs-8: calc(8px / var(--scale));
|
|
69
|
+
--fs-10: calc(10px / var(--scale));
|
|
70
|
+
--fs-12: calc(12px / var(--scale));
|
|
71
|
+
--fs-14: calc(14px / var(--scale));
|
|
72
|
+
--fs-16: calc(16px / var(--scale));
|
|
73
|
+
--fs-18: calc(18px / var(--scale));
|
|
74
|
+
--fs-20: calc(20px / var(--scale));
|
|
75
|
+
--fs-24: calc(24px / var(--scale));
|
|
76
|
+
--fs-28: calc(28px / var(--scale));
|
|
77
|
+
--fs-30: calc(30px / var(--scale));
|
|
78
|
+
--fs-32: calc(32px / var(--scale));
|
|
79
|
+
--fs-42: calc(42px / var(--scale));
|
|
80
|
+
--fs-48: calc(48px / var(--scale));
|
|
81
|
+
}
|
|
82
|
+
}
|
package/styles/_functions.scss
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
@use "sass:math";
|
|
2
|
-
$font-size: 12px;
|
|
3
|
-
html {
|
|
4
|
-
font-size: $font-size;
|
|
5
|
-
}
|
|
6
|
-
@function rem($pxValue) {
|
|
7
|
-
// @return calc(math.div($pxValue, $font-size) * 1rem / var(--scale));
|
|
8
|
-
$val: calc($pxValue/$font-size);
|
|
9
|
-
@return calc($val * 1rem / var(--scale));
|
|
10
|
-
}
|
|
1
|
+
@use "sass:math";
|
|
2
|
+
$font-size: 12px;
|
|
3
|
+
html {
|
|
4
|
+
font-size: $font-size;
|
|
5
|
+
}
|
|
6
|
+
@function rem($pxValue) {
|
|
7
|
+
// @return calc(math.div($pxValue, $font-size) * 1rem / var(--scale));
|
|
8
|
+
$val: calc($pxValue/$font-size);
|
|
9
|
+
@return calc($val * 1rem / var(--scale));
|
|
10
|
+
}
|
package/styles/_index.scss
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
@forward "variables";
|
|
2
|
-
@forward "mixins";
|
|
3
|
-
@forward "functions";
|
|
4
|
-
@forward "utilities";
|
|
5
|
-
@forward "fonts";
|
|
6
|
-
@forward "reset";
|
|
1
|
+
@forward "variables";
|
|
2
|
+
@forward "mixins";
|
|
3
|
+
@forward "functions";
|
|
4
|
+
@forward "utilities";
|
|
5
|
+
@forward "fonts";
|
|
6
|
+
@forward "reset";
|
package/styles/_mixins.scss
CHANGED
|
@@ -1,65 +1,65 @@
|
|
|
1
|
-
@use "variables" as *;
|
|
2
|
-
@use "functions" as *;
|
|
3
|
-
|
|
4
|
-
$tablet: 1024px;
|
|
5
|
-
$mediumDesktop: 1280px;
|
|
6
|
-
$largeDesktop: 1360px;
|
|
7
|
-
$extraLargeDesktop: 1440px;
|
|
8
|
-
$xxlargeDesktop: 1536px;
|
|
9
|
-
$ultraWideDesktop: 1919px;
|
|
10
|
-
|
|
11
|
-
// --------------- MEDIA QUERY ------------------------
|
|
12
|
-
@mixin width-range($min, $max) {
|
|
13
|
-
@media only screen and (min-width: $min) and (max-width: $max) {
|
|
14
|
-
@content;
|
|
15
|
-
}
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
// -------------- BOX HEIGHT AND WIDTH -------
|
|
19
|
-
@mixin box($width, $height: 100%) {
|
|
20
|
-
width: $width;
|
|
21
|
-
height: $height;
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
// ------------- FONT STYLE
|
|
25
|
-
@mixin fontStyle($fontSize, $lineHeight, $fontWeight: 400) {
|
|
26
|
-
font-size: $fontSize;
|
|
27
|
-
line-height: $lineHeight;
|
|
28
|
-
font-weight: $fontWeight;
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
// ------------- FLEX PROPERTY ---------------------
|
|
32
|
-
@mixin flex(
|
|
33
|
-
$justify: flex-start,
|
|
34
|
-
$align: stretch,
|
|
35
|
-
$gap: 0,
|
|
36
|
-
$direction: row,
|
|
37
|
-
$wrap: nowrap
|
|
38
|
-
) {
|
|
39
|
-
display: flex;
|
|
40
|
-
flex-direction: $direction;
|
|
41
|
-
justify-content: $justify;
|
|
42
|
-
align-items: $align;
|
|
43
|
-
flex-wrap: $wrap;
|
|
44
|
-
gap: $gap;
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
// USE CASE: IF YOU WANT ONLY 2 PROP. THEN OTHER PROP WILL APPLY AS DEFAULT PROP.
|
|
48
|
-
// @include flex(center, stretch,row, wrap, 10px);
|
|
49
|
-
|
|
50
|
-
// ------------- Border PROPERTY with width,color and radius ---------------------
|
|
51
|
-
@mixin border(
|
|
52
|
-
$width: rem(1px),
|
|
53
|
-
$style: solid,
|
|
54
|
-
$color: var(--border-core-default),
|
|
55
|
-
$radius: rem(4px)
|
|
56
|
-
) {
|
|
57
|
-
border: $width $style $color;
|
|
58
|
-
border-radius: $radius;
|
|
59
|
-
}
|
|
60
|
-
|
|
61
|
-
// Positioning element
|
|
62
|
-
@mixin position($top, $left) {
|
|
63
|
-
top: $top;
|
|
64
|
-
left: $left;
|
|
65
|
-
}
|
|
1
|
+
@use "variables" as *;
|
|
2
|
+
@use "functions" as *;
|
|
3
|
+
|
|
4
|
+
$tablet: 1024px;
|
|
5
|
+
$mediumDesktop: 1280px;
|
|
6
|
+
$largeDesktop: 1360px;
|
|
7
|
+
$extraLargeDesktop: 1440px;
|
|
8
|
+
$xxlargeDesktop: 1536px;
|
|
9
|
+
$ultraWideDesktop: 1919px;
|
|
10
|
+
|
|
11
|
+
// --------------- MEDIA QUERY ------------------------
|
|
12
|
+
@mixin width-range($min, $max) {
|
|
13
|
+
@media only screen and (min-width: $min) and (max-width: $max) {
|
|
14
|
+
@content;
|
|
15
|
+
}
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
// -------------- BOX HEIGHT AND WIDTH -------
|
|
19
|
+
@mixin box($width, $height: 100%) {
|
|
20
|
+
width: $width;
|
|
21
|
+
height: $height;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
// ------------- FONT STYLE
|
|
25
|
+
@mixin fontStyle($fontSize, $lineHeight, $fontWeight: 400) {
|
|
26
|
+
font-size: $fontSize;
|
|
27
|
+
line-height: $lineHeight;
|
|
28
|
+
font-weight: $fontWeight;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
// ------------- FLEX PROPERTY ---------------------
|
|
32
|
+
@mixin flex(
|
|
33
|
+
$justify: flex-start,
|
|
34
|
+
$align: stretch,
|
|
35
|
+
$gap: 0,
|
|
36
|
+
$direction: row,
|
|
37
|
+
$wrap: nowrap
|
|
38
|
+
) {
|
|
39
|
+
display: flex;
|
|
40
|
+
flex-direction: $direction;
|
|
41
|
+
justify-content: $justify;
|
|
42
|
+
align-items: $align;
|
|
43
|
+
flex-wrap: $wrap;
|
|
44
|
+
gap: $gap;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
// USE CASE: IF YOU WANT ONLY 2 PROP. THEN OTHER PROP WILL APPLY AS DEFAULT PROP.
|
|
48
|
+
// @include flex(center, stretch,row, wrap, 10px);
|
|
49
|
+
|
|
50
|
+
// ------------- Border PROPERTY with width,color and radius ---------------------
|
|
51
|
+
@mixin border(
|
|
52
|
+
$width: rem(1px),
|
|
53
|
+
$style: solid,
|
|
54
|
+
$color: var(--border-core-default),
|
|
55
|
+
$radius: rem(4px)
|
|
56
|
+
) {
|
|
57
|
+
border: $width $style $color;
|
|
58
|
+
border-radius: $radius;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
// Positioning element
|
|
62
|
+
@mixin position($top, $left) {
|
|
63
|
+
top: $top;
|
|
64
|
+
left: $left;
|
|
65
|
+
}
|
package/styles/_reset.scss
CHANGED
|
@@ -1,69 +1,69 @@
|
|
|
1
|
-
// Box Sizing
|
|
2
|
-
*,
|
|
3
|
-
*::before,
|
|
4
|
-
*::after {
|
|
5
|
-
box-sizing: border-box;
|
|
6
|
-
margin: 0;
|
|
7
|
-
padding: 0;
|
|
8
|
-
font-family: "Open Sans", sans-serif;
|
|
9
|
-
}
|
|
10
|
-
|
|
11
|
-
body {
|
|
12
|
-
font-size: 100%;
|
|
13
|
-
}
|
|
14
|
-
|
|
15
|
-
// Font-inflation
|
|
16
|
-
html {
|
|
17
|
-
-moz-text-size-adjust: none;
|
|
18
|
-
-webkit-text-size-adjust: none;
|
|
19
|
-
-ms-text-size-adjust: none;
|
|
20
|
-
text-size-adjust: none;
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
// Remove default margin and padding
|
|
24
|
-
h1,
|
|
25
|
-
h2,
|
|
26
|
-
h3,
|
|
27
|
-
h4,
|
|
28
|
-
h5,
|
|
29
|
-
h6,
|
|
30
|
-
ul,
|
|
31
|
-
ol p {
|
|
32
|
-
margin: 0;
|
|
33
|
-
padding: 0;
|
|
34
|
-
text-wrap: pretty;
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
// Remove list styles on ul, ol elements
|
|
38
|
-
ul[role="list"],
|
|
39
|
-
ol[role="list"] {
|
|
40
|
-
list-style: none;
|
|
41
|
-
}
|
|
42
|
-
|
|
43
|
-
ul {
|
|
44
|
-
list-style: none;
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
// images
|
|
48
|
-
img,
|
|
49
|
-
picture {
|
|
50
|
-
max-width: 100%;
|
|
51
|
-
display: block;
|
|
52
|
-
}
|
|
53
|
-
|
|
54
|
-
::-webkit-scrollbar {
|
|
55
|
-
width: 8px;
|
|
56
|
-
height: 8px;
|
|
57
|
-
}
|
|
58
|
-
|
|
59
|
-
::-webkit-scrollbar-thumb {
|
|
60
|
-
background: var(--border-core-default);
|
|
61
|
-
border-radius: 8px;
|
|
62
|
-
}
|
|
63
|
-
|
|
64
|
-
input,
|
|
65
|
-
select,
|
|
66
|
-
textarea {
|
|
67
|
-
outline: none;
|
|
68
|
-
box-shadow: none;
|
|
69
|
-
}
|
|
1
|
+
// Box Sizing
|
|
2
|
+
*,
|
|
3
|
+
*::before,
|
|
4
|
+
*::after {
|
|
5
|
+
box-sizing: border-box;
|
|
6
|
+
margin: 0;
|
|
7
|
+
padding: 0;
|
|
8
|
+
font-family: "Open Sans", sans-serif;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
body {
|
|
12
|
+
font-size: 100%;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
// Font-inflation
|
|
16
|
+
html {
|
|
17
|
+
-moz-text-size-adjust: none;
|
|
18
|
+
-webkit-text-size-adjust: none;
|
|
19
|
+
-ms-text-size-adjust: none;
|
|
20
|
+
text-size-adjust: none;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
// Remove default margin and padding
|
|
24
|
+
h1,
|
|
25
|
+
h2,
|
|
26
|
+
h3,
|
|
27
|
+
h4,
|
|
28
|
+
h5,
|
|
29
|
+
h6,
|
|
30
|
+
ul,
|
|
31
|
+
ol p {
|
|
32
|
+
margin: 0;
|
|
33
|
+
padding: 0;
|
|
34
|
+
text-wrap: pretty;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
// Remove list styles on ul, ol elements
|
|
38
|
+
ul[role="list"],
|
|
39
|
+
ol[role="list"] {
|
|
40
|
+
list-style: none;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
ul {
|
|
44
|
+
list-style: none;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
// images
|
|
48
|
+
img,
|
|
49
|
+
picture {
|
|
50
|
+
max-width: 100%;
|
|
51
|
+
display: block;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
::-webkit-scrollbar {
|
|
55
|
+
width: 8px;
|
|
56
|
+
height: 8px;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
::-webkit-scrollbar-thumb {
|
|
60
|
+
background: var(--border-core-default);
|
|
61
|
+
border-radius: 8px;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
input,
|
|
65
|
+
select,
|
|
66
|
+
textarea {
|
|
67
|
+
outline: none;
|
|
68
|
+
box-shadow: none;
|
|
69
|
+
}
|