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

iterating on checkbox/module design pages, form fixes, table fixes, progress fixes

pull/13/head
Jack Lukic 11 years ago
parent
3e6bd6f5c7
commit
e88109470b
12 changed files with 273 additions and 152 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 84
      node/src/documents/elements/label.html
  2. 2
      node/src/documents/elements/progress.html
  3. 168
      node/src/documents/modules/checkbox.html
  4. 8
      node/src/files/components/semantic/src/collections/form.css
  5. 9
      node/src/files/components/semantic/src/collections/table.css
  6. 44
      node/src/files/components/semantic/src/modules/checkbox.css
  7. 45
      node/src/files/javascript/semantic.js
  8. 2
      node/src/files/stylesheets/semantic.css
  9. 2
      node/src/layouts/default.html.eco
  10. 8
      src/collections/form.css
  11. 9
      src/collections/table.css
  12. 44
      src/modules/checkbox.css

84
node/src/documents/elements/label.html
View File

@ -40,38 +40,6 @@ type : 'UI Element'
</a>
</div>
<div class="example">
<h4>Attached Label</h4>
<p>A label attached to a content segment</p>
<div class="ui two column grid">
<div class="column">
<div class="ui segment">
<div class="ui attached label">Top Left</div>
<div class="ui right attached label">Top Right</div>
<div class="ui bottom attached label">Bottom Left</div>
<div class="ui bottom right attached label">Bottom Right</div>
<p style="margin:40px 0px;">Hey let's look at labels.</p>
</div>
</div>
<div class="column">
<div class="ui segment">
<div class="ui black attached label">Existing Users</div>
<div class="ui fluid form">
<div class="field">
<label>E-mail</label>
<input type="text">
</div>
<div class="field">
<label>Password</label>
<input type="password">
</div>
<div class="ui button">Log in</div>
</div>
</div>
</div>
</div>
</div>
<div class="example">
<h4>Label with detail</h4>
<p>A tag can optionally display a detail</p>
@ -173,11 +141,35 @@ type : 'UI Element'
</div>
<div class="example">
<h4>Tag</h4>
<p>A label can look like a tag</p>
<a class="ui tag label">
First
</a>
<h4>Attached Label</h4>
<p>A label attached to a content segment</p>
<div class="ui two column grid">
<div class="column">
<div class="ui segment">
<div class="ui attached label">Top Left</div>
<div class="ui right attached label">Top Right</div>
<div class="ui bottom attached label">Bottom Left</div>
<div class="ui bottom right attached label">Bottom Right</div>
<p style="margin:40px 0px;">Hey let's look at labels.</p>
</div>
</div>
<div class="column">
<div class="ui segment">
<div class="ui black attached label">Existing Users</div>
<div class="ui fluid form">
<div class="field">
<label>E-mail</label>
<input type="text">
</div>
<div class="field">
<label>Password</label>
<input type="password">
</div>
<div class="ui button">Log in</div>
</div>
</div>
</div>
</div>
</div>
<div class="example">
@ -196,7 +188,7 @@ type : 'UI Element'
<div class="example">
<h4>Label Groups</h4>
<p>Groups can share variations together</p>
<p>Labels can share sizes together</p>
<div class="ui large labels">
<div class="ui label">
Fun
@ -211,22 +203,24 @@ type : 'UI Element'
Witty
</div>
</div>
<br><br>
<div class="ui tag labels">
<a class="ui green label">
</div>
<div class="example">
<p>Labels can share colors together</p>
<div class="ui blue labels">
<a class="ui label">
Fun <i class="icon close"></i>
</a>
<a class="ui red label">
<a class="ui label">
Happy
<div class="detail">22</div>
</a>
<a class="ui blue label">
<a class="ui label">
Smart
</a>
<a class="ui purple label">
<a class="ui label">
Insane
</a>
<a class="ui teal label">
<a class="ui label">
Exciting
</a>
</div>

2
node/src/documents/elements/progress.html
View File

@ -22,7 +22,7 @@ type : 'UI Element'
</div>
<h2>Standard</h2>
<div class="shown example">
<div class="example">
<h4>Progress:</h4>
<p>A standard progress bar</p>
<div class="ui progress">

