neviyn/ObservationDatabase
1
0
Fork 0
Code Issues Pull Requests Releases 1 Wiki Activity

Changed rating button colours.

Browse Source
This commit is contained in:
neviyn 2018-11-14 11:30:43 +00:00
parent 380260dc2d
commit 89ffe0ef21
1 changed files with 215 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

220
frontend/src/views/Observation.vue
View File

@ -90,11 +90,11 @@
<b-form-radio-group buttons button-variant="outline-info" size="lg" <b-form-radio-group buttons button-variant="outline-info" size="lg"
v-bind:value="item.rating" @change="changeRating(index, $event)" v-bind:value="item.rating" @change="changeRating(index, $event)"
required> required>
<b-form-radio value=1>1</b-form-radio> <b-form-radio button-variant="1" value=1>1</b-form-radio>
<b-form-radio value=2>2</b-form-radio> <b-form-radio button-variant="2" value=2>2</b-form-radio>
<b-form-radio value=3>3</b-form-radio> <b-form-radio button-variant="3" value=3>3</b-form-radio>
<b-form-radio value=4>4</b-form-radio> <b-form-radio button-variant="4" value=4>4</b-form-radio>
<b-form-radio value=5>5</b-form-radio> <b-form-radio button-variant="5" value=5>5</b-form-radio>
</b-form-radio-group> </b-form-radio-group>
</b-form-group> </b-form-group>
</b-col> </b-col>
@ -384,4 +384,214 @@ img {
height: 60px; height: 60px;
object-fit: contain; object-fit: contain;
} }
.btn-1 {
color: #ffffff;
background-color: #CC3232;
border-color: #000000;
}
.btn-1:hover,
.btn-1:focus,
.btn-1:active,
.btn-1.active,
.open .dropdown-toggle.btn-1 {
color: #ffffff;
background-color: #4285F4;
border-color: #000000;
}
.btn-1:active,
.btn-1.active,
.open .dropdown-toggle.btn-1 {
background-image: none;
}
.btn-1.disabled,
.btn-1[disabled],
fieldset[disabled] .btn-1,
.btn-1.disabled:hover,
.btn-1[disabled]:hover,
fieldset[disabled] .btn-1:hover,
.btn-1.disabled:focus,
.btn-1[disabled]:focus,
fieldset[disabled] .btn-1:focus,
.btn-1.disabled:active,
.btn-1[disabled]:active,
fieldset[disabled] .btn-1:active,
.btn-1.disabled.active,
.btn-1[disabled].active,
fieldset[disabled] .btn-1.active {
background-color: #CC3232;
border-color: #4285F4;
}
.btn-1 .badge {
color: #CC3232;
background-color: #ffffff;
}
.btn-2 {
color: #ffffff;
background-color: #DB7B2B;
border-color: #000000;
}
.btn-2:hover,
.btn-2:focus,
.btn-2:active,
.btn-2.active,
.open .dropdown-toggle.btn-2 {
color: #ffffff;
background-color: #4285F4;
border-color: #000000;
}
.btn-2:active,
.btn-2.active,
.open .dropdown-toggle.btn-2 {
background-image: none;
}
.btn-2.disabled,
.btn-2[disabled],
fieldset[disabled] .btn-2,
.btn-2.disabled:hover,
.btn-2[disabled]:hover,
fieldset[disabled] .btn-2:hover,
.btn-2.disabled:focus,
.btn-2[disabled]:focus,
fieldset[disabled] .btn-2:focus,
.btn-2.disabled:active,
.btn-2[disabled]:active,
fieldset[disabled] .btn-2:active,
.btn-2.disabled.active,
.btn-2[disabled].active,
fieldset[disabled] .btn-2.active {
background-color: #DB7B2B;
border-color: #4285F4;
}
.btn-2 .badge {
color: #DB7B2B;
background-color: #ffffff;
}
.btn-3 {
color: #ffffff;
background-color: #E7B416;
border-color: #000000;
}
.btn-3:hover,
.btn-3:focus,
.btn-3:active,
.btn-3.active,
.open .dropdown-toggle.btn-3 {
color: #ffffff;
background-color: #4285F4;
border-color: #000000;
}
.btn-3:active,
.btn-3.active,
.open .dropdown-toggle.btn-3 {
background-image: none;
}
.btn-3.disabled,
.btn-3[disabled],
fieldset[disabled] .btn-3,
.btn-3.disabled:hover,
.btn-3[disabled]:hover,
fieldset[disabled] .btn-3:hover,
.btn-3.disabled:focus,
.btn-3[disabled]:focus,
fieldset[disabled] .btn-3:focus,
.btn-3.disabled:active,
.btn-3[disabled]:active,
fieldset[disabled] .btn-3:active,
.btn-3.disabled.active,
.btn-3[disabled].active,
fieldset[disabled] .btn-3.active {
background-color: #E7B416;
border-color: #4285F4;
}
.btn-3 .badge {
color: #E7B416;
background-color: #ffffff;
}
.btn-4 {
color: #ffffff;
background-color: #99C140;
border-color: #000000;
}
.btn-4:hover,
.btn-4:focus,
.btn-4:active,
.btn-4.active,
.open .dropdown-toggle.btn-4 {
color: #ffffff;
background-color: #4285F4;
border-color: #000000;
}
.btn-4:active,
.btn-4.active,
.open .dropdown-toggle.btn-4 {
background-image: none;
}
.btn-4.disabled,
.btn-4[disabled],
fieldset[disabled] .btn-4,
.btn-4.disabled:hover,
.btn-4[disabled]:hover,
fieldset[disabled] .btn-4:hover,
.btn-4.disabled:focus,
.btn-4[disabled]:focus,
fieldset[disabled] .btn-4:focus,
.btn-4.disabled:active,
.btn-4[disabled]:active,
fieldset[disabled] .btn-4:active,
.btn-4.disabled.active,
.btn-4[disabled].active,
fieldset[disabled] .btn-4.active {
background-color: #99C140;
border-color: #4285F4;
}
.btn-4 .badge {
color: #99C140;
background-color: #ffffff;
}
.btn-5 {
color: #ffffff;
background-color: #2DC937;
border-color: #000000;
}
.btn-5:hover,
.btn-5:focus,
.btn-5:active,
.btn-5.active,
.open .dropdown-toggle.btn-5 {
color: #ffffff;
background-color: #4285F4;
border-color: #000000;
}
.btn-5:active,
.btn-5.active,
.open .dropdown-toggle.btn-5 {
background-image: none;
}
.btn-5.disabled,
.btn-5[disabled],
fieldset[disabled] .btn-5,
.btn-5.disabled:hover,
.btn-5[disabled]:hover,
fieldset[disabled] .btn-5:hover,
.btn-5.disabled:focus,
.btn-5[disabled]:focus,
fieldset[disabled] .btn-5:focus,
.btn-5.disabled:active,
.btn-5[disabled]:active,
fieldset[disabled] .btn-5:active,
.btn-5.disabled.active,
.btn-5[disabled].active,
fieldset[disabled] .btn-5.active {
background-color: #2DC937;
border-color: #4285F4;
}
.btn-5 .badge {
color: #2DC937;
background-color: #ffffff;
}
</style> </style>