From 18fd550796ae46117d72b242543371bcb2f7a98b Mon Sep 17 00:00:00 2001 From: Yan Zhu Date: Tue, 28 Feb 2017 16:13:41 +0800 Subject: ADD: Experimentals doc page --- docs/experimentals.html | 149 ++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 149 insertions(+) create mode 100644 docs/experimentals.html (limited to 'docs/experimentals.html') diff --git a/docs/experimentals.html b/docs/experimentals.html new file mode 100644 index 0000000..0b67644 --- /dev/null +++ b/docs/experimentals.html @@ -0,0 +1,149 @@ + + + + + + + + + Experimentals - Spectre.css + + + + + +
+
+ +
+
+ +
+
+ + + +
+
+

Progress

+
+

The Progress indicates the progress completion of a task.

+
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+

+
+ +
+<progress class="progress" value="25" max="100"></progress>
+
+
+ +
+
+ +
+
+
+
+ + + + + -- cgit v1.3.1-23-gd82d From 44b286f6394a011a55bed87e0c731634b684c66f Mon Sep 17 00:00:00 2001 From: Yan Zhu Date: Tue, 28 Feb 2017 16:28:40 +0800 Subject: CHG: Fix pagination link --- docs/experimentals.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'docs/experimentals.html') diff --git a/docs/experimentals.html b/docs/experimentals.html index 0b67644..e7aafca 100644 --- a/docs/experimentals.html +++ b/docs/experimentals.html @@ -111,9 +111,9 @@
@@ -115,6 +118,25 @@ +
+

Sliders

+
+

Sliders are for selecting values from ranges.

+
+
+
+ +
+
+
+

+
+ +
+<input class="slider" type="range" min="0" max="100" value="50" />
+
+
+
    diff --git a/spectre-exp.less b/spectre-exp.less index 72065a7..9fbb4bd 100644 --- a/spectre-exp.less +++ b/spectre-exp.less @@ -6,3 +6,4 @@ // Experimentals @import 'src/progress.less'; +@import 'src/sliders.less'; diff --git a/src/forms.less b/src/forms.less index a2a8b49..257438c 100644 --- a/src/forms.less +++ b/src/forms.less @@ -2,6 +2,7 @@ .form-group:not(:last-child) { margin-bottom: 1rem; } + // Form element: Input boxes .form-input { appearance: none; @@ -70,7 +71,7 @@ } } -// Form element: Input note +// Form element: Input hint .form-input-hint { color: @core-meta-color; margin-top: .4rem; @@ -146,7 +147,8 @@ border-color: @control-color-danger; } } -// Form element: Checkbox and radio + +// Form element: Checkbox and Radio .form-checkbox, .form-radio, .form-switch { @@ -260,12 +262,13 @@ } } } + // Form element: Switch .form-switch { cursor: pointer; display: inline-block; line-height: 2rem; - padding: .3rem 2rem .3rem 3.6rem; + padding: .2rem 2rem .2rem 3.6rem; position: relative; .form-icon { @@ -280,7 +283,7 @@ outline: none; padding: 0; position: absolute; - top: .4rem; + top: .3rem; vertical-align: top; width: 3rem; &::after { @@ -312,6 +315,7 @@ } } } + // Form element: Input groups .input-group { display: flex; @@ -363,3 +367,21 @@ display: inline-flex; } } + +// Form Horizontal +.form-horizontal { + padding: 1rem; + + .form-group { + display: flex; + } + .form-label { + padding: .8rem .4rem; + margin-bottom: 0; + } + .form-checkbox, + .form-radio, + .form-switch { + margin: .4rem 0; + } +} diff --git a/src/layout.less b/src/layout.less index 657b59e..05642aa 100644 --- a/src/layout.less +++ b/src/layout.less @@ -355,21 +355,6 @@ width: 8.33333333%; } } -.form-horizontal { - padding: 1rem; - - .form-group { - display: flex; - } - .form-label { - padding: .8rem .4rem; - margin-bottom: 0; - } - .form-checkbox, - .form-radio { - margin: .4rem 0; - } -} // Responsive breakpoint system @media screen and (max-width: @size-xs) { diff --git a/src/sliders.less b/src/sliders.less new file mode 100644 index 0000000..520e9a1 --- /dev/null +++ b/src/sliders.less @@ -0,0 +1,71 @@ +// Sliders +// Credit: https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/ +.slider { + appearance: none; + background: transparent; + display: block; + width: 100%; + height: 2.4rem; + + // Slider Thumb + &::-webkit-slider-thumb { + -webkit-appearance: none; + background: @core-color; + border-radius: 50%; + height: 1.4rem; + margin-top: -.5rem; + transition: transform .2s ease; + width: 1.4rem; + } + &::-moz-range-thumb { + background: @core-color; + border: 0; + border-radius: 50%; + height: 1.4rem; + transition: transform .2s ease; + width: 1.4rem; + } + &::-ms-thumb { + background: @core-color; + border: 0; + border-radius: 50%; + height: 1.4rem; + transition: transform .2s ease; + width: 1.4rem; + } + + &:active { + &::-webkit-slider-thumb { + transform: scale(1.25); + } + &::-moz-range-thumb { + transform: scale(1.25); + } + &::-ms-thumb { + transform: scale(1.25); + } + } + + // Slider Track + &::-webkit-slider-runnable-track { + background: @core-border-color; + border-radius: @border-radius; + height: .4rem; + width: 100%; + } + &::-moz-range-track { + background: @core-border-color; + border-radius: @border-radius; + height: .4rem; + width: 100%; + } + &::-ms-track { + background: @core-border-color; + border-radius: @border-radius; + height: .4rem; + width: 100%; + } + &::-ms-fill-lower { + background: @core-color; + } +} -- cgit v1.3.1-23-gd82d