From 193e1eaadf4951f2e7584359769891e81fcf1d8d Mon Sep 17 00:00:00 2001 From: jlukic Date: Tue, 8 Oct 2013 19:28:13 -0400 Subject: [PATCH] updates built version, ticks up minor version Former-commit-id: 08991eebce7f249bec8f3e933e592ad4a66ccac6 Former-commit-id: 6b6caf7e34b89e1f911d590056b35cddb1b011ab --- RELEASE NOTES.md | 6 + bower.json | 1 - build/less/modules/checkbox.less | 264 ++++++++++++------ build/minified/modules/checkbox.min.css | 2 +- .../packaged/css/semantic.css.REMOVED.git-id | 2 +- .../css/semantic.min.css.REMOVED.git-id | 2 +- .../javascript/semantic.min.js.REMOVED.git-id | 2 +- build/uncompressed/modules/checkbox.css | 207 +++++++++----- node/package.json | 2 +- node/src/documents/index.html.eco | 2 +- .../build/minified/modules/checkbox.min.css | 2 +- .../css/semantic.min.css.REMOVED.git-id | 2 +- .../build/packaged/javascript/semantic.js | 0 .../javascript/semantic.js.REMOVED.git-id | 1 + .../javascript/semantic.min.js.REMOVED.git-id | 2 +- rtl/less/modules/checkbox.less | 264 ++++++++++++------ rtl/minified/modules/checkbox.min.css | 2 +- rtl/packaged/css/semantic.css.REMOVED.git-id | 2 +- .../css/semantic.min.css.REMOVED.git-id | 2 +- .../javascript/semantic.min.js.REMOVED.git-id | 2 +- rtl/uncompressed/modules/checkbox.css | 207 +++++++++----- 21 files changed, 638 insertions(+), 338 deletions(-) delete mode 100644 node/src/files/build/packaged/javascript/semantic.js create mode 100644 node/src/files/build/packaged/javascript/semantic.js.REMOVED.git-id diff --git a/RELEASE NOTES.md b/RELEASE NOTES.md index a3617affd..0110cd741 100755 --- a/RELEASE NOTES.md +++ b/RELEASE NOTES.md @@ -1,5 +1,11 @@ ## RELEASE NOTES +### Version 0.4.0 - Oct 8, 2013 + +**Updates** +- Updated some checkbox stylings +- Checkboxes now work with text inside the hiden label field + ### Version 0.3.8 - Oct 8, 2013 **Fixes** diff --git a/bower.json b/bower.json index 3fab052f6..e852f2cc7 100755 --- a/bower.json +++ b/bower.json @@ -1,6 +1,5 @@ { "name" : "semantic", - "version" : "0.1.0", "description" : "Semantic empowers designers and developers by creating a shared vocabulary for UI.", "homepage" : "http://www.semantic-ui.com", "main": [ diff --git a/build/less/modules/checkbox.less b/build/less/modules/checkbox.less index 7274453da..662a6a9f2 100644 --- a/build/less/modules/checkbox.less +++ b/build/less/modules/checkbox.less @@ -19,60 +19,78 @@ /*--- Content ---*/ + .ui.checkbox { position: relative; display: inline-block; outline: none; - - margin-right: 0.5em; vertical-align: middle; } .ui.checkbox input { + position: absolute; + top: 0px; + left: 0px; opacity: 0; outline: none; } /*--- Box ---*/ + .ui.checkbox .box, .ui.checkbox label { - outline: none; cursor: pointer; + position: relative; + + min-width: 1em; + height: 1em; + + padding-left: 2em; + outline: none; + + white-space: nowrap; +} + +.ui.checkbox .box:before, +.ui.checkbox label:before { position: absolute; + top: 0.25em; + left: 0em; line-height: 1; width: 1em; height: 1em; - bottom: 0em; left: 0em; - border-radius: 4px; + content: ''; - -webkit-box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.2); - -moz-box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.2); - box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.2); + border-radius: 4px; background: #FFFFFF; -webkit-transition: - background-color 0.1s ease-out, - box-shadow 0.1s ease-out + background-color 0.3s ease, + box-shadow 0.3s ease ; -moz-transition: - background-color 0.1s ease-out, - box-shadow 0.1s ease-out + background-color 0.3s ease, + box-shadow 0.3s ease ; -o-transition: - background-color 0.1s ease-out, - box-shadow 0.1s ease-out + background-color 0.3s ease, + box-shadow 0.3s ease ; -ms-transition: - background-color 0.1s ease-out, - box-shadow 0.1s ease-out + background-color 0.3s ease, + box-shadow 0.3s ease ; transition: - background-color 0.1s ease-out, - box-shadow 0.1s ease-out + background-color 0.3s ease, + box-shadow 0.3s ease ; + + -webkit-box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.2); + -moz-box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.2); + box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.2); } /*--- Checkbox ---*/ @@ -95,13 +113,31 @@ } .ui.checkbox .box:after, .ui.checkbox label:after { - top: 0.3em; + top: 0.54em; left: 0.2em; width: 0.45em; height: 0.15em; } -/*--- Label ---*/ +/*--- Inside Label ---*/ +.ui.checkbox label { + color: rgba(0, 0, 0, 0.6); + + -webkit-transition: color 0.2s ease; + -moz-transition: color 0.2s ease; + -o-transition: color 0.2s ease; + -ms-transition: color 0.2s ease; + transition: color 0.2s ease; +} +.ui.checkbox label:hover { + color: rgba(0, 0, 0, 0.8); +} + +.ui.checkbox input:focus + label { + color: rgba(0, 0, 0, 0.8); +} + +/*--- Outside Label ---*/ .ui.checkbox + label { cursor: pointer; opacity: 0.85; @@ -111,27 +147,33 @@ opacity: 1; } + /******************************* States *******************************/ /*--- Hover ---*/ -.ui.checkbox .box:hover, -.ui.checkbox label:hover { - background-color: #FAFAFA; +.ui.checkbox .box:hover::before, +.ui.checkbox label:hover::before { -webkit-box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.3); box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.3); } - /*--- Down ---*/ -.ui.checkbox .box:active, -.ui.checkbox label:active { +.ui.checkbox .box:active::before, +.ui.checkbox label:active::before { background-color: #F5F5F5; } +/*--- Focus ---*/ +.ui.checkbox input:focus + .box:before, +.ui.checkbox input:focus + label:before { + -webkit-box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.3); + -moz-box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.3); + box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.3); +} /*--- Active ---*/ .ui.checkbox input:checked + .box:after, @@ -141,13 +183,13 @@ opacity: 1; } - /*--- Disabled ---*/ .ui.disabled.checkbox + .box:after, .ui.checkbox input[disabled] + .box:after, .ui.disabled.checkbox label, .ui.checkbox input[disabled] + label { opacity: 0.4; + color: rgba(0, 0, 0, 0.3); } @@ -160,26 +202,22 @@ Radio ---------------*/ -.ui.radio.checkbox { - width: 14px; - height: 16px; -} -.ui.radio.checkbox .box, -.ui.radio.checkbox label { - width: 14px; - height: 14px; +.ui.radio.checkbox .box:before, +.ui.radio.checkbox label:before { + width: 1em; + height: 1em; -webkit-border-radius: 500px; -moz-border-radius: 500px; border-radius: 500px; } .ui.radio.checkbox .box:after, .ui.radio.checkbox label:after { - top: 3px; - left: 3px; - border: none; - width: 8px; - height: 8px; + top: 0.45em; + left: 0.2em; + + width: 0.6em; + height: 0.6em; background-color: #555555; @@ -194,28 +232,34 @@ .ui.slider.checkbox { cursor: pointer; - width: 3em; + min-width: 3em; height: 2em; } + /* Line */ .ui.slider.checkbox:after { position: absolute; - top: 1em; + top: 0.8em; left: 0em; content: ''; - width: 100%; + width: 3em; height: 2px; background-color: rgba(0, 0, 0, 0.1); } + /* Button */ .ui.slider.checkbox .box, .ui.slider.checkbox label { + padding-left: 4em; +} +.ui.slider.checkbox .box:before, +.ui.slider.checkbox label:before { cursor: pointer; display: block; position: absolute; - top: 0.25em; + top: 0em; left: 0; z-index: 1; @@ -243,28 +287,62 @@ position: absolute; content: ''; top: 0.375em; - left: 0.375em; + left: 0em; + z-index: 2; + + margin-left: 0.375em; border: none; width: 0.75em; height: 0.75em; - background-color: #D95C5C; - border-radius: 50rem; - -webkit-transition: background 0.3s ease 0s; - -moz-transition: background 0.3s ease 0s; - -o-transition: background 0.3s ease 0s; - -ms-transition: background 0.3s ease 0s; - transition: background 0.3s ease 0s; + -webkit-transition: + background 0.3s ease 0s, + left 0.3s ease 0s + ; + -moz-transition: + background 0.3s ease 0s, + left 0.3s ease 0s + ; + -o-transition: + background 0.3s ease 0s, + left 0.3s ease 0s + ; + -ms-transition: + background 0.3s ease 0s, + left 0.3s ease 0s + ; + transition: + background 0.3s ease 0s, + left 0.3s ease 0s + ; } -/* Active Slider Toggle */ -.ui.slider.checkbox input:checked + .box, -.ui.slider.checkbox input:checked + label { +/* 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; } + +/* Off Color */ +// .ui.slider.checkbox .box, +// .ui.slider.checkbox label { +// color: #D95C5C !important; +// } +.ui.slider.checkbox .box:after, +.ui.slider.checkbox label:after { + background-color: #D95C5C; +} + +/* On Color */ +// .ui.slider.checkbox input:checked + .box, +// .ui.slider.checkbox input:checked + label { +// color: #89B84C !important; +// } .ui.slider.checkbox input:checked + .box:after, .ui.slider.checkbox input:checked + label:after { background-color: #89B84C; @@ -278,22 +356,28 @@ .ui.toggle.checkbox { cursor: pointer; - width: 3em; height: 2em; } -/* Line */ -.ui.toggle.checkbox:after { + +.ui.toggle.checkbox .box, +.ui.toggle.checkbox label { + padding-left: 4em; +} + +/* Switch */ +.ui.toggle.checkbox .box:before, +.ui.toggle.checkbox label:before { cursor: pointer; display: block; position: absolute; content: ''; - top: 0.25em; + top: 0em; left: 0em; z-index: 1; background-color: #FFFFFF; - width: 100%; + width: 3em; height: 1.5em; -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset; @@ -302,32 +386,21 @@ border-radius: 50rem; } -.ui.toggle.checkbox .box, -.ui.toggle.checkbox label { - position: absolute; - top: 0.65em; - left: 0.5em; - -webkit-transition: left 0.3s ease 0s; - -moz-transition: left 0.3s ease 0s; - -o-transition: left 0.3s ease 0s; - -ms-transition: left 0.3s ease 0s; - transition: left 0.3s ease 0s; +/* Activation Light */ +.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; -} -/* Button Activation Light */ -.ui.toggle.checkbox .box:after, -.ui.toggle.checkbox label:after { - opacity: 1; content: ''; position: absolute; - top: 0px; - left: 0px; + top: 0.35em; + left: 0.5em; z-index: 2; border: none; @@ -335,23 +408,40 @@ height: 0.75em; background-color: #D95C5C; - border-radius: 50rem; - -webkit-transition: background 0.3s ease 0s; - -moz-transition: background 0.3s ease 0s; - -o-transition: background 0.3s ease 0s; - -ms-transition: background 0.3s ease 0s; - transition: background 0.3s ease 0s; + -webkit-transition: + background 0.3s ease 0s, + left 0.3s ease 0s + ; + -moz-transition: + background 0.3s ease 0s, + left 0.3s ease 0s + ; + -o-transition: + background 0.3s ease 0s, + left 0.3s ease 0s + ; + -ms-transition: + background 0.3s ease 0s, + left 0.3s ease 0s + ; + transition: + background 0.3s ease 0s, + left 0.3s ease 0s + ; } -/* Active toggle Toggle */ -.ui.toggle.checkbox input:checked + .box, -.ui.toggle.checkbox input:checked + label { - left: 1.75em; +/* Active */ +.ui.toggle.checkbox:active .box:before, +.ui.toggle.checkbox:active label:before { + background-color: #F5F5F5; } + +/* Active */ .ui.toggle.checkbox input:checked + .box:after, .ui.toggle.checkbox input:checked + label:after { + left: 1.75em; background-color: #89B84C; } diff --git a/build/minified/modules/checkbox.min.css b/build/minified/modules/checkbox.min.css index ee848bb12..f4d4dbd9a 100644 --- a/build/minified/modules/checkbox.min.css +++ b/build/minified/modules/checkbox.min.css @@ -1 +1 @@ -.ui.checkbox{position:relative;display:inline-block;outline:0;margin-right:.5em;vertical-align:middle}.ui.checkbox input{opacity:0;outline:0}.ui.checkbox .box,.ui.checkbox label{outline:0;cursor:pointer;position:absolute;line-height:1;width:1em;height:1em;bottom:0;left:0;border-radius:4px;-webkit-box-shadow:0 0 0 1px rgba(0,0,0,.2);-moz-box-shadow:0 0 0 1px rgba(0,0,0,.2);box-shadow:0 0 0 1px rgba(0,0,0,.2);background:#FFF;-webkit-transition:background-color .1s ease-out,box-shadow .1s ease-out;-moz-transition:background-color .1s ease-out,box-shadow .1s ease-out;-o-transition:background-color .1s ease-out,box-shadow .1s ease-out;-ms-transition:background-color .1s ease-out,box-shadow .1s ease-out;transition:background-color .1s ease-out,box-shadow .1s ease-out}.ui.checkbox .box:after,.ui.checkbox label:after{-ms-filter:"alpha(Opacity=0)";filter:alpha(opacity=0);opacity:0;content:'';position:absolute;background:transparent;border:.2em solid #333;border-top:0;border-right:0;-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-o-transform:rotate(-45deg);-ms-transform:rotate(-45deg);transform:rotate(-45deg)}.ui.checkbox .box:after,.ui.checkbox label:after{top:.3em;left:.2em;width:.45em;height:.15em}.ui.checkbox+label{cursor:pointer;opacity:.85;vertical-align:middle}.ui.checkbox+label:hover{opacity:1}.ui.checkbox .box:hover,.ui.checkbox label:hover{background-color:#FAFAFA;-webkit-box-shadow:0 0 0 1px rgba(0,0,0,.3);-moz-box-shadow:0 0 0 1px rgba(0,0,0,.3);box-shadow:0 0 0 1px rgba(0,0,0,.3)}.ui.checkbox .box:active,.ui.checkbox label:active{background-color:#F5F5F5}.ui.checkbox input:checked+.box:after,.ui.checkbox input:checked+label:after{-ms-filter:"alpha(Opacity=100)";filter:alpha(opacity=100);opacity:1}.ui.disabled.checkbox+.box:after,.ui.checkbox input[disabled]+.box:after,.ui.disabled.checkbox label,.ui.checkbox input[disabled]+label{opacity:.4}.ui.radio.checkbox{width:14px;height:16px}.ui.radio.checkbox .box,.ui.radio.checkbox label{width:14px;height:14px;-webkit-border-radius:500px;-moz-border-radius:500px;border-radius:500px}.ui.radio.checkbox .box:after,.ui.radio.checkbox label:after{top:3px;left:3px;border:0;width:8px;height:8px;background-color:#555;-webkit-border-radius:500px;-moz-border-radius:500px;border-radius:500px}.ui.slider.checkbox{cursor:pointer;width:3em;height:2em}.ui.slider.checkbox:after{position:absolute;top:1em;left:0;content:'';width:100%;height:2px;background-color:rgba(0,0,0,.1)}.ui.slider.checkbox .box,.ui.slider.checkbox label{cursor:pointer;display:block;position:absolute;top:.25em;left:0;z-index:1;width:1.5em;height:1.5em;-webkit-box-shadow:0 0 0 1px rgba(0,0,0,.1) inset;-moz-box-shadow:0 0 0 1px rgba(0,0,0,.1) inset;box-shadow:0 0 0 1px rgba(0,0,0,.1) inset;border-radius:50rem;-webkit-transition:left .3s ease 0s;-moz-transition:left .3s ease 0s;-o-transition:left .3s ease 0s;-ms-transition:left .3s ease 0s;transition:left .3s ease 0s}.ui.slider.checkbox .box:after,.ui.slider.checkbox label:after{opacity:1;position:absolute;content:'';top:.375em;left:.375em;border:0;width:.75em;height:.75em;background-color:#D95C5C;border-radius:50rem;-webkit-transition:background .3s ease 0s;-moz-transition:background .3s ease 0s;-o-transition:background .3s ease 0s;-ms-transition:background .3s ease 0s;transition:background .3s ease 0s}.ui.slider.checkbox input:checked+.box,.ui.slider.checkbox input:checked+label{left:1.75em}.ui.slider.checkbox input:checked+.box:after,.ui.slider.checkbox input:checked+label:after{background-color:#89B84C}.ui.toggle.checkbox{cursor:pointer;width:3em;height:2em}.ui.toggle.checkbox:after{cursor:pointer;display:block;position:absolute;content:'';top:.25em;left:0;z-index:1;background-color:#FFF;width:100%;height:1.5em;-webkit-box-shadow:0 0 0 1px rgba(0,0,0,.1) inset;-moz-box-shadow:0 0 0 1px rgba(0,0,0,.1) inset;box-shadow:0 0 0 1px rgba(0,0,0,.1) inset;border-radius:50rem}.ui.toggle.checkbox .box,.ui.toggle.checkbox label{position:absolute;top:.65em;left:.5em;-webkit-transition:left .3s ease 0s;-moz-transition:left .3s ease 0s;-o-transition:left .3s ease 0s;-ms-transition:left .3s ease 0s;transition:left .3s ease 0s;background-color:transparent;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}.ui.toggle.checkbox .box:after,.ui.toggle.checkbox label:after{opacity:1;content:'';position:absolute;top:0;left:0;z-index:2;border:0;width:.75em;height:.75em;background-color:#D95C5C;border-radius:50rem;-webkit-transition:background .3s ease 0s;-moz-transition:background .3s ease 0s;-o-transition:background .3s ease 0s;-ms-transition:background .3s ease 0s;transition:background .3s ease 0s}.ui.toggle.checkbox input:checked+.box,.ui.toggle.checkbox input:checked+label{left:1.75em}.ui.toggle.checkbox input:checked+.box:after,.ui.toggle.checkbox input:checked+label:after{background-color:#89B84C}.ui.checkbox{width:1em;height:1em}.ui.checkbox,.ui.checkbox .box,.ui.checkbox label{font-size:1em}.ui.large.checkbox{width:1.25em;height:1.25em}.ui.large.checkbox,.ui.large.checkbox .box,.ui.large.checkbox label{font-size:1.25em}.ui.huge.checkbox{width:1.5em;height:1.5em}.ui.huge.checkbox,.ui.huge.checkbox .box,.ui.huge.checkbox label{font-size:1.5em} \ No newline at end of file +.ui.checkbox{position:relative;display:inline-block;outline:0;vertical-align:middle}.ui.checkbox input{position:absolute;top:0;left:0;opacity:0;outline:0}.ui.checkbox .box,.ui.checkbox label{cursor:pointer;position:relative;min-width:1em;height:1em;padding-left:2em;outline:0;white-space:nowrap}.ui.checkbox .box:before,.ui.checkbox label:before{position:absolute;top:.25em;line-height:1;width:1em;height:1em;left:0;content:'';border-radius:4px;background:#FFF;-webkit-transition:background-color .3s ease,box-shadow .3s ease;-moz-transition:background-color .3s ease,box-shadow .3s ease;-o-transition:background-color .3s ease,box-shadow .3s ease;-ms-transition:background-color .3s ease,box-shadow .3s ease;transition:background-color .3s ease,box-shadow .3s ease;-webkit-box-shadow:0 0 0 1px rgba(0,0,0,.2);-moz-box-shadow:0 0 0 1px rgba(0,0,0,.2);box-shadow:0 0 0 1px rgba(0,0,0,.2)}.ui.checkbox .box:after,.ui.checkbox label:after{-ms-filter:"alpha(Opacity=0)";filter:alpha(opacity=0);opacity:0;content:'';position:absolute;background:transparent;border:.2em solid #333;border-top:0;border-right:0;-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-o-transform:rotate(-45deg);-ms-transform:rotate(-45deg);transform:rotate(-45deg)}.ui.checkbox .box:after,.ui.checkbox label:after{top:.54em;left:.2em;width:.45em;height:.15em}.ui.checkbox label{color:rgba(0,0,0,.6);-webkit-transition:color .2s ease;-moz-transition:color .2s ease;-o-transition:color .2s ease;-ms-transition:color .2s ease;transition:color .2s ease}.ui.checkbox label:hover{color:rgba(0,0,0,.8)}.ui.checkbox input:focus+label{color:rgba(0,0,0,.8)}.ui.checkbox+label{cursor:pointer;opacity:.85;vertical-align:middle}.ui.checkbox+label:hover{opacity:1}.ui.checkbox .box:hover::before,.ui.checkbox label:hover::before{-webkit-box-shadow:0 0 0 1px rgba(0,0,0,.3);-moz-box-shadow:0 0 0 1px rgba(0,0,0,.3);box-shadow:0 0 0 1px rgba(0,0,0,.3)}.ui.checkbox .box:active::before,.ui.checkbox label:active::before{background-color:#F5F5F5}.ui.checkbox input:focus+.box:before,.ui.checkbox input:focus+label:before{-webkit-box-shadow:0 0 0 1px rgba(0,0,0,.3);-moz-box-shadow:0 0 0 1px rgba(0,0,0,.3);box-shadow:0 0 0 1px rgba(0,0,0,.3)}.ui.checkbox input:checked+.box:after,.ui.checkbox input:checked+label:after{-ms-filter:"alpha(Opacity=100)";filter:alpha(opacity=100);opacity:1}.ui.disabled.checkbox+.box:after,.ui.checkbox input[disabled]+.box:after,.ui.disabled.checkbox label,.ui.checkbox input[disabled]+label{opacity:.4;color:rgba(0,0,0,.3)}.ui.radio.checkbox .box:before,.ui.radio.checkbox label:before{width:1em;height:1em;-webkit-border-radius:500px;-moz-border-radius:500px;border-radius:500px}.ui.radio.checkbox .box:after,.ui.radio.checkbox label:after{border:0;top:.45em;left:.2em;width:.6em;height:.6em;background-color:#555;-webkit-border-radius:500px;-moz-border-radius:500px;border-radius:500px}.ui.slider.checkbox{cursor:pointer;min-width:3em;height:2em}.ui.slider.checkbox:after{position:absolute;top:.8em;left:0;content:'';width:3em;height:2px;background-color:rgba(0,0,0,.1)}.ui.slider.checkbox .box,.ui.slider.checkbox label{padding-left:4em}.ui.slider.checkbox .box:before,.ui.slider.checkbox label:before{cursor:pointer;display:block;position:absolute;top:0;left:0;z-index:1;width:1.5em;height:1.5em;-webkit-box-shadow:0 0 0 1px rgba(0,0,0,.1) inset;-moz-box-shadow:0 0 0 1px rgba(0,0,0,.1) inset;box-shadow:0 0 0 1px rgba(0,0,0,.1) inset;border-radius:50rem;-webkit-transition:left .3s ease 0s;-moz-transition:left .3s ease 0s;-o-transition:left .3s ease 0s;-ms-transition:left .3s ease 0s;transition:left .3s ease 0s}.ui.slider.checkbox .box:after,.ui.slider.checkbox label:after{opacity:1;position:absolute;content:'';top:.375em;left:0;z-index:2;margin-left:.375em;border:0;width:.75em;height:.75em;border-radius:50rem;-webkit-transition:background .3s ease 0s,left .3s ease 0s;-moz-transition:background .3s ease 0s,left .3s ease 0s;-o-transition:background .3s ease 0s,left .3s ease 0s;-ms-transition:background .3s ease 0s,left .3s ease 0s;transition:background .3s ease 0s,left .3s ease 0s}.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}.ui.slider.checkbox .box:after,.ui.slider.checkbox label:after{background-color:#D95C5C}.ui.slider.checkbox input:checked+.box:after,.ui.slider.checkbox input:checked+label:after{background-color:#89B84C}.ui.toggle.checkbox{cursor:pointer;height:2em}.ui.toggle.checkbox .box,.ui.toggle.checkbox label{padding-left:4em}.ui.toggle.checkbox .box:before,.ui.toggle.checkbox label:before{cursor:pointer;display:block;position:absolute;content:'';top:0;left:0;z-index:1;background-color:#FFF;width:3em;height:1.5em;-webkit-box-shadow:0 0 0 1px rgba(0,0,0,.1) inset;-moz-box-shadow:0 0 0 1px rgba(0,0,0,.1) inset;box-shadow:0 0 0 1px rgba(0,0,0,.1) inset;border-radius:50rem}.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:'';position:absolute;top:.35em;left:.5em;z-index:2;border:0;width:.75em;height:.75em;background-color:#D95C5C;border-radius:50rem;-webkit-transition:background .3s ease 0s,left .3s ease 0s;-moz-transition:background .3s ease 0s,left .3s ease 0s;-o-transition:background .3s ease 0s,left .3s ease 0s;-ms-transition:background .3s ease 0s,left .3s ease 0s;transition:background .3s ease 0s,left .3s ease 0s}.ui.toggle.checkbox:active .box:before,.ui.toggle.checkbox:active label:before{background-color:#F5F5F5}.ui.toggle.checkbox input:checked+.box:after,.ui.toggle.checkbox input:checked+label:after{left:1.75em;background-color:#89B84C}.ui.checkbox{width:1em;height:1em}.ui.checkbox,.ui.checkbox .box,.ui.checkbox label{font-size:1em}.ui.large.checkbox{width:1.25em;height:1.25em}.ui.large.checkbox,.ui.large.checkbox .box,.ui.large.checkbox label{font-size:1.25em}.ui.huge.checkbox{width:1.5em;height:1.5em}.ui.huge.checkbox,.ui.huge.checkbox .box,.ui.huge.checkbox label{font-size:1.5em} \ No newline at end of file diff --git a/build/packaged/css/semantic.css.REMOVED.git-id b/build/packaged/css/semantic.css.REMOVED.git-id index 905d0265c..bd9d52adf 100644 --- a/build/packaged/css/semantic.css.REMOVED.git-id +++ b/build/packaged/css/semantic.css.REMOVED.git-id @@ -1 +1 @@ -b25945569905df58941c012736e9c5eb39be8782 \ No newline at end of file +fa58eb78069e1494fe65e5271a0b1cf0e6075e00 \ No newline at end of file diff --git a/build/packaged/css/semantic.min.css.REMOVED.git-id b/build/packaged/css/semantic.min.css.REMOVED.git-id index a7eed6820..6b846d195 100644 --- a/build/packaged/css/semantic.min.css.REMOVED.git-id +++ b/build/packaged/css/semantic.min.css.REMOVED.git-id @@ -1 +1 @@ -788778edb19596d826e216478dc0fe2cb8eccf02 \ No newline at end of file +d679a1c4d8dc27188e9cd6068d45a417582f4523 \ No newline at end of file diff --git a/build/packaged/javascript/semantic.min.js.REMOVED.git-id b/build/packaged/javascript/semantic.min.js.REMOVED.git-id index 2216ebe8a..37a3161db 100644 --- a/build/packaged/javascript/semantic.min.js.REMOVED.git-id +++ b/build/packaged/javascript/semantic.min.js.REMOVED.git-id @@ -1 +1 @@ -63253c362a471204c32163b1ad8fd36f702753a7 \ No newline at end of file +05773b75e897070fb92bc42a06ccc0887dba27ba \ No newline at end of file diff --git a/build/uncompressed/modules/checkbox.css b/build/uncompressed/modules/checkbox.css index d90ff92ce..81343e100 100644 --- a/build/uncompressed/modules/checkbox.css +++ b/build/uncompressed/modules/checkbox.css @@ -19,34 +19,45 @@ position: relative; display: inline-block; outline: none; - margin-right: 0.5em; vertical-align: middle; } .ui.checkbox input { + position: absolute; + top: 0px; + left: 0px; opacity: 0; outline: none; } /*--- Box ---*/ .ui.checkbox .box, .ui.checkbox label { - outline: none; cursor: pointer; + position: relative; + min-width: 1em; + height: 1em; + padding-left: 2em; + outline: none; + white-space: nowrap; +} +.ui.checkbox .box:before, +.ui.checkbox label:before { position: absolute; + top: 0.25em; line-height: 1; width: 1em; height: 1em; - bottom: 0em; left: 0em; + content: ''; border-radius: 4px; + background: #FFFFFF; + -webkit-transition: background-color 0.3s ease, box-shadow 0.3s ease; + -moz-transition: background-color 0.3s ease, box-shadow 0.3s ease; + -o-transition: background-color 0.3s ease, box-shadow 0.3s ease; + -ms-transition: background-color 0.3s ease, box-shadow 0.3s ease; + transition: background-color 0.3s ease, box-shadow 0.3s ease; -webkit-box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.2); box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.2); - background: #FFFFFF; - -webkit-transition: background-color 0.1s ease-out, box-shadow 0.1s ease-out; - -moz-transition: background-color 0.1s ease-out, box-shadow 0.1s ease-out; - -o-transition: background-color 0.1s ease-out, box-shadow 0.1s ease-out; - -ms-transition: background-color 0.1s ease-out, box-shadow 0.1s ease-out; - transition: background-color 0.1s ease-out, box-shadow 0.1s ease-out; } /*--- Checkbox ---*/ .ui.checkbox .box:after, @@ -68,12 +79,27 @@ } .ui.checkbox .box:after, .ui.checkbox label:after { - top: 0.3em; + top: 0.54em; left: 0.2em; width: 0.45em; height: 0.15em; } -/*--- Label ---*/ +/*--- Inside Label ---*/ +.ui.checkbox label { + color: rgba(0, 0, 0, 0.6); + -webkit-transition: color 0.2s ease; + -moz-transition: color 0.2s ease; + -o-transition: color 0.2s ease; + -ms-transition: color 0.2s ease; + transition: color 0.2s ease; +} +.ui.checkbox label:hover { + color: rgba(0, 0, 0, 0.8); +} +.ui.checkbox input:focus + label { + color: rgba(0, 0, 0, 0.8); +} +/*--- Outside Label ---*/ .ui.checkbox + label { cursor: pointer; opacity: 0.85; @@ -86,18 +112,24 @@ States *******************************/ /*--- Hover ---*/ -.ui.checkbox .box:hover, -.ui.checkbox label:hover { - background-color: #FAFAFA; +.ui.checkbox .box:hover::before, +.ui.checkbox label:hover::before { -webkit-box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.3); box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.3); } /*--- Down ---*/ -.ui.checkbox .box:active, -.ui.checkbox label:active { +.ui.checkbox .box:active::before, +.ui.checkbox label:active::before { background-color: #F5F5F5; } +/*--- Focus ---*/ +.ui.checkbox input:focus + .box:before, +.ui.checkbox input:focus + label:before { + -webkit-box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.3); + -moz-box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.3); + box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.3); +} /*--- Active ---*/ .ui.checkbox input:checked + .box:after, .ui.checkbox input:checked + label:after { @@ -111,6 +143,7 @@ .ui.disabled.checkbox label, .ui.checkbox input[disabled] + label { opacity: 0.4; + color: rgba(0, 0, 0, 0.3); } /******************************* Variations @@ -118,25 +151,21 @@ /*-------------- Radio ---------------*/ -.ui.radio.checkbox { - width: 14px; - height: 16px; -} -.ui.radio.checkbox .box, -.ui.radio.checkbox label { - width: 14px; - height: 14px; +.ui.radio.checkbox .box:before, +.ui.radio.checkbox label:before { + width: 1em; + height: 1em; -webkit-border-radius: 500px; -moz-border-radius: 500px; border-radius: 500px; } .ui.radio.checkbox .box:after, .ui.radio.checkbox label:after { - top: 3px; - left: 3px; border: none; - width: 8px; - height: 8px; + top: 0.45em; + left: 0.2em; + width: 0.6em; + height: 0.6em; background-color: #555555; -webkit-border-radius: 500px; -moz-border-radius: 500px; @@ -147,26 +176,30 @@ ---------------*/ .ui.slider.checkbox { cursor: pointer; - width: 3em; + min-width: 3em; height: 2em; } /* Line */ .ui.slider.checkbox:after { position: absolute; - top: 1em; + top: 0.8em; left: 0em; content: ''; - width: 100%; + width: 3em; height: 2px; background-color: rgba(0, 0, 0, 0.1); } /* Button */ .ui.slider.checkbox .box, .ui.slider.checkbox label { + padding-left: 4em; +} +.ui.slider.checkbox .box:before, +.ui.slider.checkbox label:before { cursor: pointer; display: block; position: absolute; - top: 0.25em; + top: 0em; left: 0; z-index: 1; width: 1.5em; @@ -188,23 +221,42 @@ position: absolute; content: ''; top: 0.375em; - left: 0.375em; + left: 0em; + z-index: 2; + margin-left: 0.375em; border: none; width: 0.75em; height: 0.75em; - background-color: #D95C5C; border-radius: 50rem; - -webkit-transition: background 0.3s ease 0s; - -moz-transition: background 0.3s ease 0s; - -o-transition: background 0.3s ease 0s; - -ms-transition: background 0.3s ease 0s; - transition: background 0.3s ease 0s; -} -/* Active Slider Toggle */ -.ui.slider.checkbox input:checked + .box, -.ui.slider.checkbox input:checked + label { + -webkit-transition: background 0.3s ease 0s, + left 0.3s ease 0s + ; + -moz-transition: background 0.3s ease 0s, + left 0.3s ease 0s + ; + -o-transition: background 0.3s ease 0s, + left 0.3s ease 0s + ; + -ms-transition: background 0.3s ease 0s, + left 0.3s ease 0s + ; + 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; } +/* Off Color */ +.ui.slider.checkbox .box:after, +.ui.slider.checkbox label:after { + background-color: #D95C5C; +} +/* On Color */ .ui.slider.checkbox input:checked + .box:after, .ui.slider.checkbox input:checked + label:after { background-color: #89B84C; @@ -214,68 +266,73 @@ ---------------*/ .ui.toggle.checkbox { cursor: pointer; - width: 3em; height: 2em; } -/* Line */ -.ui.toggle.checkbox:after { +.ui.toggle.checkbox .box, +.ui.toggle.checkbox label { + padding-left: 4em; +} +/* Switch */ +.ui.toggle.checkbox .box:before, +.ui.toggle.checkbox label:before { cursor: pointer; display: block; position: absolute; content: ''; - top: 0.25em; + top: 0em; left: 0em; z-index: 1; background-color: #FFFFFF; - width: 100%; + width: 3em; height: 1.5em; -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset; -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset; box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset; border-radius: 50rem; } -.ui.toggle.checkbox .box, -.ui.toggle.checkbox label { - position: absolute; - top: 0.65em; - left: 0.5em; - -webkit-transition: left 0.3s ease 0s; - -moz-transition: left 0.3s ease 0s; - -o-transition: left 0.3s ease 0s; - -ms-transition: left 0.3s ease 0s; - transition: left 0.3s ease 0s; +/* Activation Light */ +.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; -} -/* Button Activation Light */ -.ui.toggle.checkbox .box:after, -.ui.toggle.checkbox label:after { - opacity: 1; content: ''; position: absolute; - top: 0px; - left: 0px; + top: 0.35em; + left: 0.5em; z-index: 2; border: none; width: 0.75em; height: 0.75em; background-color: #D95C5C; border-radius: 50rem; - -webkit-transition: background 0.3s ease 0s; - -moz-transition: background 0.3s ease 0s; - -o-transition: background 0.3s ease 0s; - -ms-transition: background 0.3s ease 0s; - transition: background 0.3s ease 0s; -} -/* Active toggle Toggle */ -.ui.toggle.checkbox input:checked + .box, -.ui.toggle.checkbox input:checked + label { - left: 1.75em; + -webkit-transition: background 0.3s ease 0s, + left 0.3s ease 0s + ; + -moz-transition: background 0.3s ease 0s, + left 0.3s ease 0s + ; + -o-transition: background 0.3s ease 0s, + left 0.3s ease 0s + ; + -ms-transition: background 0.3s ease 0s, + left 0.3s ease 0s + ; + 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; } +/* Active */ .ui.toggle.checkbox input:checked + .box:after, .ui.toggle.checkbox input:checked + label:after { + left: 1.75em; background-color: #89B84C; } /*-------------- diff --git a/node/package.json b/node/package.json index 4da06076d..9be3ec287 100755 --- a/node/package.json +++ b/node/package.json @@ -1,7 +1,7 @@ { "semantic": { "name": "Semantic UI", - "version": "0.3.8" + "version": "0.4.0" }, "dependencies": { "docpad": "~6.53.1", diff --git a/node/src/documents/index.html.eco b/node/src/documents/index.html.eco index c81f39f54..8ad7cf892 100755 --- a/node/src/documents/index.html.eco +++ b/node/src/documents/index.html.eco @@ -14,7 +14,7 @@ type : 'Semantic'
-

