vitat-css 0.1.0 → 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.
Files changed (156) hide show
  1. checksums.yaml +4 -4
  2. data/.DS_Store +0 -0
  3. data/.gitignore +146 -8
  4. data/.idea/.gitignore +5 -0
  5. data/.idea/modules.xml +8 -0
  6. data/.idea/vcs.xml +6 -0
  7. data/.idea/vitat-design-system.iml +12 -0
  8. data/.vscode/settings.json +3 -0
  9. data/HTML/.DS_Store +0 -0
  10. data/HTML/Components/Arabescos.html +87 -0
  11. data/HTML/Components/Buttons.html +105 -0
  12. data/HTML/Components/Card.html +337 -0
  13. data/HTML/Components/CardApp.html +201 -0
  14. data/HTML/Components/Inputs.html +105 -0
  15. data/HTML/Components/Lista.html +106 -0
  16. data/HTML/Components/Pagination.html +218 -0
  17. data/HTML/Components/Pills.html +94 -0
  18. data/HTML/Components/Revisado.html +163 -0
  19. data/JS/prism.js +12 -0
  20. data/bootstrap/scss/_accordion.scss +118 -0
  21. data/bootstrap/scss/_alert.scss +57 -0
  22. data/bootstrap/scss/_badge.scss +29 -0
  23. data/bootstrap/scss/_breadcrumb.scss +28 -0
  24. data/bootstrap/scss/_button-group.scss +139 -0
  25. data/bootstrap/scss/_buttons.scss +111 -0
  26. data/bootstrap/scss/_card.scss +216 -0
  27. data/bootstrap/scss/_carousel.scss +229 -0
  28. data/bootstrap/scss/_close.scss +40 -0
  29. data/bootstrap/scss/_containers.scss +41 -0
  30. data/bootstrap/scss/_dropdown.scss +240 -0
  31. data/bootstrap/scss/_forms.scss +9 -0
  32. data/bootstrap/scss/_functions.scss +302 -0
  33. data/bootstrap/scss/_grid.scss +33 -0
  34. data/bootstrap/scss/_helpers.scss +9 -0
  35. data/bootstrap/scss/_images.scss +42 -0
  36. data/bootstrap/scss/_list-group.scss +174 -0
  37. data/bootstrap/scss/_mixins.scss +43 -0
  38. data/bootstrap/scss/_modal.scss +209 -0
  39. data/bootstrap/scss/_nav.scss +139 -0
  40. data/bootstrap/scss/_navbar.scss +335 -0
  41. data/bootstrap/scss/_offcanvas.scss +83 -0
  42. data/bootstrap/scss/_pagination.scss +64 -0
  43. data/bootstrap/scss/_placeholders.scss +51 -0
  44. data/bootstrap/scss/_popover.scss +158 -0
  45. data/bootstrap/scss/_progress.scss +48 -0
  46. data/bootstrap/scss/_reboot.scss +625 -0
  47. data/bootstrap/scss/_root.scss +54 -0
  48. data/bootstrap/scss/_spinners.scss +69 -0
  49. data/bootstrap/scss/_tables.scss +155 -0
  50. data/bootstrap/scss/_toasts.scss +51 -0
  51. data/bootstrap/scss/_tooltip.scss +115 -0
  52. data/bootstrap/scss/_transitions.scss +27 -0
  53. data/bootstrap/scss/_type.scss +104 -0
  54. data/bootstrap/scss/_utilities.scss +630 -0
  55. data/bootstrap/scss/_variables.scss +1641 -0
  56. data/bootstrap/scss/bootstrap-grid.scss +67 -0
  57. data/bootstrap/scss/bootstrap-reboot.scss +13 -0
  58. data/bootstrap/scss/bootstrap-utilities.scss +18 -0
  59. data/bootstrap/scss/bootstrap.scss +53 -0
  60. data/bootstrap/scss/forms/_floating-labels.scss +63 -0
  61. data/bootstrap/scss/forms/_form-check.scss +152 -0
  62. data/bootstrap/scss/forms/_form-control.scss +219 -0
  63. data/bootstrap/scss/forms/_form-range.scss +91 -0
  64. data/bootstrap/scss/forms/_form-select.scss +72 -0
  65. data/bootstrap/scss/forms/_form-text.scss +11 -0
  66. data/bootstrap/scss/forms/_input-group.scss +121 -0
  67. data/bootstrap/scss/forms/_labels.scss +36 -0
  68. data/bootstrap/scss/forms/_validation.scss +12 -0
  69. data/bootstrap/scss/helpers/_clearfix.scss +3 -0
  70. data/bootstrap/scss/helpers/_colored-links.scss +12 -0
  71. data/bootstrap/scss/helpers/_position.scss +30 -0
  72. data/bootstrap/scss/helpers/_ratio.scss +26 -0
  73. data/bootstrap/scss/helpers/_stacks.scss +15 -0
  74. data/bootstrap/scss/helpers/_stretched-link.scss +15 -0
  75. data/bootstrap/scss/helpers/_text-truncation.scss +7 -0
  76. data/bootstrap/scss/helpers/_visually-hidden.scss +8 -0
  77. data/bootstrap/scss/helpers/_vr.scss +8 -0
  78. data/bootstrap/scss/mixins/_alert.scss +11 -0
  79. data/bootstrap/scss/mixins/_backdrop.scss +14 -0
  80. data/bootstrap/scss/mixins/_border-radius.scss +78 -0
  81. data/bootstrap/scss/mixins/_box-shadow.scss +18 -0
  82. data/bootstrap/scss/mixins/_breakpoints.scss +127 -0
  83. data/bootstrap/scss/mixins/_buttons.scss +133 -0
  84. data/bootstrap/scss/mixins/_caret.scss +64 -0
  85. data/bootstrap/scss/mixins/_clearfix.scss +9 -0
  86. data/bootstrap/scss/mixins/_color-scheme.scss +7 -0
  87. data/bootstrap/scss/mixins/_container.scss +9 -0
  88. data/bootstrap/scss/mixins/_deprecate.scss +10 -0
  89. data/bootstrap/scss/mixins/_forms.scss +144 -0
  90. data/bootstrap/scss/mixins/_gradients.scss +47 -0
  91. data/bootstrap/scss/mixins/_grid.scss +151 -0
  92. data/bootstrap/scss/mixins/_image.scss +16 -0
  93. data/bootstrap/scss/mixins/_list-group.scss +24 -0
  94. data/bootstrap/scss/mixins/_lists.scss +7 -0
  95. data/bootstrap/scss/mixins/_pagination.scss +31 -0
  96. data/bootstrap/scss/mixins/_reset-text.scss +17 -0
  97. data/bootstrap/scss/mixins/_resize.scss +6 -0
  98. data/bootstrap/scss/mixins/_table-variants.scss +21 -0
  99. data/bootstrap/scss/mixins/_text-truncate.scss +8 -0
  100. data/bootstrap/scss/mixins/_transition.scss +26 -0
  101. data/bootstrap/scss/mixins/_utilities.scss +89 -0
  102. data/bootstrap/scss/mixins/_visually-hidden.scss +29 -0
  103. data/bootstrap/scss/utilities/_api.scss +47 -0
  104. data/bootstrap/scss/vendor/_rfs.scss +354 -0
  105. data/css/prism.css +4 -0
  106. data/css/style.css +6 -0
  107. data/gulpfile.js +35 -0
  108. data/img/.DS_Store +0 -0
  109. data/img/arrow-active.png +0 -0
  110. data/img/arrow-disable.png +0 -0
  111. data/img/arrow.png +0 -0
  112. data/img/close.png +0 -0
  113. data/img/phone.png +0 -0
  114. data/img/placeholder.png +0 -0
  115. data/img/placeholder_avatar.png +0 -0
  116. data/img/qr-code-loja.png +0 -0
  117. data/img/store_icon.png +0 -0
  118. data/index.html +33 -0
  119. data/install_nvm.sh +425 -0
  120. data/package-lock.json +4233 -0
  121. data/package.json +9 -0
  122. data/scss/.DS_Store +0 -0
  123. data/scss/guide/.DS_Store +0 -0
  124. data/scss/guide/_variables.scss +171 -0
  125. data/scss/guide/components/_animations.scss +8 -0
  126. data/scss/guide/components/_typography.scss +157 -0
  127. data/scss/guide/components/arabescos/arabescos.scss +47 -0
  128. data/scss/guide/components/buttons/btn.scss +26 -0
  129. data/scss/guide/components/buttons/btn__large.scss +10 -0
  130. data/scss/guide/components/buttons/btn__primary.scss +11 -0
  131. data/scss/guide/components/buttons/btn__secondary.scss +11 -0
  132. data/scss/guide/components/buttons/btn__tertiary.scss +11 -0
  133. data/scss/guide/components/cardapp/cardapp.scss +151 -0
  134. data/scss/guide/components/cards/card.scss +58 -0
  135. data/scss/guide/components/cards/card__horizontal.scss +35 -0
  136. data/scss/guide/components/cards/card__horizontal__small.scss +9 -0
  137. data/scss/guide/components/inputs/_checkbox.scss +45 -0
  138. data/scss/guide/components/inputs/_text.scss +8 -0
  139. data/scss/guide/components/lista/lista.scss +31 -0
  140. data/scss/guide/components/pagination/pagination.scss +81 -0
  141. data/scss/guide/components/pills/pill.scss +31 -0
  142. data/scss/guide/components/pills/pill__full.scss +8 -0
  143. data/scss/guide/components/pills/pill__secundary.scss +8 -0
  144. data/scss/guide/components/pills/pill__small.scss +8 -0
  145. data/scss/guide/components/revisado/revisado.scss +52 -0
  146. data/scss/guide/style.scss +96 -0
  147. metadata +147 -12
  148. data/CODE_OF_CONDUCT.md +0 -74
  149. data/Gemfile +0 -6
  150. data/LICENSE.txt +0 -21
  151. data/Rakefile +0 -2
  152. data/bin/console +0 -14
  153. data/bin/setup +0 -8
  154. data/lib/vitat/css/version.rb +0 -5
  155. data/lib/vitat/css.rb +0 -8
  156. data/vitat-css.gemspec +0 -41
