Updated styles for Select, Radius and HelpButton. Ref. #30.

This commit is contained in:
Mateus Machado Luna 2018-05-07 13:55:56 -03:00
parent 7c5d3f1e8b
commit 1c6d173f8d
11 changed files with 52 additions and 25 deletions

View File

@ -54,6 +54,7 @@
</label>
<div class="inline-block">
<b-radio
size="is-small"
@focus="clearErrors('label_status')"
id="tainacan-select-status-publish"
name="status"
@ -63,6 +64,7 @@
</b-radio>
<br>
<b-radio
size="is-small"
@focus="clearErrors('label_status')"
id="tainacan-select-status-private"
name="status"

View File

@ -53,6 +53,7 @@
</label>
<div class="inline-block">
<b-radio
size="is-small"
@focus="clearErrors('label_status')"
id="tainacan-select-status-publish"
name="status"
@ -61,7 +62,8 @@
{{ $i18n.get('publish_visibility') }}
</b-radio>
<br>
<b-radio
<b-radio
size="is-small"
@focus="clearErrors('label_status')"
id="tainacan-select-status-private"
name="status"

View File

@ -674,7 +674,7 @@ export default {
color: $secondary;
margin-bottom: 6px;
&:hover {
background-color: $primary-lighter;
background-color: $primary-light;
cursor: pointer;
}
}

View File

@ -45,7 +45,7 @@ export default {
}
.help-tooltip {
z-index: 99999999999999999999;
color: $secondary;
color: $tertiary;
background-color: $primary-light;
border: none;
display: block;
@ -64,7 +64,7 @@ export default {
padding: 0.8em 0.8em 0em 0.8em;
h5 {
font-size: 16px;
font-size: 14px;
font-weight: 700;
margin-right: 25px;
}
@ -77,7 +77,7 @@ export default {
.help-tooltip-body {
padding: 1.2em;
font-size: 11px;
font-size: 14px;
}
&:before {

View File

@ -47,7 +47,7 @@ const routes = [
{ path: 'fields', component: FieldsList, name: 'FieldsList', meta: {title: i18nGet('title_collection_fields_edition'), icon: 'folder-multiple'} },
{ path: 'filters', component: FiltersList, name: 'FiltersList', meta: {title: i18nGet('title_collection_filters_edition'), icon: 'folder-multiple'} },
{ path: 'events', component: EventsPage, name: 'CollectionEventsPage', meta: {title: i18nGet('title_collection_events'), icon: 'calendar'} }
]
]
},
// { path: '/items', name: 'ItemsPage', component: ItemsPage, meta: {title: i18nGet('title_items_page'), icon: 'file-multiple'} },

View File

@ -189,23 +189,12 @@
min-height: 100%;
height: auto;
.filters-menu {
min-width: $side-menu-width;
max-width: $side-menu-width;
background-color: $primary-lighter;
margin-left: -$page-small-side-padding;
padding-left: $page-small-side-padding
}
.table-container {
margin-right: -$page-small-side-padding;
padding: 3em 2.5em;
}
@media screen and (max-width: 769px) {
.filters-menu {
display: none;
}
.table-container {
margin-right: 0;
padding: .85em 0em;

View File

@ -401,7 +401,7 @@
height: 21px;
width: 23px;
border: none;
background-color: $primary-light;
background-color: $primary-lighter;
color: $tertiary;
padding: 0px;
border-top-right-radius: 2px;

View File

@ -10,7 +10,7 @@ $secondary-invert: findColorInvert($secondary);
$tertiary: #01295c;
$tertiary-invert: findColorInvert($tertiary);
$primary-light:#A5CDD7;
$primary-light:#c1dae0;
$primary-lighter: #e6f6f8;
$primary-dark: #55A0AF;
$primary-darker: darken($primary-dark, 5%);

View File

@ -193,7 +193,7 @@ html {
margin-bottom: 0.2em;
}
.control-label { // The value part in checkbox, radio and switches
color: black;
color: $tainacan-input-color;
padding-left: 0.8em;
font-size: 12px;
}
@ -208,12 +208,16 @@ html {
padding: 2px 25px 2px 15px!important;
margin-top: 0px !important;
margin-bottom: 0px !important;
background-color: $tainacan-input-background;
color: black;
color: $tainacan-input-color;
background-color: white !important;
border: 1px solid $tainacan-input-background;
&:focus>option:checked, &:focus>option:hover {
background-color: $primary-lighter !important;
}
}
&.is-empty select{
background-color: $tainacan-input-background !important;
}
&:not(.is-multiple)::after {
content: "\F35D" !important;
font: normal normal normal 24px/1 "Material Design Icons" !important;
@ -395,7 +399,9 @@ html {
box-shadow: none !important;
}
&:focus input[type="checkbox"] + .check, &:active input[type="checkbox"] + .check, &:hover input[type="checkbox"] + .check {
&:focus input[type="checkbox"] + .check,
&:active input[type="checkbox"] + .check,
&:hover input[type="checkbox"] + .check {
box-shadow: none !important;
border-color: $gray-light !important;
}
@ -405,6 +411,31 @@ html {
border-color: $gray-light !important;
}
}
.b-radio.radio {
input[type="radio"] + .check {
width: 13px !important;
height: 13px !important;
border: 1px solid $gray-light !important;
}
input[type="radio"] + .check::before {
background: black !important;
width: 7px !important;
height: 7px !important;
}
&:focus input[type="radio"] + .check,
&:active input[type="radio"] + .check,
&:hover input[type="radio"] + .check {
box-shadow: none !important;
}
input[type="radio"]:checked + .check {
border-color: $gray-light !important;
}
&:focus input[type="radio"]:checked + .check {
box-shadow: none !important;
}
}
// Tables
.table {

View File

@ -2,6 +2,7 @@
<div>
<b-select
:id = "id"
:placeholder="$i18n.get('label_selectbox_init')"
v-model="selected"
@input="onChecked()">
<option
@ -24,7 +25,7 @@
},
data(){
return {
selected:''
selected: undefined
}
},
props: {
@ -52,7 +53,8 @@
methods: {
onChecked() {
this.$emit('blur');
this.onInput(this.selected)
if (this.selected != undefined)
this.onInput(this.selected)
},
onInput($event) {
this.$emit('input', $event);

View File

@ -99,6 +99,7 @@ export const sendItem = ( { commit }, { collection_id, status }) => {
};
export const updateItem = ({ commit }, { item_id, status }) => {
return new Promise((resolve, reject) => {
axios.tainacan.patch('/items/' + item_id, {
status: status