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

28
src/presentation/assets/styles/_colors.scss Normal file
View File

@@ -0,0 +1,28 @@
/*
Colors used throughout the application
Inspired by material color system: https://material.io/design/color/the-color-system.html, https://material.io/develop/web/theming/color
Colors are named using Vue Design System: https://github.com/viljamis/vue-design-system/wiki/Naming-of-Things#naming-colors
*/
// --- Primary | The color displayed most frequently across screens and components
$color-primary : #3a65ab;
$color-primary-light : lighten($color-primary, 30%);
$color-primary-dark : darken($color-primary, 18%);
$color-primary-darker : darken($color-primary, 32%);
$color-primary-darkest : darken($color-primary, 44%);
// Text/iconography color that is usable on top of primary color
$color-on-primary : #e4f1fe;
// --- Secondary | Accent color, should be applied sparingly to accent select parts of UI
$color-secondary : #00D1AD;
$color-secondary-light : lighten($color-secondary, 48%);
// Text/iconography color that is usable on top of secondary color
$color-on-secondary : #005051;
// --- Surface | Affect surfaces of components, such as cards, sheets, and menus.
$color-surface : #fff;
// Text/iconography color that is usable on surface
$color-on-surface : #4d5156;
// Background | Appears behind scrollable content.
$color-background : #e6ecf4;

33
src/presentation/assets/styles/_fonts.scss Normal file
View File

@@ -0,0 +1,33 @@
// https://google-webfonts-helper.herokuapp.com/fonts
/* slabo-27px-regular - latin-ext_latin */
@font-face {
font-family: 'Slabo 27px';
font-style: normal;
font-weight: 400;
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/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 */
@font-face {
font-family: 'Yesteryear';
font-style: normal;
font-weight: 400;
src: url('~@/presentation/assets/fonts/yesteryear-v8-latin-regular.eot'); /* IE9 Compat Modes */
src: local('Yesteryear'), local('Yesteryear-Regular'),
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 */
}
$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;

1
src/presentation/assets/styles/components/_card.scss Normal file
View File

@@ -0,0 +1 @@
$card-gap: 15px;

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

45
src/presentation/assets/styles/third-party-extensions/_tooltip.scss Normal file
View File

@@ -0,0 +1,45 @@
// Based on https://github.com/Akryum/v-tooltip/blob/83615e394c96ca491a4df04b892ae87e833beb97/demo-src/src/App.vue#L179-L303
@use "@/presentation/assets/styles/colors" as *;
.tooltip {
display: block !important;
z-index: 10000;
.tooltip-inner {
background: $color-primary-darkest;
color: $color-on-primary;
border-radius: 16px;
padding: 5px 10px 4px;
}
.tooltip-arrow {
width: 0;
height: 0;
border-style: solid;
position: absolute;
margin: 5px;
border-color: $color-primary-darkest;
z-index: 1;
}
&[x-placement^="top"] {
margin-bottom: 5px;
.tooltip-arrow {
border-width: 5px 5px 0 5px;
border-left-color: transparent !important;
border-right-color: transparent !important;
border-bottom-color: transparent !important;
bottom: -5px;
left: calc(50% - 5px);
margin-top: 0;
margin-bottom: 0;
}
}
&[aria-hidden='true'] {
visibility: hidden;
opacity: 0;
transition: opacity .15s, visibility .15s;
}
&[aria-hidden='false'] {
visibility: visible;
opacity: 1;
transition: opacity .15s;
}
}

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