replace zxq.co/ripple/hanayo
This commit is contained in:
Alicia
3427
semantic/src/definitions/elements/button.less
Normal file
3427
semantic/src/definitions/elements/button.less
Normal file
File diff suppressed because it is too large
Load Diff
143
semantic/src/definitions/elements/container.less
Normal file
143
semantic/src/definitions/elements/container.less
Normal file
@@ -0,0 +1,143 @@
|
||||
/*!
|
||||
* # Semantic UI - Container
|
||||
* http://github.com/semantic-org/semantic-ui/
|
||||
*
|
||||
*
|
||||
* Released under the MIT license
|
||||
* http://opensource.org/licenses/MIT
|
||||
*
|
||||
*/
|
||||
|
||||
/*******************************
|
||||
Theme
|
||||
*******************************/
|
||||
|
||||
@type : 'element';
|
||||
@element : 'container';
|
||||
|
||||
@import (multiple) '../../theme.config';
|
||||
|
||||
/*******************************
|
||||
Container
|
||||
*******************************/
|
||||
|
||||
/* All Sizes */
|
||||
.ui.container {
|
||||
display: block;
|
||||
max-width: @maxWidth !important;
|
||||
}
|
||||
|
||||
/* Mobile */
|
||||
@media only screen and (max-width: @largestMobileScreen) {
|
||||
.ui.container {
|
||||
width: @mobileWidth !important;
|
||||
margin-left: @mobileGutter !important;
|
||||
margin-right: @mobileGutter !important;
|
||||
}
|
||||
.ui.grid.container {
|
||||
width: @mobileGridWidth !important;
|
||||
}
|
||||
.ui.relaxed.grid.container {
|
||||
width: @mobileRelaxedGridWidth !important;
|
||||
}
|
||||
.ui.very.relaxed.grid.container {
|
||||
width: @mobileVeryRelaxedGridWidth !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Tablet */
|
||||
@media only screen and (min-width: @tabletBreakpoint) and (max-width: @largestTabletScreen) {
|
||||
.ui.container {
|
||||
width: @tabletWidth;
|
||||
margin-left: @tabletGutter !important;
|
||||
margin-right: @tabletGutter !important;
|
||||
}
|
||||
.ui.grid.container {
|
||||
width: @tabletGridWidth !important;
|
||||
}
|
||||
.ui.relaxed.grid.container {
|
||||
width: @tabletRelaxedGridWidth !important;
|
||||
}
|
||||
.ui.very.relaxed.grid.container {
|
||||
width: @tabletVeryRelaxedGridWidth !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Small Monitor */
|
||||
@media only screen and (min-width: @computerBreakpoint) and (max-width: @largestSmallMonitor) {
|
||||
.ui.container {
|
||||
width: @computerWidth;
|
||||
margin-left: @computerGutter !important;
|
||||
margin-right: @computerGutter !important;
|
||||
}
|
||||
.ui.grid.container {
|
||||
width: @computerGridWidth !important;
|
||||
}
|
||||
.ui.relaxed.grid.container {
|
||||
width: @computerRelaxedGridWidth !important;
|
||||
}
|
||||
.ui.very.relaxed.grid.container {
|
||||
width: @computerVeryRelaxedGridWidth !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Large Monitor */
|
||||
@media only screen and (min-width: @largeMonitorBreakpoint) {
|
||||
.ui.container {
|
||||
width: @largeMonitorWidth;
|
||||
margin-left: @largeMonitorGutter !important;
|
||||
margin-right: @largeMonitorGutter !important;
|
||||
}
|
||||
.ui.grid.container {
|
||||
width: @largeMonitorGridWidth !important;
|
||||
}
|
||||
.ui.relaxed.grid.container {
|
||||
width: @largeMonitorRelaxedGridWidth !important;
|
||||
}
|
||||
.ui.very.relaxed.grid.container {
|
||||
width: @largeMonitorVeryRelaxedGridWidth !important;
|
||||
}
|
||||
}
|
||||
|
||||
/*******************************
|
||||
Types
|
||||
*******************************/
|
||||
|
||||
|
||||
/* Text Container */
|
||||
.ui.text.container {
|
||||
font-family: @textFontFamily;
|
||||
max-width: @textWidth !important;
|
||||
line-height: @textLineHeight;
|
||||
}
|
||||
|
||||
.ui.text.container {
|
||||
font-size: @textSize;
|
||||
}
|
||||
|
||||
/* Fluid */
|
||||
.ui.fluid.container {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
/*******************************
|
||||
Variations
|
||||
*******************************/
|
||||
|
||||
.ui[class*="left aligned"].container {
|
||||
text-align: left;
|
||||
}
|
||||
.ui[class*="center aligned"].container {
|
||||
text-align: center;
|
||||
}
|
||||
.ui[class*="right aligned"].container {
|
||||
text-align: right;
|
||||
}
|
||||
.ui.justified.container {
|
||||
text-align: justify;
|
||||
hyphens: auto;
|
||||
}
|
||||
|
||||
|
||||
.loadUIOverrides();
|
||||
255
semantic/src/definitions/elements/divider.less
Normal file
255
semantic/src/definitions/elements/divider.less
Normal file
@@ -0,0 +1,255 @@
|
||||
/*!
|
||||
* # Semantic UI - Divider
|
||||
* http://github.com/semantic-org/semantic-ui/
|
||||
*
|
||||
*
|
||||
* Released under the MIT license
|
||||
* http://opensource.org/licenses/MIT
|
||||
*
|
||||
*/
|
||||
|
||||
/*******************************
|
||||
Theme
|
||||
*******************************/
|
||||
|
||||
@type : 'element';
|
||||
@element : 'divider';
|
||||
|
||||
@import (multiple) '../../theme.config';
|
||||
|
||||
|
||||
/*******************************
|
||||
Divider
|
||||
*******************************/
|
||||
|
||||
.ui.divider {
|
||||
margin: @margin;
|
||||
|
||||
line-height: 1;
|
||||
height: 0em;
|
||||
|
||||
font-weight: @fontWeight;
|
||||
text-transform: @textTransform;
|
||||
letter-spacing: @letterSpacing;
|
||||
color: @color;
|
||||
|
||||
user-select: none;
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
/*--------------
|
||||
Basic
|
||||
---------------*/
|
||||
|
||||
.ui.divider:not(.vertical):not(.horizontal) {
|
||||
border-top: @shadowWidth solid @shadowColor;
|
||||
border-bottom: @highlightWidth solid @highlightColor;
|
||||
}
|
||||
|
||||
/*--------------
|
||||
Coupling
|
||||
---------------*/
|
||||
|
||||
/* Allow divider between each column row */
|
||||
.ui.grid > .column + .divider,
|
||||
.ui.grid > .row > .column + .divider {
|
||||
left: auto;
|
||||
}
|
||||
|
||||
/*--------------
|
||||
Horizontal
|
||||
---------------*/
|
||||
|
||||
.ui.horizontal.divider {
|
||||
display: table;
|
||||
white-space: nowrap;
|
||||
|
||||
height: auto;
|
||||
margin: @horizontalMargin;
|
||||
line-height: 1;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.ui.horizontal.divider:before,
|
||||
.ui.horizontal.divider:after {
|
||||
content: '';
|
||||
display: table-cell;
|
||||
position: relative;
|
||||
top: 50%;
|
||||
width: 50%;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.ui.horizontal.divider:before {
|
||||
background-position: right @horizontalDividerMargin top 50%;
|
||||
}
|
||||
.ui.horizontal.divider:after {
|
||||
background-position: left @horizontalDividerMargin top 50%;
|
||||
}
|
||||
|
||||
/*--------------
|
||||
Vertical
|
||||
---------------*/
|
||||
|
||||
.ui.vertical.divider {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
|
||||
margin: 0rem;
|
||||
padding: 0em;
|
||||
width: auto;
|
||||
height: 50%;
|
||||
|
||||
line-height: 0em;
|
||||
text-align: center;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.ui.vertical.divider:before,
|
||||
.ui.vertical.divider:after {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
content: '';
|
||||
z-index: 3;
|
||||
|
||||
border-left: @shadowWidth solid @shadowColor;
|
||||
border-right: @highlightWidth solid @highlightColor;
|
||||
|
||||
width: 0%;
|
||||
height: @verticalDividerHeight;
|
||||
}
|
||||
|
||||
.ui.vertical.divider:before {
|
||||
top: -100%;
|
||||
}
|
||||
.ui.vertical.divider:after {
|
||||
top: auto;
|
||||
bottom: 0px;
|
||||
}
|
||||
|
||||
/* Inside grid */
|
||||
@media only screen and (max-width : @largestMobileScreen) {
|
||||
|
||||
.ui.stackable.grid .ui.vertical.divider,
|
||||
.ui.grid .stackable.row .ui.vertical.divider {
|
||||
display: table;
|
||||
white-space: nowrap;
|
||||
height: auto;
|
||||
margin: @horizontalMargin;
|
||||
overflow: hidden;
|
||||
line-height: 1;
|
||||
text-align: center;
|
||||
position: static;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.ui.stackable.grid .ui.vertical.divider:before,
|
||||
.ui.grid .stackable.row .ui.vertical.divider:before,
|
||||
.ui.stackable.grid .ui.vertical.divider:after,
|
||||
.ui.grid .stackable.row .ui.vertical.divider:after {
|
||||
position: static;
|
||||
left: 0;
|
||||
border-left: none;
|
||||
border-right: none;
|
||||
content: '';
|
||||
display: table-cell;
|
||||
position: relative;
|
||||
top: 50%;
|
||||
width: 50%;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.ui.stackable.grid .ui.vertical.divider:before,
|
||||
.ui.grid .stackable.row .ui.vertical.divider:before {
|
||||
background-position: right @horizontalDividerMargin top 50%;
|
||||
}
|
||||
.ui.stackable.grid .ui.vertical.divider:after,
|
||||
.ui.grid .stackable.row .ui.vertical.divider:after {
|
||||
background-position: left @horizontalDividerMargin top 50%;
|
||||
}
|
||||
}
|
||||
|
||||
/*--------------
|
||||
Icon
|
||||
---------------*/
|
||||
|
||||
.ui.divider > .icon {
|
||||
margin: @dividerIconMargin;
|
||||
font-size: @dividerIconSize;
|
||||
height: 1em;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
/*******************************
|
||||
Variations
|
||||
*******************************/
|
||||
|
||||
/*--------------
|
||||
Hidden
|
||||
---------------*/
|
||||
|
||||
.ui.hidden.divider {
|
||||
border-color: transparent !important;
|
||||
}
|
||||
.ui.hidden.divider:before,
|
||||
.ui.hidden.divider:after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/*--------------
|
||||
Inverted
|
||||
---------------*/
|
||||
|
||||
.ui.divider.inverted,
|
||||
.ui.vertical.inverted.divider,
|
||||
.ui.horizontal.inverted.divider {
|
||||
color: @invertedTextColor;
|
||||
}
|
||||
.ui.divider.inverted,
|
||||
.ui.divider.inverted:after,
|
||||
.ui.divider.inverted:before {
|
||||
border-top-color: @invertedShadowColor !important;
|
||||
border-left-color: @invertedShadowColor !important;
|
||||
border-bottom-color: @invertedHighlightColor !important;
|
||||
border-right-color: @invertedHighlightColor !important;
|
||||
}
|
||||
|
||||
/*--------------
|
||||
Fitted
|
||||
---------------*/
|
||||
|
||||
.ui.fitted.divider {
|
||||
margin: 0em;
|
||||
}
|
||||
|
||||
/*--------------
|
||||
Clearing
|
||||
---------------*/
|
||||
|
||||
.ui.clearing.divider {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
/*--------------
|
||||
Section
|
||||
---------------*/
|
||||
|
||||
.ui.section.divider {
|
||||
margin-top: @sectionMargin;
|
||||
margin-bottom: @sectionMargin;
|
||||
}
|
||||
|
||||
/*--------------
|
||||
Sizes
|
||||
---------------*/
|
||||
|
||||
.ui.divider {
|
||||
font-size: @medium;
|
||||
}
|
||||
|
||||
|
||||
.loadUIOverrides();
|
||||
52
semantic/src/definitions/elements/flag.less
Normal file
52
semantic/src/definitions/elements/flag.less
Normal file
@@ -0,0 +1,52 @@
|
||||
/*!
|
||||
* # Semantic UI - Flag
|
||||
* http://github.com/semantic-org/semantic-ui/
|
||||
*
|
||||
*
|
||||
* Released under the MIT license
|
||||
* http://opensource.org/licenses/MIT
|
||||
*
|
||||
*/
|
||||
|
||||
|
||||
/*******************************
|
||||
Theme
|
||||
*******************************/
|
||||
|
||||
@type : 'element';
|
||||
@element : 'flag';
|
||||
|
||||
@import (multiple) '../../theme.config';
|
||||
|
||||
|
||||
/*******************************
|
||||
Flag
|
||||
*******************************/
|
||||
|
||||
i.flag:not(.icon) {
|
||||
display: inline-block;
|
||||
|
||||
width: @width;
|
||||
height: @height;
|
||||
|
||||
line-height: @height;
|
||||
vertical-align: @verticalAlign;
|
||||
margin: 0em @margin 0em 0em;
|
||||
|
||||
text-decoration: inherit;
|
||||
|
||||
speak: none;
|
||||
font-smoothing: antialiased;
|
||||
backface-visibility: hidden;
|
||||
}
|
||||
|
||||
/* Sprite */
|
||||
i.flag:not(.icon):before {
|
||||
display: inline-block;
|
||||
content: '';
|
||||
background: url(@spritePath) no-repeat -108px -1976px;
|
||||
width: @width;
|
||||
height: @height;
|
||||
}
|
||||
|
||||
.loadUIOverrides();
|
||||
708
semantic/src/definitions/elements/header.less
Normal file
708
semantic/src/definitions/elements/header.less
Normal file
@@ -0,0 +1,708 @@
|
||||
/*!
|
||||
* # Semantic UI - Header
|
||||
* http://github.com/semantic-org/semantic-ui/
|
||||
*
|
||||
*
|
||||
* Released under the MIT license
|
||||
* http://opensource.org/licenses/MIT
|
||||
*
|
||||
*/
|
||||
|
||||
|
||||
/*******************************
|
||||
Theme
|
||||
*******************************/
|
||||
|
||||
@type : 'element';
|
||||
@element : 'header';
|
||||
|
||||
@import (multiple) '../../theme.config';
|
||||
|
||||
|
||||
/*******************************
|
||||
Header
|
||||
*******************************/
|
||||
|
||||
/* Standard */
|
||||
.ui.header {
|
||||
border: none;
|
||||
margin: @margin;
|
||||
padding: @verticalPadding @horizontalPadding;
|
||||
font-family: @fontFamily;
|
||||
font-weight: @fontWeight;
|
||||
line-height: @lineHeight;
|
||||
text-transform: @textTransform;
|
||||
color: @textColor;
|
||||
}
|
||||
|
||||
.ui.header:first-child {
|
||||
margin-top: @firstMargin;
|
||||
}
|
||||
.ui.header:last-child {
|
||||
margin-bottom: @lastMargin;
|
||||
}
|
||||
|
||||
/*--------------
|
||||
Sub Header
|
||||
---------------*/
|
||||
|
||||
.ui.header .sub.header {
|
||||
display: block;
|
||||
font-weight: normal;
|
||||
padding: 0em;
|
||||
margin: @subHeaderMargin;
|
||||
font-size: @subHeaderFontSize;
|
||||
line-height: @subHeaderLineHeight;
|
||||
color: @subHeaderColor;
|
||||
}
|
||||
|
||||
/*--------------
|
||||
Icon
|
||||
---------------*/
|
||||
|
||||
.ui.header > .icon {
|
||||
display: table-cell;
|
||||
opacity: @iconOpacity;
|
||||
font-size: @iconSize;
|
||||
padding-top: @iconOffset;
|
||||
vertical-align: @iconAlignment;
|
||||
}
|
||||
|
||||
/* With Text Node */
|
||||
.ui.header .icon:only-child {
|
||||
display: inline-block;
|
||||
padding: 0em;
|
||||
margin-right: @iconMargin;
|
||||
}
|
||||
|
||||
/*-------------------
|
||||
Image
|
||||
--------------------*/
|
||||
|
||||
.ui.header > .image,
|
||||
.ui.header > img {
|
||||
display: inline-block;
|
||||
margin-top: @imageOffset;
|
||||
width: @imageWidth;
|
||||
height: @imageHeight;
|
||||
vertical-align: @imageAlignment;
|
||||
}
|
||||
.ui.header > .image:only-child,
|
||||
.ui.header > img:only-child {
|
||||
margin-right: @imageMargin;
|
||||
}
|
||||
|
||||
/*--------------
|
||||
Content
|
||||
---------------*/
|
||||
|
||||
.ui.header .content {
|
||||
display: inline-block;
|
||||
vertical-align: @contentAlignment;
|
||||
}
|
||||
|
||||
/* After Image */
|
||||
.ui.header > img + .content,
|
||||
.ui.header > .image + .content {
|
||||
padding-left: @imageMargin;
|
||||
vertical-align: @contentImageAlignment;
|
||||
}
|
||||
|
||||
/* After Icon */
|
||||
.ui.header > .icon + .content {
|
||||
padding-left: @iconMargin;
|
||||
display: table-cell;
|
||||
vertical-align: @contentIconAlignment;
|
||||
}
|
||||
|
||||
|
||||
/*--------------
|
||||
Loose Coupling
|
||||
---------------*/
|
||||
|
||||
.ui.header .ui.label {
|
||||
font-size: @labelSize;
|
||||
margin-left: @labelDistance;
|
||||
vertical-align: @labelVerticalAlign;
|
||||
}
|
||||
|
||||
/* Positioning */
|
||||
.ui.header + p {
|
||||
margin-top: @nextParagraphDistance;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*******************************
|
||||
Types
|
||||
*******************************/
|
||||
|
||||
|
||||
/*--------------
|
||||
Page
|
||||
---------------*/
|
||||
|
||||
h1.ui.header {
|
||||
font-size: @h1;
|
||||
}
|
||||
h2.ui.header {
|
||||
font-size: @h2;
|
||||
}
|
||||
h3.ui.header {
|
||||
font-size: @h3;
|
||||
}
|
||||
h4.ui.header {
|
||||
font-size: @h4;
|
||||
}
|
||||
h5.ui.header {
|
||||
font-size: @h5;
|
||||
}
|
||||
|
||||
|
||||
/* Sub Header */
|
||||
h1.ui.header .sub.header {
|
||||
font-size: @h1SubHeaderFontSize;
|
||||
}
|
||||
h2.ui.header .sub.header {
|
||||
font-size: @h2SubHeaderFontSize;
|
||||
}
|
||||
h3.ui.header .sub.header {
|
||||
font-size: @h3SubHeaderFontSize;
|
||||
}
|
||||
h4.ui.header .sub.header {
|
||||
font-size: @h4SubHeaderFontSize;
|
||||
}
|
||||
h5.ui.header .sub.header {
|
||||
font-size: @h5SubHeaderFontSize;
|
||||
}
|
||||
|
||||
|
||||
/*--------------
|
||||
Content Heading
|
||||
---------------*/
|
||||
|
||||
.ui.huge.header {
|
||||
min-height: 1em;
|
||||
font-size: @hugeFontSize;
|
||||
}
|
||||
.ui.large.header {
|
||||
font-size: @largeFontSize;
|
||||
}
|
||||
.ui.medium.header {
|
||||
font-size: @mediumFontSize;
|
||||
}
|
||||
.ui.small.header {
|
||||
font-size: @smallFontSize;
|
||||
}
|
||||
.ui.tiny.header {
|
||||
font-size: @tinyFontSize;
|
||||
}
|
||||
|
||||
/* Sub Header */
|
||||
.ui.huge.header .sub.header {
|
||||
font-size: @hugeSubHeaderFontSize;
|
||||
}
|
||||
.ui.large.header .sub.header {
|
||||
font-size: @hugeSubHeaderFontSize;
|
||||
}
|
||||
.ui.header .sub.header {
|
||||
font-size: @subHeaderFontSize;
|
||||
}
|
||||
.ui.small.header .sub.header {
|
||||
font-size: @smallSubHeaderFontSize;
|
||||
}
|
||||
.ui.tiny.header .sub.header {
|
||||
font-size: @tinySubHeaderFontSize;
|
||||
}
|
||||
|
||||
/*--------------
|
||||
Sub Heading
|
||||
---------------*/
|
||||
|
||||
.ui.sub.header {
|
||||
padding: 0em;
|
||||
margin-bottom: @subHeadingDistance;
|
||||
font-weight: @subHeadingFontWeight;
|
||||
font-size: @subHeadingFontSize;
|
||||
text-transform: @subHeadingTextTransform;
|
||||
color: @subHeadingColor;
|
||||
}
|
||||
|
||||
.ui.small.sub.header {
|
||||
font-size: @smallSubHeadingSize;
|
||||
}
|
||||
.ui.sub.header {
|
||||
font-size: @subHeadingFontSize;
|
||||
}
|
||||
.ui.large.sub.header {
|
||||
font-size: @largeSubHeadingSize;
|
||||
}
|
||||
.ui.huge.sub.header {
|
||||
font-size: @hugeSubHeadingSize;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*-------------------
|
||||
Icon
|
||||
--------------------*/
|
||||
|
||||
.ui.icon.header {
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
margin: @iconHeaderTopMargin 0em @iconHeaderBottomMargin;
|
||||
}
|
||||
.ui.icon.header:after {
|
||||
content: '';
|
||||
display: block;
|
||||
height: 0px;
|
||||
clear: both;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.ui.icon.header:first-child {
|
||||
margin-top: @iconHeaderFirstMargin;
|
||||
}
|
||||
.ui.icon.header .icon {
|
||||
float: none;
|
||||
display: block;
|
||||
width: auto;
|
||||
height: auto;
|
||||
line-height: 1;
|
||||
padding: 0em;
|
||||
font-size: @iconHeaderSize;
|
||||
margin: 0em auto @iconHeaderMargin;
|
||||
opacity: @iconHeaderOpacity;
|
||||
}
|
||||
.ui.icon.header .content {
|
||||
display: block;
|
||||
padding: 0em;
|
||||
}
|
||||
.ui.icon.header .circular.icon {
|
||||
font-size: @circularHeaderIconSize;
|
||||
}
|
||||
.ui.icon.header .square.icon {
|
||||
font-size: @squareHeaderIconSize;
|
||||
}
|
||||
.ui.block.icon.header .icon {
|
||||
margin-bottom: 0em;
|
||||
}
|
||||
.ui.icon.header.aligned {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/*******************************
|
||||
States
|
||||
*******************************/
|
||||
|
||||
.ui.disabled.header {
|
||||
opacity: @disabledOpacity;
|
||||
}
|
||||
|
||||
|
||||
/*******************************
|
||||
Variations
|
||||
*******************************/
|
||||
|
||||
/*-------------------
|
||||
Inverted
|
||||
--------------------*/
|
||||
|
||||
.ui.inverted.header {
|
||||
color: @invertedColor;
|
||||
}
|
||||
.ui.inverted.header .sub.header {
|
||||
color: @invertedSubHeaderColor;
|
||||
}
|
||||
.ui.inverted.attached.header {
|
||||
background: @invertedAttachedBackground;
|
||||
box-shadow: none;
|
||||
border-color: transparent;
|
||||
}
|
||||
.ui.inverted.block.header {
|
||||
background: @invertedBlockBackground;
|
||||
box-shadow: none;
|
||||
}
|
||||
.ui.inverted.block.header {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
|
||||
/*-------------------
|
||||
Colors
|
||||
--------------------*/
|
||||
|
||||
/*--- Red ---*/
|
||||
.ui.red.header {
|
||||
color: @red !important;
|
||||
}
|
||||
a.ui.red.header:hover {
|
||||
color: @redHover !important;
|
||||
}
|
||||
.ui.red.dividing.header {
|
||||
border-bottom: @dividedColoredBorderWidth solid @red;
|
||||
}
|
||||
|
||||
/* Inverted */
|
||||
.ui.inverted.red.header {
|
||||
color: @lightRed !important;
|
||||
}
|
||||
a.ui.inverted.red.header:hover {
|
||||
color: @lightRedHover !important;
|
||||
}
|
||||
|
||||
/*--- Orange ---*/
|
||||
.ui.orange.header {
|
||||
color: @orange !important;
|
||||
}
|
||||
a.ui.orange.header:hover {
|
||||
color: @orangeHover !important;
|
||||
}
|
||||
.ui.orange.dividing.header {
|
||||
border-bottom: @dividedColoredBorderWidth solid @orange;
|
||||
}
|
||||
/* Inverted */
|
||||
.ui.inverted.orange.header {
|
||||
color: @lightOrange !important;
|
||||
}
|
||||
a.ui.inverted.orange.header:hover {
|
||||
color: @lightOrangeHover !important;
|
||||
}
|
||||
|
||||
/*--- Olive ---*/
|
||||
.ui.olive.header {
|
||||
color: @olive !important;
|
||||
}
|
||||
a.ui.olive.header:hover {
|
||||
color: @oliveHover !important;
|
||||
}
|
||||
.ui.olive.dividing.header {
|
||||
border-bottom: @dividedColoredBorderWidth solid @olive;
|
||||
}
|
||||
/* Inverted */
|
||||
.ui.inverted.olive.header {
|
||||
color: @lightOlive !important;
|
||||
}
|
||||
a.ui.inverted.olive.header:hover {
|
||||
color: @lightOliveHover !important;
|
||||
}
|
||||
|
||||
/*--- Yellow ---*/
|
||||
.ui.yellow.header {
|
||||
color: @yellow !important;
|
||||
}
|
||||
a.ui.yellow.header:hover {
|
||||
color: @yellowHover !important;
|
||||
}
|
||||
.ui.yellow.dividing.header {
|
||||
border-bottom: @dividedColoredBorderWidth solid @yellow;
|
||||
}
|
||||
/* Inverted */
|
||||
.ui.inverted.yellow.header {
|
||||
color: @lightYellow !important;
|
||||
}
|
||||
a.ui.inverted.yellow.header:hover {
|
||||
color: @lightYellowHover !important;
|
||||
}
|
||||
|
||||
/*--- Green ---*/
|
||||
.ui.green.header {
|
||||
color: @green !important;
|
||||
}
|
||||
a.ui.green.header:hover {
|
||||
color: @greenHover !important;
|
||||
}
|
||||
.ui.green.dividing.header {
|
||||
border-bottom: @dividedColoredBorderWidth solid @green;
|
||||
}
|
||||
/* Inverted */
|
||||
.ui.inverted.green.header {
|
||||
color: @lightGreen !important;
|
||||
}
|
||||
a.ui.inverted.green.header:hover {
|
||||
color: @lightGreenHover !important;
|
||||
}
|
||||
|
||||
/*--- Teal ---*/
|
||||
.ui.teal.header {
|
||||
color: @teal !important;
|
||||
}
|
||||
a.ui.teal.header:hover {
|
||||
color: @tealHover !important;
|
||||
}
|
||||
.ui.teal.dividing.header {
|
||||
border-bottom: @dividedColoredBorderWidth solid @teal;
|
||||
}
|
||||
/* Inverted */
|
||||
.ui.inverted.teal.header {
|
||||
color: @lightTeal !important;
|
||||
}
|
||||
a.ui.inverted.teal.header:hover {
|
||||
color: @lightTealHover !important;
|
||||
}
|
||||
|
||||
/*--- Blue ---*/
|
||||
.ui.blue.header {
|
||||
color: @blue !important;
|
||||
}
|
||||
a.ui.blue.header:hover {
|
||||
color: @blueHover !important;
|
||||
}
|
||||
.ui.blue.dividing.header {
|
||||
border-bottom: @dividedColoredBorderWidth solid @blue;
|
||||
}
|
||||
/* Inverted */
|
||||
.ui.inverted.blue.header {
|
||||
color: @lightBlue !important;
|
||||
}
|
||||
a.ui.inverted.blue.header:hover {
|
||||
color: @lightBlueHover !important;
|
||||
}
|
||||
|
||||
/*--- Violet ---*/
|
||||
.ui.violet.header {
|
||||
color: @violet !important;
|
||||
}
|
||||
a.ui.violet.header:hover {
|
||||
color: @violetHover !important;
|
||||
}
|
||||
.ui.violet.dividing.header {
|
||||
border-bottom: @dividedColoredBorderWidth solid @violet;
|
||||
}
|
||||
/* Inverted */
|
||||
.ui.inverted.violet.header {
|
||||
color: @lightViolet !important;
|
||||
}
|
||||
a.ui.inverted.violet.header:hover {
|
||||
color: @lightVioletHover !important;
|
||||
}
|
||||
|
||||
/*--- Purple ---*/
|
||||
.ui.purple.header {
|
||||
color: @purple !important;
|
||||
}
|
||||
a.ui.purple.header:hover {
|
||||
color: @purpleHover !important;
|
||||
}
|
||||
.ui.purple.dividing.header {
|
||||
border-bottom: @dividedColoredBorderWidth solid @purple;
|
||||
}
|
||||
/* Inverted */
|
||||
.ui.inverted.purple.header {
|
||||
color: @lightPurple !important;
|
||||
}
|
||||
a.ui.inverted.purple.header:hover {
|
||||
color: @lightPurpleHover !important;
|
||||
}
|
||||
|
||||
/*--- Pink ---*/
|
||||
.ui.pink.header {
|
||||
color: @pink !important;
|
||||
}
|
||||
a.ui.pink.header:hover {
|
||||
color: @pinkHover !important;
|
||||
}
|
||||
.ui.pink.dividing.header {
|
||||
border-bottom: @dividedColoredBorderWidth solid @pink;
|
||||
}
|
||||
/* Inverted */
|
||||
.ui.inverted.pink.header {
|
||||
color: @lightPink !important;
|
||||
}
|
||||
a.ui.inverted.pink.header:hover {
|
||||
color: @lightPinkHover !important;
|
||||
}
|
||||
|
||||
/*--- Brown ---*/
|
||||
.ui.brown.header {
|
||||
color: @brown !important;
|
||||
}
|
||||
a.ui.brown.header:hover {
|
||||
color: @brownHover !important;
|
||||
}
|
||||
.ui.brown.dividing.header {
|
||||
border-bottom: @dividedColoredBorderWidth solid @brown;
|
||||
}
|
||||
/* Inverted */
|
||||
.ui.inverted.brown.header {
|
||||
color: @lightBrown !important;
|
||||
}
|
||||
a.ui.inverted.brown.header:hover {
|
||||
color: @lightBrownHover !important;
|
||||
}
|
||||
|
||||
/*--- Grey ---*/
|
||||
.ui.grey.header {
|
||||
color: @grey !important;
|
||||
}
|
||||
a.ui.grey.header:hover {
|
||||
color: @greyHover !important;
|
||||
}
|
||||
.ui.grey.dividing.header {
|
||||
border-bottom: @dividedColoredBorderWidth solid @grey;
|
||||
}
|
||||
/* Inverted */
|
||||
.ui.inverted.grey.header {
|
||||
color: @lightGrey !important;
|
||||
}
|
||||
a.ui.inverted.grey.header:hover {
|
||||
color: @lightGreyHover !important;
|
||||
}
|
||||
|
||||
|
||||
/*-------------------
|
||||
Aligned
|
||||
--------------------*/
|
||||
|
||||
.ui.left.aligned.header {
|
||||
text-align: left;
|
||||
}
|
||||
.ui.right.aligned.header {
|
||||
text-align: right;
|
||||
}
|
||||
.ui.centered.header,
|
||||
.ui.center.aligned.header {
|
||||
text-align: center;
|
||||
}
|
||||
.ui.justified.header {
|
||||
text-align: justify;
|
||||
}
|
||||
.ui.justified.header:after {
|
||||
display: inline-block;
|
||||
content: '';
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/*-------------------
|
||||
Floated
|
||||
--------------------*/
|
||||
|
||||
.ui.floated.header,
|
||||
.ui[class*="left floated"].header {
|
||||
float: left;
|
||||
margin-top: 0em;
|
||||
margin-right: @floatedMargin;
|
||||
}
|
||||
.ui[class*="right floated"].header {
|
||||
float: right;
|
||||
margin-top: 0em;
|
||||
margin-left: @floatedMargin;
|
||||
}
|
||||
|
||||
/*-------------------
|
||||
Fitted
|
||||
--------------------*/
|
||||
|
||||
.ui.fitted.header {
|
||||
padding: 0em;
|
||||
}
|
||||
|
||||
|
||||
/*-------------------
|
||||
Dividing
|
||||
--------------------*/
|
||||
|
||||
.ui.dividing.header {
|
||||
padding-bottom: @dividedBorderPadding;
|
||||
border-bottom: @dividedBorder;
|
||||
}
|
||||
.ui.dividing.header .sub.header {
|
||||
padding-bottom: @dividedSubHeaderPadding;
|
||||
}
|
||||
.ui.dividing.header .icon {
|
||||
margin-bottom: @dividedIconPadding;
|
||||
}
|
||||
|
||||
.ui.inverted.dividing.header {
|
||||
border-bottom-color: @invertedDividedBorderColor;
|
||||
}
|
||||
|
||||
|
||||
/*-------------------
|
||||
Block
|
||||
--------------------*/
|
||||
|
||||
.ui.block.header {
|
||||
background: @blockBackground;
|
||||
padding: @blockVerticalPadding @blockHorizontalPadding;
|
||||
box-shadow: @blockBoxShadow;
|
||||
border: @blockBorder;
|
||||
border-radius: @blockBorderRadius;
|
||||
}
|
||||
|
||||
.ui.tiny.block.header {
|
||||
font-size: @tinyBlock;
|
||||
}
|
||||
.ui.small.block.header {
|
||||
font-size: @smallBlock;
|
||||
}
|
||||
.ui.block.header:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) {
|
||||
font-size: @mediumBlock;
|
||||
}
|
||||
.ui.large.block.header {
|
||||
font-size: @largeBlock;
|
||||
}
|
||||
.ui.huge.block.header {
|
||||
font-size: @hugeBlock;
|
||||
}
|
||||
|
||||
/*-------------------
|
||||
Attached
|
||||
--------------------*/
|
||||
|
||||
.ui.attached.header {
|
||||
background: @attachedBackground;
|
||||
padding: @attachedVerticalPadding @attachedHorizontalPadding;
|
||||
margin-left: @attachedOffset;
|
||||
margin-right: @attachedOffset;
|
||||
box-shadow: @attachedBoxShadow;
|
||||
border: @attachedBorder;
|
||||
}
|
||||
.ui.attached.block.header {
|
||||
background: @blockBackground;
|
||||
}
|
||||
|
||||
.ui.attached:not(.top):not(.bottom).header {
|
||||
margin-top: 0em;
|
||||
margin-bottom: 0em;
|
||||
border-top: none;
|
||||
border-radius: 0em;
|
||||
}
|
||||
.ui.top.attached.header {
|
||||
margin-bottom: 0em;
|
||||
border-radius: @attachedBorderRadius @attachedBorderRadius 0em 0em;
|
||||
}
|
||||
.ui.bottom.attached.header {
|
||||
margin-top: 0em;
|
||||
border-top: none;
|
||||
border-radius: 0em 0em @attachedBorderRadius @attachedBorderRadius;
|
||||
}
|
||||
|
||||
/* Attached Sizes */
|
||||
.ui.tiny.attached.header {
|
||||
font-size: @tinyAttachedSize;
|
||||
}
|
||||
.ui.small.attached.header {
|
||||
font-size: @smallAttachedSize;
|
||||
}
|
||||
.ui.attached.header:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) {
|
||||
font-size: @mediumAttachedSize;
|
||||
}
|
||||
.ui.large.attached.header {
|
||||
font-size: @largeAttachedSize;
|
||||
}
|
||||
.ui.huge.attached.header {
|
||||
font-size: @hugeAttachedSize;
|
||||
}
|
||||
|
||||
/*-------------------
|
||||
Sizing
|
||||
--------------------*/
|
||||
|
||||
.ui.header:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) {
|
||||
font-size: @mediumFontSize;
|
||||
}
|
||||
|
||||
.loadUIOverrides();
|
||||
477
semantic/src/definitions/elements/icon.less
Normal file
477
semantic/src/definitions/elements/icon.less
Normal file
@@ -0,0 +1,477 @@
|
||||
/*!
|
||||
* # Semantic UI - Icon
|
||||
* http://github.com/semantic-org/semantic-ui/
|
||||
*
|
||||
*
|
||||
* Released under the MIT license
|
||||
* http://opensource.org/licenses/MIT
|
||||
*
|
||||
*/
|
||||
|
||||
|
||||
/*******************************
|
||||
Theme
|
||||
*******************************/
|
||||
|
||||
@type : 'element';
|
||||
@element : 'icon';
|
||||
|
||||
@import (multiple) '../../theme.config';
|
||||
|
||||
|
||||
/*******************************
|
||||
Icon
|
||||
*******************************/
|
||||
|
||||
@font-face {
|
||||
font-family: 'Icons';
|
||||
src: @fallbackSRC;
|
||||
src: @src;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
font-variant: normal;
|
||||
text-decoration: inherit;
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
i.icon {
|
||||
display: inline-block;
|
||||
opacity: @opacity;
|
||||
|
||||
margin: 0em @distanceFromText 0em 0em;
|
||||
|
||||
width: @width;
|
||||
height: @height;
|
||||
|
||||
font-family: 'Icons';
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
text-decoration: inherit;
|
||||
text-align: center;
|
||||
|
||||
speak: none;
|
||||
font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
backface-visibility: hidden;
|
||||
}
|
||||
|
||||
i.icon:before {
|
||||
background: none !important;
|
||||
}
|
||||
|
||||
/*******************************
|
||||
Types
|
||||
*******************************/
|
||||
|
||||
/*--------------
|
||||
Loading
|
||||
---------------*/
|
||||
|
||||
i.icon.loading {
|
||||
height: 1em;
|
||||
line-height: 1;
|
||||
animation: icon-loading @loadingDuration linear infinite;
|
||||
}
|
||||
@keyframes icon-loading {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
/*******************************
|
||||
States
|
||||
*******************************/
|
||||
|
||||
i.icon.hover {
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
i.icon.active {
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
i.emphasized.icon {
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
i.disabled.icon {
|
||||
opacity: @disabledOpacity !important;
|
||||
}
|
||||
|
||||
|
||||
/*******************************
|
||||
Variations
|
||||
*******************************/
|
||||
|
||||
|
||||
/*-------------------
|
||||
Fitted
|
||||
--------------------*/
|
||||
|
||||
i.fitted.icon {
|
||||
width: auto;
|
||||
margin: 0em;
|
||||
}
|
||||
|
||||
/*-------------------
|
||||
Link
|
||||
--------------------*/
|
||||
|
||||
i.link.icon, i.link.icons {
|
||||
cursor: pointer;
|
||||
opacity: @linkOpacity;
|
||||
transition: opacity @defaultDuration @defaultEasing;
|
||||
}
|
||||
i.link.icon:hover, i.link.icons:hover {
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
/*-------------------
|
||||
Circular
|
||||
--------------------*/
|
||||
|
||||
i.circular.icon {
|
||||
border-radius: 500em !important;
|
||||
line-height: 1 !important;
|
||||
|
||||
padding: @circularPadding !important;
|
||||
box-shadow: @circularShadow;
|
||||
|
||||
width: @circularSize !important;
|
||||
height: @circularSize !important;
|
||||
}
|
||||
i.circular.inverted.icon {
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
/*-------------------
|
||||
Flipped
|
||||
--------------------*/
|
||||
|
||||
i.flipped.icon,
|
||||
i.horizontally.flipped.icon {
|
||||
transform: scale(-1, 1);
|
||||
}
|
||||
i.vertically.flipped.icon {
|
||||
transform: scale(1, -1);
|
||||
}
|
||||
|
||||
/*-------------------
|
||||
Rotated
|
||||
--------------------*/
|
||||
|
||||
i.rotated.icon,
|
||||
i.right.rotated.icon,
|
||||
i.clockwise.rotated.icon {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
i.left.rotated.icon,
|
||||
i.counterclockwise.rotated.icon {
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
|
||||
/*-------------------
|
||||
Bordered
|
||||
--------------------*/
|
||||
|
||||
i.bordered.icon {
|
||||
line-height: 1;
|
||||
vertical-align: baseline;
|
||||
|
||||
width: @borderedSize;
|
||||
height: @borderedSize;
|
||||
padding: @borderedVerticalPadding @borderedHorizontalPadding !important;
|
||||
box-shadow: @borderedShadow;
|
||||
}
|
||||
i.bordered.inverted.icon {
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
/*-------------------
|
||||
Inverted
|
||||
--------------------*/
|
||||
|
||||
/* Inverted Shapes */
|
||||
i.inverted.bordered.icon,
|
||||
i.inverted.circular.icon {
|
||||
background-color: @black !important;
|
||||
color: @white !important;
|
||||
}
|
||||
|
||||
i.inverted.icon {
|
||||
color: @white;
|
||||
}
|
||||
|
||||
|
||||
/*-------------------
|
||||
Colors
|
||||
--------------------*/
|
||||
|
||||
/* Red */
|
||||
i.red.icon {
|
||||
color: @red !important;
|
||||
}
|
||||
i.inverted.red.icon {
|
||||
color: @lightRed !important;
|
||||
}
|
||||
i.inverted.bordered.red.icon,
|
||||
i.inverted.circular.red.icon {
|
||||
background-color: @red !important;
|
||||
color: @white !important;
|
||||
}
|
||||
|
||||
/* Orange */
|
||||
i.orange.icon {
|
||||
color: @orange !important;
|
||||
}
|
||||
i.inverted.orange.icon {
|
||||
color: @lightOrange !important;
|
||||
}
|
||||
i.inverted.bordered.orange.icon,
|
||||
i.inverted.circular.orange.icon {
|
||||
background-color: @orange !important;
|
||||
color: @white !important;
|
||||
}
|
||||
|
||||
/* Yellow */
|
||||
i.yellow.icon {
|
||||
color: @yellow !important;
|
||||
}
|
||||
i.inverted.yellow.icon {
|
||||
color: @lightYellow !important;
|
||||
}
|
||||
i.inverted.bordered.yellow.icon,
|
||||
i.inverted.circular.yellow.icon {
|
||||
background-color: @yellow !important;
|
||||
color: @white !important;
|
||||
}
|
||||
|
||||
/* Olive */
|
||||
i.olive.icon {
|
||||
color: @olive !important;
|
||||
}
|
||||
i.inverted.olive.icon {
|
||||
color: @lightOlive !important;
|
||||
}
|
||||
i.inverted.bordered.olive.icon,
|
||||
i.inverted.circular.olive.icon {
|
||||
background-color: @olive !important;
|
||||
color: @white !important;
|
||||
}
|
||||
|
||||
/* Green */
|
||||
i.green.icon {
|
||||
color: @green !important;
|
||||
}
|
||||
i.inverted.green.icon {
|
||||
color: @lightGreen !important;
|
||||
}
|
||||
i.inverted.bordered.green.icon,
|
||||
i.inverted.circular.green.icon {
|
||||
background-color: @green !important;
|
||||
color: @white !important;
|
||||
}
|
||||
|
||||
/* Teal */
|
||||
i.teal.icon {
|
||||
color: @teal !important;
|
||||
}
|
||||
i.inverted.teal.icon {
|
||||
color: @lightTeal !important;
|
||||
}
|
||||
i.inverted.bordered.teal.icon,
|
||||
i.inverted.circular.teal.icon {
|
||||
background-color: @teal !important;
|
||||
color: @white !important;
|
||||
}
|
||||
|
||||
/* Blue */
|
||||
i.blue.icon {
|
||||
color: @blue !important;
|
||||
}
|
||||
i.inverted.blue.icon {
|
||||
color: @lightBlue !important;
|
||||
}
|
||||
i.inverted.bordered.blue.icon,
|
||||
i.inverted.circular.blue.icon {
|
||||
background-color: @blue !important;
|
||||
color: @white !important;
|
||||
}
|
||||
|
||||
/* Violet */
|
||||
i.violet.icon {
|
||||
color: @violet !important;
|
||||
}
|
||||
i.inverted.violet.icon {
|
||||
color: @lightViolet !important;
|
||||
}
|
||||
i.inverted.bordered.violet.icon,
|
||||
i.inverted.circular.violet.icon {
|
||||
background-color: @violet !important;
|
||||
color: @white !important;
|
||||
}
|
||||
|
||||
/* Purple */
|
||||
i.purple.icon {
|
||||
color: @purple !important;
|
||||
}
|
||||
i.inverted.purple.icon {
|
||||
color: @lightPurple !important;
|
||||
}
|
||||
i.inverted.bordered.purple.icon,
|
||||
i.inverted.circular.purple.icon {
|
||||
background-color: @purple !important;
|
||||
color: @white !important;
|
||||
}
|
||||
|
||||
/* Pink */
|
||||
i.pink.icon {
|
||||
color: @pink !important;
|
||||
}
|
||||
i.inverted.pink.icon {
|
||||
color: @lightPink !important;
|
||||
}
|
||||
i.inverted.bordered.pink.icon,
|
||||
i.inverted.circular.pink.icon {
|
||||
background-color: @pink !important;
|
||||
color: @white !important;
|
||||
}
|
||||
|
||||
/* Brown */
|
||||
i.brown.icon {
|
||||
color: @brown !important;
|
||||
}
|
||||
i.inverted.brown.icon {
|
||||
color: @lightBrown !important;
|
||||
}
|
||||
i.inverted.bordered.brown.icon,
|
||||
i.inverted.circular.brown.icon {
|
||||
background-color: @brown !important;
|
||||
color: @white !important;
|
||||
}
|
||||
|
||||
/* Grey */
|
||||
i.grey.icon {
|
||||
color: @grey !important;
|
||||
}
|
||||
i.inverted.grey.icon {
|
||||
color: @lightGrey !important;
|
||||
}
|
||||
i.inverted.bordered.grey.icon,
|
||||
i.inverted.circular.grey.icon {
|
||||
background-color: @grey !important;
|
||||
color: @white !important;
|
||||
}
|
||||
|
||||
/* Black */
|
||||
i.black.icon {
|
||||
color: @black !important;
|
||||
}
|
||||
i.inverted.black.icon {
|
||||
color: @lightBlack !important;
|
||||
}
|
||||
i.inverted.bordered.black.icon,
|
||||
i.inverted.circular.black.icon {
|
||||
background-color: @black !important;
|
||||
color: @white !important;
|
||||
}
|
||||
|
||||
/*-------------------
|
||||
Sizes
|
||||
--------------------*/
|
||||
|
||||
i.mini.icon,
|
||||
i.mini.icons {
|
||||
line-height: 1;
|
||||
font-size: @mini;
|
||||
}
|
||||
i.tiny.icon,
|
||||
i.tiny.icons {
|
||||
line-height: 1;
|
||||
font-size: @tiny;
|
||||
}
|
||||
i.small.icon,
|
||||
i.small.icons {
|
||||
line-height: 1;
|
||||
font-size: @small;
|
||||
}
|
||||
i.icon,
|
||||
i.icons {
|
||||
font-size: @medium;
|
||||
}
|
||||
i.large.icon,
|
||||
i.large.icons {
|
||||
line-height: 1;
|
||||
vertical-align: middle;
|
||||
font-size: @large;
|
||||
}
|
||||
i.big.icon,
|
||||
i.big.icons {
|
||||
line-height: 1;
|
||||
vertical-align: middle;
|
||||
font-size: @big;
|
||||
}
|
||||
i.huge.icon,
|
||||
i.huge.icons {
|
||||
line-height: 1;
|
||||
vertical-align: middle;
|
||||
font-size: @huge;
|
||||
}
|
||||
i.massive.icon,
|
||||
i.massive.icons {
|
||||
line-height: 1;
|
||||
vertical-align: middle;
|
||||
font-size: @massive;
|
||||
}
|
||||
|
||||
/*******************************
|
||||
Groups
|
||||
*******************************/
|
||||
|
||||
i.icons {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
i.icons .icon {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%) translateY(-50%);
|
||||
margin: 0em;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
i.icons .icon:first-child {
|
||||
position: static;
|
||||
width: auto;
|
||||
height: auto;
|
||||
vertical-align: top;
|
||||
transform: none;
|
||||
margin-right: @distanceFromText;
|
||||
}
|
||||
|
||||
/* Corner Icon */
|
||||
i.icons .corner.icon {
|
||||
top: auto;
|
||||
left: auto;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
transform: none;
|
||||
font-size: @cornerIconSize;
|
||||
text-shadow: @cornerIconShadow;
|
||||
}
|
||||
|
||||
i.icons .inverted.corner.icon {
|
||||
text-shadow: @cornerIconInvertedShadow;
|
||||
}
|
||||
|
||||
.loadUIOverrides();
|
||||
324
semantic/src/definitions/elements/image.less
Normal file
324
semantic/src/definitions/elements/image.less
Normal file
@@ -0,0 +1,324 @@
|
||||
/*!
|
||||
* # Semantic UI - Image
|
||||
* http://github.com/semantic-org/semantic-ui/
|
||||
*
|
||||
*
|
||||
* Released under the MIT license
|
||||
* http://opensource.org/licenses/MIT
|
||||
*
|
||||
*/
|
||||
|
||||
|
||||
/*******************************
|
||||
Theme
|
||||
*******************************/
|
||||
|
||||
@type : 'element';
|
||||
@element : 'image';
|
||||
|
||||
@import (multiple) '../../theme.config';
|
||||
|
||||
|
||||
/*******************************
|
||||
Image
|
||||
*******************************/
|
||||
|
||||
.ui.image {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
max-width: 100%;
|
||||
background-color: @placeholderColor;
|
||||
}
|
||||
|
||||
img.ui.image {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.ui.image svg,
|
||||
.ui.image img {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
|
||||
/*******************************
|
||||
States
|
||||
*******************************/
|
||||
|
||||
.ui.hidden.images,
|
||||
.ui.hidden.image {
|
||||
display: none;
|
||||
}
|
||||
.ui.hidden.transition.images,
|
||||
.ui.hidden.transition.image {
|
||||
display: block;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
|
||||
.ui.disabled.images,
|
||||
.ui.disabled.image {
|
||||
cursor: default;
|
||||
opacity: @disabledOpacity;
|
||||
}
|
||||
|
||||
|
||||
/*******************************
|
||||
Variations
|
||||
*******************************/
|
||||
|
||||
|
||||
/*--------------
|
||||
Inline
|
||||
---------------*/
|
||||
|
||||
.ui.inline.image,
|
||||
.ui.inline.image svg,
|
||||
.ui.inline.image img {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/*------------------
|
||||
Vertical Aligned
|
||||
-------------------*/
|
||||
|
||||
.ui.top.aligned.images .image,
|
||||
.ui.top.aligned.image,
|
||||
.ui.top.aligned.image svg,
|
||||
.ui.top.aligned.image img {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
.ui.middle.aligned.images .image,
|
||||
.ui.middle.aligned.image,
|
||||
.ui.middle.aligned.image svg,
|
||||
.ui.middle.aligned.image img {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.ui.bottom.aligned.images .image,
|
||||
.ui.bottom.aligned.image,
|
||||
.ui.bottom.aligned.image svg,
|
||||
.ui.bottom.aligned.image img {
|
||||
display: inline-block;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
/*--------------
|
||||
Rounded
|
||||
---------------*/
|
||||
|
||||
.ui.rounded.images .image,
|
||||
.ui.rounded.image,
|
||||
.ui.rounded.images .image > *,
|
||||
.ui.rounded.image > * {
|
||||
border-radius: @roundedBorderRadius;
|
||||
}
|
||||
|
||||
/*--------------
|
||||
Bordered
|
||||
---------------*/
|
||||
|
||||
.ui.bordered.images .image,
|
||||
.ui.bordered.images img,
|
||||
.ui.bordered.images svg,
|
||||
.ui.bordered.image img,
|
||||
.ui.bordered.image svg,
|
||||
img.ui.bordered.image {
|
||||
border: @imageBorder;
|
||||
}
|
||||
|
||||
/*--------------
|
||||
Circular
|
||||
---------------*/
|
||||
|
||||
.ui.circular.images,
|
||||
.ui.circular.image {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.ui.circular.images .image,
|
||||
.ui.circular.image,
|
||||
.ui.circular.images .image > *,
|
||||
.ui.circular.image > * {
|
||||
-webkit-border-radius: @circularRadius;
|
||||
-moz-border-radius: @circularRadius;
|
||||
border-radius: @circularRadius;
|
||||
}
|
||||
|
||||
/*--------------
|
||||
Fluid
|
||||
---------------*/
|
||||
|
||||
.ui.fluid.images,
|
||||
.ui.fluid.image,
|
||||
.ui.fluid.images img,
|
||||
.ui.fluid.images svg,
|
||||
.ui.fluid.image svg,
|
||||
.ui.fluid.image img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
|
||||
/*--------------
|
||||
Avatar
|
||||
---------------*/
|
||||
|
||||
.ui.avatar.images .image,
|
||||
.ui.avatar.images img,
|
||||
.ui.avatar.images svg,
|
||||
.ui.avatar.image img,
|
||||
.ui.avatar.image svg,
|
||||
.ui.avatar.image {
|
||||
margin-right: @avatarMargin;
|
||||
|
||||
display: inline-block;
|
||||
width: @avatarSize;
|
||||
height: @avatarSize;
|
||||
|
||||
-webkit-border-radius: @circularRadius;
|
||||
-moz-border-radius: @circularRadius;
|
||||
border-radius: @circularRadius;
|
||||
}
|
||||
|
||||
/*-------------------
|
||||
Spaced
|
||||
--------------------*/
|
||||
|
||||
.ui.spaced.image {
|
||||
display: inline-block !important;
|
||||
margin-left: @spacedDistance;
|
||||
margin-right: @spacedDistance;
|
||||
}
|
||||
|
||||
.ui[class*="left spaced"].image {
|
||||
margin-left: @spacedDistance;
|
||||
margin-right: 0em;
|
||||
}
|
||||
|
||||
.ui[class*="right spaced"].image {
|
||||
margin-left: 0em;
|
||||
margin-right: @spacedDistance;
|
||||
}
|
||||
|
||||
/*-------------------
|
||||
Floated
|
||||
--------------------*/
|
||||
|
||||
.ui.floated.image,
|
||||
.ui.floated.images {
|
||||
float: left;
|
||||
margin-right: @floatedHorizontalMargin;
|
||||
margin-bottom: @floatedVerticalMargin;
|
||||
}
|
||||
.ui.right.floated.images,
|
||||
.ui.right.floated.image {
|
||||
float: right;
|
||||
margin-right: 0em;
|
||||
margin-bottom: @floatedVerticalMargin;
|
||||
margin-left: @floatedHorizontalMargin;
|
||||
}
|
||||
|
||||
.ui.floated.images:last-child,
|
||||
.ui.floated.image:last-child {
|
||||
margin-bottom: 0em;
|
||||
}
|
||||
|
||||
|
||||
.ui.centered.images,
|
||||
.ui.centered.image {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
/*--------------
|
||||
Sizes
|
||||
---------------*/
|
||||
|
||||
.ui.mini.images .image,
|
||||
.ui.mini.images img,
|
||||
.ui.mini.images svg,
|
||||
.ui.mini.image {
|
||||
width: @miniWidth;
|
||||
height: auto;
|
||||
font-size: @mini;
|
||||
}
|
||||
.ui.tiny.images .image,
|
||||
.ui.tiny.images img,
|
||||
.ui.tiny.images svg,
|
||||
.ui.tiny.image {
|
||||
width: @tinyWidth;
|
||||
height: auto;
|
||||
font-size: @tiny;
|
||||
}
|
||||
.ui.small.images .image,
|
||||
.ui.small.images img,
|
||||
.ui.small.images svg,
|
||||
.ui.small.image {
|
||||
width: @smallWidth;
|
||||
height: auto;
|
||||
font-size: @small;
|
||||
}
|
||||
.ui.medium.images .image,
|
||||
.ui.medium.images img,
|
||||
.ui.medium.images svg,
|
||||
.ui.medium.image {
|
||||
width: @mediumWidth;
|
||||
height: auto;
|
||||
font-size: @medium;
|
||||
}
|
||||
.ui.large.images .image,
|
||||
.ui.large.images img,
|
||||
.ui.large.images svg,
|
||||
.ui.large.image {
|
||||
width: @largeWidth;
|
||||
height: auto;
|
||||
font-size: @large;
|
||||
}
|
||||
.ui.big.images .image,
|
||||
.ui.big.images img,
|
||||
.ui.big.images svg,
|
||||
.ui.big.image {
|
||||
width: @bigWidth;
|
||||
height: auto;
|
||||
font-size: @big;
|
||||
}
|
||||
.ui.huge.images .image,
|
||||
.ui.huge.images img,
|
||||
.ui.huge.images svg,
|
||||
.ui.huge.image {
|
||||
width: @hugeWidth;
|
||||
height: auto;
|
||||
font-size: @huge;
|
||||
}
|
||||
.ui.massive.images .image,
|
||||
.ui.massive.images img,
|
||||
.ui.massive.images svg,
|
||||
.ui.massive.image {
|
||||
width: @massiveWidth;
|
||||
height: auto;
|
||||
font-size: @massive;
|
||||
}
|
||||
|
||||
|
||||
/*******************************
|
||||
Groups
|
||||
*******************************/
|
||||
|
||||
.ui.images {
|
||||
font-size: 0em;
|
||||
margin: 0em -@imageHorizontalMargin 0rem;
|
||||
}
|
||||
|
||||
.ui.images .image,
|
||||
.ui.images img,
|
||||
.ui.images svg {
|
||||
display: inline-block;
|
||||
margin: 0em @imageHorizontalMargin @imageVerticalMargin;
|
||||
}
|
||||
|
||||
.loadUIOverrides();
|
||||
507
semantic/src/definitions/elements/input.less
Normal file
507
semantic/src/definitions/elements/input.less
Normal file
@@ -0,0 +1,507 @@
|
||||
/*!
|
||||
* # Semantic UI - Input
|
||||
* http://github.com/semantic-org/semantic-ui/
|
||||
*
|
||||
*
|
||||
* Released under the MIT license
|
||||
* http://opensource.org/licenses/MIT
|
||||
*
|
||||
*/
|
||||
|
||||
/*******************************
|
||||
Theme
|
||||
*******************************/
|
||||
|
||||
@type : 'element';
|
||||
@element : 'input';
|
||||
|
||||
@import (multiple) '../../theme.config';
|
||||
|
||||
|
||||
/*******************************
|
||||
Standard
|
||||
*******************************/
|
||||
|
||||
|
||||
/*--------------------
|
||||
Inputs
|
||||
---------------------*/
|
||||
|
||||
.ui.input {
|
||||
position: relative;
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
display: inline-flex;
|
||||
color: @inputColor;
|
||||
}
|
||||
.ui.input input {
|
||||
margin: 0em;
|
||||
max-width: 100%;
|
||||
flex: 1 0 auto;
|
||||
outline: none;
|
||||
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
|
||||
text-align: @textAlign;
|
||||
line-height: @lineHeight;
|
||||
|
||||
font-family: @inputFont;
|
||||
padding: @padding;
|
||||
|
||||
background: @background;
|
||||
border: @border;
|
||||
color: @inputColor;
|
||||
border-radius: @borderRadius;
|
||||
transition: @transition;
|
||||
|
||||
box-shadow: @boxShadow;
|
||||
}
|
||||
|
||||
|
||||
/*--------------------
|
||||
Placeholder
|
||||
---------------------*/
|
||||
|
||||
/* browsers require these rules separate */
|
||||
|
||||
.ui.input input::-webkit-input-placeholder {
|
||||
color: @placeholderColor;
|
||||
}
|
||||
.ui.input input::-moz-placeholder {
|
||||
color: @placeholderColor;
|
||||
}
|
||||
.ui.input input:-ms-input-placeholder {
|
||||
color: @placeholderColor;
|
||||
}
|
||||
|
||||
|
||||
/*******************************
|
||||
States
|
||||
*******************************/
|
||||
|
||||
/*--------------------
|
||||
Disabled
|
||||
---------------------*/
|
||||
|
||||
.ui.disabled.input,
|
||||
.ui.input input[disabled] {
|
||||
opacity: @disabledOpacity;
|
||||
}
|
||||
|
||||
.ui.disabled.input input,
|
||||
.ui.input input[disabled] {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/*--------------------
|
||||
Active
|
||||
---------------------*/
|
||||
|
||||
.ui.input input:active,
|
||||
.ui.input.down input {
|
||||
border-color: @downBorderColor;
|
||||
background: @downBackground;
|
||||
color: @downColor;
|
||||
box-shadow: @downBoxShadow;
|
||||
}
|
||||
|
||||
/*--------------------
|
||||
Loading
|
||||
---------------------*/
|
||||
|
||||
.ui.loading.loading.input > i.icon:before {
|
||||
position: absolute;
|
||||
content: '';
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
|
||||
margin: @loaderMargin;
|
||||
width: @loaderSize;
|
||||
height: @loaderSize;
|
||||
|
||||
border-radius: @circularRadius;
|
||||
border: @loaderLineWidth solid @loaderFillColor;
|
||||
}
|
||||
.ui.loading.loading.input > i.icon:after {
|
||||
position: absolute;
|
||||
content: '';
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
|
||||
margin: @loaderMargin;
|
||||
width: @loaderSize;
|
||||
height: @loaderSize;
|
||||
|
||||
animation: button-spin @loaderSpeed linear;
|
||||
animation-iteration-count: infinite;
|
||||
|
||||
border-radius: @circularRadius;
|
||||
|
||||
border-color: @loaderLineColor transparent transparent;
|
||||
border-style: solid;
|
||||
border-width: @loaderLineWidth;
|
||||
|
||||
box-shadow: 0px 0px 0px 1px transparent;
|
||||
}
|
||||
|
||||
|
||||
/*--------------------
|
||||
Focus
|
||||
---------------------*/
|
||||
|
||||
.ui.input.focus input,
|
||||
.ui.input input:focus {
|
||||
border-color: @focusBorderColor;
|
||||
background: @focusBackground;
|
||||
color: @focusColor;
|
||||
box-shadow: @focusBoxShadow;
|
||||
}
|
||||
.ui.input.focus input::-webkit-input-placeholder,
|
||||
.ui.input input:focus::-webkit-input-placeholder {
|
||||
color: @placeholderFocusColor;
|
||||
}
|
||||
.ui.input.focus input::-moz-placeholder,
|
||||
.ui.input input:focus::-moz-placeholder {
|
||||
color: @placeholderFocusColor;
|
||||
}
|
||||
.ui.input.focus input:-ms-input-placeholder,
|
||||
.ui.input input:focus:-ms-input-placeholder {
|
||||
color: @placeholderFocusColor;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*--------------------
|
||||
Error
|
||||
---------------------*/
|
||||
|
||||
.ui.input.error input {
|
||||
background-color: @errorBackground;
|
||||
border-color: @errorBorder;
|
||||
color: @errorColor;
|
||||
box-shadow: @errorBoxShadow;
|
||||
}
|
||||
|
||||
/* Error Placeholder */
|
||||
.ui.input.error input::-webkit-input-placeholder {
|
||||
color: @placeholderErrorColor;
|
||||
}
|
||||
.ui.input.error input::-moz-placeholder {
|
||||
color: @placeholderErrorColor;
|
||||
}
|
||||
.ui.input.error input:-ms-input-placeholder {
|
||||
color: @placeholderErrorColor !important;
|
||||
}
|
||||
|
||||
/* Focused Error Placeholder */
|
||||
.ui.input.error input:focus::-webkit-input-placeholder {
|
||||
color: @placeholderErrorFocusColor;
|
||||
}
|
||||
.ui.input.error input:focus::-moz-placeholder {
|
||||
color: @placeholderErrorFocusColor;
|
||||
}
|
||||
.ui.input.error input:focus:-ms-input-placeholder {
|
||||
color: @placeholderErrorFocusColor !important;
|
||||
}
|
||||
|
||||
/*******************************
|
||||
Variations
|
||||
*******************************/
|
||||
|
||||
/*--------------------
|
||||
Transparent
|
||||
---------------------*/
|
||||
|
||||
|
||||
.ui.transparent.input input {
|
||||
border-color: transparent !important;
|
||||
background-color: transparent !important;
|
||||
padding: 0em !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
/* Transparent Icon */
|
||||
.ui.transparent.icon.input > i.icon {
|
||||
width: @transparentIconWidth;
|
||||
}
|
||||
.ui.transparent.icon.input > input {
|
||||
padding-left: 0em !important;
|
||||
padding-right: @transparentIconMargin !important;
|
||||
}
|
||||
.ui.transparent[class*="left icon"].input > input {
|
||||
padding-left: @transparentIconMargin !important;
|
||||
padding-right: 0em !important;
|
||||
}
|
||||
|
||||
/* Transparent Inverted */
|
||||
.ui.transparent.inverted.input {
|
||||
color: @transparentInvertedColor;
|
||||
}
|
||||
.ui.transparent.inverted.input input {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.ui.transparent.inverted.input input::-webkit-input-placeholder {
|
||||
color: @transparentInvertedPlaceholderColor;
|
||||
}
|
||||
.ui.transparent.inverted.input input::-moz-placeholder {
|
||||
color: @transparentInvertedPlaceholderColor;
|
||||
}
|
||||
.ui.transparent.inverted.input input:-ms-input-placeholder {
|
||||
color: @transparentInvertedPlaceholderColor;
|
||||
}
|
||||
|
||||
|
||||
/*--------------------
|
||||
Icon
|
||||
---------------------*/
|
||||
|
||||
.ui.icon.input > i.icon {
|
||||
cursor: default;
|
||||
position: absolute;
|
||||
line-height: 1;
|
||||
text-align: center;
|
||||
top: 0px;
|
||||
right: 0px;
|
||||
margin: 0em;
|
||||
height: 100%;
|
||||
|
||||
width: @iconWidth;
|
||||
opacity: @iconOpacity;
|
||||
border-radius: 0em @borderRadius @borderRadius 0em;
|
||||
transition: @iconTransition;
|
||||
}
|
||||
.ui.icon.input > i.icon:not(.link) {
|
||||
pointer-events: none;
|
||||
}
|
||||
.ui.icon.input input {
|
||||
padding-right: @iconMargin !important;
|
||||
}
|
||||
|
||||
.ui.icon.input > i.icon:before,
|
||||
.ui.icon.input > i.icon:after {
|
||||
left: 0;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
top: 50%;
|
||||
width: 100%;
|
||||
margin-top: @iconOffset;
|
||||
}
|
||||
.ui.icon.input > i.link.icon {
|
||||
cursor: pointer;
|
||||
}
|
||||
.ui.icon.input > i.circular.icon {
|
||||
top: @circularIconVerticalOffset;
|
||||
right: @circularIconHorizontalOffset;
|
||||
}
|
||||
|
||||
/* Left Icon Input */
|
||||
.ui[class*="left icon"].input > i.icon {
|
||||
right: auto;
|
||||
left: @borderWidth;
|
||||
border-radius: @borderRadius 0em 0em @borderRadius;
|
||||
}
|
||||
.ui[class*="left icon"].input > i.circular.icon {
|
||||
right: auto;
|
||||
left: @circularIconHorizontalOffset;
|
||||
}
|
||||
.ui[class*="left icon"].input > input {
|
||||
padding-left: @iconMargin !important;
|
||||
padding-right: @horizontalPadding !important;
|
||||
}
|
||||
|
||||
/* Focus */
|
||||
.ui.icon.input > input:focus ~ i.icon {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/*--------------------
|
||||
Labeled
|
||||
---------------------*/
|
||||
|
||||
/* Adjacent Label */
|
||||
.ui.labeled.input > .label {
|
||||
flex: 0 0 auto;
|
||||
margin: 0;
|
||||
font-size: @relativeMedium;
|
||||
}
|
||||
.ui.labeled.input > .label:not(.corner) {
|
||||
padding-top: @verticalPadding;
|
||||
padding-bottom: @verticalPadding;
|
||||
}
|
||||
|
||||
/* Regular Label on Left */
|
||||
.ui.labeled.input:not([class*="corner labeled"]) .label:first-child {
|
||||
border-top-right-radius: 0px;
|
||||
border-bottom-right-radius: 0px;
|
||||
}
|
||||
.ui.labeled.input:not([class*="corner labeled"]) .label:first-child + input {
|
||||
border-top-left-radius: 0px;
|
||||
border-bottom-left-radius: 0px;
|
||||
border-left-color: transparent;
|
||||
}
|
||||
.ui.labeled.input:not([class*="corner labeled"]) .label:first-child + input:focus {
|
||||
border-left-color: @focusBorderColor;
|
||||
}
|
||||
|
||||
/* Regular Label on Right */
|
||||
.ui[class*="right labeled"].input input {
|
||||
border-top-right-radius: 0px !important;
|
||||
border-bottom-right-radius: 0px !important;
|
||||
border-right-color: transparent !important;
|
||||
}
|
||||
.ui[class*="right labeled"].input input + .label {
|
||||
border-top-left-radius: 0px;
|
||||
border-bottom-left-radius: 0px;
|
||||
}
|
||||
|
||||
.ui[class*="right labeled"].input input:focus {
|
||||
border-right-color: @focusBorderColor !important;
|
||||
}
|
||||
|
||||
/* Corner Label */
|
||||
.ui.labeled.input .corner.label {
|
||||
top: @labelCornerTop;
|
||||
right: @labelCornerRight;
|
||||
font-size: @labelCornerSize;
|
||||
border-radius: 0em @borderRadius 0em 0em;
|
||||
}
|
||||
|
||||
/* Spacing with corner label */
|
||||
.ui[class*="corner labeled"]:not([class*="left corner labeled"]).labeled.input input {
|
||||
padding-right: @labeledMargin !important;
|
||||
}
|
||||
.ui[class*="corner labeled"].icon.input:not([class*="left corner labeled"]) > input {
|
||||
padding-right: @labeledIconInputMargin !important;
|
||||
}
|
||||
.ui[class*="corner labeled"].icon.input:not([class*="left corner labeled"]) > .icon {
|
||||
margin-right: @labeledIconMargin;
|
||||
}
|
||||
|
||||
/* Left Labeled */
|
||||
.ui[class*="left corner labeled"].labeled.input input {
|
||||
padding-left: @labeledMargin !important;
|
||||
}
|
||||
.ui[class*="left corner labeled"].icon.input > input {
|
||||
padding-left: @labeledIconInputMargin !important;
|
||||
}
|
||||
.ui[class*="left corner labeled"].icon.input > .icon {
|
||||
margin-left: @labeledIconMargin;
|
||||
}
|
||||
|
||||
/* Corner Label Position */
|
||||
.ui.input > .ui.corner.label {
|
||||
top: @borderWidth;
|
||||
right: @borderWidth;
|
||||
}
|
||||
.ui.input > .ui.left.corner.label {
|
||||
right: auto;
|
||||
left: @borderWidth;
|
||||
}
|
||||
|
||||
|
||||
/*--------------------
|
||||
Action
|
||||
---------------------*/
|
||||
|
||||
.ui.action.input > .button,
|
||||
.ui.action.input > .buttons {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
.ui.action.input > .button,
|
||||
.ui.action.input > .buttons > .button {
|
||||
padding-top: @verticalPadding;
|
||||
padding-bottom: @verticalPadding;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Button on Right */
|
||||
.ui.action.input:not([class*="left action"]) > input {
|
||||
border-top-right-radius: 0px !important;
|
||||
border-bottom-right-radius: 0px !important;
|
||||
border-right-color: transparent !important;
|
||||
}
|
||||
.ui.action.input:not([class*="left action"]) > .dropdown:not(:first-child),
|
||||
.ui.action.input:not([class*="left action"]) > .button:not(:first-child),
|
||||
.ui.action.input:not([class*="left action"]) > .buttons:not(:first-child) > .button {
|
||||
border-radius: 0px;
|
||||
}
|
||||
.ui.action.input:not([class*="left action"]) > .dropdown:last-child,
|
||||
.ui.action.input:not([class*="left action"]) > .button:last-child,
|
||||
.ui.action.input:not([class*="left action"]) > .buttons:last-child > .button {
|
||||
border-radius: 0px @borderRadius @borderRadius 0px;
|
||||
}
|
||||
|
||||
/* Input Focus */
|
||||
.ui.action.input:not([class*="left action"]) input:focus {
|
||||
border-right-color: @focusBorderColor !important;
|
||||
}
|
||||
|
||||
/* Button on Left */
|
||||
.ui[class*="left action"].input > input {
|
||||
border-top-left-radius: 0px !important;
|
||||
border-bottom-left-radius: 0px !important;
|
||||
border-left-color: transparent !important;
|
||||
}
|
||||
.ui[class*="left action"].input > .dropdown,
|
||||
.ui[class*="left action"].input > .button,
|
||||
.ui[class*="left action"].input > .buttons > .button {
|
||||
border-radius: 0px;
|
||||
}
|
||||
.ui[class*="left action"].input > .dropdown:first-child,
|
||||
.ui[class*="left action"].input > .button:first-child,
|
||||
.ui[class*="left action"].input > .buttons:first-child > .button {
|
||||
border-radius: @borderRadius 0px 0px @borderRadius;
|
||||
}
|
||||
/* Input Focus */
|
||||
.ui[class*="left action"].input > input:focus {
|
||||
border-left-color: @focusBorderColor !important;
|
||||
}
|
||||
|
||||
/*--------------------
|
||||
Inverted
|
||||
---------------------*/
|
||||
|
||||
/* Standard */
|
||||
.ui.inverted.input input {
|
||||
border: none;
|
||||
}
|
||||
|
||||
/*--------------------
|
||||
Fluid
|
||||
---------------------*/
|
||||
|
||||
.ui.fluid.input {
|
||||
display: flex;
|
||||
}
|
||||
.ui.fluid.input > input {
|
||||
width: 0px !important;
|
||||
}
|
||||
|
||||
/*--------------------
|
||||
Size
|
||||
---------------------*/
|
||||
|
||||
.ui.mini.input {
|
||||
font-size: @relativeMini;
|
||||
}
|
||||
.ui.small.input {
|
||||
font-size: @relativeSmall;
|
||||
}
|
||||
.ui.input {
|
||||
font-size: @relativeMedium;
|
||||
}
|
||||
.ui.large.input {
|
||||
font-size: @relativeLarge;
|
||||
}
|
||||
.ui.big.input {
|
||||
font-size: @relativeBig;
|
||||
}
|
||||
.ui.huge.input {
|
||||
font-size: @relativeHuge;
|
||||
}
|
||||
.ui.massive.input {
|
||||
font-size: @relativeMassive;
|
||||
}
|
||||
|
||||
.loadUIOverrides();
|
||||
1257
semantic/src/definitions/elements/label.less
Normal file
1257
semantic/src/definitions/elements/label.less
Normal file
File diff suppressed because it is too large
Load Diff
951
semantic/src/definitions/elements/list.less
Normal file
951
semantic/src/definitions/elements/list.less
Normal file
@@ -0,0 +1,951 @@
|
||||
/*!
|
||||
* # Semantic UI - List
|
||||
* http://github.com/semantic-org/semantic-ui/
|
||||
*
|
||||
*
|
||||
* Released under the MIT license
|
||||
* http://opensource.org/licenses/MIT
|
||||
*
|
||||
*/
|
||||
|
||||
/*******************************
|
||||
Theme
|
||||
*******************************/
|
||||
|
||||
@type : 'element';
|
||||
@element : 'list';
|
||||
|
||||
@import (multiple) '../../theme.config';
|
||||
|
||||
/*******************************
|
||||
List
|
||||
*******************************/
|
||||
|
||||
ul.ui.list,
|
||||
ol.ui.list,
|
||||
.ui.list {
|
||||
list-style-type: @listStyleType;
|
||||
margin: @margin;
|
||||
padding: @verticalPadding @horizontalPadding;
|
||||
}
|
||||
|
||||
ul.ui.list:first-child,
|
||||
ol.ui.list:first-child,
|
||||
.ui.list:first-child {
|
||||
margin-top: 0em;
|
||||
padding-top: 0em;
|
||||
}
|
||||
|
||||
ul.ui.list:last-child,
|
||||
ol.ui.list:last-child,
|
||||
.ui.list:last-child {
|
||||
margin-bottom: 0em;
|
||||
padding-bottom: 0em;
|
||||
}
|
||||
|
||||
/*******************************
|
||||
Content
|
||||
*******************************/
|
||||
|
||||
/* List Item */
|
||||
ul.ui.list li,
|
||||
ol.ui.list li,
|
||||
.ui.list > .item,
|
||||
.ui.list .list > .item {
|
||||
display: list-item;
|
||||
table-layout: fixed;
|
||||
list-style-type: @listStyleType;
|
||||
list-style-position: @listStylePosition;
|
||||
|
||||
padding: @itemPadding;
|
||||
line-height: @itemLineHeight;
|
||||
}
|
||||
|
||||
ul.ui.list > li:first-child:after,
|
||||
ol.ui.list > li:first-child:after,
|
||||
.ui.list > .list > .item,
|
||||
.ui.list > .item:after {
|
||||
content: '';
|
||||
display: block;
|
||||
height: 0;
|
||||
clear: both;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
ul.ui.list li:first-child,
|
||||
ol.ui.list li:first-child,
|
||||
.ui.list .list > .item:first-child,
|
||||
.ui.list > .item:first-child {
|
||||
padding-top: 0em;
|
||||
}
|
||||
ul.ui.list li:last-child,
|
||||
ol.ui.list li:last-child,
|
||||
.ui.list .list > .item:last-child,
|
||||
.ui.list > .item:last-child {
|
||||
padding-bottom: 0em;
|
||||
}
|
||||
|
||||
/* Child List */
|
||||
ul.ui.list ul,
|
||||
ol.ui.list ol,
|
||||
.ui.list .list {
|
||||
clear: both;
|
||||
margin: 0em;
|
||||
padding: @childListPadding;
|
||||
}
|
||||
|
||||
/* Child Item */
|
||||
ul.ui.list ul li,
|
||||
ol.ui.list ol li,
|
||||
.ui.list .list > .item {
|
||||
padding: @childItemPadding;
|
||||
line-height: @childItemLineHeight;
|
||||
}
|
||||
|
||||
|
||||
/* Icon */
|
||||
.ui.list .list > .item > i.icon,
|
||||
.ui.list > .item > i.icon {
|
||||
display: table-cell;
|
||||
margin: 0em;
|
||||
padding-top: @iconOffset;
|
||||
padding-right: @iconDistance;
|
||||
vertical-align: @iconContentVerticalAlign;
|
||||
transition: @iconTransition;
|
||||
}
|
||||
.ui.list .list > .item > i.icon:only-child,
|
||||
.ui.list > .item > i.icon:only-child {
|
||||
display: inline-block;
|
||||
vertical-align: @iconVerticalAlign;
|
||||
}
|
||||
|
||||
|
||||
/* Image */
|
||||
.ui.list .list > .item > .image,
|
||||
.ui.list > .item > .image {
|
||||
display: table-cell;
|
||||
background-color: transparent;
|
||||
margin: 0em;
|
||||
vertical-align: @imageAlign;
|
||||
}
|
||||
.ui.list .list > .item > .image:not(:only-child):not(img),
|
||||
.ui.list > .item > .image:not(:only-child):not(img) {
|
||||
padding-right: @imageDistance;
|
||||
}
|
||||
.ui.list .list > .item > .image img,
|
||||
.ui.list > .item > .image img {
|
||||
vertical-align: @imageAlign;
|
||||
}
|
||||
|
||||
.ui.list .list > .item > img.image,
|
||||
.ui.list .list > .item > .image:only-child,
|
||||
.ui.list > .item > img.image,
|
||||
.ui.list > .item > .image:only-child {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/* Content */
|
||||
.ui.list .list > .item > .content,
|
||||
.ui.list > .item > .content {
|
||||
line-height: @contentLineHeight;
|
||||
}
|
||||
.ui.list .list > .item > .image + .content,
|
||||
.ui.list .list > .item > .icon + .content,
|
||||
.ui.list > .item > .image + .content,
|
||||
.ui.list > .item > .icon + .content {
|
||||
display: table-cell;
|
||||
padding: 0em 0em 0em @contentDistance;
|
||||
vertical-align: @contentVerticalAlign;
|
||||
}
|
||||
.ui.list .list > .item > img.image + .content,
|
||||
.ui.list > .item > img.image + .content {
|
||||
display: inline-block;
|
||||
}
|
||||
.ui.list .list > .item > .content > .list,
|
||||
.ui.list > .item > .content > .list {
|
||||
margin-left: 0em;
|
||||
padding-left: 0em;
|
||||
}
|
||||
|
||||
/* Header */
|
||||
.ui.list .list > .item .header,
|
||||
.ui.list > .item .header {
|
||||
display: block;
|
||||
margin: 0em;
|
||||
font-family: @itemHeaderFontFamily;
|
||||
font-weight: @itemHeaderFontWeight;
|
||||
color: @itemHeaderColor;
|
||||
}
|
||||
|
||||
/* Description */
|
||||
.ui.list .list > .item .description,
|
||||
.ui.list > .item .description {
|
||||
display: block;
|
||||
color: @itemDescriptionColor;
|
||||
}
|
||||
|
||||
/* Child Link */
|
||||
.ui.list > .item a,
|
||||
.ui.list .list > .item a {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Linking Item */
|
||||
.ui.list .list > a.item,
|
||||
.ui.list > a.item {
|
||||
cursor: pointer;
|
||||
color: @itemLinkColor;
|
||||
}
|
||||
.ui.list .list > a.item:hover,
|
||||
.ui.list > a.item:hover {
|
||||
color: @itemLinkHoverColor;
|
||||
}
|
||||
|
||||
/* Linked Item Icons */
|
||||
.ui.list .list > a.item i.icon,
|
||||
.ui.list > a.item i.icon {
|
||||
color: @itemLinkIconColor;
|
||||
}
|
||||
|
||||
/* Header Link */
|
||||
.ui.list .list > .item a.header,
|
||||
.ui.list > .item a.header {
|
||||
cursor: pointer;
|
||||
color: @itemHeaderLinkColor !important;
|
||||
}
|
||||
.ui.list .list > .item a.header:hover,
|
||||
.ui.list > .item a.header:hover {
|
||||
color: @itemHeaderLinkHoverColor !important;
|
||||
}
|
||||
|
||||
/* Floated Content */
|
||||
.ui[class*="left floated"].list {
|
||||
float: left;
|
||||
}
|
||||
.ui[class*="right floated"].list {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.ui.list .list > .item [class*="left floated"],
|
||||
.ui.list > .item [class*="left floated"] {
|
||||
float: left;
|
||||
margin: @leftFloatMargin;
|
||||
}
|
||||
.ui.list .list > .item [class*="right floated"],
|
||||
.ui.list > .item [class*="right floated"] {
|
||||
float: right;
|
||||
margin: @rightFloatMargin;
|
||||
}
|
||||
|
||||
/*******************************
|
||||
Coupling
|
||||
*******************************/
|
||||
|
||||
.ui.menu .ui.list > .item,
|
||||
.ui.menu .ui.list .list > .item {
|
||||
display: list-item;
|
||||
table-layout: fixed;
|
||||
background-color: transparent;
|
||||
|
||||
list-style-type: @listStyleType;
|
||||
list-style-position: @listStylePosition;
|
||||
|
||||
padding: @itemVerticalPadding @itemHorizontalPadding;
|
||||
line-height: @itemLineHeight;
|
||||
}
|
||||
.ui.menu .ui.list .list > .item:before,
|
||||
.ui.menu .ui.list > .item:before {
|
||||
border: none;
|
||||
background: none;
|
||||
}
|
||||
.ui.menu .ui.list .list > .item:first-child,
|
||||
.ui.menu .ui.list > .item:first-child {
|
||||
padding-top: 0em;
|
||||
}
|
||||
.ui.menu .ui.list .list > .item:last-child,
|
||||
.ui.menu .ui.list > .item:last-child {
|
||||
padding-bottom: 0em;
|
||||
}
|
||||
|
||||
|
||||
/*******************************
|
||||
Types
|
||||
*******************************/
|
||||
|
||||
/*-------------------
|
||||
Horizontal
|
||||
--------------------*/
|
||||
|
||||
.ui.horizontal.list {
|
||||
display: inline-block;
|
||||
font-size: 0em;
|
||||
}
|
||||
.ui.horizontal.list > .item {
|
||||
display: inline-block;
|
||||
margin-left: @horizontalSpacing;
|
||||
font-size: 1rem;
|
||||
}
|
||||
.ui.horizontal.list:not(.celled) > .item:first-child {
|
||||
margin-left: 0em !important;
|
||||
padding-left: 0em !important;
|
||||
}
|
||||
.ui.horizontal.list .list {
|
||||
padding-left: 0em;
|
||||
padding-bottom: 0em;
|
||||
}
|
||||
|
||||
.ui.horizontal.list > .item > .image,
|
||||
.ui.horizontal.list .list > .item > .image,
|
||||
.ui.horizontal.list > .item > .icon,
|
||||
.ui.horizontal.list .list > .item > .icon,
|
||||
.ui.horizontal.list > .item > .content,
|
||||
.ui.horizontal.list .list > .item > .content {
|
||||
vertical-align: @horizontalVerticalAlign;
|
||||
}
|
||||
|
||||
/* Padding on all elements */
|
||||
.ui.horizontal.list > .item:first-child,
|
||||
.ui.horizontal.list > .item:last-child {
|
||||
padding-top: @itemVerticalPadding;
|
||||
padding-bottom: @itemVerticalPadding;
|
||||
}
|
||||
|
||||
/* Horizontal List */
|
||||
.ui.horizontal.list > .item > i.icon {
|
||||
margin: 0em;
|
||||
padding: 0em @horizontalIconDistance 0em 0em;
|
||||
}
|
||||
.ui.horizontal.list > .item > .icon,
|
||||
.ui.horizontal.list > .item > .icon + .content {
|
||||
float: none;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
|
||||
/*******************************
|
||||
States
|
||||
*******************************/
|
||||
|
||||
/*-------------------
|
||||
Disabled
|
||||
--------------------*/
|
||||
|
||||
.ui.list .list > .disabled.item,
|
||||
.ui.list > .disabled.item {
|
||||
pointer-events: none;
|
||||
color: @disabledColor !important;
|
||||
}
|
||||
.ui.inverted.list .list > .disabled.item,
|
||||
.ui.inverted.list > .disabled.item {
|
||||
color: @invertedDisabledColor !important;
|
||||
}
|
||||
|
||||
/*-------------------
|
||||
Hover
|
||||
--------------------*/
|
||||
|
||||
.ui.list .list > a.item:hover .icon,
|
||||
.ui.list > a.item:hover .icon {
|
||||
color: @itemLinkIconHoverColor;
|
||||
}
|
||||
|
||||
|
||||
/*******************************
|
||||
Variations
|
||||
*******************************/
|
||||
|
||||
/*-------------------
|
||||
Inverted
|
||||
--------------------*/
|
||||
|
||||
.ui.inverted.list .list > a.item > .icon,
|
||||
.ui.inverted.list > a.item > .icon {
|
||||
color: @invertedIconLinkColor;
|
||||
}
|
||||
.ui.inverted.list .list > .item .header,
|
||||
.ui.inverted.list > .item .header {
|
||||
color: @invertedHeaderColor;
|
||||
}
|
||||
.ui.inverted.list .list > .item .description,
|
||||
.ui.inverted.list > .item .description {
|
||||
color: @invertedDescriptionColor;
|
||||
}
|
||||
|
||||
/* Item Link */
|
||||
.ui.inverted.list .list > a.item,
|
||||
.ui.inverted.list > a.item {
|
||||
cursor: pointer;
|
||||
color: @invertedItemLinkColor;
|
||||
}
|
||||
.ui.inverted.list .list > a.item:hover,
|
||||
.ui.inverted.list > a.item:hover {
|
||||
color: @invertedItemLinkHoverColor;
|
||||
}
|
||||
|
||||
|
||||
/* Linking Content */
|
||||
.ui.inverted.list .item a:not(.ui) {
|
||||
color: @invertedItemLinkColor !important;
|
||||
}
|
||||
.ui.inverted.list .item a:not(.ui):hover {
|
||||
color: @invertedItemLinkHoverColor !important;
|
||||
}
|
||||
|
||||
/*-------------------
|
||||
Aligned
|
||||
--------------------*/
|
||||
|
||||
.ui.list[class*="top aligned"] .image,
|
||||
.ui.list[class*="top aligned"] .content,
|
||||
.ui.list [class*="top aligned"] {
|
||||
vertical-align: top !important;
|
||||
}
|
||||
.ui.list[class*="middle aligned"] .image,
|
||||
.ui.list[class*="middle aligned"] .content,
|
||||
.ui.list [class*="middle aligned"] {
|
||||
vertical-align: middle !important;
|
||||
}
|
||||
.ui.list[class*="bottom aligned"] .image,
|
||||
.ui.list[class*="bottom aligned"] .content,
|
||||
.ui.list [class*="bottom aligned"] {
|
||||
vertical-align: bottom !important;
|
||||
}
|
||||
|
||||
/*-------------------
|
||||
Link
|
||||
--------------------*/
|
||||
|
||||
.ui.link.list .item,
|
||||
.ui.link.list a.item,
|
||||
.ui.link.list .item a:not(.ui) {
|
||||
color: @linkListItemColor;
|
||||
transition: @linkListTransition;
|
||||
}
|
||||
.ui.link.list a.item:hover,
|
||||
.ui.link.list .item a:not(.ui):hover {
|
||||
color: @linkListItemHoverColor;
|
||||
}
|
||||
.ui.link.list a.item:active,
|
||||
.ui.link.list .item a:not(.ui):active {
|
||||
color: @linkListItemDownColor;
|
||||
}
|
||||
.ui.link.list .active.item,
|
||||
.ui.link.list .active.item a:not(.ui) {
|
||||
color: @linkListItemActiveColor;
|
||||
}
|
||||
|
||||
/* Inverted */
|
||||
.ui.inverted.link.list .item,
|
||||
.ui.inverted.link.list a.item,
|
||||
.ui.inverted.link.list .item a:not(.ui) {
|
||||
color: @invertedLinkListItemColor;
|
||||
}
|
||||
.ui.inverted.link.list a.item:hover,
|
||||
.ui.inverted.link.list .item a:not(.ui):hover {
|
||||
color: @invertedLinkListItemHoverColor;
|
||||
}
|
||||
.ui.inverted.link.list a.item:active,
|
||||
.ui.inverted.link.list .item a:not(.ui):active {
|
||||
color: @invertedLinkListItemDownColor;
|
||||
}
|
||||
.ui.inverted.link.list a.active.item,
|
||||
.ui.inverted.link.list .active.item a:not(.ui) {
|
||||
color: @invertedLinkListItemActiveColor;
|
||||
}
|
||||
|
||||
/*-------------------
|
||||
Selection
|
||||
--------------------*/
|
||||
|
||||
.ui.selection.list .list > .item,
|
||||
.ui.selection.list > .item {
|
||||
cursor: pointer;
|
||||
background: @selectionListBackground;
|
||||
padding: @selectionListItemVerticalPadding @selectionListItemHorizontalPadding;
|
||||
margin: @selectionListItemMargin;
|
||||
color: @selectionListColor;
|
||||
border-radius: @selectionListItemBorderRadius;
|
||||
transition: @selectionListTransition;
|
||||
}
|
||||
.ui.selection.list .list > .item:last-child,
|
||||
.ui.selection.list > .item:last-child {
|
||||
margin-bottom: 0em;
|
||||
}
|
||||
.ui.selection.list.list > .item:hover,
|
||||
.ui.selection.list > .item:hover {
|
||||
background: @selectionListHoverBackground;
|
||||
color: @selectionListHoverColor;
|
||||
}
|
||||
.ui.selection.list .list > .item:active,
|
||||
.ui.selection.list > .item:active {
|
||||
background: @selectionListDownBackground;
|
||||
color: @selectionListDownColor;
|
||||
}
|
||||
.ui.selection.list .list > .item.active,
|
||||
.ui.selection.list > .item.active {
|
||||
background: @selectionListActiveBackground;
|
||||
color: @selectionListActiveColor;
|
||||
}
|
||||
|
||||
/* Inverted */
|
||||
.ui.inverted.selection.list > .item,
|
||||
.ui.inverted.selection.list > .item {
|
||||
background: @invertedSelectionListBackground;
|
||||
color: @invertedSelectionListColor;
|
||||
}
|
||||
.ui.inverted.selection.list > .item:hover,
|
||||
.ui.inverted.selection.list > .item:hover {
|
||||
background: @invertedSelectionListHoverBackground;
|
||||
color: @invertedSelectionListHoverColor;
|
||||
}
|
||||
.ui.inverted.selection.list > .item:active,
|
||||
.ui.inverted.selection.list > .item:active {
|
||||
background: @invertedSelectionListDownBackground;
|
||||
color: @invertedSelectionListDownColor;
|
||||
}
|
||||
.ui.inverted.selection.list > .item.active,
|
||||
.ui.inverted.selection.list > .item.active {
|
||||
background: @invertedSelectionListActiveBackground;
|
||||
color: @invertedSelectionListActiveColor;
|
||||
}
|
||||
|
||||
/* Celled / Divided Selection List */
|
||||
.ui.celled.selection.list .list > .item,
|
||||
.ui.divided.selection.list .list > .item,
|
||||
.ui.celled.selection.list > .item,
|
||||
.ui.divided.selection.list > .item {
|
||||
border-radius: 0em;
|
||||
}
|
||||
|
||||
/*-------------------
|
||||
Animated
|
||||
--------------------*/
|
||||
|
||||
.ui.animated.list > .item {
|
||||
transition: @animatedListTransition;
|
||||
}
|
||||
.ui.animated.list:not(.horizontal) > .item:hover {
|
||||
padding-left: @animatedListIndent;
|
||||
}
|
||||
|
||||
/*-------------------
|
||||
Fitted
|
||||
--------------------*/
|
||||
.ui.fitted.list:not(.selection) .list > .item,
|
||||
.ui.fitted.list:not(.selection) > .item {
|
||||
padding-left: 0em;
|
||||
padding-right: 0em;
|
||||
}
|
||||
.ui.fitted.selection.list .list > .item,
|
||||
.ui.fitted.selection.list > .item {
|
||||
margin-left: -@selectionListItemHorizontalPadding;
|
||||
margin-right: -@selectionListItemHorizontalPadding;
|
||||
}
|
||||
|
||||
/*-------------------
|
||||
Bulleted
|
||||
--------------------*/
|
||||
|
||||
ul.ui.list,
|
||||
.ui.bulleted.list {
|
||||
margin-left: @bulletDistance;
|
||||
}
|
||||
ul.ui.list li,
|
||||
.ui.bulleted.list .list > .item,
|
||||
.ui.bulleted.list > .item {
|
||||
position: relative;
|
||||
}
|
||||
ul.ui.list li:before,
|
||||
.ui.bulleted.list .list > .item:before,
|
||||
.ui.bulleted.list > .item:before {
|
||||
user-select: none;
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
top: auto;
|
||||
left: auto;
|
||||
font-weight: normal;
|
||||
margin-left: @bulletOffset;
|
||||
content: @bulletCharacter;
|
||||
opacity: @bulletOpacity;
|
||||
color: @bulletColor;
|
||||
vertical-align: @bulletVerticalAlign;
|
||||
}
|
||||
|
||||
ul.ui.list li:before,
|
||||
.ui.bulleted.list .list > a.item:before,
|
||||
.ui.bulleted.list > a.item:before {
|
||||
color: @bulletLinkColor;
|
||||
}
|
||||
|
||||
ul.ui.list ul,
|
||||
.ui.bulleted.list .list {
|
||||
padding-left: @bulletChildDistance;
|
||||
}
|
||||
|
||||
/* Horizontal Bulleted */
|
||||
ul.ui.horizontal.bulleted.list,
|
||||
.ui.horizontal.bulleted.list {
|
||||
margin-left: 0em;
|
||||
}
|
||||
ul.ui.horizontal.bulleted.list li,
|
||||
.ui.horizontal.bulleted.list > .item {
|
||||
margin-left: @horizontalBulletSpacing;
|
||||
}
|
||||
ul.ui.horizontal.bulleted.list li:first-child,
|
||||
.ui.horizontal.bulleted.list > .item:first-child {
|
||||
margin-left: 0em;
|
||||
}
|
||||
ul.ui.horizontal.bulleted.list li::before,
|
||||
.ui.horizontal.bulleted.list > .item::before {
|
||||
color: @horizontalBulletColor;
|
||||
}
|
||||
ul.ui.horizontal.bulleted.list li:first-child::before,
|
||||
.ui.horizontal.bulleted.list > .item:first-child::before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/*-------------------
|
||||
Ordered
|
||||
--------------------*/
|
||||
|
||||
ol.ui.list,
|
||||
.ui.ordered.list,
|
||||
.ui.ordered.list .list,
|
||||
ol.ui.list ol {
|
||||
counter-reset: ordered;
|
||||
margin-left: @orderedCountDistance;
|
||||
list-style-type: none;
|
||||
}
|
||||
ol.ui.list li,
|
||||
.ui.ordered.list .list > .item,
|
||||
.ui.ordered.list > .item {
|
||||
list-style-type: none;
|
||||
position: relative;
|
||||
}
|
||||
ol.ui.list li:before,
|
||||
.ui.ordered.list .list > .item:before,
|
||||
.ui.ordered.list > .item:before {
|
||||
position: absolute;
|
||||
top: auto;
|
||||
left: auto;
|
||||
user-select: none;
|
||||
pointer-events: none;
|
||||
margin-left: -(@orderedCountDistance);
|
||||
counter-increment: @orderedCountName;
|
||||
content: @orderedCountContent;
|
||||
text-align: @orderedCountTextAlign;
|
||||
color: @orderedCountColor;
|
||||
vertical-align: @orderedCountVerticalAlign;
|
||||
opacity: @orderedCountOpacity;
|
||||
}
|
||||
|
||||
ol.ui.inverted.list li:before,
|
||||
.ui.ordered.inverted.list .list > .item:before,
|
||||
.ui.ordered.inverted.list > .item:before {
|
||||
color: @orderedInvertedCountColor;
|
||||
}
|
||||
|
||||
/* Value */
|
||||
.ui.ordered.list > .list > .item[data-value],
|
||||
.ui.ordered.list > .item[data-value] {
|
||||
content: attr(data-value);
|
||||
}
|
||||
ol.ui.list li[value]:before {
|
||||
content: attr(value);
|
||||
}
|
||||
|
||||
/* Child Lists */
|
||||
ol.ui.list ol,
|
||||
.ui.ordered.list .list {
|
||||
margin-left: @orderedChildCountDistance;
|
||||
}
|
||||
ol.ui.list ol li:before,
|
||||
.ui.ordered.list .list > .item:before {
|
||||
margin-left: @orderedChildCountOffset;
|
||||
}
|
||||
|
||||
/* Horizontal Ordered */
|
||||
ol.ui.horizontal.list,
|
||||
.ui.ordered.horizontal.list {
|
||||
margin-left: 0em;
|
||||
}
|
||||
ol.ui.horizontal.list li:before,
|
||||
.ui.ordered.horizontal.list .list > .item:before,
|
||||
.ui.ordered.horizontal.list > .item:before {
|
||||
position: static;
|
||||
margin: 0em @horizontalOrderedCountDistance 0em 0em;
|
||||
}
|
||||
|
||||
/*-------------------
|
||||
Divided
|
||||
--------------------*/
|
||||
|
||||
.ui.divided.list > .item {
|
||||
border-top: @dividedBorder;
|
||||
}
|
||||
.ui.divided.list .list > .item {
|
||||
border-top: @dividedChildListBorder;
|
||||
}
|
||||
.ui.divided.list .item .list > .item {
|
||||
border-top: @dividedChildItemBorder;
|
||||
}
|
||||
.ui.divided.list .list > .item:first-child,
|
||||
.ui.divided.list > .item:first-child {
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
/* Sub Menu */
|
||||
.ui.divided.list:not(.horizontal) .list > .item:first-child {
|
||||
border-top-width: @dividedBorderWidth;
|
||||
}
|
||||
|
||||
/* Divided bulleted */
|
||||
.ui.divided.bulleted.list:not(.horizontal),
|
||||
.ui.divided.bulleted.list .list {
|
||||
margin-left: 0em;
|
||||
padding-left: 0em;
|
||||
}
|
||||
.ui.divided.bulleted.list > .item:not(.horizontal) {
|
||||
padding-left: @bulletDistance;
|
||||
}
|
||||
|
||||
/* Divided Ordered */
|
||||
.ui.divided.ordered.list {
|
||||
margin-left: 0em;
|
||||
}
|
||||
.ui.divided.ordered.list .list > .item,
|
||||
.ui.divided.ordered.list > .item {
|
||||
padding-left: @orderedCountDistance;
|
||||
}
|
||||
.ui.divided.ordered.list .item .list {
|
||||
margin-left: 0em;
|
||||
margin-right: 0em;
|
||||
padding-bottom: @itemVerticalPadding;
|
||||
}
|
||||
.ui.divided.ordered.list .item .list > .item {
|
||||
padding-left: @orderedChildCountDistance;
|
||||
}
|
||||
|
||||
/* Divided Selection */
|
||||
.ui.divided.selection.list .list > .item,
|
||||
.ui.divided.selection.list > .item {
|
||||
margin: 0em;
|
||||
border-radius: 0em;
|
||||
}
|
||||
|
||||
/* Divided horizontal */
|
||||
.ui.divided.horizontal.list {
|
||||
margin-left: 0em;
|
||||
}
|
||||
.ui.divided.horizontal.list > .item:not(:first-child) {
|
||||
padding-left: @horizontalDividedSpacing;
|
||||
}
|
||||
.ui.divided.horizontal.list > .item:not(:last-child) {
|
||||
padding-right: @horizontalDividedSpacing;
|
||||
}
|
||||
.ui.divided.horizontal.list > .item {
|
||||
border-top: none;
|
||||
border-left: @dividedBorder;
|
||||
margin: 0em;
|
||||
line-height: @horizontalDividedLineHeight;
|
||||
}
|
||||
.ui.horizontal.divided.list > .item:first-child {
|
||||
border-left: none;
|
||||
}
|
||||
/* Inverted */
|
||||
.ui.divided.inverted.list > .item,
|
||||
.ui.divided.inverted.list > .list,
|
||||
.ui.divided.inverted.horizontal.list > .item {
|
||||
border-color: @dividedInvertedBorderColor;
|
||||
}
|
||||
|
||||
|
||||
/*-------------------
|
||||
Celled
|
||||
--------------------*/
|
||||
|
||||
.ui.celled.list > .item,
|
||||
.ui.celled.list > .list {
|
||||
border-top: @celledBorder;
|
||||
padding-left: @celledHorizontalPadding;
|
||||
padding-right: @celledHorizontalPadding;
|
||||
}
|
||||
.ui.celled.list > .item:last-child {
|
||||
border-bottom: @celledBorder;
|
||||
}
|
||||
|
||||
/* Padding on all elements */
|
||||
.ui.celled.list > .item:first-child,
|
||||
.ui.celled.list > .item:last-child {
|
||||
padding-top: @itemVerticalPadding;
|
||||
padding-bottom: @itemVerticalPadding;
|
||||
}
|
||||
|
||||
/* Sub Menu */
|
||||
.ui.celled.list .item .list > .item {
|
||||
border-width: 0px;
|
||||
}
|
||||
.ui.celled.list .list > .item:first-child {
|
||||
border-top-width: 0px;
|
||||
}
|
||||
|
||||
/* Celled Bulleted */
|
||||
.ui.celled.bulleted.list {
|
||||
margin-left: 0em;
|
||||
}
|
||||
.ui.celled.bulleted.list .list > .item,
|
||||
.ui.celled.bulleted.list > .item {
|
||||
padding-left: (@bulletDistance);
|
||||
}
|
||||
.ui.celled.bulleted.list .item .list {
|
||||
margin-left: -(@bulletDistance);
|
||||
margin-right: -(@bulletDistance);
|
||||
padding-bottom: @itemVerticalPadding;
|
||||
}
|
||||
|
||||
/* Celled Ordered */
|
||||
.ui.celled.ordered.list {
|
||||
margin-left: 0em;
|
||||
}
|
||||
.ui.celled.ordered.list .list > .item,
|
||||
.ui.celled.ordered.list > .item {
|
||||
padding-left: @orderedCountDistance;
|
||||
}
|
||||
.ui.celled.ordered.list .item .list {
|
||||
margin-left: 0em;
|
||||
margin-right: 0em;
|
||||
padding-bottom: @itemVerticalPadding;
|
||||
}
|
||||
.ui.celled.ordered.list .list > .item {
|
||||
padding-left: @orderedChildCountDistance;
|
||||
}
|
||||
|
||||
/* Celled Horizontal */
|
||||
.ui.horizontal.celled.list {
|
||||
margin-left: 0em;
|
||||
}
|
||||
.ui.horizontal.celled.list .list > .item,
|
||||
.ui.horizontal.celled.list > .item {
|
||||
border-top: none;
|
||||
border-left: @celledBorder;
|
||||
margin: 0em;
|
||||
padding-left: @horizontalCelledSpacing;
|
||||
padding-right: @horizontalCelledSpacing;
|
||||
|
||||
line-height: @horizontalCelledLineHeight;
|
||||
}
|
||||
.ui.horizontal.celled.list .list > .item:last-child,
|
||||
.ui.horizontal.celled.list > .item:last-child {
|
||||
border-bottom: none;
|
||||
border-right: @celledBorder;
|
||||
}
|
||||
|
||||
/* Inverted */
|
||||
.ui.celled.inverted.list > .item,
|
||||
.ui.celled.inverted.list > .list {
|
||||
border-color: @celledInvertedBorder;
|
||||
}
|
||||
.ui.celled.inverted.horizontal.list .list > .item,
|
||||
.ui.celled.inverted.horizontal.list > .item {
|
||||
border-color: @celledInvertedBorder;
|
||||
}
|
||||
|
||||
/*-------------------
|
||||
Relaxed
|
||||
--------------------*/
|
||||
|
||||
.ui.relaxed.list:not(.horizontal) > .item:not(:first-child) {
|
||||
padding-top: @relaxedItemVerticalPadding;
|
||||
}
|
||||
.ui.relaxed.list:not(.horizontal) > .item:not(:last-child) {
|
||||
padding-bottom: @relaxedItemVerticalPadding;
|
||||
}
|
||||
.ui.horizontal.relaxed.list .list > .item:not(:first-child),
|
||||
.ui.horizontal.relaxed.list > .item:not(:first-child) {
|
||||
padding-left: @relaxedHorizontalPadding;
|
||||
}
|
||||
.ui.horizontal.relaxed.list .list > .item:not(:last-child),
|
||||
.ui.horizontal.relaxed.list > .item:not(:last-child) {
|
||||
padding-right: @relaxedHorizontalPadding;
|
||||
}
|
||||
|
||||
/* Very Relaxed */
|
||||
.ui[class*="very relaxed"].list:not(.horizontal) > .item:not(:first-child) {
|
||||
padding-top: @veryRelaxedItemVerticalPadding;
|
||||
}
|
||||
.ui[class*="very relaxed"].list:not(.horizontal) > .item:not(:last-child) {
|
||||
padding-bottom: @veryRelaxedItemVerticalPadding;
|
||||
}
|
||||
.ui.horizontal[class*="very relaxed"].list .list > .item:not(:first-child),
|
||||
.ui.horizontal[class*="very relaxed"].list > .item:not(:first-child) {
|
||||
padding-left: @veryRelaxedHorizontalPadding;
|
||||
}
|
||||
.ui.horizontal[class*="very relaxed"].list .list > .item:not(:last-child),
|
||||
.ui.horizontal[class*="very relaxed"].list > .item:not(:last-child) {
|
||||
padding-right: @veryRelaxedHorizontalPadding;
|
||||
}
|
||||
|
||||
/*-------------------
|
||||
Sizes
|
||||
--------------------*/
|
||||
|
||||
.ui.mini.list {
|
||||
font-size: @relativeMini;
|
||||
}
|
||||
.ui.tiny.list {
|
||||
font-size: @relativeTiny;
|
||||
}
|
||||
.ui.small.list {
|
||||
font-size: @relativeSmall;
|
||||
}
|
||||
.ui.list {
|
||||
font-size: @relativeMedium;
|
||||
}
|
||||
.ui.large.list {
|
||||
font-size: @relativeLarge;
|
||||
}
|
||||
.ui.big.list {
|
||||
font-size: @relativeBig;
|
||||
}
|
||||
.ui.huge.list {
|
||||
font-size: @relativeHuge;
|
||||
}
|
||||
.ui.massive.list {
|
||||
font-size: @relativeMassive;
|
||||
}
|
||||
|
||||
.ui.mini.horizontal.list .list > .item,
|
||||
.ui.mini.horizontal.list > .item {
|
||||
font-size: @mini;
|
||||
}
|
||||
.ui.tiny.horizontal.list .list > .item,
|
||||
.ui.tiny.horizontal.list > .item {
|
||||
font-size: @tiny;
|
||||
}
|
||||
.ui.small.horizontal.list .list > .item,
|
||||
.ui.small.horizontal.list > .item {
|
||||
font-size: @small;
|
||||
}
|
||||
.ui.horizontal.list .list > .item,
|
||||
.ui.horizontal.list > .item {
|
||||
font-size: @medium;
|
||||
}
|
||||
.ui.large.horizontal.list .list > .item,
|
||||
.ui.large.horizontal.list > .item {
|
||||
font-size: @large;
|
||||
}
|
||||
.ui.big.horizontal.list .list > .item,
|
||||
.ui.big.horizontal.list > .item {
|
||||
font-size: @big;
|
||||
}
|
||||
.ui.huge.horizontal.list .list > .item,
|
||||
.ui.huge.horizontal.list > .item {
|
||||
font-size: @huge;
|
||||
}
|
||||
.ui.massive.horizontal.list .list > .item,
|
||||
.ui.massive.horizontal.list > .item {
|
||||
font-size: @massive;
|
||||
}
|
||||
|
||||
.loadUIOverrides();
|
||||
|
||||
332
semantic/src/definitions/elements/loader.less
Normal file
332
semantic/src/definitions/elements/loader.less
Normal file
@@ -0,0 +1,332 @@
|
||||
/*!
|
||||
* # Semantic UI - Loader
|
||||
* http://github.com/semantic-org/semantic-ui/
|
||||
*
|
||||
*
|
||||
* Released under the MIT license
|
||||
* http://opensource.org/licenses/MIT
|
||||
*
|
||||
*/
|
||||
/*******************************
|
||||
Theme
|
||||
*******************************/
|
||||
|
||||
@type : 'element';
|
||||
@element : 'loader';
|
||||
|
||||
@import (multiple) '../../theme.config';
|
||||
|
||||
/*******************************
|
||||
Loader
|
||||
*******************************/
|
||||
|
||||
|
||||
/* Standard Size */
|
||||
.ui.loader {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: @loaderTopOffset;
|
||||
left: @loaderLeftOffset;
|
||||
margin: 0px;
|
||||
text-align: center;
|
||||
z-index: 1000;
|
||||
transform: translateX(-50%) translateY(-50%);
|
||||
}
|
||||
|
||||
/* Static Shape */
|
||||
.ui.loader:before {
|
||||
position: absolute;
|
||||
content: '';
|
||||
top: 0%;
|
||||
left: 50%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
border-radius: @circularRadius;
|
||||
border: @loaderLineWidth solid @loaderFillColor;
|
||||
}
|
||||
|
||||
/* Active Shape */
|
||||
.ui.loader:after {
|
||||
position: absolute;
|
||||
content: '';
|
||||
top: 0%;
|
||||
left: 50%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
animation: loader @loaderSpeed linear;
|
||||
animation-iteration-count: infinite;
|
||||
|
||||
border-radius: @circularRadius;
|
||||
|
||||
border-color: @shapeBorderColor;
|
||||
border-style: solid;
|
||||
border-width: @loaderLineWidth;
|
||||
|
||||
box-shadow: 0px 0px 0px 1px transparent;
|
||||
}
|
||||
|
||||
/* Active Animation */
|
||||
@keyframes loader {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
/* Sizes */
|
||||
.ui.mini.loader:before,
|
||||
.ui.mini.loader:after {
|
||||
width: @mini;
|
||||
height: @mini;
|
||||
margin: @miniOffset;
|
||||
}
|
||||
.ui.tiny.loader:before,
|
||||
.ui.tiny.loader:after {
|
||||
width: @tiny;
|
||||
height: @tiny;
|
||||
margin: @tinyOffset;
|
||||
}
|
||||
.ui.small.loader:before,
|
||||
.ui.small.loader:after {
|
||||
width: @small;
|
||||
height: @small;
|
||||
margin: @smallOffset;
|
||||
}
|
||||
.ui.loader:before,
|
||||
.ui.loader:after {
|
||||
width: @medium;
|
||||
height: @medium;
|
||||
margin: @mediumOffset;
|
||||
}
|
||||
.ui.large.loader:before,
|
||||
.ui.large.loader:after {
|
||||
width: @large;
|
||||
height: @large;
|
||||
margin: @largeOffset;
|
||||
}
|
||||
.ui.big.loader:before,
|
||||
.ui.big.loader:after {
|
||||
width: @big;
|
||||
height: @big;
|
||||
margin: @bigOffset;
|
||||
}
|
||||
.ui.huge.loader:before,
|
||||
.ui.huge.loader:after {
|
||||
width: @huge;
|
||||
height: @huge;
|
||||
margin: @hugeOffset;
|
||||
}
|
||||
.ui.massive.loader:before,
|
||||
.ui.massive.loader:after {
|
||||
width: @massive;
|
||||
height: @massive;
|
||||
margin: @massiveOffset;
|
||||
}
|
||||
|
||||
/*-------------------
|
||||
Coupling
|
||||
--------------------*/
|
||||
|
||||
/* Show inside active dimmer */
|
||||
.ui.dimmer .loader {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Black Dimmer */
|
||||
.ui.dimmer .ui.loader {
|
||||
color: @invertedLoaderTextColor;
|
||||
}
|
||||
.ui.dimmer .ui.loader:before {
|
||||
border-color: @invertedLoaderFillColor;
|
||||
}
|
||||
.ui.dimmer .ui.loader:after {
|
||||
border-color: @invertedShapeBorderColor;
|
||||
}
|
||||
|
||||
/* White Dimmer (Inverted) */
|
||||
.ui.inverted.dimmer .ui.loader {
|
||||
color: @loaderTextColor;
|
||||
}
|
||||
.ui.inverted.dimmer .ui.loader:before {
|
||||
border-color: @loaderFillColor;
|
||||
}
|
||||
.ui.inverted.dimmer .ui.loader:after {
|
||||
border-color: @shapeBorderColor;
|
||||
}
|
||||
|
||||
/*******************************
|
||||
Types
|
||||
*******************************/
|
||||
|
||||
|
||||
/*-------------------
|
||||
Text
|
||||
--------------------*/
|
||||
|
||||
.ui.text.loader {
|
||||
width: auto !important;
|
||||
height: auto !important;
|
||||
text-align: center;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
|
||||
/*******************************
|
||||
States
|
||||
*******************************/
|
||||
|
||||
.ui.indeterminate.loader:after {
|
||||
animation-direction: @indeterminateDirection;
|
||||
animation-duration: @indeterminateSpeed;
|
||||
}
|
||||
|
||||
.ui.loader.active,
|
||||
.ui.loader.visible {
|
||||
display: block;
|
||||
}
|
||||
.ui.loader.disabled,
|
||||
.ui.loader.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/*******************************
|
||||
Variations
|
||||
*******************************/
|
||||
|
||||
|
||||
/*-------------------
|
||||
Sizes
|
||||
--------------------*/
|
||||
|
||||
|
||||
/* Loader */
|
||||
.ui.inverted.dimmer .ui.mini.loader,
|
||||
.ui.mini.loader {
|
||||
width: @mini;
|
||||
height: @mini;
|
||||
font-size: @miniFontSize;
|
||||
}
|
||||
.ui.inverted.dimmer .ui.tiny.loader,
|
||||
.ui.tiny.loader {
|
||||
width: @tiny;
|
||||
height: @tiny;
|
||||
font-size: @tinyFontSize;
|
||||
}
|
||||
.ui.inverted.dimmer .ui.small.loader,
|
||||
.ui.small.loader {
|
||||
width: @small;
|
||||
height: @small;
|
||||
font-size: @smallFontSize;
|
||||
}
|
||||
.ui.inverted.dimmer .ui.loader,
|
||||
.ui.loader {
|
||||
width: @medium;
|
||||
height: @medium;
|
||||
font-size: @mediumFontSize;
|
||||
}
|
||||
.ui.inverted.dimmer .ui.large.loader,
|
||||
.ui.large.loader {
|
||||
width: @large;
|
||||
height: @large;
|
||||
font-size: @largeFontSize;
|
||||
}
|
||||
.ui.inverted.dimmer .ui.big.loader,
|
||||
.ui.big.loader {
|
||||
width: @big;
|
||||
height: @big;
|
||||
font-size: @bigFontSize;
|
||||
}
|
||||
.ui.inverted.dimmer .ui.huge.loader,
|
||||
.ui.huge.loader {
|
||||
width: @huge;
|
||||
height: @huge;
|
||||
font-size: @hugeFontSize;
|
||||
}
|
||||
.ui.inverted.dimmer .ui.massive.loader,
|
||||
.ui.massive.loader {
|
||||
width: @massive;
|
||||
height: @massive;
|
||||
font-size: @massiveFontSize;
|
||||
}
|
||||
|
||||
/* Text Loader */
|
||||
.ui.mini.text.loader {
|
||||
min-width: @mini;
|
||||
padding-top: (@mini + @textDistance);
|
||||
}
|
||||
.ui.tiny.text.loader {
|
||||
min-width: @tiny;
|
||||
padding-top: (@tiny + @textDistance);
|
||||
}
|
||||
.ui.small.text.loader {
|
||||
min-width: @small;
|
||||
padding-top: (@small + @textDistance);
|
||||
}
|
||||
.ui.text.loader {
|
||||
min-width: @medium;
|
||||
padding-top: (@medium + @textDistance);
|
||||
}
|
||||
.ui.large.text.loader {
|
||||
min-width: @large;
|
||||
padding-top: (@large + @textDistance);
|
||||
}
|
||||
.ui.big.text.loader {
|
||||
min-width: @big;
|
||||
padding-top: (@big + @textDistance);
|
||||
}
|
||||
.ui.huge.text.loader {
|
||||
min-width: @huge;
|
||||
padding-top: (@huge + @textDistance);
|
||||
}
|
||||
.ui.massive.text.loader {
|
||||
min-width: @massive;
|
||||
padding-top: (@massive + @textDistance);
|
||||
}
|
||||
|
||||
|
||||
/*-------------------
|
||||
Inverted
|
||||
--------------------*/
|
||||
|
||||
.ui.inverted.loader {
|
||||
color: @invertedLoaderTextColor
|
||||
}
|
||||
.ui.inverted.loader:before {
|
||||
border-color: @invertedLoaderFillColor;
|
||||
}
|
||||
.ui.inverted.loader:after {
|
||||
border-top-color: @invertedLoaderLineColor;
|
||||
}
|
||||
|
||||
/*-------------------
|
||||
Inline
|
||||
--------------------*/
|
||||
|
||||
.ui.inline.loader {
|
||||
position: relative;
|
||||
vertical-align: @inlineVerticalAlign;
|
||||
margin: @inlineMargin;
|
||||
left: 0em;
|
||||
top: 0em;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.ui.inline.loader.active,
|
||||
.ui.inline.loader.visible {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/* Centered Inline */
|
||||
.ui.centered.inline.loader.active,
|
||||
.ui.centered.inline.loader.visible {
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
|
||||
.loadUIOverrides();
|
||||
154
semantic/src/definitions/elements/rail.less
Normal file
154
semantic/src/definitions/elements/rail.less
Normal file
@@ -0,0 +1,154 @@
|
||||
/*!
|
||||
* # Semantic UI - Rail
|
||||
* http://github.com/semantic-org/semantic-ui/
|
||||
*
|
||||
*
|
||||
* Released under the MIT license
|
||||
* http://opensource.org/licenses/MIT
|
||||
*
|
||||
*/
|
||||
|
||||
/*******************************
|
||||
Theme
|
||||
*******************************/
|
||||
|
||||
@type : 'element';
|
||||
@element : 'rail';
|
||||
|
||||
@import (multiple) '../../theme.config';
|
||||
|
||||
/*******************************
|
||||
Rails
|
||||
*******************************/
|
||||
|
||||
.ui.rail {
|
||||
position: absolute;
|
||||
top: 0%;
|
||||
width: @width;
|
||||
height: @height;
|
||||
}
|
||||
|
||||
.ui.left.rail {
|
||||
left: auto;
|
||||
right: 100%;
|
||||
padding: 0em @splitDistance 0em 0em;
|
||||
margin: 0em @splitDistance 0em 0em;
|
||||
}
|
||||
|
||||
.ui.right.rail {
|
||||
left: 100%;
|
||||
right: auto;
|
||||
padding: 0em 0em 0em @splitDistance;
|
||||
margin: 0em 0em 0em @splitDistance;
|
||||
}
|
||||
|
||||
/*******************************
|
||||
Variations
|
||||
*******************************/
|
||||
|
||||
/*--------------
|
||||
Internal
|
||||
---------------*/
|
||||
|
||||
.ui.left.internal.rail {
|
||||
left: 0%;
|
||||
right: auto;
|
||||
padding: 0em 0em 0em @splitDistance;
|
||||
margin: 0em 0em 0em @splitDistance;
|
||||
}
|
||||
|
||||
.ui.right.internal.rail {
|
||||
left: auto;
|
||||
right: 0%;
|
||||
padding: 0em @splitDistance 0em 0em;
|
||||
margin: 0em @splitDistance 0em 0em;
|
||||
}
|
||||
|
||||
|
||||
/*--------------
|
||||
Dividing
|
||||
---------------*/
|
||||
|
||||
.ui.dividing.rail {
|
||||
width: @dividingWidth;
|
||||
}
|
||||
.ui.left.dividing.rail {
|
||||
padding: 0em @splitDividingDistance 0em 0em;
|
||||
margin: 0em @splitDividingDistance 0em 0em;
|
||||
border-right: @dividingBorder;
|
||||
}
|
||||
.ui.right.dividing.rail {
|
||||
border-left: @dividingBorder;
|
||||
padding: 0em 0em 0em @splitDividingDistance;
|
||||
margin: 0em 0em 0em @splitDividingDistance;
|
||||
}
|
||||
|
||||
/*--------------
|
||||
Distance
|
||||
---------------*/
|
||||
|
||||
.ui.close.rail {
|
||||
width: @closeWidth;
|
||||
}
|
||||
.ui.close.left.rail {
|
||||
padding: 0em @splitCloseDistance 0em 0em;
|
||||
margin: 0em @splitCloseDistance 0em 0em;
|
||||
}
|
||||
.ui.close.right.rail {
|
||||
padding: 0em 0em 0em @splitCloseDistance;
|
||||
margin: 0em 0em 0em @splitCloseDistance;
|
||||
}
|
||||
|
||||
.ui.very.close.rail {
|
||||
width: @veryCloseWidth;
|
||||
}
|
||||
.ui.very.close.left.rail {
|
||||
padding: 0em @splitVeryCloseDistance 0em 0em;
|
||||
margin: 0em @splitVeryCloseDistance 0em 0em;
|
||||
}
|
||||
.ui.very.close.right.rail {
|
||||
padding: 0em 0em 0em @splitVeryCloseDistance;
|
||||
margin: 0em 0em 0em @splitVeryCloseDistance;
|
||||
}
|
||||
|
||||
/*--------------
|
||||
Attached
|
||||
---------------*/
|
||||
|
||||
.ui.attached.left.rail,
|
||||
.ui.attached.right.rail {
|
||||
padding: 0em;
|
||||
margin: 0em;
|
||||
}
|
||||
|
||||
/*--------------
|
||||
Sizing
|
||||
---------------*/
|
||||
|
||||
.ui.mini.rail {
|
||||
font-size: @mini;
|
||||
}
|
||||
.ui.tiny.rail {
|
||||
font-size: @tiny;
|
||||
}
|
||||
.ui.small.rail {
|
||||
font-size: @small;
|
||||
}
|
||||
.ui.rail {
|
||||
font-size: @medium;
|
||||
}
|
||||
.ui.large.rail {
|
||||
font-size: @large;
|
||||
}
|
||||
.ui.big.rail {
|
||||
font-size: @big;
|
||||
}
|
||||
.ui.huge.rail {
|
||||
font-size: @huge;
|
||||
}
|
||||
.ui.massive.rail {
|
||||
font-size: @massive;
|
||||
}
|
||||
|
||||
|
||||
.loadUIOverrides();
|
||||
265
semantic/src/definitions/elements/reveal.less
Normal file
265
semantic/src/definitions/elements/reveal.less
Normal file
@@ -0,0 +1,265 @@
|
||||
/*!
|
||||
* # Semantic UI - Reveal
|
||||
* http://github.com/semantic-org/semantic-ui/
|
||||
*
|
||||
*
|
||||
* Released under the MIT license
|
||||
* http://opensource.org/licenses/MIT
|
||||
*
|
||||
*/
|
||||
|
||||
/*******************************
|
||||
Theme
|
||||
*******************************/
|
||||
|
||||
@type : 'element';
|
||||
@element : 'reveal';
|
||||
|
||||
@import (multiple) '../../theme.config';
|
||||
|
||||
/*******************************
|
||||
Reveal
|
||||
*******************************/
|
||||
|
||||
.ui.reveal {
|
||||
display: inherit;
|
||||
position: relative !important;
|
||||
font-size: 0em !important;
|
||||
}
|
||||
|
||||
.ui.reveal > .visible.content {
|
||||
position: absolute !important;
|
||||
top: 0em !important;
|
||||
left: 0em !important;
|
||||
z-index: @topZIndex !important;
|
||||
transition: @transition;
|
||||
}
|
||||
.ui.reveal > .hidden.content {
|
||||
position: relative !important;
|
||||
z-index: @bottomZIndex !important;
|
||||
}
|
||||
|
||||
/* Make sure hovered element is on top of other reveal */
|
||||
.ui.active.reveal .visible.content,
|
||||
.ui.reveal:hover .visible.content {
|
||||
z-index: @activeZIndex !important;
|
||||
}
|
||||
|
||||
|
||||
/*******************************
|
||||
Types
|
||||
*******************************/
|
||||
|
||||
|
||||
/*--------------
|
||||
Slide
|
||||
---------------*/
|
||||
|
||||
.ui.slide.reveal {
|
||||
position: relative !important;
|
||||
overflow: hidden !important;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.ui.slide.reveal > .content {
|
||||
display: block;
|
||||
width: 100%;
|
||||
float: left;
|
||||
|
||||
margin: 0em;
|
||||
transition: @slideTransition;
|
||||
}
|
||||
|
||||
.ui.slide.reveal > .visible.content {
|
||||
position: relative !important;
|
||||
}
|
||||
.ui.slide.reveal > .hidden.content {
|
||||
position: absolute !important;
|
||||
left: 0% !important;
|
||||
width: 100% !important;
|
||||
transform: translateX(100%) !important;
|
||||
}
|
||||
.ui.slide.active.reveal > .visible.content,
|
||||
.ui.slide.reveal:hover > .visible.content {
|
||||
transform: translateX(-100%) !important;
|
||||
}
|
||||
.ui.slide.active.reveal > .hidden.content,
|
||||
.ui.slide.reveal:hover > .hidden.content {
|
||||
transform: translateX(0%) !important;
|
||||
}
|
||||
|
||||
.ui.slide.right.reveal > .visible.content {
|
||||
transform: translateX(0%) !important;
|
||||
}
|
||||
.ui.slide.right.reveal > .hidden.content {
|
||||
transform: translateX(-100%) !important;
|
||||
}
|
||||
.ui.slide.right.active.reveal > .visible.content,
|
||||
.ui.slide.right.reveal:hover > .visible.content {
|
||||
transform: translateX(100%) !important;
|
||||
}
|
||||
.ui.slide.right.active.reveal > .hidden.content,
|
||||
.ui.slide.right.reveal:hover > .hidden.content {
|
||||
transform: translateX(0%) !important;
|
||||
}
|
||||
|
||||
.ui.slide.up.reveal > .hidden.content {
|
||||
transform: translateY(100%) !important;
|
||||
}
|
||||
.ui.slide.up.active.reveal > .visible.content,
|
||||
.ui.slide.up.reveal:hover > .visible.content {
|
||||
transform: translateY(-100%) !important;
|
||||
}
|
||||
.ui.slide.up.active.reveal > .hidden.content,
|
||||
.ui.slide.up.reveal:hover > .hidden.content {
|
||||
transform: translateY(0%) !important;
|
||||
}
|
||||
|
||||
.ui.slide.down.reveal > .hidden.content {
|
||||
transform: translateY(-100%) !important;
|
||||
}
|
||||
.ui.slide.down.active.reveal > .visible.content,
|
||||
.ui.slide.down.reveal:hover > .visible.content {
|
||||
transform: translateY(100%) !important;
|
||||
}
|
||||
.ui.slide.down.active.reveal > .hidden.content,
|
||||
.ui.slide.down.reveal:hover > .hidden.content {
|
||||
transform: translateY(0%) !important;
|
||||
}
|
||||
|
||||
|
||||
/*--------------
|
||||
Fade
|
||||
---------------*/
|
||||
|
||||
.ui.fade.reveal > .visible.content {
|
||||
opacity: 1;
|
||||
}
|
||||
.ui.fade.active.reveal > .visible.content,
|
||||
.ui.fade.reveal:hover > .visible.content {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
|
||||
/*--------------
|
||||
Move
|
||||
---------------*/
|
||||
|
||||
.ui.move.reveal {
|
||||
position: relative !important;
|
||||
overflow: hidden !important;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.ui.move.reveal > .content {
|
||||
display: block;
|
||||
float: left;
|
||||
|
||||
margin: 0em;
|
||||
transition: @moveTransition;
|
||||
}
|
||||
|
||||
.ui.move.reveal > .visible.content {
|
||||
position: relative !important;
|
||||
}
|
||||
.ui.move.reveal > .hidden.content {
|
||||
position: absolute !important;
|
||||
left: 0% !important;
|
||||
width: 100% !important;
|
||||
}
|
||||
.ui.move.active.reveal > .visible.content,
|
||||
.ui.move.reveal:hover > .visible.content {
|
||||
transform: translateX(-100%) !important;
|
||||
}
|
||||
.ui.move.right.active.reveal > .visible.content,
|
||||
.ui.move.right.reveal:hover > .visible.content {
|
||||
transform: translateX(100%) !important;
|
||||
}
|
||||
.ui.move.up.active.reveal > .visible.content,
|
||||
.ui.move.up.reveal:hover > .visible.content {
|
||||
transform: translateY(-100%) !important;
|
||||
}
|
||||
.ui.move.down.active.reveal > .visible.content,
|
||||
.ui.move.down.reveal:hover > .visible.content {
|
||||
transform: translateY(100%) !important;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*--------------
|
||||
Rotate
|
||||
---------------*/
|
||||
|
||||
.ui.rotate.reveal > .visible.content {
|
||||
transition-duration: @transitionDuration;
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
.ui.rotate.reveal > .visible.content,
|
||||
.ui.rotate.right.reveal > .visible.content {
|
||||
transform-origin: bottom right;
|
||||
}
|
||||
.ui.rotate.active.reveal > .visible.content,
|
||||
.ui.rotate.reveal:hover > .visible.content,
|
||||
.ui.rotate.right.active.reveal > .visible.content,
|
||||
.ui.rotate.right.reveal:hover > .visible.content {
|
||||
transform: rotate(@rotateDegrees);
|
||||
}
|
||||
|
||||
.ui.rotate.left.reveal > .visible.content {
|
||||
transform-origin: bottom left;
|
||||
}
|
||||
.ui.rotate.left.active.reveal > .visible.content,
|
||||
.ui.rotate.left.reveal:hover > .visible.content {
|
||||
transform: rotate(-@rotateDegrees);
|
||||
}
|
||||
|
||||
/*******************************
|
||||
States
|
||||
*******************************/
|
||||
|
||||
.ui.disabled.reveal:hover > .visible.visible.content {
|
||||
position: static !important;
|
||||
display: block !important;
|
||||
opacity: 1 !important;
|
||||
top: 0 !important;
|
||||
left: 0 !important;
|
||||
right: auto !important;
|
||||
bottom: auto !important;
|
||||
transform: none !important;
|
||||
}
|
||||
.ui.disabled.reveal:hover > .hidden.hidden.content {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
|
||||
/*******************************
|
||||
Variations
|
||||
*******************************/
|
||||
|
||||
/*--------------
|
||||
Visible
|
||||
---------------*/
|
||||
|
||||
.ui.visible.reveal {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
/*--------------
|
||||
Instant
|
||||
---------------*/
|
||||
|
||||
.ui.instant.reveal > .content {
|
||||
transition-delay: 0s !important;
|
||||
}
|
||||
|
||||
|
||||
/*--------------
|
||||
Sizing
|
||||
---------------*/
|
||||
|
||||
.ui.reveal > .content {
|
||||
font-size: @medium !important;
|
||||
}
|
||||
|
||||
.loadUIOverrides();
|
||||
768
semantic/src/definitions/elements/segment.less
Normal file
768
semantic/src/definitions/elements/segment.less
Normal file
@@ -0,0 +1,768 @@
|
||||
/*!
|
||||
* # Semantic UI - Segment
|
||||
* http://github.com/semantic-org/semantic-ui/
|
||||
*
|
||||
*
|
||||
* Released under the MIT license
|
||||
* http://opensource.org/licenses/MIT
|
||||
*
|
||||
*/
|
||||
|
||||
/*******************************
|
||||
Theme
|
||||
*******************************/
|
||||
|
||||
@type : 'element';
|
||||
@element : 'segment';
|
||||
|
||||
@import (multiple) '../../theme.config';
|
||||
|
||||
/*******************************
|
||||
Segment
|
||||
*******************************/
|
||||
|
||||
.ui.segment {
|
||||
position: relative;
|
||||
background: @background;
|
||||
box-shadow: @boxShadow;
|
||||
margin: @margin;
|
||||
padding: @padding;
|
||||
border-radius: @borderRadius;
|
||||
border: @border;
|
||||
}
|
||||
|
||||
.ui.segment:first-child {
|
||||
margin-top: 0em;
|
||||
}
|
||||
.ui.segment:last-child {
|
||||
margin-bottom: 0em;
|
||||
}
|
||||
|
||||
|
||||
/* Vertical */
|
||||
.ui.vertical.segment {
|
||||
margin: 0em;
|
||||
padding-left: 0em;
|
||||
padding-right: 0em;
|
||||
|
||||
background: none transparent;
|
||||
border-radius: 0px;
|
||||
box-shadow: none;
|
||||
border: none;
|
||||
border-bottom: @borderWidth solid @borderColor;
|
||||
}
|
||||
.ui.vertical.segment:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
|
||||
/*-------------------
|
||||
Loose Coupling
|
||||
--------------------*/
|
||||
|
||||
/* Header */
|
||||
.ui.inverted.segment > .ui.header {
|
||||
color: @white;
|
||||
}
|
||||
|
||||
/* Label */
|
||||
.ui[class*="bottom attached"].segment > [class*="top attached"].label {
|
||||
border-top-left-radius: 0em;
|
||||
border-top-right-radius: 0em;
|
||||
}
|
||||
.ui[class*="top attached"].segment > [class*="bottom attached"].label {
|
||||
border-bottom-left-radius: 0em;
|
||||
border-bottom-right-radius: 0em;
|
||||
}
|
||||
.ui.attached.segment:not(.top):not(.bottom) > [class*="top attached"].label {
|
||||
border-top-left-radius: 0em;
|
||||
border-top-right-radius: 0em;
|
||||
}
|
||||
.ui.attached.segment:not(.top):not(.bottom) > [class*="bottom attached"].label {
|
||||
border-bottom-left-radius: 0em;
|
||||
border-bottom-right-radius: 0em;
|
||||
}
|
||||
|
||||
/* Grid */
|
||||
.ui.page.grid.segment,
|
||||
.ui.grid > .row > .ui.segment.column,
|
||||
.ui.grid > .ui.segment.column {
|
||||
padding-top: @pageGridMargin;
|
||||
padding-bottom: @pageGridMargin;
|
||||
}
|
||||
.ui.grid.segment {
|
||||
margin: @margin;
|
||||
border-radius: @borderRadius;
|
||||
}
|
||||
|
||||
/* Table */
|
||||
.ui.basic.table.segment {
|
||||
background: @background;
|
||||
border: @border;
|
||||
box-shadow: @boxShadow;
|
||||
}
|
||||
.ui[class*="very basic"].table.segment {
|
||||
padding: @padding;
|
||||
}
|
||||
|
||||
|
||||
/*******************************
|
||||
Types
|
||||
*******************************/
|
||||
|
||||
/*-------------------
|
||||
Piled
|
||||
--------------------*/
|
||||
|
||||
.ui.piled.segments,
|
||||
.ui.piled.segment {
|
||||
margin: @piledMargin 0em;
|
||||
box-shadow: @piledBoxShadow;
|
||||
z-index: @piledZIndex;
|
||||
}
|
||||
.ui.piled.segment:first-child {
|
||||
margin-top: 0em;
|
||||
}
|
||||
.ui.piled.segment:last-child {
|
||||
margin-bottom: 0em;
|
||||
}
|
||||
.ui.piled.segments:after,
|
||||
.ui.piled.segments:before,
|
||||
.ui.piled.segment:after,
|
||||
.ui.piled.segment:before {
|
||||
background-color: @white;
|
||||
visibility: visible;
|
||||
content: '';
|
||||
display: block;
|
||||
height: 100%;
|
||||
left: 0px;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
border: @piledBorder;
|
||||
box-shadow: @piledBoxShadow;
|
||||
}
|
||||
.ui.piled.segments:before,
|
||||
.ui.piled.segment:before {
|
||||
transform: rotate(-@piledDegrees);
|
||||
top: 0;
|
||||
z-index: -2;
|
||||
}
|
||||
.ui.piled.segments:after,
|
||||
.ui.piled.segment:after {
|
||||
transform: rotate(@piledDegrees);
|
||||
top: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
/* Piled Attached */
|
||||
.ui[class*="top attached"].piled.segment {
|
||||
margin-top: @piledMargin;
|
||||
margin-bottom: 0em;
|
||||
}
|
||||
.ui.piled.segment[class*="top attached"]:first-child {
|
||||
margin-top: 0em;
|
||||
}
|
||||
.ui.piled.segment[class*="bottom attached"] {
|
||||
margin-top: 0em;
|
||||
margin-bottom: @piledMargin;
|
||||
}
|
||||
.ui.piled.segment[class*="bottom attached"]:last-child {
|
||||
margin-bottom: 0em;
|
||||
}
|
||||
|
||||
/*-------------------
|
||||
Stacked
|
||||
--------------------*/
|
||||
|
||||
.ui.stacked.segment {
|
||||
padding-bottom: @stackedPadding;
|
||||
}
|
||||
.ui.stacked.segments:before,
|
||||
.ui.stacked.segments:after,
|
||||
.ui.stacked.segment:before,
|
||||
.ui.stacked.segment:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -(@stackedHeight / 2);
|
||||
left: 0%;
|
||||
|
||||
border-top: 1px solid @borderColor;
|
||||
background: @stackedPageBackground;
|
||||
|
||||
width: 100%;
|
||||
height: @stackedHeight;
|
||||
visibility: visible;
|
||||
}
|
||||
.ui.stacked.segments:before,
|
||||
.ui.stacked.segment:before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Add additional page */
|
||||
.ui.tall.stacked.segments:before,
|
||||
.ui.tall.stacked.segment:before {
|
||||
display: block;
|
||||
bottom: 0px;
|
||||
}
|
||||
|
||||
/* Inverted */
|
||||
.ui.stacked.inverted.segments:before,
|
||||
.ui.stacked.inverted.segments:after,
|
||||
.ui.stacked.inverted.segment:before,
|
||||
.ui.stacked.inverted.segment:after {
|
||||
background-color: @subtleTransparentBlack;
|
||||
border-top: 1px solid @selectedBorderColor;
|
||||
}
|
||||
|
||||
/*-------------------
|
||||
Padded
|
||||
--------------------*/
|
||||
|
||||
.ui.padded.segment {
|
||||
padding: @paddedSegmentPadding;
|
||||
}
|
||||
|
||||
.ui[class*="very padded"].segment {
|
||||
padding: @veryPaddedSegmentPadding;
|
||||
}
|
||||
|
||||
/*-------------------
|
||||
Compact
|
||||
--------------------*/
|
||||
|
||||
.ui.compact.segment {
|
||||
display: table;
|
||||
}
|
||||
|
||||
/* Compact Group */
|
||||
.ui.compact.segments {
|
||||
display: inline-flex;
|
||||
}
|
||||
.ui.compact.segments .segment,
|
||||
.ui.segments .compact.segment {
|
||||
display: block;
|
||||
flex: 0 1 auto;
|
||||
}
|
||||
|
||||
/*-------------------
|
||||
Circular
|
||||
--------------------*/
|
||||
|
||||
.ui.circular.segment {
|
||||
display: table-cell;
|
||||
padding: @circularPadding;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
border-radius: 500em;
|
||||
}
|
||||
|
||||
/*-------------------
|
||||
Raised
|
||||
--------------------*/
|
||||
|
||||
.ui.raised.segments,
|
||||
.ui.raised.segment {
|
||||
box-shadow: @raisedBoxShadow;
|
||||
}
|
||||
|
||||
|
||||
/*******************************
|
||||
Groups
|
||||
*******************************/
|
||||
|
||||
/* Group */
|
||||
.ui.segments {
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
margin: @groupedMargin;
|
||||
border: @groupedBorder;
|
||||
box-shadow: @groupedBoxShadow;
|
||||
border-radius: @groupedBorderRadius;
|
||||
}
|
||||
.ui.segments:first-child {
|
||||
margin-top: 0em;
|
||||
}
|
||||
.ui.segments:last-child {
|
||||
margin-bottom: 0em;
|
||||
}
|
||||
|
||||
|
||||
/* Nested Segment */
|
||||
.ui.segments > .segment {
|
||||
top: 0px;
|
||||
bottom: 0px;
|
||||
border-radius: 0px;
|
||||
margin: @groupedSegmentMargin;
|
||||
width: @groupedSegmentWidth;
|
||||
box-shadow: @groupedSegmentBoxShadow;
|
||||
border: @groupedSegmentBorder;
|
||||
border-top: @groupedSegmentDivider;
|
||||
}
|
||||
|
||||
.ui.segments:not(.horizontal) > .segment:first-child {
|
||||
top: @attachedTopOffset;
|
||||
bottom: 0px;
|
||||
border-top: none;
|
||||
margin-top: 0em;
|
||||
bottom: 0px;
|
||||
margin-bottom: 0em;
|
||||
top: @attachedTopOffset;
|
||||
border-radius: @borderRadius @borderRadius 0em 0em;
|
||||
}
|
||||
|
||||
/* Bottom */
|
||||
.ui.segments:not(.horizontal) > .segment:last-child {
|
||||
top: @attachedBottomOffset;
|
||||
bottom: 0px;
|
||||
margin-top: 0em;
|
||||
margin-bottom: 0em;
|
||||
box-shadow: @attachedBottomBoxShadow;
|
||||
border-radius: 0em 0em @borderRadius @borderRadius;
|
||||
}
|
||||
|
||||
/* Only */
|
||||
.ui.segments:not(.horizontal) > .segment:only-child {
|
||||
border-radius: @borderRadius;
|
||||
}
|
||||
|
||||
|
||||
/* Nested Group */
|
||||
.ui.segments > .ui.segments {
|
||||
border-top: @groupedSegmentDivider;
|
||||
margin: @nestedGroupMargin;
|
||||
}
|
||||
.ui.segments > .segments:first-child {
|
||||
border-top: none;
|
||||
}
|
||||
.ui.segments > .segment + .segments:not(.horizontal) {
|
||||
margin-top: 0em;
|
||||
}
|
||||
|
||||
/* Horizontal Group */
|
||||
.ui.horizontal.segments {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
background-color: transparent;
|
||||
border-radius: 0px;
|
||||
padding: 0em;
|
||||
background-color: @background;
|
||||
box-shadow: @boxShadow;
|
||||
margin: @margin;
|
||||
border-radius: @borderRadius;
|
||||
border: @border;
|
||||
}
|
||||
|
||||
/* Nested Horizontal Group */
|
||||
.ui.segments > .horizontal.segments {
|
||||
margin: 0em;
|
||||
background-color: transparent;
|
||||
border-radius: 0px;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
border-top: @groupedSegmentDivider;
|
||||
}
|
||||
|
||||
/* Horizontal Segment */
|
||||
.ui.horizontal.segments > .segment {
|
||||
flex: 1 1 auto;
|
||||
-ms-flex: 1 1 0px; /* Solves #2550 MS Flex */
|
||||
margin: 0em;
|
||||
min-width: 0px;
|
||||
background-color: transparent;
|
||||
border-radius: 0px;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
border-left: @borderWidth solid @borderColor;
|
||||
}
|
||||
|
||||
/* Border Fixes */
|
||||
.ui.segments > .horizontal.segments:first-child {
|
||||
border-top: none;
|
||||
}
|
||||
.ui.horizontal.segments > .segment:first-child {
|
||||
border-left: none;
|
||||
}
|
||||
|
||||
|
||||
/*******************************
|
||||
States
|
||||
*******************************/
|
||||
|
||||
/*--------------
|
||||
Disabled
|
||||
---------------*/
|
||||
|
||||
.ui.disabled.segment {
|
||||
opacity: @disabledOpacity;
|
||||
color: @disabledTextColor;
|
||||
}
|
||||
|
||||
/*--------------
|
||||
Loading
|
||||
---------------*/
|
||||
|
||||
.ui.loading.segment {
|
||||
position: relative;
|
||||
cursor: default;
|
||||
pointer-events: none;
|
||||
text-shadow: none !important;
|
||||
color: transparent !important;
|
||||
transition: all 0s linear;
|
||||
}
|
||||
.ui.loading.segment:before {
|
||||
position: absolute;
|
||||
content: '';
|
||||
top: 0%;
|
||||
left: 0%;
|
||||
background: @loaderDimmerColor;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: @borderRadius;
|
||||
z-index: @loaderDimmerZIndex;
|
||||
}
|
||||
.ui.loading.segment:after {
|
||||
position: absolute;
|
||||
content: '';
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
|
||||
margin: @loaderMargin;
|
||||
width: @loaderSize;
|
||||
height: @loaderSize;
|
||||
|
||||
animation: segment-spin @loaderSpeed linear;
|
||||
animation-iteration-count: infinite;
|
||||
|
||||
border-radius: @circularRadius;
|
||||
|
||||
border-color: @loaderLineColor @loaderFillColor @loaderFillColor @loaderFillColor;
|
||||
border-style: solid;
|
||||
border-width: @loaderLineWidth;
|
||||
|
||||
box-shadow: 0px 0px 0px 1px transparent;
|
||||
visibility: visible;
|
||||
z-index: @loaderLineZIndex;
|
||||
}
|
||||
|
||||
@keyframes segment-spin {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*******************************
|
||||
Variations
|
||||
*******************************/
|
||||
|
||||
|
||||
/*-------------------
|
||||
Basic
|
||||
--------------------*/
|
||||
|
||||
.ui.basic.segment {
|
||||
background: @basicBackground;
|
||||
box-shadow: @basicBoxShadow;
|
||||
border: @basicBorder;
|
||||
border-radius: @basicBorderRadius;
|
||||
}
|
||||
|
||||
/*-------------------
|
||||
Clearing
|
||||
--------------------*/
|
||||
|
||||
.ui.clearing.segment:after {
|
||||
content: ".";
|
||||
display: block;
|
||||
height: 0;
|
||||
clear: both;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
/*-------------------
|
||||
Colors
|
||||
--------------------*/
|
||||
|
||||
/* Red */
|
||||
.ui.red.segment:not(.inverted) {
|
||||
border-top: @coloredBorderSize solid @red;
|
||||
}
|
||||
.ui.inverted.red.segment {
|
||||
background-color: @red !important;
|
||||
color: @white !important;
|
||||
}
|
||||
|
||||
/* Orange */
|
||||
.ui.orange.segment:not(.inverted) {
|
||||
border-top: @coloredBorderSize solid @orange;
|
||||
}
|
||||
.ui.inverted.orange.segment {
|
||||
background-color: @orange !important;
|
||||
color: @white !important;
|
||||
}
|
||||
|
||||
/* Yellow */
|
||||
.ui.yellow.segment:not(.inverted) {
|
||||
border-top: @coloredBorderSize solid @yellow;
|
||||
}
|
||||
.ui.inverted.yellow.segment {
|
||||
background-color: @yellow !important;
|
||||
color: @white !important;
|
||||
}
|
||||
|
||||
/* Olive */
|
||||
.ui.olive.segment:not(.inverted) {
|
||||
border-top: @coloredBorderSize solid @olive;
|
||||
}
|
||||
.ui.inverted.olive.segment {
|
||||
background-color: @olive !important;
|
||||
color: @white !important;
|
||||
}
|
||||
|
||||
/* Green */
|
||||
.ui.green.segment:not(.inverted) {
|
||||
border-top: @coloredBorderSize solid @green;
|
||||
}
|
||||
.ui.inverted.green.segment {
|
||||
background-color: @green !important;
|
||||
color: @white !important;
|
||||
}
|
||||
|
||||
/* Teal */
|
||||
.ui.teal.segment:not(.inverted) {
|
||||
border-top: @coloredBorderSize solid @teal;
|
||||
}
|
||||
.ui.inverted.teal.segment {
|
||||
background-color: @teal !important;
|
||||
color: @white !important;
|
||||
}
|
||||
|
||||
/* Blue */
|
||||
.ui.blue.segment:not(.inverted) {
|
||||
border-top: @coloredBorderSize solid @blue;
|
||||
}
|
||||
.ui.inverted.blue.segment {
|
||||
background-color: @blue !important;
|
||||
color: @white !important;
|
||||
}
|
||||
|
||||
/* Violet */
|
||||
.ui.violet.segment:not(.inverted) {
|
||||
border-top: @coloredBorderSize solid @violet;
|
||||
}
|
||||
.ui.inverted.violet.segment {
|
||||
background-color: @violet !important;
|
||||
color: @white !important;
|
||||
}
|
||||
|
||||
/* Purple */
|
||||
.ui.purple.segment:not(.inverted) {
|
||||
border-top: @coloredBorderSize solid @purple;
|
||||
}
|
||||
.ui.inverted.purple.segment {
|
||||
background-color: @purple !important;
|
||||
color: @white !important;
|
||||
}
|
||||
|
||||
/* Pink */
|
||||
.ui.pink.segment:not(.inverted) {
|
||||
border-top: @coloredBorderSize solid @pink;
|
||||
}
|
||||
.ui.inverted.pink.segment {
|
||||
background-color: @pink !important;
|
||||
color: @white !important;
|
||||
}
|
||||
|
||||
/* Brown */
|
||||
.ui.brown.segment:not(.inverted) {
|
||||
border-top: @coloredBorderSize solid @brown;
|
||||
}
|
||||
.ui.inverted.brown.segment {
|
||||
background-color: @brown !important;
|
||||
color: @white !important;
|
||||
}
|
||||
|
||||
/* Grey */
|
||||
.ui.grey.segment:not(.inverted) {
|
||||
border-top: @coloredBorderSize solid @grey;
|
||||
}
|
||||
.ui.inverted.grey.segment {
|
||||
background-color: @grey !important;
|
||||
color: @white !important;
|
||||
}
|
||||
|
||||
/* Black */
|
||||
.ui.black.segment:not(.inverted) {
|
||||
border-top: @coloredBorderSize solid @black;
|
||||
}
|
||||
.ui.inverted.black.segment {
|
||||
background-color: @black !important;
|
||||
color: @white !important;
|
||||
}
|
||||
|
||||
/*-------------------
|
||||
Aligned
|
||||
--------------------*/
|
||||
|
||||
.ui[class*="left aligned"].segment {
|
||||
text-align: left;
|
||||
}
|
||||
.ui[class*="right aligned"].segment {
|
||||
text-align: right;
|
||||
}
|
||||
.ui[class*="center aligned"].segment {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/*-------------------
|
||||
Floated
|
||||
--------------------*/
|
||||
|
||||
.ui.floated.segment,
|
||||
.ui[class*="left floated"].segment {
|
||||
float: left;
|
||||
margin-right: @floatedDistance;
|
||||
}
|
||||
.ui[class*="right floated"].segment {
|
||||
float: right;
|
||||
margin-left: @floatedDistance;
|
||||
}
|
||||
|
||||
|
||||
/*-------------------
|
||||
Inverted
|
||||
--------------------*/
|
||||
|
||||
.ui.inverted.segment {
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
.ui.inverted.segment,
|
||||
.ui.primary.inverted.segment {
|
||||
background: @invertedBackground;
|
||||
color: @invertedTextColor;
|
||||
}
|
||||
|
||||
/* Nested */
|
||||
.ui.inverted.segment .segment {
|
||||
color: @textColor;
|
||||
}
|
||||
.ui.inverted.segment .inverted.segment {
|
||||
color: @invertedTextColor;
|
||||
}
|
||||
|
||||
/* Attached */
|
||||
.ui.inverted.attached.segment {
|
||||
border-color: @solidWhiteBorderColor;
|
||||
}
|
||||
|
||||
/*-------------------
|
||||
Emphasis
|
||||
--------------------*/
|
||||
|
||||
/* Secondary */
|
||||
.ui.secondary.segment {
|
||||
background: @secondaryBackground;
|
||||
color: @secondaryColor;
|
||||
}
|
||||
.ui.secondary.inverted.segment {
|
||||
background: @secondaryInvertedBackground;
|
||||
color: @secondaryInvertedColor;
|
||||
}
|
||||
|
||||
/* Tertiary */
|
||||
.ui.tertiary.segment {
|
||||
background: @tertiaryBackground;
|
||||
color: @tertiaryColor;
|
||||
}
|
||||
.ui.tertiary.inverted.segment {
|
||||
background: @tertiaryInvertedBackground;
|
||||
color: @tertiaryInvertedColor;
|
||||
}
|
||||
|
||||
|
||||
/*-------------------
|
||||
Attached
|
||||
--------------------*/
|
||||
|
||||
/* Middle */
|
||||
.ui.attached.segment {
|
||||
top: 0px;
|
||||
bottom: 0px;
|
||||
border-radius: 0px;
|
||||
margin: 0em @attachedHorizontalOffset;
|
||||
width: @attachedWidth;
|
||||
max-width: @attachedWidth;
|
||||
box-shadow: @attachedBoxShadow;
|
||||
border: @attachedBorder;
|
||||
}
|
||||
.ui.attached:not(.message) + .ui.attached.segment:not(.top) {
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
/* Top */
|
||||
.ui[class*="top attached"].segment {
|
||||
bottom: 0px;
|
||||
margin-bottom: 0em;
|
||||
top: @attachedTopOffset;
|
||||
margin-top: @verticalMargin;
|
||||
border-radius: @borderRadius @borderRadius 0em 0em;
|
||||
}
|
||||
.ui.segment[class*="top attached"]:first-child {
|
||||
margin-top: 0em;
|
||||
}
|
||||
|
||||
/* Bottom */
|
||||
.ui.segment[class*="bottom attached"] {
|
||||
bottom: 0px;
|
||||
margin-top: 0em;
|
||||
top: @attachedBottomOffset;
|
||||
margin-bottom: @verticalMargin;
|
||||
box-shadow: @attachedBottomBoxShadow;
|
||||
border-radius: 0em 0em @borderRadius @borderRadius;
|
||||
}
|
||||
.ui.segment[class*="bottom attached"]:last-child {
|
||||
margin-bottom: 0em;
|
||||
}
|
||||
|
||||
/*-------------------
|
||||
Size
|
||||
--------------------*/
|
||||
|
||||
.ui.mini.segments .segment,
|
||||
.ui.mini.segment {
|
||||
font-size: @mini;
|
||||
}
|
||||
.ui.tiny.segments .segment,
|
||||
.ui.tiny.segment {
|
||||
font-size: @tiny;
|
||||
}
|
||||
.ui.small.segments .segment,
|
||||
.ui.small.segment {
|
||||
font-size: @small;
|
||||
}
|
||||
.ui.segments .segment,
|
||||
.ui.segment {
|
||||
font-size: @medium;
|
||||
}
|
||||
.ui.large.segments .segment,
|
||||
.ui.large.segment {
|
||||
font-size: @large;
|
||||
}
|
||||
.ui.big.segments .segment,
|
||||
.ui.big.segment {
|
||||
font-size: @big;
|
||||
}
|
||||
.ui.huge.segments .segment,
|
||||
.ui.huge.segment {
|
||||
font-size: @huge;
|
||||
}
|
||||
.ui.massive.segments .segment,
|
||||
.ui.massive.segment {
|
||||
font-size: @massive;
|
||||
}
|
||||
|
||||
.loadUIOverrides();
|
||||
562
semantic/src/definitions/elements/step.less
Normal file
562
semantic/src/definitions/elements/step.less
Normal file
@@ -0,0 +1,562 @@
|
||||
/*!
|
||||
* # Semantic UI - Step
|
||||
* http://github.com/semantic-org/semantic-ui/
|
||||
*
|
||||
*
|
||||
* Released under the MIT license
|
||||
* http://opensource.org/licenses/MIT
|
||||
*
|
||||
*/
|
||||
|
||||
|
||||
/*******************************
|
||||
Step
|
||||
*******************************/
|
||||
|
||||
/*--------------
|
||||
Load Theme
|
||||
---------------*/
|
||||
|
||||
@type : 'element';
|
||||
@element : 'step';
|
||||
|
||||
@import (multiple) '../../theme.config';
|
||||
|
||||
/*******************************
|
||||
Plural
|
||||
*******************************/
|
||||
|
||||
.ui.steps {
|
||||
display: inline-flex;
|
||||
flex-direction: row;
|
||||
align-items: stretch;
|
||||
margin: @stepMargin;
|
||||
background: @stepsBackground;
|
||||
box-shadow: @stepsBoxShadow;
|
||||
line-height: @lineHeight;
|
||||
border-radius: @stepsBorderRadius;
|
||||
border: @stepsBorder;
|
||||
}
|
||||
|
||||
/* First Steps */
|
||||
.ui.steps:first-child {
|
||||
margin-top: 0em;
|
||||
}
|
||||
|
||||
/* Last Steps */
|
||||
.ui.steps:last-child {
|
||||
margin-bottom: 0em;
|
||||
}
|
||||
|
||||
|
||||
/*******************************
|
||||
Singular
|
||||
*******************************/
|
||||
|
||||
.ui.steps .step {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex: 1 0 auto;
|
||||
flex-wrap: wrap;
|
||||
flex-direction: row;
|
||||
vertical-align: middle;
|
||||
align-items: center;
|
||||
justify-content: @justifyContent;
|
||||
|
||||
margin: @verticalMargin @horizontalMargin;
|
||||
padding: @verticalPadding @horizontalPadding;
|
||||
background: @background;
|
||||
color: @textColor;
|
||||
box-shadow: @boxShadow;
|
||||
border-radius: @borderRadius;
|
||||
border: @border;
|
||||
border-right: @divider;
|
||||
transition: @transition;
|
||||
}
|
||||
|
||||
/* Arrow */
|
||||
.ui.steps .step:after {
|
||||
display: none;
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
content: '';
|
||||
top: @arrowTopOffset;
|
||||
right: @arrowRightOffset;
|
||||
border: medium none;
|
||||
background-color: @arrowBackgroundColor;
|
||||
width: @arrowSize;
|
||||
height: @arrowSize;
|
||||
|
||||
border-style: solid;
|
||||
border-color: @borderColor;
|
||||
border-width: @arrowBorderWidth;
|
||||
|
||||
transition: @transition;
|
||||
transform: translateY(-50%) translateX(50%) rotate(-45deg);
|
||||
}
|
||||
|
||||
/* First Step */
|
||||
.ui.steps .step:first-child {
|
||||
padding-left: @horizontalPadding;
|
||||
border-radius: @stepsBorderRadius 0em 0em @stepsBorderRadius;
|
||||
}
|
||||
|
||||
/* Last Step */
|
||||
.ui.steps .step:last-child {
|
||||
border-radius: 0em @stepsBorderRadius @stepsBorderRadius 0em;
|
||||
}
|
||||
.ui.steps .step:last-child {
|
||||
border-right: none;
|
||||
margin-right: 0em;
|
||||
}
|
||||
|
||||
/* Only Step */
|
||||
.ui.steps .step:only-child {
|
||||
border-radius: @stepsBorderRadius;
|
||||
}
|
||||
|
||||
|
||||
/*******************************
|
||||
Content
|
||||
*******************************/
|
||||
|
||||
/* Title */
|
||||
.ui.steps .step .title {
|
||||
font-family: @titleFontFamily;
|
||||
font-size: @titleFontSize;
|
||||
font-weight: @titleFontWeight;
|
||||
}
|
||||
.ui.steps .step > .title {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Description */
|
||||
.ui.steps .step .description {
|
||||
font-weight: @descriptionFontWeight;
|
||||
font-size: @descriptionFontSize;
|
||||
color: @descriptionColor;
|
||||
}
|
||||
.ui.steps .step > .description {
|
||||
width: 100%;
|
||||
}
|
||||
.ui.steps .step .title ~ .description {
|
||||
margin-top: @descriptionDistance;
|
||||
}
|
||||
|
||||
/* Icon */
|
||||
.ui.steps .step > .icon {
|
||||
line-height: 1;
|
||||
font-size: @iconSize;
|
||||
margin: 0em @iconDistance 0em 0em;
|
||||
}
|
||||
.ui.steps .step > .icon,
|
||||
.ui.steps .step > .icon ~ .content {
|
||||
display: block;
|
||||
flex: 0 1 auto;
|
||||
align-self: @iconAlign;
|
||||
}
|
||||
.ui.steps .step > .icon ~ .content {
|
||||
flex-grow: 1 0 auto;
|
||||
}
|
||||
|
||||
/* Horizontal Icon */
|
||||
.ui.steps:not(.vertical) .step > .icon {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
/* Link */
|
||||
.ui.steps .link.step,
|
||||
.ui.steps a.step {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/*******************************
|
||||
Types
|
||||
*******************************/
|
||||
|
||||
/*--------------
|
||||
Ordered
|
||||
---------------*/
|
||||
|
||||
.ui.ordered.steps {
|
||||
counter-reset: ordered;
|
||||
}
|
||||
.ui.ordered.steps .step:before {
|
||||
display: block;
|
||||
position: static;
|
||||
text-align: center;
|
||||
content: counters(ordered, ".");
|
||||
align-self: @iconAlign;
|
||||
margin-right: @iconDistance;
|
||||
font-size: @iconSize;
|
||||
counter-increment: ordered;
|
||||
font-family: @orderedFontFamily;
|
||||
font-weight: @orderedFontWeight;
|
||||
}
|
||||
|
||||
.ui.ordered.steps .step > * {
|
||||
display: block;
|
||||
align-self: @iconAlign;
|
||||
}
|
||||
|
||||
|
||||
/*--------------
|
||||
Vertical
|
||||
---------------*/
|
||||
|
||||
.ui.vertical.steps {
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
overflow: visible;
|
||||
}
|
||||
.ui.vertical.steps .step {
|
||||
justify-content: flex-start;
|
||||
border-radius: @borderRadius;
|
||||
padding: @verticalPadding @horizontalPadding;
|
||||
border-right: none;
|
||||
border-bottom: @verticalDivider;
|
||||
}
|
||||
.ui.vertical.steps .step:first-child {
|
||||
padding: @verticalPadding @horizontalPadding;
|
||||
border-radius: @stepsBorderRadius @stepsBorderRadius 0em 0em;
|
||||
}
|
||||
.ui.vertical.steps .step:last-child {
|
||||
border-bottom: none;
|
||||
border-radius: 0em 0em @stepsBorderRadius @stepsBorderRadius;
|
||||
}
|
||||
.ui.vertical.steps .step:only-child {
|
||||
border-radius: @stepsBorderRadius;
|
||||
}
|
||||
|
||||
|
||||
/* Arrow */
|
||||
.ui.vertical.steps .step:after {
|
||||
display: none;
|
||||
}
|
||||
.ui.vertical.steps .step:after {
|
||||
top: @verticalArrowTopOffset;
|
||||
right: @verticalArrowRightOffset;
|
||||
border-width: @verticalArrowBorderWidth;
|
||||
}
|
||||
|
||||
.ui.vertical.steps .step:after {
|
||||
display: @verticalArrowDisplay;
|
||||
}
|
||||
.ui.vertical.steps .active.step:after {
|
||||
display: @verticalActiveArrowDisplay;
|
||||
}
|
||||
.ui.vertical.steps .step:last-child:after {
|
||||
display: @verticalLastArrowDisplay;
|
||||
}
|
||||
.ui.vertical.steps .active.step:last-child:after {
|
||||
display: @verticalActiveLastArrowDisplay;
|
||||
}
|
||||
|
||||
|
||||
/*---------------
|
||||
Responsive
|
||||
----------------*/
|
||||
|
||||
/* Mobile (Default) */
|
||||
@media only screen and (max-width: (@largestMobileScreen)) {
|
||||
|
||||
.ui.steps {
|
||||
display: inline-flex;
|
||||
overflow: visible;
|
||||
flex-direction: column;
|
||||
}
|
||||
.ui.steps .step {
|
||||
width: 100% !important;
|
||||
flex-direction: column;
|
||||
border-radius: @borderRadius;
|
||||
padding: @verticalPadding @horizontalPadding;
|
||||
}
|
||||
.ui.steps .step:first-child {
|
||||
padding: @verticalPadding @horizontalPadding;
|
||||
border-radius: @stepsBorderRadius @stepsBorderRadius 0em 0em;
|
||||
}
|
||||
.ui.steps .step:last-child {
|
||||
border-radius: 0em 0em @stepsBorderRadius @stepsBorderRadius;
|
||||
}
|
||||
|
||||
/* Arrow */
|
||||
.ui.steps .step:after {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* Content */
|
||||
.ui.steps .step .content {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Icon */
|
||||
.ui.steps .step > .icon,
|
||||
.ui.ordered.steps .step:before {
|
||||
margin: 0em 0em @mobileIconDistance 0em;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/*******************************
|
||||
States
|
||||
*******************************/
|
||||
|
||||
/* Link Hover */
|
||||
.ui.steps .link.step:hover::after,
|
||||
.ui.steps .link.step:hover,
|
||||
.ui.steps a.step:hover::after,
|
||||
.ui.steps a.step:hover {
|
||||
background: @hoverBackground;
|
||||
color: @hoverColor;
|
||||
}
|
||||
|
||||
/* Link Down */
|
||||
.ui.steps .link.step:active::after,
|
||||
.ui.steps .link.step:active,
|
||||
.ui.steps a.step:active::after,
|
||||
.ui.steps a.step:active {
|
||||
background: @downBackground;
|
||||
color: @downColor;
|
||||
}
|
||||
|
||||
/* Active */
|
||||
.ui.steps .step.active {
|
||||
cursor: auto;
|
||||
background: @activeBackground;
|
||||
}
|
||||
.ui.steps .step.active:after {
|
||||
background: @activeBackground;
|
||||
}
|
||||
.ui.steps .step.active .title {
|
||||
color: @activeColor;
|
||||
}
|
||||
.ui.ordered.steps .step.active:before,
|
||||
.ui.steps .active.step .icon {
|
||||
color: @activeIconColor;
|
||||
}
|
||||
|
||||
/* Active Arrow */
|
||||
.ui.steps .step:after {
|
||||
display: @arrowDisplay;
|
||||
}
|
||||
.ui.steps .active.step:after {
|
||||
display: @activeArrowDisplay;
|
||||
}
|
||||
.ui.steps .step:last-child:after {
|
||||
display: @lastArrowDisplay;
|
||||
}
|
||||
.ui.steps .active.step:last-child:after {
|
||||
display: @activeLastArrowDisplay;
|
||||
}
|
||||
|
||||
/* Active Hover */
|
||||
.ui.steps .link.active.step:hover::after,
|
||||
.ui.steps .link.active.step:hover,
|
||||
.ui.steps a.active.step:hover::after,
|
||||
.ui.steps a.active.step:hover {
|
||||
cursor: pointer;
|
||||
background: @activeHoverBackground;
|
||||
color: @activeHoverColor;
|
||||
}
|
||||
|
||||
/* Completed */
|
||||
.ui.steps .step.completed > .icon:before,
|
||||
.ui.ordered.steps .step.completed:before {
|
||||
color: @completedColor;
|
||||
}
|
||||
|
||||
/* Disabled */
|
||||
.ui.steps .disabled.step {
|
||||
cursor: auto;
|
||||
background: @disabledBackground;
|
||||
pointer-events: none;
|
||||
}
|
||||
.ui.steps .disabled.step,
|
||||
.ui.steps .disabled.step .title,
|
||||
.ui.steps .disabled.step .description {
|
||||
color: @disabledColor;
|
||||
}
|
||||
.ui.steps .disabled.step:after {
|
||||
background: @disabledBackground;
|
||||
}
|
||||
|
||||
|
||||
/*******************************
|
||||
Variations
|
||||
*******************************/
|
||||
|
||||
|
||||
/*--------------
|
||||
Stackable
|
||||
---------------*/
|
||||
|
||||
/* Tablet Or Below */
|
||||
@media only screen and (max-width: @largestTabletScreen) {
|
||||
|
||||
.ui[class*="tablet stackable"].steps {
|
||||
display: inline-flex;
|
||||
overflow: visible;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* Steps */
|
||||
.ui[class*="tablet stackable"].steps .step {
|
||||
flex-direction: column;
|
||||
border-radius: @borderRadius;
|
||||
padding: @verticalPadding @horizontalPadding;
|
||||
}
|
||||
.ui[class*="tablet stackable"].steps .step:first-child {
|
||||
padding: @verticalPadding @horizontalPadding;
|
||||
border-radius: @stepsBorderRadius @stepsBorderRadius 0em 0em;
|
||||
}
|
||||
.ui[class*="tablet stackable"].steps .step:last-child {
|
||||
border-radius: 0em 0em @stepsBorderRadius @stepsBorderRadius;
|
||||
}
|
||||
|
||||
/* Arrow */
|
||||
.ui[class*="tablet stackable"].steps .step:after {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* Content */
|
||||
.ui[class*="tablet stackable"].steps .step .content {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Icon */
|
||||
.ui[class*="tablet stackable"].steps .step > .icon,
|
||||
.ui[class*="tablet stackable"].ordered.steps .step:before {
|
||||
margin: 0em 0em @mobileIconDistance 0em;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/*--------------
|
||||
Fluid
|
||||
---------------*/
|
||||
|
||||
/* Fluid */
|
||||
.ui.fluid.steps {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/*--------------
|
||||
Attached
|
||||
---------------*/
|
||||
|
||||
/* Top */
|
||||
.ui.attached.steps {
|
||||
width: @attachedWidth !important;
|
||||
margin: 0em @attachedHorizontalOffset @attachedVerticalOffset;
|
||||
max-width: @attachedWidth;
|
||||
border-radius: @stepsBorderRadius @stepsBorderRadius 0em 0em;
|
||||
}
|
||||
.ui.attached.steps .step:first-child {
|
||||
border-radius: @stepsBorderRadius 0em 0em 0em;
|
||||
}
|
||||
.ui.attached.steps .step:last-child {
|
||||
border-radius: 0em @stepsBorderRadius 0em 0em;
|
||||
}
|
||||
|
||||
/* Bottom */
|
||||
.ui.bottom.attached.steps {
|
||||
margin: @attachedVerticalOffset @attachedHorizontalOffset 0em;
|
||||
border-radius: 0em 0em @stepsBorderRadius @stepsBorderRadius;
|
||||
}
|
||||
.ui.bottom.attached.steps .step:first-child {
|
||||
border-radius: 0em 0em 0em @stepsBorderRadius;
|
||||
}
|
||||
.ui.bottom.attached.steps .step:last-child {
|
||||
border-radius: 0em 0em @stepsBorderRadius 0em;
|
||||
}
|
||||
|
||||
/*-------------------
|
||||
Evenly Divided
|
||||
--------------------*/
|
||||
|
||||
.ui.one.steps,
|
||||
.ui.two.steps,
|
||||
.ui.three.steps,
|
||||
.ui.four.steps,
|
||||
.ui.five.steps,
|
||||
.ui.six.steps,
|
||||
.ui.seven.steps,
|
||||
.ui.eight.steps {
|
||||
width: 100%;
|
||||
}
|
||||
.ui.one.steps > .step,
|
||||
.ui.two.steps > .step,
|
||||
.ui.three.steps > .step,
|
||||
.ui.four.steps > .step,
|
||||
.ui.five.steps > .step,
|
||||
.ui.six.steps > .step,
|
||||
.ui.seven.steps > .step,
|
||||
.ui.eight.steps > .step {
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
.ui.one.steps > .step {
|
||||
width: 100%;
|
||||
}
|
||||
.ui.two.steps > .step {
|
||||
width: 50%;
|
||||
}
|
||||
.ui.three.steps > .step {
|
||||
width: 33.333%;
|
||||
}
|
||||
.ui.four.steps > .step {
|
||||
width: 25%;
|
||||
}
|
||||
.ui.five.steps > .step {
|
||||
width: 20%;
|
||||
}
|
||||
.ui.six.steps > .step {
|
||||
width: 16.666%;
|
||||
}
|
||||
.ui.seven.steps > .step {
|
||||
width: 14.285%;
|
||||
}
|
||||
.ui.eight.steps > .step {
|
||||
width: 12.500%;
|
||||
}
|
||||
|
||||
/*-------------------
|
||||
Sizes
|
||||
--------------------*/
|
||||
|
||||
|
||||
.ui.mini.steps .step,
|
||||
.ui.mini.step {
|
||||
font-size: @mini;
|
||||
}
|
||||
.ui.tiny.steps .step,
|
||||
.ui.tiny.step {
|
||||
font-size: @tiny;
|
||||
}
|
||||
.ui.small.steps .step,
|
||||
.ui.small.step {
|
||||
font-size: @small;
|
||||
}
|
||||
.ui.steps .step,
|
||||
.ui.step {
|
||||
font-size: @medium;
|
||||
}
|
||||
.ui.large.steps .step,
|
||||
.ui.large.step {
|
||||
font-size: @large;
|
||||
}
|
||||
.ui.big.steps .step,
|
||||
.ui.big.step {
|
||||
font-size: @big;
|
||||
}
|
||||
.ui.huge.steps .step,
|
||||
.ui.huge.step {
|
||||
font-size: @huge;
|
||||
}
|
||||
.ui.massive.steps .step,
|
||||
.ui.massive.step {
|
||||
font-size: @massive;
|
||||
}
|
||||
|
||||
|
||||
.loadUIOverrides();
|
||||
Reference in New Issue
Block a user