|
1 | | -@use '../styles/variables' as vars; |
| 1 | +@use '../styles/variables'; |
2 | 2 |
|
3 | 3 | .note-container { |
4 | 4 | position: fixed; |
|
7 | 7 | flex-direction: column; |
8 | 8 | background-color: var(--bg-secondary); |
9 | 9 | border-radius: 15px; |
10 | | - box-shadow: vars.$shadow-md; |
11 | | - font-family: vars.$font-stack; |
| 10 | + box-shadow: variables.$shadow-md; |
| 11 | + font-family: variables.$font-stack; |
12 | 12 | overflow: hidden; |
13 | 13 | opacity: 0; |
14 | 14 | transform: scale(0.9); |
15 | | - transition: vars.$opacity-transition, vars.$transform-transition, vars.$color-transition; |
| 15 | + transition: variables.$opacity-transition, variables.$transform-transition, variables.$color-transition; |
16 | 16 |
|
17 | 17 | &.visible { |
18 | 18 | opacity: 1; |
|
28 | 28 | font-size: 14px; |
29 | 29 | color: var(--text-primary); |
30 | 30 | cursor: pointer; |
31 | | - transition: vars.$color-transition, vars.$transform-transition; |
| 31 | + transition: variables.$color-transition, variables.$transform-transition; |
32 | 32 |
|
33 | 33 | &:hover { |
34 | 34 | background: var(--interactive); |
|
46 | 46 | padding: 1px 16px; |
47 | 47 | background: var(--bg-secondary); |
48 | 48 | border-bottom: 1px solid var(--border-primary); |
49 | | - z-index: vars.$z-index-middle; |
| 49 | + z-index: variables.$z-index-middle; |
50 | 50 | transition: all 0.3s ease; |
51 | 51 |
|
52 | 52 | .left-buttons, |
|
96 | 96 | padding: 12px 16px; |
97 | 97 | background: var(--bg-secondary); |
98 | 98 | border-bottom: 1px solid var(--border-primary); |
99 | | - transition: vars.$color-transition; |
| 99 | + transition: variables.$color-transition; |
100 | 100 | } |
101 | 101 |
|
102 | 102 | .note-title { |
|
108 | 108 | background: var(--bg-surface); |
109 | 109 | color: var(--text-primary); |
110 | 110 | outline: none; |
111 | | - transition: vars.$color-transition, vars.$transform-transition; |
| 111 | + transition: variables.$color-transition, variables.$transform-transition; |
112 | 112 |
|
113 | 113 | &:focus { |
114 | 114 | border-color: var(--interactive); |
|
120 | 120 | flex: 1; |
121 | 121 | display: flex; |
122 | 122 | background: var(--bg-surface); |
123 | | - transition: vars.$color-transition; |
| 123 | + transition: variables.$color-transition; |
124 | 124 |
|
125 | 125 | &.mode-edit .note-preview, |
126 | 126 | &.mode-preview .note-editor { |
|
131 | 131 | .note-editor, |
132 | 132 | .note-preview { |
133 | 133 | flex: 1; |
134 | | - font-family: vars.$font-stack; |
| 134 | + font-family: variables.$font-stack; |
135 | 135 | background: var(--bg-surface); |
136 | 136 | color: var(--text-primary); |
137 | | - transition: vars.$color-transition; |
| 137 | + transition: variables.$color-transition; |
138 | 138 | } |
139 | 139 |
|
140 | 140 | .note-editor { |
|
256 | 256 | background: transparent; |
257 | 257 | border: none; |
258 | 258 | cursor: pointer; |
259 | | - transition: vars.$color-transition; |
| 259 | + transition: variables.$color-transition; |
260 | 260 |
|
261 | 261 | &:hover { |
262 | 262 | text-decoration: underline; |
|
0 commit comments