@mt-gloss/styles 0.0.3

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 (29) hide show
  1. package/README.md +23 -0
  2. package/package.json +14 -0
  3. package/src/index.scss +35 -0
  4. package/src/lib/_base.scss +27 -0
  5. package/src/lib/_dashboard-bridge.scss +93 -0
  6. package/src/lib/_mixins.scss +80 -0
  7. package/src/lib/_tokens.scss +4 -0
  8. package/src/lib/components/_accordion.scss +236 -0
  9. package/src/lib/components/_animations.scss +314 -0
  10. package/src/lib/components/_async.scss +75 -0
  11. package/src/lib/components/_badge.scss +135 -0
  12. package/src/lib/components/_buttons.scss +555 -0
  13. package/src/lib/components/_cards.scss +228 -0
  14. package/src/lib/components/_chips.scss +276 -0
  15. package/src/lib/components/_composed-inputs.scss +590 -0
  16. package/src/lib/components/_datepicker.scss +594 -0
  17. package/src/lib/components/_dropdowns.scss +90 -0
  18. package/src/lib/components/_feedback.scss +128 -0
  19. package/src/lib/components/_form.scss +153 -0
  20. package/src/lib/components/_inputs.scss +459 -0
  21. package/src/lib/components/_links.scss +163 -0
  22. package/src/lib/components/_menu.scss +339 -0
  23. package/src/lib/components/_segmented-control.scss +188 -0
  24. package/src/lib/components/_select.scss +482 -0
  25. package/src/lib/components/_selection.scss +753 -0
  26. package/src/lib/components/_slider.scss +353 -0
  27. package/src/lib/components/_specialized.scss +590 -0
  28. package/src/lib/components/_textarea.scss +89 -0
  29. package/src/lib/components/_tooltip.scss +169 -0
package/src/lib/components/_tooltip.scss ADDED
@@ -0,0 +1,169 @@
1
+ // ============================================
2
+ // COMPONENT: TOOLTIP
3
+ // ============================================
4
+
5
+ @use '../tokens' as *;
6
+
7
+ .gloss-tooltip {
8
+ pointer-events: none;
9
+ animation: gloss-tooltip-enter 0.15s ease-out;
10
+
11
+ &__content {
12
+ padding: $space-2 $space-3;
13
+ border-radius: $radius-md;
14
+ font-family: $font-body;
15
+ font-size: $text-sm;
16
+ line-height: 1.4;
17
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
18
+ }
19
+
20
+ &__arrow {
21
+ position: absolute;
22
+ width: 8px;
23
+ height: 8px;
24
+ transform: rotate(45deg);
25
+ }
26
+
27
+ // Placement variants
28
+ &--top {
29
+ .gloss-tooltip__arrow {
30
+ bottom: -4px;
31
+ left: 50%;
32
+ margin-left: -4px;
33
+ }
34
+ }
35
+
36
+ &--bottom {
37
+ .gloss-tooltip__arrow {
38
+ top: -4px;
39
+ left: 50%;
40
+ margin-left: -4px;
41
+ }
42
+ }
43
+
44
+ &--left {
45
+ .gloss-tooltip__arrow {
46
+ right: -4px;
47
+ top: 50%;
48
+ margin-top: -4px;
49
+ }
50
+ }
51
+
52
+ &--right {
53
+ .gloss-tooltip__arrow {
54
+ left: -4px;
55
+ top: 50%;
56
+ margin-top: -4px;
57
+ }
58
+ }
59
+
60
+ // Color variants
61
+ &--dark {
62
+ .gloss-tooltip__content {
63
+ background: $color-gray-900;
64
+ color: $color-white;
65
+ }
66
+
67
+ .gloss-tooltip__arrow {
68
+ background: $color-gray-900;
69
+ }
70
+ }
71
+
72
+ &--light {
73
+ .gloss-tooltip__content {
74
+ background: $color-white;
75
+ color: $alias-text-primary;
76
+ border: 1px solid $alias-border-default;
77
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
78
+ }
79
+
80
+ .gloss-tooltip__arrow {
81
+ background: $color-white;
82
+ border: 1px solid $alias-border-default;
83
+ border-top: none;
84
+ border-left: none;
85
+ }
86
+
87
+ &.gloss-tooltip--top .gloss-tooltip__arrow,
88
+ &.gloss-tooltip--bottom .gloss-tooltip__arrow {
89
+ border-right: none;
90
+ border-bottom: none;
91
+ }
92
+
93
+ &.gloss-tooltip--bottom .gloss-tooltip__arrow {
94
+ border-top: 1px solid $alias-border-default;
95
+ border-left: 1px solid $alias-border-default;
96
+ border-bottom: none;
97
+ border-right: none;
98
+ }
99
+
100
+ &.gloss-tooltip--left .gloss-tooltip__arrow {
101
+ border-top: none;
102
+ border-left: none;
103
+ border-bottom: 1px solid $alias-border-default;
104
+ border-right: 1px solid $alias-border-default;
105
+ }
106
+
107
+ &.gloss-tooltip--right .gloss-tooltip__arrow {
108
+ border-top: 1px solid $alias-border-default;
109
+ border-left: 1px solid $alias-border-default;
110
+ border-bottom: none;
111
+ border-right: none;
112
+ }
113
+ }
114
+
115
+ &--primary {
116
+ .gloss-tooltip__content {
117
+ background: $alias-primary;
118
+ color: $color-white;
119
+ }
120
+
121
+ .gloss-tooltip__arrow {
122
+ background: $alias-primary;
123
+ }
124
+ }
125
+
126
+ &--success {
127
+ .gloss-tooltip__content {
128
+ background: $color-green-600;
129
+ color: $color-white;
130
+ }
131
+
132
+ .gloss-tooltip__arrow {
133
+ background: $color-green-600;
134
+ }
135
+ }
136
+
137
+ &--warning {
138
+ .gloss-tooltip__content {
139
+ background: $color-amber-500;
140
+ color: $color-white;
141
+ }
142
+
143
+ .gloss-tooltip__arrow {
144
+ background: $color-amber-500;
145
+ }
146
+ }
147
+
148
+ &--error {
149
+ .gloss-tooltip__content {
150
+ background: $color-red-600;
151
+ color: $color-white;
152
+ }
153
+
154
+ .gloss-tooltip__arrow {
155
+ background: $color-red-600;
156
+ }
157
+ }
158
+ }
159
+
160
+ @keyframes gloss-tooltip-enter {
161
+ from {
162
+ opacity: 0;
163
+ transform: scale(0.95);
164
+ }
165
+ to {
166
+ opacity: 1;
167
+ transform: scale(1);
168
+ }
169
+ }