Adding prefixed style output
This commit is contained in:
Fabian Stamm
@ -13,11 +13,11 @@
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.btn-flat {
|
||||
.#{$ns}btn-flat {
|
||||
@include btn-flat();
|
||||
}
|
||||
|
||||
.btn {
|
||||
.#{$ns}btn {
|
||||
@include btn-flat();
|
||||
}
|
||||
|
||||
@ -34,23 +34,23 @@
|
||||
}
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
.#{$ns}btn-primary {
|
||||
@include btn-color($primary, $on-primary);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
.#{$ns}btn-secondary {
|
||||
@include btn-color($secondary, $on-secondary);
|
||||
}
|
||||
|
||||
.btn-success {
|
||||
.#{$ns}btn-success {
|
||||
@include btn-color($success, $on-success);
|
||||
}
|
||||
|
||||
.btn-error {
|
||||
.#{$ns}btn-error {
|
||||
@include btn-color($error, $on-error);
|
||||
}
|
||||
|
||||
.btn-icon {
|
||||
.#{$ns}btn-icon {
|
||||
background-color: unset !important;
|
||||
border: 0 !important;
|
||||
box-shadow: unset !important;
|
||||
@ -61,7 +61,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
.fab {
|
||||
.#{$ns}fab {
|
||||
border-radius: 50%;
|
||||
width: 3.5rem;
|
||||
height: 3.5rem;
|
||||
@ -81,7 +81,7 @@
|
||||
border: none;
|
||||
}
|
||||
|
||||
.fab-left {
|
||||
.#{$ns}fab-left {
|
||||
right: unset;
|
||||
left: 1.5rem;
|
||||
}
|
||||
|
||||
@ -1,3 +1,3 @@
|
||||
.card {
|
||||
.#{$ns}card {
|
||||
padding: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
@ -8,14 +8,14 @@ body {
|
||||
min-height: 100vh;
|
||||
min-width: 100%;
|
||||
font-size: 1rem;
|
||||
font-family: 'Roboto', sans-serif;
|
||||
font-family: "Roboto", sans-serif;
|
||||
}
|
||||
|
||||
.margin {
|
||||
.#{$ns}margin {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.container {
|
||||
.#{$ns}container {
|
||||
box-sizing: content-box;
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
@ -36,13 +36,13 @@ h3 {
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: .83rem;
|
||||
font-size: 0.83rem;
|
||||
}
|
||||
|
||||
h6 {
|
||||
font-size: .67rem;
|
||||
font-size: 0.67rem;
|
||||
}
|
||||
|
||||
hr {
|
||||
border-top: 1px solid rgb(128, 128, 128);
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,462 +0,0 @@
|
||||
// .container {
|
||||
// margin: 0 auto;
|
||||
// padding: 0 calc(1.5 * 1rem);
|
||||
// }
|
||||
|
||||
|
||||
.row {
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex: 0 1 auto;
|
||||
flex-flow: row wrap;
|
||||
}
|
||||
|
||||
.col-sm,
|
||||
[class^='col-sm-'],
|
||||
[class^='col-sm-offset-'],
|
||||
.row[class*='cols-sm-']>* {
|
||||
box-sizing: border-box;
|
||||
flex: 0 0 auto;
|
||||
padding: 0 calc(var(--universal-padding) / 2);
|
||||
}
|
||||
|
||||
.col-sm,
|
||||
.row.cols-sm>* {
|
||||
max-width: 100%;
|
||||
flex-grow: 1;
|
||||
flex-basis: 0;
|
||||
}
|
||||
|
||||
.col-sm-1,
|
||||
.row.cols-sm-1>* {
|
||||
max-width: 8.33333%;
|
||||
flex-basis: 8.33333%;
|
||||
}
|
||||
|
||||
.col-sm-offset-0 {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.col-sm-2,
|
||||
.row.cols-sm-2>* {
|
||||
max-width: 16.66667%;
|
||||
flex-basis: 16.66667%;
|
||||
}
|
||||
|
||||
.col-sm-offset-1 {
|
||||
margin-left: 8.33333%;
|
||||
}
|
||||
|
||||
.col-sm-3,
|
||||
.row.cols-sm-3>* {
|
||||
max-width: 25%;
|
||||
flex-basis: 25%;
|
||||
}
|
||||
|
||||
.col-sm-offset-2 {
|
||||
margin-left: 16.66667%;
|
||||
}
|
||||
|
||||
.col-sm-4,
|
||||
.row.cols-sm-4>* {
|
||||
max-width: 33.33333%;
|
||||
flex-basis: 33.33333%;
|
||||
}
|
||||
|
||||
.col-sm-offset-3 {
|
||||
margin-left: 25%;
|
||||
}
|
||||
|
||||
.col-sm-5,
|
||||
.row.cols-sm-5>* {
|
||||
max-width: 41.66667%;
|
||||
flex-basis: 41.66667%;
|
||||
}
|
||||
|
||||
.col-sm-offset-4 {
|
||||
margin-left: 33.33333%;
|
||||
}
|
||||
|
||||
.col-sm-6,
|
||||
.row.cols-sm-6>* {
|
||||
max-width: 50%;
|
||||
flex-basis: 50%;
|
||||
}
|
||||
|
||||
.col-sm-offset-5 {
|
||||
margin-left: 41.66667%;
|
||||
}
|
||||
|
||||
.col-sm-7,
|
||||
.row.cols-sm-7>* {
|
||||
max-width: 58.33333%;
|
||||
flex-basis: 58.33333%;
|
||||
}
|
||||
|
||||
.col-sm-offset-6 {
|
||||
margin-left: 50%;
|
||||
}
|
||||
|
||||
.col-sm-8,
|
||||
.row.cols-sm-8>* {
|
||||
max-width: 66.66667%;
|
||||
flex-basis: 66.66667%;
|
||||
}
|
||||
|
||||
.col-sm-offset-7 {
|
||||
margin-left: 58.33333%;
|
||||
}
|
||||
|
||||
.col-sm-9,
|
||||
.row.cols-sm-9>* {
|
||||
max-width: 75%;
|
||||
flex-basis: 75%;
|
||||
}
|
||||
|
||||
.col-sm-offset-8 {
|
||||
margin-left: 66.66667%;
|
||||
}
|
||||
|
||||
.col-sm-10,
|
||||
.row.cols-sm-10>* {
|
||||
max-width: 83.33333%;
|
||||
flex-basis: 83.33333%;
|
||||
}
|
||||
|
||||
.col-sm-offset-9 {
|
||||
margin-left: 75%;
|
||||
}
|
||||
|
||||
.col-sm-11,
|
||||
.row.cols-sm-11>* {
|
||||
max-width: 91.66667%;
|
||||
flex-basis: 91.66667%;
|
||||
}
|
||||
|
||||
.col-sm-offset-10 {
|
||||
margin-left: 83.33333%;
|
||||
}
|
||||
|
||||
.col-sm-12,
|
||||
.row.cols-sm-12>* {
|
||||
max-width: 100%;
|
||||
flex-basis: 100%;
|
||||
}
|
||||
|
||||
.col-sm-offset-11 {
|
||||
margin-left: 91.66667%;
|
||||
}
|
||||
|
||||
.col-sm-normal {
|
||||
order: initial;
|
||||
}
|
||||
|
||||
.col-sm-first {
|
||||
order: -999;
|
||||
}
|
||||
|
||||
.col-sm-last {
|
||||
order: 999;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
|
||||
.col-md,
|
||||
[class^='col-md-'],
|
||||
[class^='col-md-offset-'],
|
||||
.row[class*='cols-md-']>* {
|
||||
box-sizing: border-box;
|
||||
flex: 0 0 auto;
|
||||
padding: 0 calc(var(--universal-padding) / 2);
|
||||
}
|
||||
|
||||
.col-md,
|
||||
.row.cols-md>* {
|
||||
max-width: 100%;
|
||||
flex-grow: 1;
|
||||
flex-basis: 0;
|
||||
}
|
||||
|
||||
.col-md-1,
|
||||
.row.cols-md-1>* {
|
||||
max-width: 8.33333%;
|
||||
flex-basis: 8.33333%;
|
||||
}
|
||||
|
||||
.col-md-offset-0 {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.col-md-2,
|
||||
.row.cols-md-2>* {
|
||||
max-width: 16.66667%;
|
||||
flex-basis: 16.66667%;
|
||||
}
|
||||
|
||||
.col-md-offset-1 {
|
||||
margin-left: 8.33333%;
|
||||
}
|
||||
|
||||
.col-md-3,
|
||||
.row.cols-md-3>* {
|
||||
max-width: 25%;
|
||||
flex-basis: 25%;
|
||||
}
|
||||
|
||||
.col-md-offset-2 {
|
||||
margin-left: 16.66667%;
|
||||
}
|
||||
|
||||
.col-md-4,
|
||||
.row.cols-md-4>* {
|
||||
max-width: 33.33333%;
|
||||
flex-basis: 33.33333%;
|
||||
}
|
||||
|
||||
.col-md-offset-3 {
|
||||
margin-left: 25%;
|
||||
}
|
||||
|
||||
.col-md-5,
|
||||
.row.cols-md-5>* {
|
||||
max-width: 41.66667%;
|
||||
flex-basis: 41.66667%;
|
||||
}
|
||||
|
||||
.col-md-offset-4 {
|
||||
margin-left: 33.33333%;
|
||||
}
|
||||
|
||||
.col-md-6,
|
||||
.row.cols-md-6>* {
|
||||
max-width: 50%;
|
||||
flex-basis: 50%;
|
||||
}
|
||||
|
||||
.col-md-offset-5 {
|
||||
margin-left: 41.66667%;
|
||||
}
|
||||
|
||||
.col-md-7,
|
||||
.row.cols-md-7>* {
|
||||
max-width: 58.33333%;
|
||||
flex-basis: 58.33333%;
|
||||
}
|
||||
|
||||
.col-md-offset-6 {
|
||||
margin-left: 50%;
|
||||
}
|
||||
|
||||
.col-md-8,
|
||||
.row.cols-md-8>* {
|
||||
max-width: 66.66667%;
|
||||
flex-basis: 66.66667%;
|
||||
}
|
||||
|
||||
.col-md-offset-7 {
|
||||
margin-left: 58.33333%;
|
||||
}
|
||||
|
||||
.col-md-9,
|
||||
.row.cols-md-9>* {
|
||||
max-width: 75%;
|
||||
flex-basis: 75%;
|
||||
}
|
||||
|
||||
.col-md-offset-8 {
|
||||
margin-left: 66.66667%;
|
||||
}
|
||||
|
||||
.col-md-10,
|
||||
.row.cols-md-10>* {
|
||||
max-width: 83.33333%;
|
||||
flex-basis: 83.33333%;
|
||||
}
|
||||
|
||||
.col-md-offset-9 {
|
||||
margin-left: 75%;
|
||||
}
|
||||
|
||||
.col-md-11,
|
||||
.row.cols-md-11>* {
|
||||
max-width: 91.66667%;
|
||||
flex-basis: 91.66667%;
|
||||
}
|
||||
|
||||
.col-md-offset-10 {
|
||||
margin-left: 83.33333%;
|
||||
}
|
||||
|
||||
.col-md-12,
|
||||
.row.cols-md-12>* {
|
||||
max-width: 100%;
|
||||
flex-basis: 100%;
|
||||
}
|
||||
|
||||
.col-md-offset-11 {
|
||||
margin-left: 91.66667%;
|
||||
}
|
||||
|
||||
.col-md-normal {
|
||||
order: initial;
|
||||
}
|
||||
|
||||
.col-md-first {
|
||||
order: -999;
|
||||
}
|
||||
|
||||
.col-md-last {
|
||||
order: 999;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1280px) {
|
||||
|
||||
.col-lg,
|
||||
[class^='col-lg-'],
|
||||
[class^='col-lg-offset-'],
|
||||
.row[class*='cols-lg-']>* {
|
||||
box-sizing: border-box;
|
||||
flex: 0 0 auto;
|
||||
padding: 0 calc(var(1rem) / 2);
|
||||
}
|
||||
|
||||
.col-lg,
|
||||
.row.cols-lg>* {
|
||||
max-width: 100%;
|
||||
flex-grow: 1;
|
||||
flex-basis: 0;
|
||||
}
|
||||
|
||||
.col-lg-1,
|
||||
.row.cols-lg-1>* {
|
||||
max-width: 8.33333%;
|
||||
flex-basis: 8.33333%;
|
||||
}
|
||||
|
||||
.col-lg-offset-0 {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.col-lg-2,
|
||||
.row.cols-lg-2>* {
|
||||
max-width: 16.66667%;
|
||||
flex-basis: 16.66667%;
|
||||
}
|
||||
|
||||
.col-lg-offset-1 {
|
||||
margin-left: 8.33333%;
|
||||
}
|
||||
|
||||
.col-lg-3,
|
||||
.row.cols-lg-3>* {
|
||||
max-width: 25%;
|
||||
flex-basis: 25%;
|
||||
}
|
||||
|
||||
.col-lg-offset-2 {
|
||||
margin-left: 16.66667%;
|
||||
}
|
||||
|
||||
.col-lg-4,
|
||||
.row.cols-lg-4>* {
|
||||
max-width: 33.33333%;
|
||||
flex-basis: 33.33333%;
|
||||
}
|
||||
|
||||
.col-lg-offset-3 {
|
||||
margin-left: 25%;
|
||||
}
|
||||
|
||||
.col-lg-5,
|
||||
.row.cols-lg-5>* {
|
||||
max-width: 41.66667%;
|
||||
flex-basis: 41.66667%;
|
||||
}
|
||||
|
||||
.col-lg-offset-4 {
|
||||
margin-left: 33.33333%;
|
||||
}
|
||||
|
||||
.col-lg-6,
|
||||
.row.cols-lg-6>* {
|
||||
max-width: 50%;
|
||||
flex-basis: 50%;
|
||||
}
|
||||
|
||||
.col-lg-offset-5 {
|
||||
margin-left: 41.66667%;
|
||||
}
|
||||
|
||||
.col-lg-7,
|
||||
.row.cols-lg-7>* {
|
||||
max-width: 58.33333%;
|
||||
flex-basis: 58.33333%;
|
||||
}
|
||||
|
||||
.col-lg-offset-6 {
|
||||
margin-left: 50%;
|
||||
}
|
||||
|
||||
.col-lg-8,
|
||||
.row.cols-lg-8>* {
|
||||
max-width: 66.66667%;
|
||||
flex-basis: 66.66667%;
|
||||
}
|
||||
|
||||
.col-lg-offset-7 {
|
||||
margin-left: 58.33333%;
|
||||
}
|
||||
|
||||
.col-lg-9,
|
||||
.row.cols-lg-9>* {
|
||||
max-width: 75%;
|
||||
flex-basis: 75%;
|
||||
}
|
||||
|
||||
.col-lg-offset-8 {
|
||||
margin-left: 66.66667%;
|
||||
}
|
||||
|
||||
.col-lg-10,
|
||||
.row.cols-lg-10>* {
|
||||
max-width: 83.33333%;
|
||||
flex-basis: 83.33333%;
|
||||
}
|
||||
|
||||
.col-lg-offset-9 {
|
||||
margin-left: 75%;
|
||||
}
|
||||
|
||||
.col-lg-11,
|
||||
.row.cols-lg-11>* {
|
||||
max-width: 91.66667%;
|
||||
flex-basis: 91.66667%;
|
||||
}
|
||||
|
||||
.col-lg-offset-10 {
|
||||
margin-left: 83.33333%;
|
||||
}
|
||||
|
||||
.col-lg-12,
|
||||
.row.cols-lg-12>* {
|
||||
max-width: 100%;
|
||||
flex-basis: 100%;
|
||||
}
|
||||
|
||||
.col-lg-offset-11 {
|
||||
margin-left: 91.66667%;
|
||||
}
|
||||
|
||||
.col-lg-normal {
|
||||
order: initial;
|
||||
}
|
||||
|
||||
.col-lg-first {
|
||||
order: -999;
|
||||
}
|
||||
|
||||
.col-lg-last {
|
||||
order: 999;
|
||||
}
|
||||
}
|
||||
@ -2,7 +2,7 @@
|
||||
--header-height: 4rem;
|
||||
}
|
||||
|
||||
.header {
|
||||
.#{$ns}header {
|
||||
background: $primary !important;
|
||||
color: $on-primary !important;
|
||||
|
||||
@ -10,21 +10,21 @@
|
||||
// justify-content: space-between;
|
||||
padding: 1rem;
|
||||
|
||||
>* {
|
||||
> * {
|
||||
max-height: 2rem;
|
||||
margin: 0;
|
||||
background: $primary;
|
||||
color: $on-primary;
|
||||
}
|
||||
|
||||
>*:not(:last-child) {
|
||||
> *:not(:last-child) {
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
span {
|
||||
line-height: 1.5rem;
|
||||
font-size: 1.5rem;
|
||||
padding: .25rem;
|
||||
padding: 0.25rem;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
@ -34,19 +34,19 @@
|
||||
width: auto;
|
||||
}
|
||||
|
||||
>a {
|
||||
> a {
|
||||
font-size: 1rem;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
padding: .5rem;
|
||||
padding: 0.5rem;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
filter: brightness(.95);
|
||||
filter: brightness(0.95);
|
||||
}
|
||||
|
||||
&:active {
|
||||
filter: brightness(1.05);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
.inp {
|
||||
.#{$ns}inp {
|
||||
background: unset;
|
||||
border: 1px grey solid;
|
||||
padding: 0 0.5rem;
|
||||
@ -13,19 +13,19 @@
|
||||
}
|
||||
}
|
||||
|
||||
textarea.inp {
|
||||
textarea.#{$ns}inp {
|
||||
height: unset;
|
||||
min-height: 6rem !important;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.input-group {
|
||||
.#{$ns}input-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@extend .margin;
|
||||
@extend .#{$ns}margin;
|
||||
|
||||
input {
|
||||
@extend .inp;
|
||||
@extend .#{$ns}inp;
|
||||
}
|
||||
|
||||
label {
|
||||
@ -35,8 +35,8 @@ textarea.inp {
|
||||
}
|
||||
}
|
||||
|
||||
.input-checkbox {
|
||||
@extend .margin;
|
||||
.#{$ns}input-checkbox {
|
||||
@extend .#{$ns}margin;
|
||||
|
||||
display: block;
|
||||
position: relative;
|
||||
|
||||
@ -1,14 +1,14 @@
|
||||
.list {
|
||||
.#{$ns}list {
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
|
||||
li {
|
||||
padding: .5rem;
|
||||
padding: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.list-divider {
|
||||
li:nth-child(n+2) {
|
||||
.#{$ns}list-divider {
|
||||
li:nth-child(n + 2) {
|
||||
border-top: 1px solid rgb(128, 128, 128);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
.modal {
|
||||
.#{$ns}modal {
|
||||
padding: 1rem;
|
||||
|
||||
margin: auto;
|
||||
@ -14,20 +14,20 @@
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
|
||||
.modal-title {
|
||||
.#{$ns}modal-title {
|
||||
font-weight: 600;
|
||||
font-size: 1.2rem;
|
||||
margin-bottom: .5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
.#{$ns}modal-content {
|
||||
overflow-y: auto;
|
||||
max-height: calc(100vh - 10rem);
|
||||
// margin: auto;
|
||||
}
|
||||
|
||||
.modal-action {
|
||||
margin-top: .5rem;
|
||||
.#{$ns}modal-action {
|
||||
margin-top: 0.5rem;
|
||||
display: flex;
|
||||
|
||||
:first-child {
|
||||
@ -35,12 +35,12 @@
|
||||
}
|
||||
|
||||
button {
|
||||
@extend .btn;
|
||||
@extend .#{$ns}btn;
|
||||
}
|
||||
}
|
||||
|
||||
transform-origin: center;
|
||||
animation: growModalBox .2s linear;
|
||||
animation: growModalBox 0.2s linear;
|
||||
}
|
||||
|
||||
@keyframes growModalBox {
|
||||
@ -53,6 +53,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
.modal-hidden {
|
||||
.#{$ns}modal-hidden {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,16 +1,15 @@
|
||||
.table {
|
||||
.#{$ns}table {
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
th,
|
||||
td {
|
||||
text-align: left;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
th,
|
||||
td {
|
||||
text-align: left;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
tr:first-child {
|
||||
background-color: $primary;
|
||||
color: var(--on-primary);
|
||||
}
|
||||
}
|
||||
tr:first-child {
|
||||
background-color: $primary;
|
||||
color: var(--on-primary);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user