Add radiobutton styling to survey
This commit is contained in:
Ramon Wenger
parent
dd1bf56f49
commit
a9b10fdf88
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<svg id="shape" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><title>tick</title>
|
||||
<svg id="shape" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
|
||||
<polygon points="41.46 77.72 10 46.26 16.89 39.37 41.46 63.93 83.11 22.28 90 29.18 41.46 77.72"/>
|
||||
</svg>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -34,77 +34,3 @@
|
|||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "@/styles/_variables.scss";
|
||||
|
||||
.base-input-container {
|
||||
display: inline-flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
margin-right: 10px;
|
||||
cursor: pointer;
|
||||
width: auto;
|
||||
|
||||
svg {
|
||||
width: 15px;
|
||||
}
|
||||
|
||||
&__input {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&__input:checked + &__checkbox {
|
||||
border: 0;
|
||||
background-color: $color-brand;
|
||||
|
||||
svg {
|
||||
display: block;
|
||||
fill: $color-white;
|
||||
}
|
||||
}
|
||||
|
||||
&__icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
display: flex;
|
||||
border: 2px solid $color-silver-dark;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
margin-right: 10px;
|
||||
transition: background-color 0.5s;
|
||||
}
|
||||
|
||||
&__checkbox {
|
||||
border-radius: 3px;
|
||||
|
||||
svg {
|
||||
display: none;
|
||||
transition: all 0.7s;
|
||||
}
|
||||
}
|
||||
|
||||
&__radiobutton {
|
||||
border-radius: 20px;
|
||||
|
||||
svg {
|
||||
display: none;
|
||||
fill: $color-brand;
|
||||
width: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
&__input:checked + &__radiobutton {
|
||||
border-color: $color-brand;
|
||||
|
||||
svg {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
&__label {
|
||||
font-family: $sans-serif-font-family;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -68,6 +68,7 @@
|
|||
});
|
||||
|
||||
survey.css = css;
|
||||
survey.showProgressBar = 'bottom';
|
||||
|
||||
return survey;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -15,6 +15,7 @@
|
|||
&--error {
|
||||
border-color: $color-accent-3-dark;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.skillbox-textarea {
|
||||
|
|
@ -22,9 +23,111 @@
|
|||
height: 120px;
|
||||
}
|
||||
|
||||
|
||||
.skillbox-auto-grow {
|
||||
overflow: hidden;
|
||||
resize: none;
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
.base-input-container {
|
||||
display: inline-flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
margin-right: 10px;
|
||||
cursor: pointer;
|
||||
width: auto;
|
||||
|
||||
svg {
|
||||
width: 15px;
|
||||
}
|
||||
|
||||
&__input {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&__input:checked + &__checkbox {
|
||||
border: 0;
|
||||
background-color: $color-brand;
|
||||
|
||||
svg {
|
||||
display: block;
|
||||
fill: $color-white;
|
||||
}
|
||||
}
|
||||
|
||||
&__icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
display: flex;
|
||||
border: 2px solid $color-silver-dark;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
margin-right: 10px;
|
||||
transition: background-color 0.5s;
|
||||
}
|
||||
|
||||
&__checkbox {
|
||||
border-radius: 3px;
|
||||
|
||||
svg {
|
||||
display: none;
|
||||
transition: all 0.7s;
|
||||
}
|
||||
}
|
||||
|
||||
&__radiobutton {
|
||||
border-radius: 20px;
|
||||
|
||||
svg {
|
||||
display: none;
|
||||
fill: $color-brand;
|
||||
width: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
&__input:checked + &__radiobutton {
|
||||
border-color: $color-brand;
|
||||
|
||||
svg {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
&__label {
|
||||
font-family: $sans-serif-font-family;
|
||||
}
|
||||
|
||||
$base: &;
|
||||
|
||||
&--survey {
|
||||
margin-bottom: $small-spacing;
|
||||
|
||||
#{$base}__input:checked + #{$base}__radiobutton {
|
||||
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle fill="%2317A887" r="25" cx="50" cy="50"></circle></svg>');
|
||||
background-size: 12px 12px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: 50% 50%;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
#{$base}__label-container {
|
||||
display: -ms-grid;
|
||||
display: grid;
|
||||
grid-template-columns: 30px 1fr;
|
||||
align-items: start;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#{$base}__label {
|
||||
grid-row: 1;
|
||||
grid-column: 2;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
#{$base}__radiobutton {
|
||||
margin-top: 1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -25,4 +25,9 @@
|
|||
width: 100%;
|
||||
margin-bottom: $medium-spacing;
|
||||
}
|
||||
|
||||
&__radiogroup-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -103,12 +103,12 @@ export const css = {
|
|||
'itemValue': 'sv_q_mt_item_value skillbox-input'
|
||||
},
|
||||
'radiogroup': {
|
||||
'root': 'sv_qcbc form-inline',
|
||||
'item': 'radio',
|
||||
'label': '',
|
||||
'itemControl': '',
|
||||
'controlLabel': '',
|
||||
'materialDecorator': 'circle',
|
||||
'root': 'survey__radiogroup-group',
|
||||
'item': 'base-input-container base-input-container--survey',
|
||||
'label': 'base-input-container__label-container',
|
||||
'itemControl': 'base-input-container__input',
|
||||
'controlLabel': 'base-input-container__label',
|
||||
'materialDecorator': 'base-input-container__radiobutton base-input-container__icon',
|
||||
'other': 'sv_q_radiogroup_other skillbox-input',
|
||||
'clearButton': 'sv_q_radiogroup_clear button',
|
||||
'column': 'sv_q_select_column'
|
||||
|
|
|
|||
Loading…
Reference in New Issue