Skip to content

GitLab

Commit 6edebb1e authored by Thomas Park's avatar Thomas Park
Browse files

paper: custom checkbox and radio buttons, closes #393

parent d7fa3be4
Hide whitespace changes
Inline Side-by-side
paper/_bootswatch.scss
View file @ 6edebb1e
......@@ -194,6 +194,123 @@ select.form-control {
}
}
.radio,
.radio-inline,
.checkbox,
.checkbox-inline {
label {
padding-left: 25px;
}
}
input[type="radio"],
.radio input[type="radio"],
.radio-inline input[type="radio"] {
margin-top: 5px;
margin-left: -25px;
border: none;
background-color: transparent;
-webkit-appearance: none;
appearance: none;
&:focus {
outline: none;
}
&:before,
&:after {
content: "";
display: block;
width: 18px;
height: 18px;
margin-top: -3px;
border-radius: 50%;
@include transition(240ms);
}
&:before {
position: absolute;
left: 0;
top: 0;
background-color: $brand-primary;
@include scale(0);
}
&:after {
border: 2px solid $gray;
}
&:checked:before {
@include scale(0.5);
}
&:disabled:checked:before {
background-color: $gray-light;
}
&:checked:after {
border-color: $brand-primary;
}
&:disabled:after,
&:disabled:checked:after {
border-color: $gray-light;
}
}
input[type="checkbox"],
.checkbox input[type="checkbox"],
.checkbox-inline input[type="checkbox"] {
margin-left: -25px;
border: none;
-webkit-appearance: none;
appearance: none;
&:focus {
outline: none;
}
&:after {
content: "";
display: block;
width: 18px;
height: 18px;
margin-top: -2px;
margin-right: 5px;
border: 2px solid $gray;
border-radius: 2px;
@include transition(240ms);
}
&:checked:before {
content: "";
position: absolute;
top: 0;
left: 6px;
display: table;
width: 6px;
height: 12px;
border: 2px solid #fff;
border-top-width: 0;
border-left-width: 0;
@include rotate(45deg);
}
&:checked:after {
background-color: $brand-primary;
border-color: $brand-primary;
}
&:disabled:after {
border-color: $gray-light;
}
&:disabled:checked:after {
background-color: $gray-light;
border-color: transparent;
}
}
.has-warning {
input,
.form-control,
......
paper/bootstrap.css
View file @ 6edebb1e
......@@ -6932,6 +6932,149 @@ select[multiple],
select.form-control[multiple] {
background: none;
}
.radio label,
.radio-inline label,
.checkbox label,
.checkbox-inline label {
padding-left: 25px;
}
input[type="radio"],
.radio input[type="radio"],
.radio-inline input[type="radio"] {
margin-top: 5px;
margin-left: -25px;
border: none;
background-color: transparent;
-webkit-appearance: none;
appearance: none;
}
input[type="radio"]:focus,
.radio input[type="radio"]:focus,
.radio-inline input[type="radio"]:focus {
outline: none;
}
input[type="radio"]:before,
.radio input[type="radio"]:before,
.radio-inline input[type="radio"]:before,
input[type="radio"]:after,
.radio input[type="radio"]:after,
.radio-inline input[type="radio"]:after {
content: "";
display: block;
width: 18px;
height: 18px;
margin-top: -3px;
border-radius: 50%;
-webkit-transition: 240ms;
-o-transition: 240ms;
transition: 240ms;
}
input[type="radio"]:before,
.radio input[type="radio"]:before,
.radio-inline input[type="radio"]:before {
position: absolute;
left: 0;
top: 0;
background-color: #2196f3;
-webkit-transform: scale(0);
-ms-transform: scale(0);
-o-transform: scale(0);
transform: scale(0);
}
input[type="radio"]:after,
.radio input[type="radio"]:after,
.radio-inline input[type="radio"]:after {
border: 2px solid #666666;
}
input[type="radio"]:checked:before,
.radio input[type="radio"]:checked:before,
.radio-inline input[type="radio"]:checked:before {
-webkit-transform: scale(0.5);
-ms-transform: scale(0.5);
-o-transform: scale(0.5);
transform: scale(0.5);
}
input[type="radio"]:disabled:checked:before,
.radio input[type="radio"]:disabled:checked:before,
.radio-inline input[type="radio"]:disabled:checked:before {
background-color: #bbbbbb;
}
input[type="radio"]:checked:after,
.radio input[type="radio"]:checked:after,
.radio-inline input[type="radio"]:checked:after {
border-color: #2196f3;
}
input[type="radio"]:disabled:after,
.radio input[type="radio"]:disabled:after,
.radio-inline input[type="radio"]:disabled:after,
input[type="radio"]:disabled:checked:after,
.radio input[type="radio"]:disabled:checked:after,
.radio-inline input[type="radio"]:disabled:checked:after {
border-color: #bbbbbb;
}
input[type="checkbox"],
.checkbox input[type="checkbox"],
.checkbox-inline input[type="checkbox"] {
margin-left: -25px;
border: none;
-webkit-appearance: none;
appearance: none;
}
input[type="checkbox"]:focus,
.checkbox input[type="checkbox"]:focus,
.checkbox-inline input[type="checkbox"]:focus {
outline: none;
}
input[type="checkbox"]:after,
.checkbox input[type="checkbox"]:after,
.checkbox-inline input[type="checkbox"]:after {
content: "";
display: block;
width: 18px;
height: 18px;
margin-top: -2px;
margin-right: 5px;
border: 2px solid #666666;
border-radius: 2px;
-webkit-transition: 240ms;
-o-transition: 240ms;
transition: 240ms;
}
input[type="checkbox"]:checked:before,
.checkbox input[type="checkbox"]:checked:before,
.checkbox-inline input[type="checkbox"]:checked:before {
content: "";
position: absolute;
top: 0;
left: 6px;
display: table;
width: 6px;
height: 12px;
border: 2px solid #fff;
border-top-width: 0;
border-left-width: 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
input[type="checkbox"]:checked:after,
.checkbox input[type="checkbox"]:checked:after,
.checkbox-inline input[type="checkbox"]:checked:after {
background-color: #2196f3;
border-color: #2196f3;
}
input[type="checkbox"]:disabled:after,
.checkbox input[type="checkbox"]:disabled:after,
.checkbox-inline input[type="checkbox"]:disabled:after {
border-color: #bbbbbb;
}
input[type="checkbox"]:disabled:checked:after,
.checkbox input[type="checkbox"]:disabled:checked:after,
.checkbox-inline input[type="checkbox"]:disabled:checked:after {
background-color: #bbbbbb;
border-color: transparent;
}
.has-warning input,
.has-warning .form-control,
.has-warning input:focus,
......
paper/bootstrap.min.css
View file @ 6edebb1e
This source diff could not be displayed because it is too large. You can view the blob instead.
paper/bootswatch.less
View file @ 6edebb1e
......@@ -194,6 +194,123 @@ select.form-control {
}
}
.radio,
.radio-inline,
.checkbox,
.checkbox-inline {
label {
padding-left: 25px;
}
}
input[type="radio"],
.radio input[type="radio"],
.radio-inline input[type="radio"] {
margin-top: 5px;
margin-left: -25px;
border: none;
background-color: transparent;
-webkit-appearance: none;
appearance: none;
&:focus {
outline: none;
}
&:before,
&:after {
content: "";
display: block;
width: 18px;
height: 18px;
margin-top: -3px;
border-radius: 50%;
.transition(240ms);
}
&:before {
position: absolute;
left: 0;
top: 0;
background-color: @brand-primary;
.scale(0);
}
&:after {
border: 2px solid @gray;
}
&:checked:before {
.scale(0.5);
}
&:disabled:checked:before {
background-color: @gray-light;
}
&:checked:after {
border-color: @brand-primary;
}
&:disabled:after,
&:disabled:checked:after {
border-color: @gray-light;
}
}
input[type="checkbox"],
.checkbox input[type="checkbox"],
.checkbox-inline input[type="checkbox"] {
margin-left: -25px;
border: none;
-webkit-appearance: none;
appearance: none;
&:focus {
outline: none;
}
&:after {
content: "";
display: block;
width: 18px;
height: 18px;
margin-top: -2px;
margin-right: 5px;
border: 2px solid @gray;
border-radius: 2px;
.transition(240ms);
}
&:checked:before {
content: "";
position: absolute;
top: 0;
left: 6px;
display: table;
width: 6px;
height: 12px;
border: 2px solid #fff;
border-top-width: 0;
border-left-width: 0;
.rotate(45deg);
}
&:checked:after {
background-color: @brand-primary;
border-color: @brand-primary;
}
&:disabled:after {
border-color: @gray-light;
}
&:disabled:checked:after {
background-color: @gray-light;
border-color: transparent;
}
}
.has-warning {
input,
.form-control,
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment