Initial commit
This commit is contained in:
zhongjin
@@ -0,0 +1,70 @@
|
||||
@import "../../variables/colors";
|
||||
@import "../../variables/sizes";
|
||||
|
||||
// New checkbox input styled
|
||||
//
|
||||
// <div class="Checkbox">
|
||||
// <button class="Checkbox-input"></button>
|
||||
// <label class="Checkbox-label">Checkbox label</label>
|
||||
// </div>
|
||||
//
|
||||
// --------------------------------------------------------------------------------------------------------------------
|
||||
|
||||
$check-icon: '\2714'; //✔
|
||||
|
||||
.Checkbox {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.Checkbox-input {
|
||||
position: relative;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border: 2px solid $cStructure-mainLine;
|
||||
border-radius: 3px;
|
||||
outline: none;
|
||||
background: white;
|
||||
|
||||
&:hover {
|
||||
border-color: #AAA;
|
||||
}
|
||||
}
|
||||
|
||||
.Checkbox-input:focus {
|
||||
border-color: #AAA;
|
||||
}
|
||||
|
||||
.Checkbox-input.is-checked {
|
||||
&::after {
|
||||
content: $check-icon;
|
||||
position: absolute;
|
||||
top: -3px;
|
||||
left: 1px;
|
||||
color: #0090D7;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.Checkbox-label {
|
||||
margin-left: 8px;
|
||||
color: $cTypography-secondary;
|
||||
}
|
||||
|
||||
.Checkbox.is-disabled .Checkbox-input {
|
||||
opacity: 0.4;
|
||||
|
||||
&:hover {
|
||||
border-color: $cStructure-mainLine;
|
||||
cursor: default;
|
||||
}
|
||||
&:focus { border-color: $cStructure-mainLine; }
|
||||
}
|
||||
|
||||
.Checkbox.is-disabled .Checkbox-label {
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
.Checkbox-strong {
|
||||
color: #2E3C43;
|
||||
}
|
||||
@@ -0,0 +1,58 @@
|
||||
@import "../../variables/mixins";
|
||||
@import "../../variables/colors";
|
||||
@import "../../variables/sizes";
|
||||
|
||||
// New color picker input styled
|
||||
//
|
||||
// <button class="ColorPicker" style="background:red">
|
||||
// <span class="ColorPicker-handle">
|
||||
// <b class="ColorPicker-handleTriangle"></b>
|
||||
// </span>
|
||||
// </button>
|
||||
//
|
||||
// --------------------------------------------------------------------------------------------------------------------
|
||||
|
||||
$size: 40px;
|
||||
$br: 3px;
|
||||
|
||||
.ColorPicker {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
width: $size;
|
||||
height: $size;
|
||||
border-radius: $br;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: $size - 2;
|
||||
height: $size - 2;
|
||||
border: 1px solid rgba(black, 0.2);
|
||||
border-radius: $br;
|
||||
}
|
||||
}
|
||||
|
||||
.UserSettings-ColorPicker {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
width: 100px;
|
||||
height: 40px;
|
||||
border-radius: $br;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 98px;
|
||||
height: 38px;
|
||||
border: 1px solid rgba(black, 0.2);
|
||||
border-radius: $br;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,29 @@
|
||||
@import "../../variables/colors";
|
||||
@import "../../variables/sizes";
|
||||
|
||||
// Default form styles as defined by style guide
|
||||
//
|
||||
// -------------------------------------------------------------------------------------------------------------------
|
||||
|
||||
.Input {
|
||||
height: $sForms-elementHeight;
|
||||
padding: 0 $sMargin-elementInline;
|
||||
border: 1px solid $cForms-border;
|
||||
border-radius: $sForms-borderRadius;
|
||||
color: $cTypography-paragraphs;
|
||||
|
||||
::-webkit-input-placeholder { color: $cTypography-help; }
|
||||
:-moz-placeholder { color: $cTypography-help; }
|
||||
::-moz-placeholder { color: $cTypography-help; }
|
||||
:-ms-input-placeholder { color: $cTypography-help; }
|
||||
}
|
||||
|
||||
.Input--slim {
|
||||
height: $sMargin-group;
|
||||
padding-right: 10px;
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
.Input.is-loading {
|
||||
background: url($assetsDir + "/images/layout/loader_transparent.gif") no-repeat 10px 50%;
|
||||
}
|
||||
@@ -0,0 +1,117 @@
|
||||
@import "../../variables/colors";
|
||||
@import "../../variables/sizes";
|
||||
|
||||
// OLD FORM SPINNER
|
||||
|
||||
/*
|
||||
<div class="form_spinner">
|
||||
<input class="value" type="text" value="0.6" />
|
||||
<a href="#plus" class="plus"></a>
|
||||
<a href="#minus" class="minus"></a>
|
||||
</div>
|
||||
*/
|
||||
|
||||
.form_spinner {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
width: auto;
|
||||
min-width: 20px;
|
||||
margin: 0;
|
||||
padding: 2px 19px 2px 4px;
|
||||
border: 1px solid #9E9E9E;
|
||||
border-radius: 3px;
|
||||
background: white;
|
||||
line-height: 20px;
|
||||
|
||||
&:hover { cursor: pointer; }
|
||||
|
||||
&:hover,
|
||||
.input:hover {
|
||||
border: 1px solid #7E7E7E;
|
||||
}
|
||||
|
||||
&:hover input.value { color: #333; }
|
||||
|
||||
input.value {
|
||||
width: 25px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
float: none;
|
||||
border: none;
|
||||
background: none;
|
||||
color: #666;
|
||||
font-size: 13px;
|
||||
line-height: 15px;
|
||||
text-align: left;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
width: 14px;
|
||||
height: 11px;
|
||||
border-left: 1px solid #A8A8A8;
|
||||
text-indent: -9999px;
|
||||
|
||||
&::before {
|
||||
content: ' ';
|
||||
position: absolute;
|
||||
left: 5px;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-right: 2px solid transparent;
|
||||
border-left: 2px solid transparent;
|
||||
}
|
||||
|
||||
&.plus {
|
||||
top: 0;
|
||||
border-bottom: 1px solid #A8A8A8;
|
||||
|
||||
&::before {
|
||||
top: 4px;
|
||||
border-bottom: 3px solid #999;
|
||||
}
|
||||
}
|
||||
|
||||
&.minus {
|
||||
bottom: 0;
|
||||
height: 12px;
|
||||
|
||||
&::before {
|
||||
top: 5px;
|
||||
border-top: 3px solid #999;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
&.plus {
|
||||
&::before { border-bottom: 3px solid #666; }
|
||||
}
|
||||
|
||||
&.minus {
|
||||
bottom: 0;
|
||||
&::before { border-top: 3px solid #666; }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Disabled state
|
||||
&.disabled {
|
||||
background: #F4F4F4 !important;
|
||||
|
||||
a {
|
||||
opacity: 0.5;
|
||||
background: #F4F4F4 !important;
|
||||
|
||||
&:hover {
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
&:hover { cursor: default; }
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,168 @@
|
||||
@import '../../variables/colors';
|
||||
@import '../../variables/sizes';
|
||||
|
||||
// New radiobutton input styled
|
||||
//
|
||||
// <div class="RadioButton">
|
||||
// <button class="RadioButton-input"></button>
|
||||
// <label class="RadioButton-label">Checkbox label</label>
|
||||
// </div>
|
||||
//
|
||||
// --------------------------------------------------------------------------------------------------------------------
|
||||
|
||||
.RadioButton {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.RadioButton-input {
|
||||
position: relative;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border: 2px solid $cStructure-mainLine;
|
||||
border-radius: 16px;
|
||||
outline: none;
|
||||
background: #FFF;
|
||||
|
||||
&:hover {
|
||||
border-color: #AAA;
|
||||
}
|
||||
}
|
||||
|
||||
.RadioButton-input.is-checked {
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 1px;
|
||||
left: 1px;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 12px;
|
||||
background: #4A90E2;
|
||||
}
|
||||
}
|
||||
|
||||
.RadioButton-input.is-disabled {
|
||||
cursor: default;
|
||||
|
||||
&::before {
|
||||
background: #DDD;
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
|
||||
.RadioButton-label {
|
||||
margin-left: 8px;
|
||||
color: $cTypography-secondary;
|
||||
}
|
||||
|
||||
.RadioButton-label.dark-color {
|
||||
color: $cTypography-headers;
|
||||
}
|
||||
|
||||
.RadioButton.is-checked .RadioButton-label {
|
||||
color: $cTypography-linkSelected;
|
||||
}
|
||||
|
||||
.RadioButton.is-alert .RadioButton-label {
|
||||
color: $cHighlight-alert3;
|
||||
}
|
||||
|
||||
.RadioButton.is-alert .RadioButton-input {
|
||||
border-color: $cHighlight-alert3;
|
||||
|
||||
&::before {
|
||||
background: $cHighlight-alert3;
|
||||
}
|
||||
}
|
||||
|
||||
.RadioButton.is-warning .RadioButton-label {
|
||||
color: $cHighlight-alert;
|
||||
}
|
||||
|
||||
.RadioButton.is-warning .RadioButton-input {
|
||||
border-color: $cHighlight-alert;
|
||||
|
||||
&::before {
|
||||
background: $cHighlight-alert;
|
||||
}
|
||||
}
|
||||
|
||||
.RadioButton.is-disabled .RadioButton-input {
|
||||
opacity: 0.4;
|
||||
|
||||
&:hover {
|
||||
border-color: $cStructure-mainLine;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
border-color: $cStructure-mainLine;
|
||||
}
|
||||
}
|
||||
|
||||
.RadioButton.is-disabled .RadioButton-label {
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
// CSS-only behaviour
|
||||
.RadioButtonInput {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
opacity: 0;
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.RadioButtonInput-face {
|
||||
position: relative;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border: 2px solid $cStructure-mainLine;
|
||||
border-radius: 50%;
|
||||
outline: none;
|
||||
background: #FFF;
|
||||
cursor: pointer;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 3px;
|
||||
left: 3px;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.RadioButtonInput:checked + .RadioButtonInput-face {
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 3px;
|
||||
left: 3px;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
background: #4A90E2;
|
||||
}
|
||||
}
|
||||
|
||||
.RadioButtonInput:disabled + .RadioButtonInput-face {
|
||||
opacity: 0.4;
|
||||
|
||||
&:focus {
|
||||
border-color: $cStructure-mainLine;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-color: $cStructure-mainLine;
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
|
||||
.RadioButtonInput:hover + .RadioButtonInput-face {
|
||||
border-color: #AAA;
|
||||
}
|
||||
@@ -0,0 +1,66 @@
|
||||
@import "../../variables/colors";
|
||||
@import "../../variables/sizes";
|
||||
|
||||
// New slider styles
|
||||
//
|
||||
// <div class="UISlider">
|
||||
// <!-- Apply jquery ui slider -->
|
||||
// </div>
|
||||
//
|
||||
// --------------------------------------------------------------------------------------------------------------------
|
||||
|
||||
$br: 10px;
|
||||
|
||||
.UISlider {
|
||||
position: relative;
|
||||
width: 140px;
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
.UISlider.ui-slider {
|
||||
border-radius: $br;
|
||||
background: white;
|
||||
}
|
||||
|
||||
.UISlider.ui-slider::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 8px;
|
||||
border: 1px solid rgba(black, 0.1);
|
||||
border-radius: $br;
|
||||
}
|
||||
|
||||
.UISlider .ui-slider-range-min {
|
||||
height: 10px;
|
||||
border-radius: $br;
|
||||
background-color: #1181FB;
|
||||
}
|
||||
|
||||
.UISlider .ui-slider-handle {
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
top: 5px;
|
||||
left: 2px;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
margin-top: -9px;
|
||||
margin-left: -9px;
|
||||
border-radius: 18px;
|
||||
outline: none;
|
||||
background: white;
|
||||
box-shadow: rgba(black, 0.15) 0 0 0 1px;
|
||||
|
||||
&.ui-state-active,
|
||||
&.ui-state-focus,
|
||||
&.ui-state-hover { box-shadow: rgba(black, 0.3) 0 0 0 1px; }
|
||||
}
|
||||
|
||||
.UISlider.ui-slider-disabled {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.UISlider.ui-slider-disabled .ui-slider-handle { cursor: default; }
|
||||
@@ -0,0 +1,92 @@
|
||||
@import '../../variables/colors';
|
||||
@import '../../variables/sizes';
|
||||
|
||||
// Toggler styled checkboxes/radio buttons
|
||||
//
|
||||
// Example usage:
|
||||
// <div class="Toggler">
|
||||
// <input type="checkbox" id="foobar" />
|
||||
// <label for="foobar" />
|
||||
// </div>
|
||||
//
|
||||
// --------------------------------------------------------------------------------------------------------------------
|
||||
|
||||
$sWidth: 36px;
|
||||
$sHeight: 20px;
|
||||
|
||||
.Toggler {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
width: $sWidth;
|
||||
height: $sHeight;
|
||||
}
|
||||
|
||||
.Toggler.is-disabled {
|
||||
opacity: 0.4;
|
||||
|
||||
label {
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
|
||||
.Toggler input {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.Toggler label {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: $sWidth;
|
||||
height: $sHeight;
|
||||
transition: all 150ms ease;
|
||||
border-radius: 30px;
|
||||
background-color: #DDD;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.Toggler label::before {
|
||||
content: ' ';
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
left: 4px;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
transition: all 150ms ease;
|
||||
border-radius: 30px;
|
||||
background-color: #FFF;
|
||||
}
|
||||
|
||||
.Toggler input:checked + label::before {
|
||||
left: 20px;
|
||||
}
|
||||
|
||||
.Toggler input:checked + label {
|
||||
background-color: #73C86B;
|
||||
}
|
||||
|
||||
// Toggler grey
|
||||
$color: #BBB;
|
||||
|
||||
.Toggler--grey label {
|
||||
width: $sWidth - 2px;
|
||||
height: $sHeight - 2px;
|
||||
border: 1px solid $color;
|
||||
background: #FFF;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.Toggler--grey label::before {
|
||||
top: 3px;
|
||||
background: $color;
|
||||
}
|
||||
|
||||
.Toggler--grey input:checked + label::before {
|
||||
left: 19px;
|
||||
}
|
||||
|
||||
.Toggler--grey input:checked + label {
|
||||
background-color: #FFF;
|
||||
}
|
||||
Reference in New Issue
Block a user