rixty
/
AzuraCast
mirror of https://github.com/AzuraCast/AzuraCast.git
1
1
Fork 0
Code Issues Projects Releases Wiki Activity

Stylesheet updates 

- Merge dark and light CSS into a single generated CSS file with different body classes
 - Optimize CSS generation for production instances
This commit is contained in:
Buster "Silver Eagle" Neece 2021-04-29 04:24:11 -05:00
parent ccdee790ac
commit ca8b0984ec
No known key found for this signature in database
GPG Key ID: 6D9E12FF03411F4E
118 changed files with 3202 additions and 2374 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.github/workflows/default.yml vendored
View File

@ -25,6 +25,7 @@ jobs :
runs-on : ubuntu-latest
env :
APPLICATION_ENV : testing
NODE_ENV : production
steps :
- uses : actions/checkout@master

27
config/assets.php
View File

@ -125,6 +125,9 @@ return [
[
'href' => 'dist/lib/roboto-fontface/css/roboto/roboto-fontface.css',
],
[
'href' => 'dist/style.css',
],
],
],
'inline' => [
@ -176,30 +179,6 @@ return [
],
],
/*
* Themes
*/
'theme_dark' => [
'order' => 50,
'files' => [
'css' => [
[
'href' => 'dist/dark.css',
],
],
],
],
'theme_light' => [
'order' => 50,
'files' => [
'css' => [
[
'href' => 'dist/light.css',
],
],
],
],
/*
* Asset collections
*/

7
frontend/gulpfile.js
View File

@ -12,6 +12,7 @@ const clean_css = require('gulp-clean-css');
const revdel = require('gulp-rev-delete-original');
const webpackStream = require('webpack-stream');
const gulpIgnore = require('gulp-ignore');
const mode = require('gulp-mode')();
var jsFiles = {
// Core Libraries
@ -252,11 +253,11 @@ gulp.task('build-js', function () {
});
gulp.task('build-css', function () {
return gulp.src(['./scss/dark.scss', './scss/light.scss'])
.pipe(sourcemaps.init())
return gulp.src(['./scss/style.scss'])
.pipe(mode.development(sourcemaps.init()))
.pipe(sass())
.pipe(clean_css())
.pipe(sourcemaps.write())
.pipe(mode.development(sourcemaps.write()))
.pipe(gulp.dest('../web/static/dist'));
});

2074
frontend/npm-shrinkwrap.json generated
View File

File diff suppressed because it is too large Load Diff

35
frontend/package.json
View File

@ -8,8 +8,8 @@
"ci": "npm run import-locales && npm run build"
},
"dependencies": {
"@babel/core": "^7.11.6",
"@babel/preset-env": "^7.11.5",
"@babel/core": "^7.13.16",
"@babel/preset-env": "^7.13.15",
"@fancyapps/fancybox": "^3.5.7",
"@flowjs/flow.js": "^2.14.1",
"@fullcalendar/core": "^4.4.2",
@ -20,54 +20,55 @@
"@fullcalendar/vue": "^4.4.2",
"autosize": "^4.0.2",
"axios": "^0.21.1",
"bootstrap": "^4.5.2",
"bootstrap": "^4.6.0",
"bootstrap-daterangepicker": "^3.1.0",
"bootstrap-notify": "^3.1.3",
"bootstrap-vue": "^2.7",
"bootstrap-vue": "^2.21.2",
"chart.js": "^2.9.3",
"chartjs-plugin-colorschemes": "^0.3.0",
"chartjs-plugin-zoom": "^0.7.7",
"clipboard": "^2.0.6",
"codemirror": "^5.58.1",
"css-loader": "^2.1.1",
"clipboard": "^2.0.8",
"codemirror": "^5.61.0",
"css-loader": "^1.0",
"del": "^3.0.0",
"dirrty": "^1.0.0",
"easygettext": "^2.14.0",
"easygettext": "^2.17.0",
"gulp": "^4.0.2",
"gulp-babel": "^8.0.0",
"gulp-clean-css": "^3.9.2",
"gulp-concat": "^2.6.1",
"gulp-dart-sass": "^1.0.2",
"gulp-ignore": "^3.0.0",
"gulp-mode": "^1.1.0",
"gulp-rev": "^8.1.1",
"gulp-rev-delete-original": "^0.2.3",
"gulp-sourcemaps": "^2.6.5",
"gulp-uglify": "^3.0.2",
"jquery": "^3.5.1",
"jquery": "^3.6.0",
"leaflet": "^1.7.1",
"leaflet.fullscreen": "^1.6.0",
"lodash": "^4.17.20",
"material-icons": "^0.5.4",
"lodash": "^4.17.21",
"material-icons": "^0.5.5",
"moment": "^2.29.1",
"moment-timezone": "^0.5.31",
"moment-timezone": "^0.5.33",
"nchan": "^1.0.10",
"popper.js": "^1.16.1",
"prettier": "1.12.1",
"roboto-fontface": "^0.10.0",
"sass": "^1.27.0",
"sass": "^1.32.12",
"sass-loader": "^7.3.1",
"select2": "^4.0.13",
"sortablejs": "^1.12.0",
"sortablejs": "^1.13.0",
"store": "^1.3.20",
"sweetalert2": "^10.3.7",
"sweetalert2": "^10.16.6",
"vue": "^2.6.12",
"vue-gettext": "^2.1.10",
"vue-gettext": "^2.1.12",
"vue-loader": "14.2.2",
"vue-template-compiler": "^2.6.12",
"vuedraggable": "^2.24.1",
"vuelidate": "^0.7.5",
"wavesurfer.js": "^3.3.3",
"webpack": "^4.44.2",
"webpack": "^4.46.0",
"webpack-assets-manifest": "^3.1.1",
"webpack-stream": "^5.1.1",
"zxcvbn": "^4.4.2"

86
frontend/scss/_common-colors.scss Normal file
View File

@ -0,0 +1,86 @@
@import 'colors';
@import 'functions';
@import 'mixins';
// Sass option
$enable-grid-classes: true !default;
$enable-print-styles: true !default;
// Variables
@import 'variables/elevation-shadow';
@import 'variables/grid';
@import 'variables/palette';
@import 'variables/spacer';
@import 'variables/transition';
@import 'variables/typography';
@import 'variables/variable-bootstrap';
@import 'variables/variable-material';
@import 'azuracast/variables';
// Base CSS
@import 'base/base-colors';
@import 'base/typography-colors';
// Bootstrap components
// Components covered in Bootstrap's css but not in Material design
@import 'bootstrap/alert-colors';
@import 'bootstrap/badge-colors';
@import 'bootstrap/breadcrumb-colors';
@import 'bootstrap/close-colors';
@import 'bootstrap/code-colors';
@import 'bootstrap/form-colors';
@import 'bootstrap/image-colors';
@import 'bootstrap/nav-colors';
@import 'bootstrap/pagination-colors';
@import 'bootstrap/popover-colors';
// Material components
// Components covered in Material design (https://material.google.com/components)
@import 'material/button-colors';
@import 'material/button-flat-colors';
@import 'material/button-group-colors';
@import 'material/card-colors';
@import 'material/chip-colors';
@import 'material/data-table-colors';
@import 'material/dialog-colors';
@import 'material/expansion-panel-colors';
@import 'material/menu-colors';
@import 'material/navdrawer-colors';
@import 'material/picker-colors';
@import 'material/progress-colors';
@import 'material/progress-circular-colors';
@import 'material/selection-control-colors';
@import 'material/slider-colors';
@import 'material/snackbar-colors';
@import 'material/stepper-colors';
@import 'material/tab-colors';
@import 'material/text-field-colors';
@import 'material/text-field-box-colors';
@import 'material/text-field-floating-label-colors';
@import 'material/text-field-input-group-colors';
@import 'material/toolbar-colors';
@import 'material/tooltip-colors';
// Utilities
@import 'utilities/border-colors';
@import 'utilities/background-colors';
@import 'utilities/text-colors';
// Overrides for specific third-party products
@import 'vendors/bootgrid-colors';
@import 'vendors/codemirror-colors';
@import 'vendors/daterangepicker-colors';
@import 'vendors/fullcalendar-colors';
@import 'vendors/waveform-colors';
@import 'vendors/sweetalert2-colors';
@import 'vendors/select2-colors';
// Overrides for the Daemonite Material theme
@import 'azuracast/overrides/body-colors';
@import 'azuracast/overrides/forms-colors';
// Individual AzuraCast pages
@import 'azuracast/pages/embed-colors';
@import 'azuracast/pages/files-colors';
@import 'azuracast/pages/public-colors';

25
frontend/scss/_material.scss → frontend/scss/_common.scss
View File

@ -28,12 +28,10 @@ $enable-print-styles: true !default;
@import 'bootstrap/alert';
@import 'bootstrap/badge';
@import 'bootstrap/breadcrumb';
@import 'bootstrap/carousel';
@import 'bootstrap/close';
@import 'bootstrap/code';
@import 'bootstrap/form';
@import 'bootstrap/image';
@import 'bootstrap/jumbotron';
@import 'bootstrap/media';
@import 'bootstrap/nav';
@import 'bootstrap/pagination';
@ -71,19 +69,27 @@ $enable-print-styles: true !default;
@import 'material/tooltip';
// Utilities
@import 'material-icons';
@import 'utilities';
@import 'utilities/align';
@import 'utilities/border';
@import 'utilities/clearfix';
@import 'utilities/display';
@import 'utilities/flex';
@import 'utilities/float';
@import 'utilities/position';
@import 'utilities/screenreader';
@import 'utilities/shadows';
@import 'utilities/sizing';
@import 'utilities/spacing';
@import 'utilities/text';
@import 'utilities/visibility';
@import 'utilities/material-icons';
// Very basic print styles
@import 'print';
// Overrides for specific third-party products
@import 'vendors/bootgrid';
@import 'vendors/codemirror';
@import 'vendors/fullcalendar';
@import 'vendors/daterangepicker';
@import 'vendors/waveform';
@import 'vendors/sweetalert2';
@import 'vendors/select2';
// Overrides for the Daemonite Material theme
@ -92,12 +98,11 @@ $enable-print-styles: true !default;
@import 'azuracast/overrides/footer';
@import 'azuracast/overrides/forms';
@import 'azuracast/overrides/header';
@import 'azuracast/overrides/tables';
@import 'azuracast/overrides/progressbar';
@import 'azuracast/overrides/tables';
// Individual AzuraCast pages
@import 'azuracast/pages/embed';
@import 'azuracast/pages/files';
@import 'azuracast/pages/playlists';
@import 'azuracast/pages/public';
@import 'azuracast/pages/log_viewer';

34
frontend/scss/_material-icons.scss
View File

@ -1,34 +0,0 @@
/* fallback */
@font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: url('lib/material-icons/material-icons.woff2') format('woff2');
}
@font-face {
font-family: 'Material Icons Outlined';
font-style: normal;
font-weight: 400;
src: url('lib/material-icons/material-icons-outlined.woff2') format('woff2');
}
.material-icons {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: 24px;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
-webkit-font-feature-settings: 'liga';
-webkit-font-smoothing: antialiased;
&.outlined {
font-family: 'Material Icons Outlined';
}
}

20
frontend/scss/_utilities.scss
View File

@ -1,20 +0,0 @@
// Bootstrap
@import 'utilities/align';
@import 'utilities/border';
@import 'utilities/background';
@import 'utilities/clearfix';
@import 'utilities/display';
@import 'utilities/flex';
@import 'utilities/float';
@import 'utilities/position';
@import 'utilities/screenreader';
@import 'utilities/shadows';
@import 'utilities/sizing';
@import 'utilities/spacing';
@import 'utilities/text';
@import 'utilities/visibility';
// Material
@import 'utilities/material-icons';

11
frontend/scss/azuracast/overrides/_body-colors.scss Normal file
View File

@ -0,0 +1,11 @@
::-webkit-scrollbar-track {
background: $body-bg;
}
::-webkit-scrollbar-thumb {
background: $scrollbar-color;
}
::-webkit-scrollbar-corner {
background: $body-bg;
}

3
frontend/scss/azuracast/overrides/_body.scss
View File

