tmdinosaurcenter
/
tainacan
mirror of https://github.com/tainacan/tainacan
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Several css adjustments. Almost concluding Ref. #30.

This commit is contained in:
mateuswetah 2018-05-09 10:19:58 -03:00
parent 3f323aacc1
commit 42ccbba5e6
9 changed files with 99 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/admin/components/lists/collections-list.vue
View File

@ -19,7 +19,6 @@
checkable
:loading="isLoading"
hoverable
striped
selectable
backend-sorting>
<template slot-scope="props">

1
src/admin/components/lists/fields-list.vue
View File

@ -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; }
}

1
src/admin/components/lists/filters-list.vue
View File

@ -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; }
}

1
src/admin/components/lists/items-list.vue
View File

@ -18,7 +18,6 @@
:checkable="!isOnTheme"
:loading="isLoading"
hoverable
striped
:selectable="!isOnTheme"
backend-sorting>
<template slot-scope="props">

2
src/admin/components/navigation/tainacan-title.vue
View File

@ -136,7 +136,7 @@ export default {
#title-row {
.breadcrumbs {
font-size: 0.85em;
font-size: 12px;
}
.level-left {

3
src/admin/scss/_variables.scss
View File

@ -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

91
src/admin/scss/tainacan-admin.scss
View File

@ -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 {
.control{
&.has-content {
.input, .textarea {
background-color: white;
border: 1px solid $tainacan-input-background;
}
}
.radio {
margin-bottom: 0.2em;
&.has-icons-right {
.icon {
height: 2.0em;
.mdi-alert-circle::before {
content: "\F156" !important;
font-size: 16px !important;
}
.checkbox {
}
}
}
.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,7 +515,8 @@ html {
}
// Tables
.table {
.table-wrapper {
.table {
tbody {
td { border-bottom: 0px solid $gray-light !important; }
}
@ -504,9 +527,11 @@ html {
border: 1px solid #7a7a7a !important;
}
.th-wrap {
font-size: 0.85em !important;
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;
}
}

1
src/classes/field-types/selectbox/Selectbox.vue
View File

@ -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"

3
src/classes/filter-types/selectbox/Selectbox.vue
View File

@ -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"