Skip to content

Commit 4557fb5

Browse files
marcoambrosinimarcoambrosini
committed
Replace scss variable with css one and remove declaration
Signed-off-by: Marco Ambrosini <[email protected]>
1 parent 886177a commit 4557fb5

29 files changed

Lines changed: 98 additions & 104 deletions

File tree

‎src/assets/NcAppNavigationItem.scss‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
flex-wrap: wrap;
1111
box-sizing: border-box;
1212
width: 100%;
13-
min-height: $clickable-area;
13+
min-height: var(--default-clickable-area);
1414
transition: background-color var(--animation-quick) ease-in-out;
1515
transition: background-color 200ms ease-in-out;
1616
border-radius: var(--border-radius-element, var(--border-radius-pill));
@@ -86,22 +86,22 @@
8686
overflow: hidden;
8787
flex: 1 1 0;
8888
box-sizing: border-box;
89-
min-height: $clickable-area;
89+
min-height: var(--default-clickable-area);
9090
padding: 0;
9191
white-space: nowrap;
9292
color: var(--color-main-text);
9393
background-repeat: no-repeat;
9494
background-position: $icon-margin center;
9595
background-size: $icon-size $icon-size;
96-
line-height: $clickable-area;
96+
line-height: var(--default-clickable-area);
9797

9898
.app-navigation-entry-icon {
9999
display: flex;
100100
align-items: center;
101-
flex: 0 0 $clickable-area;
101+
flex: 0 0 var(--default-clickable-area);
102102
justify-content: center;
103-
width: $clickable-area;
104-
height: $clickable-area;
103+
width: var(--default-clickable-area);
104+
height: var(--default-clickable-area);
105105
background-size: $icon-size $icon-size;
106106
background-repeat: no-repeat;
107107
background-position: $icon-margin center;
@@ -115,7 +115,7 @@
115115
}
116116

