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
docs/presentation.md
View File

@@ -10,11 +10,16 @@
- [**`bootstrapping/`**](./../src/presentation/bootstrapping/): Registers Vue global objects including components and plugins.
- [**`components/`**](./../src/presentation/components/): Contains all Vue components and their helper classes.
- [**`Shared/`**](./../src/presentation/components/Shared): Contains Vue components and component helpers that are shared across other components.
- [**`styles/`**](./../src/presentation/styles/): Contains shared styles used throughout different components.
- [**`assets/`**](./../src/presentation/assets/styles/): Contains assets that will be processed by webpack.
- [**`fonts/`**](./../src/presentation/assets/fonts/): Contains fonts
- [**`styles/`**](./../src/presentation/assets/styles/): Contains shared styles used throughout different components.
- [**`components/`**](./../src/presentation/assets/styles/components): Contains styles that are reusable and tightly coupled a Vue/HTML component.
- [**`vendors-extensions/`**](./../src/presentation/assets/styles/third-party-extensions): Contains styles that override third-party components used.
- [**`main.scss`**](./../src/presentation/assets/styles/main.scss): Primary Sass file, passes along all other styles, should be the only file used from other components.
- [**`main.ts`**](./../src/presentation/main.ts): Application entry point that mounts and starts Vue application.
- [`electron/`](./../src/presentation/electron/): Electron configuration for the desktop application.
- [**`electron/`**](./../src/presentation/electron/): Electron configuration for the desktop application.
- [**`main.ts`**](./../src/presentation/main.ts): Main process of Electron, started as first thing when app starts.
- [**`/public/`**](./../public/): Contains static assets that will simply be copied and not go through webpack.
- [**`/public/`**](./../public/): Contains static assets that will directly be copied and not go through webpack.
- [**`/vue.config.js`**](./../vue.config.js): Global Vue CLI configurations loaded by `@vue/cli-service`
- [**`/postcss.config.js`**](./../postcss.config.js): PostCSS configurations that are used by Vue CLI internally
- [**`/babel.config.js`**](./../babel.config.js): Babel configurations for polyfills used by `@vue/cli-plugin-babel`
@@ -50,3 +55,18 @@
</Dialog>
<div @click="$refs.testDialog.show()">Show dialog</div>
```
## Sass naming convention
- Use lowercase for variables/functions/mixins e.g.
- Variable: `$variable: value;`
- Function: `@function function() {}`
- Mixin: `@mixin mixin() {}`
- Use - for a phrase/compound word e.g.
- Variable: `$some-variable: value;`
- Function: `@function some-function() {}`
- Mixin: `@mixin some-mixin() {}`
- Grouping and name variables from generic to specific e.g.
- ✅ `$border-blue`, `$border-blue-light`, `$border-blue-lightest`, `$border-red`
- ❌ `$blue-border`, `$light-blue-border`, `$lightest-blue-border`, `$red-border`

5
package-lock.json generated
View File

@@ -5,7 +5,8 @@
"requires": true,
"packages": {
"": {
"version": "0.11.0",
"name": "privacy.sexy",
"version": "0.11.1",
"hasInstallScript": true,
"dependencies": {
"@fortawesome/fontawesome-svg-core": "^1.2.36",
@@ -27936,6 +27937,7 @@
"integrity": "sha512-P13AJv5FDt2XnpZ92K0VMxBS7Pe+gnibxtXMsa8rXLBkEE1NkmtaG5pyXh3fulkmF2/21efOcuh6yFP7k0KuZg==",
"dev": true,
"requires": {
"@babel/core": "^7.11.0",
"@babel/helper-compilation-targets": "^7.9.6",
"@babel/helper-module-imports": "^7.8.3",
"@babel/plugin-proposal-class-properties": "^7.8.3",
@@ -27948,6 +27950,7 @@
"@vue/babel-plugin-jsx": "^1.0.3",
"@vue/babel-preset-jsx": "^1.2.4",
"babel-plugin-dynamic-import-node": "^2.3.3",
"core-js": "^3.6.5",
"core-js-compat": "^3.6.5",
"semver": "^6.1.0"
}

0
src/presentation/styles/fonts/slabo-27px-v6-latin-ext_latin-regular.eot → src/presentation/assets/fonts/slabo-27px-v6-latin-ext_latin-regular.eot
View File

0
src/presentation/styles/fonts/slabo-27px-v6-latin-ext_latin-regular.svg → src/presentation/assets/fonts/slabo-27px-v6-latin-ext_latin-regular.svg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 51 KiB

After

Width:  |  Height:  |  Size: 51 KiB

0
src/presentation/styles/fonts/slabo-27px-v6-latin-ext_latin-regular.ttf → src/presentation/assets/fonts/slabo-27px-v6-latin-ext_latin-regular.ttf
View File

0
src/presentation/styles/fonts/slabo-27px-v6-latin-ext_latin-regular.woff → src/presentation/assets/fonts/slabo-27px-v6-latin-ext_latin-regular.woff
View File

0
src/presentation/styles/fonts/slabo-27px-v6-latin-ext_latin-regular.woff2 → src/presentation/assets/fonts/slabo-27px-v6-latin-ext_latin-regular.woff2
View File

0
src/presentation/styles/fonts/yesteryear-v8-latin-regular.eot → src/presentation/assets/fonts/yesteryear-v8-latin-regular.eot
View File

0
src/presentation/styles/fonts/yesteryear-v8-latin-regular.svg → src/presentation/assets/fonts/yesteryear-v8-latin-regular.svg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 147 KiB

After

Width:  |  Height:  |  Size: 147 KiB

0
src/presentation/styles/fonts/yesteryear-v8-latin-regular.ttf → src/presentation/assets/fonts/yesteryear-v8-latin-regular.ttf
View File

0
src/presentation/styles/fonts/yesteryear-v8-latin-regular.woff → src/presentation/assets/fonts/yesteryear-v8-latin-regular.woff
View File

0
src/presentation/styles/fonts/yesteryear-v8-latin-regular.woff2 → src/presentation/assets/fonts/yesteryear-v8-latin-regular.woff2
View File

0
src/presentation/styles/colors.scss → src/presentation/assets/styles/_colors.scss
View File

30
src/presentation/styles/fonts.scss → src/presentation/assets/styles/_fonts.scss
View File

@@ -5,13 +5,13 @@
font-family: 'Slabo 27px';
font-style: normal;
font-weight: 400;
src: url('~@/presentation/styles/fonts/slabo-27px-v6-latin-ext_latin-regular.eot'); /* IE9 Compat Modes */
src: url('~@/presentation/assets/fonts/slabo-27px-v6-latin-ext_latin-regular.eot'); /* IE9 Compat Modes */
src: local('Slabo 27px'), local('Slabo27px-Regular'),
url('~@/presentation/styles/fonts/slabo-27px-v6-latin-ext_latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('~@/presentation/styles/fonts/slabo-27px-v6-latin-ext_latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
url('~@/presentation/styles/fonts/slabo-27px-v6-latin-ext_latin-regular.woff') format('woff'), /* Modern Browsers */
url('~@/presentation/styles/fonts/slabo-27px-v6-latin-ext_latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
url('~@/presentation/styles/fonts/slabo-27px-v6-latin-ext_latin-regular.svg#Slabo27px') format('svg'); /* Legacy iOS */
url('~@/presentation/assets/fonts/slabo-27px-v6-latin-ext_latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('~@/presentation/assets/fonts/slabo-27px-v6-latin-ext_latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
url('~@/presentation/assets/fonts/slabo-27px-v6-latin-ext_latin-regular.woff') format('woff'), /* Modern Browsers */
url('~@/presentation/assets/fonts/slabo-27px-v6-latin-ext_latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
url('~@/presentation/assets/fonts/slabo-27px-v6-latin-ext_latin-regular.svg#Slabo27px') format('svg'); /* Legacy iOS */
}
/* yesteryear-regular - latin */
@@ -19,15 +19,15 @@
font-family: 'Yesteryear';
font-style: normal;
font-weight: 400;
src: url('~@/presentation/styles/fonts/yesteryear-v8-latin-regular.eot'); /* IE9 Compat Modes */
src: url('~@/presentation/assets/fonts/yesteryear-v8-latin-regular.eot'); /* IE9 Compat Modes */
src: local('Yesteryear'), local('Yesteryear-Regular'),
url('~@/presentation/styles/fonts/yesteryear-v8-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('~@/presentation/styles/fonts/yesteryear-v8-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
url('~@/presentation/styles/fonts/yesteryear-v8-latin-regular.woff') format('woff'), /* Modern Browsers */
url('~@/presentation/styles/fonts/yesteryear-v8-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
url('~@/presentation/styles/fonts/yesteryear-v8-latin-regular.svg#Yesteryear') format('svg'); /* Legacy iOS */
url('~@/presentation/assets/fonts/yesteryear-v8-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('~@/presentation/assets/fonts/yesteryear-v8-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
url('~@/presentation/assets/fonts/yesteryear-v8-latin-regular.woff') format('woff'), /* Modern Browsers */
url('~@/presentation/assets/fonts/yesteryear-v8-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
url('~@/presentation/assets/fonts/yesteryear-v8-latin-regular.svg#Yesteryear') format('svg'); /* Legacy iOS */
}
$normal-font: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;
$artistic-font: 'Yesteryear', cursive;
$main-font: 'Slabo 27px';
$font-normal : 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;
$font-artistic : 'Yesteryear', cursive;
$font-main : 'Slabo 27px';

25
src/presentation/assets/styles/_globals.scss Normal file
View File

@@ -0,0 +1,25 @@
/*
Defines global styles that applies to globally defined tags by default (body, main, article, div etc.)
*/
@use "@/presentation/assets/styles/colors" as *;
@use "@/presentation/assets/styles/fonts" as *;
* {
box-sizing: border-box;
}
a {
color:inherit;
text-decoration: underline;
cursor: pointer;
&:hover {
color: $color-primary;
}
}
body {
background: $color-background;
font-family: $font-main;
}

5
src/presentation/assets/styles/_media.scss Normal file
View File

@@ -0,0 +1,5 @@
$media-screen-big-width : 992px;
$media-screen-medium-width : 768px;
$media-screen-small-width : 380px;
$media-vertical-view-breakpoint : 992px;

0
src/presentation/styles/components/card.scss → src/presentation/assets/styles/components/_card.scss
View File

11
src/presentation/assets/styles/main.scss Normal file
View File

@@ -0,0 +1,11 @@
/* This class is not supposed to more than forwarding other styles */
@forward "./fonts";
@forward "./media";
@forward "./colors";
@forward "./globals";
@forward "./components/card";
@forward "./third-party-extensions/tooltip.scss";
@forward "./third-party-extensions/tree.scss";

2
src/presentation/styles/tooltip.scss → src/presentation/assets/styles/third-party-extensions/_tooltip.scss
View File

@@ -1,5 +1,5 @@
// Based on https://github.com/Akryum/v-tooltip/blob/83615e394c96ca491a4df04b892ae87e833beb97/demo-src/src/App.vue#L179-L303
@import "@/presentation/styles/colors.scss";
@use "@/presentation/assets/styles/colors" as *;
.tooltip {
display: block !important;

58
src/presentation/assets/styles/third-party-extensions/_tree.scss Normal file
View File

@@ -0,0 +1,58 @@
// Overrides base styling for LiquorTree
@use "@/presentation/assets/styles/colors" as *;
$color-tree-bg : $color-primary-darker;
$color-node-arrow : $color-on-primary;
$color-node-fg : $color-on-primary;
$color-node-hover-bg : $color-primary-dark;
$color-node-keyboard-bg : $color-surface;
$color-node-keyboard-fg : $color-on-surface;
$color-node-checkbox-bg-checked : $color-secondary;
$color-node-checkbox-bg-unchecked : $color-primary-darkest;
$color-node-checkbox-border-checked : $color-secondary;
$color-node-checkbox-border-unchecked : $color-on-primary;
$color-node-checkbox-tick-checked : $color-on-secondary;
.tree {
background: $color-tree-bg;
&-node {
white-space: normal !important;
> .tree-content {
> .tree-anchor > span {
color: $color-node-fg;
text-transform: uppercase;
font-size: 1.5em;
}
&:hover {
background: $color-node-hover-bg !important;
}
}
&.selected { // When using keyboard navigation it highlights current item and its child items
background: $color-node-keyboard-bg;
.tree-text {
color: $color-node-keyboard-fg !important; // $block
}
}
}
&-checkbox {
border-color: $color-node-checkbox-border-unchecked !important;
&.checked {
background: $color-node-checkbox-bg-checked !important;
border-color: $color-node-checkbox-border-checked !important;
&:after {
border-color: $color-node-checkbox-tick-checked !important;
}
}
&.indeterminate {
border-color: $color-node-checkbox-border-unchecked !important;
}
background: $color-node-checkbox-bg-unchecked !important;
}
&-arrow {
&.has-child {
&.rtl:after, &:after {
border-color: $color-node-arrow !important;
}
}
}
}

24
src/presentation/components/App.vue
View File

@@ -33,27 +33,7 @@ export default class App extends Vue {
</script>
<style lang="scss">
@import "@/presentation/styles/colors.scss";
@import "@/presentation/styles/fonts.scss";
@import "@/presentation/styles/media.scss";
* {
box-sizing: border-box;
}
a {
color:inherit;
text-decoration: underline;
cursor: pointer;
&:hover {
color: $color-primary;
}
}
body {
background: $color-background;
font-family: $main-font;
}
@use "@/presentation/assets/styles/main" as *;
#app {
margin-right: auto;
@@ -76,6 +56,4 @@ body {
}
}
@import "@/presentation/styles/tooltip.scss";
@import "@/presentation/styles/tree.scss";
</style>

5
src/presentation/components/Code/CodeButtons/Code.vue
View File

@@ -25,13 +25,12 @@ export default class Code extends Vue {
</script>
<style scoped lang="scss">
@import "@/presentation/styles/colors.scss";
@import "@/presentation/styles/fonts.scss";
@use "@/presentation/assets/styles/main" as *;
.code-wrapper {
white-space: nowrap;
justify-content: space-between;
font-family: $normal-font;
font-family: $font-normal;
background-color: $color-primary-darker;
color: $color-on-primary;
padding-left: 0.3rem;

5
src/presentation/components/Code/CodeButtons/IconButton.vue
View File

@@ -24,8 +24,7 @@ export default class IconButton extends Vue {
</script>
<style scoped lang="scss">
@import "@/presentation/styles/colors.scss";
@import "@/presentation/styles/fonts.scss";
@use "@/presentation/assets/styles/main" as *;
.button {
display: flex;
@@ -57,7 +56,7 @@ export default class IconButton extends Vue {
}
&__text {
display: none;
font-family: $artistic-font;
font-family: $font-artistic;
font-size: 1.5em;
color: $color-primary;
font-weight: 500;

3
src/presentation/components/Code/CodeButtons/MacOsInstructions.vue
View File

@@ -104,8 +104,7 @@ export default class MacOsInstructions extends Vue {
</script>
<style scoped lang="scss">
@import "@/presentation/styles/colors.scss";
@import "@/presentation/styles/fonts.scss";
@use "@/presentation/assets/styles/main" as *;
li {
margin: 10px 0;

3
src/presentation/components/Code/TheCodeArea.vue
View File

@@ -150,7 +150,8 @@ function getDefaultCode(language: ScriptingLanguage): string {
</script>
<style scoped lang="scss">
@import "@/presentation/styles/colors.scss";
@use "@/presentation/assets/styles/main" as *;
::v-deep .code-area {
min-height: 200px;
width: 100%;

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;
}

5
src/presentation/components/Shared/Dialog.vue
View File

@@ -31,12 +31,11 @@ export default class Dialog extends Vue {
</script>
<style scoped lang="scss">
@import "@/presentation/styles/fonts.scss";
@import "@/presentation/styles/colors.scss";
@use "@/presentation/assets/styles/main" as *;
.dialog {
color: $color-surface;
font-family: $normal-font;
font-family: $font-normal;
margin-bottom: 10px;
display: flex;
flex-direction: row;

3
src/presentation/components/TheFooter/DownloadUrlList.vue
View File

@@ -38,8 +38,7 @@ export default class DownloadUrlList extends Vue {
</script>
<style scoped lang="scss">
@import "@/presentation/styles/media.scss";
@import "@/presentation/styles/colors.scss";
@use "@/presentation/assets/styles/main" as *;
.container {
display:flex;

5
src/presentation/components/TheFooter/PrivacyPolicy.vue
View File

@@ -56,11 +56,12 @@ export default class PrivacyPolicy extends Vue {
</script>
<style scoped lang="scss">
@import "@/presentation/styles/fonts.scss";
@use "@/presentation/assets/styles/main" as *;
.privacy-policy {
display: flex;
flex-direction: column;
font-family: $normal-font;
font-family: $font-normal;
text-align:center;
.line {

12
src/presentation/components/TheFooter/TheFooter.vue
View File

@@ -81,9 +81,7 @@ export default class TheFooter extends Vue {
</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 *;
.icon {
margin-right: 0.5em;
@@ -93,13 +91,13 @@ export default class TheFooter extends Vue {
.footer {
display: flex;
justify-content: space-between;
@media screen and (max-width: $big-screen-width) {
@media screen and (max-width: $media-screen-big-width) {
flex-direction: column;
align-items: center;
}
&__section {
display: flex;
@media screen and (max-width: $big-screen-width) {
@media screen and (max-width: $media-screen-big-width) {
justify-content: space-around;
width:100%;
&:not(:first-child) {
@@ -108,13 +106,13 @@ export default class TheFooter extends Vue {
}
flex-wrap: wrap;
font-size: 1rem;
font-family: $normal-font;
font-family: $font-normal;
&__item:not(:first-child) {
&::before {
content: "|";
padding: 0 5px;
}
@media screen and (max-width: $big-screen-width) {
@media screen and (max-width: $media-screen-big-width) {
margin-top: 3px;
&::before {
content: "";

8
src/presentation/components/TheHeader.vue
View File

@@ -22,8 +22,8 @@ export default class TheHeader extends Vue {
</script>
<style scoped lang="scss">
@import "@/presentation/styles/colors.scss";
@import "@/presentation/styles/fonts.scss";
@use "@/presentation/assets/styles/main" as *;
#container {
display: flex;
align-items: center;
@@ -37,7 +37,7 @@ export default class TheHeader extends Vue {
.title {
margin: 0;
text-transform: uppercase;
font-family: $main-font;
font-family: $font-main;
font-size: 2.5em;
line-height: 1.1;
}
@@ -45,7 +45,7 @@ export default class TheHeader extends Vue {
margin: 0;
font-size: 1.5em;
color: $color-primary;
font-family: $artistic-font;
font-family: $font-artistic;
font-weight: 500;
line-height: 1.2;
}

5
src/presentation/components/TheSearchBar.vue
View File

@@ -58,8 +58,7 @@ export default class TheSearchBar extends StatefulVue {
</script>
<style scoped lang="scss">
@import "@/presentation/styles/colors.scss";
@import "@/presentation/styles/fonts.scss";
@use "@/presentation/assets/styles/main" as *;
.search {
width: 100%;
@@ -81,7 +80,7 @@ export default class TheSearchBar extends StatefulVue {
padding-right:10px;
outline: none;
color: $color-primary;
font-family: $normal-font;
font-family: $font-normal;
font-size:1em;
&:focus {
color: $color-primary-darker;

5
src/presentation/styles/media.scss
View File

@@ -1,5 +0,0 @@
$big-screen-width: 992px;
$medium-screen-width: 768px;
$small-screen-width: 380px;
$vertical-view-breakpoint: 992px;

58
src/presentation/styles/tree.scss
View File

@@ -1,58 +0,0 @@
// Overrides base styling for LiquorTree
@import "@/presentation/styles/colors.scss";
$color-tree-bg : $color-primary-darker;
$color-node-arrow : $color-on-primary;
$color-node-fg : $color-on-primary;
$color-node-hover-bg : $color-primary-dark;
$color-node-keyboard-bg : $color-surface;
$color-node-keyboard-fg : $color-on-surface;
$color-node-checkbox-checked-bg : $color-secondary;
$color-node-checkbox-checked-border : $color-secondary;
$color-node-checkbox-checked-checked-tick : $color-on-secondary;
$color-node-checkbox-unchecked-bg : $color-primary-darkest;
$color-node-checkbox-unchecked-border : $color-on-primary;
.tree {
background: $color-tree-bg;
&-node {
white-space: normal !important;
> .tree-content {
> .tree-anchor > span {
color: $color-node-fg;
text-transform: uppercase;
font-size: 1.5em;
}
&:hover {
background: $color-node-hover-bg !important;
}
}
&.selected { // When using keyboard navigation it highlights current item and its child items
background: $color-node-keyboard-bg;
.tree-text {
color: $color-node-keyboard-fg !important; // $block
}
}
}
&-checkbox {
border-color: $color-node-checkbox-unchecked-border !important;
&.checked {
background: $color-node-checkbox-checked-bg !important;
border-color: $color-node-checkbox-checked-border !important;
&:after {
border-color: $color-node-checkbox-checked-checked-tick !important;
}
}
&.indeterminate {
border-color: $color-node-checkbox-unchecked-border !important;
}
background: $color-node-checkbox-unchecked-bg !important;
}
&-arrow {
&.has-child {
&.rtl:after, &:after {
border-color: $color-node-arrow !important;
}
}
}
}