bulma-rails 0.9.3 → 1.0.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (144) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +49 -14
  3. data/app/assets/stylesheets/bulma.scss +4 -0
  4. data/app/assets/stylesheets/sass/_index.scss +10 -0
  5. data/app/assets/stylesheets/sass/base/_index.scss +6 -0
  6. data/app/assets/stylesheets/sass/base/animations.scss +15 -0
  7. data/app/assets/stylesheets/sass/base/generic.scss +239 -0
  8. data/app/assets/stylesheets/sass/base/minireset.scss +92 -0
  9. data/app/assets/stylesheets/sass/base/skeleton.scss +126 -0
  10. data/app/assets/stylesheets/sass/components/_index.scss +13 -0
  11. data/app/assets/stylesheets/sass/components/breadcrumb.scss +139 -0
  12. data/app/assets/stylesheets/sass/components/card.scss +162 -0
  13. data/app/assets/stylesheets/sass/components/dropdown.scss +188 -0
  14. data/app/assets/stylesheets/sass/components/menu.scss +165 -0
  15. data/app/assets/stylesheets/sass/components/message.scss +183 -0
  16. data/app/assets/stylesheets/sass/components/modal.scss +164 -0
  17. data/app/assets/stylesheets/sass/components/navbar.scss +788 -0
  18. data/app/assets/stylesheets/sass/components/pagination.scss +379 -0
  19. data/app/assets/stylesheets/sass/components/panel.scss +218 -0
  20. data/app/assets/stylesheets/sass/components/tabs.scss +273 -0
  21. data/app/assets/stylesheets/sass/elements/_index.scss +16 -0
  22. data/app/assets/stylesheets/sass/elements/block.scss +6 -0
  23. data/app/assets/stylesheets/sass/elements/box.scss +59 -0
  24. data/app/assets/stylesheets/sass/elements/button.scss +640 -0
  25. data/app/assets/stylesheets/sass/elements/content.scss +283 -0
  26. data/app/assets/stylesheets/sass/elements/delete.scss +6 -0
  27. data/app/assets/stylesheets/sass/elements/icon.scss +67 -0
  28. data/app/assets/stylesheets/sass/elements/image.scss +62 -0
  29. data/app/assets/stylesheets/sass/elements/loader.scss +15 -0
  30. data/app/assets/stylesheets/sass/elements/notification.scss +105 -0
  31. data/app/assets/stylesheets/sass/elements/progress.scss +115 -0
  32. data/app/assets/stylesheets/sass/elements/table.scss +261 -0
  33. data/app/assets/stylesheets/sass/elements/tag.scss +219 -0
  34. data/app/assets/stylesheets/sass/elements/title.scss +128 -0
  35. data/app/assets/stylesheets/sass/form/_index.scss +9 -0
  36. data/app/assets/stylesheets/sass/form/checkbox-radio.scss +32 -0
  37. data/app/assets/stylesheets/sass/form/file.scss +330 -0
  38. data/app/assets/stylesheets/sass/form/input-textarea.scss +123 -0
  39. data/app/assets/stylesheets/sass/form/select.scss +143 -0
  40. data/app/assets/stylesheets/sass/form/shared.scss +172 -0
  41. data/app/assets/stylesheets/sass/form/tools.scss +341 -0
  42. data/app/assets/stylesheets/sass/grid/_index.scss +5 -0
  43. data/app/assets/stylesheets/sass/grid/columns-v2.scss +957 -0
  44. data/app/assets/stylesheets/sass/grid/columns.scss +877 -0
  45. data/app/assets/stylesheets/sass/grid/grid.scss +209 -0
  46. data/app/assets/stylesheets/sass/helpers/_index.scss +15 -0
  47. data/app/assets/stylesheets/sass/helpers/aspect-ratio.scss +10 -0
  48. data/app/assets/stylesheets/sass/helpers/border.scss +15 -0
  49. data/app/assets/stylesheets/sass/helpers/color.scss +364 -0
  50. data/app/assets/stylesheets/sass/helpers/flexbox.scss +62 -0
  51. data/app/assets/stylesheets/sass/helpers/float.scss +28 -0
  52. data/app/assets/stylesheets/sass/helpers/gap.scss +24 -0
  53. data/app/assets/stylesheets/sass/helpers/other.scss +19 -0
  54. data/app/assets/stylesheets/sass/helpers/overflow.scss +21 -0
  55. data/app/assets/stylesheets/sass/helpers/position.scss +19 -0
  56. data/app/assets/stylesheets/sass/helpers/spacing.scss +64 -0
  57. data/app/assets/stylesheets/sass/helpers/typography.scss +168 -0
  58. data/app/assets/stylesheets/sass/helpers/visibility.scss +221 -0
  59. data/app/assets/stylesheets/sass/layout/_index.scss +9 -0
  60. data/app/assets/stylesheets/sass/layout/container.scss +51 -0
  61. data/app/assets/stylesheets/sass/layout/footer.scss +23 -0
  62. data/app/assets/stylesheets/sass/layout/hero.scss +270 -0
  63. data/app/assets/stylesheets/sass/layout/level.scss +107 -0
  64. data/app/assets/stylesheets/sass/layout/media.scss +106 -0
  65. data/app/assets/stylesheets/sass/layout/section.scss +34 -0
  66. data/app/assets/stylesheets/sass/themes/_index.scss +35 -0
  67. data/app/assets/stylesheets/sass/themes/dark.scss +56 -0
  68. data/app/assets/stylesheets/sass/themes/light.scss +145 -0
  69. data/app/assets/stylesheets/sass/themes/setup.scss +174 -0
  70. data/app/assets/stylesheets/sass/utilities/_index.scss +7 -0
  71. data/app/assets/stylesheets/sass/utilities/controls.scss +85 -0
  72. data/app/assets/stylesheets/sass/utilities/css-variables.scss +425 -0
  73. data/app/assets/stylesheets/sass/utilities/derived-variables.scss +112 -0
  74. data/app/assets/stylesheets/sass/utilities/extends.scss +34 -0
  75. data/app/assets/stylesheets/sass/utilities/functions.scss +258 -0
  76. data/app/assets/stylesheets/sass/utilities/initial-variables.scss +155 -0
  77. data/app/assets/stylesheets/sass/utilities/mixins.scss +460 -0
  78. data/bulma-rails.gemspec +4 -6
  79. metadata +84 -74
  80. data/app/assets/stylesheets/bulma.sass +0 -10
  81. data/app/assets/stylesheets/sass/base/_all.sass +0 -6
  82. data/app/assets/stylesheets/sass/base/animations.sass +0 -5
  83. data/app/assets/stylesheets/sass/base/generic.sass +0 -145
  84. data/app/assets/stylesheets/sass/base/helpers.sass +0 -1
  85. data/app/assets/stylesheets/sass/base/minireset.sass +0 -79
  86. data/app/assets/stylesheets/sass/components/_all.sass +0 -15
  87. data/app/assets/stylesheets/sass/components/breadcrumb.sass +0 -77
  88. data/app/assets/stylesheets/sass/components/card.sass +0 -103
  89. data/app/assets/stylesheets/sass/components/dropdown.sass +0 -83
  90. data/app/assets/stylesheets/sass/components/level.sass +0 -79
  91. data/app/assets/stylesheets/sass/components/media.sass +0 -59
  92. data/app/assets/stylesheets/sass/components/menu.sass +0 -59
  93. data/app/assets/stylesheets/sass/components/message.sass +0 -101
  94. data/app/assets/stylesheets/sass/components/modal.sass +0 -117
  95. data/app/assets/stylesheets/sass/components/navbar.sass +0 -446
  96. data/app/assets/stylesheets/sass/components/pagination.sass +0 -166
  97. data/app/assets/stylesheets/sass/components/panel.sass +0 -121
  98. data/app/assets/stylesheets/sass/components/tabs.sass +0 -176
  99. data/app/assets/stylesheets/sass/elements/_all.sass +0 -16
  100. data/app/assets/stylesheets/sass/elements/box.sass +0 -26
  101. data/app/assets/stylesheets/sass/elements/button.sass +0 -345
  102. data/app/assets/stylesheets/sass/elements/container.sass +0 -29
  103. data/app/assets/stylesheets/sass/elements/content.sass +0 -159
  104. data/app/assets/stylesheets/sass/elements/form.sass +0 -1
  105. data/app/assets/stylesheets/sass/elements/icon.sass +0 -46
  106. data/app/assets/stylesheets/sass/elements/image.sass +0 -73
  107. data/app/assets/stylesheets/sass/elements/notification.sass +0 -52
  108. data/app/assets/stylesheets/sass/elements/other.sass +0 -31
  109. data/app/assets/stylesheets/sass/elements/progress.sass +0 -73
  110. data/app/assets/stylesheets/sass/elements/table.sass +0 -133
  111. data/app/assets/stylesheets/sass/elements/tag.sass +0 -140
  112. data/app/assets/stylesheets/sass/elements/title.sass +0 -70
  113. data/app/assets/stylesheets/sass/form/_all.sass +0 -9
  114. data/app/assets/stylesheets/sass/form/checkbox-radio.sass +0 -22
  115. data/app/assets/stylesheets/sass/form/file.sass +0 -184
  116. data/app/assets/stylesheets/sass/form/input-textarea.sass +0 -66
  117. data/app/assets/stylesheets/sass/form/select.sass +0 -87
  118. data/app/assets/stylesheets/sass/form/shared.sass +0 -60
  119. data/app/assets/stylesheets/sass/form/tools.sass +0 -215
  120. data/app/assets/stylesheets/sass/grid/_all.sass +0 -5
  121. data/app/assets/stylesheets/sass/grid/columns.sass +0 -513
  122. data/app/assets/stylesheets/sass/grid/tiles.sass +0 -36
  123. data/app/assets/stylesheets/sass/helpers/_all.sass +0 -12
  124. data/app/assets/stylesheets/sass/helpers/color.sass +0 -39
  125. data/app/assets/stylesheets/sass/helpers/flexbox.sass +0 -35
  126. data/app/assets/stylesheets/sass/helpers/float.sass +0 -10
  127. data/app/assets/stylesheets/sass/helpers/other.sass +0 -14
  128. data/app/assets/stylesheets/sass/helpers/overflow.sass +0 -2
  129. data/app/assets/stylesheets/sass/helpers/position.sass +0 -7
  130. data/app/assets/stylesheets/sass/helpers/spacing.sass +0 -31
  131. data/app/assets/stylesheets/sass/helpers/typography.sass +0 -103
  132. data/app/assets/stylesheets/sass/helpers/visibility.sass +0 -122
  133. data/app/assets/stylesheets/sass/layout/_all.sass +0 -6
  134. data/app/assets/stylesheets/sass/layout/footer.sass +0 -11
  135. data/app/assets/stylesheets/sass/layout/hero.sass +0 -153
  136. data/app/assets/stylesheets/sass/layout/section.sass +0 -17
  137. data/app/assets/stylesheets/sass/utilities/_all.sass +0 -9
  138. data/app/assets/stylesheets/sass/utilities/animations.sass +0 -1
  139. data/app/assets/stylesheets/sass/utilities/controls.sass +0 -49
  140. data/app/assets/stylesheets/sass/utilities/derived-variables.sass +0 -114
  141. data/app/assets/stylesheets/sass/utilities/extends.sass +0 -25
  142. data/app/assets/stylesheets/sass/utilities/functions.sass +0 -136
  143. data/app/assets/stylesheets/sass/utilities/initial-variables.sass +0 -78
  144. data/app/assets/stylesheets/sass/utilities/mixins.sass +0 -280