@ -20,17 +20,14 @@ body {
::-webkit-scrollbar-track {
padding: 2px;
background: $body-bg;
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
margin: 2px 0;
border-radius: 10px;
background: $scrollbar-color;
}
::-webkit-scrollbar-corner {
background: $body-bg;
border: 0;
}

48
frontend/scss/azuracast/overrides/_forms-colors.scss Normal file
View File

@ -0,0 +1,48 @@
select.form-control option,
select.custom-select option {
background: $menu-bg;
}
.form {
fieldset {
div.fieldset-legend,
legend.col-form-label {
border-color: theme-color-dark(primary);
}
}
}
.form-group {
&.has-error {
.form-text {
color: theme-color(danger);
}
.form-control {
border-color: theme-color(danger);
box-shadow: inset 0 ($textfield-border-width-hover * -1) 0 ($textfield-border-width * -1) theme-color(danger);
}
}
&.has-warning {
.form-text {
color: theme-color(warning);
}
.form-control {
border-color: theme-color(warning);
box-shadow: inset 0 ($textfield-border-width-hover * -1) 0 ($textfield-border-width * -1) theme-color(warning);
}
}
&.has-success {
.form-text {
color: theme-color(success);
}
.form-control {
border-color: theme-color(success);
box-shadow: inset 0 ($textfield-border-width-hover * -1) 0 ($textfield-border-width * -1) theme-color(success);
}
}
}

42
frontend/scss/azuracast/overrides/_forms.scss
View File

@ -4,11 +4,6 @@ input, textarea {
}
}
select.form-control option,
select.custom-select option {
background: $menu-bg;
}
.form {
fieldset {
margin-bottom: 1rem;
@ -16,7 +11,6 @@ select.custom-select option {
div.fieldset-legend,
legend.col-form-label {
border-bottom: 2px dotted;
border-color: theme-color-dark(primary);
margin-bottom: 10px;
}
@ -34,40 +28,4 @@ select.custom-select option {
& > fieldset:last-of-type {
margin-bottom: 0;
}
}
.form-group {
&.has-error {
.form-text {
color: theme-color(danger);
}
.form-control {
border-color: theme-color(danger);
box-shadow: inset 0 ($textfield-border-width-hover * -1) 0 ($textfield-border-width * -1) theme-color(danger);
}
}
&.has-warning {
.form-text {
color: theme-color(warning);
}
.form-control {
border-color: theme-color(warning);
box-shadow: inset 0 ($textfield-border-width-hover * -1) 0 ($textfield-border-width * -1) theme-color(warning);
}
}
&.has-success {
.form-text {
color: theme-color(success);
}
.form-control {
border-color: theme-color(success);
box-shadow: inset 0 ($textfield-border-width-hover * -1) 0 ($textfield-border-width * -1) theme-color(success);
}
}
}

3
frontend/scss/azuracast/pages/_embed-colors.scss Normal file
View File

@ -0,0 +1,3 @@
body.embed-social {
background: $card-bg !important;
}

1
frontend/scss/azuracast/pages/_embed.scss
View File

@ -8,7 +8,6 @@ body.embed {
}
body.embed-social {
background: $card-bg !important;
min-height: auto;
padding: 1rem;
}

18
frontend/scss/azuracast/pages/_files-colors.scss Normal file
View File

@ -0,0 +1,18 @@
.page-file-manager {
#file_drop_target {
border: 4px dashed $theme-color-3;
color: #5e5e5e;
&.drag_over {
border: 4px dashed $theme-color-4;
color: $text-muted;
}
}
#upload_progress {
.error {
color: #a00;
}
}
}

45
frontend/scss/azuracast/pages/_files.scss
View File

@ -1,47 +1,8 @@
.page-file-manager {
#file-table {
width:100%;
th {
cursor:pointer;
user-select: none;
.non-sort {
cursor: default;
}
.indicator {
margin-left: 6px;
}
}
td {
vertical-align: middle;
white-space: nowrap;
.file-icon {
display: inline-block;
float: left;
width: 30px;
i:before {
font-size: 25px;
vertical-align: middle;
}
}
}
}
#file_drop_target {
padding: 25px 0;
border: 4px dashed $theme-color-3;
color: #5e5e5e;
text-align: center;
&.drag_over {
border: 4px dashed $theme-color-4;
color: $text-muted;
}
input {
display: inline;
}
@ -50,7 +11,6 @@
#upload_progress {
padding: 4px 0;
.error {color:#a00;}
& > div { padding:3px 0;}
}
@ -65,10 +25,5 @@
}
}
}
/*
.progress_track {display:inline-block;width:200px;height:10px;border:1px solid #333;margin: 0 4px 0 10px;}
.progress {background-color: #82CFFA;height:10px; }
*/
}

50
frontend/scss/azuracast/pages/_playlists.scss
View File

@ -1,50 +0,0 @@
/* Draggable items from the playlist reorder page */
body.dragging, body.dragging * {
cursor: move !important;
}
.dragged {
position: absolute;
opacity: 0.5;
z-index: 2000;
}
table.sortable {
cursor: pointer;
tr.placeholder {
display: block;
background: theme-color-light('primary');
position: relative;
margin: 0;
padding: 0;
&::before {
content: "";
position: absolute;
width: 0;
height: 0;
border: 5px solid transparent;
border-right-width: 5px;
border-right-style: solid;
border-right-color: transparent;
border-left-color: transparent;
border-left-color: theme-color-light('primary');
margin-top: -5px;
left: 0;
border-right: none;
}
}
.btn-group .btn {
margin-left: 0;
}
tr:first-child .js-order-up {
display: none;
}
tr:last-child .js-order-down {
display: none;
}
}

7
frontend/scss/azuracast/pages/_public-colors.scss Normal file
View File

@ -0,0 +1,7 @@
body.page-minimal {
background: $body-bg url($public-page-bg);
footer {
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black, 0 0 4px #000;
}
}

64
frontend/scss/azuracast/pages/_public.scss
View File

@ -1,12 +1,7 @@
body.page-minimal {
background: $body-bg url($public-page-bg);
background-size: cover;
background-attachment: fixed;
footer {
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black, 0 0 4px #000;
}
.public-page {
height: 100vh;
@ -70,63 +65,4 @@ body.page-minimal {
word-break: break-all;
}
}
#station-history {
.song {
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 100%;
line-height: normal;
margin-bottom: 15px;
&:last-child {
margin-bottom: 0;
}
.order {
display: flex;
flex-direction: column;
width: 35px;
justify-content: center;
margin-right: 5px;
text-align: center;
}
.art {
width: 40px;
height: 40px;
border-radius: 4px;
margin-right: 5px;
}
.name {
display: flex;
flex: 1;
flex-direction: column;
justify-content: center;
}
.date-played {
display: flex;
flex-direction: column;
justify-content: center;
margin: 4px 0 0 40px;
}
.break {
flex-basis: 100%;
height: 0;
}
@media (min-width:576px) {
.date-played {
margin-left: auto;
}
.break {
display: none;
}
}
}
}
}

40
frontend/scss/base/_base-colors.scss Normal file
View File

@ -0,0 +1,40 @@
& {
background-color: $body-bg;
color: $body-color;
}
label {
color: $textfield-hint-color;
}
legend {
color: inherit;
}
a {
background-color: transparent;
color: $link-color;
@include active-focus-hover {
color: $link-color-hover;
}
}
a:not([href]):not([tabindex]) {
color: inherit;
@include active-focus-hover {
color: inherit;
}
}
// Table
caption {
color: $table-caption-color;
}
mark {
background-color: $mark-bg;
color: $mark-color;
}

29
frontend/scss/base/_base.scss
View File

