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

Fixed less formatting

pull/4212/head
Gareth Daunton 8 years ago
parent
3e61750fd2
commit
23fa0c7341
1 changed files with 115 additions and 115 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 230
      src/definitions/modules/range.less

230
src/definitions/modules/range.less
View File

@ -8,48 +8,48 @@
@import (multiple) '../../theme.config'; @import (multiple) '../../theme.config';
.ui.range { .ui.range {
width: 100%;
width: 100%;
padding: @padding; padding: @padding;
} }
.ui.range .inner { .ui.range .inner {
height: @height;
position: relative;
height: @height;
position: relative;
} }
.ui.range .inner:hover { .ui.range .inner:hover {
cursor: @hoverPointer;
cursor: @hoverPointer;
} }
.ui.range .inner .track { .ui.range .inner .track {
position: absolute;
width: 100%;
height: @trackHeight;
border-radius: @trackBorderRadius;
top: @trackPositionTop;
left: 0;
background-color: @trackColor;
position: absolute;
width: 100%;
height: @trackHeight;
border-radius: @trackBorderRadius;
top: @trackPositionTop;
left: 0;
background-color: @trackColor;
} }
.ui.range .inner .track-fill { .ui.range .inner .track-fill {
position: absolute;
width: 0;
height: @trackFillHeight;
border-radius: @trackFillBorderRadius;
top: @trackPositionTop;
left: 0;
background-color: @trackFillColor;
position: absolute;
width: 0;
height: @trackFillHeight;
border-radius: @trackFillBorderRadius;
top: @trackPositionTop;
left: 0;
background-color: @trackFillColor;
} }
.ui.range .inner .thumb { .ui.range .inner .thumb {
position: absolute;
top: 0;
left: 0;
height: @thumbHeight;
width: @thumbHeight;
background: @thumbBackground;
border-radius: @thumbBorderRadius;
box-shadow: @thumbShadow;
position: absolute;
top: 0;
left: 0;
height: @thumbHeight;
width: @thumbHeight;
background: @thumbBackground;
border-radius: @thumbBorderRadius;
box-shadow: @thumbShadow;
transition: @thumbTransition; transition: @thumbTransition;
} }
@ -69,15 +69,15 @@
---------------*/ ---------------*/
.ui.range.disabled { .ui.range.disabled {
opacity: @disabledOpactiy;
opacity: @disabledOpactiy;
} }
.ui.range.disabled .inner:hover { .ui.range.disabled .inner:hover {
cursor: auto;
cursor: auto;
} }
.ui.range.disabled .inner .track-fill { .ui.range.disabled .inner .track-fill {
background: @disabledTrackFillColor;
background: @disabledTrackFillColor;
} }
/*-------------- /*--------------
@ -86,12 +86,12 @@
.ui.range.reversed .inner .track-fill { .ui.range.reversed .inner .track-fill {
left: auto; left: auto;
right: 0;
right: 0;
} }
.ui.range.reversed .inner .thumb { .ui.range.reversed .inner .thumb {
left: auto; left: auto;
right: 0;
right: 0;
} }
/******************************* /*******************************
@ -118,11 +118,11 @@
---------------*/ ---------------*/
.ui.inverted.range .inner .track-fill { .ui.inverted.range .inner .track-fill {
background-color: @invertedTrackFillColor;
background-color: @invertedTrackFillColor;
} }
.ui.inverted.range .inner .track { .ui.inverted.range .inner .track {
background-color: @transparentWhite;
background-color: @transparentWhite;
} }
/*-------------- /*--------------
@ -131,106 +131,106 @@
/* Red */ /* Red */
.ui.red.range .inner .track-fill { .ui.red.range .inner .track-fill {
background-color: @red;
background-color: @red;
} }
.ui.red.inverted.range .inner .track-fill { .ui.red.inverted.range .inner .track-fill {
background-color: @lightRed;
background-color: @lightRed;
} }
/* Orange */ /* Orange */
.ui.orange.range .inner .track-fill { .ui.orange.range .inner .track-fill {
background-color: @orange;
background-color: @orange;
} }
.ui.orange.inverted.range .inner .track-fill { .ui.orange.inverted.range .inner .track-fill {
background-color: @lightOrange;
background-color: @lightOrange;
} }
/* Yellow */ /* Yellow */
.ui.yellow.range .inner .track-fill { .ui.yellow.range .inner .track-fill {
background-color: @yellow;
background-color: @yellow;
} }
.ui.yellow.inverted.range .inner .track-fill { .ui.yellow.inverted.range .inner .track-fill {
background-color: @lightYellow;
background-color: @lightYellow;
} }
/* Olive */ /* Olive */
.ui.olive.range .inner .track-fill { .ui.olive.range .inner .track-fill {
background-color: @olive;
background-color: @olive;
} }
.ui.olive.inverted.range .inner .track-fill { .ui.olive.inverted.range .inner .track-fill {
background-color: @lightOlive;
background-color: @lightOlive;
} }
/* Green */ /* Green */
.ui.green.range .inner .track-fill { .ui.green.range .inner .track-fill {
background-color: @green;
background-color: @green;
} }
.ui.green.inverted.range .inner .track-fill { .ui.green.inverted.range .inner .track-fill {
background-color: @lightGreen;
background-color: @lightGreen;
} }
/* Teal */ /* Teal */
.ui.teal.range .inner .track-fill { .ui.teal.range .inner .track-fill {
background-color: @teal;
background-color: @teal;
} }
.ui.teal.inverted.range .inner .track-fill { .ui.teal.inverted.range .inner .track-fill {
background-color: @lightTeal;
background-color: @lightTeal;
} }
/* Blue */ /* Blue */
.ui.blue.range .inner .track-fill { .ui.blue.range .inner .track-fill {
background-color: @blue;
background-color: @blue;
} }
.ui.blue.inverted.range .inner .track-fill { .ui.blue.inverted.range .inner .track-fill {
background-color: @lightBlue;
background-color: @lightBlue;
} }
/* Violet */ /* Violet */
.ui.violet.range .inner .track-fill { .ui.violet.range .inner .track-fill {
background-color: @violet;
background-color: @violet;
} }
.ui.violet.inverted.range .inner .track-fill { .ui.violet.inverted.range .inner .track-fill {
background-color: @lightViolet;
background-color: @lightViolet;
} }
/* Purple */ /* Purple */
.ui.purple.range .inner .track-fill { .ui.purple.range .inner .track-fill {
background-color: @purple;
background-color: @purple;
} }
.ui.purple.inverted.range .inner .track-fill { .ui.purple.inverted.range .inner .track-fill {
background-color: @lightPurple;
background-color: @lightPurple;
} }
/* Pink */ /* Pink */
.ui.pink.range .inner .track-fill { .ui.pink.range .inner .track-fill {
background-color: @pink;
background-color: @pink;
} }
.ui.pink.inverted.range .inner .track-fill { .ui.pink.inverted.range .inner .track-fill {
background-color: @lightPink;
background-color: @lightPink;
} }
/* Brown */ /* Brown */
.ui.brown.range .inner .track-fill { .ui.brown.range .inner .track-fill {
background-color: @brown;
background-color: @brown;
} }
.ui.brown.inverted.range .inner .track-fill { .ui.brown.inverted.range .inner .track-fill {
background-color: @lightBrown;
background-color: @lightBrown;
} }
/* Grey */ /* Grey */
.ui.grey.range .inner .track-fill { .ui.grey.range .inner .track-fill {
background-color: @grey;
background-color: @grey;
} }
.ui.grey.inverted.range .inner .track-fill { .ui.grey.inverted.range .inner .track-fill {
background-color: @lightGrey;
background-color: @lightGrey;
} }
/* Black */ /* Black */
.ui.black.range .inner .track-fill { .ui.black.range .inner .track-fill {
background-color: @black;
background-color: @black;
} }
.ui.black.inverted.range .inner .track-fill { .ui.black.inverted.range .inner .track-fill {
background-color: @lightBlack;
background-color: @lightBlack;
} }
/*-------------- /*--------------
@ -239,114 +239,114 @@
/* Standard */ /* Standard */
.ui.range.basic .inner .thumb { .ui.range.basic .inner .thumb {
background-color: @trackFillColor;
background-color: @trackFillColor;
} }
.ui.range.basic .inner .thumb:hover { .ui.range.basic .inner .thumb:hover {
background-color: @trackFillColorFocus;
background-color: @trackFillColorFocus;
} }
/* Red */ /* Red */
.ui.red.range.basic .inner .thumb { .ui.red.range.basic .inner .thumb {
background-color: @red;
background-color: @red;
} }
.ui.red.range.basic .inner .thumb:hover { .ui.red.range.basic .inner .thumb:hover {
background-color: @redHover;
background-color: @redHover;
} }
/* Orange */ /* Orange */
.ui.orange.range.basic .inner .thumb { .ui.orange.range.basic .inner .thumb {
background-color: @orange;
background-color: @orange;
} }
.ui.orange.range.basic .inner .thumb:hover { .ui.orange.range.basic .inner .thumb:hover {
background-color: @orangeHover;
background-color: @orangeHover;
} }
/* Yellow */ /* Yellow */
.ui.yellow.range.basic .inner .thumb { .ui.yellow.range.basic .inner .thumb {
background-color: @yellow;
background-color: @yellow;
} }
.ui.yellow.range.basic .inner .thumb:hover { .ui.yellow.range.basic .inner .thumb:hover {
background-color: @yellowHover;
background-color: @yellowHover;
} }
/* Olive */ /* Olive */
.ui.olive.range.basic .inner .thumb { .ui.olive.range.basic .inner .thumb {
background-color: @olive;
background-color: @olive;
} }
.ui.olive.range.basic .inner .thumb:hover { .ui.olive.range.basic .inner .thumb:hover {
background-color: @oliveHover;
background-color: @oliveHover;
} }
/* Green */ /* Green */
.ui.green.range.basic .inner .thumb { .ui.green.range.basic .inner .thumb {
background-color: @green;
background-color: @green;
} }
.ui.green.range.basic .inner .thumb:hover { .ui.green.range.basic .inner .thumb:hover {
background-color: @greenHover;
background-color: @greenHover;
} }
/* Teal */ /* Teal */
.ui.teal.range.basic .inner .thumb { .ui.teal.range.basic .inner .thumb {
background-color: @teal;
background-color: @teal;
} }
.ui.teal.range.basic .inner .thumb:hover { .ui.teal.range.basic .inner .thumb:hover {
background-color: @tealHover;
background-color: @tealHover;
} }
/* Blue */ /* Blue */
.ui.blue.range.basic .inner .thumb { .ui.blue.range.basic .inner .thumb {
background-color: @blue;
background-color: @blue;
} }
.ui.blue.range.basic .inner .thumb:hover { .ui.blue.range.basic .inner .thumb:hover {
background-color: @blueHover;
background-color: @blueHover;
} }
/* Violet */ /* Violet */
.ui.violet.range.basic .inner .thumb { .ui.violet.range.basic .inner .thumb {
background-color: @violet;
background-color: @violet;
} }
.ui.violet.range.basic .inner .thumb:hover { .ui.violet.range.basic .inner .thumb:hover {
background-color: @violetHover;
background-color: @violetHover;
} }
/* Purple */ /* Purple */
.ui.purple.range.basic .inner .thumb { .ui.purple.range.basic .inner .thumb {
background-color: @purple;
background-color: @purple;
} }
.ui.purple.range.basic .inner .thumb:hover { .ui.purple.range.basic .inner .thumb:hover {
background-color: @purpleHover;
background-color: @purpleHover;
} }
/* Pink */ /* Pink */
.ui.pink.range.basic .inner .thumb { .ui.pink.range.basic .inner .thumb {
background-color: @pink;
background-color: @pink;
} }
.ui.pink.range.basic .inner .thumb:hover { .ui.pink.range.basic .inner .thumb:hover {
background-color: @pinkHover;
background-color: @pinkHover;
} }
/* Brown */ /* Brown */
.ui.brown.range.basic .inner .thumb { .ui.brown.range.basic .inner .thumb {
background-color: @brown;
background-color: @brown;
} }
.ui.brown.range.basic .inner .thumb:hover { .ui.brown.range.basic .inner .thumb:hover {
background-color: @brownHover;
background-color: @brownHover;
} }
/* Grey */ /* Grey */
.ui.grey.range.basic .inner .thumb { .ui.grey.range.basic .inner .thumb {
background-color: @grey;
background-color: @grey;
} }
.ui.grey.range.basic .inner .thumb:hover { .ui.grey.range.basic .inner .thumb:hover {
background-color: @greyHover;
background-color: @greyHover;
} }
/* Black */ /* Black */
.ui.black.range.basic .inner .thumb { .ui.black.range.basic .inner .thumb {
background-color: @black;
background-color: @black;
} }
.ui.black.range.basic .inner .thumb:hover { .ui.black.range.basic .inner .thumb:hover {
background-color: @blackHover;
background-color: @blackHover;
} }
/*-------------- /*--------------
@ -355,114 +355,114 @@
/* Standard */ /* Standard */
.ui.inverted.range.basic .inner .thumb { .ui.inverted.range.basic .inner .thumb {
background-color: @invertedTrackFillColor;
background-color: @invertedTrackFillColor;
} }
.ui.inverted.range.basic .inner .thumb:hover { .ui.inverted.range.basic .inner .thumb:hover {
background-color: @invertedTrackFillColorFocus;
background-color: @invertedTrackFillColorFocus;
} }
/* Red */ /* Red */
.ui.red.inverted.range.basic .inner .thumb { .ui.red.inverted.range.basic .inner .thumb {
background-color: @lightRed;
background-color: @lightRed;
} }
.ui.red.inverted.range.basic .inner .thumb:hover { .ui.red.inverted.range.basic .inner .thumb:hover {
background-color: @lightRedHover;
background-color: @lightRedHover;
} }
/* Orange */ /* Orange */
.ui.orange.inverted.range.basic .inner .thumb { .ui.orange.inverted.range.basic .inner .thumb {
background-color: @lightOrange;
background-color: @lightOrange;
} }
.ui.orange.inverted.range.basic .inner .thumb:hover { .ui.orange.inverted.range.basic .inner .thumb:hover {
background-color: @lightOrangeHover;
background-color: @lightOrangeHover;
} }
/* Yellow */ /* Yellow */
.ui.yellow.inverted.range.basic .inner .thumb { .ui.yellow.inverted.range.basic .inner .thumb {
background-color: @lightYellow;
background-color: @lightYellow;
} }
.ui.yellow.inverted.range.basic .inner .thumb:hover { .ui.yellow.inverted.range.basic .inner .thumb:hover {
background-color: @lightYellowHover;
background-color: @lightYellowHover;
} }
/* Olive */ /* Olive */
.ui.olive.inverted.range.basic .inner .thumb { .ui.olive.inverted.range.basic .inner .thumb {
background-color: @lightOlive;
background-color: @lightOlive;
} }
.ui.olive.inverted.range.basic .inner .thumb:hover { .ui.olive.inverted.range.basic .inner .thumb:hover {
background-color: @lightOliveHover;
background-color: @lightOliveHover;
} }
/* Green */ /* Green */
.ui.green.inverted.range.basic .inner .thumb { .ui.green.inverted.range.basic .inner .thumb {
background-color: @lightGreen;
background-color: @lightGreen;
} }
.ui.green.inverted.range.basic .inner .thumb:hover { .ui.green.inverted.range.basic .inner .thumb:hover {
background-color: @lightGreenHover;
background-color: @lightGreenHover;
} }
/* Teal */ /* Teal */
.ui.teal.inverted.range.basic .inner .thumb { .ui.teal.inverted.range.basic .inner .thumb {
background-color: @lightTeal;
background-color: @lightTeal;
} }
.ui.teal.inverted.range.basic .inner .thumb:hover { .ui.teal.inverted.range.basic .inner .thumb:hover {
background-color: @lightTealHover;
background-color: @lightTealHover;
} }
/* Blue */ /* Blue */
.ui.blue.inverted.range.basic .inner .thumb { .ui.blue.inverted.range.basic .inner .thumb {
background-color: @lightBlue;
background-color: @lightBlue;
} }
.ui.blue.inverted.range.basic .inner .thumb:hover { .ui.blue.inverted.range.basic .inner .thumb:hover {
background-color: @lightBlueHover;
background-color: @lightBlueHover;
} }
/* Violet */ /* Violet */
.ui.violet.inverted.range.basic .inner .thumb { .ui.violet.inverted.range.basic .inner .thumb {
background-color: @lightViolet;
background-color: @lightViolet;
} }
.ui.violet.inverted.range.basic .inner .thumb:hover { .ui.violet.inverted.range.basic .inner .thumb:hover {
background-color: @lightVioletHover;
background-color: @lightVioletHover;
} }
/* Purple */ /* Purple */
.ui.purple.inverted.range.basic .inner .thumb { .ui.purple.inverted.range.basic .inner .thumb {
background-color: @lightPurple;
background-color: @lightPurple;
} }
.ui.purple.inverted.range.basic .inner .thumb:hover { .ui.purple.inverted.range.basic .inner .thumb:hover {
background-color: @lightPurpleHover;
background-color: @lightPurpleHover;
} }
/* Pink */ /* Pink */
.ui.pink.inverted.range.basic .inner .thumb { .ui.pink.inverted.range.basic .inner .thumb {
background-color: @lightPink;
background-color: @lightPink;
} }
.ui.pink.inverted.range.basic .inner .thumb:hover { .ui.pink.inverted.range.basic .inner .thumb:hover {
background-color: @lightPinkHover;
background-color: @lightPinkHover;
} }
/* Brown */ /* Brown */
.ui.brown.inverted.range.basic .inner .thumb { .ui.brown.inverted.range.basic .inner .thumb {
background-color: @lightBrown;
background-color: @lightBrown;
} }
.ui.brown.inverted.range.basic .inner .thumb:hover { .ui.brown.inverted.range.basic .inner .thumb:hover {
background-color: @lightBrownHover;
background-color: @lightBrownHover;
} }
/* Grey */ /* Grey */
.ui.grey.inverted.range.basic .inner .thumb { .ui.grey.inverted.range.basic .inner .thumb {
background-color: @lightGrey;
background-color: @lightGrey;
} }
.ui.grey.inverted.range.basic .inner .thumb:hover { .ui.grey.inverted.range.basic .inner .thumb:hover {
background-color: @lightGreyHover;
background-color: @lightGreyHover;
} }
/* Black */ /* Black */
.ui.black.inverted.range.basic .inner .thumb { .ui.black.inverted.range.basic .inner .thumb {
background-color: @lightBlack;
background-color: @lightBlack;
} }
.ui.black.inverted.range.basic .inner .thumb:hover { .ui.black.inverted.range.basic .inner .thumb:hover {
background-color: @lightBlackHover;
background-color: @lightBlackHover;
} }
/*-------------- /*--------------

Write Preview
Loading…
Cancel
Save