@@ -0,0 +1,139 @@
1
+ @use "../utilities/css-variables" as cv;
2
+ @use "../utilities/initial-variables" as iv;
3
+ @use "../utilities/extends";
4
+ @use "../utilities/mixins";
5
+
6
+ $breadcrumb-item-color: cv.getVar("link-text") !default;
7
+ $breadcrumb-item-hover-color: cv.getVar("link-text-hover") !default;
8
+ $breadcrumb-item-active-color: cv.getVar("link-text-active") !default;
9
+
10
+ $breadcrumb-item-padding-vertical: 0 !default;
11
+ $breadcrumb-item-padding-horizontal: 0.75em !default;
12
+
13
+ $breadcrumb-item-separator-color: cv.getVar("border") !default;
14
+
15
+ .#{iv.$class-prefix}breadcrumb {
16
+ @include cv.register-vars(
17
+ (
18
+ "breadcrumb-item-color": #{$breadcrumb-item-color},
19
+ "breadcrumb-item-hover-color": #{$breadcrumb-item-hover-color},
20
+ "breadcrumb-item-active-color": #{$breadcrumb-item-active-color},
21
+ "breadcrumb-item-padding-vertical": #{$breadcrumb-item-padding-vertical},
22
+ "breadcrumb-item-padding-horizontal": #{$breadcrumb-item-padding-horizontal},
23
+ "breadcrumb-item-separator-color": #{$breadcrumb-item-separator-color},
24
+ )
25
+ );
26
+ }
27
+
28
+ .#{iv.$class-prefix}breadcrumb {
29
+ @extend %block;
30
+ @extend %unselectable;
31
+ font-size: cv.getVar("size-normal");
32
+ white-space: nowrap;
33
+
34
+ a {
35
+ align-items: center;
36
+ color: cv.getVar("breadcrumb-item-color");
37
+ display: flex;
38
+ justify-content: center;
39
+ padding: cv.getVar("breadcrumb-item-padding-vertical")
40
+ cv.getVar("breadcrumb-item-padding-horizontal");
41
+
42
+ &:hover {
43
+ color: cv.getVar("breadcrumb-item-hover-color");
44
+ }
45
+ }
46
+
47
+ li {
48
+ align-items: center;
49
+ display: flex;
50
+
51
+ &:first-child a {
52
+ padding-inline-start: 0;
53
+ }
54
+
55
+ &.#{iv.$class-prefix}is-active {
56
+ a {
57
+ color: cv.getVar("breadcrumb-item-active-color");
58
+ cursor: default;
59
+ pointer-events: none;
60
+ }
61
+ }
62
+
63
+ & + li::before {
64
+ color: cv.getVar("breadcrumb-item-separator-color");
65
+ content: "/";
66
+ }
67
+ }
68
+
69
+ ul,
70
+ ol {
71
+ align-items: flex-start;
72
+ display: flex;
73
+ flex-wrap: wrap;
74
+ justify-content: flex-start;
75
+ }
76
+
77
+ .#{iv.$class-prefix}icon {
78
+ &:first-child {
79
+ margin-inline-end: 0.5em;
80
+ }
81
+
82
+ &:last-child {
83
+ margin-inline-start: 0.5em;
84
+ }
85
+ }
86
+
87
+ // Alignment
88
+ &.#{iv.$class-prefix}is-centered {
89
+ ol,
90
+ ul {
91
+ justify-content: center;
92
+ }
93
+ }
94
+
95
+ &.#{iv.$class-prefix}is-right {
96
+ ol,
97
+ ul {
98
+ justify-content: flex-end;
99
+ }
100
+ }
101
+
102
+ // Sizes
103
+ &.#{iv.$class-prefix}is-small {
104
+ font-size: cv.getVar("size-small");
105
+ }
106
+
107
+ &.#{iv.$class-prefix}is-medium {
108
+ font-size: cv.getVar("size-medium");
109
+ }
110
+
111
+ &.#{iv.$class-prefix}is-large {
112
+ font-size: cv.getVar("size-large");
113
+ }
114
+
115
+ // Styles
116
+ &.#{iv.$class-prefix}has-arrow-separator {
117
+ li + li::before {
118
+ content: "→";
119
+ }
120
+ }
121
+
122
+ &.#{iv.$class-prefix}has-bullet-separator {
123
+ li + li::before {
124
+ content: "•";
125
+ }
126
+ }
127
+
128
+ &.#{iv.$class-prefix}has-dot-separator {
129
+ li + li::before {
130
+ content: "·";
131
+ }
132
+ }
133
+
134
+ &.#{iv.$class-prefix}has-succeeds-separator {
135
+ li + li::before {
136
+ content: "≻";
137
+ }
138
+ }
139
+ }
@@ -0,0 +1,162 @@
1
+ @use "../utilities/css-variables" as cv;
2
+ @use "../utilities/initial-variables" as iv;
3
+ @use "../utilities/extends";
4
+ @use "../utilities/mixins" as mx;
5
+
6
+ $card-color: cv.getVar("text") !default;
7
+ $card-background-color: cv.getVar("scheme-main") !default;
8
+ $card-shadow: cv.getVar("shadow") !default;
9
+ $card-radius: 0.75rem !default;
10
+
11
+ $card-header-background-color: transparent !default;
12
+ $card-header-color: cv.getVar("text-strong") !default;
13
+ $card-header-padding: 0.75rem 1rem !default;
14
+ $card-header-shadow: 0 0.125em 0.25em
15
+ hsla(
16
+ #{cv.getVar("scheme-h")},
17
+ #{cv.getVar("scheme-s")},
18
+ #{cv.getVar("scheme-invert-l")},
19
+ 0.1
20
+ ) !default;
21
+ $card-header-weight: cv.getVar("weight-bold") !default;
22
+
23
+ $card-content-background-color: transparent !default;
24
+ $card-content-padding: 1.5rem !default;
25
+
26
+ $card-footer-background-color: transparent !default;
27
+ $card-footer-border-top: 1px solid cv.getVar("border-weak") !default;
28
+ $card-footer-padding: 0.75rem !default;
29
+
30
+ $card-media-margin: cv.getVar("block-spacing") !default;
31
+
32
+ .#{iv.$class-prefix}card {
33
+ @include cv.register-vars(
34
+ (
35
+ "card-color": #{$card-color},
36
+ "card-background-color": #{$card-background-color},
37
+ "card-shadow": #{$card-shadow},
38
+ "card-radius": #{$card-radius},
39
+ "card-header-background-color": #{$card-header-background-color},
40
+ "card-header-color": #{$card-header-color},
41
+ "card-header-padding": #{$card-header-padding},
42
+ "card-header-shadow": #{$card-header-shadow},
43
+ "card-header-weight": #{$card-header-weight},
44
+ "card-content-background-color": #{$card-content-background-color},
45
+ "card-content-padding": #{$card-content-padding},
46
+ "card-footer-background-color": #{$card-footer-background-color},
47
+ "card-footer-border-top": #{$card-footer-border-top},
48
+ "card-footer-padding": #{$card-footer-padding},
49
+ "card-media-margin": #{$card-media-margin},
50
+ )
51
+ );
52
+ }
53
+
54
+ .#{iv.$class-prefix}card {
55
+ @extend %block;
56
+ background-color: cv.getVar("card-background-color");
57
+ border-radius: cv.getVar("card-radius");
58
+ box-shadow: cv.getVar("card-shadow");
59
+ color: cv.getVar("card-color");
60
+ max-width: 100%;
61
+ position: relative;
62
+ }
63
+
64
+ %card-item {
65
+ &:first-child {
66
+ border-start-start-radius: cv.getVar("card-radius");
67
+ border-start-end-radius: cv.getVar("card-radius");
68
+ }
69
+
70
+ &:last-child {
71
+ border-end-start-radius: cv.getVar("card-radius");
72
+ border-end-end-radius: cv.getVar("card-radius");
73
+ }
74
+ }
75
+
76
+ .#{iv.$class-prefix}card-header {
77
+ @extend %card-item;
78
+ background-color: cv.getVar("card-header-background-color");
79
+ align-items: stretch;
80
+ box-shadow: cv.getVar("card-header-shadow");
81
+ display: flex;
82
+ }
83
+
84
+ .#{iv.$class-prefix}card-header-title {
85
+ align-items: center;
86
+ color: cv.getVar("card-header-color");
87
+ display: flex;
88
+ flex-grow: 1;
89
+ font-weight: cv.getVar("card-header-weight");
90
+ padding: cv.getVar("card-header-padding");
91
+
92
+ &.#{iv.$class-prefix}is-centered {
93
+ justify-content: center;
94
+ }
95
+ }
96
+
97
+ .#{iv.$class-prefix}card-header-icon {
98
+ @include mx.reset;
99
+
100
+ align-items: center;
101
+ cursor: pointer;
102
+ display: flex;
103
+ justify-content: center;
104
+ padding: cv.getVar("card-header-padding");
105
+ }
106
+
107
+ .#{iv.$class-prefix}card-image {
108
+ display: block;
109
+ position: relative;
110
+
111
+ &:first-child {
112
+ img {
113
+ border-start-start-radius: cv.getVar("card-radius");
114
+ border-start-end-radius: cv.getVar("card-radius");
115
+ }
116
+ }
117
+
118
+ &:last-child {
119
+ img {
120
+ border-end-start-radius: cv.getVar("card-radius");
121
+ border-end-end-radius: cv.getVar("card-radius");
122
+ }
123
+ }
124
+ }
125
+
126
+ .#{iv.$class-prefix}card-content {
127
+ @extend %card-item;
128
+
129
+ background-color: cv.getVar("card-content-background-color");
130
+ padding: cv.getVar("card-content-padding");
131
+ }
132
+
133
+ .#{iv.$class-prefix}card-footer {
134
+ @extend %card-item;
135
+
136
+ background-color: cv.getVar("card-footer-background-color");
137
+ border-top: cv.getVar("card-footer-border-top");
138
+ align-items: stretch;
139
+ display: flex;
140
+ }
141
+
142
+ .#{iv.$class-prefix}card-footer-item {
143
+ align-items: center;
144
+ display: flex;
145
+ flex-basis: 0;
146
+ flex-grow: 1;
147
+ flex-shrink: 0;
148
+ justify-content: center;
149
+ padding: cv.getVar("card-footer-padding");
150
+
151
+ &:not(:last-child) {
152
+ border-inline-end: cv.getVar("card-footer-border-top");
153
+ }
154
+ }
155
+
156
+ // Combinations
157
+
158
+ .#{iv.$class-prefix}card {
159
+ .#{iv.$class-prefix}media:not(:last-child) {
160
+ margin-bottom: cv.getVar("card-media-margin");
161
+ }
162
+ }
@@ -0,0 +1,188 @@
1
+ @use "../utilities/css-variables" as cv;
2
+ @use "../utilities/initial-variables" as iv;
3
+ @use "../utilities/extends";
4
+ @use "../utilities/mixins" as mx;
5
+
6
+ $dropdown-menu-min-width: 12rem !default;
7
+
8
+ $dropdown-content-background-color: cv.getVar("scheme-main") !default;
9
+ $dropdown-content-offset: 0.25rem !default;
10
+ $dropdown-content-padding-bottom: 0.5rem !default;
11
+ $dropdown-content-padding-top: 0.5rem !default;
12
+ $dropdown-content-radius: cv.getVar("radius") !default;
13
+ $dropdown-content-shadow: cv.getVar("shadow") !default;
14
+ $dropdown-content-z: 20 !default;
15
+
16
+ $dropdown-item-h: cv.getVar("scheme-h");
17
+ $dropdown-item-s: cv.getVar("scheme-s");
18
+ $dropdown-item-l: cv.getVar("scheme-main-l");
19
+ $dropdown-item-background-l: cv.getVar("scheme-main-l");
20
+ $dropdown-item-background-l-delta: 0%;
21
+ $dropdown-item-hover-background-l-delta: cv.getVar("hover-background-l-delta");
22
+ $dropdown-item-active-background-l-delta: cv.getVar(
23
+ "active-background-l-delta"
24
+ );
25
+ $dropdown-item-color-l: cv.getVar("text-strong-l");
26
+ $dropdown-item-selected-h: cv.getVar("link-h");
27
+ $dropdown-item-selected-s: cv.getVar("link-s");
28
+ $dropdown-item-selected-l: cv.getVar("link-l");
29
+ $dropdown-item-selected-background-l: cv.getVar("link-l");
30
+ $dropdown-item-selected-color-l: cv.getVar("link-invert-l");
31
+
32
+ $dropdown-divider-background-color: cv.getVar("border-weak") !default;
33
+
34
+ .#{iv.$class-prefix}dropdown {
35
+ // prettier-ignore-start
36
+ @include cv.register-vars(
37
+ (
38
+ "dropdown-menu-min-width": #{$dropdown-menu-min-width},
39
+ "dropdown-content-background-color": #{$dropdown-content-background-color},
40
+ "dropdown-content-offset": #{$dropdown-content-offset},
41
+ "dropdown-content-padding-bottom": #{$dropdown-content-padding-bottom},
42
+ "dropdown-content-padding-top": #{$dropdown-content-padding-top},
43
+ "dropdown-content-radius": #{$dropdown-content-radius},
44
+ "dropdown-content-shadow": #{$dropdown-content-shadow},
45
+ "dropdown-content-z": #{$dropdown-content-z},
46
+ "dropdown-item-h": #{$dropdown-item-h},
47
+ "dropdown-item-s": #{$dropdown-item-s},
48
+ "dropdown-item-l": #{$dropdown-item-l},
49
+ "dropdown-item-background-l": #{$dropdown-item-background-l},
50
+ "dropdown-item-background-l-delta": #{$dropdown-item-background-l-delta},
51
+ "dropdown-item-hover-background-l-delta": #{$dropdown-item-hover-background-l-delta},
52
+ "dropdown-item-active-background-l-delta": #{$dropdown-item-active-background-l-delta},
53
+ "dropdown-item-color-l": #{$dropdown-item-color-l},
54
+ "dropdown-item-selected-h": #{$dropdown-item-selected-h},
55
+ "dropdown-item-selected-s": #{$dropdown-item-selected-s},
56
+ "dropdown-item-selected-l": #{$dropdown-item-selected-l},
57
+ "dropdown-item-selected-background-l": #{$dropdown-item-selected-background-l},
58
+ "dropdown-item-selected-color-l": #{$dropdown-item-selected-color-l},
59
+ "dropdown-divider-background-color": #{$dropdown-divider-background-color},
60
+ )
61
+ );
62
+ // prettier-ignore-end
63
+ }
64
+
65
+ .#{iv.$class-prefix}dropdown {
66
+ display: inline-flex;
67
+ position: relative;
68
+ vertical-align: top;
69
+
70
+ &.#{iv.$class-prefix}is-active,
71
+ &.#{iv.$class-prefix}is-hoverable:hover {
72
+ .#{iv.$class-prefix}dropdown-menu {
73
+ display: block;
74
+ }
75
+ }
76
+
77
+ &.#{iv.$class-prefix}is-right {
78
+ .#{iv.$class-prefix}dropdown-menu {
79
+ left: auto;
80
+ right: 0;
81
+ }
82
+ }
83
+
84
+ &.#{iv.$class-prefix}is-up {
85
+ .#{iv.$class-prefix}dropdown-menu {
86
+ bottom: 100%;
87
+ padding-bottom: cv.getVar("dropdown-content-offset");
88
+ padding-top: initial;
89
+ top: auto;
90
+ }
91
+ }
92
+ }
93
+
94
+ .#{iv.$class-prefix}dropdown-menu {
95
+ display: none;
96
+ @include mx.ltr-position(0, false);
97
+ min-width: cv.getVar("dropdown-menu-min-width");
98
+ padding-top: cv.getVar("dropdown-content-offset");
99
+ position: absolute;
100
+ top: 100%;
101
+ z-index: cv.getVar("dropdown-content-z");
102
+ }
103
+
104
+ .#{iv.$class-prefix}dropdown-content {
105
+ background-color: cv.getVar("dropdown-content-background-color");
106
+ border-radius: cv.getVar("dropdown-content-radius");
107
+ box-shadow: cv.getVar("dropdown-content-shadow");
108
+ padding-bottom: cv.getVar("dropdown-content-padding-bottom");
109
+ padding-top: cv.getVar("dropdown-content-padding-top");
110
+ }
111
+
112
+ .#{iv.$class-prefix}dropdown-item {
113
+ color: hsl(
114
+ #{cv.getVar("dropdown-item-h")},
115
+ #{cv.getVar("dropdown-item-s")},
116
+ #{cv.getVar("dropdown-item-color-l")}
117
+ );
118
+ display: block;
119
+ font-size: 0.875rem;
120
+ line-height: 1.5;
121
+ padding: 0.375rem 1rem;
122
+ }
123
+
124
+ a.#{iv.$class-prefix}dropdown-item,
125
+ button.#{iv.$class-prefix}dropdown-item {
126
+ background-color: hsl(
127
+ #{cv.getVar("dropdown-item-h")},
128
+ #{cv.getVar("dropdown-item-s")},
129
+ calc(
130
+ #{cv.getVar("dropdown-item-background-l")} + #{cv.getVar(
131
+ "dropdown-item-background-l-delta"
132
+ )}
133
+ )
134
+ );
135
+ padding-inline-end: 3rem;
136
+ text-align: inherit;
137
+ white-space: nowrap;
138
+ width: 100%;
139
+
140
+ &:hover {
141
+ @include cv.register-vars(
142
+ (
143
+ "dropdown-item-background-l-delta": #{cv.getVar(
144
+ "dropdown-item-hover-background-l-delta"
145
+ )},
146
+ "dropdown-item-border-l-delta": #{cv.getVar(
147
+ "dropdown-item-hover-border-l-delta"
148
+ )},
149
+ )
150
+ );
151
+ }
152
+
153
+ &:active {
154
+ @include cv.register-vars(
155
+ (
156
+ "dropdown-item-background-l-delta": #{cv.getVar(
157
+ "dropdown-item-active-background-l-delta"
158
+ )},
159
+ "dropdown-item-border-l-delta": #{cv.getVar(
160
+ "dropdown-item-active-border-l-delta"
161
+ )},
162
+ )
163
+ );
164
+ }
165
+
166
+ &.#{iv.$class-prefix}is-active,
167
+ &.#{iv.$class-prefix}is-selected {
168
+ @include cv.register-vars(
169
+ (
170
+ "dropdown-item-h": #{cv.getVar("dropdown-item-selected-h")},
171
+ "dropdown-item-s": #{cv.getVar("dropdown-item-selected-s")},
172
+ "dropdown-item-l": #{cv.getVar("dropdown-item-selected-l")},
173
+ "dropdown-item-background-l": #{cv.getVar(
174
+ "dropdown-item-selected-background-l"
175
+ )},
176
+ "dropdown-item-color-l": #{cv.getVar("dropdown-item-selected-color-l")},
177
+ )
178
+ );
179
+ }
180
+ }
181
+
182
+ .#{iv.$class-prefix}dropdown-divider {
183
+ background-color: cv.getVar("dropdown-divider-background-color");
184
+ border: none;
185
+ display: block;
186
+ height: 1px;
187
+ margin: 0.5rem 0;
188
+ }
@@ -0,0 +1,165 @@
1
+ @use "../utilities/css-variables" as cv;
2
+ @use "../utilities/initial-variables" as iv;
3
+ @use "../utilities/extends";
4
+ @use "../utilities/mixins" as mx;
5
+
6
+ $menu-item-h: cv.getVar("scheme-h");
7
+ $menu-item-s: cv.getVar("scheme-s");
8
+ $menu-item-l: cv.getVar("scheme-main-l");
9
+ $menu-item-background-l: cv.getVar("scheme-main-l");
10
+ $menu-item-background-l-delta: 0%;
11
+ $menu-item-hover-background-l-delta: cv.getVar("hover-background-l-delta");
12
+ $menu-item-active-background-l-delta: cv.getVar("active-background-l-delta");
13
+ $menu-item-color-l: cv.getVar("text-l");
14
+ $menu-item-radius: cv.getVar("radius-small") !default;
15
+ $menu-item-selected-h: cv.getVar("link-h");
16
+ $menu-item-selected-s: cv.getVar("link-s");
17
+ $menu-item-selected-l: cv.getVar("link-l");
18
+ $menu-item-selected-background-l: cv.getVar("link-l");
19
+ $menu-item-selected-color-l: cv.getVar("link-invert-l");
20
+
21
+ $menu-list-border-left: 1px solid cv.getVar("border") !default;
22
+ $menu-list-line-height: 1.25 !default;
23
+ $menu-list-link-padding: 0.5em 0.75em !default;
24
+ $menu-nested-list-margin: 0.75em !default;
25
+ $menu-nested-list-padding-left: 0.75em !default;
26
+
27
+ $menu-label-color: cv.getVar("text-weak") !default;
28
+ $menu-label-font-size: 0.75em !default;
29
+ $menu-label-letter-spacing: 0.1em !default;
30
+ $menu-label-spacing: 1em !default;
31
+
32
+ .#{iv.$class-prefix}menu {
33
+ @include cv.register-vars(
34
+ (
35
+ "menu-item-h": #{$menu-item-h},
36
+ "menu-item-s": #{$menu-item-s},
37
+ "menu-item-l": #{$menu-item-l},
38
+ "menu-item-background-l": #{$menu-item-background-l},
39
+ "menu-item-background-l-delta": #{$menu-item-background-l-delta},
40
+ "menu-item-hover-background-l-delta": #{$menu-item-hover-background-l-delta},
41
+ "menu-item-active-background-l-delta": #{$menu-item-active-background-l-delta},
42
+ "menu-item-color-l": #{$menu-item-color-l},
43
+ "menu-item-radius": #{$menu-item-radius},
44
+ "menu-item-selected-h": #{$menu-item-selected-h},
45
+ "menu-item-selected-s": #{$menu-item-selected-s},
46
+ "menu-item-selected-l": #{$menu-item-selected-l},
47
+ "menu-item-selected-background-l": #{$menu-item-selected-background-l},
48
+ "menu-item-selected-color-l": #{$menu-item-selected-color-l},
49
+ "menu-list-border-left": #{$menu-list-border-left},
50
+ "menu-list-line-height": #{$menu-list-line-height},
51
+ "menu-list-link-padding": #{$menu-list-link-padding},
52
+ "menu-nested-list-margin": #{$menu-nested-list-margin},
53
+ "menu-nested-list-padding-left": #{$menu-nested-list-padding-left},
54
+ "menu-label-color": #{$menu-label-color},
55
+ "menu-label-font-size": #{$menu-label-font-size},
56
+ "menu-label-letter-spacing": #{$menu-label-letter-spacing},
57
+ "menu-label-spacing": #{$menu-label-spacing},
58
+ )
59
+ );
60
+ }
61
+
62
+ .#{iv.$class-prefix}menu {
63
+ font-size: cv.getVar("size-normal");
64
+
65
+ // Sizes
66
+ &.#{iv.$class-prefix}is-small {
67
+ font-size: cv.getVar("size-small");
68
+ }
69
+
70
+ &.#{iv.$class-prefix}is-medium {
71
+ font-size: cv.getVar("size-medium");
72
+ }
73
+
74
+ &.#{iv.$class-prefix}is-large {
75
+ font-size: cv.getVar("size-large");
76
+ }
77
+ }
78
+
79
+ .#{iv.$class-prefix}menu-list {
80
+ line-height: cv.getVar("menu-list-line-height");
81
+
82
+ a,
83
+ button,
84
+ .#{iv.$class-prefix}menu-item {
85
+ @extend %reset;
86
+ background-color: hsl(
87
+ #{cv.getVar("menu-item-h")},
88
+ #{cv.getVar("menu-item-s")},
89
+ calc(
90
+ #{cv.getVar("menu-item-background-l")} + #{cv.getVar(
91
+ "menu-item-background-l-delta"
92
+ )}
93
+ )
94
+ );
95
+ border-radius: cv.getVar("menu-item-radius");
96
+ color: hsl(
97
+ #{cv.getVar("menu-item-h")},
98
+ #{cv.getVar("menu-item-s")},
99
+ #{cv.getVar("menu-item-color-l")}
100
+ );
101
+ display: block;
102
+ padding: cv.getVar("menu-list-link-padding");
103
+ text-align: left;
104
+ width: 100%;
105
+
106
+ &:hover {
107
+ @include cv.register-vars(
108
+ (
109
+ "menu-item-background-l-delta": #{cv.getVar(
110
+ "menu-item-hover-background-l-delta"
111
+ )},
112
+ )
113
+ );
114
+ }
115
+
116
+ &:active {
117
+ @include cv.register-vars(
118
+ (
119
+ "menu-item-background-l-delta": #{cv.getVar(
120
+ "menu-item-active-background-l-delta"
121
+ )},
122
+ )
123
+ );
124
+ }
125
+
126
+ // Modifiers
127
+ &.#{iv.$class-prefix}is-active,
128
+ &.#{iv.$class-prefix}is-selected {
129
+ @include cv.register-vars(
130
+ (
131
+ "menu-item-h": #{cv.getVar("menu-item-selected-h")},
132
+ "menu-item-s": #{cv.getVar("menu-item-selected-s")},
133
+ "menu-item-l": #{cv.getVar("menu-item-selected-l")},
134
+ "menu-item-background-l": #{cv.getVar(
135
+ "menu-item-selected-background-l"
136
+ )},
137
+ "menu-item-color-l": #{cv.getVar("menu-item-selected-color-l")},
138
+ )
139
+ );
140
+ }
141
+ }
142
+
143
+ li {
144
+ ul {
145
+ border-inline-start: cv.getVar("menu-list-border-left");
146
+ margin: cv.getVar("menu-nested-list-margin");
147
+ padding-inline-start: cv.getVar("menu-nested-list-padding-left");
148
+ }
149
+ }
150
+ }
151
+
152
+ .#{iv.$class-prefix}menu-label {
153
+ color: cv.getVar("menu-label-color");
154
+ font-size: cv.getVar("menu-label-font-size");
155
+ letter-spacing: cv.getVar("menu-label-letter-spacing");
156
+ text-transform: uppercase;
157
+
158
+ &:not(:first-child) {
159
+ margin-top: cv.getVar("menu-label-spacing");
160
+ }
161
+
162
+ &:not(:last-child) {
163
+ margin-bottom: cv.getVar("menu-label-spacing");
164
+ }
165
+ }