Merge pull request #145 from matthojo/Checkbox-Styling

Removed the need for iCheck CSS dependency. See #7
This commit is contained in:
John O'Nolan 2013-06-13 05:04:47 -07:00
commit 43db602b41
6 changed files with 68 additions and 71 deletions

View File

@ -15,7 +15,7 @@
})); }));
this.$('input').iCheck({ this.$('input').iCheck({
checkboxClass: 'icheckbox_square-grey' checkboxClass: 'icheckbox_ghost'
}); });
} }
}); });

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.1 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.4 KiB

View File

@ -1,62 +0,0 @@
/* iCheck plugin Square skin, grey
----------------------------------- */
.icheckbox_square-grey,
.iradio_square-grey {
display: block;
margin: 0;
padding: 0;
width: 22px;
height: 22px;
background: url(grey.png) no-repeat;
border: none;
cursor: pointer;
float: left;
margin-right: 6px;
}
.icheckbox_square-grey {
background-position: 0 0;
}
.icheckbox_square-grey.hover {
background-position: -24px 0;
}
.icheckbox_square-grey.checked {
background-position: -48px 0;
}
.icheckbox_square-grey.disabled {
background-position: -72px 0;
cursor: default;
}
.icheckbox_square-grey.checked.disabled {
background-position: -96px 0;
}
.iradio_square-grey {
background-position: -120px 0;
}
.iradio_square-grey.hover {
background-position: -144px 0;
}
.iradio_square-grey.checked {
background-position: -168px 0;
}
.iradio_square-grey.disabled {
background-position: -192px 0;
cursor: default;
}
.iradio_square-grey.checked.disabled {
background-position: -216px 0;
}
/* Retina support */
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (-moz-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min-device-pixel-ratio: 1.5) {
.icheckbox_square-grey,
.iradio_square-grey {
background-image: url(grey@2x.png);
-webkit-background-size: 240px 24px;
background-size: 240px 24px;
}
}

View File

@ -109,7 +109,7 @@ form {
line-height:30px; line-height:30px;
} }
.radio input[type="radio"], .radio input[type="radio"],
.checkbox input[type="checkbox"] { .checkbox input[type="checkbox"] {
float: left; float: left;
width:auto; width:auto;
@ -248,12 +248,12 @@ input[type="reset"] {
position: relative; position: relative;
font-size: 0; // hack to stop space after button font-size: 0; // hack to stop space after button
white-space: nowrap; white-space: nowrap;
button { button {
font-size: 11px; // hack to restore font size font-size: 11px; // hack to restore font size
@include border-right-radius(0); @include border-right-radius(0);
} }
// This is the additional dropdown arrow, to the right of the button. // This is the additional dropdown arrow, to the right of the button.
.options { .options {
display: inline-block; display: inline-block;
@ -266,7 +266,7 @@ input[type="reset"] {
color: #fff; color: #fff;
background: #e5e5e5; background: #e5e5e5;
border-radius: 0 2px 2px 0; border-radius: 0 2px 2px 0;
box-shadow: box-shadow:
rgba(0,0,0,0.02) 0 1px 0 inset, rgba(0,0,0,0.02) 0 1px 0 inset,
rgba(0,0,0,0.02) -1px 0 0 inset, rgba(0,0,0,0.02) -1px 0 0 inset,
rgba(0,0,0,0.02) 0 -1px 0 inset; rgba(0,0,0,0.02) 0 -1px 0 inset;
@ -278,7 +278,7 @@ input[type="reset"] {
margin-right: -5px; margin-right: -5px;
@include transition(transform 0.3s ease, margin-top 0.3s ease); @include transition(transform 0.3s ease, margin-top 0.3s ease);
}; };
// Spin the arrow on hover // Spin the arrow on hover
&:hover { &:hover {
box-shadow: none; box-shadow: none;
@ -287,7 +287,7 @@ input[type="reset"] {
@include transform(rotate(360deg)); @include transform(rotate(360deg));
}; };
} }
// If it has a class of "up" spin it an extra 180degress to point up // If it has a class of "up" spin it an extra 180degress to point up
&.up:hover { &.up:hover {
@include icon($i-chevron-down) { @include icon($i-chevron-down) {
@ -305,7 +305,7 @@ input[type="reset"] {
.options { .options {
color:#777; color:#777;
&:hover { &:hover {
box-shadow: box-shadow:
rgba(0,0,0,0.07) 0 1px 0 inset, rgba(0,0,0,0.07) 0 1px 0 inset,
rgba(0,0,0,0.07) -1px 0 0 inset, rgba(0,0,0,0.07) -1px 0 0 inset,
rgba(0,0,0,0.07) 0 -1px 0 inset; rgba(0,0,0,0.07) 0 -1px 0 inset;
@ -349,3 +349,63 @@ input[type="reset"] {
} }
} }
/* =============================================================================
iCheck
============================================================================= */
.icheckbox_ghost,
.iradio_ghost {
@include box-sizing(border-box);
display: block;
width: 22px;
height: 22px;
float: left;
margin: 0;
padding: 0;
margin-right: 6px;
background: none;
border: none;
cursor: pointer;
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.05);
}
.icheckbox_ghost {
border: 1px solid darken($lightbrown, 5%);
}
.icheckbox_ghost.hover {
border: $blue 2px solid;
}
.icheckbox_ghost.checked {
padding-left: 2px;
background: $blue;
border: none;
@include icon($i-check, 1em, #fff);
}
.icheckbox_ghost.disabled {
border: 1px solid $lightbrown;
}
.icheckbox_ghost.checked.disabled {
background: $lightbrown;
}
.iradio_ghost {
border-radius: 11px;
border: 1px solid darken($lightbrown, 5%);
}
.iradio_ghost.hover {
border: $blue 2px solid;
}
.iradio_ghost.checked {
padding-left: 2px;
background: $blue;
border: none;
@include icon($i-check, 1em, #fff);
}
.iradio_ghost.disabled {
border: 1px solid $lightbrown;
cursor: default;
}
.iradio_ghost.checked.disabled {
background: $lightbrown;
}

View File

@ -20,7 +20,6 @@
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Lato:300,400,700"> <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Lato:300,400,700">
<link rel="stylesheet" href="/core/admin/assets/css/screen.css"> <link rel="stylesheet" href="/core/admin/assets/css/screen.css">
<link rel="stylesheet" type="text/css" href="/core/admin/assets/lib/codemirror/codemirror.css"> <!-- TODO: Kill this - #29 --> <link rel="stylesheet" type="text/css" href="/core/admin/assets/lib/codemirror/codemirror.css"> <!-- TODO: Kill this - #29 -->
<link rel="stylesheet" type="text/css" href="/core/admin/assets/lib/icheck/css/icheck.css"> <!-- TODO: Kill this - #29 -->
{{{block "pageStyles"}}} {{{block "pageStyles"}}}
</head> </head>
<body class="{{bodyClass}}"> <body class="{{bodyClass}}">