@ -3,20 +3,6 @@
--breakpoint-#{$bp}: #{$value};
}
@each $color, $value in $colors {
--#{$color}: #{$value};
}
@each $color, $values in $theme-colors {
@each $level, $value in $values {
@if $level == 'color' {
--#{$color}: #{$value};
} @else {
--#{$color}-#{$level}: #{$value};
}
}
}
--font-family-monospace: #{inspect($font-family-monospace)};
--font-family-sans-serif: #{inspect($font-family-sans-serif)};
--font-family-serif: #{inspect($font-family-serif)};
@ -57,8 +43,6 @@ section {
body {
@include text-align(left);
background-color: $body-bg;
color: $body-color;
font-family: $font-family-base;
font-size: $font-size-base;
-moz-osx-font-smoothing: grayscale;
@ -188,14 +172,12 @@ input {
label {
@include typography-subheading;
color: $textfield-hint-color;
display: inline-block;
}
legend {
@include typography-headline;
color: inherit;
display: block;
margin-bottom: $headings-margin-y;
max-width: 100%;
@ -271,23 +253,18 @@ summary {
// Link
a {
background-color: transparent;
color: $link-color;
text-decoration: $link-decoration;
-webkit-text-decoration-skip: objects;
@include active-focus-hover {
color: $link-color-hover;
text-decoration: $link-decoration-hover;
}
}
a:not([href]):not([tabindex]) {
color: inherit;
text-decoration: none;
@include active-focus-hover {
color: inherit;
text-decoration: none;
}
@ -309,7 +286,6 @@ caption {
@include typography-caption;
caption-side: bottom;
color: $table-caption-color;
min-height: $table-thead-cell-height;
padding: $table-thead-padding-y $table-cell-padding-x-alt;
}
@ -378,11 +354,6 @@ h6 {
margin-bottom: $headings-margin-y;
}
mark {
background-color: $mark-bg;
color: $mark-color;
}
ol ol,
ol ul,
ul ol,

40
frontend/scss/base/_typography-colors.scss Normal file
View File

@ -0,0 +1,40 @@
// Blockquote
.blockquote {
border-left: $blockquote-border-width solid $blockquote-border-color;
}
.blockquote-footer {
color: $blockquote-small-color;
}
// Emphasis
mark,
.mark {
background-color: $mark-bg;
color: $mark-color;
}
// Headings - bootstrap classes
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
color: $headings-color;
}
// Hr
hr {
border-top: $hr-border-width solid $hr-border-color;
}

6
frontend/scss/base/_typography.scss
View File

@ -3,7 +3,6 @@
.blockquote {
@include typography-title;
border-left: $blockquote-border-width solid $blockquote-border-color;
margin-bottom: $paragraph-margin-y;
padding: 0 $spacer;
}
@ -11,7 +10,6 @@
.blockquote-footer {
@include typography-caption;
color: $blockquote-small-color;
display: block;
margin-top: $spacer-xs;
@ -24,8 +22,6 @@
mark,
.mark {
background-color: $mark-bg;
color: $mark-color;
padding: $mark-padding;
}
@ -101,7 +97,6 @@ h6,
.h4,
.h5,
.h6 {
color: $headings-color;
font-family: $headings-font-family;
margin-bottom: $headings-margin-y;
}
@ -160,7 +155,6 @@ h6,
hr {
border: 0;
border-top: $hr-border-width solid $hr-border-color;
margin-top: $paragraph-margin-y;
margin-bottom: $paragraph-margin-y;
}

25
frontend/scss/bootstrap/_alert-colors.scss Normal file
View File

@ -0,0 +1,25 @@
@each $color, $values in $theme-colors {
.alert-#{$color} {
background-color: theme-color-light($color);
color: color-yiq(theme-color-light($color));
}
}
.alert-dismissible {
.close {
color: inherit;
}
}
.alert-heading {
color: inherit;
}
.alert-link {
color: inherit;
@include active-focus-hover {
color: inherit;
}
}

18
frontend/scss/bootstrap/_alert.scss
View File

@ -8,20 +8,12 @@
position: relative;
}
@each $color, $values in $theme-colors {
.alert-#{$color} {
background-color: theme-color-light($color);
color: color-yiq(theme-color-light($color));
}
}
// Dismissible
.alert-dismissible {
padding-right: ($alert-padding-x * 2 + $close-font-size);
.close {
color: inherit;
padding: ($alert-padding-y - ($close-font-size - $font-size-base * $line-height-base) / 2) $alert-padding-x;
position: absolute;
top: 0;
@ -30,16 +22,6 @@
}
// Misc
.alert-heading {
color: inherit;
}
.alert-link {
color: inherit;
font-weight: $alert-link-font-weight;
@include active-focus-hover {
color: inherit;
}
}

14
frontend/scss/bootstrap/_badge-colors.scss Normal file
View File

@ -0,0 +1,14 @@
@each $color, $values in $theme-colors {
.badge-#{$color} {
background-color: theme-color($color);
color: color-yiq(theme-color($color));
&[href] {
@include active-focus-hover {
background-color: theme-color-dark($color);
color: color-yiq(theme-color-dark($color));
text-decoration: none;
}
}
}
}

15
frontend/scss/bootstrap/_badge.scss
View File

@ -28,21 +28,6 @@ small.badge {
}
}
@each $color, $values in $theme-colors {
.badge-#{$color} {
background-color: theme-color($color);
color: color-yiq(theme-color($color));
&[href] {
@include active-focus-hover {
background-color: theme-color-dark($color);
color: color-yiq(theme-color-dark($color));
text-decoration: none;
}
}
}
}
// Pill badges with extra rounded corners
.badge-pill {

19
frontend/scss/bootstrap/_breadcrumb-colors.scss Normal file
View File

@ -0,0 +1,19 @@
.breadcrumb {
background-color: $breadcrumb-bg;
}
.breadcrumb-item {
color: $breadcrumb-item-color;
@include active-focus-hover {
color: $breadcrumb-item-color-hover;
}
&.active {
color: $breadcrumb-item-color-hover;
}
a {
color: inherit;
}
}

8
frontend/scss/bootstrap/_breadcrumb.scss
View File

@ -2,7 +2,6 @@
@include border-radius($breadcrumb-border-radius);
align-items: center;
background-color: $breadcrumb-bg;
display: flex;
flex-wrap: wrap;
list-style: none;
@ -15,20 +14,13 @@
@include transition-standard(color);
align-items: center;
color: $breadcrumb-item-color;
display: flex;
@include active-focus-hover {
color: $breadcrumb-item-color-hover;
}
&.active {
color: $breadcrumb-item-color-hover;
font-weight: bolder;
}
a {
color: inherit;
text-decoration: none;
}

201
frontend/scss/bootstrap/_carousel.scss
View File

@ -1,201 +0,0 @@
.carousel {
position: relative;
@include hover {
.carousel-control-next,
.carousel-control-prev {
opacity: 1;
}
}
}
.carousel-inner {
overflow: hidden;
position: relative;
width: 100%;
}
.carousel-item {
@include transition-standard-complex(transform);
align-items: center;
backface-visibility: hidden;
display: none;
perspective: 1000px;
position: relative;
width: 100%;
}
.carousel-item.active,
.carousel-item-next,
.carousel-item-prev {
display: flex;
}
.carousel-item-left.active,
.carousel-item-prev {
transform: translateX(-100%);
@supports (transform-style: preserve-3d) {
transform: translate3d(-100%, 0, 0);
}
}
.carousel-item-left.carousel-item-next,
.carousel-item-prev.carousel-item-right {
transform: translateX(0);
@supports (transform-style: preserve-3d) {
transform: translate3d(0, 0, 0);
}
}
.carousel-item-next,
.carousel-item-right.active {
transform: translateX(100%);
@supports (transform-style: preserve-3d) {
transform: translate3d(100%, 0, 0);
}
}
.carousel-item-next,
.carousel-item-prev {
position: absolute;
top: 0;
}
// Fade
.carousel-fade {
.carousel-item {
@include transition-standard-complex(opacity);
opacity: 0;
}
.carousel-item.active,
.carousel-item-next.carousel-item-left,
.carousel-item-prev.carousel-item-right {
opacity: 1;
}
.carousel-item.active,
.carousel-item-left.active,
.carousel-item-next,
.carousel-item-prev,
.carousel-item-prev.active {
transform: translateX(0);
@supports (transform-style: preserve-3d) {
transform: translate3d(0, 0, 0);
}
}
.carousel-item-left.active,
.carousel-item-right.active {
opacity: 0;
}
}
// Left/right controls
.carousel-control-next,
.carousel-control-prev {
align-items: center;
background-color: $carousel-control-bg;
border-radius: 50%;
box-shadow: map-get($carousel-control-elevation-shadow, shadow);
color: $carousel-control-color;
cursor: pointer;
display: flex;
font-size: $carousel-control-font-size;
height: $carousel-control-size;
justify-content: center;
line-height: 1;
margin-top: ($carousel-control-size / -2);
opacity: 0;
position: absolute;
top: 50%;
user-select: none;
width: $carousel-control-size;
@include active-focus-hover {
background-color: $carousel-control-bg-hover;
color: $carousel-control-color;
text-decoration: none;
}
&:active {
box-shadow: map-get($carousel-control-elevation-shadow-active, shadow);
}
&:focus {
opacity: 1;
outline: 0;
}
}
.carousel-control-next {
right: ($carousel-control-size / 2);
}
.carousel-control-prev {
left: ($carousel-control-size / 2);
}
.carousel-control-next-icon::before {
@include setup-material-icons-bg;
@include setup-material-icons-bg($carousel-control-next-icon);
}
.carousel-control-prev-icon::before {
@include setup-material-icons-bg;
@include setup-material-icons-bg($carousel-control-prev-icon);
}
// Optional captions
.carousel-caption {
color: $carousel-caption-color;
position: absolute;
right: ((100% - $carousel-caption-width) / 2);
bottom: ($carousel-indicator-size * 3);
left: ((100% - $carousel-caption-width) / 2);
text-align: center;
z-index: 1;
}
// Optional indicators
.carousel-indicators {
display: flex;
justify-content: center;
list-style: none;
margin-bottom: 0;
padding-left: 0;
position: absolute;
right: ($carousel-control-size * 2);
bottom: $carousel-indicator-size;
left: ($carousel-control-size * 2);
z-index: 1;
li {
background-color: transparent;
border: $carousel-indicator-border-width solid $carousel-indicator-border-color;
border-radius: $carousel-indicator-size;
cursor: pointer;
flex: 0 0 auto;
height: $carousel-indicator-size;
margin-right: $carousel-indicator-border-width;
margin-left: $carousel-indicator-border-width;
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
width: $carousel-indicator-size;
}
.active {
background-color: $carousel-indicator-bg;
}
}

3
frontend/scss/bootstrap/_close-colors.scss Normal file
View File

@ -0,0 +1,3 @@
.close {
color: $close-color;
}

1
frontend/scss/bootstrap/_close.scss
View File

@ -5,7 +5,6 @@
background-color: transparent;
background-image: none;
border: 0;
color: $close-color;
float: right;
font-size: $close-font-size;
font-weight: $close-font-weight;

21
frontend/scss/bootstrap/_code-colors.scss Normal file
View File

@ -0,0 +1,21 @@
code {
background-color: $code-bg;
color: $code-color;
a > & {
color: inherit;
}
}
kbd {
background-color: $kbd-bg;
color: $kbd-color;
}
pre {
color: $pre-color;
code {
color: inherit;
}
}

10
frontend/scss/bootstrap/_code.scss
View File

@ -1,22 +1,14 @@
code {
@include border-radius($code-border-radius);
background-color: $code-bg;
color: $code-color;
font-size: $code-font-size;
padding: $code-padding-y $code-padding-x;
word-break: break-word;
a > & {
color: inherit;
}
}
kbd {
@include border-radius($code-border-radius);
background-color: $kbd-bg;
color: $kbd-color;
font-size: $code-font-size;
padding: $code-padding-y $code-padding-x;
@ -30,14 +22,12 @@ kbd {
pre {
@include border-radius($code-border-radius);
color: $pre-color;
display: block;
font-size: $code-font-size;
code {
background-color: transparent;
border-radius: 0;
color: inherit;
font-size: inherit;
padding: 0;
word-break: normal;

21
frontend/scss/bootstrap/_form-colors.scss Normal file
View File

@ -0,0 +1,21 @@
.form-check-input {
&:disabled ~ .form-check-label {
color: $textfield-color-disabled;
}
}
.form-check-label {
color: inherit;
}
.form-text {
color: $textfield-hint-color;
}
.form-control-plaintext {
color: $textfield-plaintext-color;
}
.col-form-label {
color: inherit;
}

8
frontend/scss/bootstrap/_form.scss
View File

@ -17,14 +17,9 @@
margin-top: (($font-size-base * $line-height-base - $font-size-base) / 3 * 2);
margin-left: ($form-check-input-gutter * -1);
position: absolute;
&:disabled ~ .form-check-label {
color: $textfield-color-disabled;
}
}
.form-check-label {
color: inherit;
font-size: inherit;
line-height: inherit;
}
@ -92,7 +87,6 @@
// Label
.col-form-label {
color: inherit;
font-size: $font-size-base;
line-height: ($textfield-font-size * $textfield-line-height / $font-size-base);
padding-top: $textfield-padding-y;
@ -118,7 +112,6 @@
.form-text {
@include typography-caption;
color: $textfield-hint-color;
display: block;
margin-top: $textfield-margin-y;
@ -158,7 +151,6 @@
border-style: solid;
border-width: 0 0 $textfield-border-width;
box-shadow: none;
color: $textfield-plaintext-color;
display: block;
font-size: $textfield-font-size;
line-height: $textfield-line-height;

3
frontend/scss/bootstrap/_image-colors.scss Normal file
View File

@ -0,0 +1,3 @@
.figure-caption {
color: $figure-caption-color;
}

2
frontend/scss/bootstrap/_image.scss
View File

@ -4,8 +4,6 @@
.figure-caption {
@include typography-caption;
color: $figure-caption-color;
}
.figure-img {

15
frontend/scss/bootstrap/_jumbotron.scss
View File

@ -1,15 +0,0 @@
.jumbotron {
@include border-radius($jumbotron-border-radius);
background-color: $jumbotron-bg;
box-shadow: map-get($jumbotron-elevation-shadow, shadow);
color: $jumbotron-color;
padding: $jumbotron-padding-y $jumbotron-padding-x;
}
.jumbotron-fluid {
@include border-radius(0);
padding-right: 0;
padding-left: 0;
}

27
frontend/scss/bootstrap/_nav-colors.scss Normal file
View File

@ -0,0 +1,27 @@
.nav-link {
&.disabled {
color: $nav-link-color-disabled;
}
}
.nav-pills {
.nav-link {
color: $nav-pills-color;
@include active-focus-hover {
background-color: $nav-pills-bg-hover;
}
&.active {
color: $nav-pills-color-active;
}
&.disabled {
color: $nav-link-color-disabled;
}
}
.show > .nav-link {
background-color: $nav-pills-bg-hover;
}
}

9
frontend/scss/bootstrap/_nav.scss
View File

@ -15,7 +15,6 @@
}
&.disabled {
color: $nav-link-color-disabled;
cursor: default;
}
}
@ -44,21 +43,14 @@
@include border-radius($nav-pills-border-radius);
@include transition-standard(background-color, color, opacity);
color: $nav-pills-color;
opacity: $nav-pills-link-opacity;
@include active-focus-hover {
background-color: $nav-pills-bg-hover;
}
&.active {
color: $nav-pills-color-active;
opacity: 1;
}
&.disabled {
background-color: transparent;
color: $nav-link-color-disabled;
opacity: 1;
}
@ -68,7 +60,6 @@
}
.show > .nav-link {
background-color: $nav-pills-bg-hover;
opacity: 1;
}
}

24
frontend/scss/bootstrap/_pagination-colors.scss Normal file
View File

@ -0,0 +1,24 @@
.pagination {
background-color: $pagination-bg;
}
.page-link {
color: $pagination-color;
@include active-focus-hover {
color: $pagination-color;
}
&.active,
&:active {
background-color: $btn-bg-active;
}
.page-item.active & {
background-color: $btn-bg-active;
}
.page-item.disabled & {
color: $pagination-color-disabled;
}
}

9
frontend/scss/bootstrap/_pagination.scss
View File

@ -1,5 +1,4 @@
.pagination {
background-color: $pagination-bg;
display: flex;
list-style: none;
padding: $pagination-padding-y $pagination-padding-x;
@ -13,7 +12,6 @@
background-image: none;
border: 0;
color: $pagination-color;
display: block;
font-size: $btn-font-size;
font-weight: $btn-font-weight;
@ -25,7 +23,6 @@
white-space: nowrap;
@include active-focus-hover {
color: $pagination-color;
text-decoration: none;
}
@ -35,7 +32,6 @@
&.active,
&:active {
background-color: $btn-bg-active;
background-image: none;
}
@ -51,13 +47,8 @@
margin-left: 0;
}
.page-item.active & {
background-color: $btn-bg-active;
}
.page-item.disabled & {
background-color: transparent;
color: $pagination-color-disabled;
cursor: auto;
pointer-events: none;
}

3
frontend/scss/bootstrap/_popover-colors.scss Normal file
View File

@ -0,0 +1,3 @@
.popover {
background-color: $popover-bg;
}

1
frontend/scss/bootstrap/_popover.scss
View File

@ -6,7 +6,6 @@
@include reset-text;
@include border-radius($popover-border-radius);
background-color: $popover-bg;
box-shadow: map-get($popover-elevation-shadow, shadow);
display: block;
font-size: $popover-font-size;

3
frontend/scss/dark.scss
View File

@ -1,3 +0,0 @@
$theme: 'dark';
@import 'material';

3
frontend/scss/light.scss
View File

@ -1,3 +0,0 @@
$theme: 'light';
@import 'material';

70
frontend/scss/material/_button-colors.scss Normal file
View File

@ -0,0 +1,70 @@
.btn {
background-color: transparent;
color: $btn-color;
@include active-focus-hover {
color: $btn-color;
}
@include focus-hover {
background-image: linear-gradient(to bottom, $btn-overlay, $btn-overlay);
}
&.active,
&:active {
background-color: $btn-bg-active;
}
&.disabled,
&:disabled {
background-color: $btn-bg-disabled;
color: $btn-color-disabled;
}
.show > &.dropdown-toggle {
background-image: linear-gradient(to bottom, $btn-overlay, $btn-overlay);
}
}
@each $color, $values in $theme-colors {
.btn-#{$color} {
background-color: theme-color($color);
color: color-yiq(theme-color($color));
@include active-focus-hover {
color: color-yiq(theme-color($color));
}
&.active,
&:active {
background-color: theme-color-dark($color);
}
&.disabled,
&:disabled {
background-color: $btn-bg-disabled;
color: $btn-color-disabled;
}
}
}
[class*='bg-dark'] :not([class*='bg-light']) .btn {
&.disabled,
&:disabled {
background-color: $btn-bg-disabled-inverse;
color: $btn-color-disabled-inverse;
}
}
.btn-link {
color: $link-color;
@include active-focus-hover {
color: $link-color-hover;
}
&.disabled,
&:disabled {
color: $btn-color-disabled;
}
}

25
frontend/scss/material/_button-flat-colors.scss Normal file
View File

@ -0,0 +1,25 @@
@each $color, $values in $theme-colors {
.btn-flat-#{$color},
.btn-outline-#{$color} {
@include plain-active-focus-hover {
color: theme-color($color);
}
&.disabled,
&:disabled {
color: $btn-color-disabled;
}
}
}
.btn-flat-light,
.btn-outline-light {
@include focus-hover {
background-image: linear-gradient(to bottom, $btn-overlay-inverse, $btn-overlay-inverse);
}
&.active,
&:active {
background-color: $btn-bg-active-inverse;
}
}

26
frontend/scss/material/_button-flat.scss
View File

@ -13,29 +13,3 @@
background-color: transparent;
}
}
@each $color, $values in $theme-colors {
.btn-flat-#{$color},
.btn-outline-#{$color} {
@include plain-active-focus-hover {
color: theme-color($color);
}
&.disabled,
&:disabled {
color: $btn-color-disabled;
}
}
}
.btn-flat-light,
.btn-outline-light {
@include focus-hover {
background-image: linear-gradient(to bottom, $btn-overlay-inverse, $btn-overlay-inverse);
}
&.active,
&:active {
background-color: $btn-bg-active-inverse;
}
}

14
frontend/scss/material/_button-group-colors.scss Normal file
View File

@ -0,0 +1,14 @@
.btn-group,
.btn-group-vertical {
background-color: $btn-group-bg;
@each $color, $values in $theme-colors {
> .btn-#{$color} {
&.disabled,
&:disabled {
background-color: theme-color-light($color);
color: color-yiq(theme-color-light($color));
}
}
}
}

11
frontend/scss/material/_button-group.scss
View File

