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

several fixes for checkbox, updated form example

pull/1009/head
jlukic 10 years ago
parent
f6a994a288
commit
81fb1e4745
5 changed files with 164 additions and 37 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 113
      server/documents/collections/form.html.eco
  2. 12
      server/documents/modules/checkbox.html.eco
  3. 2
      src/definitions/collections/form.less
  4. 38
      src/definitions/modules/checkbox.less
  5. 36
      src/themes/packages/default/modules/checkbox.variables

113
server/documents/collections/form.html.eco
View File

@ -33,32 +33,117 @@ themes : ['default', 'GitHub']
<a href="/elements/input.html">inputs</a>, standard form fields, <a href="/elements/label.html">labels</a>, <a href="/modules/dropdown.html">selection dropdowns</a>, textareas, as well as:
<a href="/modules/checkbox.html">checkboxes</a>, and <a href="/collections/message.html">message blocks</a>.
</p>
<p>Validation messages use <a href="/collections/message.html">messages</a> which are formatted for use inside forms.</p>
<div class="ui ignored warning top attached message">
<p>If you are looking for form validation, you should check out <a href="/modules/form.html">form validation</a>.</p>
</div>
<div class="ui ignored bottom attached message">
<p>This example uses a <a href="/elements/segment.html">ui segment</a> to add the padding and background color. This is not required.</p>
<div class="ui ignored info attached message"><p>Validation messages use <a href="/collections/message.html">messages</a> which are formatted for use inside forms.</p>
<p>This example also uses <a href="/elements/segment.html">ui segment</a> to group the form. This is not required.
</div>
<div class="ui form segment">
<div class="required field">
<label>Username</label>
<div class="ui left labeled icon input">
<input type="text" placeholder="Username">
<i class="user icon"></i>
<h4 class="ui dividing header">Personal Information</h4>
<div class="two fields">
<div class="field">
<label>Name</label>
<div class="two fields">
<div class="field">
<input type="text" name="first-name" placeholder="First Name">
</div>
<div class="field">
<input type="text" name="last-name" placeholder="Last Name">
</div>
</div>
</div>
<div class="field">
<label>Gender</label>
<div class="ui selection dropdown">
<input type="hidden" name="gender">
<div class="default text">Gender</div>
<i class="dropdown icon"></i>
<div class="menu">
<div class="item" data-value="male">Male</div>
<div class="item" data-value="female">Female</div>
</div>
</div>
</div>
</div>
<div class="required field">
<label>Password</label>
<div class="ui left labeled icon input">
<input type="password">
<i class="lock icon"></i>
<div class="field">
<label>Biography</label>
<textarea></textarea>
</div>
<h4 class="ui dividing header">Account Info</h4>
<div class="two fields">
<div class="required field">
<label>Username</label>
<div class="ui left labeled icon input">
<input type="text" placeholder="Username">
<i class="user icon"></i>
</div>
</div>
<div class="required field">
<label>Password</label>
<div class="ui left labeled icon input">
<input type="password">
<i class="lock icon"></i>
</div>
</div>
</div>
<h4 class="ui block top attached header">Optional Survey</h4>
<div class="ui bottom attached secondary segment">
<div class="grouped fields">
<label for="alone">Are you a human?</label>
<div class="field">
<div class="ui radio checkbox">
<input type="radio" checked="" name="alone">
<label>Yes</label>
</div>
</div>
<div class="field">
<div class="ui radio checkbox">
<input type="radio" name="alone">
<label>No</label>
</div>
</div>
</div>
</div>
<h4 class="ui dividing header">Settings</h4>
<h5 class="ui header">Privacy</h5>
<div class="field">
<div class="ui toggle checkbox">
<input type="radio" name="privacy">
<label>Allow <b>anyone</b> to see my account</label>
</div>
</div>
<div class="field">
<div class="ui toggle checkbox">
<input type="radio" name="privacy">
<label>Allow <b>only friends</b> to see my account</label>
</div>
</div>
<h5 class="ui header">Newsletter Subscriptions</h5>
<div class="field">
<div class="ui slider checkbox">
<input type="checkbox" name="top-posts">
<label>Top Posts This Week</label>
</div>
</div>
<div class="field">
<div class="ui slider checkbox">
<input type="checkbox" name="hot-deals">
<label>Hot Deals</label>
</div>
</div>
<div class="field">
<div class="ui checkbox">
<input type="checkbox" name="hot-deals">
<label>I agree to the <a href="#">Terms of Service</a>.</label>
</div>
</div>
<div class="ui error message">
<div class="header">We noticed some issues</div>
</div>
<div class="ui submit button">Login</div>
<div class="ui submit button">Register</div>
</div>
</div>

12
server/documents/modules/checkbox.html.eco
View File

@ -39,19 +39,19 @@ themes : ['default']
<div class="example">
<h4 class="ui header">Slider</h4>
<p>A checkbox can be formatted to show user selection as a slider</p>
<p>A checkbox can be formatted to emphasize the current selection state</p>
<div class="ui slider checkbox">
<input type="checkbox" name="walk" />
<label>Allow others to see when your dog is on a walk</label>
<input type="checkbox" name="newsletter" />
<label>Receive weekly poodle newsletter</label>
</div>
</div>
<div class="example">
<h4 class="ui header">Toggle</h4>
<p>A checkbox can be formatted to show user selection as a toggle</p>
<p>A checkbox can be formatted to show an on or off choice</p>
<div class="ui toggle checkbox">
<input type="checkbox" name="pet" />
<label>Allow other people to pet my dog</label>
<input type="checkbox" name="public" />
<label>Make my dog's profile public</label>
</div>
</div>

