From 250e77d5ececef3ad8d4633e654b7340eb4deb58 Mon Sep 17 00:00:00 2001 From: Marco Ambrosini Date: Mon, 17 Jun 2024 11:30:50 +0200 Subject: [PATCH] Replace scss variable with css one and remove declaration Signed-off-by: Marco Ambrosini --- src/assets/NcAppNavigationItem.scss | 20 +++++++------- src/assets/action.scss | 10 +++---- src/assets/variables.scss | 6 ++--- .../NcActionCaption/NcActionCaption.vue | 4 +-- .../NcActionCheckbox/NcActionCheckbox.vue | 2 +- .../NcActionInput/NcActionInput.vue | 6 ++--- .../NcActionRadio/NcActionRadio.vue | 2 +- .../NcActionTextEditable.vue | 18 ++++++------- .../NcAppContent/NcAppDetailsToggle.vue | 4 +-- .../NcAppNavigationCaption.vue | 6 ++--- .../NcAppNavigationNewItem.vue | 2 +- .../NcAppNavigationSettings.vue | 10 +++---- .../NcAppNavigationToggle.vue | 2 +- .../NcAppSettingsDialog.vue | 4 +-- src/components/NcAppSidebar/NcAppSidebar.vue | 26 +++++++++---------- src/components/NcBreadcrumb/NcBreadcrumb.vue | 2 +- .../NcCheckboxContent.vue | 6 ++--- .../NcColorPicker/NcColorPicker.vue | 4 +-- .../NcCounterBubble/NcCounterBubble.vue | 2 +- src/components/NcDateTimePicker/index.scss | 2 +- src/components/NcHeaderMenu/NcHeaderMenu.vue | 2 +- .../NcListItemIcon/NcListItemIcon.vue | 6 ++--- src/components/NcModal/NcModal.vue | 20 +++++++------- .../NcRichContenteditable.vue | 6 ++--- src/components/NcSelect/NcSelect.vue | 2 +- .../NcSettingsSection/NcSettingsSection.vue | 4 +-- 26 files changed, 89 insertions(+), 89 deletions(-) diff --git a/src/assets/NcAppNavigationItem.scss b/src/assets/NcAppNavigationItem.scss index 387d593691..7521433163 100644 --- a/src/assets/NcAppNavigationItem.scss +++ b/src/assets/NcAppNavigationItem.scss @@ -5,7 +5,7 @@ flex-wrap: wrap; box-sizing: border-box; width: 100%; - min-height: $clickable-area; + min-height: var(--default-clickable-area); transition: background-color var(--animation-quick) ease-in-out; transition: background-color 200ms ease-in-out; border-radius: var(--border-radius-element, var(--border-radius-pill)); @@ -81,22 +81,22 @@ overflow: hidden; flex: 1 1 0; box-sizing: border-box; - min-height: $clickable-area; + min-height: var(--default-clickable-area); padding: 0; white-space: nowrap; color: var(--color-main-text); background-repeat: no-repeat; background-position: $icon-margin center; background-size: $icon-size $icon-size; - line-height: $clickable-area; + line-height: var(--default-clickable-area); .app-navigation-entry-icon { display: flex; align-items: center; - flex: 0 0 $clickable-area; + flex: 0 0 var(--default-clickable-area); justify-content: center; - width: $clickable-area; - height: $clickable-area; + width: var(--default-clickable-area); + height: var(--default-clickable-area); background-size: $icon-size $icon-size; background-repeat: no-repeat; background-position: $icon-margin center; @@ -110,7 +110,7 @@ } .editingContainer { - width: calc(100% - #{$clickable-area}); + width: calc(100% - #{var(--default-clickable-area)}); margin: auto; } @@ -141,21 +141,21 @@ .app-navigation-entry__deleted { display: inline-flex; flex: 1 1 0; - padding-left: $clickable-area - $icon-margin !important; + padding-left: var(--default-clickable-area) - $icon-margin !important; .app-navigation-entry__deleted-description { position: relative; overflow: hidden; flex: 1 1 0; white-space: nowrap; text-overflow: ellipsis; - line-height: $clickable-area; + line-height: var(--default-clickable-area); } } /* counter and actions */ .app-navigation-entry__utils { display: flex; - min-width: $clickable-area; + min-width: var(--default-clickable-area); align-items: center; flex: 0 1 auto; justify-content: flex-end; diff --git a/src/assets/action.scss b/src/assets/action.scss index f78267bc8a..b466162f12 100644 --- a/src/assets/action.scss +++ b/src/assets/action.scss @@ -69,7 +69,7 @@ font-weight: normal; font-size: var(--default-font-size); - line-height: $clickable-area; + line-height: var(--default-clickable-area); & > span { cursor: pointer; @@ -77,8 +77,8 @@ } &__icon { - width: $clickable-area; - height: $clickable-area; + width: var(--default-clickable-area); + height: var(--default-clickable-area); opacity: $opacity_full; background-position: $icon-margin center; background-size: $icon-size; @@ -86,8 +86,8 @@ } &:deep(.material-design-icon) { - width: $clickable-area; - height: $clickable-area; + width: var(--default-clickable-area); + height: var(--default-clickable-area); opacity: $opacity_full; .material-design-icon__svg { diff --git a/src/assets/variables.scss b/src/assets/variables.scss index 8d7ffc65b7..abe13b62eb 100644 --- a/src/assets/variables.scss +++ b/src/assets/variables.scss @@ -23,15 +23,15 @@ // https://uxplanet.org/7-rules-for-mobile-ui-button-design-e9cf2ea54556 // recommended is 48px // 34px is what we choose and have very good visual-to-usability ratio -$clickable-area: 34px; +var(--default-clickable-area): 34px; // background icon size // also used for the scss icon font $icon-size: 16px; -// icon padding for a $clickable-area width and a $icon-size icon +// icon padding for a var(--default-clickable-area) width and a $icon-size icon // ( 34px - 16px ) / 2 -$icon-margin: math.div($clickable-area - $icon-size, 2); +$icon-margin: math.div(var(--default-clickable-area) - $icon-size, 2); // transparency background for icons $icon-focus-bg: rgba(127, 127, 127, .25); diff --git a/src/components/NcActionCaption/NcActionCaption.vue b/src/components/NcActionCaption/NcActionCaption.vue index 0e61350d08..dbe408ec81 100644 --- a/src/components/NcActionCaption/NcActionCaption.vue +++ b/src/components/NcActionCaption/NcActionCaption.vue @@ -61,7 +61,7 @@ export default { diff --git a/src/components/NcAppNavigationNewItem/NcAppNavigationNewItem.vue b/src/components/NcAppNavigationNewItem/NcAppNavigationNewItem.vue index 8b68194d06..863251f995 100644 --- a/src/components/NcAppNavigationNewItem/NcAppNavigationNewItem.vue +++ b/src/components/NcAppNavigationNewItem/NcAppNavigationNewItem.vue @@ -188,7 +188,7 @@ export default { } .newItemContainer { - width: calc(100% - #{$clickable-area}); + width: calc(100% - #{var(--default-clickable-area)}); margin: auto; } diff --git a/src/components/NcAppNavigationSettings/NcAppNavigationSettings.vue b/src/components/NcAppNavigationSettings/NcAppNavigationSettings.vue index fc90bc1a9b..7c6ea901ae 100644 --- a/src/components/NcAppNavigationSettings/NcAppNavigationSettings.vue +++ b/src/components/NcAppNavigationSettings/NcAppNavigationSettings.vue @@ -102,7 +102,7 @@ export default { .settings-button { display: flex; flex: 1 1 0; - height: $clickable-area; + height: var(--default-clickable-area); width: 100%; padding: 0; margin: 0; @@ -115,7 +115,7 @@ export default { font-size: 100%; color: var(--color-main-text); padding-right: 14px; - line-height: $clickable-area; + line-height: var(--default-clickable-area); &:hover, &:focus { @@ -123,9 +123,9 @@ export default { } &__icon { - width: $clickable-area; - height: $clickable-area; - min-width: $clickable-area; + width: var(--default-clickable-area); + height: var(--default-clickable-area); + min-width: var(--default-clickable-area); } &__label { overflow: hidden; diff --git a/src/components/NcAppNavigationToggle/NcAppNavigationToggle.vue b/src/components/NcAppNavigationToggle/NcAppNavigationToggle.vue index d87eccc964..d38f09241f 100644 --- a/src/components/NcAppNavigationToggle/NcAppNavigationToggle.vue +++ b/src/components/NcAppNavigationToggle/NcAppNavigationToggle.vue @@ -90,7 +90,7 @@ export default { position: absolute; top: var(--app-navigation-padding); right: calc(0px - var(--app-navigation-padding)); - margin-right: - $clickable-area; + margin-right: - var(--default-clickable-area); } button.app-navigation-toggle { diff --git a/src/components/NcAppSettingsDialog/NcAppSettingsDialog.vue b/src/components/NcAppSettingsDialog/NcAppSettingsDialog.vue index 81adceeebe..f2b78944d7 100644 --- a/src/components/NcAppSettingsDialog/NcAppSettingsDialog.vue +++ b/src/components/NcAppSettingsDialog/NcAppSettingsDialog.vue @@ -425,9 +425,9 @@ export default { display: flex; align-content: center; font-size: 16px; - height: $clickable-area; + height: var(--default-clickable-area); margin: 4px 0; - line-height: $clickable-area; + line-height: var(--default-clickable-area); border-radius: var(--border-radius-pill); font-weight: bold; padding: 0 20px; diff --git a/src/components/NcAppSidebar/NcAppSidebar.vue b/src/components/NcAppSidebar/NcAppSidebar.vue index 2dee4cb08c..0d9835f874 100644 --- a/src/components/NcAppSidebar/NcAppSidebar.vue +++ b/src/components/NcAppSidebar/NcAppSidebar.vue @@ -1182,10 +1182,10 @@ $top-buttons-spacing: $app-navigation-padding; // align with app navigation z-index: 100; top: $top-buttons-spacing; right: $top-buttons-spacing; - width: $clickable-area; - height: $clickable-area; + width: var(--default-clickable-area); + height: var(--default-clickable-area); opacity: $opacity_normal; - border-radius: math.div($clickable-area, 2); + border-radius: math.div(var(--default-clickable-area), 2); &:hover, &:active, &:focus { @@ -1212,23 +1212,23 @@ $top-buttons-spacing: $app-navigation-padding; // align with app navigation padding-left: 0; flex: 1 1 auto; min-width: 0; - padding-right: calc(2 * $clickable-area + $top-buttons-spacing); + padding-right: calc(2 * var(--default-clickable-area) + $top-buttons-spacing); padding-top: var(--app-sidebar-padding); &.app-sidebar-header__desc--without-actions { - padding-right: calc($clickable-area + $top-buttons-spacing); + padding-right: calc(var(--default-clickable-area) + $top-buttons-spacing); } .app-sidebar-header__tertiary-actions { z-index: 3; // above star position: absolute; top: calc(var(--app-sidebar-padding) / 2); - left: -1 * $clickable-area; + left: -1 * var(--default-clickable-area); gap: 0; // override gap } .app-sidebar-header__menu { top: $top-buttons-spacing; - right: calc($clickable-area + $top-buttons-spacing); // left of the close button + right: calc(var(--default-clickable-area) + $top-buttons-spacing); // left of the close button position: absolute; } } @@ -1241,14 +1241,14 @@ $top-buttons-spacing: $app-navigation-padding; // align with app navigation .app-sidebar-header__menu { position: absolute; top: $top-buttons-spacing; - right: calc($top-buttons-spacing + $clickable-area); + right: calc($top-buttons-spacing + var(--default-clickable-area)); } // increase the padding to not overlap the menu .app-sidebar-header__desc { - padding-right: calc($clickable-area * 2 + $top-buttons-spacing); + padding-right: calc(var(--default-clickable-area) * 2 + $top-buttons-spacing); &.app-sidebar-header__desc--without-actions { - padding-right: calc($clickable-area + $top-buttons-spacing); + padding-right: calc(var(--default-clickable-area) + $top-buttons-spacing); } } } @@ -1300,8 +1300,8 @@ $top-buttons-spacing: $app-navigation-padding; // align with app navigation .app-sidebar-header__tertiary-actions { display: flex; - height: $clickable-area; - width: $clickable-area; + height: var(--default-clickable-area); + width: var(--default-clickable-area); justify-content: center; flex: 0 0 auto; @@ -1326,7 +1326,7 @@ $top-buttons-spacing: $app-navigation-padding; // align with app navigation .app-sidebar-header__mainname-container { display: flex; align-items: center; - min-height: $clickable-area; + min-height: var(--default-clickable-area); // main name .app-sidebar-header__mainname { diff --git a/src/components/NcBreadcrumb/NcBreadcrumb.vue b/src/components/NcBreadcrumb/NcBreadcrumb.vue index 35e3a0abc2..be5a3c1112 100644 --- a/src/components/NcBreadcrumb/NcBreadcrumb.vue +++ b/src/components/NcBreadcrumb/NcBreadcrumb.vue @@ -291,7 +291,7 @@ export default { .vue-crumb { background-image: none; display: inline-flex; - height: $clickable-area; + height: var(--default-clickable-area); padding: 0; &:last-child { diff --git a/src/components/NcCheckboxRadioSwitch/NcCheckboxContent.vue b/src/components/NcCheckboxRadioSwitch/NcCheckboxContent.vue index 7996cebfdd..79aa7894fe 100644 --- a/src/components/NcCheckboxRadioSwitch/NcCheckboxContent.vue +++ b/src/components/NcCheckboxRadioSwitch/NcCheckboxContent.vue @@ -214,9 +214,9 @@ export default { flex-direction: row; gap: 4px; user-select: none; - min-height: $clickable-area; - border-radius: $clickable-area; - padding: 4px calc(($clickable-area - var(--icon-height)) / 2); + min-height: var(--default-clickable-area); + border-radius: var(--default-clickable-area); + padding: 4px calc((var(--default-clickable-area) - var(--icon-height)) / 2); // Set to 100% to make text overflow work on button style width: 100%; // but restrict to content so plain checkboxes / radio switches do not expand diff --git a/src/components/NcColorPicker/NcColorPicker.vue b/src/components/NcColorPicker/NcColorPicker.vue index 2d00deeb44..2b0c9862b5 100644 --- a/src/components/NcColorPicker/NcColorPicker.vue +++ b/src/components/NcColorPicker/NcColorPicker.vue @@ -444,8 +444,8 @@ export default { &__simple { display: grid; - grid-template-columns: repeat(auto-fit, $clickable-area); - grid-auto-rows: $clickable-area; + grid-template-columns: repeat(auto-fit, var(--default-clickable-area)); + grid-auto-rows: var(--default-clickable-area); &-color-circle { display: flex; diff --git a/src/components/NcCounterBubble/NcCounterBubble.vue b/src/components/NcCounterBubble/NcCounterBubble.vue index 55670714ee..5d4c066d69 100644 --- a/src/components/NcCounterBubble/NcCounterBubble.vue +++ b/src/components/NcCounterBubble/NcCounterBubble.vue @@ -92,7 +92,7 @@ export default { font-size: calc(var(--default-font-size) * .8); overflow: hidden; width: fit-content; - max-width: $clickable-area; + max-width: var(--default-clickable-area); text-align: center; text-overflow: ellipsis; line-height: 1em; diff --git a/src/components/NcDateTimePicker/index.scss b/src/components/NcDateTimePicker/index.scss index 6485256587..6ccd7a7bb3 100644 --- a/src/components/NcDateTimePicker/index.scss +++ b/src/components/NcDateTimePicker/index.scss @@ -276,7 +276,7 @@ $cell_height: 32px; align-items: center; justify-content: space-between; width: 100%; - height: $clickable-area; + height: var(--default-clickable-area); margin-bottom: 4px; button { diff --git a/src/components/NcHeaderMenu/NcHeaderMenu.vue b/src/components/NcHeaderMenu/NcHeaderMenu.vue index 5aa7fef766..311a1adcb8 100644 --- a/src/components/NcHeaderMenu/NcHeaderMenu.vue +++ b/src/components/NcHeaderMenu/NcHeaderMenu.vue @@ -411,7 +411,7 @@ $externalMargin: 8px; @media only screen and (max-width: $breakpoint-small-mobile) { .header-menu { - width: $clickable-area; + width: var(--default-clickable-area); } } diff --git a/src/components/NcListItemIcon/NcListItemIcon.vue b/src/components/NcListItemIcon/NcListItemIcon.vue index 4f9dcc8b1a..beb2c4ccfe 100644 --- a/src/components/NcListItemIcon/NcListItemIcon.vue +++ b/src/components/NcListItemIcon/NcListItemIcon.vue @@ -380,11 +380,11 @@ export default { } &__icon { - width: $clickable-area; - height: $clickable-area; + width: var(--default-clickable-area); + height: var(--default-clickable-area); color: var(--color-text-maxcontrast); &.icon { - flex: 0 0 $clickable-area; + flex: 0 0 var(--default-clickable-area); opacity: $opacity_normal; background-position: center; background-size: 16px; diff --git a/src/components/NcModal/NcModal.vue b/src/components/NcModal/NcModal.vue index fcba384240..0c2563673a 100644 --- a/src/components/NcModal/NcModal.vue +++ b/src/components/NcModal/NcModal.vue @@ -844,7 +844,7 @@ export default { overflow-x: hidden; box-sizing: border-box; width: 100%; - padding: 0 #{$clickable-area * 3} 0 12px; // maximum actions is 3 + padding: 0 #{var(--default-clickable-area) * 3} 0 12px; // maximum actions is 3 transition: padding ease 100ms; white-space: nowrap; text-overflow: ellipsis; @@ -856,7 +856,7 @@ export default { // On wider screens the name can be centered @media only screen and (min-width: $breakpoint-mobile) { .modal-name { - padding-left: #{$clickable-area * 3}; // maximum actions is 3 + padding-left: #{var(--default-clickable-area) * 3}; // maximum actions is 3 text-align: center; } } @@ -873,7 +873,7 @@ export default { align-items: center; justify-content: center; box-sizing: border-box; - margin: math.div($header-height - $clickable-area, 2); + margin: math.div($header-height - var(--default-clickable-area), 2); padding: 0; } @@ -891,16 +891,16 @@ export default { .play-pause-icons__play, .play-pause-icons__pause { opacity: $opacity_full; - border-radius: math.div($clickable-area, 2); + border-radius: math.div(var(--default-clickable-area), 2); background-color: $icon-focus-bg; } } &__play, &__pause { box-sizing: border-box; - width: $clickable-area; - height: $clickable-area; - margin: math.div($header-height - $clickable-area, 2); + width: var(--default-clickable-area); + height: var(--default-clickable-area); + margin: math.div($header-height - var(--default-clickable-area), 2); cursor: pointer; opacity: $opacity_normal; } @@ -911,12 +911,12 @@ export default { } &:deep() .action-item { - margin: math.div($header-height - $clickable-area, 2); + margin: math.div($header-height - var(--default-clickable-area), 2); &--single { box-sizing: border-box; - width: $clickable-area; - height: $clickable-area; + width: var(--default-clickable-area); + height: var(--default-clickable-area); cursor: pointer; background-position: center; background-size: 22px; diff --git a/src/components/NcRichContenteditable/NcRichContenteditable.vue b/src/components/NcRichContenteditable/NcRichContenteditable.vue index d1988c3c3b..3a9d691689 100644 --- a/src/components/NcRichContenteditable/NcRichContenteditable.vue +++ b/src/components/NcRichContenteditable/NcRichContenteditable.vue @@ -1124,8 +1124,8 @@ export default { background-color: var(--color-main-background); font-family: var(--font-face); font-size: inherit; - min-height: $clickable-area; - max-height: $clickable-area * 5.5; + min-height: var(--default-clickable-area); + max-height: var(--default-clickable-area) * 5.5; &--has-label { margin-top: 10px; @@ -1149,7 +1149,7 @@ export default { } &--multiline { - min-height: $clickable-area * 3; + min-height: var(--default-clickable-area) * 3; // No max for mutiline max-height: none; } diff --git a/src/components/NcSelect/NcSelect.vue b/src/components/NcSelect/NcSelect.vue index 7693758730..b01ecc25bd 100644 --- a/src/components/NcSelect/NcSelect.vue +++ b/src/components/NcSelect/NcSelect.vue @@ -1192,7 +1192,7 @@ body { .v-select.select { /* Override default vue-select styles */ - min-height: $clickable-area; + min-height: var(--default-clickable-area); min-width: 260px; margin: 0; diff --git a/src/components/NcSettingsSection/NcSettingsSection.vue b/src/components/NcSettingsSection/NcSettingsSection.vue index 7741df0ff5..4e8c0560c6 100644 --- a/src/components/NcSettingsSection/NcSettingsSection.vue +++ b/src/components/NcSettingsSection/NcSettingsSection.vue @@ -158,8 +158,8 @@ $maxWidth: 900px; display: flex; align-items: center; justify-content: center; - width: $clickable-area; - height: $clickable-area; + width: var(--default-clickable-area); + height: var(--default-clickable-area); // make sure to properly align the icon with the text margin: -$icon-margin; margin-left: 0;