@dvcol/neo-svelte 0.1.2 → 0.1.4

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 (152) hide show
  1. package/CHANGELOG.md +83 -0
  2. package/README.md +25 -26
  3. package/dist/buttons/NeoButton.svelte +140 -128
  4. package/dist/buttons/NeoButtonGroup.svelte +99 -108
  5. package/dist/buttons/neo-button-group.model.d.ts +18 -19
  6. package/dist/buttons/neo-button.model.d.ts +6 -10
  7. package/dist/cards/NeoCard.svelte +176 -73
  8. package/dist/cards/NeoCard.svelte.d.ts +1 -1
  9. package/dist/cards/neo-card.model.d.ts +29 -1
  10. package/dist/containers/NeoTransitionContainer.svelte +13 -2
  11. package/dist/containers/neo-transition-container.model.d.ts +9 -1
  12. package/dist/divider/NeoDivider.svelte +11 -11
  13. package/dist/icons/IconAccount.svelte +10 -2
  14. package/dist/icons/IconAdd.svelte +10 -2
  15. package/dist/icons/IconAlert.svelte +2 -2
  16. package/dist/icons/IconCalendar.svelte +23 -0
  17. package/dist/icons/IconCalendar.svelte.d.ts +26 -0
  18. package/dist/icons/IconCheckbox.svelte +87 -0
  19. package/dist/icons/IconCheckbox.svelte.d.ts +55 -0
  20. package/dist/icons/IconCircleLoading.svelte +2 -2
  21. package/dist/icons/IconClear.svelte +10 -2
  22. package/dist/icons/IconClose.svelte +2 -2
  23. package/dist/icons/IconConfirm.svelte +2 -2
  24. package/dist/icons/IconDownload.svelte +17 -0
  25. package/dist/icons/IconDownload.svelte.d.ts +26 -0
  26. package/dist/icons/IconEmpty.svelte +2 -2
  27. package/dist/icons/IconFileUpload.svelte +2 -2
  28. package/dist/icons/IconGithub.svelte +2 -2
  29. package/dist/icons/IconImage.svelte +2 -2
  30. package/dist/icons/IconMinus.svelte +2 -2
  31. package/dist/icons/IconMoon.svelte +2 -2
  32. package/dist/icons/IconPaint.svelte +19 -0
  33. package/dist/icons/{IconSunrise.svelte.d.ts → IconPaint.svelte.d.ts} +3 -3
  34. package/dist/icons/IconPencil.svelte +13 -0
  35. package/dist/icons/IconPencil.svelte.d.ts +26 -0
  36. package/dist/icons/IconRadio.svelte +14 -0
  37. package/dist/icons/IconRadio.svelte.d.ts +22 -0
  38. package/dist/icons/IconSave.svelte +1 -1
  39. package/dist/icons/IconSave.svelte.d.ts +3 -3
  40. package/dist/icons/IconSaveOff.svelte +1 -1
  41. package/dist/icons/IconSaveOff.svelte.d.ts +3 -3
  42. package/dist/icons/IconSearch.svelte +2 -2
  43. package/dist/icons/IconSun.svelte +3 -3
  44. package/dist/icons/{IconSunrise.svelte → IconSunFull.svelte} +5 -4
  45. package/dist/icons/IconSunFull.svelte.d.ts +26 -0
  46. package/dist/icons/IconVideo.svelte +2 -2
  47. package/dist/icons/IconWatch.svelte +2 -2
  48. package/dist/icons/IconWatchOff.svelte +2 -2
  49. package/dist/inputs/NeoCheckbox.svelte +316 -0
  50. package/dist/inputs/NeoCheckbox.svelte.d.ts +19 -0
  51. package/dist/inputs/NeoColorPicker.svelte +140 -0
  52. package/dist/inputs/NeoColorPicker.svelte.d.ts +19 -0
  53. package/dist/inputs/NeoDateTime.svelte +96 -0
  54. package/dist/inputs/NeoDateTime.svelte.d.ts +19 -0
  55. package/dist/inputs/NeoFilePicker.svelte +528 -0
  56. package/dist/inputs/NeoFilePicker.svelte.d.ts +19 -0
  57. package/dist/inputs/NeoFilePickerCard.svelte +314 -0
  58. package/dist/inputs/NeoFilePickerCard.svelte.d.ts +19 -0
  59. package/dist/inputs/NeoNumberStep.svelte +174 -0
  60. package/dist/inputs/NeoNumberStep.svelte.d.ts +19 -0
  61. package/dist/inputs/NeoPassword.svelte +86 -17
  62. package/dist/inputs/NeoPassword.svelte.d.ts +19 -16
  63. package/dist/inputs/NeoPin.svelte +589 -0
  64. package/dist/inputs/NeoPin.svelte.d.ts +19 -0
  65. package/dist/inputs/NeoRadio.svelte +254 -0
  66. package/dist/inputs/NeoRadio.svelte.d.ts +19 -0
  67. package/dist/inputs/NeoRange.svelte +518 -0
  68. package/dist/inputs/NeoRange.svelte.d.ts +18 -0
  69. package/dist/inputs/NeoSwitch.svelte +373 -0
  70. package/dist/inputs/NeoSwitch.svelte.d.ts +19 -0
  71. package/dist/inputs/NeoTextarea.svelte +335 -301
  72. package/dist/inputs/NeoTextarea.svelte.d.ts +5 -2
  73. package/dist/inputs/common/NeoAffix.svelte +166 -0
  74. package/dist/inputs/common/NeoAffix.svelte.d.ts +19 -0
  75. package/dist/inputs/common/NeoBaseInput.svelte +338 -0
  76. package/dist/inputs/common/NeoBaseInput.svelte.d.ts +30 -0
  77. package/dist/inputs/common/NeoInput.svelte +684 -0
  78. package/dist/inputs/{NeoInput.svelte.d.ts → common/NeoInput.svelte.d.ts} +2 -10
  79. package/dist/inputs/common/NeoInputValidation.svelte +45 -0
  80. package/dist/inputs/common/NeoInputValidation.svelte.d.ts +22 -0
  81. package/dist/inputs/common/NeoLabel.svelte +93 -0
  82. package/dist/inputs/common/NeoLabel.svelte.d.ts +19 -0
  83. package/dist/inputs/{NeoValidation.svelte → common/NeoValidation.svelte} +9 -16
  84. package/dist/inputs/common/NeoValidation.svelte.d.ts +22 -0
  85. package/dist/inputs/common/neo-affix.model.d.ts +32 -0
  86. package/dist/inputs/common/neo-input-validation.model.d.ts +20 -0
  87. package/dist/inputs/common/neo-input-validation.model.js +1 -0
  88. package/dist/inputs/{neo-input.model.d.ts → common/neo-input.model.d.ts} +148 -68
  89. package/dist/inputs/common/neo-label.model.d.ts +36 -0
  90. package/dist/inputs/common/neo-label.model.js +1 -0
  91. package/dist/inputs/common/neo-validation.model.d.ts +70 -0
  92. package/dist/inputs/common/neo-validation.model.js +1 -0
  93. package/dist/inputs/index.d.ts +2 -2
  94. package/dist/inputs/index.js +1 -1
  95. package/dist/inputs/neo-checkbox.model.d.ts +9 -0
  96. package/dist/inputs/neo-checkbox.model.js +1 -0
  97. package/dist/inputs/neo-color-picker.model.d.ts +17 -0
  98. package/dist/inputs/neo-color-picker.model.js +1 -0
  99. package/dist/inputs/neo-date-time.model.d.ts +8 -0
  100. package/dist/inputs/neo-date-time.model.js +1 -0
  101. package/dist/inputs/neo-file-picker.model.d.ts +138 -0
  102. package/dist/inputs/neo-file-picker.model.js +1 -0
  103. package/dist/inputs/neo-number-step.model.d.ts +24 -0
  104. package/dist/inputs/neo-number-step.model.js +1 -0
  105. package/dist/inputs/neo-password.model.d.ts +13 -0
  106. package/dist/inputs/neo-password.model.js +1 -0
  107. package/dist/inputs/neo-pin.model.d.ts +47 -0
  108. package/dist/inputs/neo-pin.model.js +1 -0
  109. package/dist/inputs/neo-radio.model.d.ts +3 -0
  110. package/dist/inputs/neo-radio.model.js +1 -0
  111. package/dist/inputs/neo-switch.model.d.ts +9 -0
  112. package/dist/inputs/neo-switch.model.js +1 -0
  113. package/dist/nav/NeoTab.svelte +29 -25
  114. package/dist/nav/NeoTabPanel.svelte +1 -1
  115. package/dist/nav/NeoTabs.svelte +51 -44
  116. package/dist/nav/NeoTabsCard.svelte +8 -10
  117. package/dist/nav/neo-tabs-context.svelte.d.ts +2 -11
  118. package/dist/nav/neo-tabs-context.svelte.js +1 -41
  119. package/dist/nav/neo-tabs.model.d.ts +6 -0
  120. package/dist/providers/NeoThemeProvider.svelte +417 -305
  121. package/dist/providers/NeoThemeSelector.svelte +10 -10
  122. package/dist/providers/neo-theme-provider-context.svelte.js +16 -15
  123. package/dist/providers/neo-theme-provider.model.d.ts +6 -6
  124. package/dist/providers/neo-theme-provider.model.js +17 -12
  125. package/dist/providers/neo-theme-selector.model.d.ts +2 -2
  126. package/dist/skeletons/NeoSkeletonMedia.svelte +4 -4
  127. package/dist/skeletons/NeoSkeletonText.svelte +12 -12
  128. package/dist/styles/common/colors.scss +85 -97
  129. package/dist/styles/common/filters.scss +17 -0
  130. package/dist/styles/common/shadows.scss +531 -293
  131. package/dist/styles/common/spacing.scss +7 -3
  132. package/dist/styles/common/typography.scss +1 -1
  133. package/dist/styles/common/utils.scss +1 -1
  134. package/dist/styles/common/z-index.scss +1 -1
  135. package/dist/styles/mixin.scss +80 -27
  136. package/dist/styles/reset.scss +8 -1
  137. package/dist/styles/theme.scss +39 -16
  138. package/dist/utils/html-element.utils.d.ts +3 -0
  139. package/dist/utils/regex.utils.d.ts +3 -0
  140. package/dist/utils/regex.utils.js +3 -0
  141. package/dist/utils/shadow.utils.d.ts +30 -3
  142. package/dist/utils/shadow.utils.js +41 -14
  143. package/dist/utils/transition.utils.d.ts +4 -0
  144. package/dist/utils/transition.utils.js +10 -1
  145. package/dist/utils/utils.svelte.d.ts +6 -0
  146. package/dist/utils/utils.svelte.js +13 -0
  147. package/package.json +13 -12
  148. package/dist/inputs/NeoInput.svelte +0 -750
  149. package/dist/inputs/NeoValidation.svelte.d.ts +0 -22
  150. package/dist/inputs/neo-validation.model.d.ts +0 -40
  151. /package/dist/inputs/{neo-validation.model.js → common/neo-affix.model.js} +0 -0
  152. /package/dist/inputs/{neo-input.model.js → common/neo-input.model.js} +0 -0