2
src/definitions/collections/form.less
View File

@ -48,7 +48,7 @@
clear: both;
margin: @fieldMargin;
}
.ui.form .field:last-child {
.ui.form :not(.fields) .field:last-child {
margin-bottom: 0em;
}

38
src/definitions/modules/checkbox.less
View File

@ -228,6 +228,7 @@
.ui.slider.checkbox label {
padding-left: @sliderLabelDistance;
line-height: @sliderLabelLineHeight;
color: @sliderOffLabelColor;
}
/* Line */
@ -243,12 +244,12 @@
z-index: 1;
border: none !important;
background-color: @neutralCheckbox;
background-color: @sliderLineColor;
width: @sliderLineWidth;
height: @sliderLineHeight;
transform: none;
border-radius: @circularRadius;
border-radius: @sliderLineRadius;
transition:
background 0.3s ease
;
@ -283,10 +284,24 @@
border: none;
}
/* Hover */
.ui.slider.checkbox .box:hover,
.ui.slider.checkbox label:hover {
color: @sliderHoverLabelColor;
}
.ui.slider.checkbox .box:hover::before,
.ui.slider.checkbox label:hover::before {
background: @sliderHoverLaneBackground;
}
/* Active */
.ui.slider.checkbox input:checked ~ .box,
.ui.slider.checkbox input:checked ~ label {
color: @sliderOnLabelColor;
}
.ui.slider.checkbox input:checked ~ .box:before,
.ui.slider.checkbox input:checked ~ label:before {
background-color: @positiveCheckbox;
background-color: @sliderOnLineColor;
}
.ui.slider.checkbox input:checked ~ .box:after,
.ui.slider.checkbox input:checked ~ label:after {
@ -308,6 +323,7 @@
height: @toggleSize;
padding-left: @toggleLabelDistance;
line-height: @toggleLabelLineHeight;
color: @toggleOffLabelColor;
}
/* Switch */
@ -346,7 +362,10 @@
left: 0em;
border-radius: @circularRadius;
transition: @toggleLabelTransition;
transition:
background 0.3s ease 0s,
left 0.3s ease 0s
;
}
.ui.toggle.checkbox input ~ .box:after,
@ -361,14 +380,21 @@
border: none;
}
/* Hover */
.ui.toggle.checkbox .box:hover::before,
.ui.toggle.checkbox label:hover::before {
background-color: @toggleHoverColor;
border: none;
}
/* Active */
.ui.toggle.checkbox input:checked ~ .box,
.ui.toggle.checkbox input:checked ~ label {
color: @positiveCheckbox;
color: @toggleOnLabelColor;
}
.ui.toggle.checkbox input:checked ~ .box:before,
.ui.toggle.checkbox input:checked ~ label:before {
background-color: @positiveCheckbox;
background-color: @toggleOnLaneColor;
}
.ui.toggle.checkbox input:checked ~ .box:after,
.ui.toggle.checkbox input:checked ~ label:after {

36
src/themes/packages/default/modules/checkbox.variables
View File

@ -25,7 +25,7 @@
;
/* Checkmark */
@checkboxCheckOffset: 1px;
@checkboxCheckOffset: 2px;
/*-------------------
Coupling
@ -69,39 +69,55 @@
;
/* Slider */
@sliderHandleSize: 1.5rem;
@sliderSize: 1.5rem;
@sliderHandleSize: @sliderSize;
@sliderLineWidth: 3.5rem;
@sliderLineHeight: 0.25rem;
@sliderLineVerticalOffset: 0.4rem;
@sliderLineColor: @neutralCheckbox;
@sliderLineRadius: @circularRadius;
@sliderHandleOffset: (1rem - @sliderHandleSize) / 2;
@sliderTravelDistance: @sliderLineWidth - @sliderHandleSize;
@sliderLabelDistance: @sliderLineWidth + 1rem;
@sliderOffLabelColor: @unselectedTextColor;
@sliderSize: @sliderHandleSize;
@sliderOnLineColor: @strongTransparentBlack;
@sliderOnLabelColor: @selectedTextColor;
@sliderLabelLineHeight: 1rem;
@sliderHoverLaneBackground: @strongTransparentBlack;
@sliderHoverLabelColor: @selectedTextColor;
/* Toggle */
@toggleSize: 1.75rem;
@toggleSize: 1.5rem;
@toggleHandleSize: @toggleSize;
@toggleHandleRadius: @circularRadius;
@toggleHandleOffset: 0rem;
@toggleHandleTransition:
background 0.3s ease 0s,
left 0.3s ease 0s
;
@toggleLaneWidth: 3.5rem;
@toggleLaneHeight: 1.75rem;
@toggleLaneHeight: @toggleSize;
@toggleLaneVerticalOffset: 0rem;
@toggleOffOffset: -0.05rem;
@toggleOnOffset: (@toggleLaneWidth - @toggleHandleSize) + 0.05rem;
@toggleLabelDistance: @toggleLaneWidth + @toggleSize;
@toggleLabelDistance: @toggleLaneWidth + 1rem;
@toggleLabelLineHeight: 1.5rem;
@toggleLabelTransition:
background 0.3s ease 0s,
left 0.3s ease 0s
;
@toggleFocusColor: @strongTransparentBlack;
@toggleHoverColor: @toggleFocusColor;
@toggleOffLabelColor: @checkboxColor;
@toggleOnLabelColor: @positiveCheckbox;
@toggleOnLaneColor: @positiveCheckbox;

Write Preview
Loading…
Cancel
Save