vitat-css 0.1.1 → 0.1.2
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.
- checksums.yaml +4 -4
- data/.DS_Store +0 -0
- data/.gitignore +146 -8
- data/.idea/.gitignore +5 -0
- data/.idea/modules.xml +8 -0
- data/.idea/vcs.xml +6 -0
- data/.idea/vitat-design-system.iml +12 -0
- data/.vscode/settings.json +3 -0
- data/HTML/.DS_Store +0 -0
- data/HTML/Components/Arabescos.html +87 -0
- data/HTML/Components/Buttons.html +105 -0
- data/HTML/Components/Card.html +337 -0
- data/HTML/Components/CardApp.html +201 -0
- data/HTML/Components/Inputs.html +105 -0
- data/HTML/Components/Lista.html +106 -0
- data/HTML/Components/Pagination.html +218 -0
- data/HTML/Components/Pills.html +94 -0
- data/HTML/Components/Revisado.html +163 -0
- data/JS/prism.js +12 -0
- data/bootstrap/scss/_accordion.scss +118 -0
- data/bootstrap/scss/_alert.scss +57 -0
- data/bootstrap/scss/_badge.scss +29 -0
- data/bootstrap/scss/_breadcrumb.scss +28 -0
- data/bootstrap/scss/_button-group.scss +139 -0
- data/bootstrap/scss/_buttons.scss +111 -0
- data/bootstrap/scss/_card.scss +216 -0
- data/bootstrap/scss/_carousel.scss +229 -0
- data/bootstrap/scss/_close.scss +40 -0
- data/bootstrap/scss/_containers.scss +41 -0
- data/bootstrap/scss/_dropdown.scss +240 -0
- data/bootstrap/scss/_forms.scss +9 -0
- data/bootstrap/scss/_functions.scss +302 -0
- data/bootstrap/scss/_grid.scss +33 -0
- data/bootstrap/scss/_helpers.scss +9 -0
- data/bootstrap/scss/_images.scss +42 -0
- data/bootstrap/scss/_list-group.scss +174 -0
- data/bootstrap/scss/_mixins.scss +43 -0
- data/bootstrap/scss/_modal.scss +209 -0
- data/bootstrap/scss/_nav.scss +139 -0
- data/bootstrap/scss/_navbar.scss +335 -0
- data/bootstrap/scss/_offcanvas.scss +83 -0
- data/bootstrap/scss/_pagination.scss +64 -0
- data/bootstrap/scss/_placeholders.scss +51 -0
- data/bootstrap/scss/_popover.scss +158 -0
- data/bootstrap/scss/_progress.scss +48 -0
- data/bootstrap/scss/_reboot.scss +625 -0
- data/bootstrap/scss/_root.scss +54 -0
- data/bootstrap/scss/_spinners.scss +69 -0
- data/bootstrap/scss/_tables.scss +155 -0
- data/bootstrap/scss/_toasts.scss +51 -0
- data/bootstrap/scss/_tooltip.scss +115 -0
- data/bootstrap/scss/_transitions.scss +27 -0
- data/bootstrap/scss/_type.scss +104 -0
- data/bootstrap/scss/_utilities.scss +630 -0
- data/bootstrap/scss/_variables.scss +1641 -0
- data/bootstrap/scss/bootstrap-grid.scss +67 -0
- data/bootstrap/scss/bootstrap-reboot.scss +13 -0
- data/bootstrap/scss/bootstrap-utilities.scss +18 -0
- data/bootstrap/scss/bootstrap.scss +53 -0
- data/bootstrap/scss/forms/_floating-labels.scss +63 -0
- data/bootstrap/scss/forms/_form-check.scss +152 -0
- data/bootstrap/scss/forms/_form-control.scss +219 -0
- data/bootstrap/scss/forms/_form-range.scss +91 -0
- data/bootstrap/scss/forms/_form-select.scss +72 -0
- data/bootstrap/scss/forms/_form-text.scss +11 -0
- data/bootstrap/scss/forms/_input-group.scss +121 -0
- data/bootstrap/scss/forms/_labels.scss +36 -0
- data/bootstrap/scss/forms/_validation.scss +12 -0
- data/bootstrap/scss/helpers/_clearfix.scss +3 -0
- data/bootstrap/scss/helpers/_colored-links.scss +12 -0
- data/bootstrap/scss/helpers/_position.scss +30 -0
- data/bootstrap/scss/helpers/_ratio.scss +26 -0
- data/bootstrap/scss/helpers/_stacks.scss +15 -0
- data/bootstrap/scss/helpers/_stretched-link.scss +15 -0
- data/bootstrap/scss/helpers/_text-truncation.scss +7 -0
- data/bootstrap/scss/helpers/_visually-hidden.scss +8 -0
- data/bootstrap/scss/helpers/_vr.scss +8 -0
- data/bootstrap/scss/mixins/_alert.scss +11 -0
- data/bootstrap/scss/mixins/_backdrop.scss +14 -0
- data/bootstrap/scss/mixins/_border-radius.scss +78 -0
- data/bootstrap/scss/mixins/_box-shadow.scss +18 -0
- data/bootstrap/scss/mixins/_breakpoints.scss +127 -0
- data/bootstrap/scss/mixins/_buttons.scss +133 -0
- data/bootstrap/scss/mixins/_caret.scss +64 -0
- data/bootstrap/scss/mixins/_clearfix.scss +9 -0
- data/bootstrap/scss/mixins/_color-scheme.scss +7 -0
- data/bootstrap/scss/mixins/_container.scss +9 -0
- data/bootstrap/scss/mixins/_deprecate.scss +10 -0
- data/bootstrap/scss/mixins/_forms.scss +144 -0
- data/bootstrap/scss/mixins/_gradients.scss +47 -0
- data/bootstrap/scss/mixins/_grid.scss +151 -0
- data/bootstrap/scss/mixins/_image.scss +16 -0
- data/bootstrap/scss/mixins/_list-group.scss +24 -0
- data/bootstrap/scss/mixins/_lists.scss +7 -0
- data/bootstrap/scss/mixins/_pagination.scss +31 -0
- data/bootstrap/scss/mixins/_reset-text.scss +17 -0
- data/bootstrap/scss/mixins/_resize.scss +6 -0
- data/bootstrap/scss/mixins/_table-variants.scss +21 -0
- data/bootstrap/scss/mixins/_text-truncate.scss +8 -0
- data/bootstrap/scss/mixins/_transition.scss +26 -0
- data/bootstrap/scss/mixins/_utilities.scss +89 -0
- data/bootstrap/scss/mixins/_visually-hidden.scss +29 -0
- data/bootstrap/scss/utilities/_api.scss +47 -0
- data/bootstrap/scss/vendor/_rfs.scss +354 -0
- data/css/prism.css +4 -0
- data/css/style.css +6 -0
- data/gulpfile.js +35 -0
- data/img/.DS_Store +0 -0
- data/img/arrow-active.png +0 -0
- data/img/arrow-disable.png +0 -0
- data/img/arrow.png +0 -0
- data/img/close.png +0 -0
- data/img/phone.png +0 -0
- data/img/placeholder.png +0 -0
- data/img/placeholder_avatar.png +0 -0
- data/img/qr-code-loja.png +0 -0
- data/img/store_icon.png +0 -0
- data/index.html +33 -0
- data/install_nvm.sh +425 -0
- data/package-lock.json +4233 -0
- data/package.json +9 -0
- data/scss/.DS_Store +0 -0
- data/scss/guide/.DS_Store +0 -0
- data/scss/guide/_variables.scss +171 -0
- data/scss/guide/components/_animations.scss +8 -0
- data/scss/guide/components/_typography.scss +157 -0
- data/scss/guide/components/arabescos/arabescos.scss +47 -0
- data/scss/guide/components/buttons/btn.scss +26 -0
- data/scss/guide/components/buttons/btn__large.scss +10 -0
- data/scss/guide/components/buttons/btn__primary.scss +11 -0
- data/scss/guide/components/buttons/btn__secondary.scss +11 -0
- data/scss/guide/components/buttons/btn__tertiary.scss +11 -0
- data/scss/guide/components/cardapp/cardapp.scss +151 -0
- data/scss/guide/components/cards/card.scss +58 -0
- data/scss/guide/components/cards/card__horizontal.scss +35 -0
- data/scss/guide/components/cards/card__horizontal__small.scss +9 -0
- data/scss/guide/components/inputs/_checkbox.scss +45 -0
- data/scss/guide/components/inputs/_text.scss +8 -0
- data/scss/guide/components/lista/lista.scss +31 -0
- data/scss/guide/components/pagination/pagination.scss +81 -0
- data/scss/guide/components/pills/pill.scss +31 -0
- data/scss/guide/components/pills/pill__full.scss +8 -0
- data/scss/guide/components/pills/pill__secundary.scss +8 -0
- data/scss/guide/components/pills/pill__small.scss +8 -0
- data/scss/guide/components/revisado/revisado.scss +52 -0
- data/scss/guide/style.scss +96 -0
- metadata +147 -12
- data/CODE_OF_CONDUCT.md +0 -74
- data/Gemfile +0 -6
- data/LICENSE.txt +0 -21
- data/Rakefile +0 -2
- data/bin/console +0 -14
- data/bin/setup +0 -8
- data/lib/vitat/css/version.rb +0 -5
- data/lib/vitat/css.rb +0 -8
- data/vitat-css.gemspec +0 -41
data/package.json
ADDED
data/scss/.DS_Store
ADDED
Binary file
|
Binary file
|
@@ -0,0 +1,171 @@
|
|
1
|
+
//GLOBAL TOKENS
|
2
|
+
|
3
|
+
//GLOBAL TOKENS -- LINE HEIGHT
|
4
|
+
|
5
|
+
$line-height-default: 100%;
|
6
|
+
$line-height-xs: 115%;
|
7
|
+
$line-height-sm: 120%;
|
8
|
+
$line-height-md: 133%;
|
9
|
+
$line-height-lg: 150%;
|
10
|
+
$line-height-xl: 170%;
|
11
|
+
$line-height-xxl: 200%;
|
12
|
+
|
13
|
+
//GLOBAL TOKENS -- FONT SIZE
|
14
|
+
|
15
|
+
$font-size-nano: 10px;
|
16
|
+
$font-size-xxxs: 12px;
|
17
|
+
$font-size-xxs: 14px;
|
18
|
+
$font-size-xs: 16px;
|
19
|
+
$font-size-sm: 18px;
|
20
|
+
$font-size-md: 20px;
|
21
|
+
$font-size-lg: 24px;
|
22
|
+
$font-size-xl: 32px;
|
23
|
+
$font-size-xxl: 40px;
|
24
|
+
$font-size-xxxl: 48px;
|
25
|
+
$font-size-display: 64px;
|
26
|
+
$font-size-giant: 80px;
|
27
|
+
|
28
|
+
//GLOBAL TOKENS -- BORDER RADIUS
|
29
|
+
|
30
|
+
$border-radius-none: 0px;
|
31
|
+
$border-radius-xs: 4px;
|
32
|
+
$border-radius-SM: 8px;
|
33
|
+
$border-radius-md: 16px;
|
34
|
+
$border-radius-lg: 24px;
|
35
|
+
$border-radius-pill: 500px;
|
36
|
+
$border-radius-circular: 50%;
|
37
|
+
|
38
|
+
//GLOBAL TOKENS -- BORDER WIDTH
|
39
|
+
|
40
|
+
$border-width-hairline: 1px;
|
41
|
+
$border-width-thin: 2px;
|
42
|
+
$border-width-thick: 4px;
|
43
|
+
$border-width-heavy: 8px;
|
44
|
+
|
45
|
+
//GLOBAL TOKENS -- OPACITY LEVELS
|
46
|
+
|
47
|
+
$opacity-level-semiopaque: 0.8;
|
48
|
+
$opacity-level-intense: 0.64;
|
49
|
+
$opacity-level-medium: 0.32;
|
50
|
+
$opacity-level-light: 0.16;
|
51
|
+
$opacity-level-semitransparent: 0.08;
|
52
|
+
|
53
|
+
//GLOBAL TOKENS -- OPACITY SHADOW
|
54
|
+
|
55
|
+
$shadow-level-1: 0px 4px 8px rgba(0, 0, 0, 0.08);
|
56
|
+
$shadow-level-2: 0px 8px 24px rgba(0, 0, 0, 0.16);
|
57
|
+
$shadow-level-3: 0px 16px 32px rgba(0, 0, 0, 0.16);
|
58
|
+
$shadow-level-4: 0px 16px 48px rgba(0, 0, 0, 0.24);
|
59
|
+
|
60
|
+
//GLOBAL TOKENS -- SIZING
|
61
|
+
|
62
|
+
$sizing-quarck: 4px;
|
63
|
+
$sizing-nano: 8px;
|
64
|
+
$sizing-xxxs: 16px;
|
65
|
+
$sizing-xxs: 24px;
|
66
|
+
$sizing-xs: 32px;
|
67
|
+
$sizing-sm: 40px;
|
68
|
+
$sizing-md: 48px;
|
69
|
+
$sizing-lg: 56px;
|
70
|
+
$sizing-xl: 64px;
|
71
|
+
$sizing-xxl: 80px;
|
72
|
+
$sizing-xxxl: 120px;
|
73
|
+
$sizing-huge: 160px;
|
74
|
+
$sizing-giant: 200px;
|
75
|
+
|
76
|
+
//GLOBAL TOKENS -- SPACING
|
77
|
+
|
78
|
+
$spacing-quarck: 4px;
|
79
|
+
$spacing-nano: 8px;
|
80
|
+
$spacing-xxxs: 16px;
|
81
|
+
$spacing-xxs: 24px;
|
82
|
+
$spacing-xs: 32px;
|
83
|
+
$spacing-sm: 40px;
|
84
|
+
$spacing-md: 48px;
|
85
|
+
$spacing-lg: 56px;
|
86
|
+
$spacing-xl: 64px;
|
87
|
+
$spacing-xxl: 80px;
|
88
|
+
$spacing-xxxl: 120px;
|
89
|
+
$spacing-huge: 160px;
|
90
|
+
$spacing-giant: 200px;
|
91
|
+
|
92
|
+
//GLOBAL TOKENS -- SPACING INSET
|
93
|
+
|
94
|
+
$spacing_inset-quarck: 4px;
|
95
|
+
$spacing_inset-nano: 8px;
|
96
|
+
$spacing_inset-xs: 16px;
|
97
|
+
$spacing_inset-sm: 24px;
|
98
|
+
$spacing_inset-md: 32px;
|
99
|
+
$spacing_inset-lg: 40px;
|
100
|
+
$spacing_inset-xl: 64px;
|
101
|
+
|
102
|
+
//DESIGN SYSTEM VITAT
|
103
|
+
|
104
|
+
//DESIGN SYSTEM VITAT -- FONT FAMILY
|
105
|
+
|
106
|
+
$font-family-highlight: "Livvic", sans-serif;
|
107
|
+
$font-family-base: "Livvic", sans-serif;
|
108
|
+
|
109
|
+
//DESIGN SYSTEM VITAT -- FONT WEIGHT
|
110
|
+
|
111
|
+
$font-weight-bold: 700;
|
112
|
+
$font-weight-medium: 600;
|
113
|
+
$font-weight-regular: 400;
|
114
|
+
|
115
|
+
//DESIGN SYSTEM VITAT -- BRAND COLORS
|
116
|
+
|
117
|
+
$brand-color-primary-light: #ecf7c5;
|
118
|
+
$brand-color-primary-pure: #bfe338;
|
119
|
+
$brand-color-primary-medium: #8fae19;
|
120
|
+
$brand-color-primary-dark: #54670f;
|
121
|
+
|
122
|
+
$brand-color-secondary-light: #ede5f7;
|
123
|
+
$brand-color-secondary-pure: #5a3b94;
|
124
|
+
$brand-color-secondary-medium: #4e2f8a;
|
125
|
+
$brand-color-secondary-dark: #261e4d;
|
126
|
+
|
127
|
+
//DESIGN SYSTEM VITAT -- HIGHLIGHT COLORS
|
128
|
+
|
129
|
+
$highlight-color-light: #fad9bc;
|
130
|
+
$highlight-color-pure: #f08223;
|
131
|
+
$highlight-color-medium: #b55b0c;
|
132
|
+
$highlight-color-dark: #693507;
|
133
|
+
|
134
|
+
//DESIGN SYSTEM VITAT -- HEALTH COLORS
|
135
|
+
|
136
|
+
$health-color-primary: #f5a0c5;
|
137
|
+
$health-color-secondary: #ede7c4;
|
138
|
+
|
139
|
+
//DESIGN SYSTEM VITAT -- WELL-BEING COLORS
|
140
|
+
|
141
|
+
$well-being-color-primary: #ffee87;
|
142
|
+
$well-being-color-secondary: #a58fc4;
|
143
|
+
|
144
|
+
//DESIGN SYSTEM VITAT -- NEUTRAL COLORS
|
145
|
+
|
146
|
+
$neutral-color-low-pure: #002b49;
|
147
|
+
$neutral-color-low-dark: #142028;
|
148
|
+
$neutral-color-low-medium: #374051;
|
149
|
+
$neutral-color-low-light: #5a6072;
|
150
|
+
|
151
|
+
$neutral-color-high-pure: #ffffff;
|
152
|
+
$neutral-color-high-light: #f0f1f5;
|
153
|
+
$neutral-color-high-medium: #d3d6e0;
|
154
|
+
$neutral-color-high-dark: #959aab;
|
155
|
+
|
156
|
+
//DESIGN SYSTEM VITAT -- FEEDBACK COLORS
|
157
|
+
|
158
|
+
$feedback-color-warning-light: #fff9cc;
|
159
|
+
$feedback-color-warning-pure: #f2a807;
|
160
|
+
$feedback-color-warning-medium: #bf7500;
|
161
|
+
$feedback-color-warning-dark: #693a00;
|
162
|
+
|
163
|
+
$feedback-color-danger-light: #fde7ea;
|
164
|
+
$feedback-color-danger-pure: #d0434f;
|
165
|
+
$feedback-color-danger-medium: #9d101c;
|
166
|
+
$feedback-color-danger-dark: #540002;
|
167
|
+
|
168
|
+
$feedback-color-success-light: #daf5e8;
|
169
|
+
$feedback-color-success-pure: #138647;
|
170
|
+
$feedback-color-success-medium: #005314;
|
171
|
+
$feedback-color-success-dark: #002500;
|
@@ -0,0 +1,8 @@
|
|
1
|
+
@import "../variables";
|
2
|
+
|
3
|
+
|
4
|
+
@keyframes focus {
|
5
|
+
0% {box-shadow: 0px 0px 0px $border-width-thick $highlight-color-pure;}
|
6
|
+
50% {box-shadow: 0px 0px 0px $border-width-thin $highlight-color-pure;}
|
7
|
+
100% {box-shadow: 0px 0px 0px $border-width-thick $highlight-color-pure;}
|
8
|
+
}
|
@@ -0,0 +1,157 @@
|
|
1
|
+
@import "../variables";
|
2
|
+
|
3
|
+
//DESIGN SYSTEM VITAT -- TYPOGRAPHY
|
4
|
+
.heading {
|
5
|
+
font-family: $font-family-highlight;
|
6
|
+
margin-bottom: $spacing-xxxs;
|
7
|
+
color: $neutral-color-low-pure;
|
8
|
+
&__1 {
|
9
|
+
font-weight: $font-weight-medium;
|
10
|
+
font-size: $font-size-xl;
|
11
|
+
line-height: $line-height-xs;
|
12
|
+
@media (min-width: 1200px) {
|
13
|
+
font-size: $font-size-xxxl;
|
14
|
+
}
|
15
|
+
}
|
16
|
+
&__2 {
|
17
|
+
font-weight: $font-weight-regular;
|
18
|
+
font-size: $font-size-lg;
|
19
|
+
line-height: $line-height-sm;
|
20
|
+
@media (min-width: 1200px) {
|
21
|
+
font-size: $font-size-xl;
|
22
|
+
}
|
23
|
+
}
|
24
|
+
&__3 {
|
25
|
+
font-weight: $font-weight-medium;
|
26
|
+
font-size: $font-size-md;
|
27
|
+
line-height: $line-height-sm;
|
28
|
+
@media (min-width: 1200px) {
|
29
|
+
font-size: $font-size-lg;
|
30
|
+
}
|
31
|
+
}
|
32
|
+
&__4 {
|
33
|
+
font-weight: $font-weight-regular;
|
34
|
+
font-size: $font-size-md;
|
35
|
+
line-height: $line-height-sm;
|
36
|
+
@media (min-width: 1200px) {
|
37
|
+
font-size: $font-size-lg;
|
38
|
+
}
|
39
|
+
}
|
40
|
+
&__5 {
|
41
|
+
font-weight: $font-weight-bold;
|
42
|
+
font-size: $font-size-sm;
|
43
|
+
line-height: $line-height-sm;
|
44
|
+
@media (min-width: 1200px) {
|
45
|
+
font-size: $font-size-md;
|
46
|
+
}
|
47
|
+
}
|
48
|
+
&__6 {
|
49
|
+
font-weight: $font-weight-medium;
|
50
|
+
font-size: $font-size-xs;
|
51
|
+
line-height: $line-height-sm;
|
52
|
+
@media (min-width: 1200px) {
|
53
|
+
font-size: $font-size-sm;
|
54
|
+
}
|
55
|
+
}
|
56
|
+
&__7 {
|
57
|
+
font-weight: $font-weight-medium;
|
58
|
+
font-size: $font-size-xxs;
|
59
|
+
line-height: $line-height-sm;
|
60
|
+
@media (min-width: 1200px) {
|
61
|
+
font-size: $font-size-xs;
|
62
|
+
}
|
63
|
+
}
|
64
|
+
}
|
65
|
+
.body {
|
66
|
+
font-family: $font-family-base;
|
67
|
+
margin-bottom: $spacing-xxxs;
|
68
|
+
color: $neutral-color-low-medium;
|
69
|
+
&__1 {
|
70
|
+
font-weight: $font-weight-regular;
|
71
|
+
font-size: $font-size-xxs;
|
72
|
+
line-height: $line-height-lg;
|
73
|
+
@media (min-width: 1200px) {
|
74
|
+
font-size: $font-size-xs;
|
75
|
+
}
|
76
|
+
&--bold {
|
77
|
+
font-weight: $font-weight-bold;
|
78
|
+
}
|
79
|
+
&--italic {
|
80
|
+
font-style: italic;
|
81
|
+
}
|
82
|
+
&--link {
|
83
|
+
font-weight: $font-weight-medium;
|
84
|
+
text-decoration: underline;
|
85
|
+
color: $brand-color-secondary-pure;
|
86
|
+
&:hover {
|
87
|
+
color: $brand-color-secondary-medium;
|
88
|
+
text-decoration: underline;
|
89
|
+
}
|
90
|
+
&:visited {
|
91
|
+
text-decoration: underline;
|
92
|
+
color: $brand-color-secondary-pure;
|
93
|
+
}
|
94
|
+
}
|
95
|
+
}
|
96
|
+
&__2 {
|
97
|
+
font-weight: $font-weight-regular;
|
98
|
+
font-size: $font-size-xxxs;
|
99
|
+
line-height: $line-height-lg;
|
100
|
+
@media (min-width: 1200px) {
|
101
|
+
font-size: $font-size-xxs;
|
102
|
+
}
|
103
|
+
&--bold {
|
104
|
+
font-weight: $font-weight-medium;
|
105
|
+
}
|
106
|
+
&--italic {
|
107
|
+
font-style: italic;
|
108
|
+
}
|
109
|
+
&--link {
|
110
|
+
font-weight: $font-weight-medium;
|
111
|
+
text-decoration: underline;
|
112
|
+
color: $brand-color-secondary-pure;
|
113
|
+
&:hover {
|
114
|
+
color: $brand-color-secondary-medium;
|
115
|
+
text-decoration: underline;
|
116
|
+
}
|
117
|
+
&:visited {
|
118
|
+
text-decoration: underline;
|
119
|
+
color: $brand-color-secondary-pure;
|
120
|
+
}
|
121
|
+
}
|
122
|
+
}
|
123
|
+
}
|
124
|
+
.overline {
|
125
|
+
font-family: $font-family-base;
|
126
|
+
font-weight: $font-weight-medium;
|
127
|
+
font-size: $font-size-xxxs;
|
128
|
+
line-height: $line-height-lg;
|
129
|
+
margin-bottom: $spacing-quarck;
|
130
|
+
letter-spacing: 0.03em;
|
131
|
+
color: $neutral-color-low-light;
|
132
|
+
@media (min-width: 1200px) {
|
133
|
+
font-size: $font-size-xxxs;
|
134
|
+
}
|
135
|
+
}
|
136
|
+
.pillText {
|
137
|
+
font-family: $font-family-base;
|
138
|
+
font-weight: $font-weight-medium;
|
139
|
+
font-size: $font-size-xxxs;
|
140
|
+
line-height: $line-height-sm;
|
141
|
+
letter-spacing: 0.03em;
|
142
|
+
color: $neutral-color-low-medium;
|
143
|
+
@media (min-width: 1200px) {
|
144
|
+
font-size: $font-size-xxxs;
|
145
|
+
}
|
146
|
+
}
|
147
|
+
.link {
|
148
|
+
font-family: $font-family-base;
|
149
|
+
font-weight: $font-weight-medium;
|
150
|
+
font-size: $font-size-xxs;
|
151
|
+
line-height: $line-height-lg;
|
152
|
+
letter-spacing: 0.03em;
|
153
|
+
color: $neutral-color-low-pure;
|
154
|
+
@media (min-width: 1200px) {
|
155
|
+
font-size: $font-size-xs;
|
156
|
+
}
|
157
|
+
}
|
@@ -0,0 +1,47 @@
|
|
1
|
+
@import "_variables.scss";
|
2
|
+
@import "../_typography";
|
3
|
+
|
4
|
+
.wave {
|
5
|
+
height: 100%;
|
6
|
+
position: relative;
|
7
|
+
background-color: $well-being-color-secondary;
|
8
|
+
&__box {
|
9
|
+
padding: $sizing-xxs $sizing-xxxs $spacing-xxl $sizing-xxxs;
|
10
|
+
}
|
11
|
+
&__inverted {
|
12
|
+
transform: rotate(180deg);
|
13
|
+
height: $sizing-xs;
|
14
|
+
min-height: $sizing-xs;
|
15
|
+
}
|
16
|
+
&::before {
|
17
|
+
content: "";
|
18
|
+
position: absolute;
|
19
|
+
left: 0;
|
20
|
+
bottom: 0;
|
21
|
+
right: 0;
|
22
|
+
background-repeat: repeat;
|
23
|
+
height: 21px;
|
24
|
+
background-size: 94px 40px;
|
25
|
+
background-image: radial-gradient(
|
26
|
+
circle at 39px -32px,
|
27
|
+
transparent 49px,
|
28
|
+
#fff 50px
|
29
|
+
);
|
30
|
+
}
|
31
|
+
|
32
|
+
&::after {
|
33
|
+
content: "";
|
34
|
+
position: absolute;
|
35
|
+
left: 0;
|
36
|
+
bottom: 0;
|
37
|
+
right: 0;
|
38
|
+
background-repeat: repeat;
|
39
|
+
height: 30px;
|
40
|
+
background-size: 94px 40px;
|
41
|
+
background-image: radial-gradient(
|
42
|
+
circle at 86px 18px,
|
43
|
+
#fff 12px,
|
44
|
+
transparent 13px
|
45
|
+
);
|
46
|
+
}
|
47
|
+
}
|
@@ -0,0 +1,26 @@
|
|
1
|
+
@import "_variables.scss";
|
2
|
+
@import "../_typography";
|
3
|
+
|
4
|
+
.btn{
|
5
|
+
font-family:$font-family-base;
|
6
|
+
font-weight:$font-weight-medium;
|
7
|
+
padding:$spacing_inset-nano $spacing_inset-sm;
|
8
|
+
border-radius:$border-radius-pill;
|
9
|
+
text-align: center;
|
10
|
+
font-size:$font-size-xxs;
|
11
|
+
width:100%;
|
12
|
+
cursor:pointer;
|
13
|
+
@media(min-width:1200px) {
|
14
|
+
min-width:$sizing-xl;
|
15
|
+
}
|
16
|
+
&:focus{
|
17
|
+
animation: focus 2s infinite ease-in-out;
|
18
|
+
}
|
19
|
+
&:disabled{
|
20
|
+
background:$neutral-color-high-medium;
|
21
|
+
opacity: $opacity-level-medium;
|
22
|
+
}
|
23
|
+
}
|
24
|
+
|
25
|
+
|
26
|
+
|
@@ -0,0 +1,151 @@
|
|
1
|
+
@import "_variables.scss";
|
2
|
+
@import "../_typography";
|
3
|
+
@import "../../../../bootstrap/scss/modal";
|
4
|
+
|
5
|
+
.cardapp-bg {
|
6
|
+
background-color: $well-being-color-secondary;
|
7
|
+
}
|
8
|
+
|
9
|
+
.cardapp__link {
|
10
|
+
@extend .btn__primary;
|
11
|
+
display: flex;
|
12
|
+
justify-content: center;
|
13
|
+
padding: $font-size-xxxs 0;
|
14
|
+
}
|
15
|
+
|
16
|
+
.cardapp__btn {
|
17
|
+
display: contents;
|
18
|
+
border: none;
|
19
|
+
}
|
20
|
+
|
21
|
+
.cardapp {
|
22
|
+
@extend .card;
|
23
|
+
display: flex;
|
24
|
+
flex-direction: column;
|
25
|
+
justify-content: center;
|
26
|
+
align-items: center;
|
27
|
+
text-align: center;
|
28
|
+
padding: $sizing-xxxs;
|
29
|
+
|
30
|
+
@media (min-width: 1200px) {
|
31
|
+
text-align: start;
|
32
|
+
padding: $sizing-xxs;
|
33
|
+
align-items: flex-start;
|
34
|
+
|
35
|
+
&__wrapper {
|
36
|
+
padding-left: $sizing-xxs;
|
37
|
+
}
|
38
|
+
}
|
39
|
+
|
40
|
+
&__img {
|
41
|
+
width: $spacing-xl;
|
42
|
+
padding-bottom: $sizing-xxxs;
|
43
|
+
@media (min-width: 1200px) {
|
44
|
+
width: $spacing-xxl;
|
45
|
+
height: $spacing-xxl;
|
46
|
+
padding-bottom: 0%;
|
47
|
+
}
|
48
|
+
}
|
49
|
+
|
50
|
+
&__title {
|
51
|
+
margin-bottom: $sizing-nano;
|
52
|
+
color: $neutral-color-low-pure;
|
53
|
+
}
|
54
|
+
|
55
|
+
&__text {
|
56
|
+
padding-bottom: $sizing-xxxs;
|
57
|
+
@media (min-width: 1200px) {
|
58
|
+
padding-top: $spacing-nano;
|
59
|
+
padding-bottom: $spacing-xxs;
|
60
|
+
}
|
61
|
+
}
|
62
|
+
|
63
|
+
&__content {
|
64
|
+
display: flex;
|
65
|
+
flex-direction: column;
|
66
|
+
align-items: center;
|
67
|
+
@media (min-width: 1200px) {
|
68
|
+
display: flex;
|
69
|
+
flex-direction: row;
|
70
|
+
align-items: flex-start;
|
71
|
+
justify-content: center;
|
72
|
+
margin: 0;
|
73
|
+
}
|
74
|
+
}
|
75
|
+
|
76
|
+
&__imgbox {
|
77
|
+
padding: 0;
|
78
|
+
}
|
79
|
+
|
80
|
+
a,
|
81
|
+
p {
|
82
|
+
color: $neutral-color-low-pure;
|
83
|
+
text-decoration: none;
|
84
|
+
}
|
85
|
+
}
|
86
|
+
|
87
|
+
// Modal
|
88
|
+
|
89
|
+
.modal {
|
90
|
+
display: none;
|
91
|
+
}
|
92
|
+
|
93
|
+
.cardapp__modal {
|
94
|
+
border-radius: $border-radius-md;
|
95
|
+
color: $neutral-color-low-pure;
|
96
|
+
}
|
97
|
+
|
98
|
+
.modal-body {
|
99
|
+
display: flex;
|
100
|
+
flex-direction: column;
|
101
|
+
align-items: center;
|
102
|
+
}
|
103
|
+
|
104
|
+
.modal-header {
|
105
|
+
border: none;
|
106
|
+
padding: 12px 12px 12px auto;
|
107
|
+
}
|
108
|
+
|
109
|
+
.btn-close-modal {
|
110
|
+
width: $sizing-sm;
|
111
|
+
height: $sizing-sm;
|
112
|
+
border-radius: $border-radius-circular;
|
113
|
+
background-color: $neutral-color-high-light;
|
114
|
+
border: none;
|
115
|
+
cursor: pointer;
|
116
|
+
position: relative;
|
117
|
+
&::after {
|
118
|
+
background-repeat: no-repeat;
|
119
|
+
content: "";
|
120
|
+
background-image: url("/img/close.png");
|
121
|
+
position: absolute;
|
122
|
+
width: 12px;
|
123
|
+
height: 12px;
|
124
|
+
top: 50%;
|
125
|
+
left: 50%;
|
126
|
+
transform: translate(-50%, -50%);
|
127
|
+
background-size: cover;
|
128
|
+
}
|
129
|
+
}
|
130
|
+
|
131
|
+
.modal-footer-text {
|
132
|
+
margin: $spacing-quarck 0 $spacing-xl 0;
|
133
|
+
}
|
134
|
+
|
135
|
+
.modal-heading {
|
136
|
+
margin-bottom: $spacing-quarck;
|
137
|
+
}
|
138
|
+
|
139
|
+
.desktop {
|
140
|
+
display: none;
|
141
|
+
@media (min-width: 1200px) {
|
142
|
+
display: block;
|
143
|
+
}
|
144
|
+
}
|
145
|
+
|
146
|
+
.mobile {
|
147
|
+
display: block;
|
148
|
+
@media (min-width: 1200px) {
|
149
|
+
display: none;
|
150
|
+
}
|
151
|
+
}
|
@@ -0,0 +1,58 @@
|
|
1
|
+
@import "_variables.scss";
|
2
|
+
@import "../_typography";
|
3
|
+
@import "../animations";
|
4
|
+
|
5
|
+
.card {
|
6
|
+
display: flex;
|
7
|
+
flex-direction: column;
|
8
|
+
background: $neutral-color-high-pure;
|
9
|
+
border-radius: $spacing-xxxs;
|
10
|
+
box-shadow: $shadow-level-1;
|
11
|
+
text-decoration: none;
|
12
|
+
width: 100%;
|
13
|
+
.pill {
|
14
|
+
margin-bottom: 0px;
|
15
|
+
}
|
16
|
+
.heading {
|
17
|
+
margin-bottom: 0px;
|
18
|
+
}
|
19
|
+
.body {
|
20
|
+
margin-bottom: 0px;
|
21
|
+
}
|
22
|
+
|
23
|
+
&:focus {
|
24
|
+
animation: focus 2s infinite ease-in-out;
|
25
|
+
}
|
26
|
+
|
27
|
+
&__img {
|
28
|
+
border-radius: $spacing-xxxs $spacing-xxxs 0px 0px;
|
29
|
+
width: 100%;
|
30
|
+
object-fit: cover;
|
31
|
+
}
|
32
|
+
|
33
|
+
&__wrapper {
|
34
|
+
padding: $spacing-xxxs;
|
35
|
+
@media (min-width: 1200px) {
|
36
|
+
padding-bottom: $spacing-xs;
|
37
|
+
}
|
38
|
+
}
|
39
|
+
|
40
|
+
&__title {
|
41
|
+
padding-top: $spacing_inset-nano;
|
42
|
+
padding-bottom: $spacing_inset-nano;
|
43
|
+
margin: 0px;
|
44
|
+
}
|
45
|
+
&__text {
|
46
|
+
margin: 0px;
|
47
|
+
}
|
48
|
+
|
49
|
+
//CSS para demonstração
|
50
|
+
&__color {
|
51
|
+
background-color: #cec1e6;
|
52
|
+
padding: 50px 0;
|
53
|
+
|
54
|
+
.card__horizontal {
|
55
|
+
margin-bottom: $spacing_inset-xs;
|
56
|
+
}
|
57
|
+
}
|
58
|
+
}
|