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

4
src/presentation/components/Scripts/Menu/MenuOptionList.vue
View File

@@ -17,11 +17,11 @@ export default class MenuOptionList extends Vue {
</script>
<style scoped lang="scss">
@import "@/presentation/styles/fonts.scss";
@use "@/presentation/assets/styles/main" as *;
$gap: 0.25rem;
.list {
font-family: $normal-font;
font-family: $font-normal;
display: flex;
align-items: center;
.items {

2
src/presentation/components/Scripts/Menu/MenuOptionListItem.vue
View File

@@ -22,7 +22,7 @@ export default class MenuOptionListItem extends Vue {
</script>
<style scoped lang="scss">
@import "@/presentation/styles/colors.scss";
@use "@/presentation/assets/styles/main" as *;
.enabled {
cursor: pointer;

2
src/presentation/components/Scripts/Slider/Handle.vue
View File

@@ -43,7 +43,7 @@ export default class Handle extends Vue {
</script>
<style lang="scss" scoped>
@import "@/presentation/styles/colors.scss";
@use "@/presentation/assets/styles/main" as *;
$color : $color-primary-dark;
$color-hover : $color-primary;

4
src/presentation/components/Scripts/Slider/HorizontalResizeSlider.vue
View File

@@ -40,7 +40,7 @@ export default class HorizontalResizeSlider extends Vue {
</script>
<style lang="scss" scoped>
@import "@/presentation/styles/media.scss";
@use "@/presentation/assets/styles/main" as *;
.slider {
display: flex;
@@ -53,7 +53,7 @@ export default class HorizontalResizeSlider extends Vue {
flex: 1;
min-width: var(--second-min-width);
}
@media screen and (max-width: $vertical-view-breakpoint) {
@media screen and (max-width: $media-vertical-view-breakpoint) {
flex-direction: column;
.first {
width: auto !important;

7
src/presentation/components/Scripts/View/Cards/CardList.vue
View File

@@ -105,13 +105,12 @@ function isClickable(element: Element) {
</script>
<style scoped lang="scss">
@import "@/presentation/styles/fonts.scss";
@import "@/presentation/styles/components/card.scss";
@use "@/presentation/assets/styles/main" as *;
.cards {
display: flex;
flex-flow: row wrap;
font-family: $main-font;
font-family: $font-main;
gap: $card-gap;
/*
Padding is used to allow scale animation (growing size) for cards on hover.
@@ -124,6 +123,6 @@ function isClickable(element: Element) {
width: 100%;
text-align: center;
font-size: 3.5em;
font-family: $normal-font;
font-family: $font-normal;
}
</style>

4
src/presentation/components/Scripts/View/Cards/CardListItem.vue
View File

@@ -95,9 +95,7 @@ export default class CardListItem extends StatefulVue {
</script>
<style scoped lang="scss">
@import "@/presentation/styles/colors.scss";
@import "@/presentation/styles/media.scss";
@import "@/presentation/styles/components/card.scss";
@use "@/presentation/assets/styles/main" as *;
$card-inner-padding : 30px;
$arrow-size : 15px;

3
src/presentation/components/Scripts/View/ScriptsTree/SelectableTree/Node/DocumentationUrls.vue
View File

@@ -24,7 +24,8 @@
<style scoped lang="scss">
@import "@/presentation/styles/colors.scss";
@use "@/presentation/assets/styles/main" as *;
.documentationUrls {
display: flex;
flex-direction: row;

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

@@ -32,7 +32,8 @@
<style scoped lang="scss">
@import "@/presentation/styles/colors.scss";
@use "@/presentation/assets/styles/main" as *;
#node {
display:flex;
flex-direction: row;

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>

10
src/presentation/components/Scripts/View/TheScriptsView.vue
View File

@@ -95,15 +95,13 @@ export default class TheScriptsView extends StatefulVue {
</script>
<style scoped lang="scss">
@import "@/presentation/styles/colors.scss";
@import "@/presentation/styles/fonts.scss";
@import "@/presentation/styles/media.scss";
@use "@/presentation/assets/styles/main" as *;
$inner-margin: 4px;
$margin-inner: 4px;
.scripts {
margin-top: $inner-margin;
@media screen and (min-width: $vertical-view-breakpoint) { // so the current code is always visible
margin-top: $margin-inner;
@media screen and (min-width: $media-vertical-view-breakpoint) { // so the current code is always visible
overflow: auto;
max-height: 70vh;
}