package/dist/styles/common/shadows.scss CHANGED
@@ -1,305 +1,543 @@
1
- [neo-theme-root] {
2
- /* Blurs */
3
- --neo-blur-0: blur(0);
4
- --neo-blur-1: blur(1px);
5
- --neo-blur-2: blur(2px);
6
- --neo-blur-3: blur(3px);
7
- --neo-blur-4: blur(4px);
8
- --neo-blur-5: blur(8px);
9
-
10
- /* Saturation */
11
- --neo-saturate: saturate(1);
12
- --neo-saturate-1: saturate(1.125);
13
- --neo-saturate-2: saturate(1.25);
14
- --neo-saturate-3: saturate(1.5);
15
- --neo-saturate-4: saturate(1.75);
16
- --neo-saturate-5: saturate(2);
17
-
18
- @mixin shadows($direction: top-left) {
19
- /* Base shadows flat */
20
- $neo-shadow-flat:
21
- 0 0 0 0 var(--neo-shadow-color-dark),
22
- 0 0 0 0 var(--neo-shadow-color-light);
23
- $neo-shadow-inset-flat:
24
- inset 0 0 0 0 var(--neo-shadow-color-dark),
25
- inset 0 0 0 0 var(--neo-shadow-color-light);
26
-
27
- /* Base shadows raised top left */
28
- $neo-shadow-raised-1: null;
29
- $neo-shadow-raised-2: null;
30
- $neo-shadow-raised-3: null;
31
- $neo-shadow-raised-4: null;
32
- $neo-shadow-raised-5: null;
33
-
34
- /** Base shadows inset top left */
35
- $neo-shadow-inset-1: null;
36
- $neo-shadow-inset-2: null;
37
- $neo-shadow-inset-3: null;
38
- $neo-shadow-inset-4: null;
39
- $neo-shadow-inset-5: null;
40
-
41
- /** Glass shadows */
42
- $neo-glass-shadow-raised-1: null;
43
- $neo-glass-shadow-raised-2: null;
44
- $neo-glass-shadow-raised-3: null;
45
- $neo-glass-shadow-raised-4: null;
46
- $neo-glass-shadow-raised-5: null;
1
+ @mixin shadows() {
2
+ @include box-shadows;
47
3
 
48
- /** glass border-color */
49
- $neo-glass-top-border-color: null;
50
- $neo-glass-right-border-color: null;
51
- $neo-glass-bottom-border-color: null;
52
- $neo-glass-left-border-color: null;
53
-
54
- /* Box shadows top left */
55
- @if $direction == top-left {
56
- /* Base shadows raised top left */
57
- $neo-shadow-raised-1:
58
- 0.08rem 0.08rem 0.2rem var(--neo-shadow-color-dark),
59
- -0.08rem -0.08rem 0.1rem var(--neo-shadow-color-light);
60
- $neo-shadow-raised-2:
61
- 0.1rem 0.1rem 0.3rem var(--neo-shadow-color-dark),
62
- -0.1rem -0.1rem 0.2rem var(--neo-shadow-color-light);
63
- $neo-shadow-raised-3:
64
- 0.3rem 0.3rem 0.3rem var(--neo-shadow-color-dark),
65
- -0.2rem -0.2rem 0.2rem var(--neo-shadow-color-light);
66
- $neo-shadow-raised-4:
67
- 0.5rem 0.5rem 0.6rem var(--neo-shadow-color-dark),
68
- -0.35rem -0.35rem 0.4rem var(--neo-shadow-color-light);
69
- $neo-shadow-raised-5:
70
- 0.7rem 0.7rem 0.7rem var(--neo-shadow-color-dark),
71
- -0.55rem -0.55rem 0.7rem var(--neo-shadow-color-light);
72
-
73
- /** Base shadows inset top left */
74
- $neo-shadow-inset-1:
75
- inset 0.08rem 0.08rem 0.2rem var(--neo-shadow-color-dark),
76
- inset -0.08rem -0.08rem 0.1rem var(--neo-shadow-color-light);
77
- $neo-shadow-inset-2:
78
- inset 0.15rem 0.15rem 0.3rem var(--neo-shadow-color-dark),
79
- inset -0.15rem -0.15rem 0.2rem var(--neo-shadow-color-light);
80
- $neo-shadow-inset-3:
81
- inset 0.3rem 0.3rem 0.4rem var(--neo-shadow-color-dark),
82
- inset -0.2rem -0.2rem 0.3rem var(--neo-shadow-color-light);
83
- $neo-shadow-inset-4:
84
- inset 0.5rem 0.5rem 0.6rem var(--neo-shadow-color-dark),
85
- inset -0.35rem -0.35rem 0.4rem var(--neo-shadow-color-light);
86
- $neo-shadow-inset-5:
87
- inset 0.8rem 0.8rem 0.7rem var(--neo-shadow-color-dark),
88
- inset -0.6rem -0.6rem 0.8rem var(--neo-shadow-color-light);
89
-
90
- /** Glass shadows */
91
- $neo-glass-shadow-raised-1: 0.08rem 0.08rem 0.2rem var(--neo-glass-shadow-color);
92
- $neo-glass-shadow-raised-2: 0.1rem 0.1rem 0.3rem var(--neo-glass-shadow-color);
93
- $neo-glass-shadow-raised-3: 0.3rem 0.3rem 0.3rem var(--neo-glass-shadow-color);
94
- $neo-glass-shadow-raised-4: 0.5rem 0.5rem 0.6rem var(--neo-glass-shadow-color);
95
- $neo-glass-shadow-raised-5: 0.8rem 0.8rem 0.7rem var(--neo-glass-shadow-color);
96
-
97
- /** glass border-color */
98
- $neo-glass-top-border-color: var(--neo-glass-border-color);
99
- $neo-glass-right-border-color: transparent;
100
- $neo-glass-left-border-color: var(--neo-glass-border-color);
101
- $neo-glass-bottom-border-color: transparent;
102
- }
103
-
104
- /* Box shadows top right */
105
- @else if $direction == top-right {
106
- /* Box shadows raised */
107
- $neo-shadow-raised-1:
108
- -0.08rem 0.08rem 0.2rem var(--neo-shadow-color-dark),
109
- 0.08rem -0.08rem 0.1rem var(--neo-shadow-color-light);
110
- $neo-shadow-raised-2:
111
- -0.1rem 0.1rem 0.3rem var(--neo-shadow-color-dark),
112
- 0.1rem -0.1rem 0.2rem var(--neo-shadow-color-light);
113
- $neo-shadow-raised-3:
114
- -0.3rem 0.3rem 0.3rem var(--neo-shadow-color-dark),
115
- 0.2rem -0.2rem 0.2rem var(--neo-shadow-color-light);
116
- $neo-shadow-raised-4:
117
- -0.5rem 0.5rem 0.6rem var(--neo-shadow-color-dark),
118
- 0.35rem -0.35rem 0.4rem var(--neo-shadow-color-light);
119
- $neo-shadow-raised-5:
120
- -0.7rem 0.7rem 0.7rem var(--neo-shadow-color-dark),
121
- 0.55rem -0.55rem 0.7rem var(--neo-shadow-color-light);
122
-
123
- /* Box shadows inset */
124
- $neo-shadow-inset-1:
125
- inset -0.08rem 0.08rem 0.2rem var(--neo-shadow-color-dark),
126
- inset 0.08rem -0.08rem 0.1rem var(--neo-shadow-color-light);
127
- $neo-shadow-inset-2:
128
- inset -0.15rem 0.15rem 0.3rem var(--neo-shadow-color-dark),
129
- inset 0.15rem -0.15rem 0.2rem var(--neo-shadow-color-light);
130
- $neo-shadow-inset-3:
131
- inset -0.3rem 0.3rem 0.4rem var(--neo-shadow-color-dark),
132
- inset 0.2rem -0.2rem 0.3rem var(--neo-shadow-color-light);
133
- $neo-shadow-inset-4:
134
- inset -0.5rem 0.5rem 0.6rem var(--neo-shadow-color-dark),
135
- inset 0.35rem -0.35rem 0.4rem var(--neo-shadow-color-light);
136
- $neo-shadow-inset-5:
137
- inset -0.8rem 0.8rem 0.7rem var(--neo-shadow-color-dark),
138
- inset 0.6rem -0.6rem 0.8rem var(--neo-shadow-color-light);
139
-
140
- /** Glass shadows */
141
- $neo-glass-shadow-raised-1: -0.08rem 0.08rem 0.2rem var(--neo-glass-shadow-color);
142
- $neo-glass-shadow-raised-2: -0.1rem 0.1rem 0.3rem var(--neo-glass-shadow-color);
143
- $neo-glass-shadow-raised-3: -0.3rem 0.3rem 0.3rem var(--neo-glass-shadow-color);
144
- $neo-glass-shadow-raised-4: -0.5rem 0.5rem 0.6rem var(--neo-glass-shadow-color);
145
- $neo-glass-shadow-raised-5: -0.8rem 0.8rem 0.7rem var(--neo-glass-shadow-color);
146
-
147
- /** glass border-color */
148
- $neo-glass-top-border-color: var(--neo-glass-border-color);
149
- $neo-glass-right-border-color: var(--neo-glass-border-color);
150
- $neo-glass-left-border-color: transparent;
151
- $neo-glass-bottom-border-color: transparent;
152
- }
153
-
154
- /* Box shadows bottom right */
155
- @else if $direction == bottom-right {
156
- /* Box shadows raised */
157
- $neo-shadow-raised-1:
158
- -0.08rem -0.08rem 0.2rem var(--neo-shadow-color-dark),
159
- 0.08rem 0.08rem 0.1rem var(--neo-shadow-color-light);
160
- $neo-shadow-raised-2:
161
- -0.1rem -0.1rem 0.3rem var(--neo-shadow-color-dark),
162
- 0.1rem 0.1rem 0.2rem var(--neo-shadow-color-light);
163
- $neo-shadow-raised-3:
164
- -0.3rem -0.3rem 0.3rem var(--neo-shadow-color-dark),
165
- 0.2rem 0.2rem 0.2rem var(--neo-shadow-color-light);
166
- $neo-shadow-raised-4:
167
- -0.5rem -0.5rem 0.6rem var(--neo-shadow-color-dark),
168
- 0.35rem 0.35rem 0.4rem var(--neo-shadow-color-light);
169
- $neo-shadow-raised-5:
170
- -0.7rem -0.7rem 0.7rem var(--neo-shadow-color-dark),
171
- 0.55rem 0.55rem 0.7rem var(--neo-shadow-color-light);
172
-
173
- /* Box shadows inset */
174
- $neo-shadow-inset-1:
175
- inset -0.08rem -0.08rem 0.2rem var(--neo-shadow-color-dark),
176
- inset 0.08rem 0.08rem 0.1rem var(--neo-shadow-color-light);
177
- $neo-shadow-inset-2:
178
- inset -0.15rem -0.15rem 0.3rem var(--neo-shadow-color-dark),
179
- inset 0.15rem 0.15rem 0.2rem var(--neo-shadow-color-light);
180
- $neo-shadow-inset-3:
181
- inset -0.3rem -0.3rem 0.4rem var(--neo-shadow-color-dark),
182
- inset 0.2rem 0.2rem 0.3rem var(--neo-shadow-color-light);
183
- $neo-shadow-inset-4:
184
- inset -0.5rem -0.5rem 0.6rem var(--neo-shadow-color-dark),
185
- inset 0.35rem 0.35rem 0.4rem var(--neo-shadow-color-light);
186
- $neo-shadow-inset-5:
187
- inset -0.8rem -0.8rem 0.7rem var(--neo-shadow-color-dark),
188
- inset 0.6rem 0.6rem 0.8rem var(--neo-shadow-color-light);
189
-
190
- /** Glass shadows */
191
- $neo-glass-shadow-raised-1: -0.08rem -0.08rem 0.2rem var(--neo-glass-shadow-color);
192
- $neo-glass-shadow-raised-2: -0.1rem -0.1rem 0.3rem var(--neo-glass-shadow-color);
193
- $neo-glass-shadow-raised-3: -0.3rem -0.3rem 0.3rem var(--neo-glass-shadow-color);
194
- $neo-glass-shadow-raised-4: -0.5rem -0.5rem 0.6rem var(--neo-glass-shadow-color);
195
- $neo-glass-shadow-raised-5: -0.8rem -0.8rem 0.7rem var(--neo-glass-shadow-color);
196
-
197
- /** glass border-color */
198
- $neo-glass-top-border-color: transparent;
199
- $neo-glass-right-border-color: var(--neo-glass-border-color);
200
- $neo-glass-left-border-color: transparent;
201
- $neo-glass-bottom-border-color: var(--neo-glass-border-color);
202
- }
203
-
204
- /* Box shadows bottom left */
205
- @else if $direction == bottom-left {
206
- /* Base shadows raised top left */
207
- $neo-shadow-raised-1:
208
- 0.08rem -0.08rem 0.2rem var(--neo-shadow-color-dark),
209
- -0.08rem 0.08rem 0.1rem var(--neo-shadow-color-light);
210
- $neo-shadow-raised-2:
211
- 0.1rem -0.1rem 0.3rem var(--neo-shadow-color-dark),
212
- -0.1rem 0.1rem 0.2rem var(--neo-shadow-color-light);
213
- $neo-shadow-raised-3:
214
- 0.3rem -0.3rem 0.3rem var(--neo-shadow-color-dark),
215
- -0.2rem 0.2rem 0.2rem var(--neo-shadow-color-light);
216
- $neo-shadow-raised-4:
217
- 0.5rem -0.5rem 0.6rem var(--neo-shadow-color-dark),
218
- -0.35rem 0.35rem 0.4rem var(--neo-shadow-color-light);
219
- $neo-shadow-raised-5:
220
- 0.7rem -0.7rem 0.7rem var(--neo-shadow-color-dark),
221
- -0.55rem 0.55rem 0.7rem var(--neo-shadow-color-light);
222
-
223
- /** Base shadows inset top left */
224
- $neo-shadow-inset-1:
225
- inset 0.08rem -0.08rem 0.2rem var(--neo-shadow-color-dark),
226
- inset -0.08rem 0.08rem 0.1rem var(--neo-shadow-color-light);
227
- $neo-shadow-inset-2:
228
- inset 0.15rem -0.15rem 0.3rem var(--neo-shadow-color-dark),
229
- inset -0.15rem 0.15rem 0.2rem var(--neo-shadow-color-light);
230
- $neo-shadow-inset-3:
231
- inset 0.3rem -0.3rem 0.4rem var(--neo-shadow-color-dark),
232
- inset -0.2rem 0.2rem 0.3rem var(--neo-shadow-color-light);
233
- $neo-shadow-inset-4:
234
- inset 0.5rem -0.5rem 0.6rem var(--neo-shadow-color-dark),
235
- inset -0.35rem 0.35rem 0.4rem var(--neo-shadow-color-light);
236
- $neo-shadow-inset-5:
237
- inset 0.8rem -0.8rem 0.7rem var(--neo-shadow-color-dark),
238
- inset -0.6rem 0.6rem 0.8rem var(--neo-shadow-color-light);
239
-
240
- /** Glass shadows */
241
- $neo-glass-shadow-raised-1: 0.08rem -0.08rem 0.2rem var(--neo-glass-shadow-color);
242
- $neo-glass-shadow-raised-2: 0.1rem -0.1rem 0.3rem var(--neo-glass-shadow-color);
243
- $neo-glass-shadow-raised-3: 0.3rem -0.3rem 0.3rem var(--neo-glass-shadow-color);
244
- $neo-glass-shadow-raised-4: 0.5rem -0.5rem 0.6rem var(--neo-glass-shadow-color);
245
- $neo-glass-shadow-raised-5: 0.8rem -0.8rem 0.7rem var(--neo-glass-shadow-color);
246
-
247
- /** glass border-color */
248
- $neo-glass-top-border-color: transparent;
249
- $neo-glass-right-border-color: transparent;
250
- $neo-glass-left-border-color: var(--neo-glass-border-color);
251
- $neo-glass-bottom-border-color: var(--neo-glass-border-color);
252
- }
253
-
254
- /** Base shadows flat */
255
- --neo-box-shadow-flat: none;
256
-
257
- /* Box shadows raised top left */
258
- --neo-box-shadow-raised-1: #{$neo-shadow-raised-1}, #{$neo-shadow-inset-flat};
259
- --neo-box-shadow-raised-2: #{$neo-shadow-raised-2}, #{$neo-shadow-inset-flat};
260
- --neo-box-shadow-raised-3: #{$neo-shadow-raised-3}, #{$neo-shadow-inset-flat};
261
- --neo-box-shadow-raised-4: #{$neo-shadow-raised-4}, #{$neo-shadow-inset-flat};
262
- --neo-box-shadow-raised-5: #{$neo-shadow-raised-5}, #{$neo-shadow-inset-flat};
263
-
264
- /** Base shadows inset top left */
265
- --neo-box-shadow-inset-1: #{$neo-shadow-flat}, #{$neo-shadow-inset-1};
266
- --neo-box-shadow-inset-2: #{$neo-shadow-flat}, #{$neo-shadow-inset-2};
267
- --neo-box-shadow-inset-3: #{$neo-shadow-flat}, #{$neo-shadow-inset-3};
268
- --neo-box-shadow-inset-4: #{$neo-shadow-flat}, #{$neo-shadow-inset-4};
269
- --neo-box-shadow-inset-5: #{$neo-shadow-flat}, #{$neo-shadow-inset-5};
270
-
271
- /* Glass box shadows raised */
272
- --neo-glass-box-shadow-raised-1: #{$neo-glass-shadow-raised-1};
273
- --neo-glass-box-shadow-raised-2: #{$neo-glass-shadow-raised-2};
274
- --neo-glass-box-shadow-raised-3: #{$neo-glass-shadow-raised-3};
275
- --neo-glass-box-shadow-raised-4: #{$neo-glass-shadow-raised-4};
276
- --neo-glass-box-shadow-raised-5: #{$neo-glass-shadow-raised-5};
277
-
278
- /* Glass box shadows inset */
279
- --neo-glass-box-shadow-inset-1: var(--neo-box-shadow-inset-1);
280
- --neo-glass-box-shadow-inset-2: var(--neo-box-shadow-inset-2);
281
- --neo-glass-box-shadow-inset-3: var(--neo-box-shadow-inset-3);
282
- --neo-glass-box-shadow-inset-4: var(--neo-box-shadow-inset-4);
283
- --neo-glass-box-shadow-inset-5: var(--neo-box-shadow-inset-5);
4
+ &[neo-source='bottom-right'] {
5
+ @include box-shadows(bottom-right);
6
+ }
7
+
8
+ &[neo-source='top-right'] {
9
+ @include box-shadows(top-right);
10
+ }
11
+
12
+ &[neo-source='bottom-left'] {
13
+ @include box-shadows(bottom-left);
14
+ }
15
+ }
16
+
17
+ @mixin box-shadows($direction: top-left) {
18
+ /* Base shadows flat */
19
+ $neo-shadow-flat:
20
+ 0 0 0 0 var(--neo-shadow-color-dark),
21
+ 0 0 0 0 var(--neo-shadow-color-light);
22
+ $neo-shadow-inset-flat:
23
+ inset 0 0 0 0 var(--neo-shadow-color-dark),
24
+ inset 0 0 0 0 var(--neo-shadow-color-light);
25
+
26
+ /* Base shadows raised */
27
+ $neo-shadow-raised-1: null;
28
+ $neo-shadow-raised-2: null;
29
+ $neo-shadow-raised-3: null;
30
+ $neo-shadow-raised-4: null;
31
+ $neo-shadow-raised-5: null;
32
+
33
+ /** Base shadows inset */
34
+ $neo-shadow-inset-1: null;
35
+ $neo-shadow-inset-2: null;
36
+ $neo-shadow-inset-3: null;
37
+ $neo-shadow-inset-4: null;
38
+ $neo-shadow-inset-5: null;
39
+
40
+ /* Base shadows convex */
41
+ $neo-shadow-convex-1: null;
42
+ $neo-shadow-convex-2: null;
43
+ $neo-shadow-convex-3: null;
44
+ $neo-shadow-convex-4: null;
45
+ $neo-shadow-convex-5: null;
46
+
47
+ /** Glass shadows raised */
48
+ $neo-glass-shadow-raised-1: null;
49
+ $neo-glass-shadow-raised-2: null;
50
+ $neo-glass-shadow-raised-3: null;
51
+ $neo-glass-shadow-raised-4: null;
52
+ $neo-glass-shadow-raised-5: null;
53
+
54
+ /** Glass shadows inset */
55
+ $neo-glass-shadow-inset-1: null;
56
+ $neo-glass-shadow-inset-2: null;
57
+ $neo-glass-shadow-inset-3: null;
58
+ $neo-glass-shadow-inset-4: null;
59
+ $neo-glass-shadow-inset-5: null;
60
+
61
+ /** Glass shadows convex */
62
+ $neo-glass-shadow-convex-1: null;
63
+ $neo-glass-shadow-convex-2: null;
64
+ $neo-glass-shadow-convex-3: null;
65
+ $neo-glass-shadow-convex-4: null;
66
+ $neo-glass-shadow-convex-5: null;
67
+
68
+ /** glass border-color */
69
+ $neo-glass-top-border-color: null;
70
+ $neo-glass-right-border-color: null;
71
+ $neo-glass-bottom-border-color: null;
72
+ $neo-glass-left-border-color: null;
73
+
74
+ /* Box shadows top left */
75
+ @if $direction == top-left {
76
+ /* Base shadows raised */
77
+ $neo-shadow-raised-1:
78
+ 0.08rem 0.08rem 0.2rem var(--neo-shadow-color-dark),
79
+ -0.08rem -0.08rem 0.1rem var(--neo-shadow-color-light);
80
+ $neo-shadow-raised-2:
81
+ 0.1rem 0.1rem 0.3rem var(--neo-shadow-color-dark),
82
+ -0.1rem -0.1rem 0.2rem var(--neo-shadow-color-light);
83
+ $neo-shadow-raised-3:
84
+ 0.3rem 0.3rem 0.3rem var(--neo-shadow-color-dark),
85
+ -0.2rem -0.2rem 0.2rem var(--neo-shadow-color-light);
86
+ $neo-shadow-raised-4:
87
+ 0.5rem 0.5rem 0.6rem var(--neo-shadow-color-dark),
88
+ -0.35rem -0.35rem 0.4rem var(--neo-shadow-color-light);
89
+ $neo-shadow-raised-5:
90
+ 0.7rem 0.7rem 0.7rem var(--neo-shadow-color-dark),
91
+ -0.55rem -0.55rem 0.7rem var(--neo-shadow-color-light);
92
+
93
+ /** Base shadows inset */
94
+ $neo-shadow-inset-1:
95
+ inset 0.08rem 0.08rem 0.2rem var(--neo-shadow-color-dark),
96
+ inset -0.08rem -0.08rem 0.1rem var(--neo-shadow-color-light);
97
+ $neo-shadow-inset-2:
98
+ inset 0.15rem 0.15rem 0.3rem var(--neo-shadow-color-dark),
99
+ inset -0.15rem -0.15rem 0.2rem var(--neo-shadow-color-light);
100
+ $neo-shadow-inset-3:
101
+ inset 0.3rem 0.3rem 0.4rem var(--neo-shadow-color-dark),
102
+ inset -0.2rem -0.2rem 0.3rem var(--neo-shadow-color-light);
103
+ $neo-shadow-inset-4:
104
+ inset 0.5rem 0.5rem 0.6rem var(--neo-shadow-color-dark),
105
+ inset -0.35rem -0.35rem 0.4rem var(--neo-shadow-color-light);
106
+ $neo-shadow-inset-5:
107
+ inset 0.8rem 0.8rem 0.7rem var(--neo-shadow-color-dark),
108
+ inset -0.6rem -0.6rem 0.8rem var(--neo-shadow-color-light);
109
+
110
+ /* Base shadows convex */
111
+ $neo-shadow-convex-1:
112
+ inset 0.08rem 0.08rem 0.2rem 0.1rem var(--neo-shadow-color-light),
113
+ inset -0.08rem -0.08rem 0.1rem 0.1rem var(--neo-shadow-color-dark);
114
+ $neo-shadow-convex-2:
115
+ inset 0.1rem 0.1rem 0.3rem 0.1rem var(--neo-shadow-color-light),
116
+ inset -0.1rem -0.1rem 0.2rem 0.1rem var(--neo-shadow-color-dark);
117
+ $neo-shadow-convex-3:
118
+ inset 0.3rem 0.3rem 0.3rem 0.1rem var(--neo-shadow-color-light),
119
+ inset -0.2rem -0.2rem 0.2rem 0.1rem var(--neo-shadow-color-dark);
120
+ $neo-shadow-convex-4:
121
+ inset 0.5rem 0.5rem 0.6rem 0.1rem var(--neo-shadow-color-light),
122
+ inset -0.35rem -0.35rem 0.4rem 0.1rem var(--neo-shadow-color-dark);
123
+ $neo-shadow-convex-5:
124
+ inset 0.7rem 0.7rem 0.7rem 0.1rem var(--neo-shadow-color-light),
125
+ inset -0.55rem -0.55rem 0.7rem 0.1rem var(--neo-shadow-color-dark);
126
+
127
+ /** Glass shadows raised */
128
+ $neo-glass-shadow-raised-1: 0.08rem 0.08rem 0.2rem var(--neo-glass-shadow-color-dark);
129
+ $neo-glass-shadow-raised-2: 0.1rem 0.1rem 0.3rem var(--neo-glass-shadow-color-dark);
130
+ $neo-glass-shadow-raised-3: 0.3rem 0.3rem 0.3rem var(--neo-glass-shadow-color-dark);
131
+ $neo-glass-shadow-raised-4: 0.5rem 0.5rem 0.6rem var(--neo-glass-shadow-color-dark);
132
+ $neo-glass-shadow-raised-5: 0.8rem 0.8rem 0.7rem var(--neo-glass-shadow-color-dark);
133
+
134
+ /** Glass shadows convex */
135
+ $neo-glass-shadow-convex-1:
136
+ inset 0.08rem 0.08rem 0.2rem var(--neo-glass-shadow-color-light),
137
+ inset -0.08rem -0.08rem 0.1rem var(--neo-glass-shadow-color-dark);
138
+ $neo-glass-shadow-convex-2:
139
+ inset 0.1rem 0.1rem 0.3rem var(--neo-glass-shadow-color-light),
140
+ inset -0.1rem -0.1rem 0.2rem var(--neo-glass-shadow-color-dark);
141
+ $neo-glass-shadow-convex-3:
142
+ inset 0.3rem 0.3rem 0.3rem var(--neo-glass-shadow-color-light),
143
+ inset -0.2rem -0.2rem 0.2rem var(--neo-glass-shadow-color-dark);
144
+ $neo-glass-shadow-convex-4:
145
+ inset 0.5rem 0.5rem 0.6rem var(--neo-glass-shadow-color-light),
146
+ inset -0.35rem -0.35rem 0.4rem var(--neo-glass-shadow-color-dark);
147
+ $neo-glass-shadow-convex-5:
148
+ inset 0.7rem 0.7rem 0.7rem var(--neo-glass-shadow-color-light),
149
+ inset -0.55rem -0.55rem 0.7rem var(--neo-glass-shadow-color-dark);
150
+
151
+ /** Glass shadows inset */
152
+ $neo-glass-shadow-inset-1:
153
+ inset 0.08rem 0.08rem 0.2rem var(--neo-glass-shadow-color-dark),
154
+ inset -0.08rem -0.08rem 0.1rem var(--neo-glass-shadow-color-light);
155
+ $neo-glass-shadow-inset-2:
156
+ inset 0.15rem 0.15rem 0.3rem var(--neo-glass-shadow-color-dark),
157
+ inset -0.15rem -0.15rem 0.2rem var(--neo-glass-shadow-color-light);
158
+ $neo-glass-shadow-inset-3:
159
+ inset 0.3rem 0.3rem 0.4rem var(--neo-glass-shadow-color-dark),
160
+ inset -0.2rem -0.2rem 0.3rem var(--neo-glass-shadow-color-light);
161
+ $neo-glass-shadow-inset-4:
162
+ inset 0.5rem 0.5rem 0.6rem var(--neo-glass-shadow-color-dark),
163
+ inset -0.35rem -0.35rem 0.4rem var(--neo-glass-shadow-color-light);
164
+ $neo-glass-shadow-inset-5:
165
+ inset 0.8rem 0.8rem 0.7rem var(--neo-glass-shadow-color-dark),
166
+ inset -0.6rem -0.6rem 0.8rem var(--neo-glass-shadow-color-light);
284
167
 
285
168
  /** glass border-color */
286
- --neo-glass-top-border-color: #{$neo-glass-top-border-color};
287
- --neo-glass-right-border-color: #{$neo-glass-right-border-color};
288
- --neo-glass-left-border-color: #{$neo-glass-left-border-color};
289
- --neo-glass-bottom-border-color: #{$neo-glass-bottom-border-color};
169
+ $neo-glass-top-border-color: var(--neo-glass-border-color);
170
+ $neo-glass-right-border-color: transparent;
171
+ $neo-glass-left-border-color: var(--neo-glass-border-color);
172
+ $neo-glass-bottom-border-color: transparent;
290
173
  }
291
174
 
292
- @include shadows;
175
+ /* Box shadows top right */
176
+ @else if $direction == top-right {
177
+ /* Box shadows raised */
178
+ $neo-shadow-raised-1:
179
+ -0.08rem 0.08rem 0.2rem var(--neo-shadow-color-dark),
180
+ 0.08rem -0.08rem 0.1rem var(--neo-shadow-color-light);
181
+ $neo-shadow-raised-2:
182
+ -0.1rem 0.1rem 0.3rem var(--neo-shadow-color-dark),
183
+ 0.1rem -0.1rem 0.2rem var(--neo-shadow-color-light);
184
+ $neo-shadow-raised-3:
185
+ -0.3rem 0.3rem 0.3rem var(--neo-shadow-color-dark),
186
+ 0.2rem -0.2rem 0.2rem var(--neo-shadow-color-light);
187
+ $neo-shadow-raised-4:
188
+ -0.5rem 0.5rem 0.6rem var(--neo-shadow-color-dark),
189
+ 0.35rem -0.35rem 0.4rem var(--neo-shadow-color-light);
190
+ $neo-shadow-raised-5:
191
+ -0.7rem 0.7rem 0.7rem var(--neo-shadow-color-dark),
192
+ 0.55rem -0.55rem 0.7rem var(--neo-shadow-color-light);
193
+
194
+ /* Box shadows inset */
195
+ $neo-shadow-inset-1:
196
+ inset -0.08rem 0.08rem 0.2rem var(--neo-shadow-color-dark),
197
+ inset 0.08rem -0.08rem 0.1rem var(--neo-shadow-color-light);
198
+ $neo-shadow-inset-2:
199
+ inset -0.15rem 0.15rem 0.3rem var(--neo-shadow-color-dark),
200
+ inset 0.15rem -0.15rem 0.2rem var(--neo-shadow-color-light);
201
+ $neo-shadow-inset-3:
202
+ inset -0.3rem 0.3rem 0.4rem var(--neo-shadow-color-dark),
203
+ inset 0.2rem -0.2rem 0.3rem var(--neo-shadow-color-light);
204
+ $neo-shadow-inset-4:
205
+ inset -0.5rem 0.5rem 0.6rem var(--neo-shadow-color-dark),
206
+ inset 0.35rem -0.35rem 0.4rem var(--neo-shadow-color-light);
207
+ $neo-shadow-inset-5:
208
+ inset -0.8rem 0.8rem 0.7rem var(--neo-shadow-color-dark),
209
+ inset 0.6rem -0.6rem 0.8rem var(--neo-shadow-color-light);
210
+
211
+ /* Base shadows convex */
212
+ $neo-shadow-convex-1:
213
+ inset -0.08rem 0.08rem 0.2rem var(--neo-shadow-color-light),
214
+ inset 0.08rem -0.08rem 0.1rem var(--neo-shadow-color-dark);
215
+ $neo-shadow-convex-2:
216
+ inset -0.1rem 0.1rem 0.3rem var(--neo-shadow-color-light),
217
+ inset 0.1rem -0.1rem 0.2rem var(--neo-shadow-color-dark);
218
+ $neo-shadow-convex-3:
219
+ inset -0.3rem 0.3rem 0.3rem var(--neo-shadow-color-light),
220
+ inset 0.2rem -0.2rem 0.2rem var(--neo-shadow-color-dark);
221
+ $neo-shadow-convex-4:
222
+ inset -0.5rem 0.5rem 0.6rem var(--neo-shadow-color-light),
223
+ inset 0.35rem -0.35rem 0.4rem var(--neo-shadow-color-dark);
224
+ $neo-shadow-convex-5:
225
+ inset -0.7rem 0.7rem 0.7rem var(--neo-shadow-color-light),
226
+ inset 0.55rem -0.55rem 0.7rem var(--neo-shadow-color-dark);
227
+
228
+ /** Glass shadows raised */
229
+ $neo-glass-shadow-raised-1: -0.08rem 0.08rem 0.2rem var(--neo-glass-shadow-color-dark);
230
+ $neo-glass-shadow-raised-2: -0.1rem 0.1rem 0.3rem var(--neo-glass-shadow-color-dark);
231
+ $neo-glass-shadow-raised-3: -0.3rem 0.3rem 0.3rem var(--neo-glass-shadow-color-dark);
232
+ $neo-glass-shadow-raised-4: -0.5rem 0.5rem 0.6rem var(--neo-glass-shadow-color-dark);
233
+ $neo-glass-shadow-raised-5: -0.8rem 0.8rem 0.7rem var(--neo-glass-shadow-color-dark);
234
+
235
+ /* Box shadows inset */
236
+ $neo-glass-shadow-inset-1:
237
+ inset -0.08rem 0.08rem 0.2rem var(--neo-glass-shadow-color-dark),
238
+ inset 0.08rem -0.08rem 0.1rem var(--neo-glass-shadow-color-light);
239
+ $neo-glass-shadow-inset-2:
240
+ inset -0.15rem 0.15rem 0.3rem var(--neo-glass-shadow-color-dark),
241
+ inset 0.15rem -0.15rem 0.2rem var(--neo-glass-shadow-color-light);
242
+ $neo-glass-shadow-inset-3:
243
+ inset -0.3rem 0.3rem 0.4rem var(--neo-glass-shadow-color-dark),
244
+ inset 0.2rem -0.2rem 0.3rem var(--neo-glass-shadow-color-light);
245
+ $neo-glass-shadow-inset-4:
246
+ inset -0.5rem 0.5rem 0.6rem var(--neo-glass-shadow-color-dark),
247
+ inset 0.35rem -0.35rem 0.4rem var(--neo-glass-shadow-color-light);
248
+ $neo-glass-shadow-inset-5:
249
+ inset -0.8rem 0.8rem 0.7rem var(--neo-glass-shadow-color-dark),
250
+ inset 0.6rem -0.6rem 0.8rem var(--neo-glass-shadow-color-light);
251
+
252
+ /* Base shadows convex */
253
+ $neo-glass-shadow-convex-1:
254
+ inset -0.08rem 0.08rem 0.2rem var(--neo-glass-shadow-color-light),
255
+ inset 0.08rem -0.08rem 0.1rem var(--neo-glass-shadow-color-dark);
256
+ $neo-glass-shadow-convex-2:
257
+ inset -0.1rem 0.1rem 0.3rem var(--neo-glass-shadow-color-light),
258
+ inset 0.1rem -0.1rem 0.2rem var(--neo-glass-shadow-color-dark);
259
+ $neo-glass-shadow-convex-3:
260
+ inset -0.3rem 0.3rem 0.3rem var(--neo-glass-shadow-color-light),
261
+ inset 0.2rem -0.2rem 0.2rem var(--neo-glass-shadow-color-dark);
262
+ $neo-glass-shadow-convex-4:
263
+ inset -0.5rem 0.5rem 0.6rem var(--neo-glass-shadow-color-light),
264
+ inset 0.35rem -0.35rem 0.4rem var(--neo-glass-shadow-color-dark);
265
+ $neo-glass-shadow-convex-5:
266
+ inset -0.7rem 0.7rem 0.7rem var(--neo-glass-shadow-color-light),
267
+ inset 0.55rem -0.55rem 0.7rem var(--neo-glass-shadow-color-dark);
293
268
 
294
- &[neo-source='bottom-right'] {
295
- @include shadows(bottom-right);
269
+ /** glass border-color */
270
+ $neo-glass-top-border-color: var(--neo-glass-border-color);
271
+ $neo-glass-right-border-color: var(--neo-glass-border-color);
272
+ $neo-glass-left-border-color: transparent;
273
+ $neo-glass-bottom-border-color: transparent;
296
274
  }
297
275
 
298
- &[neo-source='top-right'] {
299
- @include shadows(top-right);
276
+ /* Box shadows bottom right */
277
+ @else if $direction == bottom-right {
278
+ /* Box shadows raised */
279
+ $neo-shadow-raised-1:
280
+ -0.08rem -0.08rem 0.2rem var(--neo-shadow-color-dark),
281
+ 0.08rem 0.08rem 0.1rem var(--neo-shadow-color-light);
282
+ $neo-shadow-raised-2:
283
+ -0.1rem -0.1rem 0.3rem var(--neo-shadow-color-dark),
284
+ 0.1rem 0.1rem 0.2rem var(--neo-shadow-color-light);
285
+ $neo-shadow-raised-3:
286
+ -0.3rem -0.3rem 0.3rem var(--neo-shadow-color-dark),
287
+ 0.2rem 0.2rem 0.2rem var(--neo-shadow-color-light);
288
+ $neo-shadow-raised-4:
289
+ -0.5rem -0.5rem 0.6rem var(--neo-shadow-color-dark),
290
+ 0.35rem 0.35rem 0.4rem var(--neo-shadow-color-light);
291
+ $neo-shadow-raised-5:
292
+ -0.7rem -0.7rem 0.7rem var(--neo-shadow-color-dark),
293
+ 0.55rem 0.55rem 0.7rem var(--neo-shadow-color-light);
294
+
295
+ /* Box shadows inset */
296
+ $neo-shadow-inset-1:
297
+ inset -0.08rem -0.08rem 0.2rem var(--neo-shadow-color-dark),
298
+ inset 0.08rem 0.08rem 0.1rem var(--neo-shadow-color-light);
299
+ $neo-shadow-inset-2:
300
+ inset -0.15rem -0.15rem 0.3rem var(--neo-shadow-color-dark),
301
+ inset 0.15rem 0.15rem 0.2rem var(--neo-shadow-color-light);
302
+ $neo-shadow-inset-3:
303
+ inset -0.3rem -0.3rem 0.4rem var(--neo-shadow-color-dark),
304
+ inset 0.2rem 0.2rem 0.3rem var(--neo-shadow-color-light);
305
+ $neo-shadow-inset-4:
306
+ inset -0.5rem -0.5rem 0.6rem var(--neo-shadow-color-dark),
307
+ inset 0.35rem 0.35rem 0.4rem var(--neo-shadow-color-light);
308
+ $neo-shadow-inset-5:
309
+ inset -0.8rem -0.8rem 0.7rem var(--neo-shadow-color-dark),
310
+ inset 0.6rem 0.6rem 0.8rem var(--neo-shadow-color-light);
311
+
312
+ /* Base shadows convex */
313
+ $neo-shadow-convex-1:
314
+ inset -0.08rem -0.08rem 0.2rem var(--neo-shadow-color-light),
315
+ inset 0.08rem 0.08rem 0.1rem var(--neo-shadow-color-dark);
316
+ $neo-shadow-convex-2:
317
+ inset -0.1rem -0.1rem 0.3rem var(--neo-shadow-color-light),
318
+ inset 0.1rem 0.1rem 0.2rem var(--neo-shadow-color-dark);
319
+ $neo-shadow-convex-3:
320
+ inset -0.3rem -0.3rem 0.3rem var(--neo-shadow-color-light),
321
+ inset 0.2rem 0.2rem 0.2rem var(--neo-shadow-color-dark);
322
+ $neo-shadow-convex-4:
323
+ inset -0.5rem -0.5rem 0.6rem var(--neo-shadow-color-light),
324
+ inset 0.35rem 0.35rem 0.4rem var(--neo-shadow-color-dark);
325
+ $neo-shadow-convex-5:
326
+ inset -0.7rem -0.7rem 0.7rem var(--neo-shadow-color-light),
327
+ inset 0.55rem 0.55rem 0.7rem var(--neo-shadow-color-dark);
328
+
329
+ /** Glass shadows raised */
330
+ $neo-glass-shadow-raised-1: -0.08rem -0.08rem 0.2rem var(--neo-glass-shadow-color-dark);
331
+ $neo-glass-shadow-raised-2: -0.1rem -0.1rem 0.3rem var(--neo-glass-shadow-color-dark);
332
+ $neo-glass-shadow-raised-3: -0.3rem -0.3rem 0.3rem var(--neo-glass-shadow-color-dark);
333
+ $neo-glass-shadow-raised-4: -0.5rem -0.5rem 0.6rem var(--neo-glass-shadow-color-dark);
334
+ $neo-glass-shadow-raised-5: -0.8rem -0.8rem 0.7rem var(--neo-glass-shadow-color-dark);
335
+
336
+ /* Box shadows inset */
337
+ $neo-glass-shadow-inset-1:
338
+ inset -0.08rem -0.08rem 0.2rem var(--neo-glass-shadow-color-dark),
339
+ inset 0.08rem 0.08rem 0.1rem var(--neo-glass-shadow-color-light);
340
+ $neo-glass-shadow-inset-2:
341
+ inset -0.15rem -0.15rem 0.3rem var(--neo-glass-shadow-color-dark),
342
+ inset 0.15rem 0.15rem 0.2rem var(--neo-glass-shadow-color-light);
343
+ $neo-glass-shadow-inset-3:
344
+ inset -0.3rem -0.3rem 0.4rem var(--neo-glass-shadow-color-dark),
345
+ inset 0.2rem 0.2rem 0.3rem var(--neo-glass-shadow-color-light);
346
+ $neo-glass-shadow-inset-4:
347
+ inset -0.5rem -0.5rem 0.6rem var(--neo-glass-shadow-color-dark),
348
+ inset 0.35rem 0.35rem 0.4rem var(--neo-glass-shadow-color-light);
349
+ $neo-glass-shadow-inset-5:
350
+ inset -0.8rem -0.8rem 0.7rem var(--neo-glass-shadow-color-dark),
351
+ inset 0.6rem 0.6rem 0.8rem var(--neo-glass-shadow-color-light);
352
+
353
+ /* Base shadows convex */
354
+ $neo-glass-shadow-convex-1:
355
+ inset -0.08rem -0.08rem 0.2rem var(--neo-glass-shadow-color-light),
356
+ inset 0.08rem 0.08rem 0.1rem var(--neo-glass-shadow-color-dark);
357
+ $neo-glass-shadow-convex-2:
358
+ inset -0.1rem -0.1rem 0.3rem var(--neo-glass-shadow-color-light),
359
+ inset 0.1rem 0.1rem 0.2rem var(--neo-glass-shadow-color-dark);
360
+ $neo-glass-shadow-convex-3:
361
+ inset -0.3rem -0.3rem 0.3rem var(--neo-glass-shadow-color-light),
362
+ inset 0.2rem 0.2rem 0.2rem var(--neo-glass-shadow-color-dark);
363
+ $neo-glass-shadow-convex-4:
364
+ inset -0.5rem -0.5rem 0.6rem var(--neo-glass-shadow-color-light),
365
+ inset 0.35rem 0.35rem 0.4rem var(--neo-glass-shadow-color-dark);
366
+ $neo-glass-shadow-convex-5:
367
+ inset -0.7rem -0.7rem 0.7rem var(--neo-glass-shadow-color-light),
368
+ inset 0.55rem 0.55rem 0.7rem var(--neo-glass-shadow-color-dark);
369
+
370
+ /** glass border-color */
371
+ $neo-glass-top-border-color: transparent;
372
+ $neo-glass-right-border-color: var(--neo-glass-border-color);
373
+ $neo-glass-left-border-color: transparent;
374
+ $neo-glass-bottom-border-color: var(--neo-glass-border-color);
300
375
  }
301
376
 
302
- &[neo-source='bottom-left'] {
303
- @include shadows(bottom-left);
377
+ /* Box shadows bottom left */
378
+ @else if $direction == bottom-left {
379
+ /* Base shadows raised */
380
+ $neo-shadow-raised-1:
381
+ 0.08rem -0.08rem 0.2rem var(--neo-shadow-color-dark),
382
+ -0.08rem 0.08rem 0.1rem var(--neo-shadow-color-light);
383
+ $neo-shadow-raised-2:
384
+ 0.1rem -0.1rem 0.3rem var(--neo-shadow-color-dark),
385
+ -0.1rem 0.1rem 0.2rem var(--neo-shadow-color-light);
386
+ $neo-shadow-raised-3:
387
+ 0.3rem -0.3rem 0.3rem var(--neo-shadow-color-dark),
388
+ -0.2rem 0.2rem 0.2rem var(--neo-shadow-color-light);
389
+ $neo-shadow-raised-4:
390
+ 0.5rem -0.5rem 0.6rem var(--neo-shadow-color-dark),
391
+ -0.35rem 0.35rem 0.4rem var(--neo-shadow-color-light);
392
+ $neo-shadow-raised-5:
393
+ 0.7rem -0.7rem 0.7rem var(--neo-shadow-color-dark),
394
+ -0.55rem 0.55rem 0.7rem var(--neo-shadow-color-light);
395
+
396
+ /** Base shadows */
397
+ $neo-shadow-inset-1:
398
+ inset 0.08rem -0.08rem 0.2rem var(--neo-shadow-color-dark),
399
+ inset -0.08rem 0.08rem 0.1rem var(--neo-shadow-color-light);
400
+ $neo-shadow-inset-2:
401
+ inset 0.15rem -0.15rem 0.3rem var(--neo-shadow-color-dark),
402
+ inset -0.15rem 0.15rem 0.2rem var(--neo-shadow-color-light);
403
+ $neo-shadow-inset-3:
404
+ inset 0.3rem -0.3rem 0.4rem var(--neo-shadow-color-dark),
405
+ inset -0.2rem 0.2rem 0.3rem var(--neo-shadow-color-light);
406
+ $neo-shadow-inset-4:
407
+ inset 0.5rem -0.5rem 0.6rem var(--neo-shadow-color-dark),
408
+ inset -0.35rem 0.35rem 0.4rem var(--neo-shadow-color-light);
409
+ $neo-shadow-inset-5:
410
+ inset 0.8rem -0.8rem 0.7rem var(--neo-shadow-color-dark),
411
+ inset -0.6rem 0.6rem 0.8rem var(--neo-shadow-color-light);
412
+
413
+ /* Base shadows convex */
414
+ $neo-shadow-convex-1:
415
+ inset 0.08rem -0.08rem 0.2rem var(--neo-shadow-color-light),
416
+ inset -0.08rem 0.08rem 0.1rem var(--neo-shadow-color-dark);
417
+ $neo-shadow-convex-2:
418
+ inset 0.1rem -0.1rem 0.3rem var(--neo-shadow-color-light),
419
+ inset -0.1rem 0.1rem 0.2rem var(--neo-shadow-color-dark);
420
+ $neo-shadow-convex-3:
421
+ inset 0.3rem -0.3rem 0.3rem var(--neo-shadow-color-light),
422
+ inset -0.2rem 0.2rem 0.2rem var(--neo-shadow-color-dark);
423
+ $neo-shadow-convex-4:
424
+ inset 0.5rem -0.5rem 0.6rem var(--neo-shadow-color-light),
425
+ inset -0.35rem 0.35rem 0.4rem var(--neo-shadow-color-dark);
426
+ $neo-shadow-convex-5:
427
+ inset 0.7rem -0.7rem 0.7rem var(--neo-shadow-color-light),
428
+ inset -0.55rem 0.55rem 0.7rem var(--neo-shadow-color-dark);
429
+
430
+ /** Glass shadows raised */
431
+ $neo-glass-shadow-raised-1: 0.08rem -0.08rem 0.2rem var(--neo-glass-shadow-color-dark);
432
+ $neo-glass-shadow-raised-2: 0.1rem -0.1rem 0.3rem var(--neo-glass-shadow-color-dark);
433
+ $neo-glass-shadow-raised-3: 0.3rem -0.3rem 0.3rem var(--neo-glass-shadow-color-dark);
434
+ $neo-glass-shadow-raised-4: 0.5rem -0.5rem 0.6rem var(--neo-glass-shadow-color-dark);
435
+ $neo-glass-shadow-raised-5: 0.8rem -0.8rem 0.7rem var(--neo-glass-shadow-color-dark);
436
+
437
+ /** Base shadows inset */
438
+ $neo-glass-shadow-inset-1:
439
+ inset 0.08rem -0.08rem 0.2rem var(--neo-glass-shadow-color-dark),
440
+ inset -0.08rem 0.08rem 0.1rem var(--neo-glass-shadow-color-light);
441
+ $neo-glass-shadow-inset-2:
442
+ inset 0.15rem -0.15rem 0.3rem var(--neo-glass-shadow-color-dark),
443
+ inset -0.15rem 0.15rem 0.2rem var(--neo-glass-shadow-color-light);
444
+ $neo-glass-shadow-inset-3:
445
+ inset 0.3rem -0.3rem 0.4rem var(--neo-glass-shadow-color-dark),
446
+ inset -0.2rem 0.2rem 0.3rem var(--neo-glass-shadow-color-light);
447
+ $neo-glass-shadow-inset-4:
448
+ inset 0.5rem -0.5rem 0.6rem var(--neo-glass-shadow-color-dark),
449
+ inset -0.35rem 0.35rem 0.4rem var(--neo-glass-shadow-color-light);
450
+ $neo-glass-shadow-inset-5:
451
+ inset 0.8rem -0.8rem 0.7rem var(--neo-glass-shadow-color-dark),
452
+ inset -0.6rem 0.6rem 0.8rem var(--neo-glass-shadow-color-light);
453
+
454
+ /* Base shadows convex */
455
+ $neo-glass-shadow-convex-1:
456
+ inset 0.08rem -0.08rem 0.2rem var(--neo-glass-shadow-color-light),
457
+ inset -0.08rem 0.08rem 0.1rem var(--neo-glass-shadow-color-dark);
458
+ $neo-glass-shadow-convex-2:
459
+ inset 0.1rem -0.1rem 0.3rem var(--neo-glass-shadow-color-light),
460
+ inset -0.1rem 0.1rem 0.2rem var(--neo-glass-shadow-color-dark);
461
+ $neo-glass-shadow-convex-3:
462
+ inset 0.3rem -0.3rem 0.3rem var(--neo-glass-shadow-color-light),
463
+ inset -0.2rem 0.2rem 0.2rem var(--neo-glass-shadow-color-dark);
464
+ $neo-glass-shadow-convex-4:
465
+ inset 0.5rem -0.5rem 0.6rem var(--neo-glass-shadow-color-light),
466
+ inset -0.35rem 0.35rem 0.4rem var(--neo-glass-shadow-color-dark);
467
+ $neo-glass-shadow-convex-5:
468
+ inset 0.7rem -0.7rem 0.7rem var(--neo-glass-shadow-color-light),
469
+ inset -0.55rem 0.55rem 0.7rem var(--neo-glass-shadow-color-dark);
470
+
471
+ /** glass border-color */
472
+ $neo-glass-top-border-color: transparent;
473
+ $neo-glass-right-border-color: transparent;
474
+ $neo-glass-left-border-color: var(--neo-glass-border-color);
475
+ $neo-glass-bottom-border-color: var(--neo-glass-border-color);
304
476
  }
477
+
478
+ /** Base shadows flat */
479
+ --neo-box-shadow-flat: none;
480
+
481
+ /* Box shadows raised */
482
+ --neo-box-shadow-raised-1: #{$neo-shadow-raised-1}, #{$neo-shadow-inset-flat};
483
+ --neo-box-shadow-raised-2: #{$neo-shadow-raised-2}, #{$neo-shadow-inset-flat};
484
+ --neo-box-shadow-raised-3: #{$neo-shadow-raised-3}, #{$neo-shadow-inset-flat};
485
+ --neo-box-shadow-raised-4: #{$neo-shadow-raised-4}, #{$neo-shadow-inset-flat};
486
+ --neo-box-shadow-raised-5: #{$neo-shadow-raised-5}, #{$neo-shadow-inset-flat};
487
+
488
+ /** Base shadows inset */
489
+ --neo-box-shadow-inset-1: #{$neo-shadow-flat}, #{$neo-shadow-inset-1};
490
+ --neo-box-shadow-inset-2: #{$neo-shadow-flat}, #{$neo-shadow-inset-2};
491
+ --neo-box-shadow-inset-3: #{$neo-shadow-flat}, #{$neo-shadow-inset-3};
492
+ --neo-box-shadow-inset-4: #{$neo-shadow-flat}, #{$neo-shadow-inset-4};
493
+ --neo-box-shadow-inset-5: #{$neo-shadow-flat}, #{$neo-shadow-inset-5};
494
+
495
+ /** Base shadows pressed */
496
+ --neo-box-shadow-pressed-1: #{$neo-shadow-raised-1}, #{$neo-shadow-inset-1};
497
+ --neo-box-shadow-pressed-2: #{$neo-shadow-raised-2}, #{$neo-shadow-inset-2};
498
+ --neo-box-shadow-pressed-3: #{$neo-shadow-raised-3}, #{$neo-shadow-inset-3};
499
+ --neo-box-shadow-pressed-4: #{$neo-shadow-raised-4}, #{$neo-shadow-inset-4};
500
+ --neo-box-shadow-pressed-5: #{$neo-shadow-raised-5}, #{$neo-shadow-inset-5};
501
+
502
+ /** Base shadows convex */
503
+ --neo-box-shadow-convex-1: #{$neo-shadow-convex-1};
504
+ --neo-box-shadow-convex-2: #{$neo-shadow-convex-2};
505
+ --neo-box-shadow-convex-3: #{$neo-shadow-convex-3};
506
+ --neo-box-shadow-convex-4: #{$neo-shadow-convex-4};
507
+ --neo-box-shadow-convex-5: #{$neo-shadow-convex-5};
508
+
509
+ /* Glass box shadows raised */
510
+ --neo-glass-box-shadow-raised-1: #{$neo-glass-shadow-raised-1};
511
+ --neo-glass-box-shadow-raised-2: #{$neo-glass-shadow-raised-2};
512
+ --neo-glass-box-shadow-raised-3: #{$neo-glass-shadow-raised-3};
513
+ --neo-glass-box-shadow-raised-4: #{$neo-glass-shadow-raised-4};
514
+ --neo-glass-box-shadow-raised-5: #{$neo-glass-shadow-raised-5};
515
+
516
+ /* Glass box shadows inset */
517
+ --neo-glass-box-shadow-inset-1: #{$neo-glass-shadow-inset-1};
518
+ --neo-glass-box-shadow-inset-2: #{$neo-glass-shadow-inset-2};
519
+ --neo-glass-box-shadow-inset-3: #{$neo-glass-shadow-inset-3};
520
+ --neo-glass-box-shadow-inset-4: #{$neo-glass-shadow-inset-4};
521
+ --neo-glass-box-shadow-inset-5: #{$neo-glass-shadow-inset-5};
522
+
523
+ /** Glass shadows pressed */
524
+ --neo-glass-box-shadow-pressed-1: #{$neo-glass-shadow-raised-1}, #{$neo-glass-shadow-inset-1};
525
+ --neo-glass-box-shadow-pressed-2: #{$neo-glass-shadow-raised-2}, #{$neo-glass-shadow-inset-2};
526
+ --neo-glass-box-shadow-pressed-3: #{$neo-glass-shadow-raised-3}, #{$neo-glass-shadow-inset-3};
527
+ --neo-glass-box-shadow-pressed-4: #{$neo-glass-shadow-raised-4}, #{$neo-glass-shadow-inset-4};
528
+ --neo-glass-box-shadow-pressed-5: #{$neo-glass-shadow-raised-5}, #{$neo-glass-shadow-inset-5};
529
+
530
+ /** Glass shadows convex */
531
+ --neo-glass-box-shadow-convex-1: #{$neo-glass-shadow-convex-1};
532
+ --neo-glass-box-shadow-convex-2: #{$neo-glass-shadow-convex-2};
533
+ --neo-glass-box-shadow-convex-3: #{$neo-glass-shadow-convex-3};
534
+ --neo-glass-box-shadow-convex-4: #{$neo-glass-shadow-convex-4};
535
+ --neo-glass-box-shadow-convex-5: #{$neo-glass-shadow-convex-5};
536
+
537
+ /** Glass border-color */
538
+ --neo-glass-box-shadow-flat: none;
539
+ --neo-glass-top-border-color: #{$neo-glass-top-border-color};
540
+ --neo-glass-right-border-color: #{$neo-glass-right-border-color};
541
+ --neo-glass-left-border-color: #{$neo-glass-left-border-color};
542
+ --neo-glass-bottom-border-color: #{$neo-glass-bottom-border-color};
305
543
  }