richard
/
SemanSemantic-UItic-UI
mirror of https://github.com/Semantic-Org/Semantic-UI.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Rewrite of checkbox, new styles, css variables, font file embeds for legitness

pull/912/head
jlukic 10 years ago
parent
d95a163cc8
commit
a30baa3bb0
2 changed files with 178 additions and 166 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 52
      src/modules/checkbox.js
  2. 292
      src/modules/checkbox.less

52
src/modules/checkbox.js
View File

@ -64,6 +64,9 @@ $.fn.checkbox = function(parameters) {
.on('click' + eventNamespace, module.toggle)
.data(moduleNamespace, module)
;
$input
.on('keydown' + eventNamespace, module.event.keydown)
;
$label
.on('click' + eventNamespace, module.toggle)
;
@ -90,20 +93,41 @@ $.fn.checkbox = function(parameters) {
;
},
event: {
keydown: function(event) {
var
key = event.which,
keyCode = {
enter : 13,
escape : 27
}
;
if( key == keyCode.escape) {
module.verbose('Escape key pressed blurring field');
$module
.blur()
;
}
if(!event.ctrlKey && key == keyCode.enter) {
$.proxy(module.toggle, this)();
}
}
},
is: {
radio: function() {
return $module.hasClass(className.radio);
},
enabled: function() {
checked: function() {
return $input.prop('checked') !== undefined && $input.prop('checked');
},
disabled: function() {
return !module.is.enabled();
unchecked: function() {
return !module.is.checked();
}
},
can: {
disable: function() {
uncheck: function() {
return (typeof settings.required === 'boolean')
? settings.required
: !module.is.radio()
@ -111,33 +135,33 @@ $.fn.checkbox = function(parameters) {
}
},
enable: function() {
check: function() {
module.debug('Enabling checkbox', $input);
$input
.prop('checked', true)
.trigger('change')
;
$.proxy(settings.onChange, $input.get())();
$.proxy(settings.onEnable, $input.get())();
$.proxy(settings.onChecked, $input.get())();
},
disable: function() {
uncheck: function() {
module.debug('Disabling checkbox');
$input
.prop('checked', false)
.trigger('change')
;
$.proxy(settings.onChange, $input.get())();
$.proxy(settings.onDisable, $input.get())();
$.proxy(settings.onUnchecked, $input.get())();
},
toggle: function(event) {
module.verbose('Determining new checkbox state');
if( module.is.disabled() ) {
module.enable();
if( module.is.unchecked() ) {
module.check();
}
else if( module.is.enabled() && module.can.disable() ) {
module.disable();
else if( module.is.checked() && module.can.uncheck() ) {
module.uncheck();
}
},
setting: function(name, value) {
@ -329,8 +353,8 @@ $.fn.checkbox.settings = {
required : 'auto',
onChange : function(){},
onEnable : function(){},
onDisable : function(){},
onChecked : function(){},
onUnchecked : function(){},
error : {
method : 'The method you called is not defined.'

292
src/modules/checkbox.less
View File

@ -9,23 +9,32 @@
*
*/
/*******************************
Theme
*******************************/
@type : 'module';
@element : 'checkbox';
@import '../semantic.config';
/*******************************
Checkbox
*******************************/
/*--------------
Standard
Content
---------------*/
/*--- Content ---*/
.ui.checkbox {
position: relative;
display: inline-block;
height: @checkboxHeight;
min-width: 1em;
height: 1.25em;
line-height: 1em;
outline: none;
@ -40,84 +49,72 @@
}
/*--- Box ---*/
/*--------------
Box
---------------*/
.ui.checkbox .box,
.ui.checkbox label {
cursor: pointer;
padding-left: 2em;
padding-left: @labelPadding;
outline: none;
}
.ui.checkbox .box:before,
.ui.checkbox label:before {
position: absolute;
top: 0em;
left: 0em;
line-height: 1;
width: 1em;
height: 1em;
left: 0em;
width: 1.25em;
height: 1.25em;
top: @boxOffset;
left: @boxOffset;
content: '';
border-radius: 4px;
background: #FFFFFF;
border-radius: 0.25em;
transition:
background-color 0.3s ease,
border 0.3s ease,
box-shadow 0.3s ease
;
box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.2);
border: @checkboxBorder;
}
/*--- Checkbox ---*/
/*--------------
Checkmark
---------------*/
.ui.checkbox .box:after,
.ui.checkbox label:after {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
content: '';
position: absolute;
background: transparent;
border: 0.2em solid #333333;
border-top: none;
border-right: none;
transform: rotate(-45deg);
}
.ui.checkbox .box:after,
.ui.checkbox label:after {
top: 0.275em;
left: 0.2em;
width: 0.45em;
height: 0.15em;
top: 0em;
left: 0em;
opacity: 0;
color: @checkboxColor;
transition: opacity 0.1s ease;
}
/*--- Inside Label ---*/
.ui.checkbox label {
color: rgba(0, 0, 0, 0.6);
/*--------------
Label
---------------*/
/* Inside */
.ui.checkbox label,
.ui.checkbox + label {
cursor: pointer;
color: @labelColor;
transition: color 0.2s ease;
}
.ui.checkbox label:hover {
color: rgba(0, 0, 0, 0.8);
user-select: none;
}
.ui.checkbox input:focus + label {
color: rgba(0, 0, 0, 0.8);
}
/*--- Outside Label ---*/
/* Outside */
.ui.checkbox + label {
cursor: pointer;
opacity: 0.85;
vertical-align: middle;
}
.ui.checkbox + label:hover {
opacity: 1;
}
/*******************************
@ -125,33 +122,54 @@
*******************************/
/*--- Hover ---*/
/*--------------
Hover
---------------*/
.ui.checkbox .box:hover::before,
.ui.checkbox label:hover::before {
box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.3);
border: 1px solid @selectedBorderColor;
}
.ui.checkbox label:hover,
.ui.checkbox + label:hover {
color: @labelHoverColor;
}
/*--- Down ---*/
/*--------------
Down
---------------*/
.ui.checkbox .box:active::before,
.ui.checkbox label:active::before {
background-color: #F5F5F5;
}
/*--- Focus ---*/
/*--------------
Focus
---------------*/
.ui.checkbox input:focus + .box:before,
.ui.checkbox input:focus + label:before {
box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.3);
border: 1px solid @selectedBorderColor;
}
.ui.checkbox input:focus + label {
color: @labelSelectedColor;
}
/*--------------
Active
---------------*/
/*--- Active ---*/
.ui.checkbox input:checked + .box:after,
.ui.checkbox input:checked + label:after {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
}
/*--- Disabled ---*/
/*--------------
Disabled
---------------*/
.ui.disabled.checkbox + .box:after,
.ui.checkbox input[disabled] + .box:after,
.ui.disabled.checkbox label,
@ -170,26 +188,17 @@
Radio
---------------*/
/* Box */
.ui.radio.checkbox .box:before,
.ui.radio.checkbox label:before {
min-width: 1em;
height: 1em;
border-radius: 500px;
border-radius: @circularRadius;
transform: none;
}
/* Circle */
.ui.radio.checkbox .box:after,
.ui.radio.checkbox label:after {
border: none;
top: 0.2em;
left: 0.2em;
width: 0.6em;
height: 0.6em;
background-color: #555555;
transform: none;
border-radius: 500px;
}
/*--------------
@ -198,96 +207,75 @@
.ui.slider.checkbox {
cursor: pointer;
min-width: 3em;
}
/* Line */
.ui.slider.checkbox:after {
position: absolute;
top: 0.5em;
left: 0em;
content: '';
width: 3em;
height: 2px;
background-color: rgba(0, 0, 0, 0.1);
}
/* Button */
.ui.slider.checkbox .box,
.ui.slider.checkbox label {
padding-left: 4em;
padding-left: @sliderLabelDistance;
}
/* Line */
.ui.slider.checkbox .box:before,
.ui.slider.checkbox label:before {
cursor: pointer;
display: block;
position: absolute;
top: -0.25em;
content: '';
top: @sliderLineVerticalOffset;
left: 0em;
z-index: 1;
border: none !important;
width: 1.5em;
height: 1.5em;
background-color: @neutralCheckbox;
width: @sliderLineWidth;
height: @sliderLineHeight;
transform: none;
box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset;
border-radius: 50rem;
transition: left 0.3s ease 0s;
border-radius: @circularRadius;
}
/* Button Activation Light */
/* Handle */
.ui.slider.checkbox .box:after,
.ui.slider.checkbox label:after {
opacity: 1;
background: @handleBackground;
position: absolute;
content: '';
top: 0.15em;
left: 0em;
opacity: 1;
z-index: 2;
margin-left: 0.375em;
border: none;
width: 0.75em;
height: 0.75em;
border-radius: 50rem;
transform: none;
box-shadow: @handleBoxShadow;
width: @handleSize;
height: @handleSize;
top: @sliderHandleOffset;
left: 0em;
border-radius: @circularRadius;
transition:
background 0.3s ease 0s,
left 0.3s ease 0s
;
}
/* Selected Slider Toggle */
.ui.slider.checkbox input:checked + .box:before,
.ui.slider.checkbox input:checked + label:before,
.ui.slider.checkbox input:checked + .box:after,
.ui.slider.checkbox input:checked + label:after {
left: 1.75em;
/* Focus */
.ui.slider.checkbox input:focus + .box:before,
.ui.slider.checkbox input:focus + label:before {
background-color: @toggleFocusColor;
border: none;
}
/* Off Color */
.ui.slider.checkbox .box:after,
.ui.slider.checkbox label:after {
background-color: #D95C5C;
/* Active */
.ui.slider.checkbox input:checked + .box:before,
.ui.slider.checkbox input:checked + label:before {
background-color: @positiveCheckbox;
}
/* On Color */
.ui.slider.checkbox input:checked + .box:after,
.ui.slider.checkbox input:checked + label:after {
background-color: #89B84C;
left: @sliderTravelDistance;
}
/*--------------
Toggle
---------------*/
@ -298,7 +286,7 @@
.ui.toggle.checkbox .box,
.ui.toggle.checkbox label {
padding-left: 4em;
padding-left: 3em;
}
/* Switch */
@ -309,58 +297,56 @@
position: absolute;
content: '';
top: -0.25em;
top: @toggleSwitchVerticalOffset;
left: 0em;
z-index: 1;
border: none;
background-color: #FFFFFF;
width: 3em;
height: 1.5em;
transform: none;
box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset;
border-radius: 50rem;
background-color: @neutralCheckbox;
width: @toggleSwitchWidth;
height: @toggleSwitchHeight;
border-radius: @circularRadius;
}
/* Activation Light */
/* Handle */
.ui.toggle.checkbox .box:after,
.ui.toggle.checkbox label:after {
opacity: 1;
background-color: transparent;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
content: '';
background: @handleBackground;
position: absolute;
top: 0.15em;
left: 0.5em;
content: '';
opacity: 1;
z-index: 2;
border: none;
width: 0.75em;
height: 0.75em;
box-shadow: @handleBoxShadow;
width: @handleSize;
height: @handleSize;
top: @sliderHandleOffset;
left: 0em;
background-color: #D95C5C;
border-radius: 50rem;
border-radius: @circularRadius;
transition:
background 0.3s ease 0s,
left 0.3s ease 0s
;
}
/* Active */
.ui.toggle.checkbox:active .box:before,
.ui.toggle.checkbox:active label:before {
background-color: #F5F5F5;
/* Focus */
.ui.toggle.checkbox input:focus + .box:before,
.ui.toggle.checkbox input:focus + label:before {
background-color: @toggleFocusColor;
border: none;
}
/* Active */
.ui.toggle.checkbox input:checked + .box:before,
.ui.toggle.checkbox input:checked + label:before {
background-color: @positiveCheckbox;
}
.ui.toggle.checkbox input:checked + .box:after,
.ui.toggle.checkbox input:checked + label:after {
left: 1.75em;
background-color: #89B84C;
left: 1em;
}
@ -377,4 +363,6 @@
}
.ui.huge.checkbox {
font-size: 1.5em;
}
}
.loadUIOverrides();
Write Preview
Loading…
Cancel
Save