Adding prefixed style output
This commit is contained in:
parent
4864abab1c
commit
2835b1bac9
11
package.json
11
package.json
@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "@hibas123/theme",
|
"name": "@hibas123/theme",
|
||||||
"version": "1.2.19",
|
"version": "2.0.0",
|
||||||
"description": "",
|
"description": "",
|
||||||
"main": " ",
|
"main": " ",
|
||||||
"files": [
|
"files": [
|
||||||
@ -11,8 +11,13 @@
|
|||||||
"Roboto-Regular.woff2"
|
"Roboto-Regular.woff2"
|
||||||
],
|
],
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"build": "sass src/base.scss:out/base.css src/dark.scss:out/dark.css src/light.scss:out/light.css",
|
"build-grid": "sass src/grid.scss:out/grid.css",
|
||||||
"watch": "sass --watch src/base.scss:out/base.css src/dark.scss:out/dark.css src/light.scss:out/light.css",
|
"watch-grid": "sass --watch src/grid.scss:out/grid.css",
|
||||||
|
"build-clean": "sass src/base.scss:out/base.css src/dark.scss:out/dark.css src/light.scss:out/light.css ",
|
||||||
|
"watch-clean": "sass --watch src/base.scss:out/base.css src/dark.scss:out/dark.css src/light.scss:out/light.css",
|
||||||
|
"build-prefix": "sass src/base-ht.scss:out/base-ht.css src/dark-ht.scss:out/dark-ht.css src/light-ht.scss:out/light-ht.css",
|
||||||
|
"watch-prefix": "sass --watch src/base-ht.scss:out/base-ht.css src/dark-ht.scss:out/dark-ht.css src/light-ht.scss:out/light-ht.css",
|
||||||
|
"build": "npm run build-clean && npm run build-prefix && npm run build-grid",
|
||||||
"prepublishOnly": "npm run build"
|
"prepublishOnly": "npm run build"
|
||||||
},
|
},
|
||||||
"author": "Fabian Stamm <dev@fabianstamm.de>",
|
"author": "Fabian Stamm <dev@fabianstamm.de>",
|
||||||
|
@ -1,5 +1,7 @@
|
|||||||
@import "./_vals.scss";
|
@import "./_vals.scss";
|
||||||
|
|
||||||
|
$ns: "" !default;
|
||||||
|
|
||||||
$background: false !default;
|
$background: false !default;
|
||||||
$on-background: false !default;
|
$on-background: false !default;
|
||||||
$button-color: #cccccc !default;
|
$button-color: #cccccc !default;
|
||||||
|
@ -1,10 +1 @@
|
|||||||
$elevations: 1,
|
$elevations: 1, 2, 3, 4, 6, 8, 9, 12, 16, 24;
|
||||||
2,
|
|
||||||
3,
|
|
||||||
4,
|
|
||||||
6,
|
|
||||||
8,
|
|
||||||
9,
|
|
||||||
12,
|
|
||||||
16,
|
|
||||||
24;
|
|
||||||
|
3
src/base-ht.scss
Normal file
3
src/base-ht.scss
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
$ns: "ht-";
|
||||||
|
|
||||||
|
@import "./base.scss";
|
@ -1,3 +1,5 @@
|
|||||||
|
$ns: "" !default;
|
||||||
|
|
||||||
/* latin */
|
/* latin */
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: "Roboto";
|
font-family: "Roboto";
|
||||||
@ -45,6 +47,5 @@ $on-success: var(--on-success) !default;
|
|||||||
@import "./base/_list.scss";
|
@import "./base/_list.scss";
|
||||||
@import "./base/_header.scss";
|
@import "./base/_header.scss";
|
||||||
@import "./base/_card.scss";
|
@import "./base/_card.scss";
|
||||||
@import "./base/_grid.scss";
|
|
||||||
@import "./base/_table.scss";
|
@import "./base/_table.scss";
|
||||||
@import "./base/_scroll";
|
@import "./base/_scroll";
|
||||||
|
@ -13,11 +13,11 @@
|
|||||||
outline: none;
|
outline: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-flat {
|
.#{$ns}btn-flat {
|
||||||
@include btn-flat();
|
@include btn-flat();
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn {
|
.#{$ns}btn {
|
||||||
@include btn-flat();
|
@include btn-flat();
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -34,23 +34,23 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-primary {
|
.#{$ns}btn-primary {
|
||||||
@include btn-color($primary, $on-primary);
|
@include btn-color($primary, $on-primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-secondary {
|
.#{$ns}btn-secondary {
|
||||||
@include btn-color($secondary, $on-secondary);
|
@include btn-color($secondary, $on-secondary);
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-success {
|
.#{$ns}btn-success {
|
||||||
@include btn-color($success, $on-success);
|
@include btn-color($success, $on-success);
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-error {
|
.#{$ns}btn-error {
|
||||||
@include btn-color($error, $on-error);
|
@include btn-color($error, $on-error);
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-icon {
|
.#{$ns}btn-icon {
|
||||||
background-color: unset !important;
|
background-color: unset !important;
|
||||||
border: 0 !important;
|
border: 0 !important;
|
||||||
box-shadow: unset !important;
|
box-shadow: unset !important;
|
||||||
@ -61,7 +61,7 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.fab {
|
.#{$ns}fab {
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
width: 3.5rem;
|
width: 3.5rem;
|
||||||
height: 3.5rem;
|
height: 3.5rem;
|
||||||
@ -81,7 +81,7 @@
|
|||||||
border: none;
|
border: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.fab-left {
|
.#{$ns}fab-left {
|
||||||
right: unset;
|
right: unset;
|
||||||
left: 1.5rem;
|
left: 1.5rem;
|
||||||
}
|
}
|
||||||
|
@ -1,3 +1,3 @@
|
|||||||
.card {
|
.#{$ns}card {
|
||||||
padding: 1rem;
|
padding: 1rem;
|
||||||
}
|
}
|
@ -8,14 +8,14 @@ body {
|
|||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
min-width: 100%;
|
min-width: 100%;
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
font-family: 'Roboto', sans-serif;
|
font-family: "Roboto", sans-serif;
|
||||||
}
|
}
|
||||||
|
|
||||||
.margin {
|
.#{$ns}margin {
|
||||||
margin-bottom: 1.5rem;
|
margin-bottom: 1.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.container {
|
.#{$ns}container {
|
||||||
box-sizing: content-box;
|
box-sizing: content-box;
|
||||||
padding-left: 1rem;
|
padding-left: 1rem;
|
||||||
padding-right: 1rem;
|
padding-right: 1rem;
|
||||||
@ -36,11 +36,11 @@ h3 {
|
|||||||
}
|
}
|
||||||
|
|
||||||
h5 {
|
h5 {
|
||||||
font-size: .83rem;
|
font-size: 0.83rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
h6 {
|
h6 {
|
||||||
font-size: .67rem;
|
font-size: 0.67rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
hr {
|
hr {
|
||||||
|
@ -2,7 +2,7 @@
|
|||||||
--header-height: 4rem;
|
--header-height: 4rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.header {
|
.#{$ns}header {
|
||||||
background: $primary !important;
|
background: $primary !important;
|
||||||
color: $on-primary !important;
|
color: $on-primary !important;
|
||||||
|
|
||||||
@ -10,21 +10,21 @@
|
|||||||
// justify-content: space-between;
|
// justify-content: space-between;
|
||||||
padding: 1rem;
|
padding: 1rem;
|
||||||
|
|
||||||
>* {
|
> * {
|
||||||
max-height: 2rem;
|
max-height: 2rem;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
background: $primary;
|
background: $primary;
|
||||||
color: $on-primary;
|
color: $on-primary;
|
||||||
}
|
}
|
||||||
|
|
||||||
>*:not(:last-child) {
|
> *:not(:last-child) {
|
||||||
margin-right: 1rem;
|
margin-right: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
span {
|
span {
|
||||||
line-height: 1.5rem;
|
line-height: 1.5rem;
|
||||||
font-size: 1.5rem;
|
font-size: 1.5rem;
|
||||||
padding: .25rem;
|
padding: 0.25rem;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
@ -34,15 +34,15 @@
|
|||||||
width: auto;
|
width: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
>a {
|
> a {
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
padding: .5rem;
|
padding: 0.5rem;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
filter: brightness(.95);
|
filter: brightness(0.95);
|
||||||
}
|
}
|
||||||
|
|
||||||
&:active {
|
&:active {
|
||||||
|
@ -1,4 +1,4 @@
|
|||||||
.inp {
|
.#{$ns}inp {
|
||||||
background: unset;
|
background: unset;
|
||||||
border: 1px grey solid;
|
border: 1px grey solid;
|
||||||
padding: 0 0.5rem;
|
padding: 0 0.5rem;
|
||||||
@ -13,19 +13,19 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
textarea.inp {
|
textarea.#{$ns}inp {
|
||||||
height: unset;
|
height: unset;
|
||||||
min-height: 6rem !important;
|
min-height: 6rem !important;
|
||||||
font-size: 1.1rem;
|
font-size: 1.1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.input-group {
|
.#{$ns}input-group {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
@extend .margin;
|
@extend .#{$ns}margin;
|
||||||
|
|
||||||
input {
|
input {
|
||||||
@extend .inp;
|
@extend .#{$ns}inp;
|
||||||
}
|
}
|
||||||
|
|
||||||
label {
|
label {
|
||||||
@ -35,8 +35,8 @@ textarea.inp {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.input-checkbox {
|
.#{$ns}input-checkbox {
|
||||||
@extend .margin;
|
@extend .#{$ns}margin;
|
||||||
|
|
||||||
display: block;
|
display: block;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
@ -1,14 +1,14 @@
|
|||||||
.list {
|
.#{$ns}list {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
list-style: none;
|
list-style: none;
|
||||||
|
|
||||||
li {
|
li {
|
||||||
padding: .5rem;
|
padding: 0.5rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.list-divider {
|
.#{$ns}list-divider {
|
||||||
li:nth-child(n+2) {
|
li:nth-child(n + 2) {
|
||||||
border-top: 1px solid rgb(128, 128, 128);
|
border-top: 1px solid rgb(128, 128, 128);
|
||||||
}
|
}
|
||||||
}
|
}
|
@ -1,4 +1,4 @@
|
|||||||
.modal {
|
.#{$ns}modal {
|
||||||
padding: 1rem;
|
padding: 1rem;
|
||||||
|
|
||||||
margin: auto;
|
margin: auto;
|
||||||
@ -14,20 +14,20 @@
|
|||||||
top: 50%;
|
top: 50%;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
|
|
||||||
.modal-title {
|
.#{$ns}modal-title {
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
font-size: 1.2rem;
|
font-size: 1.2rem;
|
||||||
margin-bottom: .5rem;
|
margin-bottom: 0.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.modal-content {
|
.#{$ns}modal-content {
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
max-height: calc(100vh - 10rem);
|
max-height: calc(100vh - 10rem);
|
||||||
// margin: auto;
|
// margin: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.modal-action {
|
.#{$ns}modal-action {
|
||||||
margin-top: .5rem;
|
margin-top: 0.5rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
||||||
:first-child {
|
:first-child {
|
||||||
@ -35,12 +35,12 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
button {
|
button {
|
||||||
@extend .btn;
|
@extend .#{$ns}btn;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
transform-origin: center;
|
transform-origin: center;
|
||||||
animation: growModalBox .2s linear;
|
animation: growModalBox 0.2s linear;
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes growModalBox {
|
@keyframes growModalBox {
|
||||||
@ -53,6 +53,6 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.modal-hidden {
|
.#{$ns}modal-hidden {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
@ -1,16 +1,15 @@
|
|||||||
.table {
|
.#{$ns}table {
|
||||||
|
border-collapse: collapse;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
border-collapse: collapse;
|
th,
|
||||||
width: 100%;
|
td {
|
||||||
|
text-align: left;
|
||||||
|
padding: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
th,
|
tr:first-child {
|
||||||
td {
|
background-color: $primary;
|
||||||
text-align: left;
|
color: var(--on-primary);
|
||||||
padding: 8px;
|
}
|
||||||
}
|
|
||||||
|
|
||||||
tr:first-child {
|
|
||||||
background-color: $primary;
|
|
||||||
color: var(--on-primary);
|
|
||||||
}
|
|
||||||
}
|
}
|
3
src/dark-ht.scss
Normal file
3
src/dark-ht.scss
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
$ns: "ht-";
|
||||||
|
|
||||||
|
@import "./dark.scss";
|
@ -1,9 +1,3 @@
|
|||||||
// .container {
|
|
||||||
// margin: 0 auto;
|
|
||||||
// padding: 0 calc(1.5 * 1rem);
|
|
||||||
// }
|
|
||||||
|
|
||||||
|
|
||||||
.row {
|
.row {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
display: flex;
|
display: flex;
|
||||||
@ -12,23 +6,23 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.col-sm,
|
.col-sm,
|
||||||
[class^='col-sm-'],
|
[class^="col-sm-"],
|
||||||
[class^='col-sm-offset-'],
|
[class^="col-sm-offset-"],
|
||||||
.row[class*='cols-sm-']>* {
|
.row[class*="cols-sm-"] > * {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
flex: 0 0 auto;
|
flex: 0 0 auto;
|
||||||
padding: 0 calc(var(--universal-padding) / 2);
|
padding: 0 calc(var(--universal-padding) / 2);
|
||||||
}
|
}
|
||||||
|
|
||||||
.col-sm,
|
.col-sm,
|
||||||
.row.cols-sm>* {
|
.row.cols-sm > * {
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
flex-basis: 0;
|
flex-basis: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.col-sm-1,
|
.col-sm-1,
|
||||||
.row.cols-sm-1>* {
|
.row.cols-sm-1 > * {
|
||||||
max-width: 8.33333%;
|
max-width: 8.33333%;
|
||||||
flex-basis: 8.33333%;
|
flex-basis: 8.33333%;
|
||||||
}
|
}
|
||||||
@ -38,7 +32,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.col-sm-2,
|
.col-sm-2,
|
||||||
.row.cols-sm-2>* {
|
.row.cols-sm-2 > * {
|
||||||
max-width: 16.66667%;
|
max-width: 16.66667%;
|
||||||
flex-basis: 16.66667%;
|
flex-basis: 16.66667%;
|
||||||
}
|
}
|
||||||
@ -48,7 +42,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.col-sm-3,
|
.col-sm-3,
|
||||||
.row.cols-sm-3>* {
|
.row.cols-sm-3 > * {
|
||||||
max-width: 25%;
|
max-width: 25%;
|
||||||
flex-basis: 25%;
|
flex-basis: 25%;
|
||||||
}
|
}
|
||||||
@ -58,7 +52,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.col-sm-4,
|
.col-sm-4,
|
||||||
.row.cols-sm-4>* {
|
.row.cols-sm-4 > * {
|
||||||
max-width: 33.33333%;
|
max-width: 33.33333%;
|
||||||
flex-basis: 33.33333%;
|
flex-basis: 33.33333%;
|
||||||
}
|
}
|
||||||
@ -68,7 +62,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.col-sm-5,
|
.col-sm-5,
|
||||||
.row.cols-sm-5>* {
|
.row.cols-sm-5 > * {
|
||||||
max-width: 41.66667%;
|
max-width: 41.66667%;
|
||||||
flex-basis: 41.66667%;
|
flex-basis: 41.66667%;
|
||||||
}
|
}
|
||||||
@ -78,7 +72,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.col-sm-6,
|
.col-sm-6,
|
||||||
.row.cols-sm-6>* {
|
.row.cols-sm-6 > * {
|
||||||
max-width: 50%;
|
max-width: 50%;
|
||||||
flex-basis: 50%;
|
flex-basis: 50%;
|
||||||
}
|
}
|
||||||
@ -88,7 +82,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.col-sm-7,
|
.col-sm-7,
|
||||||
.row.cols-sm-7>* {
|
.row.cols-sm-7 > * {
|
||||||
max-width: 58.33333%;
|
max-width: 58.33333%;
|
||||||
flex-basis: 58.33333%;
|
flex-basis: 58.33333%;
|
||||||
}
|
}
|
||||||
@ -98,7 +92,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.col-sm-8,
|
.col-sm-8,
|
||||||
.row.cols-sm-8>* {
|
.row.cols-sm-8 > * {
|
||||||
max-width: 66.66667%;
|
max-width: 66.66667%;
|
||||||
flex-basis: 66.66667%;
|
flex-basis: 66.66667%;
|
||||||
}
|
}
|
||||||
@ -108,7 +102,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.col-sm-9,
|
.col-sm-9,
|
||||||
.row.cols-sm-9>* {
|
.row.cols-sm-9 > * {
|
||||||
max-width: 75%;
|
max-width: 75%;
|
||||||
flex-basis: 75%;
|
flex-basis: 75%;
|
||||||
}
|
}
|
||||||
@ -118,7 +112,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.col-sm-10,
|
.col-sm-10,
|
||||||
.row.cols-sm-10>* {
|
.row.cols-sm-10 > * {
|
||||||
max-width: 83.33333%;
|
max-width: 83.33333%;
|
||||||
flex-basis: 83.33333%;
|
flex-basis: 83.33333%;
|
||||||
}
|
}
|
||||||
@ -128,7 +122,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.col-sm-11,
|
.col-sm-11,
|
||||||
.row.cols-sm-11>* {
|
.row.cols-sm-11 > * {
|
||||||
max-width: 91.66667%;
|
max-width: 91.66667%;
|
||||||
flex-basis: 91.66667%;
|
flex-basis: 91.66667%;
|
||||||
}
|
}
|
||||||
@ -138,7 +132,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.col-sm-12,
|
.col-sm-12,
|
||||||
.row.cols-sm-12>* {
|
.row.cols-sm-12 > * {
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
flex-basis: 100%;
|
flex-basis: 100%;
|
||||||
}
|
}
|
||||||
@ -160,25 +154,24 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (min-width: 768px) {
|
@media screen and (min-width: 768px) {
|
||||||
|
|
||||||
.col-md,
|
.col-md,
|
||||||
[class^='col-md-'],
|
[class^="col-md-"],
|
||||||
[class^='col-md-offset-'],
|
[class^="col-md-offset-"],
|
||||||
.row[class*='cols-md-']>* {
|
.row[class*="cols-md-"] > * {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
flex: 0 0 auto;
|
flex: 0 0 auto;
|
||||||
padding: 0 calc(var(--universal-padding) / 2);
|
padding: 0 calc(var(--universal-padding) / 2);
|
||||||
}
|
}
|
||||||
|
|
||||||
.col-md,
|
.col-md,
|
||||||
.row.cols-md>* {
|
.row.cols-md > * {
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
flex-basis: 0;
|
flex-basis: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.col-md-1,
|
.col-md-1,
|
||||||
.row.cols-md-1>* {
|
.row.cols-md-1 > * {
|
||||||
max-width: 8.33333%;
|
max-width: 8.33333%;
|
||||||
flex-basis: 8.33333%;
|
flex-basis: 8.33333%;
|
||||||
}
|
}
|
||||||
@ -188,7 +181,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.col-md-2,
|
.col-md-2,
|
||||||
.row.cols-md-2>* {
|
.row.cols-md-2 > * {
|
||||||
max-width: 16.66667%;
|
max-width: 16.66667%;
|
||||||
flex-basis: 16.66667%;
|
flex-basis: 16.66667%;
|
||||||
}
|
}
|
||||||
@ -198,7 +191,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.col-md-3,
|
.col-md-3,
|
||||||
.row.cols-md-3>* {
|
.row.cols-md-3 > * {
|
||||||
max-width: 25%;
|
max-width: 25%;
|
||||||
flex-basis: 25%;
|
flex-basis: 25%;
|
||||||
}
|
}
|
||||||
@ -208,7 +201,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.col-md-4,
|
.col-md-4,
|
||||||
.row.cols-md-4>* {
|
.row.cols-md-4 > * {
|
||||||
max-width: 33.33333%;
|
max-width: 33.33333%;
|
||||||
flex-basis: 33.33333%;
|
flex-basis: 33.33333%;
|
||||||
}
|
}
|
||||||
@ -218,7 +211,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.col-md-5,
|
.col-md-5,
|
||||||
.row.cols-md-5>* {
|
.row.cols-md-5 > * {
|
||||||
max-width: 41.66667%;
|
max-width: 41.66667%;
|
||||||
flex-basis: 41.66667%;
|
flex-basis: 41.66667%;
|
||||||
}
|
}
|
||||||
@ -228,7 +221,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.col-md-6,
|
.col-md-6,
|
||||||
.row.cols-md-6>* {
|
.row.cols-md-6 > * {
|
||||||
max-width: 50%;
|
max-width: 50%;
|
||||||
flex-basis: 50%;
|
flex-basis: 50%;
|
||||||
}
|
}
|
||||||
@ -238,7 +231,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.col-md-7,
|
.col-md-7,
|
||||||
.row.cols-md-7>* {
|
.row.cols-md-7 > * {
|
||||||
max-width: 58.33333%;
|
max-width: 58.33333%;
|
||||||
flex-basis: 58.33333%;
|
flex-basis: 58.33333%;
|
||||||
}
|
}
|
||||||
@ -248,7 +241,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.col-md-8,
|
.col-md-8,
|
||||||
.row.cols-md-8>* {
|
.row.cols-md-8 > * {
|
||||||
max-width: 66.66667%;
|
max-width: 66.66667%;
|
||||||
flex-basis: 66.66667%;
|
flex-basis: 66.66667%;
|
||||||
}
|
}
|
||||||
@ -258,7 +251,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.col-md-9,
|
.col-md-9,
|
||||||
.row.cols-md-9>* {
|
.row.cols-md-9 > * {
|
||||||
max-width: 75%;
|
max-width: 75%;
|
||||||
flex-basis: 75%;
|
flex-basis: 75%;
|
||||||
}
|
}
|
||||||
@ -268,7 +261,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.col-md-10,
|
.col-md-10,
|
||||||
.row.cols-md-10>* {
|
.row.cols-md-10 > * {
|
||||||
max-width: 83.33333%;
|
max-width: 83.33333%;
|
||||||
flex-basis: 83.33333%;
|
flex-basis: 83.33333%;
|
||||||
}
|
}
|
||||||
@ -278,7 +271,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.col-md-11,
|
.col-md-11,
|
||||||
.row.cols-md-11>* {
|
.row.cols-md-11 > * {
|
||||||
max-width: 91.66667%;
|
max-width: 91.66667%;
|
||||||
flex-basis: 91.66667%;
|
flex-basis: 91.66667%;
|
||||||
}
|
}
|
||||||
@ -288,7 +281,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.col-md-12,
|
.col-md-12,
|
||||||
.row.cols-md-12>* {
|
.row.cols-md-12 > * {
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
flex-basis: 100%;
|
flex-basis: 100%;
|
||||||
}
|
}
|
||||||
@ -311,25 +304,24 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (min-width: 1280px) {
|
@media screen and (min-width: 1280px) {
|
||||||
|
|
||||||
.col-lg,
|
.col-lg,
|
||||||
[class^='col-lg-'],
|
[class^="col-lg-"],
|
||||||
[class^='col-lg-offset-'],
|
[class^="col-lg-offset-"],
|
||||||
.row[class*='cols-lg-']>* {
|
.row[class*="cols-lg-"] > * {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
flex: 0 0 auto;
|
flex: 0 0 auto;
|
||||||
padding: 0 calc(var(1rem) / 2);
|
padding: 0 calc(var(1rem) / 2);
|
||||||
}
|
}
|
||||||
|
|
||||||
.col-lg,
|
.col-lg,
|
||||||
.row.cols-lg>* {
|
.row.cols-lg > * {
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
flex-basis: 0;
|
flex-basis: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.col-lg-1,
|
.col-lg-1,
|
||||||
.row.cols-lg-1>* {
|
.row.cols-lg-1 > * {
|
||||||
max-width: 8.33333%;
|
max-width: 8.33333%;
|
||||||
flex-basis: 8.33333%;
|
flex-basis: 8.33333%;
|
||||||
}
|
}
|
||||||
@ -339,7 +331,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.col-lg-2,
|
.col-lg-2,
|
||||||
.row.cols-lg-2>* {
|
.row.cols-lg-2 > * {
|
||||||
max-width: 16.66667%;
|
max-width: 16.66667%;
|
||||||
flex-basis: 16.66667%;
|
flex-basis: 16.66667%;
|
||||||
}
|
}
|
||||||
@ -349,7 +341,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.col-lg-3,
|
.col-lg-3,
|
||||||
.row.cols-lg-3>* {
|
.row.cols-lg-3 > * {
|
||||||
max-width: 25%;
|
max-width: 25%;
|
||||||
flex-basis: 25%;
|
flex-basis: 25%;
|
||||||
}
|
}
|
||||||
@ -359,7 +351,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.col-lg-4,
|
.col-lg-4,
|
||||||
.row.cols-lg-4>* {
|
.row.cols-lg-4 > * {
|
||||||
max-width: 33.33333%;
|
max-width: 33.33333%;
|
||||||
flex-basis: 33.33333%;
|
flex-basis: 33.33333%;
|
||||||
}
|
}
|
||||||
@ -369,7 +361,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.col-lg-5,
|
.col-lg-5,
|
||||||
.row.cols-lg-5>* {
|
.row.cols-lg-5 > * {
|
||||||
max-width: 41.66667%;
|
max-width: 41.66667%;
|
||||||
flex-basis: 41.66667%;
|
flex-basis: 41.66667%;
|
||||||
}
|
}
|
||||||
@ -379,7 +371,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.col-lg-6,
|
.col-lg-6,
|
||||||
.row.cols-lg-6>* {
|
.row.cols-lg-6 > * {
|
||||||
max-width: 50%;
|
max-width: 50%;
|
||||||
flex-basis: 50%;
|
flex-basis: 50%;
|
||||||
}
|
}
|
||||||
@ -389,7 +381,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.col-lg-7,
|
.col-lg-7,
|
||||||
.row.cols-lg-7>* {
|
.row.cols-lg-7 > * {
|
||||||
max-width: 58.33333%;
|
max-width: 58.33333%;
|
||||||
flex-basis: 58.33333%;
|
flex-basis: 58.33333%;
|
||||||
}
|
}
|
||||||
@ -399,7 +391,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.col-lg-8,
|
.col-lg-8,
|
||||||
.row.cols-lg-8>* {
|
.row.cols-lg-8 > * {
|
||||||
max-width: 66.66667%;
|
max-width: 66.66667%;
|
||||||
flex-basis: 66.66667%;
|
flex-basis: 66.66667%;
|
||||||
}
|
}
|
||||||
@ -409,7 +401,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.col-lg-9,
|
.col-lg-9,
|
||||||
.row.cols-lg-9>* {
|
.row.cols-lg-9 > * {
|
||||||
max-width: 75%;
|
max-width: 75%;
|
||||||
flex-basis: 75%;
|
flex-basis: 75%;
|
||||||
}
|
}
|
||||||
@ -419,7 +411,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.col-lg-10,
|
.col-lg-10,
|
||||||
.row.cols-lg-10>* {
|
.row.cols-lg-10 > * {
|
||||||
max-width: 83.33333%;
|
max-width: 83.33333%;
|
||||||
flex-basis: 83.33333%;
|
flex-basis: 83.33333%;
|
||||||
}
|
}
|
||||||
@ -429,7 +421,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.col-lg-11,
|
.col-lg-11,
|
||||||
.row.cols-lg-11>* {
|
.row.cols-lg-11 > * {
|
||||||
max-width: 91.66667%;
|
max-width: 91.66667%;
|
||||||
flex-basis: 91.66667%;
|
flex-basis: 91.66667%;
|
||||||
}
|
}
|
||||||
@ -439,7 +431,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.col-lg-12,
|
.col-lg-12,
|
||||||
.row.cols-lg-12>* {
|
.row.cols-lg-12 > * {
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
flex-basis: 100%;
|
flex-basis: 100%;
|
||||||
}
|
}
|
3
src/light-ht.scss
Normal file
3
src/light-ht.scss
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
$ns: "ht-";
|
||||||
|
|
||||||
|
@import "./light.scss";
|
@ -17,7 +17,7 @@
|
|||||||
@include btn-flat();
|
@include btn-flat();
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn {
|
.#{$ns}btn {
|
||||||
@include Elevation(1);
|
@include Elevation(1);
|
||||||
@include ElevationTransition(0.2s);
|
@include ElevationTransition(0.2s);
|
||||||
&:focus {
|
&:focus {
|
||||||
@ -26,7 +26,7 @@
|
|||||||
@include btn-flat();
|
@include btn-flat();
|
||||||
}
|
}
|
||||||
|
|
||||||
.fab {
|
.#{$ns}fab {
|
||||||
@include Elevation(8);
|
@include Elevation(8);
|
||||||
@include ElevationTransition(0.2s);
|
@include ElevationTransition(0.2s);
|
||||||
&:focus {
|
&:focus {
|
||||||
|
@ -1,7 +1,7 @@
|
|||||||
.card {
|
.#{$ns}card {
|
||||||
@include Elevation(3);
|
@include Elevation(3);
|
||||||
}
|
}
|
||||||
|
|
||||||
.card-elevated {
|
.#{$ns}card-elevated {
|
||||||
@include Elevation(8);
|
@include Elevation(8);
|
||||||
}
|
}
|
@ -1,3 +1,3 @@
|
|||||||
.header {
|
.#{$ns}header {
|
||||||
@include Elevation(3);
|
@include Elevation(3);
|
||||||
}
|
}
|
@ -1,4 +1,4 @@
|
|||||||
.inp {
|
.#{$ns}inp {
|
||||||
color: $on-background;
|
color: $on-background;
|
||||||
|
|
||||||
option {
|
option {
|
||||||
@ -7,13 +7,13 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.input-group {
|
.#{$ns}input-group {
|
||||||
input {
|
input {
|
||||||
@extend .inp;
|
@extend .#{$ns}inp;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.input-checkbox {
|
.#{$ns}input-checkbox {
|
||||||
span {
|
span {
|
||||||
background-color: $button-color;
|
background-color: $button-color;
|
||||||
}
|
}
|
||||||
|
@ -1,9 +1,9 @@
|
|||||||
.list-clickable {
|
.#{$ns}list-clickable {
|
||||||
li:hover {
|
li:hover {
|
||||||
background: darken-brighten-color($background, 5%);
|
background: darken-brighten-color($background, 5%);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.list-selected {
|
.#{$ns}list-selected {
|
||||||
background: darken-brighten-color($background, 10%);
|
background: darken-brighten-color($background, 10%);
|
||||||
}
|
}
|
@ -1,10 +1,10 @@
|
|||||||
.modal {
|
.#{$ns}modal {
|
||||||
background: $background;
|
background: $background;
|
||||||
@include Elevation(24);
|
@include Elevation(24);
|
||||||
|
|
||||||
.modal-action {
|
.#{$ns}modal-action {
|
||||||
button {
|
button {
|
||||||
@extend .btn;
|
@extend .#{$ns}btn;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
@ -1,5 +1,5 @@
|
|||||||
.table {
|
.#{$ns}table {
|
||||||
tr:nth-child(odd):not(:first-child) {
|
tr:nth-child(odd):not(:first-child) {
|
||||||
background: darken-brighten-color($background, 10%)
|
background: darken-brighten-color($background, 10%);
|
||||||
}
|
}
|
||||||
}
|
}
|
Loading…
Reference in New Issue
Block a user