Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Migrate from node-sass to sass #2631

Merged
merged 2 commits into from
Apr 10, 2022
Merged

Migrate from node-sass to sass #2631

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ece469e
Migrate from node-sass to sass
raimund-schluessler Apr 9, 2022
bf0a714
Fix sass division deprecation
raimund-schluessler Apr 9, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
831 changes: 760 additions & 71 deletions package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -97,11 +97,11 @@
"jest-environment-jsdom": "27.5.1",
"jest-serializer-vue": "^2.0.2",
"jest-transform-stub": "^2.0.0",
"node-sass": "^7.0.1",
"process": "^0.11.10",
"raw-loader": "^4.0.1",
"resolve-url-loader": "^5.0.0",
"sanitize-filename": "^1.6.3",
"sass": "^1.50.0",
"sass-loader": "^12.6.0",
"stylelint-webpack-plugin": "^3.2.0",
"url-loader": "^4.1.0",
Expand Down
2 changes: 1 addition & 1 deletion src/assets/action.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -105,7 +105,7 @@
line-height: 1.6em;

// 14px are currently 1em line-height. Mixing units as '44px - 1.6em' does not work.
padding: #{($clickable-area - 1.6 * 14px) / 2} 0;
padding: #{math.div($clickable-area - 1.6 * 14px, 2)} 0;

cursor: pointer;
text-align: left;
Expand Down
2 changes: 1 addition & 1 deletion src/assets/variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ $icon-size: 16px;

// icon padding for a $clickable-area width and a $icon-size icon
// ( 44px - 16px ) / 2
$icon-margin: ($clickable-area - $icon-size) / 2;
$icon-margin: math.div($clickable-area - $icon-size, 2);

// transparency background for icons
$icon-focus-bg: rgba(127, 127, 127, .25);
Expand Down
2 changes: 1 addition & 1 deletion src/components/ActionInput/ActionInput.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -322,7 +322,7 @@ $input-margin: 4px;
min-height: 0;
/* Keep padding to define the width to
assure correct position of a possible text */
padding: #{$clickable-area / 2} 0 #{$clickable-area / 2} $clickable-area;
padding: #{math.div($clickable-area, 2)} 0 #{math.div($clickable-area, 2)} $clickable-area;

background-position: #{$icon-margin} center;
background-size: $icon-size;
Expand Down
2 changes: 1 addition & 1 deletion src/components/ActionTextEditable/ActionTextEditable.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -200,7 +200,7 @@ $input-margin: 4px;
min-height: 0;
/* Keep padding to define the width to
assure correct position of a possible text */
padding: #{$clickable-area / 2} 0 #{$clickable-area / 2} $clickable-area;
padding: #{math.div($clickable-area, 2)} 0 #{math.div($clickable-area, 2)} $clickable-area;