data/package.json ADDED
@@ -0,0 +1,9 @@
1
+ {
2
+ "dependencies": {
3
+ "bootstrap": "^5.3.0",
4
+ "gulp": "^4.0.2",
5
+ "gulp-autoprefixer": "^8.0.0",
6
+ "gulp-sass": "^5.1.0",
7
+ "sass": "^1.52.3"
8
+ }
9
+ }
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,10 @@
1
+ @import "_variables.scss";
2
+ @import "../_typography";
3
+
4
+ .btn__large{
5
+ @extend .btn;
6
+ height:$sizing-md;
7
+ @media(min-width:1200px) {
8
+ height:$sizing-lg;
9
+ }
10
+ }
@@ -0,0 +1,11 @@
1
+ @import "_variables.scss";
2
+ @import "../_typography";
3
+
4
+ .btn__primary{
5
+ @extend .btn;
6
+ color:$neutral-color-low-pure;
7
+ background:$brand-color-primary-pure;
8
+ &:hover{
9
+ background:$brand-color-primary-dark;
10
+ }
11
+ }
@@ -0,0 +1,11 @@
1
+ @import "_variables.scss";
2
+ @import "../_typography";
3
+
4
+ .btn__secondary{
5
+ @extend .btn;
6
+ color:$brand-color-primary-pure;
7
+ background:$neutral-color-low-pure;
8
+ &:hover{
9
+ background:$neutral-color-low-dark;
10
+ }
11
+ }
@@ -0,0 +1,11 @@
1
+ @import "_variables.scss";
2
+ @import "../_typography";
3
+
4
+ .btn__tertiary{
5
+ @extend .btn;
6
+ color:$neutral-color-low-dark;
7
+ background:$neutral-color-high-light;
8
+ &:hover{
9
+ background:$neutral-color-high-medium;
10
+ }
11
+ }
@@ -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
+ }