Skip to content
GitLab
Menu
Projects
Groups
Snippets
Loading...
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
Menu
Open sidebar
SRCT
masonstrap
Commits
6edebb1e
Commit
6edebb1e
authored
Jan 29, 2015
by
Thomas Park
Browse files
paper: custom checkbox and radio buttons, closes #393
parent
d7fa3be4
Changes
4
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,
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment