mirror of
https://github.com/Fabio286/antares.git
synced 2025-06-05 21:59:22 +02:00
Results table improvements
This commit is contained in:
@ -3,44 +3,41 @@
|
||||
.type-#{$type} {
|
||||
color: $color;
|
||||
|
||||
@if $type == 'number'{
|
||||
@if $type == "number" {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include type-colors((
|
||||
"char": seagreen,
|
||||
"varchar": seagreen,
|
||||
"text": seagreen,
|
||||
"mediumtext": seagreen,
|
||||
"longtext": seagreen,
|
||||
@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,
|
||||
)
|
||||
);
|
||||
|
||||
"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{
|
||||
.is-null {
|
||||
color: gray;
|
||||
|
||||
&::after{
|
||||
content: 'NULL';
|
||||
&::after {
|
||||
content: "NULL";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,26 +1,26 @@
|
||||
.dbi{
|
||||
.dbi {
|
||||
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");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,68 +1,69 @@
|
||||
.table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
width: 100%;
|
||||
display: table;
|
||||
|
||||
&.table-striped {
|
||||
.tbody {
|
||||
.tr:nth-of-type(odd) {
|
||||
background: $bg-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&,
|
||||
&.table-striped {
|
||||
.tbody {
|
||||
.tr {
|
||||
&.selected{
|
||||
background: #333!important;
|
||||
}
|
||||
&.active {
|
||||
background: $bg-color-dark;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.table-hover {
|
||||
.tbody {
|
||||
.tr {
|
||||
&:hover {
|
||||
background: $bg-color-dark;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Scollable tables
|
||||
&.table-scroll {
|
||||
display: block;
|
||||
overflow-x: auto;
|
||||
padding-bottom: .75rem;
|
||||
white-space: nowrap;
|
||||
}
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
width: 100%;
|
||||
display: table;
|
||||
table-layout: fixed;
|
||||
|
||||
.thead{
|
||||
&.table-striped {
|
||||
.tbody {
|
||||
.tr:nth-of-type(odd) {
|
||||
background: $bg-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&,
|
||||
&.table-striped {
|
||||
.tbody {
|
||||
.tr {
|
||||
&.selected {
|
||||
background: #333 !important;
|
||||
}
|
||||
&.active {
|
||||
background: $bg-color-dark;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.table-hover {
|
||||
.tbody {
|
||||
.tr {
|
||||
&:hover {
|
||||
background: $bg-color-dark;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Scollable tables
|
||||
&.table-scroll {
|
||||
display: block;
|
||||
overflow-x: auto;
|
||||
padding-bottom: 0.75rem;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.thead {
|
||||
display: table-header-group;
|
||||
}
|
||||
|
||||
.tbody{
|
||||
}
|
||||
|
||||
.tbody {
|
||||
display: table-row-group;
|
||||
}
|
||||
}
|
||||
|
||||
.tr{
|
||||
.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;
|
||||
}
|
||||
}
|
||||
.td,
|
||||
.th {
|
||||
border-bottom: $border-width solid $border-color;
|
||||
padding: $unit-3 $unit-2;
|
||||
display: table-cell;
|
||||
}
|
||||
.th {
|
||||
border-bottom-width: $border-width-lg;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,10 +1,11 @@
|
||||
.slide-fade-enter-active {
|
||||
transition: all .3s ease;
|
||||
}
|
||||
.slide-fade-leave-active {
|
||||
transition: all .3s cubic-bezier(1.0, 0.5, 0.8, 1.0);
|
||||
}
|
||||
.slide-fade-enter, .slide-fade-leave-to {
|
||||
transform: translateX(10px);
|
||||
opacity: 0;
|
||||
}
|
||||
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);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
@ -1,4 +1,3 @@
|
||||
|
||||
@import "~spectre.css/src/variables";
|
||||
@import "variables";
|
||||
@import "transitions";
|
||||
@ -9,7 +8,7 @@
|
||||
@import "~spectre.css/src/spectre";
|
||||
@import "~spectre.css/src/spectre-exp";
|
||||
|
||||
body{
|
||||
body {
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
@ -19,21 +18,21 @@ body{
|
||||
@include padding-variant(3, $unit-3);
|
||||
@include padding-variant(4, $unit-4);
|
||||
|
||||
.btn.btn-gray{
|
||||
.btn.btn-gray {
|
||||
color: #fff;
|
||||
background: $bg-color-gray;
|
||||
|
||||
&:hover{
|
||||
&:hover {
|
||||
background: $bg-color;
|
||||
}
|
||||
}
|
||||
|
||||
.p-vcentered{
|
||||
display: flex!important;
|
||||
.p-vcentered {
|
||||
display: flex !important;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.c-help{
|
||||
.c-help {
|
||||
cursor: help;
|
||||
}
|
||||
|
||||
@ -42,109 +41,108 @@ body{
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: $bg-color-light;
|
||||
background: $bg-color-light;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: rgba($color: #FFF, $alpha: .5);
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: rgba($color: #fff, $alpha: 0.5);
|
||||
|
||||
&:hover {
|
||||
background: rgba($color: #FFF, $alpha: 1);
|
||||
background: rgba($color: #fff, $alpha: 1);
|
||||
}
|
||||
}
|
||||
|
||||
// Animations
|
||||
@keyframes rotation {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(359deg);
|
||||
transform: rotate(359deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.rotate {
|
||||
animation: rotation .8s infinite linear;
|
||||
animation: rotation 0.8s infinite linear;
|
||||
}
|
||||
|
||||
/*Override*/
|
||||
.modal{
|
||||
.modal {
|
||||
.modal-overlay,
|
||||
&.active .modal-overlay{
|
||||
&.active .modal-overlay {
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
|
||||
|
||||
.modal-sm .modal-container,
|
||||
.modal-container{
|
||||
.modal-container {
|
||||
box-shadow: 0 0 1px 0px #000;
|
||||
padding: 0;
|
||||
background: $bg-color;
|
||||
|
||||
.modal-header{
|
||||
padding: .4rem .8rem;
|
||||
|
||||
.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;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tab{
|
||||
.tab {
|
||||
border-color: #272727;
|
||||
}
|
||||
|
||||
.panel{
|
||||
.panel {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.badge{
|
||||
.badge {
|
||||
&[data-badge],
|
||||
&:not([data-badge]){
|
||||
&:not([data-badge]) {
|
||||
&::after {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-select{
|
||||
.form-select {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.form-select,
|
||||
.form-select:not([multiple]):not([size]),
|
||||
.form-input,
|
||||
.form-checkbox .form-icon,
|
||||
.form-radio .form-icon{
|
||||
.form-checkbox .form-icon,
|
||||
.form-radio .form-icon {
|
||||
border-color: $bg-color-light;
|
||||
background: $bg-color-gray;
|
||||
}
|
||||
|
||||
.form-select:not([multiple]):not([size]):focus{
|
||||
.form-select:not([multiple]):not([size]):focus {
|
||||
border-color: $primary-color;
|
||||
}
|
||||
|
||||
.menu{
|
||||
font-size: .7rem;
|
||||
.menu {
|
||||
font-size: 0.7rem;
|
||||
.menu-item {
|
||||
+ .menu-item{
|
||||
+ .menu-item {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.accordion-body {
|
||||
max-height: 500rem!important;
|
||||
max-height: 500rem !important;
|
||||
}
|
||||
|
||||
.btn.loading {
|
||||
> .material-icons,
|
||||
> span{
|
||||
> span {
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user