Skip to content

Commit

Permalink
Add “Form Elements” style example.
Browse files Browse the repository at this point in the history
  • Loading branch information
Tina C Lin (RD-TW) committed Mar 21, 2017
1 parent 9e2baf3 commit 613e1e0
Show file tree
Hide file tree
Showing 20 changed files with 1,037 additions and 39 deletions.
263 changes: 262 additions & 1 deletion dist/css/trendmicro-ui.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@ hr {
margin-top: 12px;
margin-bottom: 12px;
border: 0;
border-top: 1px solid $ddd;
border-top: 1px solid #ddd;
}
[role="button"] {
cursor: pointer;
Expand Down Expand Up @@ -180,6 +180,267 @@ pre code {
font-size: 12px;
line-height: 1.5;
}
input[type="radio"],
input[type="checkbox"] {
margin: 4px 0 0;
margin-top: 1px 9;
line-height: normal;
}
input[type="text"]:focus,
input[type="number"]:focus,
textarea:focus,
.input-focus {
border-color: #0096cc;
-webkit-transition: all 0.2s linear 0s;
-moz-transition: all 0.2s linear 0s;
-o-transition: all 0.2s linear 0s;
-ms-transition: all 0.2s linear 0s;
transition: all 0.2s linear 0s;
outline: none;
}
.form-control {
display: block;
width: 100%;
padding: 5px 12px;
font-size: 13px;
color: #222;
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
border-radius: 3px;
}
.form-control .placeholder {
color: #999;
}
.form-control[disabled],
.form-control[readonly],
fieldset[disabled] .form-control {
background-color: #ddd;
opacity: 0.4;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
filter: alpha(opacity=40);
}
.form-control[disabled],
fieldset[disabled] .form-control {
cursor: not-allowed;
}
textarea.form-control {
height: auto;
resize: none;
}
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
input.form-control {
height: 32px;
}
}
.label-required:after {
content: "*";
color: #db3d44;
}
.form-invalid,
.form-invalid:focus {
border-color: #db3d44;
}
textarea.textarea-resizable {
resize: vertical;
}
.radio,
.radio-inline,
.checkbox,
.checkbox-inline {
position: relative;
display: block;
}
.radio label,
.radio-inline label,
.checkbox label,
.checkbox-inline label {
min-height: 20px;
padding: 0;
margin-bottom: 0;
cursor: pointer;
color: #000;
line-height: 20px;
}
input[type="radio"][disabled],
input[type="checkbox"][disabled],
.radio[disabled],
.radio-inline[disabled],
.checkbox[disabled],
.checkbox-inline[disabled],
input[type="radio"].disabled,
input[type="checkbox"].disabled,
.radio.disabled,
.radio-inline.disabled,
.checkbox.disabled,
.checkbox-inline.disabled,
fieldset[disabled] input[type="radio"],
fieldset[disabled] input[type="checkbox"],
fieldset[disabled] .radio,
fieldset[disabled] .radio-inline,
fieldset[disabled] .checkbox,
fieldset[disabled] .checkbox-inline {
cursor: not-allowed;
}
input[type="radio"][disabled] label,
input[type="checkbox"][disabled] label,
.radio[disabled] label,
.radio-inline[disabled] label,
.checkbox[disabled] label,
.checkbox-inline[disabled] label,
input[type="radio"].disabled label,
input[type="checkbox"].disabled label,
.radio.disabled label,
.radio-inline.disabled label,
.checkbox.disabled label,
.checkbox-inline.disabled label,
fieldset[disabled] input[type="radio"] label,
fieldset[disabled] input[type="checkbox"] label,
fieldset[disabled] .radio label,
fieldset[disabled] .radio-inline label,
fieldset[disabled] .checkbox label,
fieldset[disabled] .checkbox-inline label {
opacity: 0.4;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
filter: alpha(opacity=40);
cursor: not-allowed;
}
.radio input[type="radio"],
.radio-inline input[type="radio"],
.checkbox input[type="checkbox"],
.checkbox-inline input[type="checkbox"] {
position: absolute;
margin-left: -20px;
margin-top: 4px 9;
}
.radio + .radio,
.checkbox + .checkbox {
margin-top: 8px;
}
.radio-inline,
.checkbox-inline {
position: relative;
margin-bottom: 0;
vertical-align: middle;
font-weight: normal;
cursor: pointer;
float: left;
}
.radio-inline + .radio-inline,
.checkbox-inline + .checkbox-inline {
margin-left: 16px;
}
.input-radio,
.input-checkbox {
display: none;
}
.radio label:before,
.radio-inline label:before {
border-radius: 50%;
}
.checkbox label:before,
.checkbox-inline label:before {
border-radius: 2px;
}
.input-radio + label:before,
.input-checkbox + label:before {
content: "";
display: inline-block;
width: 14px;
height: 14px;
margin-right: 8px;
border: 1px solid #999;
vertical-align: top;
margin-top: 3px;
background-color: #fff;
}
.radio .checked + label:before,
.radio-inline .checked + label:before,
.input-radio:checked + label:before {
content: "\2022";
color: #fff;
font-size: 16px;
text-align: center;
line-height: 14px;
border: 1px solid #0096cc;
background-color: #0096cc;
-webkit-transition: background-color 0.2s;
-moz-transition: background-color 0.2s;
-o-transition: background-color 0.2s;
-ms-transition: background-color 0.2s;
transition: background-color 0.2s;
}
.checkbox .checked + label:before,
.checkbox-inline .checked + label:before,
.input-checkbox:checked + label:before {
content: "";
background-image: url("../images/icon/component_check.svg");
background-position: center;
border: 1px solid #0096cc;
background-color: #0096cc;
-webkit-transition: 0.2s;
-moz-transition: 0.2s;
-o-transition: 0.2s;
-ms-transition: 0.2s;
transition: 0.2s;
}
.checkbox-partial + label:before {
content: "\25A0";
color: #0096cc;
font-size: 13px;
text-align: center;
line-height: 10px;
-webkit-transition: 0.2s;
-moz-transition: 0.2s;
-o-transition: 0.2s;
-ms-transition: 0.2s;
transition: 0.2s;
}
.input-radio + label:hover::before,
.input-checkbox + label:hover::before,
.radio .hover + label:before,
.radio-inline .hover + label:before,
.checkbox .hover + label:before,
.checkbox-inline .hover + label:before {
border: 1px solid #0096cc;
}
.input-radio:checked + label:hover::before,
.radio .checked-hover + label:before,
.radio .checked + label:hover::before,
.radio-inline .checked-hover + label:before,
.radio-inline .checked + label:hover::before,
.input-checkbox:checked + label:hover::before,
.checkbox .checked-hover + label:before,
.checkbox .checked + label:hover::before,
.checkbox-inline .checked-hover + label:before,
.checkbox-inline .checked + label:hover::before {
border: 1px solid #33abd6;
background-color: #33abd6;
}
.radio .disabled + label:before,
.radio-inline .disabled + label:before,
.checkbox .disabled + label:before,
.checkbox-inline .disabled + label:before {
border: 1px solid #999;
background-color: #ddd;
}
.help-block {
display: block;
margin-top: 4px;
color: #999;
}
.help-block.help-block-with-icon {
padding-left: 20px;
}
.help-block .icon {
margin-right: 4px;
vertical-align: top;
margin-top: 2px;
margin-left: -20px;
}
.help-block-invalid {
color: #db3d44;
}
.col-xs-1,
.col-sm-1,
.col-md-1,
Expand Down
2 changes: 1 addition & 1 deletion dist/css/trendmicro-ui.min.css
View file

