// This is the default scss file, more specific styling is defined directly into components. // It it imported in `scr/App.vue` style tag. // Dependencies variables overrides and custom variables // Variables overrides are defined before actual SCSS imports @import 'variables'; // Dependencies SCSS imports // `~` allow to import a node_modules folder (resolved by Webpack) @import '~bootstrap/scss/bootstrap.scss'; @import '~bootstrap-vue/src/index.scss'; @import '~fork-awesome/scss/fork-awesome.scss'; // Style overrides happens after dependencies imports // Bootstrap overrides body { margin: 0; font-family: "Source Sans Pro", "Helvetica Neue", "Fira Sans", Helvetica, Arial, sans-serif; } .menu-list { .list-group-item { padding: 0.75rem 0; display: flex; align-items: center; } h2 { font-size: 1.25rem; font-weight: 400; margin: 0; } } .list-group-item { padding: 0.75rem 1rem; } .list-group-item-action { color: #333; } // Allow state of input group to be displayed under the group .input-group .is-invalid ~ .invalid-feedback { display: block; } .col-form-label { @include media-breakpoint-up(xs) { width: 100%; } @include media-breakpoint-up(sm) { flex-basis: 40%; } @include media-breakpoint-up(md) { flex-basis: 30%; } @include media-breakpoint-up(lg) { flex-basis: 25%; } @include media-breakpoint-up(xl) { flex-basis: 20%; } } .card + .card { margin-top: 2rem; } .card-header h2 { margin: 0; font-size: 1.75rem; } .card-body { padding: 1rem; } // collapse icon .not-collapsed .icon { transform: rotate(-90deg); } .collapsed .icon { transform: rotate(90deg); position: relative; top: 2px; } // Fork-awesome overrides .fa-fw { width: 1.25em !important; } // custom css .actions { margin-bottom: 2rem; display: flex; justify-content: space-between; @include media-breakpoint-down(xs) { .buttons { flex-direction: column; justify-content: space-between; } } @include media-breakpoint-down(sm) { flex-direction: column-reverse; margin-bottom: 2rem; .buttons { display: flex; justify-content: space-between; .btn { margin-bottom: .5rem; } } } @include media-breakpoint-up(md) { .btn ~ .btn { margin-left: .5rem; } } .input-group { @include media-breakpoint-up(md) { width: 25%; } @include media-breakpoint-up(lg) { width: 35%; } } } .log { .card-body { padding: 0; pre { margin-bottom: 0; padding: 1rem; background-color: $light; } } }