prettier scss

This commit is contained in:
Sebastian 2021-11-10 10:02:25 -03:00
parent 77070f9f74
commit e03b0d1b9b
No known key found for this signature in database
GPG Key ID: BE4FF68352439FC1
15 changed files with 141 additions and 127 deletions

View File

@ -1,4 +1,3 @@
.rdp-picker { .rdp-picker {
display: flex; display: flex;
height: 175px; height: 175px;

View File

@ -19,38 +19,38 @@
* @author Sebastian Javier Marchano (sebasjm) * @author Sebastian Javier Marchano (sebasjm)
*/ */
html { html {
&.has-aside-left { &.has-aside-left {
&.has-aside-expanded { &.has-aside-expanded {
nav.navbar, nav.navbar,
body { body {
padding-left: $aside-width; padding-left: $aside-width;
}
} }
aside.is-placed-left { }
aside.is-placed-left {
display: block;
}
}
}
aside.aside.is-expanded {
width: $aside-width;
.menu-list {
@include icon-with-update-mark($aside-icon-width);
span.menu-item-label {
display: inline-block;
}
li.is-active {
ul {
display: block; display: block;
} }
background-color: $body-background-color;
} }
} }
}
aside.aside.is-expanded {
width: $aside-width;
.menu-list {
@include icon-with-update-mark($aside-icon-width);
span.menu-item-label {
display: inline-block;
}
li.is-active {
ul {
display: block;
}
background-color: $body-background-color;
}
}
}
aside.aside { aside.aside {
display: none; display: none;
@ -126,4 +126,3 @@ aside.aside {
margin-bottom: $default-padding * 0.5; margin-bottom: $default-padding * 0.5;
} }
} }

View File

@ -14,7 +14,7 @@
GNU Taler; see the file COPYING. If not, see <http://www.gnu.org/licenses/> GNU Taler; see the file COPYING. If not, see <http://www.gnu.org/licenses/>
*/ */
/** /**
* *
* @author Sebastian Javier Marchano (sebasjm) * @author Sebastian Javier Marchano (sebasjm)
*/ */
@ -39,7 +39,7 @@
&.is-card-widget { &.is-card-widget {
.card-content { .card-content {
padding: $default-padding * .5; padding: $default-padding * 0.5;
} }
} }

View File

@ -17,30 +17,29 @@
:root { :root {
--primary-color: #3298dc; --primary-color: #3298dc;
--primary-text-color-dark: rgba(0,0,0,.87); --primary-text-color-dark: rgba(0, 0, 0, 0.87);
--secondary-text-color-dark: rgba(0,0,0,.57); --secondary-text-color-dark: rgba(0, 0, 0, 0.57);
--disabled-text-color-dark: rgba(0,0,0,.13); --disabled-text-color-dark: rgba(0, 0, 0, 0.13);
--primary-text-color-light: rgba(255,255,255,.87); --primary-text-color-light: rgba(255, 255, 255, 0.87);
--secondary-text-color-light: rgba(255,255,255,.57); --secondary-text-color-light: rgba(255, 255, 255, 0.57);
--disabled-text-color-light: rgba(255,255,255,.13); --disabled-text-color-light: rgba(255, 255, 255, 0.13);
--font-stack: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif; --font-stack: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
--primary-card-color: #fff; --primary-card-color: #fff;
--primary-background-color: #f2f2f2; --primary-background-color: #f2f2f2;
--box-shadow-lvl-1: 0 1px 3px rgba(0, 0, 0, 0.12), --box-shadow-lvl-1: 0 1px 3px rgba(0, 0, 0, 0.12),
0 1px 2px rgba(0, 0, 0, 0.24); 0 1px 2px rgba(0, 0, 0, 0.24);
--box-shadow-lvl-2: 0 3px 6px rgba(0, 0, 0, 0.16), --box-shadow-lvl-2: 0 3px 6px rgba(0, 0, 0, 0.16),
0 3px 6px rgba(0, 0, 0, 0.23); 0 3px 6px rgba(0, 0, 0, 0.23);
--box-shadow-lvl-3: 0 10px 20px rgba(0, 0, 0, 0.19), --box-shadow-lvl-3: 0 10px 20px rgba(0, 0, 0, 0.19),
0 6px 6px rgba(0, 0, 0, 0.23); 0 6px 6px rgba(0, 0, 0, 0.23);
--box-shadow-lvl-4: 0 14px 28px rgba(0, 0, 0, 0.25), --box-shadow-lvl-4: 0 14px 28px rgba(0, 0, 0, 0.25),
0 10px 10px rgba(0, 0, 0, 0.22); 0 10px 10px rgba(0, 0, 0, 0.22);
} }
.home .datePicker div { .home .datePicker div {
margin-top: 0px; margin-top: 0px;
margin-bottom: 0px; margin-bottom: 0px;
@ -56,7 +55,7 @@
width: 90vw; width: 90vw;
max-width: 448px; max-width: 448px;
transform-origin: top left; transform-origin: top left;
transition: transform .22s ease-in-out, opacity .22s ease-in-out; transition: transform 0.22s ease-in-out, opacity 0.22s ease-in-out;
top: 50%; top: 50%;
left: 50%; left: 50%;
opacity: 0; opacity: 0;
@ -75,7 +74,8 @@
height: 100px; height: 100px;
background: var(--primary-color); background: var(--primary-color);
h2, h3 { h2,
h3 {
cursor: pointer; cursor: pointer;
color: #fff; color: #fff;
line-height: 1; line-height: 1;
@ -85,7 +85,7 @@
} }
h3 { h3 {
color: rgba(255,255,255,.57); color: rgba(255, 255, 255, 0.57);
font-size: 18px; font-size: 18px;
padding-bottom: 2px; padding-bottom: 2px;
} }
@ -135,7 +135,9 @@
text-align: center; text-align: center;
// there's probably a better way to do this, but wanted to try out CSS grid // there's probably a better way to do this, but wanted to try out CSS grid
grid-template-columns: calc(100% / 7) calc(100% / 7) calc(100% / 7) calc(100% / 7) calc(100% / 7) calc(100% / 7) calc(100% / 7); grid-template-columns: calc(100% / 7) calc(100% / 7) calc(100% / 7) calc(
100% / 7
) calc(100% / 7) calc(100% / 7) calc(100% / 7);
span { span {
color: var(--secondary-text-color-dark); color: var(--secondary-text-color-dark);
@ -149,14 +151,16 @@
width: 100%; width: 100%;
display: grid; display: grid;
text-align: center; text-align: center;
grid-template-columns: calc(100% / 7) calc(100% / 7) calc(100% / 7) calc(100% / 7) calc(100% / 7) calc(100% / 7) calc(100% / 7); grid-template-columns: calc(100% / 7) calc(100% / 7) calc(100% / 7) calc(
100% / 7
) calc(100% / 7) calc(100% / 7) calc(100% / 7);
span { span {
color: var(--primary-text-color-dark); color: var(--primary-text-color-dark);
line-height: 42px; line-height: 42px;
font-size: 14px; font-size: 14px;
display: inline-grid; display: inline-grid;
transition: color .22s; transition: color 0.22s;
height: 42px; height: 42px;
position: relative; position: relative;
cursor: pointer; cursor: pointer;
@ -164,7 +168,7 @@
border-radius: 50%; border-radius: 50%;
&::before { &::before {
content: ''; content: "";
position: absolute; position: absolute;
z-index: -1; z-index: -1;
height: 42px; height: 42px;
@ -172,12 +176,12 @@
left: calc(50% - 21px); left: calc(50% - 21px);
background: var(--primary-color); background: var(--primary-color);
border-radius: 50%; border-radius: 50%;
transition: transform .22s, opacity .22s; transition: transform 0.22s, opacity 0.22s;
transform: scale(0); transform: scale(0);
opacity: 0; opacity: 0;
} }
&[disabled=true] { &[disabled="true"] {
cursor: unset; cursor: unset;
} }
@ -186,7 +190,7 @@
} }
&.datePicker--selected { &.datePicker--selected {
color: rgba(255,255,255,.87); color: rgba(255, 255, 255, 0.87);
&:before { &:before {
transform: scale(1); transform: scale(1);
@ -236,9 +240,10 @@
appearance: none; appearance: none;
padding: 0 16px; padding: 0 16px;
border-radius: 3px; border-radius: 3px;
transition: background-color .13s; transition: background-color 0.13s;
&:hover, &:focus { &:hover,
&:focus {
outline: none; outline: none;
background-color: var(--disabled-text-color-dark); background-color: var(--disabled-text-color-dark);
} }
@ -253,6 +258,6 @@
left: 0; left: 0;
bottom: 0; bottom: 0;
right: 0; right: 0;
background: rgba(0,0,0,.52); background: rgba(0, 0, 0, 0.52);
animation: fadeIn .22s forwards; animation: fadeIn 0.22s forwards;
} }

View File

@ -14,7 +14,7 @@
GNU Taler; see the file COPYING. If not, see <http://www.gnu.org/licenses/> GNU Taler; see the file COPYING. If not, see <http://www.gnu.org/licenses/>
*/ */
/** /**
* *
* @author Sebastian Javier Marchano (sebasjm) * @author Sebastian Javier Marchano (sebasjm)
*/ */

View File

@ -14,7 +14,7 @@
GNU Taler; see the file COPYING. If not, see <http://www.gnu.org/licenses/> GNU Taler; see the file COPYING. If not, see <http://www.gnu.org/licenses/>
*/ */
/** /**
* *
* @author Sebastian Javier Marchano (sebasjm) * @author Sebastian Javier Marchano (sebasjm)
*/ */
@ -22,11 +22,12 @@
.field { .field {
&.has-check { &.has-check {
.field-body { .field-body {
margin-top: $default-padding * .125; margin-top: $default-padding * 0.125;
} }
} }
.control { .control {
.mdi-24px.mdi-set, .mdi-24px.mdi:before { .mdi-24px.mdi-set,
.mdi-24px.mdi:before {
font-size: inherit; font-size: inherit;
} }
} }
@ -37,28 +38,34 @@
} }
} }
.input, .textarea, select { .input,
.textarea,
select {
box-shadow: none; box-shadow: none;
&:focus, &:active { &:focus,
box-shadow: none!important; &:active {
box-shadow: none !important;
} }
} }
.switch input[type=checkbox]+.check:before { .switch input[type="checkbox"] + .check:before {
box-shadow: none; box-shadow: none;
} }
.switch, .b-checkbox.checkbox { .switch,
input[type=checkbox] { .b-checkbox.checkbox {
&:focus + .check, &:focus:checked + .check { input[type="checkbox"] {
box-shadow: none!important; &:focus + .check,
&:focus:checked + .check {
box-shadow: none !important;
} }
} }
} }
.b-checkbox.checkbox input[type=checkbox], .b-radio.radio input[type=radio] { .b-checkbox.checkbox input[type="checkbox"],
&+.check { .b-radio.radio input[type="radio"] {
& + .check {
border: $checkbox-border; border: $checkbox-border;
} }
} }

View File

@ -14,7 +14,7 @@
GNU Taler; see the file COPYING. If not, see <http://www.gnu.org/licenses/> GNU Taler; see the file COPYING. If not, see <http://www.gnu.org/licenses/>
*/ */
/** /**
* *
* @author Sebastian Javier Marchano (sebasjm) * @author Sebastian Javier Marchano (sebasjm)
*/ */
@ -32,17 +32,17 @@ section.hero.is-hero-bar {
} }
> div > .level { > div > .level {
margin-bottom: $default-padding * .5; margin-bottom: $default-padding * 0.5;
} }
.subtitle + p { .subtitle + p {
margin-top: $default-padding * .5; margin-top: $default-padding * 0.5;
} }
} }
.button { .button {
&.is-hero-button { &.is-hero-button {
background-color: rgba($white, .5); background-color: rgba($white, 0.5);
font-weight: 300; font-weight: 300;
@include transition(background-color); @include transition(background-color);

View File

@ -14,7 +14,7 @@
GNU Taler; see the file COPYING. If not, see <http://www.gnu.org/licenses/> GNU Taler; see the file COPYING. If not, see <http://www.gnu.org/licenses/>
*/ */
/** /**
* *
* @author Sebastian Javier Marchano (sebasjm) * @author Sebastian Javier Marchano (sebasjm)
*/ */

View File

@ -14,7 +14,7 @@
GNU Taler; see the file COPYING. If not, see <http://www.gnu.org/licenses/> GNU Taler; see the file COPYING. If not, see <http://www.gnu.org/licenses/>
*/ */
/** /**
* *
* @author Sebastian Javier Marchano (sebasjm) * @author Sebastian Javier Marchano (sebasjm)
*/ */
@ -23,12 +23,12 @@
transition: $t 250ms ease-in-out 50ms; transition: $t 250ms ease-in-out 50ms;
} }
@mixin icon-with-update-mark ($icon-base-width) { @mixin icon-with-update-mark($icon-base-width) {
.icon { .icon {
width: $icon-base-width; width: $icon-base-width;
&.has-update-mark:after { &.has-update-mark:after {
right: ($icon-base-width / 2) - .85; right: ($icon-base-width / 2) - 0.85;
} }
} }
} }

View File

@ -14,7 +14,7 @@
GNU Taler; see the file COPYING. If not, see <http://www.gnu.org/licenses/> GNU Taler; see the file COPYING. If not, see <http://www.gnu.org/licenses/>
*/ */
/** /**
* *
* @author Sebastian Javier Marchano (sebasjm) * @author Sebastian Javier Marchano (sebasjm)
*/ */

View File

@ -14,7 +14,7 @@
GNU Taler; see the file COPYING. If not, see <http://www.gnu.org/licenses/> GNU Taler; see the file COPYING. If not, see <http://www.gnu.org/licenses/>
*/ */
/** /**
* *
* @author Sebastian Javier Marchano (sebasjm) * @author Sebastian Javier Marchano (sebasjm)
*/ */
@ -25,7 +25,7 @@ nav.navbar {
.navbar-item { .navbar-item {
&.has-user-avatar { &.has-user-avatar {
.is-user-avatar { .is-user-avatar {
margin-right: $default-padding * .5; margin-right: $default-padding * 0.5;
display: inline-flex; display: inline-flex;
width: $navbar-avatar-size; width: $navbar-avatar-size;
height: $navbar-avatar-size; height: $navbar-avatar-size;
@ -98,11 +98,11 @@ nav.navbar {
.navbar-item { .navbar-item {
.icon:first-child { .icon:first-child {
margin-right: $default-padding * .5; margin-right: $default-padding * 0.5;
} }
&.has-dropdown { &.has-dropdown {
>.navbar-link { > .navbar-link {
background-color: $white-ter; background-color: $white-ter;
.icon:last-child { .icon:last-child {
display: none; display: none;
@ -111,11 +111,11 @@ nav.navbar {
} }
&.has-user-avatar { &.has-user-avatar {
>.navbar-link { > .navbar-link {
display: flex; display: flex;
align-items: center; align-items: center;
padding-top: $default-padding * .5; padding-top: $default-padding * 0.5;
padding-bottom: $default-padding * .5; padding-bottom: $default-padding * 0.5;
} }
} }
} }
@ -131,7 +131,7 @@ nav.navbar {
&:not(.is-desktop-icon-only) { &:not(.is-desktop-icon-only) {
.icon:first-child { .icon:first-child {
margin-right: $default-padding * .5; margin-right: $default-padding * 0.5;
} }
} }
&.is-desktop-icon-only { &.is-desktop-icon-only {

View File

@ -14,7 +14,7 @@
GNU Taler; see the file COPYING. If not, see <http://www.gnu.org/licenses/> GNU Taler; see the file COPYING. If not, see <http://www.gnu.org/licenses/>
*/ */
/** /**
* *
* @author Sebastian Javier Marchano (sebasjm) * @author Sebastian Javier Marchano (sebasjm)
*/ */
@ -26,7 +26,8 @@ table.table {
} }
} }
td, th { td,
th {
&.checkbox-cell { &.checkbox-cell {
.b-checkbox.checkbox:not(.button) { .b-checkbox.checkbox:not(.button) {
margin-right: 0; margin-right: 0;
@ -83,7 +84,9 @@ table.table {
} }
} }
.pagination-previous, .pagination-next, .pagination-link { .pagination-previous,
.pagination-next,
.pagination-link {
border-color: $button-border-color; border-color: $button-border-color;
color: $base-color; color: $base-color;
@ -108,24 +111,25 @@ table.table {
&.has-mobile-sort-spaced { &.has-mobile-sort-spaced {
.b-table { .b-table {
.field.table-mobile-sort { .field.table-mobile-sort {
padding-top: $default-padding * .5; padding-top: $default-padding * 0.5;
} }
} }
} }
} }
.b-table { .b-table {
.field.table-mobile-sort { .field.table-mobile-sort {
padding: 0 $default-padding * .5; padding: 0 $default-padding * 0.5;
} }
.table-wrapper.has-mobile-cards { .table-wrapper.has-mobile-cards {
tr { tr {
box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1); box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1);
margin-bottom: 3px!important; margin-bottom: 3px !important;
} }
td { td {
&.is-progress-col { &.is-progress-col {
span, progress { span,
progress {
display: flex; display: flex;
width: 45%; width: 45%;
align-items: center; align-items: center;
@ -133,11 +137,13 @@ table.table {
} }
} }
&.checkbox-cell, &.is-image-cell { &.checkbox-cell,
border-bottom: 0!important; &.is-image-cell {
border-bottom: 0 !important;
} }
&.checkbox-cell, &.is-actions-cell { &.checkbox-cell,
&.is-actions-cell {
&:before { &:before {
display: none; display: none;
} }
@ -163,7 +169,7 @@ table.table {
.image { .image {
width: $table-avatar-size-mobile; width: $table-avatar-size-mobile;
height: auto; height: auto;
margin: 0 auto $default-padding * .25; margin: 0 auto $default-padding * 0.25;
} }
} }
} }

View File

@ -14,12 +14,11 @@
GNU Taler; see the file COPYING. If not, see <http://www.gnu.org/licenses/> GNU Taler; see the file COPYING. If not, see <http://www.gnu.org/licenses/>
*/ */
/** /**
* *
* @author Sebastian Javier Marchano (sebasjm) * @author Sebastian Javier Marchano (sebasjm)
*/ */
.is-tiles-wrapper { .is-tiles-wrapper {
margin-bottom: $default-padding; margin-bottom: $default-padding;
} }

View File

@ -14,7 +14,7 @@
GNU Taler; see the file COPYING. If not, see <http://www.gnu.org/licenses/> GNU Taler; see the file COPYING. If not, see <http://www.gnu.org/licenses/>
*/ */
/** /**
* *
* @author Sebastian Javier Marchano (sebasjm) * @author Sebastian Javier Marchano (sebasjm)
*/ */
@ -26,14 +26,14 @@ section.section.is-title-bar {
ul { ul {
li { li {
display: inline-block; display: inline-block;
padding: 0 $default-padding * .5 0 0; padding: 0 $default-padding * 0.5 0 0;
font-size: $default-padding; font-size: $default-padding;
color: $title-bar-color; color: $title-bar-color;
&:after { &:after {
display: inline-block; display: inline-block;
content: '/'; content: "/";
padding-left: $default-padding * .5; padding-left: $default-padding * 0.5;
} }
&:last-child { &:last-child {

View File

@ -190,7 +190,6 @@ div[data-tooltip]::before {
border: solid 1px #f2e9bf; border: solid 1px #f2e9bf;
} }
.home { .home {
padding: 1em 1em; padding: 1em 1em;
min-height: 100%; min-height: 100%;
@ -218,9 +217,9 @@ div[data-tooltip]::before {
} }
.profile { .profile {
padding: 56px 20px; padding: 56px 20px;
min-height: 100%; min-height: 100%;
width: 100%; width: 100%;
} }
.notfound { .notfound {