Several css adjustments. Almost concluding Ref. #30.
This commit is contained in:
mateuswetah
parent
3f323aacc1
commit
42ccbba5e6
|
|
@ -19,7 +19,6 @@
|
|||
checkable
|
||||
:loading="isLoading"
|
||||
hoverable
|
||||
striped
|
||||
selectable
|
||||
backend-sorting>
|
||||
<template slot-scope="props">
|
||||
|
|
|
|||
|
|
@ -457,6 +457,7 @@ export default {
|
|||
|
||||
.switch.is-small {
|
||||
input[type="checkbox"] + .check {
|
||||
background-color: $secondary !important;
|
||||
border: 1.5px solid white !important;
|
||||
&::before { background-color: white !important; }
|
||||
}
|
||||
|
|
|
|||
|
|
@ -588,6 +588,7 @@ export default {
|
|||
|
||||
.switch.is-small {
|
||||
input[type="checkbox"] + .check {
|
||||
background-color: $secondary !important;
|
||||
border: 1.5px solid white !important;
|
||||
&::before { background-color: white !important; }
|
||||
}
|
||||
|
|
|
|||
|
|
@ -18,7 +18,6 @@
|
|||
:checkable="!isOnTheme"
|
||||
:loading="isLoading"
|
||||
hoverable
|
||||
striped
|
||||
:selectable="!isOnTheme"
|
||||
backend-sorting>
|
||||
<template slot-scope="props">
|
||||
|
|
|
|||
|
|
@ -136,7 +136,7 @@ export default {
|
|||
#title-row {
|
||||
|
||||
.breadcrumbs {
|
||||
font-size: 0.85em;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.level-left {
|
||||
|
|
|
|||
|
|
@ -29,6 +29,9 @@ $gray-invert: findColorInvert($gray);
|
|||
$gray-light: #898d8f;
|
||||
$gray-light-invert: findColorInvert($gray-light);
|
||||
|
||||
$danger: #a23939;
|
||||
$danger-invert: findColorInvert($danger);
|
||||
|
||||
@import "../../../node_modules/bulma/sass/utilities/derived-variables.sass";
|
||||
|
||||
// Setup $colors to use as bulma classes
|
||||
|
|
|
|||
|
|
@ -31,8 +31,9 @@ html {
|
|||
font-family: $family-sans-serif;
|
||||
}
|
||||
|
||||
.modal-background {
|
||||
background-color: rgba(0, 0, 0, 0.70);
|
||||
// Link (hover is the same color as secondary
|
||||
a:hover {
|
||||
color: $secondary;
|
||||
}
|
||||
|
||||
/* Rules for sizing the icon. */
|
||||
|
|
@ -79,6 +80,8 @@ html {
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
// Modal
|
||||
.tainacan-page-title, .tainacan-modal-title {
|
||||
h1, h2 {
|
||||
font-size: 20px;
|
||||
|
|
@ -107,6 +110,11 @@ html {
|
|||
}
|
||||
}
|
||||
|
||||
.modal-background {
|
||||
background-color: rgba(0, 0, 0, 0.70);
|
||||
}
|
||||
|
||||
|
||||
// Custom ScrollBar (will work only in Chrome, Opera, Safari, webkit browsers)
|
||||
/* width */
|
||||
::-webkit-scrollbar {
|
||||
|
|
@ -143,9 +151,6 @@ html {
|
|||
border-width: 1px;
|
||||
padding: 2px 30px !important;
|
||||
}
|
||||
.button.is-outlined {
|
||||
color: #150e38;
|
||||
}
|
||||
&.has-only-save {
|
||||
justify-content: end !important;
|
||||
}
|
||||
|
|
@ -180,17 +185,28 @@ html {
|
|||
border: 1px solid $tainacan-input-background;
|
||||
}
|
||||
}
|
||||
.control.has-content {
|
||||
.input, .textarea {
|
||||
background-color: white;
|
||||
border: 1px solid $tainacan-input-background;
|
||||
.control{
|
||||
&.has-content {
|
||||
.input, .textarea {
|
||||
background-color: white;
|
||||
border: 1px solid $tainacan-input-background;
|
||||
}
|
||||
}
|
||||
&.has-icons-right {
|
||||
.icon {
|
||||
height: 2.0em;
|
||||
.mdi-alert-circle::before {
|
||||
content: "\F156" !important;
|
||||
font-size: 16px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.radio {
|
||||
margin-bottom: 0.2em;
|
||||
}
|
||||
.checkbox {
|
||||
margin-bottom: 0.2em;
|
||||
.radio, .checkbox {
|
||||
margin-bottom: 0.2em;
|
||||
&.is-danger {
|
||||
border-color: $danger;
|
||||
}
|
||||
}
|
||||
.control-label { // The value part in checkbox, radio and switches
|
||||
color: $tainacan-input-color;
|
||||
|
|
@ -239,13 +255,18 @@ html {
|
|||
&.is-success:hover, &.is-success:focus {
|
||||
background: $success !important;
|
||||
}
|
||||
&.is-white:hover, &.is-white:focus {
|
||||
&.is-white:hover, &.is-white:focus, &.is-outlined:hover, &.is-outlined:focus {
|
||||
background: $white !important;
|
||||
}
|
||||
&:active {
|
||||
-webkit-transform: none !important;
|
||||
transform: none !important;
|
||||
}
|
||||
&.is-outlined {
|
||||
color: #150e38 !important;
|
||||
background-color: white;
|
||||
border-color: $gray-light !important;
|
||||
}
|
||||
}
|
||||
.button.is-small {
|
||||
height: 26px !important;
|
||||
|
|
@ -261,13 +282,14 @@ html {
|
|||
padding-top: 0px !important;
|
||||
select {
|
||||
border: none;
|
||||
border-radius: 6px !important;
|
||||
border-radius: 1px !important;
|
||||
font-weight: normal;
|
||||
font-size: 14px !important;
|
||||
height: 30px !important;
|
||||
padding: 2px 25px 2px 15px!important;
|
||||
margin-top: 0px !important;
|
||||
margin-bottom: 0px !important;
|
||||
color: $tainacan-input-color;
|
||||
option:checked, option:hover {
|
||||
background-color: $primary-lighter !important;
|
||||
}
|
||||
|
|
@ -293,7 +315,7 @@ html {
|
|||
.button {
|
||||
border: none;
|
||||
.icon {
|
||||
color: $primary;
|
||||
color: $secondary;
|
||||
align-items: start;
|
||||
}
|
||||
}
|
||||
|
|
@ -493,20 +515,23 @@ html {
|
|||
}
|
||||
|
||||
// Tables
|
||||
.table {
|
||||
tbody {
|
||||
td { border-bottom: 0px solid $gray-light !important; }
|
||||
}
|
||||
.b-checkbox.checkbox input[type="checkbox"] + .check {
|
||||
width: 0.85em !important;
|
||||
height: 0.85em !important;
|
||||
border-radius: 2px !important;
|
||||
border: 1px solid #7a7a7a !important;
|
||||
}
|
||||
.th-wrap {
|
||||
font-size: 0.85em !important;
|
||||
font-weight: normal !important;
|
||||
.table-wrapper {
|
||||
.table {
|
||||
tbody {
|
||||
td { border-bottom: 0px solid $gray-light !important; }
|
||||
}
|
||||
.b-checkbox.checkbox input[type="checkbox"] + .check {
|
||||
width: 0.85em !important;
|
||||
height: 0.85em !important;
|
||||
border-radius: 2px !important;
|
||||
border: 1px solid #7a7a7a !important;
|
||||
}
|
||||
.th-wrap {
|
||||
font-size: 12px !important;
|
||||
font-weight: normal !important;
|
||||
}
|
||||
}
|
||||
margin-bottom: 0px !important;
|
||||
}
|
||||
.pagination-area {
|
||||
display: flex;
|
||||
|
|
@ -514,8 +539,8 @@ html {
|
|||
align-items: center;
|
||||
font-size: 0.85em !important;
|
||||
font-weight: normal !important;
|
||||
border-top: 1px solid $gray-light;
|
||||
padding: 0.85em 1.0em;
|
||||
border-top: 1px solid $gray;
|
||||
padding: 0em 1.0em;
|
||||
color: $gray-light;
|
||||
|
||||
.shown-items {
|
||||
|
|
@ -541,12 +566,44 @@ html {
|
|||
|
||||
.pagination {
|
||||
flex-grow: 1;
|
||||
|
||||
a[disabled="disabled"] {
|
||||
color: $gray-light;
|
||||
}
|
||||
.pagination-link, .pagination-previous, .pagination-next {
|
||||
background-color: transparent;
|
||||
color: $secondary;
|
||||
border: none;
|
||||
}
|
||||
.pagination-link.is-current {
|
||||
color: $gray-light;
|
||||
}
|
||||
.pagination-link::after:not(:last-child) {
|
||||
content: ',';
|
||||
color: $gray-light;
|
||||
}
|
||||
.mdi-chevron-left::before {
|
||||
content: "\F4AE";
|
||||
font-size: 20px;
|
||||
}
|
||||
.mdi-chevron-right::before {
|
||||
content: "\F4AD";
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Tabs
|
||||
.tabs {
|
||||
a {
|
||||
font-size: 13px;
|
||||
margin-bottom: -3px;
|
||||
&:hover{
|
||||
border-bottom-color: transparent;
|
||||
}
|
||||
}
|
||||
li.is-active a {
|
||||
border-bottom: 5px solid $primary;
|
||||
color: $primary;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@
|
|||
:id = "id"
|
||||
:placeholder="$i18n.get('label_selectbox_init')"
|
||||
v-model="selected"
|
||||
:class="{'is-empty': selected == undefined || selected == ''}"
|
||||
@input="onChecked()">
|
||||
<option
|
||||
v-for="(option, index) in getOptions"
|
||||
|
|
|
|||
|
|
@ -5,7 +5,8 @@
|
|||
:loading = "isLoading"
|
||||
v-model = "selected"
|
||||
@input = "onSelect($event)"
|
||||
expanded>
|
||||
expanded
|
||||
:class="{'is-empty': selected == undefined || selected == ''}">
|
||||
<option value="">{{ $i18n.get('label_selectbox_init') }}...</option>
|
||||
<option
|
||||
v-for="(option, index) in options"
|
||||
|
|
|
|||
Loading…
Reference in New Issue