Large diffs are not rendered by default.

11 changes: 11 additions & 0 deletions dist/images/icon/component_check.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
87 changes: 87 additions & 0 deletions examples/FormElements/Checkboxes.jsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,87 @@
import React from 'react';

export default () => {
return (
<section>
<h3 style={{ margin: '16px 0' }}>
Checkboxes
</h3>
<div>
<p>Checkboxes are used to permit the user to select one or more options from a set.</p>
<ul>
<li>The user can select one, one, or multiple options from a set</li>
<li>When clicked, a checkbox displays or removes its check mark</li>
<li>Use sentence case for checkbox labels</li>
<li>Align checkbox labels vertically whenever possible</li>
<li>Make labels clickable whenever possible</li>
</ul>
<div className="checkbox">
<input type="checkbox" name="optionscheckboxs" id="optionscheckboxs1" className="input-checkbox" />
<label htmlFor="optionscheckboxs1">Normal</label>
</div>
<div className="checkbox">
<input type="checkbox" name="optionscheckboxs" id="optionscheckboxs2" className="input-checkbox hover" />
<label htmlFor="optionscheckboxs2">Hover</label>
</div>
<div className="checkbox">
<input type="checkbox" name="optionscheckboxs" id="optionscheckboxs3" className="input-checkbox" checked />
<label htmlFor="optionscheckboxs3">Checked</label>
</div>
<div className="checkbox">
<input type="checkbox" name="optionscheckboxs" id="optionscheckboxs4" className="input-checkbox checked checked-hover" />
<label htmlFor="optionscheckboxs4">Checked hover</label>
</div>
<div className="checkbox">
<input type="checkbox" name="optionscheckboxs" id="optionscheckboxs5" className="input-checkbox checkbox-partial" />
<label htmlFor="optionscheckboxs5">Partial checked</label>
</div>
<div className="checkbox disabled">
<input type="checkbox" name="optionscheckboxs" id="optionscheckboxs6" className="input-checkbox checked" disabled />
<label htmlFor="optionscheckboxs6">Checked disabled</label>
</div>
<div className="checkbox disabled">
<input type="checkbox" name="optionscheckboxs" id="optionscheckboxs7" className="input-checkbox disabled" disabled />
<label htmlFor="optionscheckboxs7">Disabled</label>
</div>

<hr />
<h5>Default (stacked)</h5>
<div className="checkbox">
<input type="checkbox" name="default" id="default1" className="input-checkbox" />
<label htmlFor="default1">Normal label one</label>
</div>
<div className="checkbox">
<input type="checkbox" name="default" id="default2" className="input-checkbox" />
<label htmlFor="default2">Normal label two</label>
</div>
<div className="checkbox disabled">
<input type="checkbox" name="default" id="default3" className="input-checkbox disabled" disabled />
<label htmlFor="default3">Normal label two</label>
</div>
<div className="checkbox">
<input type="checkbox" name="default" id="default4" className="input-checkbox checked" />
<label htmlFor="default4">Checked label</label>
<div>
<div>Sed posuere consecteyur est at lobortus. Aenean eu leo quam.</div>
<div>Pellentesque omare sem lacinia quam venenatis vestibulum.</div>
</div>
</div>

<hr />
<h5>Inline</h5>
<div className="checkbox-inline">
<input type="checkbox" name="inline" id="inline1" className="input-checkbox" />
<label htmlFor="inline1">Normal label</label>
</div>
<div className="checkbox-inline disabled">
<input type="checkbox" name="inline" id="inline2" className="input-checkbox disabled" disabled />
<label htmlFor="inline2">Disabled label</label>
</div>
<div className="checkbox-inline">
<input type="checkbox" name="inline" id="inline3" className="input-checkbox checked" />
<label htmlFor="inline3">Checked label</label>
</div>
</div>
</section>
);
};
Loading

0 comments on commit 613e1e0

Please sign in to comment.