background-position: #{$icon-margin} center;
background-size: $icon-size;
Expand Down
2 changes: 1 addition & 1 deletion src/components/Actions/Actions.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -704,7 +704,7 @@ export default {
padding: 0;
cursor: pointer;
border: none;
border-radius: $clickable-area / 2;
border-radius: math.div($clickable-area, 2);
background-color: transparent;

&--with-title {
Expand Down
4 changes: 2 additions & 2 deletions src/components/AppNavigationCaption/AppNavigationCaption.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@ export default {
.app-navigation-caption {
display: flex;
justify-content: space-between;
padding: 0 8px 0 $clickable-area / 2;
padding: 0 8px 0 math.div($clickable-area, 2);

&__title {
font-weight: bold;
Expand All @@ -78,6 +78,6 @@ export default {

// extra top space if it's not the first item on the list
.app-navigation-caption:not(:first-child) {
margin-top: $clickable-area / 2;
margin-top: math.div($clickable-area, 2);
}
</style>
10 changes: 5 additions & 5 deletions src/components/AppSidebar/AppSidebar.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -611,7 +611,7 @@ $top-buttons-spacing: 6px;
width: $clickable-area;
height: $clickable-area;
opacity: $opacity_normal;
border-radius: $clickable-area / 2;
border-radius: math.div($clickable-area, 2);
&:hover,
&:active,
&:focus {
Expand All @@ -634,7 +634,7 @@ $top-buttons-spacing: 6px;
z-index: 2;
width: $desc-height + $desc-vertical-padding;
height: $desc-height + $desc-vertical-padding;
margin: $desc-vertical-padding / 2;
margin: math.div($desc-vertical-padding, 2);
border-radius: 3px;
flex: 0 0 auto;
}
Expand All @@ -651,7 +651,7 @@ $top-buttons-spacing: 6px;
.app-sidebar-header__tertiary-actions {
z-index: 3; // above star
position: absolute;
top: $desc-vertical-padding / 2;
top: math.div($desc-vertical-padding, 2);
left: -1 * $clickable-area;
}
.app-sidebar-header__menu {
Expand Down Expand Up @@ -707,7 +707,7 @@ $top-buttons-spacing: 6px;
display: flex;
flex-direction: row;
justify-content: center;
padding: #{$desc-vertical-padding} #{$top-buttons-spacing} #{$desc-vertical-padding} #{$desc-vertical-padding / 2};
padding: #{$desc-vertical-padding} #{$top-buttons-spacing} #{$desc-vertical-padding} #{math.div($desc-vertical-padding, 2)};

// custom overrides
&--with-tertiary-action {
Expand Down Expand Up @@ -780,7 +780,7 @@ $top-buttons-spacing: 6px;
.app-sidebar-header__menu {
height: $clickable-area;
width: $clickable-area;
border-radius: $clickable-area / 2;
border-radius: math.div($clickable-area, 2);
background-color: $action-background-hover;
margin-left: 5px;
}
Expand Down
2 changes: 1 addition & 1 deletion src/components/Button/Button.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -418,7 +418,7 @@ export default {
& * {
cursor: pointer;
}
border-radius: $clickable-area / 2;
border-radius: math.div($clickable-area, 2);
transition: background-color 0.1s linear !important;
transition: border 0.1s linear;

Expand Down
2 changes: 1 addition & 1 deletion src/components/ColorPicker/ColorPicker.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -330,7 +330,7 @@ export default {
padding: 0;
margin: 0;
border: none;
border-radius: $clickable-area / 2;
border-radius: math.div($clickable-area, 2);
background: none;
justify-self: flex-end;
opacity: $opacity_normal;
Expand Down
12 changes: 6 additions & 6 deletions src/components/Modal/Modal.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -579,7 +579,7 @@ export default {
}

// On wider screens the title can be centered
@media only screen and (min-width: $breakpoint-mobile / 2) {
@media only screen and (min-width: math.div($breakpoint-mobile, 2)) {
.modal-title {
padding-left: #{$clickable-area * 3}; // maximum actions is 3
text-align: center;
Expand All @@ -598,7 +598,7 @@ export default {
align-items: center;
justify-content: center;
box-sizing: border-box;
margin: ($header-height - $clickable-area) / 2;
margin: math.div($header-height - $clickable-area, 2);
padding: 0;
}

Expand All @@ -616,7 +616,7 @@ export default {
.play-pause-icons__play,
.play-pause-icons__pause {
opacity: $opacity_full;
border-radius: $clickable-area / 2;
border-radius: math.div($clickable-area, 2);
background-color: $icon-focus-bg;
}
}
Expand All @@ -625,14 +625,14 @@ export default {
box-sizing: border-box;
width: $clickable-area;
height: $clickable-area;
margin: ($header-height - $clickable-area) / 2;
margin: math.div($header-height - $clickable-area, 2);
cursor: pointer;
opacity: $opacity_normal;
}
}

.header-actions {
margin: ($header-height - $clickable-area) / 2;
margin: math.div($header-height - $clickable-area, 2);
color: white;
}

Expand Down Expand Up @@ -755,7 +755,7 @@ export default {
}

// Make modal full screen on mobile
@media only screen and (max-width: $breakpoint-mobile / 2) {
@media only screen and (max-width: math.div($breakpoint-mobile, 2)) {
&:not(&--small) .modal-container {
max-width: initial;
width: 100%;
Expand Down
2 changes: 1 addition & 1 deletion src/components/PopoverMenu/PopoverMenuItem.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -245,7 +245,7 @@ li {
span[class*=' icon-'] {
/* Keep padding to define the width to
assure correct position of a possible text */
padding: #{$clickable-area / 2} 0 #{$clickable-area / 2} $clickable-area;
padding: #{math.div($clickable-area, 2)} 0 #{math.div($clickable-area, 2)} $clickable-area;
}

// If no icons set, force left margin to align
Expand Down
4 changes: 2 additions & 2 deletions src/components/RichContenteditable/MentionBubble.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -123,15 +123,15 @@ $bubble-avatar-size: $bubble-height - 2 * $bubble-padding;
user-select: none;
padding-right: $bubble-padding * 3;
padding-left: $bubble-padding;
border-radius: $bubble-height / 2;
border-radius: math.div($bubble-height, 2);
background-color: var(--color-background-dark);
}

&__icon {
position: relative;
width: $bubble-avatar-size;
height: $bubble-avatar-size;
border-radius: $bubble-avatar-size / 2;
border-radius: math.div($bubble-avatar-size, 2);
background-color: var(--color-background-darker);
background-repeat: no-repeat;
background-position: center;
Expand Down
2 changes: 1 addition & 1 deletion src/components/RichContenteditable/RichContenteditable.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -619,7 +619,7 @@ export default {
max-width: 200px;
padding: 4px;
// Show maximum 5 entries and a half to show scroll
max-height: 34.5px * 5 + 29.5px / 2;
max-height: 34.5px * 5 + math.div(29.5px, 2);

&__item {
border-radius: 8px;
Expand Down
4 changes: 2 additions & 2 deletions styleguide/assets/additional.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
div[data-preview] {
@import 'server.css';
@import 'server.css';

div[data-preview] {
* {
box-sizing: border-box;
}
Expand Down
2 changes: 1 addition & 1 deletion webpack.common.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -111,7 +111,7 @@ module.exports = {
{
loader: 'sass-loader',
options: {
additionalData: `$scope_version:${SCOPE_VERSION}; @import 'variables'; @import 'material-icons';`,
additionalData: `@use 'sass:math'; $scope_version:${SCOPE_VERSION}; @import 'variables'; @import 'material-icons';`,
/**
* ! needed for resolve-url-loader
*/
Expand Down