mirror of
https://github.com/Fabio286/antares.git
synced 2025-06-05 21:59:22 +02:00
style: 🎨 stylelint implementation
This commit is contained in:
@@ -1,43 +1,43 @@
|
||||
@mixin type-colors($types) {
|
||||
@each $type, $color in $types {
|
||||
.type-#{$type} {
|
||||
color: $color;
|
||||
@each $type, $color in $types {
|
||||
.type-#{$type} {
|
||||
color: $color;
|
||||
|
||||
@if $type == "number" {
|
||||
text-align: right;
|
||||
}
|
||||
@if $type == "number" {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include type-colors(
|
||||
(
|
||||
"char": seagreen,
|
||||
"varchar": seagreen,
|
||||
"text": seagreen,
|
||||
"mediumtext": seagreen,
|
||||
"longtext": seagreen,
|
||||
"int": cornflowerblue,
|
||||
"tinyint": cornflowerblue,
|
||||
"smallint": cornflowerblue,
|
||||
"mediumint": cornflowerblue,
|
||||
"bigint": cornflowerblue,
|
||||
"datetime": coral,
|
||||
"date": coral,
|
||||
"time": coral,
|
||||
"timestamp": coral,
|
||||
"bit": lightskyblue,
|
||||
"blob": darkorchid,
|
||||
"mediumblob": darkorchid,
|
||||
"longblob": darkorchid,
|
||||
"unknown": gray,
|
||||
)
|
||||
(
|
||||
"char": seagreen,
|
||||
"varchar": seagreen,
|
||||
"text": seagreen,
|
||||
"mediumtext": seagreen,
|
||||
"longtext": seagreen,
|
||||
"int": cornflowerblue,
|
||||
"tinyint": cornflowerblue,
|
||||
"smallint": cornflowerblue,
|
||||
"mediumint": cornflowerblue,
|
||||
"bigint": cornflowerblue,
|
||||
"datetime": coral,
|
||||
"date": coral,
|
||||
"time": coral,
|
||||
"timestamp": coral,
|
||||
"bit": lightskyblue,
|
||||
"blob": darkorchid,
|
||||
"mediumblob": darkorchid,
|
||||
"longblob": darkorchid,
|
||||
"unknown": gray,
|
||||
)
|
||||
);
|
||||
|
||||
.is-null {
|
||||
color: gray;
|
||||
color: gray;
|
||||
|
||||
&::after {
|
||||
content: "NULL";
|
||||
}
|
||||
&::after {
|
||||
content: "NULL";
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,26 +1,26 @@
|
||||
.dbi {
|
||||
display: inline-block;
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
background-size: cover;
|
||||
display: inline-block;
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
background-size: cover;
|
||||
|
||||
&.dbi-mysql {
|
||||
background-image: url("../images/svg/mysql.svg");
|
||||
}
|
||||
&.dbi-mysql {
|
||||
background-image: url("../images/svg/mysql.svg");
|
||||
}
|
||||
|
||||
&.dbi-maria {
|
||||
background-image: url("../images/svg/mariadb.svg");
|
||||
}
|
||||
&.dbi-maria {
|
||||
background-image: url("../images/svg/mariadb.svg");
|
||||
}
|
||||
|
||||
&.dbi-mssql {
|
||||
background-image: url("../images/svg/mssql.svg");
|
||||
}
|
||||
&.dbi-mssql {
|
||||
background-image: url("../images/svg/mssql.svg");
|
||||
}
|
||||
|
||||
&.dbi-pg {
|
||||
background-image: url("../images/svg/pg.svg");
|
||||
}
|
||||
&.dbi-pg {
|
||||
background-image: url("../images/svg/pg.svg");
|
||||
}
|
||||
|
||||
&.dbi-oracledb {
|
||||
background-image: url("../images/svg/oracledb.svg");
|
||||
}
|
||||
&.dbi-oracledb {
|
||||
background-image: url("../images/svg/oracledb.svg");
|
||||
}
|
||||
}
|
||||
|
||||
@@ -5,12 +5,35 @@
|
||||
display: table;
|
||||
table-layout: fixed;
|
||||
|
||||
&.table-striped {
|
||||
.tbody {
|
||||
.tr:nth-of-type(odd) {
|
||||
background: $bg-color;
|
||||
}
|
||||
}
|
||||
.tbody {
|
||||
display: table-row-group;
|
||||
}
|
||||
|
||||
.tr {
|
||||
display: table-row;
|
||||
}
|
||||
|
||||
// Scollable tables
|
||||
&.table-scroll {
|
||||
display: block;
|
||||
overflow-x: auto;
|
||||
padding-bottom: 0.75rem;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.thead {
|
||||
display: table-header-group;
|
||||
}
|
||||
|
||||
.td,
|
||||
.th {
|
||||
border-bottom: $border-width solid $border-color;
|
||||
padding: $unit-3 $unit-2;
|
||||
display: table-cell;
|
||||
}
|
||||
|
||||
.th {
|
||||
border-bottom-width: $border-width-lg;
|
||||
}
|
||||
|
||||
&,
|
||||
@@ -20,6 +43,7 @@
|
||||
&.selected {
|
||||
background: #333 !important;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background: $bg-color-dark;
|
||||
}
|
||||
@@ -37,33 +61,11 @@
|
||||
}
|
||||
}
|
||||
|
||||
// Scollable tables
|
||||
&.table-scroll {
|
||||
display: block;
|
||||
overflow-x: auto;
|
||||
padding-bottom: 0.75rem;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.thead {
|
||||
display: table-header-group;
|
||||
}
|
||||
|
||||
.tbody {
|
||||
display: table-row-group;
|
||||
}
|
||||
|
||||
.tr {
|
||||
display: table-row;
|
||||
}
|
||||
|
||||
.td,
|
||||
.th {
|
||||
border-bottom: $border-width solid $border-color;
|
||||
padding: $unit-3 $unit-2;
|
||||
display: table-cell;
|
||||
}
|
||||
.th {
|
||||
border-bottom-width: $border-width-lg;
|
||||
&.table-striped {
|
||||
.tbody {
|
||||
.tr:nth-of-type(odd) {
|
||||
background: $bg-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,16 +1,38 @@
|
||||
.material-icons {
|
||||
// TODO: rewrite with rem
|
||||
|
||||
.material-icons{// TODO: rewrite with rem
|
||||
/* Rules for sizing the icon. */
|
||||
&.md-18 { font-size: 18px; }
|
||||
&.md-24 { font-size: 24px; }
|
||||
&.md-36 { font-size: 36px; }
|
||||
&.md-48 { font-size: 48px; }
|
||||
|
||||
/* Rules for using icons as black on a light background. */
|
||||
&.md-dark { color: rgba(0, 0, 0, 0.54); }
|
||||
&.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); }
|
||||
|
||||
/* Rules for using icons as white on a dark background. */
|
||||
&.md-light { color: rgba(255, 255, 255, 1); }
|
||||
&.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); }
|
||||
}
|
||||
/* Rules for sizing the icon. */
|
||||
&.md-18 {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
&.md-24 {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
&.md-36 {
|
||||
font-size: 36px;
|
||||
}
|
||||
|
||||
&.md-48 {
|
||||
font-size: 48px;
|
||||
}
|
||||
|
||||
/* Rules for using icons as black on a light background. */
|
||||
&.md-dark {
|
||||
color: rgba(0, 0, 0, 0.54);
|
||||
}
|
||||
|
||||
&.md-dark.md-inactive {
|
||||
color: rgba(0, 0, 0, 0.26);
|
||||
}
|
||||
|
||||
/* Rules for using icons as white on a dark background. */
|
||||
&.md-light {
|
||||
color: rgba(255, 255, 255, 1);
|
||||
}
|
||||
|
||||
&.md-light.md-inactive {
|
||||
color: rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,9 +1,11 @@
|
||||
.slide-fade-enter-active {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.slide-fade-leave-active {
|
||||
transition: all 0.3s cubic-bezier(1, 0.5, 0.8, 1);
|
||||
}
|
||||
|
||||
.slide-fade-enter,
|
||||
.slide-fade-leave-to {
|
||||
transform: translateX(10px);
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
/*Colors*/
|
||||
/* Colors */
|
||||
$body-bg: #1d1d1d;
|
||||
$body-font-color: #fff;
|
||||
$bg-color: #1d1d1d;
|
||||
@@ -9,9 +9,9 @@ $success-color: #32b643;
|
||||
$error-color: #de3b28;
|
||||
$warning-color: #e0a40c;
|
||||
|
||||
/*Sizes*/
|
||||
/* Sizes */
|
||||
$titlebar-height: 1.5rem;
|
||||
$settingbar-width: 3rem;
|
||||
$explorebar-width: 14rem;
|
||||
$footer-height: 1.5rem;
|
||||
$excluding-size: $footer-height + $titlebar-height;
|
||||
$excluding-size: $footer-height + $titlebar-height;
|
||||
|
||||
@@ -9,109 +9,110 @@
|
||||
@import "~spectre.css/src/spectre-exp";
|
||||
|
||||
body {
|
||||
user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
/*Additions*/
|
||||
/* Additions */
|
||||
@include margin-variant(3, $unit-3);
|
||||
@include margin-variant(4, $unit-4);
|
||||
@include padding-variant(3, $unit-3);
|
||||
@include padding-variant(4, $unit-4);
|
||||
|
||||
.btn.btn-gray {
|
||||
color: #fff;
|
||||
background: $bg-color-gray;
|
||||
color: #fff;
|
||||
background: $bg-color-gray;
|
||||
|
||||
&:hover {
|
||||
background: $bg-color;
|
||||
}
|
||||
&:hover {
|
||||
background: $bg-color;
|
||||
}
|
||||
}
|
||||
|
||||
.p-vcentered {
|
||||
display: flex !important;
|
||||
align-items: center;
|
||||
display: flex !important;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.c-help {
|
||||
cursor: help;
|
||||
cursor: help;
|
||||
}
|
||||
|
||||
// Scrollbars
|
||||
::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: $bg-color-light;
|
||||
background: $bg-color-light;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: rgba($color: #fff, $alpha: 0.5);
|
||||
background: rgba($color: #fff, $alpha: 0.5);
|
||||
|
||||
&:hover {
|
||||
background: rgba($color: #fff, $alpha: 1);
|
||||
}
|
||||
&:hover {
|
||||
background: rgba($color: #fff, $alpha: 1);
|
||||
}
|
||||
}
|
||||
|
||||
// Animations
|
||||
@keyframes rotation {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(359deg);
|
||||
}
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: rotate(359deg);
|
||||
}
|
||||
}
|
||||
|
||||
.rotate {
|
||||
animation: rotation 0.8s infinite linear;
|
||||
animation: rotation 0.8s infinite linear;
|
||||
}
|
||||
|
||||
/*Override*/
|
||||
/* Override */
|
||||
.modal {
|
||||
.modal-overlay,
|
||||
&.active .modal-overlay {
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
.modal-overlay,
|
||||
&.active .modal-overlay {
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
|
||||
.modal-sm .modal-container,
|
||||
.modal-container {
|
||||
box-shadow: 0 0 1px 0px #000;
|
||||
padding: 0;
|
||||
background: $bg-color;
|
||||
.modal-container,
|
||||
.modal-sm .modal-container {
|
||||
box-shadow: 0 0 1px 0 #000;
|
||||
padding: 0;
|
||||
background: $bg-color;
|
||||
|
||||
.modal-header {
|
||||
padding: 0.4rem 0.8rem;
|
||||
text-transform: uppercase;
|
||||
background: $bg-color-gray;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
.modal-header {
|
||||
padding: 0.4rem 0.8rem;
|
||||
text-transform: uppercase;
|
||||
background: $bg-color-gray;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tab {
|
||||
border-color: #272727;
|
||||
border-color: #272727;
|
||||
}
|
||||
|
||||
.panel {
|
||||
border: none;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.badge {
|
||||
&[data-badge],
|
||||
&:not([data-badge]) {
|
||||
&::after {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
&[data-badge],
|
||||
&:not([data-badge]) {
|
||||
&::after {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-select {
|
||||
cursor: pointer;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.form-select,
|
||||
@@ -119,34 +120,35 @@ body {
|
||||
.form-input,
|
||||
.form-checkbox .form-icon,
|
||||
.form-radio .form-icon {
|
||||
border-color: $bg-color-light;
|
||||
background: $bg-color-gray;
|
||||
border-color: $bg-color-light;
|
||||
background: $bg-color-gray;
|
||||
}
|
||||
|
||||
.form-select:not([multiple]):not([size]):focus {
|
||||
border-color: $primary-color;
|
||||
border-color: $primary-color;
|
||||
}
|
||||
|
||||
.input-group .input-group-addon{
|
||||
border-color: #3f3f3f;
|
||||
.input-group .input-group-addon {
|
||||
border-color: #3f3f3f;
|
||||
}
|
||||
|
||||
.menu {
|
||||
font-size: 0.7rem;
|
||||
.menu-item {
|
||||
+ .menu-item {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
font-size: 0.7rem;
|
||||
|
||||
.menu-item {
|
||||
+ .menu-item {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.accordion-body {
|
||||
max-height: 500rem !important;
|
||||
max-height: 500rem !important;
|
||||
}
|
||||
|
||||
.btn.loading {
|
||||
> .material-icons,
|
||||
> span {
|
||||
visibility: hidden;
|
||||
}
|
||||
> .material-icons,
|
||||
> span {
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user