168
node/src/documents/modules/checkbox.html
View File

@ -9,87 +9,144 @@ type : 'UI Module'
<div class="segment">
<div class="container">
<h1>Checkbox</h1>
<p>Checkbox is a plugin for attaching form events to UI checkbox</p>
<p>A checkbox is a <a href="/module.html">ui module</a> which indicates a user's selection of a choice.</p>
</div>
</div>
<div class="main container">
<div class="peek">
<div class="ui vertical pointing menu">
<a class="active item">Structure</a>
<a class="active item">Standard</a>
<a class="active item">Variations</a>
<a class="item">Behavior</a>
<a class="item">Examples</a>
<a class="item">Getting Started</a>
<a class="item">Settings</a>
</div>
</div>
<p>UI checkboxes do not need javascript to function correctly, checkboxs can be triggered by matching the label's for attribute to the id tag of an input field</p>
<p>However, there may be situations where it is less work to use javascript to initialize a checkbox then to manually assign ID tags to each field, or you might want to programmatically trigger the checkbox state. In these cases the checkbox module may be useful.</p>
<h2>Examples</h2>
<h3>Initializing a check box</h3>
<div class="code">$('.ui.checkbox')
.checkbox()
;
</div>
<h2>Standard</h2>
<div class="shown example">
<h3>Check Box</h3>
<p>The html required for a standard UI checkbox</p>
<div class="example">
<h4>Check Box</h4>
<p>A standard checkbox</p>
<div class="ui checkbox">
<input type="checkbox" />
<label for="uniqueid"></label>
<div class="box"></div>
</div>
</div>
<div class="example">
<h4>Check Box</h4>
<p>A checkbox can function without javascript</p>
<div class="ui checkbox">
<input type="checkbox" id="unique-id" />
<label class="box" for="unique-id"></label>
</div>
</div>
<div class="example">
<h3>Radio Box</h3>
<p>The html required for a standard UI radio box</p>
<p>A radio box is just a reskinned version of a checkbox, the initialization of the module is the same.</p>
<div class="ui radio checkbox">
<input type="radio" name="foo" />
<label for="uniqueid"></label>
<h4>Form Checkbox</h4>
<p>A checkbox can be found inside a form</p>
<div class="ui form segment">
<div class="inline field">
<div class="ui checkbox">
<input type="checkbox" />
<div class="box"></div>
</div>
<label>Join Us</label>
</div>
</div>
</div>
<h2>Variations</h2>
<div class="example">
<h4>Radio Box</h4>
<p>A checkbox can be formatted as a radio element. This means it is an exclusive option.</p>
<div class="ui radio checkbox">
<input type="radio" name="foo" />
<label for="uniqueid"></label>
<label></label>
</div>
</div>
<div class="example">
<h4>Size</h4>
<p>A checkbox can be a different size.</p>
<div class="ui large checkbox">
<input type="checkbox" name="foo" />
<label></label>
</div>
<br><br>
<div class="ui huge checkbox">
<input type="checkbox" name="foo" />
<label></label>
</div>
</div>
<h2>Getting Started</h2>
<p>The plugin must be initialized once before methods can be accessed</p>
<div class="code">$('.ui.checkbox')
.checkbox()
;</div>
<h2>Behavior</h2>
<p>You can enable a checkbox programmatically using the enable method</p>
<div class="code">$('.ui.checkbox')
.checkbox('enable')
;</div>
<div class="example">
<p>A checkbox can be enabled</p>
<div class="ignore evaluated code">
$('.enable.button')
.checkbox('enable')
;
</div>
<div class="enable ui button">Enable</div>
<div class="ui checkbox">
<input type="checkbox" />
<div class="box"></div>
</div>
</div>
<p>You can enable all checkboxes initialized at the same time by calling the enableAll method</p>
<div class="code">$('.ui.checkbox')
.checkbox('enableAll')
;</div>
<div class="code">
$('.ui.checkbox')
.checkbox('enableAll')
;
</div>
<p>You can disable a checkbox programmatically using the disable method</p>
<div class="code">$('.ui.checkbox')
.checkbox('disable')
;</div>
<div class="code">
$('.ui.checkbox')
.checkbox('disable')
;
</div>
<p>You can disable all checkboxes initialized at the same time by calling the disableAll method</p>
<div class="code">$('.ui.checkbox')
.checkbox('disableAll')
;</div>
<div class="code">
$('.ui.checkbox')
.checkbox('disableAll')
;
</div>
<h2>Getting Started</h2>
<h3>Initializing a check box</h3>
<div class="code">
$('.ui.checkbox')
.checkbox()
;
</div>
<h3>Defaults</h3>
<table class="ui settings table">
<thead>
<th colspan="3">Callbacks</th>
</thead>
<table class="ui settings celled table">
<thead>
<th colspan="3">Checkbox Settings</th>
</thead>
<tbody>
<tr>
<td>context</td>
<td>false</td>
<td>A selector or jQuery object to use as a delegated event context</td>
</tr>
</tbody>
</table>
<table class="ui settings celled table">
<thead>
<th colspan="3">Callbacks</th>
</thead>
<tbody>
<tr>
<td>onChange</td>
<td>None</td>
@ -105,11 +162,14 @@ type : 'UI Module'
<td>None</td>
<td>Callback after a checkbox is disabled.</td>
</tr>
</table>
<table class="ui settings table">
<thead>
<th colspan="3">UI Module Settings</th>
</thead>
</tbody>
</table>
<table class="ui settings celled table">
<thead>
<th colspan="3">UI Module Settings</th>
</thead>
<tbody>
<tr>
<td>moduleName</td>
<td>Checkbox</td>
@ -140,7 +200,7 @@ type : 'UI Module'
<td colspan="2">
<div class="code">errors : {
method : 'The method you called is not defined.'
}</div>
}</div>
</td>
</tr>
</tbody>