@ -2,21 +2,10 @@
.btn-group-vertical {
@include border-radius($btn-border-radius);
background-color: $btn-group-bg;
display: inline-flex;
position: relative;
vertical-align: middle;
@each $color, $values in $theme-colors {
> .btn-#{$color} {
&.disabled,
&:disabled {
background-color: theme-color-light($color);
color: color-yiq(theme-color-light($color));
}
}
}
> .btn {
@include transition-standard(border-color, opacity);

48
frontend/scss/material/_button.scss
View File

@ -2,10 +2,7 @@
@include border-radius($btn-border-radius);
@include transition-standard(box-shadow);
background-color: transparent;
background-image: none;
border: 0;
color: $btn-color;
display: inline-block;
font-size: $btn-font-size;
font-weight: $btn-font-weight;
@ -22,25 +19,17 @@
white-space: nowrap;
@include active-focus-hover {
color: $btn-color;
text-decoration: none;
}
@include focus-hover {
background-image: linear-gradient(to bottom, $btn-overlay, $btn-overlay);
}
&.active,
&:active {
background-color: $btn-bg-active;
background-image: none;
}
&.disabled,
&:disabled {
background-color: $btn-bg-disabled;
background-image: none;
color: $btn-color-disabled;
opacity: 1;
}
@ -57,42 +46,10 @@
}
}
// stylelint-disable selector-no-qualifying-type
a.btn.disabled,
fieldset:disabled a.btn {
pointer-events: none;
}
// stylelint-enable
@each $color, $values in $theme-colors {
.btn-#{$color} {
background-color: theme-color($color);
color: color-yiq(theme-color($color));
@include active-focus-hover {
color: color-yiq(theme-color($color));
}
&.active,
&:active {
background-color: theme-color-dark($color);
}
&.disabled,
&:disabled {
background-color: $btn-bg-disabled;
color: $btn-color-disabled;
}
}
}
[class*='bg-dark'] :not([class*='bg-light']) .btn {
&.disabled,
&:disabled {
background-color: $btn-bg-disabled-inverse;
color: $btn-color-disabled-inverse;
}
}
.btn-lg,
%btn-lg {
@ -106,8 +63,6 @@ fieldset:disabled a.btn {
padding: $btn-padding-y-sm $btn-padding-x-sm;
}
// Block button
.btn-block {
display: block;
width: 100%;
@ -130,13 +85,11 @@ fieldset:disabled a.btn {
.btn-link {
background-color: transparent;
border-radius: 0;
color: $link-color;
font-weight: $font-weight-regular;
text-decoration: $link-decoration;
text-transform: none;
@include active-focus-hover {
color: $link-color-hover;
text-decoration: $link-decoration-hover;
}
@ -152,7 +105,6 @@ fieldset:disabled a.btn {
&.disabled,
&:disabled {
background-color: transparent;
color: $btn-color-disabled;
text-decoration: none;
}
}

31
frontend/scss/material/_card-colors.scss Normal file
View File

@ -0,0 +1,31 @@
.card {
background-color: $card-bg;
@each $color, $values in $theme-colors {
&.border-#{$color} {
box-shadow: map-get($card-elevation-shadow, shadow), inset 0 0 0 $card-border-width theme-color($color);
&[href],
&[tabindex] {
@include active-focus-hover {
box-shadow: map-get($card-elevation-shadow-hover, shadow), inset 0 0 0 $card-border-width theme-color($color);
}
}
}
}
}
.card-footer {
border-top: $card-border-width solid $card-border-color;
}
.card-header {
border-bottom: $card-border-width solid $card-border-color;
}
.card-header.bg-primary-dark {
.card-title,
.card-subtitle {
color: #fff;
}
}

25
frontend/scss/material/_card.scss
View File

@ -1,7 +1,6 @@
.card {
@include border-radius($card-border-radius);
background-color: $card-bg;
box-shadow: map-get($card-elevation-shadow, shadow);
display: flex;
flex-direction: column;
@ -9,19 +8,6 @@
position: relative;
word-wrap: break-word;
@each $color, $values in $theme-colors {
&.border-#{$color} {
box-shadow: map-get($card-elevation-shadow, shadow), inset 0 0 0 $card-border-width theme-color($color);
&[href],
&[tabindex] {
@include active-focus-hover {
box-shadow: map-get($card-elevation-shadow-hover, shadow), inset 0 0 0 $card-border-width theme-color($color);
}
}
}
}
&[href],
&[tabindex] {
@include active-focus-hover {
@ -101,7 +87,7 @@
padding-right: $card-action-inner-spacer-x;
padding-left: $card-action-inner-spacer-x;
}
// Fix for "overflow: hidden" + "text-overflow: ellipsis" bug in Safari - see issue #869
.btn::after {
content: "\0000a0";
@ -136,7 +122,6 @@
// Footer
.card-footer {
border-top: $card-border-width solid $card-border-color;
padding: $card-padding-y $card-padding-x;
&:first-child {
@ -157,7 +142,6 @@
// Header
.card-header {
border-bottom: $card-border-width solid $card-border-color;
margin-bottom: 0;
padding: $card-padding-y $card-padding-x;
@ -192,13 +176,6 @@
margin: ($card-padding-y * -1) ($card-padding-x * -1) calc(#{$card-padding-y * -1} - #{$card-border-width});
}
.card-header.bg-primary-dark {
.card-title,
.card-subtitle {
color: #fff;
}
}
// Image
.card-img {

27
frontend/scss/material/_chip-colors.scss Normal file
View File

@ -0,0 +1,27 @@
.chip {
background-color: $chip-bg;
color: $chip-color;
}
@each $color, $values in $theme-colors {
.chip-#{$color} {
background-color: theme-color($color);
color: color-yiq(theme-color($color));
}
}
.chip-action {
@include active-focus-hover {
box-shadow: map-get($chip-elevation-shadow-hover, shadow);
color: $chip-color;
}
&:active {
background-color: $chip-bg-active;
}
}
.chip-icon {
background-color: $chip-icon-bg;
color: color-yiq($chip-icon-bg);
}

19
frontend/scss/material/_chip.scss
View File

@ -1,9 +1,7 @@
.chip {
align-items: center;
background-color: $chip-bg;
border: 0;
border-radius: ($chip-height / 2);
color: $chip-color;
display: inline-flex;
font-size: $chip-font-size;
font-weight: $chip-font-weight;
@ -32,28 +30,13 @@
}
}
@each $color, $values in $theme-colors {
.chip-#{$color} {
background-color: theme-color($color);
color: color-yiq(theme-color($color));
}
}
// Misc
.chip-action {
@include transition-standard(background-color, box-shadow);
@include active-focus-hover {
box-shadow: map-get($chip-elevation-shadow-hover, shadow);
color: $chip-color;
text-decoration: none;
}
&:active {
background-color: $chip-bg-active;
}
&:focus {
outline: 0;
}
@ -63,9 +46,7 @@
@include text-truncate;
align-items: center;
background-color: $chip-icon-bg;
border-radius: ($chip-height / 2);
color: color-yiq($chip-icon-bg);
display: inline-flex;
flex-shrink: 0;
font-size: $chip-icon-font-size;

138
frontend/scss/material/_data-table-colors.scss Normal file
View File

@ -0,0 +1,138 @@
.table {
background-color: $table-bg;
td,
th {
border-top: $table-border-width solid $table-border-color;
}
tbody {
color: $table-tbody-color;
}
tfoot {
color: $table-tfoot-color;
}
thead {
color: $table-thead-color;
}
.table {
border-top: $table-border-width solid $table-border-color;
}
}
.table-bordered {
border: $table-border-width solid $table-border-color;
}
.table-striped {
tbody tr:nth-of-type(#{$table-striped-order}) {
background-color: $table-bg-accent;
}
}
.table-hover {
tbody tr {
@include hover {
background-color: $table-bg-hover;
}
}
}
@each $color, $values in $theme-colors {
.table-#{$color} {
&,
> td,
> th {
background-color: theme-color-light($color);
color: color-yiq(theme-color-light($color));
}
.table-hover & {
@include hover {
&,
> td,
> th {
background-color: theme-color($color);
color: color-yiq(theme-color($color));
}
}
}
}
}
.table-active {
&,
> td,
> th {
background-color: $table-bg-active;
color: color-yiq($table-bg-active);
}
.table-hover & {
@include hover {
&,
> td,
> th {
background-color: $table-bg-active-hover;
color: color-yiq($table-bg-active-hover);
}
}
}
}
// stylelint-disable-next-line no-duplicate-selectors
.table {
.thead-dark {
td,
th {
background-color: $table-dark-bg;
color: $table-dark-color;
}
}
.thead-light {
td,
th {
background-color: $table-thead-bg;
color: $table-thead-color;
}
}
}
.table-dark {
background-color: $table-dark-bg;
color: $table-dark-color;
&.table-bordered {
border-color: $table-dark-border-color;
}
&.table-striped {
tbody tr:nth-of-type(odd) {
background-color: $table-dark-bg-accent;
}
}
&.table-hover {
tbody tr {
@include hover {
background-color: $table-dark-bg-hover;
}
}
}
tbody,
tfoot,
thead {
color: inherit;
}
td,
th,
.table {
border-color: $table-dark-border-color;
}
}

130
frontend/scss/material/_data-table.scss
View File

@ -1,5 +1,4 @@
.table {
background-color: $table-bg;
border: 0;
margin-bottom: $table-margin-y;
max-width: 100%;
@ -7,7 +6,6 @@
td,
th {
border-top: $table-border-width solid $table-border-color;
line-height: $table-line-height;
padding-right: $table-cell-padding-x;
padding-left: $table-cell-padding-x;
@ -23,8 +21,6 @@
}
tbody {
color: $table-tbody-color;
td,
th {
font-size: $table-tbody-font-size;
@ -36,8 +32,6 @@
}
tfoot {
color: $table-tfoot-color;
td,
th {
font-size: $table-tfoot-font-size;
@ -49,8 +43,6 @@
}
thead {
color: $table-thead-color;
td,
th {
font-size: $table-thead-font-size;
@ -109,10 +101,6 @@
}
}
.table {
border-top: $table-border-width solid $table-border-color;
}
> :first-child > tr:first-child {
td,
th {
@ -130,8 +118,6 @@
}
.table-bordered {
border: $table-border-width solid $table-border-color;
.card > & {
border: 0;
}
@ -179,122 +165,6 @@
}
}
.table-striped {
tbody tr:nth-of-type(#{$table-striped-order}) {
background-color: $table-bg-accent;
}
}
// Placed here because it has to come after the striping styles
.table-hover {
tbody tr {
@include hover {
background-color: $table-bg-hover;
}
}
}
// Table background
@each $color, $values in $theme-colors {
.table-#{$color} {
&,
> td,
> th {
background-color: theme-color-light($color);
color: color-yiq(theme-color-light($color));
}
.table-hover & {
@include hover {
&,
> td,
> th {
background-color: theme-color($color);
color: color-yiq(theme-color($color));
}
}
}
}
}
.table-active {
&,
> td,
> th {
background-color: $table-bg-active;
color: color-yiq($table-bg-active);
}
.table-hover & {
@include hover {
&,
> td,
> th {
background-color: $table-bg-active-hover;
color: color-yiq($table-bg-active-hover);
}
}
}
}
// stylelint-disable-next-line no-duplicate-selectors
.table {
.thead-dark {
td,
th {
background-color: $table-dark-bg;
color: $table-dark-color;
}
}
.thead-light {
td,
th {
background-color: $table-thead-bg;
color: $table-thead-color;
}
}
}
.table-dark {
background-color: $table-dark-bg;
color: $table-dark-color;
&.table-bordered {
border-color: $table-dark-border-color;
}
&.table-striped {
tbody tr:nth-of-type(odd) {
background-color: $table-dark-bg-accent;
}
}
&.table-hover {
tbody tr {
@include hover {
background-color: $table-dark-bg-hover;
}
}
}
tbody,
tfoot,
thead {
color: inherit;
}
td,
th,
.table {
border-color: $table-dark-border-color;
}
}
// Table responsive
.table-responsive {
@each $breakpoint in map-keys($grid-breakpoints) {
$next: breakpoint-next($breakpoint);

37
frontend/scss/material/_dialog-colors.scss Normal file
View File

@ -0,0 +1,37 @@
.modal-backdrop {
background-color: $dialog-backdrop-bg;
}
.modal-content {
background-color: $dialog-content-bg;
}
.modal-footer {
.btn {
background-color: transparent;
@each $color, $values in $theme-colors {
&-#{$color} {
@include plain-active-focus-hover {
color: theme-color($color);
}
&.disabled,
&:disabled {
color: $btn-color-disabled;
}
}
}
&.active,
&:active {
background-color: $btn-bg-active;
box-shadow: none;
}
&.disabled,
&:disabled {
background-color: transparent;
}
}
}

22
frontend/scss/material/_dialog.scss
View File

@ -36,7 +36,6 @@
// Backdrop
.modal-backdrop {
background-color: $dialog-backdrop-bg;
position: fixed;
top: 0;
right: 0;
@ -50,7 +49,6 @@
.modal-content {
@include border-radius($dialog-border-radius);
background-color: $dialog-content-bg;
box-shadow: map-get($dialog-elevation-shadow, shadow);
display: flex;
flex-direction: column;
@ -122,7 +120,6 @@
}
.btn {
background-color: transparent;
box-shadow: none;
max-width: calc(50% - #{$dialog-footer-inner-spacer-x});
min-width: $dialog-footer-btn-min-width;
@ -131,29 +128,10 @@
padding-left: $dialog-footer-inner-spacer-x;
text-overflow: ellipsis;
@each $color, $values in $theme-colors {
&-#{$color} {
@include plain-active-focus-hover {
color: theme-color($color);
}
&.disabled,
&:disabled {
color: $btn-color-disabled;
}
}
}
&.active,
&:active {
background-color: $btn-bg-active;
box-shadow: none;
}
&.disabled,
&:disabled {
background-color: transparent;
}
}
> * {

78
frontend/scss/material/_expansion-panel-colors.scss Normal file
View File

@ -0,0 +1,78 @@
.list-group-item {
background-color: $expansion-panel-bg;
color: $expansion-panel-color;
@include active-focus-hover {
color: $expansion-panel-color;
}
&.active {
background-color: $expansion-panel-bg-active;
color: $expansion-panel-color;
}
&.disabled,
&:disabled {
background-color: $expansion-panel-bg;
color: $expansion-panel-color-disabled;
}
}
.list-group-item-action {
color: $expansion-panel-color;
@include active-focus-hover {
background-color: $expansion-panel-bg-active;
color: $expansion-panel-color;
}
&.disabled,
&:disabled {
background-color: $expansion-panel-bg;
color: $expansion-panel-color-disabled;
}
}
@each $color, $values in $theme-colors {
.list-group-item-#{$color} {
background-color: theme-color-light($color);
color: color-yiq(theme-color-light($color));
&.active {
background-color: theme-color($color);
color: color-yiq(theme-color($color));
}
&.list-group-item-action {
@include active-focus-hover {
background-color: theme-color($color);
color: color-yiq(theme-color($color));
}
}
}
}
.expansion-panel-toggler {
color: inherit;
@include active-focus-hover {
background-color: $expansion-panel-bg-active;
color: $expansion-panel-color;
}
&.disabled,
&:disabled {
background-color: $expansion-panel-bg;
color: $expansion-panel-color-disabled;
}
}
.list-group-flush {
.list-group-item {
border-top: $expansion-panel-border-width solid $expansion-panel-border-color;
&:last-child {
border-bottom: $expansion-panel-border-width solid $expansion-panel-border-color;
}
}
}

58
frontend/scss/material/_expansion-panel.scss
View File

@ -1,5 +1,3 @@
// Todo: expansion panel with different background colours
.list-group {
display: flex;
flex-direction: column;
@ -10,9 +8,7 @@
.list-group-item {
@include transition-standard(background-color, color);
background-color: $expansion-panel-bg;
box-shadow: map-get($expansion-panel-elevation-shadow, shadow);
color: $expansion-panel-color;
display: block;
font-size: $expansion-panel-font-size;
line-height: $expansion-panel-line-height;
@ -21,21 +17,9 @@
position: relative;
@include active-focus-hover {
color: $expansion-panel-color;
text-decoration: none;
}
&.active {
background-color: $expansion-panel-bg-active;
color: $expansion-panel-color;
}
&.disabled,
&:disabled {
background-color: $expansion-panel-bg;
color: $expansion-panel-color-disabled;
}
&:last-child {
@include border-bottom-radius($expansion-panel-border-radius);
}
@ -47,46 +31,18 @@
}
.list-group-item-action {
color: $expansion-panel-color;
text-align: inherit;
width: 100%;
@include active-focus-hover {
background-color: $expansion-panel-bg-active;
color: $expansion-panel-color;
text-decoration: none;
}
&.disabled,
&:disabled {
background-color: $expansion-panel-bg;
color: $expansion-panel-color-disabled;
}
&:focus {
outline: 0;
}
}
@each $color, $values in $theme-colors {
.list-group-item-#{$color} {
background-color: theme-color-light($color);
color: color-yiq(theme-color-light($color));
&.active {
background-color: theme-color($color);
color: color-yiq(theme-color($color));
}
&.list-group-item-action {
@include active-focus-hover {
background-color: theme-color($color);
color: color-yiq(theme-color($color));
}
}
}
}
// Expansion panel
.expansion-panel {
@ -194,7 +150,6 @@
.expansion-panel-toggler {
align-items: center;
color: inherit;
display: flex;
justify-content: space-between;
min-height: $expansion-panel-height;
@ -203,17 +158,9 @@
width: 100%;
@include active-focus-hover {
background-color: $expansion-panel-bg-active;
color: $expansion-panel-color;
text-decoration: none;
}
&.disabled,
&:disabled {
background-color: $expansion-panel-bg;
color: $expansion-panel-color-disabled;
}
&:focus {
outline: 0;
}
@ -236,11 +183,6 @@
}
.list-group-item {
border-top: $expansion-panel-border-width solid $expansion-panel-border-color;
box-shadow: none;
&:last-child {
border-bottom: $expansion-panel-border-width solid $expansion-panel-border-color;
}
}
}

72
frontend/scss/material/_menu-colors.scss Normal file
View File

@ -0,0 +1,72 @@
.dropdown-menu {
color: inherit;
&::before {
background-color: $menu-bg;
}
}
.dropdown-divider {
@include nav-divider($menu-divider-bg);
}
.dropdown-header {
color: $menu-header-color;
}
.dropdown-item {
color: $menu-link-color;
@include active-focus-hover {
background-color: $menu-link-bg-hover;
color: $menu-link-color;
}
&.active {
background-color: $menu-link-bg-hover;
}
&.disabled,
&:disabled {
background-color: transparent;
color: $menu-link-color-disabled;
}
}
.dropdown-item-text {
color: $menu-link-color;
}
// Toggle
.dropdown-toggle {
&::after {
border-top: $caret-width solid $text-color;
border-right: $caret-width solid transparent;
border-bottom: 0;
border-left: $caret-width solid transparent;
.dropright & {
border-top: $caret-width solid transparent;
border-right: 0;
border-bottom: $caret-width solid transparent;
border-left: $caret-width solid $text-color;
}
.dropup & {
border-top: 0;
border-right: $caret-width solid transparent;
border-bottom: $caret-width solid $text-color;
border-left: $caret-width solid transparent;
}
}
.dropleft & {
&::before {
border-top: $caret-width solid transparent;
border-right: $caret-width solid $text-color;
border-bottom: $caret-width solid transparent;
border-left: 0;
}
}
}

43
frontend/scss/material/_menu.scss
View File

@ -10,7 +10,6 @@
@include text-align(left);
background-color: transparent;
color: inherit;
display: none;
float: left;
font-size: $menu-font-size;
@ -70,7 +69,6 @@
&::before {
@include border-radius($menu-border-radius);
background-color: $menu-bg;
box-shadow: map-get($menu-elevation-shadow, shadow);
content: '';
display: block;
@ -381,16 +379,9 @@
}
}
// Divider
.dropdown-divider {
@include nav-divider($menu-divider-bg);
}
// Header
.dropdown-header {
color: $menu-header-color;
display: block;
font-size: $menu-font-size;
font-weight: bolder;
@ -415,7 +406,6 @@
background: none;
border: 0;
clear: both;
color: $menu-link-color;
display: block;
font-weight: inherit;
padding: $menu-link-padding-y $menu-link-padding-x;
@ -426,19 +416,11 @@
width: 100%;
@include active-focus-hover {
background-color: $menu-link-bg-hover;
color: $menu-link-color;
text-decoration: none;
}
&.active {
background-color: $menu-link-bg-hover;
}
&.disabled,
&:disabled {
background-color: transparent;
color: $menu-link-color-disabled;
pointer-events: none;
}
@ -449,7 +431,6 @@
}
.dropdown-item-text {
color: $menu-link-color;
display: block;
font-weight: inherit;
padding: $menu-link-padding-y $menu-link-padding-x;
@ -469,25 +450,6 @@
margin-left: $caret-spacing;
vertical-align: $caret-vertical-align;
content: "";
border-top: $caret-width solid $text-color;
border-right: $caret-width solid transparent;
border-bottom: 0;
border-left: $caret-width solid transparent;
.dropright & {
border-top: $caret-width solid transparent;
border-right: 0;
border-bottom: $caret-width solid transparent;
border-left: $caret-width solid $text-color;
}
.dropup & {
border-top: 0;
border-right: $caret-width solid transparent;
border-bottom: $caret-width solid $text-color;
border-left: $caret-width solid transparent;
}
}
&:empty::after {
@ -504,11 +466,6 @@
margin-right: $caret-spacing;
vertical-align: $caret-vertical-align;
content: "";
border-top: $caret-width solid transparent;
border-right: $caret-width solid $text-color;
border-bottom: $caret-width solid transparent;
border-left: 0;
}
}
}

89
frontend/scss/material/_navdrawer-colors.scss Normal file
View File

@ -0,0 +1,89 @@
.navdrawer-backdrop {
background-color: $navdrawer-backdrop-bg;
}
.navdrawer-content {
background-color: $navdrawer-content-bg;
}
.navdrawer-divider {
@include nav-divider($navdrawer-divider-bg);
}
.navdrawer-header {
background-color: $navdrawer-header-bg;
border-bottom: $navdrawer-header-border-width solid $navdrawer-header-border-color;
}
.navdrawer-subheader {
color: $navdrawer-subheader-color;
}
.navdrawer-nav {
.nav-link {
color: $navdrawer-nav-link-color;
@include active-focus-hover {
background-color: $navdrawer-nav-link-bg-hover;
}
&.active,
&:active {
color: $navdrawer-nav-link-color-active;
}
&.disabled {
background-color: transparent;
color: $navdrawer-nav-link-color-disabled;
}
}
.active > .nav-link {
color: $navdrawer-nav-link-color-active;
}
}
.navdrawer-nav-icon {
color: $navdrawer-nav-icon-color;
width: $navdrawer-nav-icon-width;
.nav-link:active &,
.nav-link.active & {
color: $navdrawer-nav-link-color-active;
}
}
.active > .nav-link .navdrawer-nav-icon {
color: $navdrawer-nav-link-color-active;
}
// Permanent, persistent and temporary variations
@each $breakpoint in map-keys($grid-breakpoints) {
$next: breakpoint-next($breakpoint);
$infix: breakpoint-infix($next);
.navdrawer-permanent#{$infix} {
border-right: $navdrawer-border-width solid $navdrawer-border-color;
&.navdrawer-right {
border-left: $navdrawer-border-width solid $navdrawer-border-color;
}
}
.navdrawer-persistent#{$infix} {
&.navdrawer-persistent-clipped {
border-top: $navdrawer-border-width solid $navdrawer-border-color;
}
&.navdrawer-right {
.navdrawer-content {
border-left: $navdrawer-border-width solid $navdrawer-border-color;
}
}
.navdrawer-content {
border-right: $navdrawer-border-width solid $navdrawer-border-color;
}
}
}

43
frontend/scss/material/_navdrawer.scss
View File

@ -15,7 +15,6 @@
.navdrawer-backdrop {
@include transition-standard-complex(opacity);
background-color: $navdrawer-backdrop-bg;
opacity: 0;
position: fixed;
top: 0;
@ -34,7 +33,6 @@
.navdrawer-content {
@include transition-sharp(box-shadow, transform);
background-color: $navdrawer-content-bg;
max-width: calc(100% - #{$navdrawer-gutter-width});
overflow-x: hidden;
overflow-y: auto;
@ -67,13 +65,7 @@
padding-left: $navdrawer-inner-spacer-x;
}
.navdrawer-divider {
@include nav-divider($navdrawer-divider-bg);
}
.navdrawer-header {
background-color: $navdrawer-header-bg;
border-bottom: $navdrawer-header-border-width solid $navdrawer-header-border-color;
display: block;
margin-bottom: $navdrawer-inner-spacer-y;
padding: $toolbar-padding-y $navdrawer-inner-spacer-x;
@ -82,7 +74,6 @@
.navdrawer-subheader {
@include text-truncate;
color: $navdrawer-subheader-color;
display: block;
font-weight: $navdrawer-subheader-font-weight;
height: $navdrawer-subheader-height;
@ -115,48 +106,19 @@
@include text-truncate;
@include transition-standard(background-color, color);
color: $navdrawer-nav-link-color;
font-size: $navdrawer-nav-link-font-size;
font-weight: $navdrawer-nav-link-font-weight;
line-height: 1;
padding: (($navdrawer-nav-link-height - $navdrawer-nav-link-font-size) / 2) $navdrawer-inner-spacer-x;
@include active-focus-hover {
background-color: $navdrawer-nav-link-bg-hover;
}
&.active,
&:active {
color: $navdrawer-nav-link-color-active;
}
&.disabled {
background-color: transparent;
color: $navdrawer-nav-link-color-disabled;
}
&:focus {
outline: 0;
}
}
.active > .nav-link {
color: $navdrawer-nav-link-color-active;
}
}
.navdrawer-nav-icon {
color: $navdrawer-nav-icon-color;
width: $navdrawer-nav-icon-width;
.nav-link:active &,
.nav-link.active & {
color: $navdrawer-nav-link-color-active;
}
}
.active > .nav-link .navdrawer-nav-icon {
color: $navdrawer-nav-link-color-active;
}
// Permanent, persistent and temporary variations
@ -182,7 +144,6 @@
}
.navdrawer-permanent#{$infix} {
border-right: $navdrawer-border-width solid $navdrawer-border-color;
display: block !important; // stylelint-disable-line declaration-no-important
right: auto;
width: $navdrawer-width;
@ -207,7 +168,6 @@
&.navdrawer-right {
border-right: 0;
border-left: $navdrawer-border-width solid $navdrawer-border-color;
right: 0;
left: auto;
}
@ -230,7 +190,6 @@
z-index: auto;
&.navdrawer-persistent-clipped {
border-top: $navdrawer-border-width solid $navdrawer-border-color;
margin-top: ($navdrawer-border-width * -1);
top: $toolbar-height;
z-index: (map-get($toolbar-elevation-shadow, elevation) - 1);
@ -242,7 +201,6 @@
.navdrawer-content {
border-right: 0;
border-left: $navdrawer-border-width solid $navdrawer-border-color;
}
}
@ -251,7 +209,6 @@
}
.navdrawer-content {
border-right: $navdrawer-border-width solid $navdrawer-border-color;
max-width: none;
position: absolute;
width: 100%;

51
frontend/scss/material/_picker-colors.scss Normal file
View File

@ -0,0 +1,51 @@
.picker-holder {
background-color: $picker-holder-bg;
}
.picker-date-display {
background-color: $picker-header-bg;
color: color-yiq($picker-header-bg);
}
.picker-box {
background-color: $picker-content-bg;
}
.picker-input {
&.form-control[readonly] {
color: inherit;
}
&.picker-input-active {
border-bottom-color: $textfield-border-color-focus;
}
}
.picker-day {
&.picker-day-selected {
background-color: $picker-day-bg-selected;
color: color-yiq($picker-day-bg-selected);
}
}
.picker-day-disabled {
color: $picker-day-color-disabled;
}
.picker-day-today {
color: $picker-day-color-today;
}
.picker-weekday {
color: $picker-weekday-color;
}
.picker-select-month,
.picker-select-year {
background-color: $picker-select-bg;
color: $textfield-color;
@include media-moz-webkit {
background-image: $caret-bg;
}
}

23
frontend/scss/material/_picker.scss
View File

@ -40,7 +40,6 @@
@include transition-standard(opacity);
align-items: center;
background-color: $picker-holder-bg;
display: flex;
justify-content: center;
min-height: 100%;
@ -177,8 +176,6 @@
.picker-date-display {
@include border-top-radius($picker-border-radius);
background-color: $picker-header-bg;
color: color-yiq($picker-header-bg);
padding: $picker-header-padding-y $picker-header-padding-x;
@media (orientation: landscape) {
@ -217,7 +214,6 @@
.picker-box {
@include border-bottom-radius($picker-border-radius);
background-color: $picker-content-bg;
overflow: hidden;
@media (orientation: landscape) {
@ -230,13 +226,8 @@
.picker-input {
&.form-control[readonly] {
border-bottom-style: solid;
color: inherit;
cursor: text;
}
&.picker-input-active {
border-bottom-color: $textfield-border-color-focus;
}
}
// Table
@ -254,15 +245,6 @@
margin-right: ($picker-inner-spacer-x / 2);
margin-left: ($picker-inner-spacer-x / 2);
}
&.picker-day-selected {
background-color: $picker-day-bg-selected;
color: color-yiq($picker-day-bg-selected);
}
}
.picker-day-disabled {
color: $picker-day-color-disabled;
}
.picker-day-outfocus {
@ -270,7 +252,6 @@
}
.picker-day-today {
color: $picker-day-color-today;
font-weight: bolder;
}
@ -294,7 +275,6 @@
}
.picker-weekday {
color: $picker-weekday-color;
height: $picker-cell-size;
vertical-align: middle;
width: $picker-cell-size;
@ -306,13 +286,11 @@
@include transition-standard(opacity);
appearance: none;
background-color: $picker-select-bg;
background-image: none;
background-position: 100% 50%;
background-size: auto 100%;
border: 0;
box-shadow: none;
color: $textfield-color;
display: inline-block;
font-size: inherit;
height: ($picker-cell-size / 2);
@ -325,7 +303,6 @@
}
@include media-moz-webkit {
background-image: $caret-bg;
background-repeat: no-repeat;
}

24
frontend/scss/material/_progress-circular-colors.scss Normal file
View File

@ -0,0 +1,24 @@
.progress-circular-gap {
border-top: ($progress-circular-spinner-width / 2) solid $progress-circular-bg;
}
.progress-circular-spinner {
border: $progress-circular-spinner-width solid $progress-circular-bg;
}
@each $color, $values in $theme-colors {
.progress-circular-#{$color} {
.progress-circular-gap,
.progress-circular-spinner {
border-top-color: theme-color($color);
}
.progress-circular-left .progress-circular-spinner {
border-left-color: theme-color($color);
}
.progress-circular-right .progress-circular-spinner {
border-right-color: theme-color($color);
}
}
}

19
frontend/scss/material/_progress-circular.scss
View File

@ -5,7 +5,6 @@
}
.progress-circular-gap {
border-top: ($progress-circular-spinner-width / 2) solid $progress-circular-bg;
position: absolute;
top: 0;
right: ($progress-circular-height / 2 - $progress-circular-spinner-width / 4);
@ -38,7 +37,6 @@
}
.progress-circular-spinner {
border: $progress-circular-spinner-width solid $progress-circular-bg;
border-bottom-color: transparent;
border-radius: 50%;
height: $progress-circular-height;
@ -124,20 +122,3 @@
transform: rotate(360deg);
}
}
@each $color, $values in $theme-colors {
.progress-circular-#{$color} {
.progress-circular-gap,
.progress-circular-spinner {
border-top-color: theme-color($color);
}
.progress-circular-left .progress-circular-spinner {
border-left-color: theme-color($color);
}
.progress-circular-right .progress-circular-spinner {
border-right-color: theme-color($color);
}
}
}

63
frontend/scss/material/_progress-colors.scss Normal file
View File

@ -0,0 +1,63 @@
.progress-bar {
border-bottom: $progress-bar-height solid $progress-bar-bg;
@each $color, $values in $theme-colors {
&.bg-#{$color} {
background-color: transparent !important; // stylelint-disable-line declaration-no-important
border-bottom-color: theme-color($color);
&::after {
background-color: theme-color-light($color);
}
}
}
&::after {
background-color: $progress-bg;
}
}
.progress-bar-animated,
.progress-bar-striped {
@each $color, $values in $theme-colors {
&.bg-#{$color}::before {
// stylelint-disable value-no-vendor-prefix
background-image: repeating-radial-gradient(#{$progress-bar-height / 2} #{$progress-bar-height / 2}, theme-color-light($color), theme-color-light($color) #{$progress-bar-height / 2}, transparent #{$progress-bar-height / 2}, transparent 100%);
background-image: -webkit-repeating-radial-gradient(#{$progress-bar-height / 2} #{$progress-bar-height / 2}, theme-color-light($color), theme-color-light($color) #{$progress-bar-height / 2}, transparent #{$progress-bar-height / 2}, transparent 100%);
background-image: -moz-repeating-radial-gradient(#{$progress-bar-height / 2} #{$progress-bar-height / 2}, theme-color-light($color), theme-color-light($color) #{$progress-bar-height / 2}, transparent #{$progress-bar-height / 2}, transparent 100%);
// stylelint-enable
}
}
&::before {
// stylelint-disable value-no-vendor-prefix
background-image: repeating-radial-gradient(#{$progress-bar-height / 2} #{$progress-bar-height / 2}, #{$progress-bg}, #{$progress-bg} #{$progress-bar-height / 2}, transparent #{$progress-bar-height / 2}, transparent 100%);
background-image: -webkit-repeating-radial-gradient(#{$progress-bar-height / 2} #{$progress-bar-height / 2}, #{$progress-bg}, #{$progress-bg} #{$progress-bar-height / 2}, transparent #{$progress-bar-height / 2}, transparent 100%);
background-image: -moz-repeating-radial-gradient(#{$progress-bar-height / 2} #{$progress-bar-height / 2}, #{$progress-bg}, #{$progress-bg} #{$progress-bar-height / 2}, transparent #{$progress-bar-height / 2}, transparent 100%);
// stylelint-enable
}
}
.progress-bar-indeterminate {
border-bottom-color: $progress-bg;
@each $color, $values in $theme-colors {
&.bg-#{$color} {
border-bottom-color: theme-color-light($color);
&::after,
&::before {
background-color: theme-color($color);
}
&::before {
background-image: none;
}
}
}
&::after,
&::before {
background-color: $progress-bar-bg;
}
}

46
frontend/scss/material/_progress.scss
View File

@ -10,21 +10,7 @@
}
.progress-bar {
border-bottom: $progress-bar-height solid $progress-bar-bg;
@each $color, $values in $theme-colors {
&.bg-#{$color} {
background-color: transparent !important; // stylelint-disable-line declaration-no-important
border-bottom-color: theme-color($color);
&::after {
background-color: theme-color-light($color);
}
}
}
&::after {
background-color: $progress-bg;
content: '';
display: block;
height: $progress-bar-height;
@ -61,16 +47,6 @@
box-sizing: content-box;
position: relative;
@each $color, $values in $theme-colors {
&.bg-#{$color}::before {
// stylelint-disable value-no-vendor-prefix
background-image: repeating-radial-gradient(#{$progress-bar-height / 2} #{$progress-bar-height / 2}, theme-color-light($color), theme-color-light($color) #{$progress-bar-height / 2}, transparent #{$progress-bar-height / 2}, transparent 100%);
background-image: -webkit-repeating-radial-gradient(#{$progress-bar-height / 2} #{$progress-bar-height / 2}, theme-color-light($color), theme-color-light($color) #{$progress-bar-height / 2}, transparent #{$progress-bar-height / 2}, transparent 100%);
background-image: -moz-repeating-radial-gradient(#{$progress-bar-height / 2} #{$progress-bar-height / 2}, theme-color-light($color), theme-color-light($color) #{$progress-bar-height / 2}, transparent #{$progress-bar-height / 2}, transparent 100%);
// stylelint-enable
}
}
&::after {
@include border-right-radius($progress-bar-border-radius);
@ -79,11 +55,6 @@
}
&::before {
// stylelint-disable value-no-vendor-prefix
background-image: repeating-radial-gradient(#{$progress-bar-height / 2} #{$progress-bar-height / 2}, #{$progress-bg}, #{$progress-bg} #{$progress-bar-height / 2}, transparent #{$progress-bar-height / 2}, transparent 100%);
background-image: -webkit-repeating-radial-gradient(#{$progress-bar-height / 2} #{$progress-bar-height / 2}, #{$progress-bg}, #{$progress-bg} #{$progress-bar-height / 2}, transparent #{$progress-bar-height / 2}, transparent 100%);
background-image: -moz-repeating-radial-gradient(#{$progress-bar-height / 2} #{$progress-bar-height / 2}, #{$progress-bg}, #{$progress-bg} #{$progress-bar-height / 2}, transparent #{$progress-bar-height / 2}, transparent 100%);
// stylelint-enable
background-position: 0 0;
background-repeat: repeat-x;
background-size: ($progress-bar-height * 3) ($progress-bar-height * 3);
@ -111,25 +82,9 @@
// Indeterminate
.progress-bar-indeterminate {
border-bottom-color: $progress-bg;
position: relative;
width: 100%;
@each $color, $values in $theme-colors {
&.bg-#{$color} {
border-bottom-color: theme-color-light($color);
&::after,
&::before {
background-color: theme-color($color);
}
&::before {
background-image: none;
}
}
}
&::after,
&::before {
@include border-radius($progress-bar-border-radius);
@ -137,7 +92,6 @@
animation-duration: 2s;
animation-iteration-count: infinite;
animation-timing-function: linear;
background-color: $progress-bar-bg;
width: 0%;
}

59
frontend/scss/material/_selection-control-colors.scss Normal file
View File

@ -0,0 +1,59 @@
.custom-control-label {
color: inherit;
&::before {
color: $selection-control-color;
}
}
.custom-control-input {
&:checked ~ {
.custom-control-label {
&::before {
background-color: $selection-control-color-active;
}
}
}
&:disabled ~ {
.custom-control-label {
background-color: $selection-control-color-disabled;
}
}
}
.custom-switch {
.custom-control-label {
&::after {
background-color: $selection-control-thumb-bg;
}
}
.custom-control-input {
&:checked {
~ .custom-control-label {
&::after {
background-color: $selection-control-color-active;
}
}
~ .custom-control-track {
background-color: rgba($selection-control-color-active, $selection-control-track-opacity);
}
}
&:disabled {
~ .custom-control-label::after {
background-color: $selection-control-thumb-bg-disabled;
}
~ .custom-control-track {
background-color: $selection-control-track-bg-disabled;
}
}
}
.custom-control-track {
background-color: $selection-control-track-bg;
}
}

33
frontend/scss/material/_selection-control.scss
View File

@ -21,7 +21,6 @@
// Base styles for custom control indicators
.custom-control-label {
color: inherit;
font-size: $textfield-font-size;
line-height: inherit;
margin-bottom: 0;
@ -37,7 +36,6 @@
background-color: currentColor;
border-radius: 50%;
color: $selection-control-color;
content: '';
display: block;
height: ($selection-control-indicator-size * 2);
@ -65,18 +63,8 @@
}
}
&:checked ~ {
.custom-control-label {
&::before {
background-color: $selection-control-color-active;
}
}
}
&:disabled ~ {
.custom-control-label {
background-color: $selection-control-color-disabled;
&::before {
display: none;
}
@ -129,7 +117,6 @@
&::after {
@include transition-standard(background-color, transform);
background-color: $selection-control-thumb-bg;
border-radius: 50%;
box-shadow: $selection-control-thumb-shadow;
content: '';
@ -148,27 +135,8 @@
&::before {
transform: translateX($selection-control-track-width - $selection-control-indicator-size);
}
&::after {
background-color: $selection-control-color-active;
}
// scss-lint:enable
}
~ .custom-control-track {
background-color: rgba($selection-control-color-active, $selection-control-track-opacity);
}
}
&:disabled {
~ .custom-control-label::after {
background-color: $selection-control-thumb-bg-disabled;
}
~ .custom-control-track {
background-color: $selection-control-track-bg-disabled;
}
}
}
@ -176,7 +144,6 @@
@include transition-standard(background-color);
background-clip: content-box;
background-color: $selection-control-track-bg;
border: (($selection-control-indicator-size - $selection-control-track-height) / 2) solid transparent;
border-radius: $selection-control-track-height;
content: '';

70
frontend/scss/material/_slider-colors.scss Normal file
View File

@ -0,0 +1,70 @@
.custom-range {
&:active,
&:focus {
&::-moz-range-track {
background-color: $slider-track-bg-active;
}
&::-ms-fill-upper {
background-color: $slider-track-bg-active;
}
&::-webkit-slider-runnable-track {
background-color: $slider-track-bg-active;
}
}
&:focus {
&::-moz-range-thumb {
box-shadow: 0 0 0 $slider-thumb-size rgba($slider-thumb-bg, $slider-thumb-radial-opacity);
}
&::-ms-range-thumb {
box-shadow: 0 0 0 $slider-thumb-size rgba($slider-thumb-bg, $slider-thumb-radial-opacity);
}
&::-webkit-slider-thumb {
box-shadow: 0 0 0 $slider-thumb-size rgba($slider-thumb-bg, $slider-thumb-radial-opacity);
}
}
&::-moz-range-progress {
background-color: $slider-thumb-bg;
}
&::-moz-range-thumb {
background-color: $slider-thumb-bg;
}
&::-moz-range-track {
background-color: $slider-track-bg;
}
&::-ms-fill-lower {
background-color: $slider-thumb-bg;
}
&::-ms-fill-upper {
background-color: $slider-track-bg;
}
&::-ms-thumb {
background-color: $slider-thumb-bg;
&:active {
box-shadow: 0 0 0 ($slider-thumb-size / 2) $slider-thumb-bg;
}
}
&::-webkit-slider-runnable-track {
background-color: $slider-track-bg;
}
&::-webkit-slider-thumb {
background-color: $slider-thumb-bg;
&:active {
box-shadow: 0 0 0 ($slider-thumb-size / 2) $slider-thumb-bg;
}
}
}

42
frontend/scss/material/_slider.scss
View File

@ -7,45 +7,14 @@
padding-left: 0;
width: 100%;
&:active,
&:focus {
&::-moz-range-track {
background-color: $slider-track-bg-active;
}
&::-ms-fill-upper {
background-color: $slider-track-bg-active;
}
&::-webkit-slider-runnable-track {
background-color: $slider-track-bg-active;
}
}
&:focus {
outline: 0;
&::-moz-range-thumb {
box-shadow: 0 0 0 $slider-thumb-size rgba($slider-thumb-bg, $slider-thumb-radial-opacity);
}
&::-ms-range-thumb {
box-shadow: 0 0 0 $slider-thumb-size rgba($slider-thumb-bg, $slider-thumb-radial-opacity);
}
&::-webkit-slider-thumb {
box-shadow: 0 0 0 $slider-thumb-size rgba($slider-thumb-bg, $slider-thumb-radial-opacity);
}
}
&::-moz-focus-outer {
border: 0;
}
&::-moz-range-progress {
background-color: $slider-thumb-bg;
}
&::-moz-range-thumb {
@include transition-standard(box-shadow, height, width);
@ -53,7 +22,6 @@
-webkit-appearance: none;
appearance: none;
background-color: $slider-thumb-bg;
border: 0;
border-radius: 50%;
height: $slider-thumb-size;
@ -73,7 +41,6 @@
&::-moz-range-track {
@include transition-standard(background-color);
background-color: $slider-track-bg;
border-color: transparent;
border-radius: 0;
color: transparent;
@ -83,14 +50,12 @@
}
&::-ms-fill-lower {
background-color: $slider-thumb-bg;
height: $slider-track-height;
margin-bottom: $slider-track-height;
margin-left: ($slider-thumb-size / 2);
}
&::-ms-fill-upper {
background-color: $slider-track-bg;
height: $slider-track-height;
margin-right: ($slider-thumb-size / 2);
margin-bottom: $slider-track-height;
@ -103,7 +68,6 @@
-webkit-appearance: none;
appearance: none;
background-color: $slider-thumb-bg;
border: 0;
border-radius: 50%;
height: $slider-thumb-size;
@ -111,10 +75,6 @@
margin-left: ($slider-thumb-size / 2);
width: $slider-thumb-size;
&:active {
box-shadow: 0 0 0 ($slider-thumb-size / 2) $slider-thumb-bg;
}
&:focus {
outline: 0;
}
@ -135,7 +95,6 @@
&::-webkit-slider-runnable-track {
@include transition-standard(background-color);
background-color: $slider-track-bg;
border-color: transparent;
border-radius: 0;
color: transparent;
@ -151,7 +110,6 @@
-webkit-appearance: none;
appearance: none;
background-color: $slider-thumb-bg;
border: 0;
border-radius: 50%;
height: $slider-thumb-size;

12
frontend/scss/material/_snackbar-colors.scss Normal file
View File

@ -0,0 +1,12 @@
.snackbar {
background-color: $snackbar-bg;
color: $snackbar-color;
}
.snackbar-btn {
color: $snackbar-btn-color;
@include focus-hover {
color: $snackbar-btn-color-hover;
}
}

4
frontend/scss/material/_snackbar.scss
View File

@ -2,8 +2,6 @@
.snackbar {
align-items: center;
background-color: $snackbar-bg;
color: $snackbar-color;
display: flex;
font-size: $snackbar-font-size;
line-height: $snackbar-line-height;
@ -64,7 +62,6 @@
background-color: transparent;
background-image: none;
border: 0;
color: $snackbar-btn-color;
cursor: pointer;
display: block;
flex-shrink: 0;
@ -77,7 +74,6 @@
white-space: nowrap;
@include focus-hover {
color: $snackbar-btn-color-hover;
text-decoration: none;
}

54
frontend/scss/material/_stepper-colors.scss Normal file
View File

@ -0,0 +1,54 @@
.stepper {
background-color: $stepper-bg;
&::after,
&::before {
border-top: $stepper-border-width solid $stepper-border-color;
}
}
.stepper-horiz {
background-color: $stepper-bg;
&::before {
border-top: $stepper-border-width solid $stepper-border-color;
}
.stepper {
&::after,
&::before {
border-top: $stepper-border-width solid $stepper-border-color;
}
}
}
.stepper-vert {
background-color: $stepper-bg;
.stepper {
&::after,
&::before {
border-left: $stepper-border-width solid $stepper-border-color;
}
}
}
.stepper-icon {
background-color: $stepper-icon-bg;
color: $stepper-icon-color;
.stepper.active &,
.stepper.done & {
background-color: $stepper-icon-bg-active;
color: color-yiq($stepper-icon-bg-active);
}
}
.stepper-text {
color: $stepper-text-color;
.stepper.active &,
.stepper.done & {
color: $stepper-text-color-active;
}
}

21
frontend/scss/material/_stepper.scss
View File

@ -2,7 +2,6 @@
.stepper {
align-items: center;
background-color: $stepper-bg;
display: flex;
flex-shrink: 0;
overflow: hidden;
@ -11,7 +10,6 @@
&::after,
&::before {
border-top: $stepper-border-width solid $stepper-border-color;
content: '';
display: block;
position: absolute;
@ -27,7 +25,6 @@
}
.stepper-horiz {
background-color: $stepper-bg;
display: flex;
justify-content: space-between;
overflow-x: auto;
@ -35,7 +32,6 @@
position: relative;
&::before {
border-top: $stepper-border-width solid $stepper-border-color;
content: '';
display: block;
position: absolute;
@ -47,7 +43,6 @@
.stepper {
&::after,
&::before {
border-top: $stepper-border-width solid $stepper-border-color;
top: 50%;
width: ($stepper-padding-x - $stepper-inner-spacer);
}
@ -63,13 +58,11 @@
}
.stepper-vert {
background-color: $stepper-bg;
position: relative;
.stepper {
&::after,
&::before {
border-left: $stepper-border-width solid $stepper-border-color;
height: ($stepper-padding-y - $stepper-inner-spacer);
left: ($stepper-icon-height / 2 + $stepper-padding-x);
}
@ -87,9 +80,7 @@
// Misc
.stepper-icon {
background-color: $stepper-icon-bg;
border-radius: 50%;
color: $stepper-icon-color;
font-size: $stepper-icon-font-size;
font-weight: $stepper-icon-font-weight;
height: $stepper-icon-height;
@ -100,28 +91,16 @@
vertical-align: middle;
width: $stepper-icon-height;
.stepper.active &,
.stepper.done & {
background-color: $stepper-icon-bg-active;
color: color-yiq($stepper-icon-bg-active);
}
.material-icons {
font-size: 1.333em;
}
}
.stepper-text {
color: $stepper-text-color;
font-size: $stepper-text-font-size;
font-weight: $stepper-text-font-weight;
position: relative;
.stepper.active &,
.stepper.done & {
color: $stepper-text-color-active;
}
.stepper.active & {
font-weight: bolder;
}

33
frontend/scss/material/_tab-colors.scss Normal file
View File

@ -0,0 +1,33 @@
.nav-tabs {
box-shadow: inset 0 ($nav-tab-border-width * -2) 0 ($nav-tab-border-width * -1) $nav-tab-border-color;
.nav-link {
color: $nav-tab-color;
@include active-focus-hover {
background-color: $nav-tab-bg-hover;
}
&.active {
color: $nav-tab-color-active;
}
&.disabled {
color: $nav-tab-color-disabled;
}
&::before {
background-color: $nav-tab-indicator-bg;
}
}
.nav-item.show .nav-link {
background-color: $nav-tab-bg-hover;
}
}
.nav-tabs-material {
.nav-tabs-indicator {
background-color: $nav-tab-indicator-bg;
}
}

13
frontend/scss/material/_tab.scss
View File

@ -1,6 +1,4 @@
.nav-tabs {
box-shadow: inset 0 ($nav-tab-border-width * -2) 0 ($nav-tab-border-width * -1) $nav-tab-border-color;
&.border-0,
&.border-bottom-0 {
box-shadow: none;
@ -9,7 +7,6 @@
.nav-link {
@include transition-standard(background-color, color, opacity);
color: $nav-tab-color;
font-size: $nav-tab-font-size;
font-weight: $nav-tab-font-weight;
line-height: $nav-tab-line-height;
@ -19,18 +16,12 @@
position: relative;
text-transform: uppercase;
@include active-focus-hover {
background-color: $nav-tab-bg-hover;
}
&.active,
&:active {
opacity: 1;
}
&.active {
color: $nav-tab-color-active;
&::before {
opacity: 1;
}
@ -38,14 +29,12 @@
&.disabled {
background-color: transparent;
color: $nav-tab-color-disabled;
opacity: 1;
}
&::before {
@include transition-standard(opacity);
background-color: $nav-tab-indicator-bg;
content: '';
display: block;
height: $nav-tab-indicator-height;
@ -58,7 +47,6 @@
}
.nav-item.show .nav-link {
background-color: $nav-tab-bg-hover;
opacity: 1;
}
}
@ -81,7 +69,6 @@
}
.nav-tabs-indicator {
background-color: $nav-tab-indicator-bg;
display: none;
height: $nav-tab-indicator-height;
position: absolute;

5
frontend/scss/material/_text-field-box-colors.scss Normal file
View File

@ -0,0 +1,5 @@
.textfield-box {
%form-control {
background-color: $textfield-box-bg;
}
}

1
frontend/scss/material/_text-field-box.scss
View File

@ -1,6 +1,5 @@
.textfield-box {
%form-control {
background-color: $textfield-box-bg;
border-radius: $textfield-box-border-radius;
padding: $textfield-box-padding-y $textfield-box-padding-x calc(#{$textfield-box-padding-y} - #{$textfield-border-width});
}

55
frontend/scss/material/_text-field-colors.scss Normal file
View File

@ -0,0 +1,55 @@
%form-control {
border-color: $textfield-border-color;
color: $textfield-color;
@include hover {
border-color: $textfield-border-color-hover;
}
&::placeholder {
color: $textfield-hint-color;
}
&:disabled,
&[readonly] {
color: $textfield-color-disabled;
@include focus-hover {
border-color: $textfield-border-color;
}
}
&:focus {
border-color: $textfield-border-color-focus;
}
}
%form-select {
@include media-moz-webkit {
background-image: $caret-bg;
background-size: $textfield-select-bg-size $textfield-select-bg-size;
padding-right: $textfield-select-bg-size;
}
}
.custom-file-input {
@include focus-hover {
~ .custom-file-label {
border-bottom-color: $textfield-border-color-focus;
box-shadow: inset 0 ($textfield-border-width-focus * -1) 0 ($textfield-border-width * -1) $textfield-border-color-focus;
}
}
}
.custom-file-label {
border-bottom: $textfield-border-width solid $textfield-border-color;
color: $textfield-hint-color;
&::after {
@include setup-material-icons-bg();
@include material-icons-bg($custom-file-button-icon);
}
}
@include form-validation-state('invalid', $form-feedback-invalid-color);
@include form-validation-state('valid', $form-feedback-valid-color);

17
frontend/scss/material/_text-field-floating-label-colors.scss Normal file
View File

@ -0,0 +1,17 @@
.floating-label {
&.is-focused label {
color: $floating-label-color-focus;
}
label {
color: $floating-label-color;
}
%form-control {
&:focus {
&::placeholder {
color: $textfield-hint-color;
}
}
}
}

6
frontend/scss/material/_text-field-floating-label.scss
View File

@ -8,10 +8,6 @@
transform: scale($floating-label-font-size / $textfield-font-size);
}
&.is-focused label {
color: $floating-label-color-focus;
}
&:not(.has-value):not(.is-focused) .form-control {
&[type='date'],
&[type='datetime-local'],
@ -23,7 +19,6 @@
label {
@include transition-standard(color, top, transform);
color: $floating-label-color;
display: block;
font-size: $textfield-font-size;
line-height: $textfield-line-height;
@ -40,7 +35,6 @@
&:focus {
&::placeholder {
color: $textfield-hint-color;
opacity: 1;
}
}

16
frontend/scss/material/_text-field-input-group-colors.scss Normal file
View File

@ -0,0 +1,16 @@
.input-group-text {
color: inherit;
}
.input-group-icon {
color: $textfield-border-color;
@include hover {
color: $textfield-border-color-hover;
}
.floating-label.is-focused ~ &,
.form-control:focus ~ & {
color: $textfield-border-color-focus;
}
}

11
frontend/scss/material/_text-field-input-group.scss
View File

@ -52,7 +52,6 @@
}
.input-group-text {
color: inherit;
font-size: $textfield-font-size;
line-height: $textfield-line-height;
margin-bottom: 0;
@ -81,20 +80,10 @@
.input-group-icon {
@include transition-standard(color);
color: $textfield-border-color;
font-size: ($font-size-base / 1rem * $textfield-font-size);
margin-right: $input-group-inner-spacer-x;
order: -1;
@include hover {
color: $textfield-border-color-hover;
}
.floating-label.is-focused ~ &,
.form-control:focus ~ & {
color: $textfield-border-color-focus;
}
.floating-label:not(.textfield-box) ~ & {
margin-top: $floating-label-font-size;
}

24
frontend/scss/material/_text-field.scss
View File

@ -1,7 +1,6 @@
%form-control {
background-clip: padding-box;
background-color: transparent;
border-color: $textfield-border-color;
border-radius: 4px;
border-style: solid;
border-width: $textfield-border-width;
@ -13,34 +12,26 @@
padding: $textfield-padding-y $textfield-padding-x;
width: 100%;
@include hover {
border-color: $textfield-border-color-hover;
}
&::-ms-expand {
background-color: transparent;
border: 0;
}
&::placeholder {
color: $textfield-hint-color;
opacity: 1;
}
&:disabled,
&[readonly] {
border-style: dotted;
color: $textfield-color-disabled;
opacity: 1;
@include focus-hover {
border-color: $textfield-border-color;
box-shadow: none;
}
}
&:focus {
border-color: $textfield-border-color-focus;
outline: 0;
}
@ -178,21 +169,12 @@ textarea {
position: relative;
width: 100%;
z-index: 1;
@include focus-hover {
~ .custom-file-label {
border-bottom-color: $textfield-border-color-focus;
box-shadow: inset 0 ($textfield-border-width-focus * -1) 0 ($textfield-border-width * -1) $textfield-border-color-focus;
}
}
}
.custom-file-label {
@include text-truncate;
@include transition-standard(border-color, box-shadow);
border-bottom: $textfield-border-width solid $textfield-border-color;
color: $textfield-hint-color;
font-size: $textfield-font-size;
height: $textfield-height;
line-height: $textfield-line-height;
@ -204,7 +186,6 @@ textarea {
&::after {
@include setup-material-icons-bg();
@include material-icons-bg($custom-file-button-icon);
position: absolute;
top: 50%;
@ -255,8 +236,3 @@ textarea {
display: block;
width: 100%;
}
// Validation
@include form-validation-state('invalid', $form-feedback-invalid-color);
@include form-validation-state('valid', $form-feedback-valid-color);

87
frontend/scss/material/_toolbar-colors.scss Normal file
View File

@ -0,0 +1,87 @@
.navbar {
color: $toolbar-color;
.form-control {
background-color: $toolbar-element-bg;
color: inherit;
}
.input-group {
background-color: $toolbar-element-bg;
}
}
.navbar-dark {
color: $toolbar-dark-color;
.form-control,
.input-group,
.navbar-brand::before,
.navbar-nav .show > .nav-link,
.navbar-toggler::before {
background-color: $toolbar-dark-element-bg;
}
.form-control::placeholder,
.navbar-nav .nav-link.disabled {
color: $toolbar-dark-color-lighter;
}
}
.toolbar-waterfall {
&.waterfall {
background-color: $toolbar-waterfall-bg;
}
}
// Misc
.navbar-brand {
color: inherit;
&::before {
background-color: $toolbar-element-bg;
}
@include active-focus-hover {
color: inherit;
}
}
.navbar-text {
color: inherit;
}
.navbar-nav {
.nav-link {
color: inherit;
@include active-focus-hover {
background-color: $toolbar-element-bg;
}
&.disabled {
color: $toolbar-color-lighter;
}
}
.show > .nav-link {
background-color: $toolbar-element-bg;
}
}
.navbar-toggler {
color: inherit;
&::before {
background-color: $toolbar-element-bg;
}
@include active-focus-hover {
color: inherit;
}
}
.navbar-toggler-icon {
@include material-icons-bg($toolbar-toggler-icon);
}

37
frontend/scss/material/_toolbar.scss
View File

@ -1,6 +1,5 @@
.navbar {
align-items: center;
color: $toolbar-color;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
@ -18,9 +17,7 @@
@include border-radius($toolbar-element-border-radius);
@include transition-standard(opacity);
background-color: $toolbar-element-bg;
border: 0;
color: inherit;
opacity: $toolbar-element-opacity;
padding: (($textfield-height - $textfield-font-size * $textfield-line-height) / 2) $toolbar-inner-spacer-x;
@ -44,7 +41,6 @@
@include border-radius($toolbar-element-border-radius);
@include transition-standard(opacity);
background-color: $toolbar-element-bg;
opacity: $toolbar-element-opacity;
@include focus-hover {
@ -109,23 +105,6 @@
}
}
.navbar-dark {
color: $toolbar-dark-color;
.form-control,
.input-group,
.navbar-brand::before,
.navbar-nav .show > .nav-link,
.navbar-toggler::before {
background-color: $toolbar-dark-element-bg;
}
.form-control::placeholder,
.navbar-nav .nav-link.disabled {
color: $toolbar-dark-color-lighter;
}
}
.navbar-fixed-bottom,
.navbar-fixed-top {
box-shadow: map-get($toolbar-elevation-shadow, shadow);
@ -167,7 +146,6 @@
z-index: map-get($toolbar-elevation-shadow, elevation);
&.waterfall {
background-color: $toolbar-waterfall-bg;
box-shadow: map-get($toolbar-elevation-shadow, shadow);
position: fixed;
}
@ -179,20 +157,17 @@
@include typography-title;
align-items: center;
color: inherit;
display: block;
position: relative;
white-space: nowrap;
@include active-focus-hover {
color: inherit;
text-decoration: none;
}
&::before {
@include transition-standard(opacity);
background-color: $toolbar-element-bg;
content: '';
display: block;
opacity: 0;
@ -222,7 +197,6 @@
.navbar-text {
align-items: center;
color: inherit;
display: inline-flex;
flex-wrap: wrap;
height: $toolbar-element-height;
@ -241,7 +215,6 @@
@include border-radius($toolbar-element-border-radius);
@include transition-standard(background-color, opacity);
color: inherit;
font-size: $toolbar-link-font-size;
height: $toolbar-link-height;
line-height: $toolbar-link-line-height;
@ -249,7 +222,6 @@
padding: $toolbar-link-padding-y $toolbar-link-padding-x;
@include active-focus-hover {
background-color: $toolbar-element-bg;
opacity: 1;
}
@ -260,7 +232,6 @@
&.disabled {
background-color: transparent;
color: $toolbar-color-lighter;
}
&:focus {
@ -272,10 +243,6 @@
.show > .nav-link {
opacity: 1;
}
.show > .nav-link {
background-color: $toolbar-element-bg;
}
}
// Toggleable
@ -331,7 +298,6 @@
background-color: transparent;
border: 0;
border-radius: 50%;
color: inherit;
display: inline-flex;
flex-shrink: 0;
height: $toolbar-element-height;
@ -342,7 +308,6 @@
width: $toolbar-element-height;
@include active-focus-hover {
color: inherit;
text-decoration: none;
&::before {
@ -353,7 +318,6 @@
&::before {
@include transition-standard(opacity);
background-color: $toolbar-element-bg;
border-radius: 50%;
content: '';
display: block;
@ -377,5 +341,4 @@
.navbar-toggler-icon {
display: block;
@include setup-material-icons-bg();
@include material-icons-bg($toolbar-toggler-icon);
}

36
frontend/scss/material/_tooltip-colors.scss Normal file
View File

@ -0,0 +1,36 @@
.bs-tooltip-top {
.arrow {
&::before {
border-top-color: $tooltip-arrow-color;
}
}
}
.bs-tooltip-right {
.arrow {
&::before {
border-right-color: $tooltip-arrow-color;
}
}
}
.bs-tooltip-bottom {
.arrow {
&::before {
border-bottom-color: $tooltip-arrow-color;
}
}
}
.bs-tooltip-left {
.arrow {
&::before {
border-left-color: $tooltip-arrow-color;
}
}
}
.tooltip-inner {
color: $tooltip-color;
background-color: $tooltip-bg;
}

6
frontend/scss/material/_tooltip.scss
View File

@ -41,7 +41,6 @@
&::before {
top: 0;
border-width: $tooltip-arrow-height ($tooltip-arrow-width / 2) 0;
border-top-color: $tooltip-arrow-color;
}
}
}
@ -57,7 +56,6 @@
&::before {
right: 0;
border-width: ($tooltip-arrow-width / 2) $tooltip-arrow-height ($tooltip-arrow-width / 2) 0;
border-right-color: $tooltip-arrow-color;
}
}
}
@ -71,7 +69,6 @@
&::before {
bottom: 0;
border-width: 0 ($tooltip-arrow-width / 2) $tooltip-arrow-height;
border-bottom-color: $tooltip-arrow-color;
}
}
}
@ -87,7 +84,6 @@
&::before {
left: 0;
border-width: ($tooltip-arrow-width / 2) 0 ($tooltip-arrow-width / 2) $tooltip-arrow-height;
border-left-color: $tooltip-arrow-color;
}
}
}
@ -114,8 +110,6 @@
.tooltip-inner {
max-width: $tooltip-max-width;
padding: $tooltip-padding-y $tooltip-padding-x;
color: $tooltip-color;
text-align: center;
background-color: $tooltip-bg;
@include border-radius($tooltip-border-radius);
}

14
frontend/scss/style.scss Normal file
View File

@ -0,0 +1,14 @@
@at-root {
$theme: 'light';
@import 'common';
}
body.theme-light {
$theme: 'light';
@import 'common-colors';
}
body.theme-dark {
$theme: 'dark';
@import 'common-colors';
}

0
frontend/scss/utilities/_background.scss → frontend/scss/utilities/_background-colors.scss
View File

69
frontend/scss/utilities/_border-colors.scss Normal file
View File

@ -0,0 +1,69 @@
// stylelint-disable declaration-no-important
// Border
.border {
border: $border-width solid $border-color !important;
}
.border-top {
border-top: $border-width solid $border-color !important;
}
.border-right {
border-right: $border-width solid $border-color !important;
}
.border-bottom {
border-bottom: $border-width solid $border-color !important;
}
.border-left {
border-left: $border-width solid $border-color !important;
}
.border-black {
border-color: $black !important;
}
.border-black-primary {
border-color: $black-primary !important;
}
.border-black-secondary {
border-color: $black-secondary !important;
}
.border-black-hint {
border-color: $black-hint !important;
}
.border-black-divider {
border-color: $black-divider !important;
}
.border-white {
border-color: $white !important;
}
.border-white-primary {
border-color: $white-primary !important;
}
.border-white-secondary {
border-color: $white-secondary !important;
}
.border-white-hint {
border-color: $white-hint !important;
}
.border-white-divider {
border-color: $white-divider !important;
}
@each $color, $values in $theme-colors {
.border-#{$color} {
border-color: theme-color($color) !important;
}
}

66
frontend/scss/utilities/_border.scss
View File

@ -2,92 +2,26 @@
// Border
.border {
border: $border-width solid $border-color !important;
}
.border-0 {
border: 0 !important;
}
.border-top {
border-top: $border-width solid $border-color !important;
}
.border-top-0 {
border-top: 0 !important;
}
.border-right {
border-right: $border-width solid $border-color !important;
}
.border-right-0 {
border-right: 0 !important;
}
.border-bottom {
border-bottom: $border-width solid $border-color !important;
}
.border-bottom-0 {
border-bottom: 0 !important;
}
.border-left {
border-left: $border-width solid $border-color !important;
}
.border-left-0 {
border-left: 0 !important;
}
.border-black {
border-color: $black !important;
}
.border-black-primary {
border-color: $black-primary !important;
}
.border-black-secondary {
border-color: $black-secondary !important;
}
.border-black-hint {
border-color: $black-hint !important;
}
.border-black-divider {
border-color: $black-divider !important;
}
.border-white {
border-color: $white !important;
}
.border-white-primary {
border-color: $white-primary !important;
}
.border-white-secondary {
border-color: $white-secondary !important;
}
.border-white-hint {
border-color: $white-hint !important;
}
.border-white-divider {
border-color: $white-divider !important;
}
@each $color, $values in $theme-colors {
.border-#{$color} {
border-color: theme-color($color) !important;
}
}
// Border radius
.rounded {

Some files were not shown because too many files have changed in this diff Show More