Merge pull request 'feat: reorder scss imports' (#4) from dpschen/frontend:feature/reorder-scss-imports into bulma-css-variables
continuous-integration/drone/pr Build is passing
Details
continuous-integration/drone/pr Build is passing
Details
Reviewed-on: adrinux/frontend#4
This commit is contained in:
commit
5e63085bed
|
|
@ -0,0 +1,52 @@
|
|||
//
|
||||
// IMPORTANT NOTE:
|
||||
//
|
||||
// The styles in this file and all imported styles should not
|
||||
// create CSS output when compiled!
|
||||
// Instead they should only define SCSS that gets compiled to nothing.
|
||||
//
|
||||
// The reason is that this file is prefixed in _every_ component style so that
|
||||
// the component has access to the variables, mixins, etc. that
|
||||
// are defined here.
|
||||
//
|
||||
|
||||
// the default values get overwritten by the definitions above
|
||||
@import "bulma-css-variables/sass/utilities/_all";
|
||||
|
||||
// this is needed so that the shared form variables are globally defined aswell
|
||||
@import "bulma-css-variables/sass/form/shared";
|
||||
|
||||
// since $tablet is defined by bulma we can just define it after importing the utilities
|
||||
$mobile: math.div($tablet, 2);
|
||||
|
||||
$family-sans-serif: 'Open Sans', Helvetica, Arial, sans-serif;
|
||||
$vikunja-font: 'Quicksand', sans-serif;
|
||||
|
||||
$thickness: 1px;
|
||||
$pagination-current-border: var(--primary);
|
||||
$navbar-item-active-color: var(--primary);
|
||||
|
||||
$dropdown-content-shadow: none;
|
||||
$dropdown-item-hover-background-color: var(--grey-100);
|
||||
|
||||
$bulmaswatch-import-font: false !default;
|
||||
$site-background: var(--grey-100);
|
||||
|
||||
$transition-duration: 150ms;
|
||||
$transition: $transition-duration ease;
|
||||
|
||||
$button-height: 34px;
|
||||
|
||||
$switch-view-height: 2.69rem;
|
||||
|
||||
$user-dropdown-width-mobile: 5rem;
|
||||
$hamburger-menu-icon-spacing: 1rem;
|
||||
$hamburger-menu-icon-width: 28px;
|
||||
$navbar-height: 4rem;
|
||||
$navbar-width: 300px;
|
||||
$navbar-icon-width: 40px;
|
||||
|
||||
|
||||
$lists-per-row: 5;
|
||||
$list-height: 150px;
|
||||
$list-spacing: 1rem;
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
@import "colors";
|
||||
@import "shadows";
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
:root {
|
||||
// Vikunja colors as CSS custom properties
|
||||
|
||||
/* Vikunja colors as CSS custom properties */
|
||||
:root {
|
||||
--grey-50: hsl(210, 20%, 98%);
|
||||
--grey-100: hsl(220, 14.3%, 95.9%);
|
||||
--grey-200: hsl(220, 13%, 91%);
|
||||
|
|
@ -25,8 +25,8 @@
|
|||
--grey-light: var(--grey-300);
|
||||
--grey-lighter: var(--grey-200);
|
||||
--grey-lightest: var(--grey-100);
|
||||
//--white-ter: whitesmoke;
|
||||
//--white-bis: #fafafa;
|
||||
// --white-ter: whitesmoke;
|
||||
// --white-bis: #fafafa;
|
||||
|
||||
--white-h: 0deg;
|
||||
--white-s: 0%;
|
||||
|
|
@ -41,25 +41,28 @@
|
|||
--black-a: 1;
|
||||
--black: hsla(var(--black-h), var(--black-s), var(--black-l), var(--black-a));
|
||||
|
||||
//$warning/$orange: #ff851b or hsl(27.9, 100%, 55.3%)
|
||||
// $warning / $orange: #ff851b or hsl(27.9, 100%, 55.3%)
|
||||
--warning-h: 27.9deg;
|
||||
--warning-s: 100%;
|
||||
--warning-l: 55.3%;
|
||||
--warning-a: 1;
|
||||
--warning: hsla(var(--warning-h), var(--warning-s), var(--warning-l), var(--warning-a));
|
||||
//$success/$green is #00db60 or hsl(146.3, 100%, 42.9%)
|
||||
|
||||
// $success / $green is #00db60 or hsl(146.3, 100%, 42.9%)
|
||||
--success-h: 146.3deg;
|
||||
--success-s: 100%;
|
||||
--success-l: 42.9%;
|
||||
--success-a: 1;
|
||||
--success: hsla(var(--success-h), var(--success-s), var(--success-l), var(--success-a));
|
||||
//$danger/$red is #ff4136 or hsl(3.3, 100%, 60.6%)
|
||||
|
||||
// $danger / $red is #ff4136 or hsl(3.3, 100%, 60.6%)
|
||||
--danger-h: 3.3deg;
|
||||
--danger-s: 100%;
|
||||
--danger-l: 60.6%;
|
||||
--danger-a: 1;
|
||||
--danger: hsla(var(--danger-h), var(--danger-s), var(--danger-l), var(--danger-a));
|
||||
//var(--primary)/$blue is #1973ff or hsl(216.5, 100%, 54.9%)
|
||||
|
||||
// var(--primary) / $blue is #1973ff or hsl(216.5, 100%, 54.9%)
|
||||
--primary-h: 216.5deg;
|
||||
--primary-s: 100%;
|
||||
--primary-l: 54.9%;
|
||||
|
|
@ -72,7 +75,7 @@
|
|||
--primary-light: hsla(var(--primary-h), var(--primary-s), var(--primary-light-l), var(--primary-a));
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
/* Light mode colours reversed for dark mode */
|
||||
// Light mode colours reversed for dark mode
|
||||
--grey-900: hsl(210, 20%, 98%);
|
||||
--grey-800: hsl(220, 14.3%, 95.9%);
|
||||
--grey-700: hsl(220, 13%, 91%);
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
:root {
|
||||
--shadow-xs: 0 1px 3px hsla(var(--grey-500-hsl),.12),
|
||||
0 1px 2px hsla(var(--grey-500-hsl), .24);
|
||||
--shadow-sm: 0 3px 6px hsla(var(--grey-500-hsl), .12),
|
||||
0 2px 4px hsla(var(--grey-500-hsl), .10);
|
||||
--shadow-md: 0 10px 20px hsla(var(--grey-500-hsl), .12),
|
||||
0 3px 6px hsla(var(--grey-500-hsl), .08);
|
||||
--shadow-lg: 0 15px 25px hsla(var(--grey-500-hsl), .12),
|
||||
0 5px 10px hsla(var(--grey-500-hsl), .05);
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
// Even darker shadows for dark mode
|
||||
--shadow-xs: 0 1px 3px hsla(var(--grey-100-hsl),.12),
|
||||
0 1px 2px hsla(var(--grey-100-hsl), .24);
|
||||
--shadow-sm: 0 3px 6px hsla(var(--grey-100-hsl), .12),
|
||||
0 2px 4px hsla(var(--grey-100-hsl), .10);
|
||||
--shadow-md: 0 10px 20px hsla(var(--grey-100-hsl), .12),
|
||||
0 3px 6px hsla(var(--grey-100-hsl), .08);
|
||||
--shadow-lg: 0 15px 25px hsla(var(--grey-100-hsl), .12),
|
||||
0 5px 10px hsla(var(--grey-100-hsl), .05);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
$font-files-path: '/fonts/';
|
||||
|
||||
/* quicksand-regular - latin */
|
||||
// quicksand-regular - latin
|
||||
@font-face {
|
||||
font-family: 'Quicksand';
|
||||
font-style: normal;
|
||||
|
|
@ -10,7 +10,7 @@ $font-files-path: '/fonts/';
|
|||
|
||||
}
|
||||
|
||||
/* quicksand-500 - latin */
|
||||
// quicksand-500 - latin
|
||||
@font-face {
|
||||
font-family: 'Quicksand';
|
||||
font-style: normal;
|
||||
|
|
@ -19,7 +19,7 @@ $font-files-path: '/fonts/';
|
|||
src: url($font-files-path + 'quicksand-v7-latin-500.woff2') format('woff2');
|
||||
}
|
||||
|
||||
/* quicksand-700 - latin */
|
||||
// quicksand-700 - latin
|
||||
@font-face {
|
||||
font-family: 'Quicksand';
|
||||
font-style: normal;
|
||||
|
|
@ -28,7 +28,7 @@ $font-files-path: '/fonts/';
|
|||
src: url($font-files-path + 'quicksand-v7-latin-700.woff2') format('woff2');
|
||||
}
|
||||
|
||||
/* open-sans-regular - latin */
|
||||
// open-sans-regular - latin
|
||||
@font-face {
|
||||
font-family: 'Open Sans';
|
||||
font-style: normal;
|
||||
|
|
@ -37,7 +37,7 @@ $font-files-path: '/fonts/';
|
|||
src: url($font-files-path + 'open-sans-v15-latin-regular.woff2') format('woff2');
|
||||
}
|
||||
|
||||
/* open-sans-italic - latin */
|
||||
// open-sans-italic - latin
|
||||
@font-face {
|
||||
font-family: 'Open Sans';
|
||||
font-style: italic;
|
||||
|
|
@ -46,7 +46,7 @@ $font-files-path: '/fonts/';
|
|||
src: url($font-files-path + 'open-sans-v15-latin-italic.woff2') format('woff2');
|
||||
}
|
||||
|
||||
/* open-sans-700 - latin */
|
||||
// open-sans-700 - latin
|
||||
@font-face {
|
||||
font-family: 'Open Sans';
|
||||
font-style: normal;
|
||||
|
|
@ -55,7 +55,7 @@ $font-files-path: '/fonts/';
|
|||
src: url($font-files-path + 'open-sans-v15-latin-700.woff2') format('woff2');
|
||||
}
|
||||
|
||||
/* open-sans-700italic - latin */
|
||||
// open-sans-700italic - latin
|
||||
@font-face {
|
||||
font-family: 'Open Sans';
|
||||
font-style: italic;
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@
|
|||
@import "bulma-css-variables/sass/helpers/_all";
|
||||
@import "bulma-css-variables/sass/layout/_all";
|
||||
|
||||
@import "variables/colors";
|
||||
|
||||
@import "theme";
|
||||
@import "components";
|
||||
@import "components";
|
||||
|
||||
@import "custom-properties";
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
@import "shadows";
|
||||
@import "variables";
|
||||
|
||||
// the default values get overwritten by the definitions above
|
||||
@import "bulma-css-variables/sass/utilities/_all";
|
||||
|
||||
// this is needed so that the shared form variables are globally defined aswell
|
||||
@import "bulma-css-variables/sass/form/shared";
|
||||
|
||||
// since $tablet is defined by bulma we can just define it after importing the utilities
|
||||
$mobile: math.div($tablet, 2);
|
||||
|
|
@ -1,22 +0,0 @@
|
|||
:root {
|
||||
--shadow-xs: 0 1px 3px hsla(var(--grey-500-hsl),.12),
|
||||
0 1px 2px hsla(var(--grey-500-hsl), .24);
|
||||
--shadow-sm: 0 3px 6px hsla(var(--grey-500-hsl), .12),
|
||||
0 2px 4px hsla(var(--grey-500-hsl), .10);
|
||||
--shadow-md: 0 10px 20px hsla(var(--grey-500-hsl), .12),
|
||||
0 3px 6px hsla(var(--grey-500-hsl), .08);
|
||||
--shadow-lg: 0 15px 25px hsla(var(--grey-500-hsl), .12),
|
||||
0 5px 10px hsla(var(--grey-500-hsl), .05);
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
/* Even darker shadows for dark mode */
|
||||
--shadow-xs: 0 1px 3px hsla(var(--grey-100-hsl),.12),
|
||||
0 1px 2px hsla(var(--grey-100-hsl), .24);
|
||||
--shadow-sm: 0 3px 6px hsla(var(--grey-100-hsl), .12),
|
||||
0 2px 4px hsla(var(--grey-100-hsl), .10);
|
||||
--shadow-md: 0 10px 20px hsla(var(--grey-100-hsl), .12),
|
||||
0 3px 6px hsla(var(--grey-100-hsl), .08);
|
||||
--shadow-lg: 0 15px 25px hsla(var(--grey-100-hsl), .12),
|
||||
0 5px 10px hsla(var(--grey-100-hsl), .05);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,32 +0,0 @@
|
|||
|
||||
$family-sans-serif: 'Open Sans', Helvetica, Arial, sans-serif;
|
||||
$vikunja-font: 'Quicksand', sans-serif;
|
||||
|
||||
$thickness: 1px;
|
||||
$pagination-current-border: var(--primary);
|
||||
$navbar-item-active-color: var(--primary);
|
||||
|
||||
$dropdown-content-shadow: none;
|
||||
$dropdown-item-hover-background-color: var(--grey-100);
|
||||
|
||||
$bulmaswatch-import-font: false !default;
|
||||
$site-background: var(--grey-100);
|
||||
|
||||
$transition-duration: 150ms;
|
||||
$transition: $transition-duration ease;
|
||||
|
||||
$button-height: 34px;
|
||||
|
||||
$switch-view-height: 2.69rem;
|
||||
|
||||
$user-dropdown-width-mobile: 5rem;
|
||||
$hamburger-menu-icon-spacing: 1rem;
|
||||
$hamburger-menu-icon-width: 28px;
|
||||
$navbar-height: 4rem;
|
||||
$navbar-width: 300px;
|
||||
$navbar-icon-width: 40px;
|
||||
|
||||
|
||||
$lists-per-row: 5;
|
||||
$list-height: 150px;
|
||||
$list-spacing: 1rem;
|
||||
|
|
@ -8,8 +8,8 @@ const {visualizer} = require('rollup-plugin-visualizer')
|
|||
const pathSrc = path.resolve(__dirname, './src')
|
||||
|
||||
// the @use rules have to be the first in the compiled stylesheets
|
||||
const SCSS_IMPORT_PREFIX = `@use "sass:math";
|
||||
@import "${pathSrc}/styles/variables";`
|
||||
const PREFIXED_SCSS_STYLES = `@use "sass:math";
|
||||
@import "${pathSrc}/styles/common-imports";`
|
||||
|
||||
const isModernBuild = Boolean(process.env.BUILD_MODERN_ONLY)
|
||||
const legacy = isModernBuild
|
||||
|
|
@ -28,7 +28,7 @@ if (isModernBuild) {
|
|||
export default defineConfig({
|
||||
css: {
|
||||
preprocessorOptions: {
|
||||
scss: { additionalData: SCSS_IMPORT_PREFIX },
|
||||
scss: { additionalData: PREFIXED_SCSS_STYLES },
|
||||
},
|
||||
},
|
||||
plugins: [
|
||||
|
|
|
|||
Reference in New Issue