Semantic UI 0.3.8

+

Semantic UI 0.4.0

UI is the vocabulary of the web.

Semantic empowers designers and developers by creating a language for sharing UI.

View UI diff --git a/node/src/files/build/minified/modules/checkbox.min.css b/node/src/files/build/minified/modules/checkbox.min.css index ee848bb12..f4d4dbd9a 100644 --- a/node/src/files/build/minified/modules/checkbox.min.css +++ b/node/src/files/build/minified/modules/checkbox.min.css @@ -1 +1 @@ -.ui.checkbox{position:relative;display:inline-block;outline:0;margin-right:.5em;vertical-align:middle}.ui.checkbox input{opacity:0;outline:0}.ui.checkbox .box,.ui.checkbox label{outline:0;cursor:pointer;position:absolute;line-height:1;width:1em;height:1em;bottom:0;left:0;border-radius:4px;-webkit-box-shadow:0 0 0 1px rgba(0,0,0,.2);-moz-box-shadow:0 0 0 1px rgba(0,0,0,.2);box-shadow:0 0 0 1px rgba(0,0,0,.2);background:#FFF;-webkit-transition:background-color .1s ease-out,box-shadow .1s ease-out;-moz-transition:background-color .1s ease-out,box-shadow .1s ease-out;-o-transition:background-color .1s ease-out,box-shadow .1s ease-out;-ms-transition:background-color .1s ease-out,box-shadow .1s ease-out;transition:background-color .1s ease-out,box-shadow .1s ease-out}.ui.checkbox .box:after,.ui.checkbox label:after{-ms-filter:"alpha(Opacity=0)";filter:alpha(opacity=0);opacity:0;content:'';position:absolute;background:transparent;border:.2em solid #333;border-top:0;border-right:0;-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-o-transform:rotate(-45deg);-ms-transform:rotate(-45deg);transform:rotate(-45deg)}.ui.checkbox .box:after,.ui.checkbox label:after{top:.3em;left:.2em;width:.45em;height:.15em}.ui.checkbox+label{cursor:pointer;opacity:.85;vertical-align:middle}.ui.checkbox+label:hover{opacity:1}.ui.checkbox .box:hover,.ui.checkbox label:hover{background-color:#FAFAFA;-webkit-box-shadow:0 0 0 1px rgba(0,0,0,.3);-moz-box-shadow:0 0 0 1px rgba(0,0,0,.3);box-shadow:0 0 0 1px rgba(0,0,0,.3)}.ui.checkbox .box:active,.ui.checkbox label:active{background-color:#F5F5F5}.ui.checkbox input:checked+.box:after,.ui.checkbox input:checked+label:after{-ms-filter:"alpha(Opacity=100)";filter:alpha(opacity=100);opacity:1}.ui.disabled.checkbox+.box:after,.ui.checkbox input[disabled]+.box:after,.ui.disabled.checkbox label,.ui.checkbox input[disabled]+label{opacity:.4}.ui.radio.checkbox{width:14px;height:16px}.ui.radio.checkbox .box,.ui.radio.checkbox label{width:14px;height:14px;-webkit-border-radius:500px;-moz-border-radius:500px;border-radius:500px}.ui.radio.checkbox .box:after,.ui.radio.checkbox label:after{top:3px;left:3px;border:0;width:8px;height:8px;background-color:#555;-webkit-border-radius:500px;-moz-border-radius:500px;border-radius:500px}.ui.slider.checkbox{cursor:pointer;width:3em;height:2em}.ui.slider.checkbox:after{position:absolute;top:1em;left:0;content:'';width:100%;height:2px;background-color:rgba(0,0,0,.1)}.ui.slider.checkbox .box,.ui.slider.checkbox label{cursor:pointer;display:block;position:absolute;top:.25em;left:0;z-index:1;width:1.5em;height:1.5em;-webkit-box-shadow:0 0 0 1px rgba(0,0,0,.1) inset;-moz-box-shadow:0 0 0 1px rgba(0,0,0,.1) inset;box-shadow:0 0 0 1px rgba(0,0,0,.1) inset;border-radius:50rem;-webkit-transition:left .3s ease 0s;-moz-transition:left .3s ease 0s;-o-transition:left .3s ease 0s;-ms-transition:left .3s ease 0s;transition:left .3s ease 0s}.ui.slider.checkbox .box:after,.ui.slider.checkbox label:after{opacity:1;position:absolute;content:'';top:.375em;left:.375em;border:0;width:.75em;height:.75em;background-color:#D95C5C;border-radius:50rem;-webkit-transition:background .3s ease 0s;-moz-transition:background .3s ease 0s;-o-transition:background .3s ease 0s;-ms-transition:background .3s ease 0s;transition:background .3s ease 0s}.ui.slider.checkbox input:checked+.box,.ui.slider.checkbox input:checked+label{left:1.75em}.ui.slider.checkbox input:checked+.box:after,.ui.slider.checkbox input:checked+label:after{background-color:#89B84C}.ui.toggle.checkbox{cursor:pointer;width:3em;height:2em}.ui.toggle.checkbox:after{cursor:pointer;display:block;position:absolute;content:'';top:.25em;left:0;z-index:1;background-color:#FFF;width:100%;height:1.5em;-webkit-box-shadow:0 0 0 1px rgba(0,0,0,.1) inset;-moz-box-shadow:0 0 0 1px rgba(0,0,0,.1) inset;box-shadow:0 0 0 1px rgba(0,0,0,.1) inset;border-radius:50rem}.ui.toggle.checkbox .box,.ui.toggle.checkbox label{position:absolute;top:.65em;left:.5em;-webkit-transition:left .3s ease 0s;-moz-transition:left .3s ease 0s;-o-transition:left .3s ease 0s;-ms-transition:left .3s ease 0s;transition:left .3s ease 0s;background-color:transparent;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}.ui.toggle.checkbox .box:after,.ui.toggle.checkbox label:after{opacity:1;content:'';position:absolute;top:0;left:0;z-index:2;border:0;width:.75em;height:.75em;background-color:#D95C5C;border-radius:50rem;-webkit-transition:background .3s ease 0s;-moz-transition:background .3s ease 0s;-o-transition:background .3s ease 0s;-ms-transition:background .3s ease 0s;transition:background .3s ease 0s}.ui.toggle.checkbox input:checked+.box,.ui.toggle.checkbox input:checked+label{left:1.75em}.ui.toggle.checkbox input:checked+.box:after,.ui.toggle.checkbox input:checked+label:after{background-color:#89B84C}.ui.checkbox{width:1em;height:1em}.ui.checkbox,.ui.checkbox .box,.ui.checkbox label{font-size:1em}.ui.large.checkbox{width:1.25em;height:1.25em}.ui.large.checkbox,.ui.large.checkbox .box,.ui.large.checkbox label{font-size:1.25em}.ui.huge.checkbox{width:1.5em;height:1.5em}.ui.huge.checkbox,.ui.huge.checkbox .box,.ui.huge.checkbox label{font-size:1.5em} \ No newline at end of file +.ui.checkbox{position:relative;display:inline-block;outline:0;vertical-align:middle}.ui.checkbox input{position:absolute;top:0;left:0;opacity:0;outline:0}.ui.checkbox .box,.ui.checkbox label{cursor:pointer;position:relative;min-width:1em;height:1em;padding-left:2em;outline:0;white-space:nowrap}.ui.checkbox .box:before,.ui.checkbox label:before{position:absolute;top:.25em;line-height:1;width:1em;height:1em;left:0;content:'';border-radius:4px;background:#FFF;-webkit-transition:background-color .3s ease,box-shadow .3s ease;-moz-transition:background-color .3s ease,box-shadow .3s ease;-o-transition:background-color .3s ease,box-shadow .3s ease;-ms-transition:background-color .3s ease,box-shadow .3s ease;transition:background-color .3s ease,box-shadow .3s ease;-webkit-box-shadow:0 0 0 1px rgba(0,0,0,.2);-moz-box-shadow:0 0 0 1px rgba(0,0,0,.2);box-shadow:0 0 0 1px rgba(0,0,0,.2)}.ui.checkbox .box:after,.ui.checkbox label:after{-ms-filter:"alpha(Opacity=0)";filter:alpha(opacity=0);opacity:0;content:'';position:absolute;background:transparent;border:.2em solid #333;border-top:0;border-right:0;-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-o-transform:rotate(-45deg);-ms-transform:rotate(-45deg);transform:rotate(-45deg)}.ui.checkbox .box:after,.ui.checkbox label:after{top:.54em;left:.2em;width:.45em;height:.15em}.ui.checkbox label{color:rgba(0,0,0,.6);-webkit-transition:color .2s ease;-moz-transition:color .2s ease;-o-transition:color .2s ease;-ms-transition:color .2s ease;transition:color .2s ease}.ui.checkbox label:hover{color:rgba(0,0,0,.8)}.ui.checkbox input:focus+label{color:rgba(0,0,0,.8)}.ui.checkbox+label{cursor:pointer;opacity:.85;vertical-align:middle}.ui.checkbox+label:hover{opacity:1}.ui.checkbox .box:hover::before,.ui.checkbox label:hover::before{-webkit-box-shadow:0 0 0 1px rgba(0,0,0,.3);-moz-box-shadow:0 0 0 1px rgba(0,0,0,.3);box-shadow:0 0 0 1px rgba(0,0,0,.3)}.ui.checkbox .box:active::before,.ui.checkbox label:active::before{background-color:#F5F5F5}.ui.checkbox input:focus+.box:before,.ui.checkbox input:focus+label:before{-webkit-box-shadow:0 0 0 1px rgba(0,0,0,.3);-moz-box-shadow:0 0 0 1px rgba(0,0,0,.3);box-shadow:0 0 0 1px rgba(0,0,0,.3)}.ui.checkbox input:checked+.box:after,.ui.checkbox input:checked+label:after{-ms-filter:"alpha(Opacity=100)";filter:alpha(opacity=100);opacity:1}.ui.disabled.checkbox+.box:after,.ui.checkbox input[disabled]+.box:after,.ui.disabled.checkbox label,.ui.checkbox input[disabled]+label{opacity:.4;color:rgba(0,0,0,.3)}.ui.radio.checkbox .box:before,.ui.radio.checkbox label:before{width:1em;height:1em;-webkit-border-radius:500px;-moz-border-radius:500px;border-radius:500px}.ui.radio.checkbox .box:after,.ui.radio.checkbox label:after{border:0;top:.45em;left:.2em;width:.6em;height:.6em;background-color:#555;-webkit-border-radius:500px;-moz-border-radius:500px;border-radius:500px}.ui.slider.checkbox{cursor:pointer;min-width:3em;height:2em}.ui.slider.checkbox:after{position:absolute;top:.8em;left:0;content:'';width:3em;height:2px;background-color:rgba(0,0,0,.1)}.ui.slider.checkbox .box,.ui.slider.checkbox label{padding-left:4em}.ui.slider.checkbox .box:before,.ui.slider.checkbox label:before{cursor:pointer;display:block;position:absolute;top:0;left:0;z-index:1;width:1.5em;height:1.5em;-webkit-box-shadow:0 0 0 1px rgba(0,0,0,.1) inset;-moz-box-shadow:0 0 0 1px rgba(0,0,0,.1) inset;box-shadow:0 0 0 1px rgba(0,0,0,.1) inset;border-radius:50rem;-webkit-transition:left .3s ease 0s;-moz-transition:left .3s ease 0s;-o-transition:left .3s ease 0s;-ms-transition:left .3s ease 0s;transition:left .3s ease 0s}.ui.slider.checkbox .box:after,.ui.slider.checkbox label:after{opacity:1;position:absolute;content:'';top:.375em;left:0;z-index:2;margin-left:.375em;border:0;width:.75em;height:.75em;border-radius:50rem;-webkit-transition:background .3s ease 0s,left .3s ease 0s;-moz-transition:background .3s ease 0s,left .3s ease 0s;-o-transition:background .3s ease 0s,left .3s ease 0s;-ms-transition:background .3s ease 0s,left .3s ease 0s;transition:background .3s ease 0s,left .3s ease 0s}.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}.ui.slider.checkbox .box:after,.ui.slider.checkbox label:after{background-color:#D95C5C}.ui.slider.checkbox input:checked+.box:after,.ui.slider.checkbox input:checked+label:after{background-color:#89B84C}.ui.toggle.checkbox{cursor:pointer;height:2em}.ui.toggle.checkbox .box,.ui.toggle.checkbox label{padding-left:4em}.ui.toggle.checkbox .box:before,.ui.toggle.checkbox label:before{cursor:pointer;display:block;position:absolute;content:'';top:0;left:0;z-index:1;background-color:#FFF;width:3em;height:1.5em;-webkit-box-shadow:0 0 0 1px rgba(0,0,0,.1) inset;-moz-box-shadow:0 0 0 1px rgba(0,0,0,.1) inset;box-shadow:0 0 0 1px rgba(0,0,0,.1) inset;border-radius:50rem}.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:'';position:absolute;top:.35em;left:.5em;z-index:2;border:0;width:.75em;height:.75em;background-color:#D95C5C;border-radius:50rem;-webkit-transition:background .3s ease 0s,left .3s ease 0s;-moz-transition:background .3s ease 0s,left .3s ease 0s;-o-transition:background .3s ease 0s,left .3s ease 0s;-ms-transition:background .3s ease 0s,left .3s ease 0s;transition:background .3s ease 0s,left .3s ease 0s}.ui.toggle.checkbox:active .box:before,.ui.toggle.checkbox:active label:before{background-color:#F5F5F5}.ui.toggle.checkbox input:checked+.box:after,.ui.toggle.checkbox input:checked+label:after{left:1.75em;background-color:#89B84C}.ui.checkbox{width:1em;height:1em}.ui.checkbox,.ui.checkbox .box,.ui.checkbox label{font-size:1em}.ui.large.checkbox{width:1.25em;height:1.25em}.ui.large.checkbox,.ui.large.checkbox .box,.ui.large.checkbox label{font-size:1.25em}.ui.huge.checkbox{width:1.5em;height:1.5em}.ui.huge.checkbox,.ui.huge.checkbox .box,.ui.huge.checkbox label{font-size:1.5em} \ No newline at end of file diff --git a/node/src/files/build/packaged/css/semantic.min.css.REMOVED.git-id b/node/src/files/build/packaged/css/semantic.min.css.REMOVED.git-id index a7eed6820..6b846d195 100644 --- a/node/src/files/build/packaged/css/semantic.min.css.REMOVED.git-id +++ b/node/src/files/build/packaged/css/semantic.min.css.REMOVED.git-id @@ -1 +1 @@ -788778edb19596d826e216478dc0fe2cb8eccf02 \ No newline at end of file +d679a1c4d8dc27188e9cd6068d45a417582f4523 \ No newline at end of file diff --git a/node/src/files/build/packaged/javascript/semantic.js b/node/src/files/build/packaged/javascript/semantic.js deleted file mode 100644 index e69de29bb..000000000 diff --git a/node/src/files/build/packaged/javascript/semantic.js.REMOVED.git-id b/node/src/files/build/packaged/javascript/semantic.js.REMOVED.git-id new file mode 100644 index 000000000..592fe3b45 --- /dev/null +++ b/node/src/files/build/packaged/javascript/semantic.js.REMOVED.git-id @@ -0,0 +1 @@ +5078c4c0f7a4107ca4e37f1a3fbcd47f14cf328a \ No newline at end of file diff --git a/node/src/files/build/packaged/javascript/semantic.min.js.REMOVED.git-id b/node/src/files/build/packaged/javascript/semantic.min.js.REMOVED.git-id index 2216ebe8a..37a3161db 100644 --- a/node/src/files/build/packaged/javascript/semantic.min.js.REMOVED.git-id +++ b/node/src/files/build/packaged/javascript/semantic.min.js.REMOVED.git-id @@ -1 +1 @@ -63253c362a471204c32163b1ad8fd36f702753a7 \ No newline at end of file +05773b75e897070fb92bc42a06ccc0887dba27ba \ No newline at end of file diff --git a/rtl/less/modules/checkbox.less b/rtl/less/modules/checkbox.less index e3c3ee787..224f4f63b 100644 --- a/rtl/less/modules/checkbox.less +++ b/rtl/less/modules/checkbox.less @@ -19,60 +19,78 @@ /*--- Content ---*/ + .ui.checkbox { position: relative; display: inline-block; outline: none; - - margin-left: 0.5em; vertical-align: middle; } .ui.checkbox input { + position: absolute; + top: 0px; + right: 0px; opacity: 0; outline: none; } /*--- Box ---*/ + .ui.checkbox .box, .ui.checkbox label { - outline: none; cursor: pointer; + position: relative; + + min-width: 1em; + height: 1em; + + padding-right: 2em; + outline: none; + + white-space: nowrap; +} + +.ui.checkbox .box:before, +.ui.checkbox label:before { position: absolute; + top: 0.25em; + right: 0em; line-height: 1; width: 1em; height: 1em; - bottom: 0em; right: 0em; - border-radius: 4px; + content: ''; - -webkit-box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.2); - -moz-box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.2); - box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.2); + border-radius: 4px; background: #FFFFFF; -webkit-transition: - background-color 0.1s ease-out, - box-shadow 0.1s ease-out + background-color 0.3s ease, + box-shadow 0.3s ease ; -moz-transition: - background-color 0.1s ease-out, - box-shadow 0.1s ease-out + background-color 0.3s ease, + box-shadow 0.3s ease ; -o-transition: - background-color 0.1s ease-out, - box-shadow 0.1s ease-out + background-color 0.3s ease, + box-shadow 0.3s ease ; -ms-transition: - background-color 0.1s ease-out, - box-shadow 0.1s ease-out + background-color 0.3s ease, + box-shadow 0.3s ease ; transition: - background-color 0.1s ease-out, - box-shadow 0.1s ease-out + background-color 0.3s ease, + box-shadow 0.3s ease ; + + -webkit-box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.2); + -moz-box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.2); + box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.2); } /*--- Checkbox ---*/ @@ -95,13 +113,31 @@ } .ui.checkbox .box:after, .ui.checkbox label:after { - top: 0.3em; + top: 0.54em; right: 0.2em; width: 0.45em; height: 0.15em; } -/*--- Label ---*/ +/*--- Inside Label ---*/ +.ui.checkbox label { + color: rgba(0, 0, 0, 0.6); + + -webkit-transition: color 0.2s ease; + -moz-transition: color 0.2s ease; + -o-transition: color 0.2s ease; + -ms-transition: color 0.2s ease; + transition: color 0.2s ease; +} +.ui.checkbox label:hover { + color: rgba(0, 0, 0, 0.8); +} + +.ui.checkbox input:focus + label { + color: rgba(0, 0, 0, 0.8); +} + +/*--- Outside Label ---*/ .ui.checkbox + label { cursor: pointer; opacity: 0.85; @@ -111,27 +147,33 @@ opacity: 1; } + /******************************* States *******************************/ /*--- Hover ---*/ -.ui.checkbox .box:hover, -.ui.checkbox label:hover { - background-color: #FAFAFA; +.ui.checkbox .box:hover::before, +.ui.checkbox label:hover::before { -webkit-box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.3); box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.3); } - /*--- Down ---*/ -.ui.checkbox .box:active, -.ui.checkbox label:active { +.ui.checkbox .box:active::before, +.ui.checkbox label:active::before { background-color: #F5F5F5; } +/*--- Focus ---*/ +.ui.checkbox input:focus + .box:before, +.ui.checkbox input:focus + label:before { + -webkit-box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.3); + -moz-box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.3); + box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.3); +} /*--- Active ---*/ .ui.checkbox input:checked + .box:after, @@ -141,13 +183,13 @@ opacity: 1; } - /*--- Disabled ---*/ .ui.disabled.checkbox + .box:after, .ui.checkbox input[disabled] + .box:after, .ui.disabled.checkbox label, .ui.checkbox input[disabled] + label { opacity: 0.4; + color: rgba(0, 0, 0, 0.3); } @@ -160,26 +202,22 @@ Radio ---------------*/ -.ui.radio.checkbox { - width: 14px; - height: 16px; -} -.ui.radio.checkbox .box, -.ui.radio.checkbox label { - width: 14px; - height: 14px; +.ui.radio.checkbox .box:before, +.ui.radio.checkbox label:before { + width: 1em; + height: 1em; -webkit-border-radius: 500px; -moz-border-radius: 500px; border-radius: 500px; } .ui.radio.checkbox .box:after, .ui.radio.checkbox label:after { - top: 3px; - right: 3px; - border: none; - width: 8px; - height: 8px; + top: 0.45em; + right: 0.2em; + + width: 0.6em; + height: 0.6em; background-color: #555555; @@ -194,28 +232,34 @@ .ui.slider.checkbox { cursor: pointer; - width: 3em; + min-width: 3em; height: 2em; } + /* Line */ .ui.slider.checkbox:after { position: absolute; - top: 1em; + top: 0.8em; right: 0em; content: ''; - width: 100%; + width: 3em; height: 2px; background-color: rgba(0, 0, 0, 0.1); } + /* Button */ .ui.slider.checkbox .box, .ui.slider.checkbox label { + padding-right: 4em; +} +.ui.slider.checkbox .box:before, +.ui.slider.checkbox label:before { cursor: pointer; display: block; position: absolute; - top: 0.25em; + top: 0em; right: 0; z-index: 1; @@ -243,28 +287,62 @@ position: absolute; content: ''; top: 0.375em; - right: 0.375em; + right: 0em; + z-index: 2; + + margin-right: 0.375em; border: none; width: 0.75em; height: 0.75em; - background-color: #D95C5C; - border-radius: 50rem; - -webkit-transition: background 0.3s ease 0s; - -moz-transition: background 0.3s ease 0s; - -o-transition: background 0.3s ease 0s; - -ms-transition: background 0.3s ease 0s; - transition: background 0.3s ease 0s; + -webkit-transition: + background 0.3s ease 0s, + right 0.3s ease 0s + ; + -moz-transition: + background 0.3s ease 0s, + right 0.3s ease 0s + ; + -o-transition: + background 0.3s ease 0s, + right 0.3s ease 0s + ; + -ms-transition: + background 0.3s ease 0s, + right 0.3s ease 0s + ; + transition: + background 0.3s ease 0s, + right 0.3s ease 0s + ; } -/* Active Slider Toggle */ -.ui.slider.checkbox input:checked + .box, -.ui.slider.checkbox input:checked + label { +/* 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 { right: 1.75em; } + +/* Off Color */ +// .ui.slider.checkbox .box, +// .ui.slider.checkbox label { +// color: #D95C5C !important; +// } +.ui.slider.checkbox .box:after, +.ui.slider.checkbox label:after { + background-color: #D95C5C; +} + +/* On Color */ +// .ui.slider.checkbox input:checked + .box, +// .ui.slider.checkbox input:checked + label { +// color: #89B84C !important; +// } .ui.slider.checkbox input:checked + .box:after, .ui.slider.checkbox input:checked + label:after { background-color: #89B84C; @@ -278,22 +356,28 @@ .ui.toggle.checkbox { cursor: pointer; - width: 3em; height: 2em; } -/* Line */ -.ui.toggle.checkbox:after { + +.ui.toggle.checkbox .box, +.ui.toggle.checkbox label { + padding-right: 4em; +} + +/* Switch */ +.ui.toggle.checkbox .box:before, +.ui.toggle.checkbox label:before { cursor: pointer; display: block; position: absolute; content: ''; - top: 0.25em; + top: 0em; right: 0em; z-index: 1; background-color: #FFFFFF; - width: 100%; + width: 3em; height: 1.5em; -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset; @@ -302,32 +386,21 @@ border-radius: 50rem; } -.ui.toggle.checkbox .box, -.ui.toggle.checkbox label { - position: absolute; - top: 0.65em; - right: 0.5em; - -webkit-transition: right 0.3s ease 0s; - -moz-transition: right 0.3s ease 0s; - -o-transition: right 0.3s ease 0s; - -ms-transition: right 0.3s ease 0s; - transition: right 0.3s ease 0s; +/* Activation Light */ +.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; -} -/* Button Activation Light */ -.ui.toggle.checkbox .box:after, -.ui.toggle.checkbox label:after { - opacity: 1; content: ''; position: absolute; - top: 0px; - right: 0px; + top: 0.35em; + right: 0.5em; z-index: 2; border: none; @@ -335,23 +408,40 @@ height: 0.75em; background-color: #D95C5C; - border-radius: 50rem; - -webkit-transition: background 0.3s ease 0s; - -moz-transition: background 0.3s ease 0s; - -o-transition: background 0.3s ease 0s; - -ms-transition: background 0.3s ease 0s; - transition: background 0.3s ease 0s; + -webkit-transition: + background 0.3s ease 0s, + right 0.3s ease 0s + ; + -moz-transition: + background 0.3s ease 0s, + right 0.3s ease 0s + ; + -o-transition: + background 0.3s ease 0s, + right 0.3s ease 0s + ; + -ms-transition: + background 0.3s ease 0s, + right 0.3s ease 0s + ; + transition: + background 0.3s ease 0s, + right 0.3s ease 0s + ; } -/* Active toggle Toggle */ -.ui.toggle.checkbox input:checked + .box, -.ui.toggle.checkbox input:checked + label { - right: 1.75em; +/* Active */ +.ui.toggle.checkbox:active .box:before, +.ui.toggle.checkbox:active label:before { + background-color: #F5F5F5; } + +/* Active */ .ui.toggle.checkbox input:checked + .box:after, .ui.toggle.checkbox input:checked + label:after { + right: 1.75em; background-color: #89B84C; } diff --git a/rtl/minified/modules/checkbox.min.css b/rtl/minified/modules/checkbox.min.css index d81586fae..27a18fded 100644 --- a/rtl/minified/modules/checkbox.min.css +++ b/rtl/minified/modules/checkbox.min.css @@ -1 +1 @@ -.ui.checkbox{position:relative;display:inline-block;outline:0;margin-left:.5em;vertical-align:middle}.ui.checkbox input{opacity:0;outline:0}.ui.checkbox .box,.ui.checkbox label{outline:0;cursor:pointer;position:absolute;line-height:1;width:1em;height:1em;bottom:0;right:0;border-radius:4px;-webkit-box-shadow:0 0 0 1px rgba(0,0,0,.2);-moz-box-shadow:0 0 0 1px rgba(0,0,0,.2);box-shadow:0 0 0 1px rgba(0,0,0,.2);background:#FFF;-webkit-transition:background-color .1s ease-out,box-shadow .1s ease-out;-moz-transition:background-color .1s ease-out,box-shadow .1s ease-out;-o-transition:background-color .1s ease-out,box-shadow .1s ease-out;-ms-transition:background-color .1s ease-out,box-shadow .1s ease-out;transition:background-color .1s ease-out,box-shadow .1s ease-out}.ui.checkbox .box:after,.ui.checkbox label:after{-ms-filter:"alpha(Opacity=0)";filter:alpha(opacity=0);opacity:0;content:'';position:absolute;background:transparent;border:.2em solid #333;border-top:0;border-left:0;-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-o-transform:rotate(-45deg);-ms-transform:rotate(-45deg);transform:rotate(-45deg)}.ui.checkbox .box:after,.ui.checkbox label:after{top:.3em;right:.2em;width:.45em;height:.15em}.ui.checkbox+label{cursor:pointer;opacity:.85;vertical-align:middle}.ui.checkbox+label:hover{opacity:1}.ui.checkbox .box:hover,.ui.checkbox label:hover{background-color:#FAFAFA;-webkit-box-shadow:0 0 0 1px rgba(0,0,0,.3);-moz-box-shadow:0 0 0 1px rgba(0,0,0,.3);box-shadow:0 0 0 1px rgba(0,0,0,.3)}.ui.checkbox .box:active,.ui.checkbox label:active{background-color:#F5F5F5}.ui.checkbox input:checked+.box:after,.ui.checkbox input:checked+label:after{-ms-filter:"alpha(Opacity=100)";filter:alpha(opacity=100);opacity:1}.ui.disabled.checkbox+.box:after,.ui.checkbox input[disabled]+.box:after,.ui.disabled.checkbox label,.ui.checkbox input[disabled]+label{opacity:.4}.ui.radio.checkbox{width:14px;height:16px}.ui.radio.checkbox .box,.ui.radio.checkbox label{width:14px;height:14px;-webkit-border-radius:500px;-moz-border-radius:500px;border-radius:.box:after,.ui.radio.checkbox 500px}.ui.radio.checkbox label:after{top:3px;right:3px;border:0;width:8px;height:8px;background-color:#555;-webkit-border-radius:500px;-moz-border-radius:500px;border-radius:500px}.ui.slider.checkbox{cursor:pointer;width:3em;height:2em}.ui.slider.checkbox:after{position:absolute;top:1em;right:0;content:'';width:100%;height:2px;background-color:rgba(0,0,0,.1)}.ui.slider.checkbox .box,.ui.slider.checkbox label{cursor:pointer;display:block;position:absolute;top:.25em;right:0;z-index:1;width:1.5em;height:1.5em;-webkit-box-shadow:0 0 0 1px rgba(0,0,0,.1) inset;-moz-box-shadow:0 0 0 1px rgba(0,0,0,.1) inset;box-shadow:0 0 0 1px rgba(0,0,0,.1) inset;border-radius:50rem;-webkit-transition:right .3s ease 0s;-moz-transition:right .3s ease 0s;-o-transition:right .3s ease 0s;-ms-transition:right .3s ease 0s;transition:right .3s ease 0s}.ui.slider.checkbox .box:after,.ui.slider.checkbox label:after{opacity:1;position:absolute;content:'';top:.375em;right:.375em;border:0;width:.75em;height:.75em;background-color:#D95C5C;border-radius:50rem;-webkit-transition:background .3s ease 0s;-moz-transition:background .3s ease 0s;-o-transition:background .3s ease 0s;-ms-transition:background .3s ease 0s;transition:background .3s ease 0s}.ui.slider.checkbox input:checked+.box,.ui.slider.checkbox input:checked+label{right:1.75em}.ui.slider.checkbox input:checked+.box:after,.ui.slider.checkbox input:checked+label:after{background-color:#89B84C}.ui.toggle.checkbox{cursor:pointer;width:3em;height:2em}.ui.toggle.checkbox:after{cursor:pointer;display:block;position:absolute;content:'';top:.25em;right:0;z-index:1;background-color:#FFF;width:100%;height:1.5em;-webkit-box-shadow:0 0 0 1px rgba(0,0,0,.1) inset;-moz-box-shadow:0 0 0 1px rgba(0,0,0,.1) inset;box-shadow:0 0 0 1px rgba(0,0,0,.1) inset;border-radius:.box,.ui.toggle.checkbox 50rem}.ui.toggle.checkbox label{position:absolute;top:.65em;right:.5em;-webkit-transition:right .3s ease 0s;-moz-transition:right .3s ease 0s;-o-transition:right .3s ease 0s;-ms-transition:right .3s ease 0s;transition:right .3s ease 0s;background-color:transparent;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}.ui.toggle.checkbox .box:after,.ui.toggle.checkbox label:after{opacity:1;content:'';position:absolute;top:0;right:0;z-index:2;border:0;width:.75em;height:.75em;background-color:#D95C5C;border-radius:50rem;-webkit-transition:background .3s ease 0s;-moz-transition:background .3s ease 0s;-o-transition:background .3s ease 0s;-ms-transition:background .3s ease 0s;transition:background .3s ease 0s}.ui.toggle.checkbox input:checked+.box,.ui.toggle.checkbox input:checked+label{right:1.75em}.ui.toggle.checkbox input:checked+.box:after,.ui.toggle.checkbox input:checked+label:after{background-color:#89B84C}.ui.checkbox{width:1em;height:1em}.ui.checkbox,.ui.checkbox .box,.ui.checkbox label{font-size:1em}.ui.large.checkbox{width:1.25em;height:1.25em}.ui.large.checkbox,.ui.large.checkbox .box,.ui.large.checkbox label{font-size:1.25em}.ui.huge.checkbox{width:1.5em;height:1.5em}.ui.huge.checkbox,.ui.huge.checkbox .box,.ui.huge.checkbox label{font-size:1.5em} \ No newline at end of file +.ui.checkbox{position:relative;display:inline-block;outline:0;vertical-align:middle}.ui.checkbox input{position:absolute;top:0;right:0;opacity:0;outline:0}.ui.checkbox .box,.ui.checkbox label{cursor:pointer;position:relative;min-width:1em;height:1em;padding-right:2em;outline:0;white-space:nowrap}.ui.checkbox .box:before,.ui.checkbox label:before{position:absolute;top:.25em;line-height:1;width:1em;height:1em;right:0;content:'';border-radius:4px;background:#FFF;-webkit-transition:background-color .3s ease,box-shadow .3s ease;-moz-transition:background-color .3s ease,box-shadow .3s ease;-o-transition:background-color .3s ease,box-shadow .3s ease;-ms-transition:background-color .3s ease,box-shadow .3s ease;transition:background-color .3s ease,box-shadow .3s ease;-webkit-box-shadow:0 0 0 1px rgba(0,0,0,.2);-moz-box-shadow:0 0 0 1px rgba(0,0,0,.2);box-shadow:0 0 0 1px rgba(0,0,0,.2)}.ui.checkbox .box:after,.ui.checkbox label:after{-ms-filter:"alpha(Opacity=0)";filter:alpha(opacity=0);opacity:0;content:'';position:absolute;background:transparent;border:.2em solid #333;border-top:0;border-left:0;-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-o-transform:rotate(-45deg);-ms-transform:rotate(-45deg);transform:rotate(-45deg)}.ui.checkbox .box:after,.ui.checkbox label:after{top:.54em;right:.2em;width:.45em;height:.15em}.ui.checkbox label{color:rgba(0,0,0,.6);-webkit-transition:color .2s ease;-moz-transition:color .2s ease;-o-transition:color .2s ease;-ms-transition:color .2s ease;transition:color .2s ease}.ui.checkbox label:hover{color:rgba(0,0,0,.8)}.ui.checkbox input:focus+label{color:rgba(0,0,0,.8)}.ui.checkbox+label{cursor:pointer;opacity:.85;vertical-align:middle}.ui.checkbox+label:hover{opacity:1}.ui.checkbox .box:hover::before,.ui.checkbox label:hover::before{-webkit-box-shadow:0 0 0 1px rgba(0,0,0,.3);-moz-box-shadow:0 0 0 1px rgba(0,0,0,.3);box-shadow:0 0 0 1px rgba(0,0,0,.3)}.ui.checkbox .box:active::before,.ui.checkbox label:active::before{background-color:#F5F5F5}.ui.checkbox input:focus+.box:before,.ui.checkbox input:focus+label:before{-webkit-box-shadow:0 0 0 1px rgba(0,0,0,.3);-moz-box-shadow:0 0 0 1px rgba(0,0,0,.3);box-shadow:0 0 0 1px rgba(0,0,0,.3)}.ui.checkbox input:checked+.box:after,.ui.checkbox input:checked+label:after{-ms-filter:"alpha(Opacity=100)";filter:alpha(opacity=100);opacity:1}.ui.disabled.checkbox+.box:after,.ui.checkbox input[disabled]+.box:after,.ui.disabled.checkbox label,.ui.checkbox input[disabled]+label{opacity:.4;color:rgba(0,0,0,.3)}.ui.radio.checkbox .box:before,.ui.radio.checkbox label:before{width:1em;height:1em;-webkit-border-radius:500px;-moz-border-radius:500px;border-radius:.box:after,.ui.radio.checkbox 500px}.ui.radio.checkbox label:after{border:0;top:.45em;right:.2em;width:.6em;height:.6em;background-color:#555;-webkit-border-radius:500px;-moz-border-radius:500px;border-radius:500px}.ui.slider.checkbox{cursor:pointer;min-width:3em;height:2em}.ui.slider.checkbox:after{position:absolute;top:.8em;right:0;content:'';width:3em;height:2px;background-color:rgba(0,0,0,.1)}.ui.slider.checkbox .box,.ui.slider.checkbox label{padding-right:4em}.ui.slider.checkbox .box:before,.ui.slider.checkbox label:before{cursor:pointer;display:block;position:absolute;top:0;right:0;z-index:1;width:1.5em;height:1.5em;-webkit-box-shadow:0 0 0 1px rgba(0,0,0,.1) inset;-moz-box-shadow:0 0 0 1px rgba(0,0,0,.1) inset;box-shadow:0 0 0 1px rgba(0,0,0,.1) inset;border-radius:50rem;-webkit-transition:right .3s ease 0s;-moz-transition:right .3s ease 0s;-o-transition:right .3s ease 0s;-ms-transition:right .3s ease 0s;transition:right .3s ease 0s}.ui.slider.checkbox .box:after,.ui.slider.checkbox label:after{opacity:1;position:absolute;content:'';top:.375em;right:0;z-index:2;margin-right:.375em;border:0;width:.75em;height:.75em;border-radius:50rem;-webkit-transition:background .3s ease 0s,right .3s ease 0s;-moz-transition:background .3s ease 0s,right .3s ease 0s;-o-transition:background .3s ease 0s,right .3s ease 0s;-ms-transition:background .3s ease 0s,right .3s ease 0s;transition:background .3s ease 0s,right .3s ease 0s}.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{right:1.75em}.ui.slider.checkbox .box:after,.ui.slider.checkbox label:after{background-color:#D95C5C}.ui.slider.checkbox input:checked+.box:after,.ui.slider.checkbox input:checked+label:after{background-color:#89B84C}.ui.toggle.checkbox{cursor:pointer;height:2em}.ui.toggle.checkbox .box,.ui.toggle.checkbox label{padding-right:4em}.ui.toggle.checkbox .box:before,.ui.toggle.checkbox label:before{cursor:pointer;display:block;position:absolute;content:'';top:0;right:0;z-index:1;background-color:#FFF;width:3em;height:1.5em;-webkit-box-shadow:0 0 0 1px rgba(0,0,0,.1) inset;-moz-box-shadow:0 0 0 1px rgba(0,0,0,.1) inset;box-shadow:0 0 0 1px rgba(0,0,0,.1) inset;border-radius:.box:after,.ui.toggle.checkbox 50rem}.ui.toggle.checkbox label:after{opacity:1;background-color:transparent;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;content:'';position:absolute;top:.35em;right:.5em;z-index:2;border:0;width:.75em;height:.75em;background-color:#D95C5C;border-radius:50rem;-webkit-transition:background .3s ease 0s,right .3s ease 0s;-moz-transition:background .3s ease 0s,right .3s ease 0s;-o-transition:background .3s ease 0s,right .3s ease 0s;-ms-transition:background .3s ease 0s,right .3s ease 0s;transition:background .3s ease 0s,right .3s ease 0s}.ui.toggle.checkbox:active .box:before,.ui.toggle.checkbox:active label:before{background-color:#F5F5F5}.ui.toggle.checkbox input:checked+.box:after,.ui.toggle.checkbox input:checked+label:after{right:1.75em;background-color:#89B84C}.ui.checkbox{width:1em;height:1em}.ui.checkbox,.ui.checkbox .box,.ui.checkbox label{font-size:1em}.ui.large.checkbox{width:1.25em;height:1.25em}.ui.large.checkbox,.ui.large.checkbox .box,.ui.large.checkbox label{font-size:1.25em}.ui.huge.checkbox{width:1.5em;height:1.5em}.ui.huge.checkbox,.ui.huge.checkbox .box,.ui.huge.checkbox label{font-size:1.5em} \ No newline at end of file diff --git a/rtl/packaged/css/semantic.css.REMOVED.git-id b/rtl/packaged/css/semantic.css.REMOVED.git-id index 41917a5ae..e94a0f0dd 100644 --- a/rtl/packaged/css/semantic.css.REMOVED.git-id +++ b/rtl/packaged/css/semantic.css.REMOVED.git-id @@ -1 +1 @@ -f064aeabd4fde6c4046c0cbbe4fdf79e6312a77d \ No newline at end of file +ad11666d130d88de8fa2d599b9885d6a2defc8b7 \ No newline at end of file diff --git a/rtl/packaged/css/semantic.min.css.REMOVED.git-id b/rtl/packaged/css/semantic.min.css.REMOVED.git-id index eaf9c234b..3a795307e 100644 --- a/rtl/packaged/css/semantic.min.css.REMOVED.git-id +++ b/rtl/packaged/css/semantic.min.css.REMOVED.git-id @@ -1 +1 @@ -bbd64b236247de311ac1d6f1d84ae69d0b9b95bf \ No newline at end of file +580ab7de2afcc5e4633999dba0ab199550ea8220 \ No newline at end of file diff --git a/rtl/packaged/javascript/semantic.min.js.REMOVED.git-id b/rtl/packaged/javascript/semantic.min.js.REMOVED.git-id index 2216ebe8a..37a3161db 100644 --- a/rtl/packaged/javascript/semantic.min.js.REMOVED.git-id +++ b/rtl/packaged/javascript/semantic.min.js.REMOVED.git-id @@ -1 +1 @@ -63253c362a471204c32163b1ad8fd36f702753a7 \ No newline at end of file +05773b75e897070fb92bc42a06ccc0887dba27ba \ No newline at end of file diff --git a/rtl/uncompressed/modules/checkbox.css b/rtl/uncompressed/modules/checkbox.css index edb2130ef..980beab60 100644 --- a/rtl/uncompressed/modules/checkbox.css +++ b/rtl/uncompressed/modules/checkbox.css @@ -19,34 +19,45 @@ position: relative; display: inline-block; outline: none; - margin-left: 0.5em; vertical-align: middle; } .ui.checkbox input { + position: absolute; + top: 0px; + right: 0px; opacity: 0; outline: none; } /*--- Box ---*/ .ui.checkbox .box, .ui.checkbox label { - outline: none; cursor: pointer; + position: relative; + min-width: 1em; + height: 1em; + padding-right: 2em; + outline: none; + white-space: nowrap; +} +.ui.checkbox .box:before, +.ui.checkbox label:before { position: absolute; + top: 0.25em; line-height: 1; width: 1em; height: 1em; - bottom: 0em; right: 0em; + content: ''; border-radius: 4px; + background: #FFFFFF; + -webkit-transition: background-color 0.3s ease, box-shadow 0.3s ease; + -moz-transition: background-color 0.3s ease, box-shadow 0.3s ease; + -o-transition: background-color 0.3s ease, box-shadow 0.3s ease; + -ms-transition: background-color 0.3s ease, box-shadow 0.3s ease; + transition: background-color 0.3s ease, box-shadow 0.3s ease; -webkit-box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.2); box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.2); - background: #FFFFFF; - -webkit-transition: background-color 0.1s ease-out, box-shadow 0.1s ease-out; - -moz-transition: background-color 0.1s ease-out, box-shadow 0.1s ease-out; - -o-transition: background-color 0.1s ease-out, box-shadow 0.1s ease-out; - -ms-transition: background-color 0.1s ease-out, box-shadow 0.1s ease-out; - transition: background-color 0.1s ease-out, box-shadow 0.1s ease-out; } /*--- Checkbox ---*/ .ui.checkbox .box:after, @@ -68,12 +79,27 @@ } .ui.checkbox .box:after, .ui.checkbox label:after { - top: 0.3em; + top: 0.54em; right: 0.2em; width: 0.45em; height: 0.15em; } -/*--- Label ---*/ +/*--- Inside Label ---*/ +.ui.checkbox label { + color: rgba(0, 0, 0, 0.6); + -webkit-transition: color 0.2s ease; + -moz-transition: color 0.2s ease; + -o-transition: color 0.2s ease; + -ms-transition: color 0.2s ease; + transition: color 0.2s ease; +} +.ui.checkbox label:hover { + color: rgba(0, 0, 0, 0.8); +} +.ui.checkbox input:focus + label { + color: rgba(0, 0, 0, 0.8); +} +/*--- Outside Label ---*/ .ui.checkbox + label { cursor: pointer; opacity: 0.85; @@ -86,18 +112,24 @@ States *******************************/ /*--- Hover ---*/ -.ui.checkbox .box:hover, -.ui.checkbox label:hover { - background-color: #FAFAFA; +.ui.checkbox .box:hover::before, +.ui.checkbox label:hover::before { -webkit-box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.3); box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.3); } /*--- Down ---*/ -.ui.checkbox .box:active, -.ui.checkbox label:active { +.ui.checkbox .box:active::before, +.ui.checkbox label:active::before { background-color: #F5F5F5; } +/*--- Focus ---*/ +.ui.checkbox input:focus + .box:before, +.ui.checkbox input:focus + label:before { + -webkit-box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.3); + -moz-box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.3); + box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.3); +} /*--- Active ---*/ .ui.checkbox input:checked + .box:after, .ui.checkbox input:checked + label:after { @@ -111,6 +143,7 @@ .ui.disabled.checkbox label, .ui.checkbox input[disabled] + label { opacity: 0.4; + color: rgba(0, 0, 0, 0.3); } /******************************* Variations @@ -118,25 +151,21 @@ /*-------------- Radio ---------------*/ -.ui.radio.checkbox { - width: 14px; - height: 16px; -} -.ui.radio.checkbox .box, -.ui.radio.checkbox label { - width: 14px; - height: 14px; +.ui.radio.checkbox .box:before, +.ui.radio.checkbox label:before { + width: 1em; + height: 1em; -webkit-border-radius: 500px; -moz-border-radius: 500px; border-radius: 500px; } .ui.radio.checkbox .box:after, .ui.radio.checkbox label:after { - top: 3px; - right: 3px; border: none; - width: 8px; - height: 8px; + top: 0.45em; + right: 0.2em; + width: 0.6em; + height: 0.6em; background-color: #555555; -webkit-border-radius: 500px; -moz-border-radius: 500px; @@ -147,26 +176,30 @@ ---------------*/ .ui.slider.checkbox { cursor: pointer; - width: 3em; + min-width: 3em; height: 2em; } /* Line */ .ui.slider.checkbox:after { position: absolute; - top: 1em; + top: 0.8em; right: 0em; content: ''; - width: 100%; + width: 3em; height: 2px; background-color: rgba(0, 0, 0, 0.1); } /* Button */ .ui.slider.checkbox .box, .ui.slider.checkbox label { + padding-right: 4em; +} +.ui.slider.checkbox .box:before, +.ui.slider.checkbox label:before { cursor: pointer; display: block; position: absolute; - top: 0.25em; + top: 0em; right: 0; z-index: 1; width: 1.5em; @@ -188,23 +221,42 @@ position: absolute; content: ''; top: 0.375em; - right: 0.375em; + right: 0em; + z-index: 2; + margin-right: 0.375em; border: none; width: 0.75em; height: 0.75em; - background-color: #D95C5C; border-radius: 50rem; - -webkit-transition: background 0.3s ease 0s; - -moz-transition: background 0.3s ease 0s; - -o-transition: background 0.3s ease 0s; - -ms-transition: background 0.3s ease 0s; - transition: background 0.3s ease 0s; -} -/* Active Slider Toggle */ -.ui.slider.checkbox input:checked + .box, -.ui.slider.checkbox input:checked + label { + -webkit-transition: background 0.3s ease 0s, + right 0.3s ease 0s + ; + -moz-transition: background 0.3s ease 0s, + right 0.3s ease 0s + ; + -o-transition: background 0.3s ease 0s, + right 0.3s ease 0s + ; + -ms-transition: background 0.3s ease 0s, + right 0.3s ease 0s + ; + transition: background 0.3s ease 0s, + right 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 { right: 1.75em; } +/* Off Color */ +.ui.slider.checkbox .box:after, +.ui.slider.checkbox label:after { + background-color: #D95C5C; +} +/* On Color */ .ui.slider.checkbox input:checked + .box:after, .ui.slider.checkbox input:checked + label:after { background-color: #89B84C; @@ -214,68 +266,73 @@ ---------------*/ .ui.toggle.checkbox { cursor: pointer; - width: 3em; height: 2em; } -/* Line */ -.ui.toggle.checkbox:after { +.ui.toggle.checkbox .box, +.ui.toggle.checkbox label { + padding-right: 4em; +} +/* Switch */ +.ui.toggle.checkbox .box:before, +.ui.toggle.checkbox label:before { cursor: pointer; display: block; position: absolute; content: ''; - top: 0.25em; + top: 0em; right: 0em; z-index: 1; background-color: #FFFFFF; - width: 100%; + width: 3em; height: 1.5em; -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset; -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset; box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset; border-radius: 50rem; } -.ui.toggle.checkbox .box, -.ui.toggle.checkbox label { - position: absolute; - top: 0.65em; - right: 0.5em; - -webkit-transition: right 0.3s ease 0s; - -moz-transition: right 0.3s ease 0s; - -o-transition: right 0.3s ease 0s; - -ms-transition: right 0.3s ease 0s; - transition: right 0.3s ease 0s; +/* Activation Light */ +.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; -} -/* Button Activation Light */ -.ui.toggle.checkbox .box:after, -.ui.toggle.checkbox label:after { - opacity: 1; content: ''; position: absolute; - top: 0px; - right: 0px; + top: 0.35em; + right: 0.5em; z-index: 2; border: none; width: 0.75em; height: 0.75em; background-color: #D95C5C; border-radius: 50rem; - -webkit-transition: background 0.3s ease 0s; - -moz-transition: background 0.3s ease 0s; - -o-transition: background 0.3s ease 0s; - -ms-transition: background 0.3s ease 0s; - transition: background 0.3s ease 0s; -} -/* Active toggle Toggle */ -.ui.toggle.checkbox input:checked + .box, -.ui.toggle.checkbox input:checked + label { - right: 1.75em; + -webkit-transition: background 0.3s ease 0s, + right 0.3s ease 0s + ; + -moz-transition: background 0.3s ease 0s, + right 0.3s ease 0s + ; + -o-transition: background 0.3s ease 0s, + right 0.3s ease 0s + ; + -ms-transition: background 0.3s ease 0s, + right 0.3s ease 0s + ; + transition: background 0.3s ease 0s, + right 0.3s ease 0s + ; +} +/* Active */ +.ui.toggle.checkbox:active .box:before, +.ui.toggle.checkbox:active label:before { + background-color: #F5F5F5; } +/* Active */ .ui.toggle.checkbox input:checked + .box:after, .ui.toggle.checkbox input:checked + label:after { + right: 1.75em; background-color: #89B84C; } /*--------------