117117
.editingContainer {
118-
width: calc(100% - #{$clickable-area});
118+
width: calc(100% - var(--default-clickable-area));
119119
margin: auto;
120120
}
121121

@@ -146,21 +146,21 @@
146146
.app-navigation-entry__deleted {
147147
display: inline-flex;
148148
flex: 1 1 0;
149-
padding-left: $clickable-area - $icon-margin !important;
149+
padding-left: calc(var(--default-clickable-area) - $icon-margin) !important;
150150
.app-navigation-entry__deleted-description {
151151
position: relative;
152152
overflow: hidden;
153153
flex: 1 1 0;
154154
white-space: nowrap;
155155
text-overflow: ellipsis;
156-
line-height: $clickable-area;
156+
line-height: var(--default-clickable-area);
157157
}
158158
}
159159

160160
/* counter and actions */
161161
.app-navigation-entry__utils {
162162
display: flex;
163-
min-width: $clickable-area;
163+
min-width: var(--default-clickable-area);
164164
align-items: center;
165165
flex: 0 1 auto;
166166
justify-content: flex-end;

‎src/assets/action.scss‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -51,25 +51,25 @@
5151

5252
font-weight: normal;
5353
font-size: var(--default-font-size);
54-
line-height: $clickable-area;
54+
line-height: var(--default-clickable-area);
5555

5656
& > span {
5757
cursor: pointer;
5858
white-space: nowrap;
5959
}
6060

6161
&__icon {
62-
width: $clickable-area;
63-
height: $clickable-area;
62+
width: var(--default-clickable-area);
63+
height: var(--default-clickable-area);
6464
opacity: $opacity_full;
6565
background-position: $icon-margin center;
6666
background-size: $icon-size;
6767
background-repeat: no-repeat;
6868
}
6969

7070
&:deep(.material-design-icon) {
71-
width: $clickable-area;
72-
height: $clickable-area;
71+
width: var(--default-clickable-area);
72+
height: var(--default-clickable-area);
7373
opacity: $opacity_full;
7474

7575
.material-design-icon__svg {
@@ -113,7 +113,7 @@
113113
margin-left: auto;
114114
// Align with right end of the button
115115
// This is the padding-right
116-
margin-right: -$icon-margin;
116+
margin-right: calc($icon-margin * -1);
117117
}
118118
}
119119
}

‎src/assets/variables.scss‎

Lines changed: 2 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2,19 +2,13 @@
22
* SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors
33
* SPDX-License-Identifier: AGPL-3.0-or-later
44
*/
5-
6-
// https://uxplanet.org/7-rules-for-mobile-ui-button-design-e9cf2ea54556
7-
// recommended is 48px
8-
// 34px is what we choose and have very good visual-to-usability ratio
9-
$clickable-area: 34px;
10-
115
// background icon size
126
// also used for the scss icon font
137
$icon-size: 16px;
148

15-
// icon padding for a $clickable-area width and a $icon-size icon
9+
// icon padding for a var(--default-clickable-area) width and a $icon-size icon
1610
// ( 34px - 16px ) / 2
17-
$icon-margin: math.div($clickable-area - $icon-size, 2);
11+
$icon-margin: calc(calc(var(--default-clickable-area) - $icon-size) / 2);
1812

1913
// transparency background for icons
2014
$icon-focus-bg: rgba(127, 127, 127, .25);

‎src/components/NcActionButton/NcActionButton.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -548,6 +548,6 @@ export default {
548548
549549
.action-button__pressed-icon {
550550
margin-left: auto;
551-
margin-right: -$icon-margin;
551+
margin-right: calc($icon-margin * -1);
552552
}
553553
</style>

‎src/components/NcActionCaption/NcActionCaption.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -46,15 +46,15 @@ export default {
4646
<style lang="scss" scoped>
4747
.app-navigation-caption {
4848
color: var(--color-text-maxcontrast);
49-
line-height: $clickable-area;
49+
line-height: var(--default-clickable-area);
5050
white-space: nowrap;
5151
text-overflow: ellipsis;
5252
box-shadow: none !important;
5353
user-select: none;
5454
pointer-events: none;
5555
margin-left: 12px;
5656
padding-right: 14px;
57-
height: $clickable-area;
57+
height: var(--default-clickable-area);
5858
display: flex;
5959
align-items: center;
6060
}

‎src/components/NcActionCheckbox/NcActionCheckbox.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -182,7 +182,7 @@ export default {
182182
box-shadow: none;
183183
184184
font-weight: normal;
185-
line-height: $clickable-area;
185+
line-height: var(--default-clickable-area);
186186
187187
/* checkbox/radio fixes */
188188
&__checkbox {

‎src/components/NcActionInput/NcActionInput.vue‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -520,8 +520,8 @@ $input-margin: 4px;
520520
justify-content: center;
521521
522522
&:deep(.material-design-icon) {
523-
width: $clickable-area;
524-
height: $clickable-area;
523+
width: var(--default-clickable-area);
524+
height: var(--default-clickable-area);
525525
opacity: $opacity_full;
526526
527527
.material-design-icon__svg {
@@ -540,7 +540,7 @@ $input-margin: 4px;
540540
min-height: 0;
541541
/* Keep padding to define the width to
542542
assure correct position of a possible text */
543-
padding: #{math.div($clickable-area, 2)} 0 #{math.div($clickable-area, 2)} $clickable-area;
543+
padding: calc(var(--default-clickable-area)/ 2) 0 calc(var(--default-clickable-area)/ 2) var(--default-clickable-area);
544544
545545
background-position: #{$icon-margin} center;
546546
background-size: $icon-size;
@@ -610,12 +610,12 @@ $input-margin: 4px;
610610
// add the same bottomMargin as the right padding
611611
// for visual balance
612612
li:last-child > .action-input {
613-
padding-bottom: $icon-margin - $input-margin;
613+
padding-bottom: calc($icon-margin - $input-margin);
614614
}
615615
616616
// same for first item
617617
li:first-child > .action-input:not(.action-input--visible-label) {
618-
padding-top: $icon-margin - $input-margin;
618+
padding-top: calc($icon-margin - $input-margin);
619619
}
620620
621621
</style>

‎src/components/NcActionRadio/NcActionRadio.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -177,7 +177,7 @@ export default {
177177
box-shadow: none;
178178
179179
font-weight: normal;
180-
line-height: $clickable-area;
180+
line-height: var(--default-clickable-area);
181181
182182
/* checkbox/radio fixes */
183183
&__radio {

‎src/components/NcActionTextEditable/NcActionTextEditable.vue‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -203,7 +203,7 @@ $input-margin: 4px;
203203
box-shadow: none;
204204
205205
font-weight: normal;
206-
line-height: $clickable-area;
206+
line-height: var(--default-clickable-area);
207207
208208
& > span {
209209
cursor: pointer;
@@ -215,15 +215,15 @@ $input-margin: 4px;
215215
min-height: 0;
216216
/* Keep padding to define the width to
217217
assure correct position of a possible text */
218-
padding: #{math.div($clickable-area, 2)} 0 #{math.div($clickable-area, 2)} $clickable-area;
218+
padding: calc(var(--default-clickable-area) / 2) 0 calc(var(--default-clickable-area) / 2) var(--default-clickable-area);
219219
220220
background-position: #{$icon-margin} center;
221221
background-size: $icon-size;
222222
}
223223
224224
&:deep(.material-design-icon) {
225-
width: $clickable-area;
226-
height: $clickable-area;
225+
width: var(--default-clickable-area);
226+
height: var(--default-clickable-area);
227227
opacity: $opacity_full;
228228
229229
.material-design-icon__svg {
@@ -258,10 +258,10 @@ $input-margin: 4px;
258258
259259
// bottom-right corner
260260
position: absolute;
261-
right: $icon-margin + 1;
261+
right: calc($icon-margin + 1);
262262
bottom: 1px;
263-
width: #{$clickable-area - $input-margin * 2};
264-
height: #{$clickable-area - $input-margin * 2};
263+
width: calc(var(--default-clickable-area) - $input-margin * 2);
264+
height: calc(var(--default-clickable-area) - $input-margin * 2);
265265
box-sizing: border-box;
266266
margin: 0;
267267
padding: 7px 6px;
@@ -283,10 +283,10 @@ $input-margin: 4px;
283283
color: inherit;
284284
border-color: var(--color-border-maxcontrast);
285285
286-
min-height: #{$clickable-area * 2 - $input-margin * 2}; /* twice the element margin-y */
287-
max-height: #{$clickable-area * 3 - $input-margin * 2}; /* twice the element margin-y */
286+
min-height: calc(var(--default-clickable-area) * 2 - $input-margin * 2); /* twice the element margin-y */
287+
max-height: calc(var(--default-clickable-area) * 3 - $input-margin * 2); /* twice the element margin-y */
288288
// block width widening
289-
min-width: $clickable-area * 4;
289+
min-width: calc(var(--default-clickable-area) * 4);
290290
width: 100% !important;
291291
margin: 0;
292292
@@ -329,11 +329,11 @@ $input-margin: 4px;
329329
// add the same bottomMargin as the right padding
330330
// for visual balance
331331
li:last-child > .action-text-editable {
332-
margin-bottom: $icon-margin - $input-margin;
332+
margin-bottom: calc($icon-margin - $input-margin);
333333
}
334334
335335
// same for first item
336336
li:first-child > .action-text-editable {
337-
margin-top: $icon-margin - $input-margin;
337+
margin-top: calc($icon-margin - $input-margin);
338338
}
339339
</style>

‎src/components/NcActions/NcActions.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2009,7 +2009,7 @@ export default {
20092009
20102010
// Spacing between buttons
20112011
& > button {
2012-
margin-right: math.div($icon-margin, 2);
2012+
margin-right: calc($icon-margin / 2);
20132013
}
20142014
}
20152015

0 commit comments

Comments
 (0)