8
node/src/files/components/semantic/src/collections/form.css
View File

@ -398,9 +398,15 @@
.ui.form .inline.field > p,
.ui.form .inline.field > input,
.ui.form .inline.field > select {
display: inline-block;
vertical-align: middle;
width: auto;
margin-top: 0em;
margin-bottom: 0em;
vertical-align: middle;
font-size: 1em;
}
.ui.form .inline.fields .field > :first-child,

9
node/src/files/components/semantic/src/collections/table.css
View File

@ -24,7 +24,6 @@
color: rgba(0, 0, 0, 0.75);
border: 1px solid #DDDDDD;
border-bottom-width: 3px;
}
.ui.table tr,
@ -43,7 +42,7 @@
transition: all 0.1s ease-out;
}
.ui.table thead {
border-bottom: 2px solid rgba(0, 0, 0, 0.1);
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
background-color: rgba(50, 50, 50, 0.1);
}
.ui.table th {
@ -94,7 +93,7 @@
Hover
---------------*/
/* Grid */
/* Celled */
.ui.celled.table tr:hover td {
background-color: rgba(0, 0, 0, 0.02);
color: rgba(0, 0, 0, 1);
@ -231,11 +230,11 @@
*******************************/
/*--------------
Grid
Celled
---------------*/
.ui.celled.table {
color: rgba(0, 0, 0, 0.55);
color: rgba(25, 25, 25, 0.9);
}
.ui.celled.table tbody tr,
.ui.celled.table tfoot tr {

44
node/src/files/components/semantic/src/modules/checkbox.css
View File

@ -15,7 +15,7 @@
width: 1em;
height: 1em;
vertical-align: baseline;
vertical-align: middle;
}
.ui.checkbox input {
visibility: hidden;
@ -24,6 +24,7 @@
/*--- Box ---*/
.ui.checkbox .box,
.ui.checkbox label {
outline: none;
cursor: pointer;
@ -38,7 +39,7 @@
-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: #FCFFF4;
background: #FFFFFF;
-webkit-transition:
background-color 0.1s ease-out,
@ -63,6 +64,7 @@
}
/*--- Checkbox ---*/
.ui.checkbox .box:after,
.ui.checkbox label:after {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
@ -79,6 +81,7 @@
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.ui.checkbox .box:after,
.ui.checkbox label:after {
width: 0.5em;
height: 0.2em;
@ -94,6 +97,7 @@
/*--- Hover ---*/
.ui.checkbox .box:hover,
.ui.checkbox label:hover {
background-color: rgba(0, 0, 0, 0.02);
-webkit-box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.3);
@ -103,12 +107,14 @@
/*--- Down ---*/
.ui.checkbox .box:active,
.ui.checkbox label:active {
background-color: rgba(0, 0, 0, 0.05);
}
/*--- 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);
@ -117,6 +123,8 @@
/*--- Disabled ---*/
.ui.disabled.checkbox + .box:after,
.ui.checkbox input[disabled] + .box:after,
.ui.disabled.checkbox label,
.ui.checkbox input[disabled] + label {
opacity: 0.4;
@ -136,6 +144,7 @@
width: 14px;
height: 16px;
}
.ui.radio.checkbox .box,
.ui.radio.checkbox label {
width: 14px;
height: 14px;
@ -143,6 +152,7 @@
-moz-border-radius: 500px;
border-radius: 500px;
}
.ui.radio.checkbox .box:after,
.ui.radio.checkbox label:after {
top: 3px;
left: 3px;
@ -163,18 +173,33 @@
---------------*/
.ui.checkbox,
.ui.checkbox .box,
.ui.checkbox label {
font-size: 1em;
}
.ui.large.checkbox,
.ui.large.checkbox .box,
.ui.large.checkbox label {
font-size: 1.5em;
font-size: 1.25em;
}
.ui.huge.checkbox,
.ui.huge.checkbox .box,
.ui.huge.checkbox label {
font-size: 1.5em;
}
/*--------------
Colors
---------------*/
.ui.round.blue.checkbox label:after {
background: -webkit-linear-gradient(top, #016286 0%, #00506E 100%);
background: -moz-linear-gradient(top, #016286 0%, #00506E 100%);
background: -o-linear-gradient(top, #016286 0%, #00506E 100%);
background: -ms-linear-gradient(top, #016286 0%, #00506E 100%);
background: linear-gradient(top, #016286 0%, #00506E 100%);
}
/*--------------
Rounded
@ -204,6 +229,7 @@
position: relative;
}
.ui.round.checkbox .box,
.ui.round.checkbox label {
cursor: pointer;
position: absolute;
@ -237,6 +263,7 @@
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#222222', endColorstr='#4D4D4D',GradientType=0 );
}
.ui.round.checkbox .box:after,
.ui.round.checkbox label:after {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
@ -264,22 +291,15 @@
-moz-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
}
.ui.round.checkbox .box:hover:after,
.ui.round.checkbox label:hover:after {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
filter: alpha(opacity=30);
opacity: 0.3;
}
.ui.round.checkbox input:checked + .box:after,
.ui.round.checkbox input:checked + label:after {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
}
/* Variations */
.ui.round.blue.checkbox label:after {
background: -webkit-linear-gradient(top, #016286 0%, #00506E 100%);
background: -moz-linear-gradient(top, #016286 0%, #00506E 100%);
background: -o-linear-gradient(top, #016286 0%, #00506E 100%);
background: -ms-linear-gradient(top, #016286 0%, #00506E 100%);
background: linear-gradient(top, #016286 0%, #00506E 100%);
}

45
node/src/files/javascript/semantic.js
View File

@ -15,18 +15,18 @@ semantic.ready = function() {
$sortTable = $('.sortable.table'),
$demo = $('.demo'),
$waypoints = $('h2:not(.ui)'),
$menuPopup = $('.ui.main.menu .popup.item'),
$example = $('.example'),
$shownExample = $example.filter('.shown'),
$developer = $('.developer.item'),
$designer = $('.designer.item'),
$increaseFont = $('.font .increase'),
$decreaseFont = $('.font .decrease'),
$peek = $('.peek'),
$peekItem = $peek.children('.menu').children('a.item'),
$peekSubItem = $peek.find('.item .menu .item'),
@ -100,7 +100,7 @@ semantic.ready = function() {
$annotated = $example.find('.annotated'),
$code = $annotated.find('.code'),
whiteSpace = new RegExp('\\n\\s{4}', 'g'),
code = ''
code = ''
;
// if ui has wrapper use that
if($demo.filter('.ui').size() === 0) {
@ -125,12 +125,12 @@ semantic.ready = function() {
$code = $('<div/>')
.data('type', 'html')
.addClass('code')
.text(code)
.html(code)
.appendTo($annotated)
;
$.proxy(handler.initializeCode, $code)();
}
if( $demo.first().is(':visible') || type == 'developer' ) {
if( $demo.first().is(':visible') || type == 'developer' && type != 'designer' ) {
$demo.hide();
$annotated.fadeIn(500);
}
@ -147,13 +147,30 @@ semantic.ready = function() {
initializeCode: function() {
var
$code = $(this),
contentType = $code.data('type') || 'javascript',
editor = ace.edit($code[0]),
editorSession = editor.getSession(),
padding = 4,
codeHeight = editor.getSession().getScreenLength() * (editor.renderer.lineHeight) + editor.renderer.scrollBar.getWidth() + padding
$code = $(this),
code = $code.html(),
contentType = $code.data('type') || 'javascript',
whiteSpace = new RegExp('\\n\\s{4}', 'g'),
padding = 4,
editor,
editorSession,
codeHeight
;
// trim whitespace
code = $.trim(code.replace(whiteSpace, '\n'));
$code.text(code);
if($code.hasClass('evaluated')) {
console.log(code);
eval(code);
}
// initialize
editor = ace.edit($code[0]);
editorSession = editor.getSession();
codeHeight = editor.getSession().getScreenLength() * (editor.renderer.lineHeight) + editor.renderer.scrollBar.getWidth() + padding;
editor.setTheme('ace/theme/github');
editor.setShowPrintMargin(false);
editor.setReadOnly(true);

2
node/src/files/stylesheets/semantic.css
View File

@ -510,7 +510,7 @@ box-shadow: 3px 0px 2px rgba(0, 0, 0, 0.2); */
font-weight: bold;
}
#example .settings.table td:nth-child(2n) {
width: 300px;
width: 100px;
}
/* example code reskin */

2
node/src/layouts/default.html.eco
View File

@ -132,7 +132,7 @@
<% end %>
</div>
<div class="right menu">
<% if @document.type is 'UI Element' or @document.type is 'UI Collection': %>
<% if @document.type is 'UI Element' or @document.type is 'UI Collection' or @document.type is 'UI Module': %>
<a class="popup designer item" title="Designer Mode">
<i class="icon easel"></i>
</a>

8
src/collections/form.css
View File

@ -398,9 +398,15 @@
.ui.form .inline.field > p,
.ui.form .inline.field > input,
.ui.form .inline.field > select {
display: inline-block;
vertical-align: middle;
width: auto;
margin-top: 0em;
margin-bottom: 0em;
vertical-align: middle;
font-size: 1em;
}
.ui.form .inline.fields .field > :first-child,

9
src/collections/table.css
View File

@ -24,7 +24,6 @@
color: rgba(0, 0, 0, 0.75);
border: 1px solid #DDDDDD;
border-bottom-width: 3px;
}
.ui.table tr,
@ -43,7 +42,7 @@
transition: all 0.1s ease-out;
}
.ui.table thead {
border-bottom: 2px solid rgba(0, 0, 0, 0.1);
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
background-color: rgba(50, 50, 50, 0.1);
}
.ui.table th {
@ -94,7 +93,7 @@
Hover
---------------*/
/* Grid */
/* Celled */
.ui.celled.table tr:hover td {
background-color: rgba(0, 0, 0, 0.02);
color: rgba(0, 0, 0, 1);
@ -231,11 +230,11 @@
*******************************/
/*--------------
Grid
Celled
---------------*/
.ui.celled.table {
color: rgba(0, 0, 0, 0.55);
color: rgba(25, 25, 25, 0.9);
}
.ui.celled.table tbody tr,
.ui.celled.table tfoot tr {

44
src/modules/checkbox.css
View File

@ -15,7 +15,7 @@
width: 1em;
height: 1em;
vertical-align: baseline;
vertical-align: middle;
}
.ui.checkbox input {
visibility: hidden;
@ -24,6 +24,7 @@
/*--- Box ---*/
.ui.checkbox .box,
.ui.checkbox label {
outline: none;
cursor: pointer;
@ -38,7 +39,7 @@
-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: #FCFFF4;
background: #FFFFFF;
-webkit-transition:
background-color 0.1s ease-out,
@ -63,6 +64,7 @@
}
/*--- Checkbox ---*/
.ui.checkbox .box:after,
.ui.checkbox label:after {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
@ -79,6 +81,7 @@
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.ui.checkbox .box:after,
.ui.checkbox label:after {
width: 0.5em;
height: 0.2em;
@ -94,6 +97,7 @@
/*--- Hover ---*/
.ui.checkbox .box:hover,
.ui.checkbox label:hover {
background-color: rgba(0, 0, 0, 0.02);
-webkit-box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.3);
@ -103,12 +107,14 @@
/*--- Down ---*/
.ui.checkbox .box:active,
.ui.checkbox label:active {
background-color: rgba(0, 0, 0, 0.05);
}
/*--- 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);
@ -117,6 +123,8 @@
/*--- Disabled ---*/
.ui.disabled.checkbox + .box:after,
.ui.checkbox input[disabled] + .box:after,
.ui.disabled.checkbox label,
.ui.checkbox input[disabled] + label {
opacity: 0.4;
@ -136,6 +144,7 @@
width: 14px;
height: 16px;
}
.ui.radio.checkbox .box,
.ui.radio.checkbox label {
width: 14px;
height: 14px;
@ -143,6 +152,7 @@
-moz-border-radius: 500px;
border-radius: 500px;
}
.ui.radio.checkbox .box:after,
.ui.radio.checkbox label:after {
top: 3px;
left: 3px;
@ -163,18 +173,33 @@
---------------*/
.ui.checkbox,
.ui.checkbox .box,
.ui.checkbox label {
font-size: 1em;
}
.ui.large.checkbox,
.ui.large.checkbox .box,
.ui.large.checkbox label {
font-size: 1.5em;
font-size: 1.25em;
}
.ui.huge.checkbox,
.ui.huge.checkbox .box,
.ui.huge.checkbox label {
font-size: 1.5em;
}
/*--------------
Colors
---------------*/
.ui.round.blue.checkbox label:after {
background: -webkit-linear-gradient(top, #016286 0%, #00506E 100%);
background: -moz-linear-gradient(top, #016286 0%, #00506E 100%);
background: -o-linear-gradient(top, #016286 0%, #00506E 100%);
background: -ms-linear-gradient(top, #016286 0%, #00506E 100%);
background: linear-gradient(top, #016286 0%, #00506E 100%);
}
/*--------------
Rounded
@ -204,6 +229,7 @@
position: relative;
}
.ui.round.checkbox .box,
.ui.round.checkbox label {
cursor: pointer;
position: absolute;
@ -237,6 +263,7 @@
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#222222', endColorstr='#4D4D4D',GradientType=0 );
}
.ui.round.checkbox .box:after,
.ui.round.checkbox label:after {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
@ -264,22 +291,15 @@
-moz-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
}
.ui.round.checkbox .box:hover:after,
.ui.round.checkbox label:hover:after {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
filter: alpha(opacity=30);
opacity: 0.3;
}
.ui.round.checkbox input:checked + .box:after,
.ui.round.checkbox input:checked + label:after {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
}
/* Variations */
.ui.round.blue.checkbox label:after {
background: -webkit-linear-gradient(top, #016286 0%, #00506E 100%);
background: -moz-linear-gradient(top, #016286 0%, #00506E 100%);
background: -o-linear-gradient(top, #016286 0%, #00506E 100%);
background: -ms-linear-gradient(top, #016286 0%, #00506E 100%);
background: linear-gradient(top, #016286 0%, #00506E 100%);
}
Write Preview
Loading…
Cancel
Save