FediMovies/fedimovies-web
1
1
Fork 0
Code Pull requests Activity

Use calc() to perform division of SASS variables

Browse source 
/ is changing from a division operation to a list separator.
This commit is contained in:
silverpill 2022-09-16 17:45:39 +00:00
parent 36d3c5849c
commit a45a3ad3a9
13 changed files with 80 additions and 122 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

126
package-lock.json generated
View file

@ -40,8 +40,8 @@
"chai": "^4.1.2",
"eslint": "^7.32.0",
"eslint-plugin-vue": "^7.20.0",
"sass": "~1.32.13",
"sass-loader": "^10.2.1",
"sass": "~1.49.10",
"sass-loader": "^12.6.0",
"sinon": "^11.1.2",
"sinon-chai": "^3.7.0",
"stylelint": "^13.13.1",
@ -7800,6 +7800,12 @@
"node": ">= 4"
}
},
"node_modules/immutable": {
"version": "4.1.0",
"resolved": "https://registry.npmjs.org/immutable/-/immutable-4.1.0.tgz",
"integrity": "sha512-oNkuqVTA8jqG1Q6c+UglTOD1xhC1BtjKI7XkCXRkZHrN5m18/XsnUp8Q89GkQO/z+0WjonSvl0FLhDYftp46nQ==",
"dev": true
},
"node_modules/import-fresh": {
"version": "3.3.0",
"resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
@ -12584,34 +12590,33 @@
"dev": true
},
"node_modules/sass": {
"version": "1.32.13",
"resolved": "https://registry.npmjs.org/sass/-/sass-1.32.13.tgz",
"integrity": "sha512-dEgI9nShraqP7cXQH+lEXVf73WOPCse0QlFzSD8k+1TcOxCMwVXfQlr0jtoluZysQOyJGnfr21dLvYKDJq8HkA==",
"version": "1.49.11",
"resolved": "https://registry.npmjs.org/sass/-/sass-1.49.11.tgz",
"integrity": "sha512-wvS/geXgHUGs6A/4ud5BFIWKO1nKd7wYIGimDk4q4GFkJicILActpv9ueMT4eRGSsp1BdKHuw1WwAHXbhsJELQ==",
"dev": true,
"dependencies": {
"chokidar": ">=3.0.0 <4.0.0"
"chokidar": ">=3.0.0 <4.0.0",
"immutable": "^4.0.0",
"source-map-js": ">=0.6.2 <2.0.0"
},
"bin": {
"sass": "sass.js"
},
"engines": {
"node": ">=8.9.0"
"node": ">=12.0.0"
}
},
"node_modules/sass-loader": {
"version": "10.2.1",
"resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-10.2.1.tgz",
"integrity": "sha512-RRvWl+3K2LSMezIsd008ErK4rk6CulIMSwrcc2aZvjymUgKo/vjXGp1rSWmfTUX7bblEOz8tst4wBwWtCGBqKA==",
"version": "12.6.0",
"resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-12.6.0.tgz",
"integrity": "sha512-oLTaH0YCtX4cfnJZxKSLAyglED0naiYfNG1iXfU5w1LNZ+ukoA5DtyDIN5zmKVZwYNJP4KRc5Y3hkWga+7tYfA==",
"dev": true,
"dependencies": {
"klona": "^2.0.4",
"loader-utils": "^2.0.0",
"neo-async": "^2.6.2",
"schema-utils": "^3.0.0",
"semver": "^7.3.2"
"neo-async": "^2.6.2"
},
"engines": {
"node": ">= 10.13.0"
"node": ">= 12.13.0"
},
"funding": {
"type": "opencollective",
@ -12619,9 +12624,10 @@
},
"peerDependencies": {
"fibers": ">= 3.1.0",
"node-sass": "^4.0.0 || ^5.0.0 || ^6.0.0",
"node-sass": "^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0",
"sass": "^1.3.0",
"webpack": "^4.36.0 || ^5.0.0"
"sass-embedded": "*",
"webpack": "^5.0.0"
},
"peerDependenciesMeta": {
"fibers": {
@ -12632,41 +12638,12 @@
},
"sass": {
"optional": true
},
"sass-embedded": {
"optional": true
}
}
},
"node_modules/sass-loader/node_modules/loader-utils": {
"version": "2.0.2",
"resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.2.tgz",
"integrity": "sha512-TM57VeHptv569d/GKh6TAYdzKblwDNiumOdkFnejjD0XwTH87K90w3O7AiJRqdQoXygvi1VQTJTLGhJl7WqA7A==",
"dev": true,
"dependencies": {
"big.js": "^5.2.2",
"emojis-list": "^3.0.0",
"json5": "^2.1.2"
},
"engines": {
"node": ">=8.9.0"
}
},
"node_modules/sass-loader/node_modules/schema-utils": {
"version": "3.1.1",
"resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.1.1.tgz",
"integrity": "sha512-Y5PQxS4ITlC+EahLuXaY86TXfR7Dc5lw294alXOq86JAHCihAIZfqv8nNCWvaEJvaC51uN9hbLGeV0cFBdH+Fw==",
"dev": true,
"dependencies": {
"@types/json-schema": "^7.0.8",
"ajv": "^6.12.5",
"ajv-keywords": "^3.5.2"
},
"engines": {
"node": ">= 10.13.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/webpack"
}
},
"node_modules/saxes": {
"version": "5.0.1",
"resolved": "https://registry.npmjs.org/saxes/-/saxes-5.0.1.tgz",
@ -21712,6 +21689,12 @@
"integrity": "sha512-CmxgYGiEPCLhfLnpPp1MoRmifwEIOgjcHXxOBjv7mY96c+eWScsOP9c112ZyLdWHi0FxHjI+4uVhKYp/gcdRmQ==",
"dev": true
},
"immutable": {
"version": "4.1.0",
"resolved": "https://registry.npmjs.org/immutable/-/immutable-4.1.0.tgz",
"integrity": "sha512-oNkuqVTA8jqG1Q6c+UglTOD1xhC1BtjKI7XkCXRkZHrN5m18/XsnUp8Q89GkQO/z+0WjonSvl0FLhDYftp46nQ==",
"dev": true
},
"import-fresh": {
"version": "3.3.0",
"resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
@ -25281,49 +25264,24 @@
"dev": true
},
"sass": {
"version": "1.32.13",
"resolved": "https://registry.npmjs.org/sass/-/sass-1.32.13.tgz",
"integrity": "sha512-dEgI9nShraqP7cXQH+lEXVf73WOPCse0QlFzSD8k+1TcOxCMwVXfQlr0jtoluZysQOyJGnfr21dLvYKDJq8HkA==",
"version": "1.49.11",
"resolved": "https://registry.npmjs.org/sass/-/sass-1.49.11.tgz",
"integrity": "sha512-wvS/geXgHUGs6A/4ud5BFIWKO1nKd7wYIGimDk4q4GFkJicILActpv9ueMT4eRGSsp1BdKHuw1WwAHXbhsJELQ==",
"dev": true,
"requires": {
"chokidar": ">=3.0.0 <4.0.0"
"chokidar": ">=3.0.0 <4.0.0",
"immutable": "^4.0.0",
"source-map-js": ">=0.6.2 <2.0.0"
}
},
"sass-loader": {
"version": "10.2.1",
"resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-10.2.1.tgz",
"integrity": "sha512-RRvWl+3K2LSMezIsd008ErK4rk6CulIMSwrcc2aZvjymUgKo/vjXGp1rSWmfTUX7bblEOz8tst4wBwWtCGBqKA==",
"version": "12.6.0",
"resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-12.6.0.tgz",
"integrity": "sha512-oLTaH0YCtX4cfnJZxKSLAyglED0naiYfNG1iXfU5w1LNZ+ukoA5DtyDIN5zmKVZwYNJP4KRc5Y3hkWga+7tYfA==",
"dev": true,
"requires": {
"klona": "^2.0.4",
"loader-utils": "^2.0.0",
"neo-async": "^2.6.2",
"schema-utils": "^3.0.0",
"semver": "^7.3.2"
},
"dependencies": {
"loader-utils": {
"version": "2.0.2",
"resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.2.tgz",
"integrity": "sha512-TM57VeHptv569d/GKh6TAYdzKblwDNiumOdkFnejjD0XwTH87K90w3O7AiJRqdQoXygvi1VQTJTLGhJl7WqA7A==",
"dev": true,
"requires": {
"big.js": "^5.2.2",
"emojis-list": "^3.0.0",
"json5": "^2.1.2"
}
},
"schema-utils": {
"version": "3.1.1",
"resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.1.1.tgz",
"integrity": "sha512-Y5PQxS4ITlC+EahLuXaY86TXfR7Dc5lw294alXOq86JAHCihAIZfqv8nNCWvaEJvaC51uN9hbLGeV0cFBdH+Fw==",
"dev": true,
"requires": {
"@types/json-schema": "^7.0.8",
"ajv": "^6.12.5",
"ajv-keywords": "^3.5.2"
}
}
"neo-async": "^2.6.2"
}
},
"saxes": {

4
package.json
View file

@ -47,8 +47,8 @@
"chai": "^4.1.2",
"eslint": "^7.32.0",
"eslint-plugin-vue": "^7.20.0",
"sass": "~1.32.13",
"sass-loader": "^10.2.1",
"sass": "~1.49.10",
"sass-loader": "^12.6.0",
"sinon": "^11.1.2",
"sinon-chai": "^3.7.0",
"stylelint": "^13.13.1",

4
src/components/Loader.vue
View file

@ -35,9 +35,9 @@ $loader-width: 4px;
@keyframes loader {
0% {
height: 0;
left: $loader-size / 2 - $loader-width;
left: calc($loader-size / 2 - $loader-width);
opacity: 1;
top: $loader-size / 2 - $loader-width;
top: calc($loader-size / 2 - $loader-width);
width: 0;
}

10
src/components/Post.vue
View file

@ -558,14 +558,14 @@ async function onMintToken() {
color: $secondary-text-color;
display: flex;
flex-direction: row;
gap: $block-inner-padding / 2;
gap: calc($block-inner-padding / 2);
padding: $block-inner-padding $block-inner-padding 0;
.floating-avatar {
@include floating-avatar;
@media screen and (min-width: $screen-breakpoint-medium + 1) {
margin-right: -$block-inner-padding / 2;
margin-right: calc(0px - $block-inner-padding / 2);
}
}
@ -602,7 +602,7 @@ async function onMintToken() {
flex-direction: row;
flex-wrap: wrap;
gap: 0.25em;
padding: $block-inner-padding / 4 $block-inner-padding 0;
padding: calc($block-inner-padding / 4) $block-inner-padding 0;
a {
@include block-link;
@ -663,7 +663,7 @@ async function onMintToken() {
align-items: center;
display: flex;
flex-direction: row;
gap: $block-inner-padding / 2;
gap: calc($block-inner-padding / 2);
padding: 0 $block-inner-padding $block-inner-padding;
.icon {
@ -690,7 +690,7 @@ async function onMintToken() {
.crypto-widget {
display: flex;
flex-grow: 1;
gap: $block-inner-padding / 2;
gap: calc($block-inner-padding / 2);
justify-content: right;
.crypto-address {

10
src/components/PostEditor.vue
View file

@ -237,7 +237,7 @@ $line-height: 1.5;
@include floating-avatar;
left: $block-inner-padding;
margin-top: $line-height * 1em / 2;
margin-top: calc($line-height * 1em / 2);
position: absolute;
top: $block-inner-padding;
@ -261,7 +261,7 @@ textarea {
}
.attachment {
padding: $block-inner-padding / 1.5 $block-inner-padding;
padding: calc($block-inner-padding / 1.5) $block-inner-padding;
img {
width: 100%;
@ -277,8 +277,8 @@ textarea {
color: $secondary-text-color;
display: flex;
flex-direction: row;
gap: $block-inner-padding / 2;
padding: $block-inner-padding / 1.5 $block-inner-padding;
gap: calc($block-inner-padding / 2);
padding: calc($block-inner-padding / 1.5) $block-inner-padding;
.character-counter {
font-weight: bold;
@ -300,7 +300,7 @@ textarea {
display: flex;
flex-direction: row;
justify-content: flex-end;
margin-top: $block-inner-padding / 1.5;
margin-top: calc($block-inner-padding / 1.5);
.error-message {
color: $error-color;

4
src/components/ProfileCard.vue
View file

@ -41,7 +41,7 @@ const { getActorAddress } = useInstanceInfo()
@import "../styles/theme";
$avatar-size: 90px;
$profile-padding: $block-inner-padding / 2;
$profile-padding: calc($block-inner-padding / 2);
.profile {
background-color: $block-background-color;
@ -73,7 +73,7 @@ $profile-padding: $block-inner-padding / 2;
.avatar {
height: $avatar-size;
margin-right: $profile-padding;
margin-top: -($profile-padding + $avatar-size / 3);
margin-top: calc(-1 * ($profile-padding + $avatar-size / 3));
min-width: $avatar-size;
padding: 4px;
width: $avatar-size;

6
src/components/SubscriptionEthereum.vue
View file

@ -380,7 +380,7 @@ async function onCancelSubscription() {
display: flex;
flex-basis: 50%;
flex-direction: column;
gap: $block-inner-padding / 2;
gap: calc($block-inner-padding / 2);
min-width: 0;
padding: $block-inner-padding;
}
@ -419,7 +419,7 @@ async function onCancelSubscription() {
border-radius: $block-border-radius;
display: flex;
flex-direction: column;
gap: $block-inner-padding / 2;
gap: calc($block-inner-padding / 2);
padding: $block-inner-padding;
.price {
@ -466,7 +466,7 @@ async function onCancelSubscription() {
.payment-amount {
font-size: 16px;
font-weight: bold;
margin-bottom: $input-padding / 2;
margin-bottom: calc($input-padding / 2);
}
.token-balance {

4
src/components/SubscriptionMonero.vue
View file

@ -236,7 +236,7 @@ async function checkInvoice() {
display: flex;
flex-basis: 50%;
flex-direction: column;
gap: $block-inner-padding / 2;
gap: calc($block-inner-padding / 2);
min-width: 0;
padding: $block-inner-padding;
}
@ -278,7 +278,7 @@ async function checkInvoice() {
border-radius: $block-border-radius;
display: flex;
flex-direction: column;
gap: $block-inner-padding / 2;
gap: calc($block-inner-padding / 2);
padding: $block-inner-padding;
.price {

2
src/components/SubscriptionSettingsEthereum.vue
View file

@ -331,7 +331,7 @@ async function onWithdrawReceived() {
border-radius: $block-border-radius;
display: flex;
flex-direction: column;
gap: $block-inner-padding / 2;
gap: calc($block-inner-padding / 2);
padding: $block-inner-padding;
.price {

4
src/components/SubscriptionSettingsMonero.vue
View file

@ -145,7 +145,7 @@ async function saveSubscriptionSettings() {
border-radius: $block-border-radius;
display: flex;
flex-direction: column;
gap: $block-inner-padding / 2;
gap: calc($block-inner-padding / 2);
padding: $block-inner-padding;
.price {
@ -157,7 +157,7 @@ async function saveSubscriptionSettings() {
.subscription-page {
display: flex;
flex-direction: column;
gap: $block-inner-padding / 2;
gap: calc($block-inner-padding / 2);
a {
font-size: 16px;

12
src/styles/_mixins.scss
View file

@ -5,8 +5,8 @@
.avatar {
float: left;
height: $avatar-size;
margin-left: -$avatar-size - $block-inner-padding * 2;
margin-top: -$avatar-size / 2;
margin-left: calc(0px - $avatar-size - $block-inner-padding * 2);
margin-top: calc(0px - $avatar-size / 2);
width: $avatar-size;
}
@ -35,12 +35,12 @@
align-items: center;
display: flex;
font-weight: bold;
margin: 0 $block-outer-padding $block-outer-padding / 2;
margin: 0 $block-outer-padding calc($block-outer-padding / 2);
img {
filter: $text-colorizer;
height: $icon-size;
margin-right: $icon-size / 2;
margin-right: calc($icon-size / 2);
min-width: $icon-size;
object-fit: contain;
vertical-align: middle;
@ -98,8 +98,8 @@
box-shadow: $shadow;
display: flex;
flex-direction: column;
gap: $block-inner-padding / 2;
padding: $block-inner-padding / 2;
gap: calc($block-inner-padding / 2);
padding: calc($block-inner-padding / 2);
position: absolute;
white-space: nowrap;
z-index: 3;

4
src/views/NotificationList.vue
View file

@ -157,14 +157,14 @@ async function loadNextPage() {
box-sizing: border-box;
color: $secondary-text-color;
display: flex;
gap: $block-inner-padding / 2;
gap: calc($block-inner-padding / 2);
padding: $block-inner-padding;
.floating-avatar {
@include floating-avatar;
@media screen and (min-width: $screen-breakpoint-medium + 1) {
margin-right: -$block-inner-padding / 2;
margin-right: calc(0px - $block-inner-padding / 2);
}
}

12
src/views/Profile.vue
View file

@ -577,13 +577,13 @@ $avatar-size: 170px;
flex-direction: row;
flex-grow: 1;
flex-wrap: wrap;
gap: $block-inner-padding / 2 $block-inner-padding;
gap: calc($block-inner-padding / 2) $block-inner-padding;
}
.avatar {
height: $avatar-size;
margin-right: auto;
margin-top: -($avatar-size / 2 + $block-inner-padding);
margin-top: calc(-1 * ($avatar-size / 2 + $block-inner-padding));
min-width: $avatar-size;
padding: 7px;
width: $avatar-size;
@ -592,7 +592,7 @@ $avatar-size: 170px;
.badges {
display: flex;
flex-wrap: wrap;
gap: $block-inner-padding / 2 $block-inner-padding;
gap: calc($block-inner-padding / 2) $block-inner-padding;
}
.badge {
@ -669,8 +669,8 @@ $avatar-size: 170px;
.field {
border-top: 1px solid $separator-color;
display: flex;
gap: $block-inner-padding / 2;
padding: $block-inner-padding / 2 $block-inner-padding;
gap: calc($block-inner-padding / 2);
padding: calc($block-inner-padding / 2) $block-inner-padding;
.name {
font-weight: bold;
@ -730,7 +730,7 @@ $avatar-size: 170px;
a,
span {
border-radius: $block-border-radius;
padding: $block-inner-padding / 2;
padding: calc($block-inner-padding / 2);
text-align: center;
width: 100%;