44r0n7/privacy.sexy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor Saas naming, structure and modules

Browse Source 
- Add more documentation.
- Use `main.scss` instead of importing components individually. This
  improves productivity without compilation errors due to missing
  imports and allows for easier future file/folder changes and
  refactorings inside `./styles`.
- Use partials with underscored naming. Because it documents that the
  files should not be individually imported.
- Introduce `third-party-extensions` folder to group styles that
  overwrites third party components.
- Refactor variable names from generic to specific.
- Use Sass modules (`@use` and `@forward`) over depreciated `@import`
  syntax.
- Separate font assets from Sass files (`styles/`). Create `assets/`
  folder that will contain both.
- Create `_globals.css` for global styling of common element instead of
  using `App.vue`.
This commit is contained in:
undergroundwires
2021-11-14 17:48:49 +01:00
parent 2e082932c9
commit bf83c58982
43 changed files with 198 additions and 170 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
src/presentation/components/Scripts/View/ScriptsTree/SelectableTree/Node/RevertToggle.vue
View File

@@ -52,14 +52,14 @@ export default class RevertToggle extends StatefulVue {
<style scoped lang="scss">
@use 'sass:math';
@import "@/presentation/styles/colors.scss";
@use "@/presentation/assets/styles/main" as *;
$color-unchecked-bullet : $color-primary-darker;
$color-unchecked-text : $color-on-primary;
$color-unchecked-bg : $color-primary;
$color-checked-bg : $color-secondary;
$color-checked-text : $color-on-secondary;
$color-checked-bullet : $color-on-secondary;
$color-bullet-unchecked : $color-primary-darker;
$color-bullet-checked : $color-on-secondary;
$color-text-unchecked : $color-on-primary;
$color-text-checked : $color-on-secondary;
$color-bg-unchecked : $color-primary;
$color-bg-checked : $color-secondary;
$size-width : 85px;
$size-height : 30px;
@@ -94,7 +94,7 @@ $size-height : 30px;
position: relative;
width: $size-width;
height: $size-height;
background-color: $color-unchecked-bg;
background-color: $color-bg-unchecked;
-webkit-transition: background-color 0.25s ease-out 0s;
transition: background-color 0.25s ease-out 0s;
@@ -109,7 +109,7 @@ $size-height : 30px;
height: $circle-size;
border-radius: $circle-size * 2;
-webkit-border-radius: $circle-size * 2;
background-color: $color-unchecked-bullet;
background-color: $color-bullet-unchecked;
top: $size-height * 0.16;
left: $size-width * 0.05;
-webkit-transition: left 0.3s ease-out 0s;
@@ -120,11 +120,11 @@ $size-height : 30px;
input.input-checkbox:checked {
+ .checkbox-animate {
background-color: $color-checked-bg;
background-color: $color-bg-checked;
}
+ .checkbox-animate:before {
left: ($size-width - math.div($size-width, 3.5));
background-color: $color-checked-bullet;
background-color: $color-bullet-checked;
}
+ .checkbox-animate .checkbox-off {
display: none;
@@ -146,7 +146,7 @@ $size-height : 30px;
.checkbox-off {
margin-left: math.div($size-width, 3);
opacity: 1;
color: $color-unchecked-text;
color: $color-text-unchecked;
}
.checkbox-on {
@@ -154,7 +154,7 @@ $size-height : 30px;
float: right;
margin-right: math.div($size-width, 3);
opacity: 0;
color: $color-checked-text;
color: $color-text-checked;
}
}
</style>