richard
/
SemanSemantic-UItic-UI
mirror of https://github.com/Semantic-Org/Semantic-UI.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Adds input, divider variables. Recoded header and segment variables

pull/636/head
jlukic 10 years ago
parent
f79c658422
commit
13b8d93193
22 changed files with 660 additions and 322 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 27
      src/collections/menu.less
  2. 101
      src/elements/button.less
  3. 68
      src/elements/divider.less
  4. 106
      src/elements/header.less
  5. 6
      src/elements/image.less
  6. 169
      src/elements/input.less
  7. 61
      src/elements/segment.less
  8. 22
      src/themes/default/collections/menu.variables
  9. 55
      src/themes/default/elements/button.variables
  10. 3
      src/themes/default/elements/divider.overrides
  11. 48
      src/themes/default/elements/divider.variables
  12. 78
      src/themes/default/elements/header.variables
  13. 30
      src/themes/default/elements/image.variables
  14. 3
      src/themes/default/elements/input.overrides
  15. 102
      src/themes/default/elements/input.variables
  16. 53
      src/themes/default/elements/segment.variables
  17. 36
      src/themes/github/collections/menu.variables
  18. 2
      src/themes/github/elements/button.variables
  19. 3
      src/themes/user/elements/divider.overrides
  20. 3
      src/themes/user/elements/divider.variables
  21. 3
      src/themes/user/elements/input.overrides
  22. 3
      src/themes/user/elements/input.variables

27
src/collections/menu.less
View File

@ -56,14 +56,16 @@
border-radius: 0px @borderRadius @borderRadius 0px; border-radius: 0px @borderRadius @borderRadius 0px;
} }
.ui.menu .item { .ui.menu .item {
background: @itemBackground;
user-select: none; user-select: none;
-webkit-tap-highlight-color: transparent;
vertical-align: middle;
vertical-align: middle;
line-height: 1; line-height: 1;
text-decoration: none; text-decoration: none;
box-sizing: border-box; box-sizing: border-box;
transition: @transition; transition: @transition;
-webkit-tap-highlight-color: transparent;
} }
/*-------------- /*--------------
@ -196,6 +198,9 @@
width: 100%; width: 100%;
} }
.ui.menu:not(.vertical) .item > .icon.input .icon {
top: @inputIconOffset;
}
.ui.menu .item > .input input { .ui.menu .item > .input input {
padding-top: @inputVerticalPadding; padding-top: @inputVerticalPadding;
padding-bottom: @inputVerticalPadding; padding-bottom: @inputVerticalPadding;
@ -259,8 +264,9 @@
---------------*/ ---------------*/
.ui.menu .dropdown.item .menu { .ui.menu .dropdown.item .menu {
background: @dropdownBackground;
left: 1px; left: 1px;
margin: 0px;
margin: @dropdownMenuOffset 0px 0px;
min-width: calc(100% - 1px); min-width: calc(100% - 1px);
box-shadow: @dropdownBoxShadow; box-shadow: @dropdownBoxShadow;
} }
@ -363,6 +369,7 @@
box-shadow: 0em @activeBorderSize 0em inset; box-shadow: 0em @activeBorderSize 0em inset;
} }
.ui.vertical.menu .active.item { .ui.vertical.menu .active.item {
background: @activeBackground;
border-radius: 0em; border-radius: 0em;
box-shadow: @activeBorderSize 0em 0em inset; box-shadow: @activeBorderSize 0em 0em inset;
} }
@ -376,7 +383,6 @@
border-radius: 0em @borderRadius @borderRadius 0em; border-radius: 0em @borderRadius @borderRadius 0em;
} }
.ui.vertical.menu .active.item .menu .active.item { .ui.vertical.menu .active.item .menu .active.item {
border-left: none; border-left: none;
} }
@ -392,6 +398,7 @@
Active Hover Active Hover
---------------*/ ---------------*/
.ui.vertical.menu .active.item:hover,
.ui.menu .active.item:hover { .ui.menu .active.item:hover {
background-color: @activeHoverBackground; background-color: @activeHoverBackground;
} }
@ -437,7 +444,12 @@
Vertical Vertical
---------------*/ ---------------*/
.ui.vertical.menu {
background: @verticalBackground;
}
.ui.vertical.menu .item { .ui.vertical.menu .item {
background: @verticalItemBackground;
display: block; display: block;
height: auto !important; height: auto !important;
border-top: none; border-top: none;
@ -1076,6 +1088,9 @@
.ui.labeled.icon.menu { .ui.labeled.icon.menu {
text-align: center; text-align: center;
} }
.ui.labeled.icon.menu > .item {
min-width: @labeledIconMinWidth;
}
.ui.labeled.icon.menu > .item > .icon { .ui.labeled.icon.menu > .item > .icon {
display: block; display: block;
font-size: @labeledIconSize !important; font-size: @labeledIconSize !important;
@ -1547,10 +1562,10 @@
background-color: @arrowActiveColor; background-color: @arrowActiveColor;
} }
.ui.pointing.menu a.active.item:active:after {
.ui.vertical.pointing.menu .item:hover:after {
background-color: @arrowVerticalHoverColor; background-color: @arrowVerticalHoverColor;
} }
.ui.vertical.pointing.menu .menu .active.item:after {
.ui.vertical.pointing.menu .active.item:after {
background-color: @arrowVerticalActiveColor; background-color: @arrowVerticalActiveColor;
} }

101
src/elements/button.less
View File

@ -53,13 +53,7 @@
user-select: none; user-select: none;
box-sizing: border-box; box-sizing: border-box;
transition:
opacity @transitionDuration @transitionEasing,
background-color @transitionDuration @transitionEasing,
color @transitionDuration @transitionEasing,
background @transitionDuration @transitionEasing,
box-shadow @transitionDuration @transitionEasing
;
transition: @transition;
} }
@ -134,7 +128,7 @@
width: 100%; width: 100%;
height: 100%; height: 100%;
content: ''; content: '';
background: transparent url("@{imagePath}/loader-mini.gif") no-repeat 50% 50%;
background: transparent url(@loaderPath) no-repeat 50% 50%;
} }
.ui.labeled.icon.loading.button .icon { .ui.labeled.icon.loading.button .icon {
background-color: transparent; background-color: transparent;
@ -265,6 +259,7 @@
background-color: @primaryColor; background-color: @primaryColor;
color: @invertedTextColor; color: @invertedTextColor;
text-shadow: @invertedTextShadow; text-shadow: @invertedTextShadow;
background-image: @coloredBackgroundImage;
box-shadow: @coloredBoxShadow; box-shadow: @coloredBoxShadow;
} }
.ui.primary.buttons .button:hover, .ui.primary.buttons .button:hover,
@ -295,6 +290,7 @@
background-color: @secondaryColor; background-color: @secondaryColor;
color: @invertedTextColor; color: @invertedTextColor;
text-shadow: @invertedTextShadow; text-shadow: @invertedTextShadow;
background-image: @coloredBackgroundImage;
box-shadow: @coloredBoxShadow; box-shadow: @coloredBoxShadow;
} }
.ui.secondary.buttons .button:hover, .ui.secondary.buttons .button:hover,
@ -325,6 +321,7 @@
background-color: @facebookColor; background-color: @facebookColor;
color: @invertedTextColor; color: @invertedTextColor;
text-shadow: @invertedTextShadow; text-shadow: @invertedTextShadow;
background-image: @coloredBackgroundImage;
box-shadow: @coloredBoxShadow; box-shadow: @coloredBoxShadow;
} }
.ui.facebook.button:hover { .ui.facebook.button:hover {
@ -343,6 +340,7 @@
background-color: @twitterColor; background-color: @twitterColor;
color: @invertedTextColor; color: @invertedTextColor;
text-shadow: @invertedTextShadow; text-shadow: @invertedTextShadow;
background-image: @coloredBackgroundImage;
box-shadow: @coloredBoxShadow; box-shadow: @coloredBoxShadow;
} }
.ui.twitter.button:hover { .ui.twitter.button:hover {
@ -361,6 +359,7 @@
background-color: @googlePlusColor; background-color: @googlePlusColor;
color: @invertedTextColor; color: @invertedTextColor;
text-shadow: @invertedTextShadow; text-shadow: @invertedTextShadow;
background-image: @coloredBackgroundImage;
box-shadow: @coloredBoxShadow; box-shadow: @coloredBoxShadow;
} }
.ui.google.plus.button:hover { .ui.google.plus.button:hover {
@ -396,6 +395,7 @@
background-color: @youtubeColor; background-color: @youtubeColor;
color: @invertedTextColor; color: @invertedTextColor;
text-shadow: @invertedTextShadow; text-shadow: @invertedTextShadow;
background-image: @coloredBackgroundImage;
box-shadow: @coloredBoxShadow; box-shadow: @coloredBoxShadow;
} }
.ui.youtube.button:hover { .ui.youtube.button:hover {
@ -414,6 +414,7 @@
background-color: @instagramColor; background-color: @instagramColor;
color: @invertedTextColor; color: @invertedTextColor;
text-shadow: @invertedTextShadow; text-shadow: @invertedTextShadow;
background-image: @coloredBackgroundImage;
box-shadow: @coloredBoxShadow; box-shadow: @coloredBoxShadow;
} }
.ui.instagram.button:hover { .ui.instagram.button:hover {
@ -432,6 +433,7 @@
background-color: @pinterestColor; background-color: @pinterestColor;
color: @invertedTextColor; color: @invertedTextColor;
text-shadow: @invertedTextShadow; text-shadow: @invertedTextShadow;
background-image: @coloredBackgroundImage;
box-shadow: @coloredBoxShadow; box-shadow: @coloredBoxShadow;
} }
.ui.pinterest.button:hover { .ui.pinterest.button:hover {
@ -449,6 +451,7 @@
.ui.vk.button { .ui.vk.button {
background-color: #4D7198; background-color: #4D7198;
color: @white; color: @white;
background-image: @coloredBackgroundImage;
box-shadow: @coloredBoxShadow; box-shadow: @coloredBoxShadow;
} }
.ui.vk.button:hover { .ui.vk.button:hover {
@ -521,8 +524,6 @@
padding: @compactVerticalPadding @compactVerticalPadding ( @compactHorizontalPadding + @shadowOffset ); padding: @compactVerticalPadding @compactVerticalPadding ( @compactHorizontalPadding + @shadowOffset );
} }
/*------------------- /*-------------------
Sizes Sizes
--------------------*/ --------------------*/
@ -581,20 +582,10 @@
height: 1.45em; height: 1.45em;
} }
/* loading */
.ui.huge.loading.button:after {
background-image: url("@{imagePath}/loader-small.gif");
}
.ui.massive.buttons .loading.button:after,
.ui.gigantic.buttons .loading.button:after,
.ui.massive.loading.button:after,
.ui.gigantic.loading.button:after {
background-image: url("@{imagePath}/loader-medium.gif");
}
/* Loading Resize */
.ui.huge.loading.button:after, .ui.huge.loading.button:after,
.ui.huge.loading.button.active:after { .ui.huge.loading.button.active:after {
background-image: url("@{imagePath}/loader-small.gif");
background-image: url(@hugeLoaderPath);
} }
.ui.massive.buttons .loading.button:after, .ui.massive.buttons .loading.button:after,
.ui.gigantic.buttons .loading.button:after, .ui.gigantic.buttons .loading.button:after,
@ -604,7 +595,7 @@
.ui.gigantic.buttons .loading.button.active:after, .ui.gigantic.buttons .loading.button.active:after,
.ui.massive.loading.button.active:after, .ui.massive.loading.button.active:after,
.ui.gigantic.loading.button.active:after { .ui.gigantic.loading.button.active:after {
background-image: url("@{imagePath}/loader-medium.gif");
background-image: url(@massiveLoaderPath);
} }
/*-------------- /*--------------
@ -814,7 +805,7 @@
.ui.attached.button { .ui.attached.button {
display: block; display: block;
margin: 0em; margin: 0em;
box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) !important;
box-shadow: @attachedBoxShadow !important;
} }
.ui.attached.top.button { .ui.attached.top.button {
border-radius: @borderRadius @borderRadius 0em 0em; border-radius: @borderRadius @borderRadius 0em 0em;
@ -826,13 +817,13 @@
display: inline-block; display: inline-block;
border-left: none; border-left: none;
padding-right: 0.75em;
padding-right: @attachedHorizontalPadding;
text-align: right; text-align: right;
border-radius: @borderRadius 0em 0em @borderRadius; border-radius: @borderRadius 0em 0em @borderRadius;
} }
.ui.attached.right.button { .ui.attached.right.button {
display: inline-block; display: inline-block;
padding-left: 0.75em;
padding-left: @attachedHorizontalPadding;
text-align: left; text-align: left;
border-radius: 0em @borderRadius @borderRadius 0em; border-radius: 0em @borderRadius @borderRadius 0em;
} }
@ -846,8 +837,8 @@
.ui.buttons .or { .ui.buttons .or {
position: relative; position: relative;
float: left; float: left;
width: 0.3em;
height: 1.1em;
width: @orWidth;
height: @orHeight;
z-index: 3; z-index: 3;
} }
.ui.buttons .or:before { .ui.buttons .or:before {
@ -858,22 +849,21 @@
background-color: @white; background-color: @white;
text-shadow: @invertedTextShadow; text-shadow: @invertedTextShadow;
margin-top: -0.1em;
margin-left: -0.9em;
margin-top: @orVerticalOffset;
margin-left: @orHorizontalOffset;
width: 1.8em;
height: 1.8em;
width: @orCircleSize;
height: @orCircleSize;
line-height: 1.55;
line-height: @orLineHeight;
color: @lightTextColor; color: @lightTextColor;
font-style: normal;
font-weight: normal;
font-style: @orTextStyle;
font-weight: @orTextWeight;
text-align: center; text-align: center;
border-radius: 500em; border-radius: 500em;
box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
box-shadow: @orBoxShadow;
box-sizing: border-box; box-sizing: border-box;
} }
.ui.buttons .or:after { .ui.buttons .or:after {
@ -881,14 +871,12 @@
top: 0em; top: 0em;
left: 0em; left: 0em;
content: ' '; content: ' ';
width: 0.3em;
height: 1.7em;
background-color: transparent; background-color: transparent;
border-top: 0.5em solid @white;
border-bottom: 0.5em solid @white;
width: @orWidth;
height: (@orHeight + (@orSpacerHeight * 2));
border-top: @orSpacerHeight solid @orSpacerColor;
border-bottom: @orSpacerHeight solid @orSpacerColor;
} }
/* Fluid Or */ /* Fluid Or */
@ -918,7 +906,7 @@
/* Bottom Side */ /* Bottom Side */
.bottom.attached.ui.buttons { .bottom.attached.ui.buttons {
margin-top: -1px;
margin-top: @attachedOffset;
border-radius: 0em 0em @borderRadius @borderRadius; border-radius: 0em 0em @borderRadius @borderRadius;
} }
.bottom.attached.ui.buttons .button:first-child { .bottom.attached.ui.buttons .button:first-child {
@ -930,29 +918,29 @@
/* Left Side */ /* Left Side */
.left.attached.ui.buttons { .left.attached.ui.buttons {
margin-left: -1px;
margin-left: @attachedOffset;
border-radius: 0em @borderRadius @borderRadius 0em; border-radius: 0em @borderRadius @borderRadius 0em;
} }
.left.attached.ui.buttons .button:first-child { .left.attached.ui.buttons .button:first-child {
margin-left: -1px;
margin-left: @attachedOffset;
border-radius: 0em @borderRadius 0em 0em; border-radius: 0em @borderRadius 0em 0em;
} }
.left.attached.ui.buttons .button:last-child { .left.attached.ui.buttons .button:last-child {
margin-left: -1px;
margin-left: @attachedOffset;
border-radius: 0em 0em @borderRadius 0em; border-radius: 0em 0em @borderRadius 0em;
} }
/* Right Side */ /* Right Side */
.right.attached.ui.buttons, .right.attached.ui.buttons,
.right.attached.ui.buttons .button { .right.attached.ui.buttons .button {
margin-right: -1px;
margin-right: @attachedOffset;
border-radius: @borderRadius 0em 0em @borderRadius; border-radius: @borderRadius 0em 0em @borderRadius;
} }
.right.attached.ui.buttons .button:first-child { .right.attached.ui.buttons .button:first-child {
margin-left: -1px;
margin-left: @attachedOffset;
border-radius: @borderRadius 0em 0em 0em; border-radius: @borderRadius 0em 0em 0em;
} }
.right.attached.ui.buttons .button:last-child { .right.attached.ui.buttons .button:last-child {
margin-left: -1px;
margin-left: @attachedOffset;
border-radius: 0em 0em 0em @borderRadius; border-radius: 0em 0em 0em @borderRadius;
} }
@ -1074,6 +1062,7 @@
background-color: @black; background-color: @black;
color: @invertedTextColor; color: @invertedTextColor;
text-shadow: @invertedTextShadow; text-shadow: @invertedTextShadow;
background-image: @coloredBackgroundImage;
box-shadow: @coloredBoxShadow; box-shadow: @coloredBoxShadow;
} }
.ui.black.buttons .button:hover, .ui.black.buttons .button:hover,
@ -1103,6 +1092,7 @@
background-color: @blue; background-color: @blue;
color: @invertedTextColor; color: @invertedTextColor;
text-shadow: @invertedTextShadow; text-shadow: @invertedTextShadow;
background-image: @coloredBackgroundImage;
box-shadow: @coloredBoxShadow; box-shadow: @coloredBoxShadow;
} }
.ui.blue.buttons .button:hover, .ui.blue.buttons .button:hover,
@ -1132,6 +1122,7 @@
background-color: @green; background-color: @green;
color: @invertedTextColor; color: @invertedTextColor;
text-shadow: @invertedTextShadow; text-shadow: @invertedTextShadow;
background-image: @coloredBackgroundImage;
box-shadow: @coloredBoxShadow; box-shadow: @coloredBoxShadow;
} }
.ui.green.buttons .button:hover, .ui.green.buttons .button:hover,
@ -1161,6 +1152,7 @@
background-color: @orange; background-color: @orange;
color: @invertedTextColor; color: @invertedTextColor;
text-shadow: @invertedTextShadow; text-shadow: @invertedTextShadow;
background-image: @coloredBackgroundImage;
box-shadow: @coloredBoxShadow; box-shadow: @coloredBoxShadow;
} }
.ui.orange.buttons .button:hover, .ui.orange.buttons .button:hover,
@ -1190,6 +1182,7 @@
background-color: @pink; background-color: @pink;
color: @invertedTextColor; color: @invertedTextColor;
text-shadow: @invertedTextShadow; text-shadow: @invertedTextShadow;
background-image: @coloredBackgroundImage;
box-shadow: @coloredBoxShadow; box-shadow: @coloredBoxShadow;
} }
.ui.pink.buttons .button:hover, .ui.pink.buttons .button:hover,
@ -1219,6 +1212,7 @@
background-color: @purple; background-color: @purple;
color: @invertedTextColor; color: @invertedTextColor;
text-shadow: @invertedTextShadow; text-shadow: @invertedTextShadow;
background-image: @coloredBackgroundImage;
box-shadow: @coloredBoxShadow; box-shadow: @coloredBoxShadow;
} }
.ui.purple.buttons .button:hover, .ui.purple.buttons .button:hover,
@ -1248,6 +1242,7 @@
background-color: @red; background-color: @red;
color: @invertedTextColor; color: @invertedTextColor;
text-shadow: @invertedTextShadow; text-shadow: @invertedTextShadow;
background-image: @coloredBackgroundImage;
box-shadow: @coloredBoxShadow; box-shadow: @coloredBoxShadow;
} }
.ui.red.buttons .button:hover, .ui.red.buttons .button:hover,
@ -1277,6 +1272,7 @@
background-color: @teal; background-color: @teal;
color: @invertedTextColor; color: @invertedTextColor;
text-shadow: @invertedTextShadow; text-shadow: @invertedTextShadow;
background-image: @coloredBackgroundImage;
box-shadow: @coloredBoxShadow; box-shadow: @coloredBoxShadow;
} }
.ui.teal.buttons .button:hover, .ui.teal.buttons .button:hover,
@ -1306,6 +1302,7 @@
background-color: @yellow; background-color: @yellow;
color: @invertedTextColor; color: @invertedTextColor;
text-shadow: @invertedTextShadow; text-shadow: @invertedTextShadow;
background-image: @coloredBackgroundImage;
box-shadow: @coloredBoxShadow; box-shadow: @coloredBoxShadow;
} }
.ui.yellow.buttons .button:hover, .ui.yellow.buttons .button:hover,
@ -1338,6 +1335,7 @@
background-color: @positiveColor !important; background-color: @positiveColor !important;
color: @invertedTextColor; color: @invertedTextColor;
text-shadow: @invertedTextShadow; text-shadow: @invertedTextShadow;
background-image: @coloredBackgroundImage;
box-shadow: @coloredBoxShadow; box-shadow: @coloredBoxShadow;
} }
.ui.positive.buttons .button:hover, .ui.positive.buttons .button:hover,
@ -1372,6 +1370,7 @@
background-color: @negativeColor !important; background-color: @negativeColor !important;
color: @invertedTextColor; color: @invertedTextColor;
text-shadow: @invertedTextShadow; text-shadow: @invertedTextShadow;
background-image: @coloredBackgroundImage;
box-shadow: @coloredBoxShadow; box-shadow: @coloredBoxShadow;
} }
.ui.negative.buttons .button:hover, .ui.negative.buttons .button:hover,

68
src/elements/divider.less
View File

@ -9,6 +9,15 @@
* *
*/ */
/*******************************
Theme
*******************************/
@type : 'element';
@element : 'divider';
@import '../semantic.config';
/******************************* /*******************************
Divider Divider
@ -17,20 +26,14 @@
.ui.divider { .ui.divider {
margin: 1rem 0rem; margin: 1rem 0rem;
border-top: 1px solid rgba(0, 0, 0, 0.1);
border-bottom: 1px solid rgba(255, 255, 255, 0.8);
border-top: @shadowWidth solid @shadowColor;
border-bottom: @highlightWidth solid @highlightColor;
line-height: 1; line-height: 1;
height: 0em; height: 0em;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box; box-sizing: border-box;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none; user-select: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
} }
@ -44,12 +47,12 @@
margin: 0em; margin: 0em;
background-color: transparent; background-color: transparent;
font-size: 0.875rem;
font-size: @medium;
font-weight: bold; font-weight: bold;
text-align: center; text-align: center;
text-transform: uppercase; text-transform: uppercase;
color: rgba(0, 0, 0, 0.8);
color: @dividerTextColor;
} }
@ -63,9 +66,9 @@
top: 50%; top: 50%;
left: 50%; left: 50%;
margin: 0% 0% 0% -3%;
margin: 0% 0% 0% (@verticalDividerWidth / 2);
width: 6%;
width: @verticalDividerWidth;
height: 50%; height: 50%;
line-height: 0; line-height: 0;
@ -79,8 +82,8 @@
content: " "; content: " ";
z-index: 3; z-index: 3;
border-left: 1px solid rgba(0, 0, 0, 0.1);
border-right: 1px solid rgba(255, 255, 255, 0.8);
border-left: @shadowWidth solid @shadowColor;
border-right: @highlightWidth solid @highlightColor;
width: 0%; width: 0%;
height: 80%; height: 80%;
@ -89,7 +92,6 @@
.ui.vertical.divider:before { .ui.vertical.divider:before {
top: -100%; top: -100%;
} }
.ui.vertical.divider:after { .ui.vertical.divider:after {
top: auto; top: auto;
bottom: 0px; bottom: 0px;
@ -104,7 +106,7 @@
top: 0%; top: 0%;
left: 0%; left: 0%;
margin: 1rem 1.5rem;
margin: @horizontalDividerVerticalMargin @horizontalDividerHorizontalMargin;
height: auto; height: auto;
padding: 0em; padding: 0em;
@ -115,25 +117,25 @@
.ui.horizontal.divider:after { .ui.horizontal.divider:after {
position: absolute; position: absolute;
top: 50%; top: 50%;
content: " ";
content: '';
z-index: 3; z-index: 3;
width: 50%; width: 50%;
top: 50%; top: 50%;
height: 0%; height: 0%;
border-top: 1px solid rgba(0, 0, 0, 0.1);
border-bottom: 1px solid rgba(255, 255, 255, 0.8);
border-top: @shadowWidth solid @shadowColor;
border-bottom: @highlightWidth solid @highlightColor;
} }
.ui.horizontal.divider:before { .ui.horizontal.divider:before {
left: 0%; left: 0%;
margin-left: -1.5rem;
margin-left: -@horizontalDividerHorizontalMargin;
} }
.ui.horizontal.divider:after { .ui.horizontal.divider:after {
left: auto; left: auto;
right: 0%; right: 0%;
margin-right: -1.5rem;
margin-right: -@horizontalDividerHorizontalMargin;
} }
/*-------------- /*--------------
@ -141,17 +143,15 @@
---------------*/ ---------------*/
.ui.divider > .icon { .ui.divider > .icon {
margin: 0em;
font-size: 1rem;
margin: @dividerIconMargin;
font-size: @dividerIconSize;
vertical-align: middle; vertical-align: middle;
} }
/******************************* /*******************************
Variations Variations
*******************************/ *******************************/
/*-------------- /*--------------
Hidden Hidden
---------------*/ ---------------*/
@ -165,20 +165,20 @@
---------------*/ ---------------*/
.ui.divider.inverted { .ui.divider.inverted {
color: rgba(255, 255, 255, 1);
color: @invertedTextColor;
} }
.ui.vertical.inverted.divider, .ui.vertical.inverted.divider,
.ui.horizontal.inverted.divider { .ui.horizontal.inverted.divider {
color: rgba(255, 255, 255, 0.9);
color: @directionalTextColor;
} }
.ui.divider.inverted, .ui.divider.inverted,
.ui.divider.inverted:after, .ui.divider.inverted:after,
.ui.divider.inverted:before { .ui.divider.inverted:before {
border-top-color: rgba(0, 0, 0, 0.15);
border-bottom-color: rgba(255, 255, 255, 0.15);
border-top-color: @invertedShadowColor;
border-bottom-color: @invertedHighlightColor;
border-left-color: rgba(0, 0, 0, 0.15);
border-right-color: rgba(255, 255, 255, 0.15);
border-left-color: @invertedShadowColor;
border-right-color: @invertedHighlightColor;
} }
/*-------------- /*--------------
@ -202,6 +202,8 @@
---------------*/ ---------------*/
.ui.section.divider { .ui.section.divider {
margin-top: 2rem;
margin-bottom: 2rem;
margin-top: @sectionMargin;
margin-bottom: @sectionMargin;
} }
.loadUIOverrides() !important;

106
src/elements/header.less
View File

@ -26,12 +26,10 @@
.ui.header { .ui.header {
border: none; border: none;
font-family: @fontFamily; font-family: @fontFamily;
margin: 1em 0em 1rem;
padding: 0em;
font-size: 1.33em;
margin: @topMargin 0em @bottomMargin;
padding: @verticalPadding @horizontalPadding;
font-weight: bold; font-weight: bold;
line-height: 1.33;
line-height: @lineHeight;
} }
.ui.header .sub.header { .ui.header .sub.header {
@ -40,26 +38,26 @@
margin: 0em; margin: 0em;
padding: 0em; padding: 0em;
line-height: 1.2;
color: rgba(0, 0, 0, 0.5);
line-height: @subHeaderLineHeight;
color: @subHeaderColor;
} }
.ui.header .icon { .ui.header .icon {
display: table-cell; display: table-cell;
vertical-align: middle; vertical-align: middle;
padding-right: 0.5em;
padding-right: (@iconMargin / 2);
} }
.ui.header .icon:only-child { .ui.header .icon:only-child {
display: inline-block; display: inline-block;
vertical-align: baseline;
vertical-align: @iconAlignment;
} }
.ui.header .content { .ui.header .content {
display: inline-block; display: inline-block;
vertical-align: top;
vertical-align: @contentAlignment;
} }
.ui.header .icon + .content { .ui.header .icon + .content {
padding-left: 0.5em;
padding-left: (@iconMargin / 2);
display: table-cell; display: table-cell;
} }
@ -71,7 +69,7 @@
margin-bottom: 0em; margin-bottom: 0em;
} }
.ui.header + p { .ui.header + p {
margin-top: 0em;
margin-top: @precedingParagraphMargin;
} }
@ -81,45 +79,40 @@
h1.ui.header { h1.ui.header {
min-height: 1rem; min-height: 1rem;
line-height: 1.33;
font-size: 2rem;
font-size: @h1;
} }
h2.ui.header { h2.ui.header {
line-height: 1.33;
font-size: 1.75rem;
font-size: @h2;
} }
h3.ui.header { h3.ui.header {
line-height: 1.33;
font-size: 1.33rem;
font-size: @h3;
} }
h4.ui.header { h4.ui.header {
line-height: 1.33;
font-size: 1.1rem;
font-size: @h4;
} }
h5.ui.header { h5.ui.header {
line-height: 1.2;
font-size: 1rem;
font-size: @h5;
} }
/*-------------- /*--------------
Content Heading Content Heading
---------------*/ ---------------*/
.ui.huge.header {
min-height: 1em;
font-size: 2em;
.ui.tiny.header {
font-size: @tiny;
} }
.ui.large.header {
font-size: 1.75em;
.ui.small.header {
font-size: @small;
} }
.ui.medium.header { .ui.medium.header {
font-size: 1.33em;
font-size: @medium;
} }
.ui.small.header {
font-size: 1.1em;
.ui.large.header {
font-size: @large;
} }
.ui.tiny.header {
font-size: 1em;
.ui.huge.header {
min-height: 1em;
font-size: @huge;
} }
@ -127,7 +120,6 @@ h5.ui.header {
Types Types
*******************************/ *******************************/
/*------------------- /*-------------------
Icon Icon
--------------------*/ --------------------*/
@ -139,16 +131,18 @@ h5.ui.header {
.ui.icon.header .icon { .ui.icon.header .icon {
float: none; float: none;
display: block; display: block;
font-size: 3em;
margin: 0em auto 0.2em;
font-size: @iconHeaderSize;
margin: 0em auto @iconHeaderMargin;
padding: 0em; padding: 0em;
} }
.ui.icon.header .content { .ui.icon.header .content {
display: block; display: block;
} }
.ui.icon.header .circular.icon,
.ui.icon.header .circular.icon {
font-size: @circularHeaderIconSize;
}
.ui.icon.header .square.icon { .ui.icon.header .square.icon {
font-size: 2em;
font-size: @squareHeaderIconSize;
} }
.ui.block.icon.header .icon { .ui.block.icon.header .icon {
margin-bottom: 0em; margin-bottom: 0em;
@ -220,10 +214,10 @@ h5.ui.header {
--------------------*/ --------------------*/
.ui.inverted.header { .ui.inverted.header {
color: @white;
color: @invertedColor;
} }
.ui.inverted.header .sub.header { .ui.inverted.header .sub.header {
color: rgba(255, 255, 255, 0.85);
color: @invertedSubHeaderColor;
} }
@ -290,12 +284,12 @@ h5.ui.header {
.ui.left.floated.header { .ui.left.floated.header {
float: left; float: left;
margin-top: 0em; margin-top: 0em;
margin-right: 0.5em;
margin-right: @floatedMargin;
} }
.ui.right.floated.header { .ui.right.floated.header {
float: right; float: right;
margin-top: 0em; margin-top: 0em;
margin-left: 0.5em;
margin-left: @floatedMargin;
} }
/*------------------- /*-------------------
@ -312,14 +306,14 @@ h5.ui.header {
--------------------*/ --------------------*/
.ui.dividing.header { .ui.dividing.header {
padding-bottom: 0.2rem;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
padding-bottom: @dividedBorderPadding;
border-bottom: @dividedBorder;
} }
.ui.dividing.header .sub.header { .ui.dividing.header .sub.header {
padding-bottom: 0.5em;
padding-bottom: @dividedSubHeaderPadding;
} }
.ui.dividing.header .icon { .ui.dividing.header .icon {
margin-bottom: 0.2em;
margin-bottom: @dividedIconPadding;
} }
@ -328,8 +322,8 @@ h5.ui.header {
--------------------*/ --------------------*/
.ui.block.header { .ui.block.header {
background-color: rgba(0, 0, 0, 0.05);
padding: 0.5em 1em;
background: @blockBackground;
padding: @blockVerticalPadding @blockHorizontalPadding;
} }
/*------------------- /*-------------------
@ -337,21 +331,29 @@ h5.ui.header {
--------------------*/ --------------------*/
.ui.attached.header { .ui.attached.header {
background-color: #F0F0F0;
background: @attachedColor;
margin: 0em; margin: 0em;
padding: 0.75rem 1rem;
box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
padding: @attachedVerticalPadding @attachedVerticalPadding;
box-shadow: @attachedBoxShadow;
} }
.ui.attached:not(.top, .bottom) { .ui.attached:not(.top, .bottom) {
margin: 0em; margin: 0em;
} }
.ui.top.attached.header { .ui.top.attached.header {
margin-bottom: 0em; margin-bottom: 0em;
border-radius: 0.3125em 0.3125em 0em 0em;
border-radius: @attachedBorderRadius @attachedBorderRadius 0em 0em;
} }
.ui.bottom.attached.header { .ui.bottom.attached.header {
margin-top: 0em; margin-top: 0em;
border-radius: 0em 0em 0.3125em 0.3125em;
border-radius: 0em 0em @attachedBorderRadius @attachedBorderRadius;
}
/*-------------------
Sizing
--------------------*/
.ui.header {
font-size: @medium;
} }
.loadUIOverrides() !important; .loadUIOverrides() !important;

6
src/elements/image.less
View File

@ -103,7 +103,7 @@ img.ui.image {
.ui.avatar.images img, .ui.avatar.images img,
.ui.avatar.image img, .ui.avatar.image img,
.ui.avatar.image { .ui.avatar.image {
margin-right: @imageSpacing;
margin-right: @avatarMargin;
display: inline-block; display: inline-block;
width: @avatarSize; width: @avatarSize;
@ -193,13 +193,13 @@ img.ui.image {
.ui.images { .ui.images {
font-size: 0em; font-size: 0em;
margin: 0em -@imageSpacing 0rem;
margin: 0em -@imageHorizontalMargin 0rem;
} }
.ui.images .image, .ui.images .image,
.ui.images img { .ui.images img {
display: inline-block; display: inline-block;
margin: 0em @imageSpacing (@imageSpacing * 2);
margin: 0em @imageHorizontalMargin @imageVerticalMargin;
} }
.loadUIOverrides() !important; .loadUIOverrides() !important;

169
src/elements/input.less
View File

@ -9,6 +9,15 @@
* *
*/ */
/*******************************
Theme
*******************************/
@type : 'element';
@element : 'input';
@import '../semantic.config';
/******************************* /*******************************
Standard Standard
@ -22,59 +31,26 @@
.ui.input { .ui.input {
display: inline-block; display: inline-block;
position: relative; position: relative;
color: rgba(0, 0, 0, 0.7);
color: @inputColor;
} }
.ui.input input { .ui.input input {
width: 100%; width: 100%;
font-family: "Helvetica Neue", "Helvetica", Arial;
font-family: @fontFamily;
margin: 0em; margin: 0em;
padding: 0.85em 1.2em;
font-size: 0.875em;
padding: @verticalPadding @horizontalPadding;
background-color: #FFFFFF;
border: 1px solid rgba(0, 0, 0, 0.15);
background: @background;
border: @border;
outline: none; outline: none;
color: @inputColor;
border-radius: @borderRadius;
transition: @transition;
color: rgba(0, 0, 0, 0.7);
-webkit-border-radius: 0.3125em;
-moz-border-radius: 0.3125em;
border-radius: 0.3125em;
-webkit-transition:
background-color 0.3s ease-out,
box-shadow 0.2s ease,
border-color 0.2s ease
;
-moz-transition:
background-color 0.3s ease-out,
box-shadow 0.2s ease,
border-color 0.2s ease
;
-o-transition:
background-color 0.3s ease-out,
box-shadow 0.2s ease,
border-color 0.2s ease
;
-ms-transition:
background-color 0.3s ease-out,
box-shadow 0.2s ease,
border-color 0.2s ease
;
transition:
background-color 0.3s ease-out,
box-shadow 0.2s ease,
border-color 0.2s ease
;
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
box-shadow: @boxShadow;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box; box-sizing: border-box;
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
} }
@ -84,10 +60,10 @@
/* browsers require these rules separate */ /* browsers require these rules separate */
.ui.input::-webkit-input-placeholder { .ui.input::-webkit-input-placeholder {
color: #BBBBBB;
color: @placeholderColor;
} }
.ui.input::-moz-placeholder { .ui.input::-moz-placeholder {
color: #BBBBBB;
color: @placeholderColor;
} }
@ -101,8 +77,10 @@
.ui.input input:active, .ui.input input:active,
.ui.input.down input { .ui.input.down input {
border-color: rgba(0, 0, 0, 0.3);
background-color: #FAFAFA;
border-color: @downBorderColor;
background: @downBackground;
color: @downColor;
box-shadow: @downBoxShadow;
} }
/*-------------------- /*--------------------
@ -110,7 +88,7 @@
---------------------*/ ---------------------*/
.ui.loading.input > .icon { .ui.loading.input > .icon {
background: url(../images/loader-mini.gif) no-repeat 50% 50%;
background: url(@loadingImage) no-repeat 50% 50%;
} }
.ui.loading.input > .icon:before, .ui.loading.input > .icon:before,
.ui.loading.input > .icon:after { .ui.loading.input > .icon:after {
@ -123,16 +101,18 @@
.ui.input.focus input, .ui.input.focus input,
.ui.input input:focus { .ui.input input:focus {
border-color: rgba(0, 0, 0, 0.2);
color: rgba(0, 0, 0, 0.85);
border-color: @focusBorderColor;
background: @focusBackground;
color: @focusColor;
box-shadow: @focusBoxShadow;
} }
.ui.input.focus input input::-webkit-input-placeholder, .ui.input.focus input input::-webkit-input-placeholder,
.ui.input input:focus input::-webkit-input-placeholder { .ui.input input:focus input::-webkit-input-placeholder {
color: #AAAAAA;
color: @placeholderFocusColor;
} }
.ui.input.focus input input::-moz-placeholder, .ui.input.focus input input::-moz-placeholder,
.ui.input input:focus input::-moz-placeholder { .ui.input input:focus input::-moz-placeholder {
color: #AAAAAA;
color: @placeholderFocusColor;
} }
@ -141,30 +121,32 @@
---------------------*/ ---------------------*/
.ui.input.error input { .ui.input.error input {
background-color: #FFFAFA;
border-color: #E7BEBE;
color: #D95C5C;
background-color: @errorBackground;
border-color: @errorBorder;
color: @errorColor;
box-shadow: @errorBoxShadow;
} }
/* Error Placeholder */ /* Error Placeholder */
.ui.input.error input ::-webkit-input-placeholder { .ui.input.error input ::-webkit-input-placeholder {
color: rgba(255, 80, 80, 0.4);
color: @placeholderErrorColor;
} }
.ui.input.error input ::-moz-placeholder { .ui.input.error input ::-moz-placeholder {
color: rgba(255, 80, 80, 0.4);
color: @placeholderErrorColor;
} }
/* Focused Error Placeholder */
.ui.input.error input :focus::-webkit-input-placeholder { .ui.input.error input :focus::-webkit-input-placeholder {
color: rgba(255, 80, 80, 0.7);
color: @placeholderErrorFocusColor;
} }
.ui.input.error input :focus::-moz-placeholder { .ui.input.error input :focus::-moz-placeholder {
color: rgba(255, 80, 80, 0.7);
color: @placeholderErrorFocusColor;
} }
/******************************* /*******************************
Variations Variations
*******************************/ *******************************/
/*-------------------- /*--------------------
Transparent Transparent
---------------------*/ ---------------------*/
@ -172,9 +154,10 @@
.ui.transparent.input input { .ui.transparent.input input {
border: none; border: none;
background-color: transparent; background-color: transparent;
padding-left: 0em;
padding-right: 0em;
} }
/*-------------------- /*--------------------
Icon Icon
---------------------*/ ---------------------*/
@ -182,60 +165,45 @@
.ui.icon.input > .icon { .ui.icon.input > .icon {
cursor: default; cursor: default;
position: absolute; position: absolute;
opacity: 0.5;
opacity: @iconOpacity;
top: 0px; top: 0px;
right: 0px; right: 0px;
margin: 0em; margin: 0em;
width: 2.6em;
width: @inputHeight;
height: 100%; height: 100%;
padding-top: 0.82em;
padding-top: @iconOffset;
text-align: center; text-align: center;
-webkit-border-radius: 0em 0.3125em 0.3125em 0em;
-moz-border-radius: 0em 0.3125em 0.3125em 0em;
border-radius: 0em 0.3125em 0.3125em 0em;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
border-radius: 0em @borderRadius @borderRadius 0em;
box-sizing: border-box; box-sizing: border-box;
-webkit-transition: opacity 0.3s ease-out;
-moz-transition: opacity 0.3s ease-out;
-o-transition: opacity 0.3s ease-out;
-ms-transition: opacity 0.3s ease-out;
transition: opacity 0.3s ease-out;
transition: @iconTransition;
} }
.ui.icon.input > .link.icon { .ui.icon.input > .link.icon {
cursor: pointer; cursor: pointer;
} }
.ui.icon.input input { .ui.icon.input input {
padding-right: 3em !important;
padding-right: @iconMargin !important;
} }
.ui.icon.input > .circular.icon { .ui.icon.input > .circular.icon {
top: 0.35em;
right: 0.5em;
top: @circularIconVerticalOffset;
right: @circularIconHorizontalOffset;
} }
/* Left Side */
/* Left Icon Input */
.ui.left.icon.input > .icon { .ui.left.icon.input > .icon {
right: auto; right: auto;
left: 1px;
-webkit-border-radius: 0.3125em 0em 0em 0.3125em;
-moz-border-radius: 0.3125em 0em 0em 0.3125em;
border-radius: 0.3125em 0em 0em 0.3125em;
left: @borderWidth;
border-radius: @borderRadius 0em 0em @borderRadius;
} }
.ui.left.icon.input > .circular.icon { .ui.left.icon.input > .circular.icon {
right: auto; right: auto;
left: 0.5em;
left: @circularIconHorizontalOffset;
} }
.ui.left.icon.input > input { .ui.left.icon.input > input {
padding-left: 3em !important;
padding-right: 1.2em !important;
padding-left: @iconMargin !important;
padding-right: @horizontalPadding !important;
} }
/* Focus */ /* Focus */
@ -248,16 +216,13 @@
---------------------*/ ---------------------*/
.ui.labeled.input .corner.label { .ui.labeled.input .corner.label {
top: 1px;
right: 1px;
font-size: 0.55em;
-webkit-border-top-right-radius: 0.3125em;
-moz-border-top-right-radius: 0.3125em;
border-top-right-radius: 0.3125em;
top: @borderWidth;
right: @borderWidth;
font-size: @labelSize;
border-top-right-radius: @borderRadius;
} }
.ui.labeled.input .corner.label > .icon { .ui.labeled.input .corner.label > .icon {
margin: 0.4em 0em 0em 2em;
margin: @labelIconPosition;
} }
.ui.labeled.input input { .ui.labeled.input input {
padding-right: 2.5em !important; padding-right: 2.5em !important;
@ -265,10 +230,10 @@
/* Spacing with corner label */ /* Spacing with corner label */
.ui.labeled.icon.input:not(.left) > input { .ui.labeled.icon.input:not(.left) > input {
padding-right: 3.25em !important;
padding-right: @labelMargin !important;
} }
.ui.labeled.icon.input:not(.left) > .icon { .ui.labeled.icon.input:not(.left) > .icon {
margin-right: 1.25em;
margin-right: @labelIconMargin;
} }
@ -341,4 +306,6 @@
} }
.ui.massive.input { .ui.massive.input {
font-size: 1.5rem; font-size: 1.5rem;
}
}
.loadUIOverrides() !important;

61
src/elements/segment.less
View File

@ -25,9 +25,9 @@
.ui.segment { .ui.segment {
position: relative; position: relative;
background-color: #FFFFFF;
background-color: @white;
box-shadow: 0px 0px 0px 1px @borderColor;
box-shadow: @boxShadow;
margin: @margin 0em; margin: @margin 0em;
padding: @verticalPadding @horizontalPadding; padding: @verticalPadding @horizontalPadding;
@ -117,8 +117,8 @@
--------------------*/ --------------------*/
.ui.piled.segment { .ui.piled.segment {
margin: (2 * @margin) 0em;
box-shadow: 0px 0px 1px 1px @borderColor;
margin: @piledMargin 0em;
box-shadow: @piledBoxShadow
} }
.ui.piled.segment:first-child { .ui.piled.segment:first-child {
margin-top: 0em; margin-top: 0em;
@ -128,7 +128,7 @@
} }
.ui.piled.segment:after, .ui.piled.segment:after,
.ui.piled.segment:before { .ui.piled.segment:before {
background-color: #FFFFFF;
background-color: @white;
visibility: visible; visibility: visible;
content: ""; content: "";
display: block; display: block;
@ -136,15 +136,15 @@
left: -1px; left: -1px;
position: absolute; position: absolute;
width: 100%; width: 100%;
box-shadow: 0px 0px 1px 1px @borderColor;
box-shadow: @piledBoxShadow
} }
.ui.piled.segment:after { .ui.piled.segment:after {
transform: rotate(1.2deg);
transform: rotate(@piledDegrees);
top: 0; top: 0;
z-index: -1; z-index: -1;
} }
.ui.piled.segment:before { .ui.piled.segment:before {
transform: rotate(-1.2deg);
transform: rotate(-@piledDegrees);
top: 0; top: 0;
z-index: -2; z-index: -2;
} }
@ -154,7 +154,7 @@
--------------------*/ --------------------*/
.ui.stacked.segment { .ui.stacked.segment {
padding-bottom: @verticalPadding + (0.7em);
padding-bottom: @stackedPadding;
} }
.ui.stacked.segment:after, .ui.stacked.segment:after,
.ui.stacked.segment:before { .ui.stacked.segment:before {
@ -167,7 +167,7 @@
background-color: @subtleTransparentBlack; background-color: @subtleTransparentBlack;
width: 100%; width: 100%;
height: 5px;
height: @stackedHeight;
visibility: visible; visibility: visible;
} }
.ui.stacked.segment:before { .ui.stacked.segment:before {
@ -187,7 +187,7 @@
.ui.circular.segment { .ui.circular.segment {
display: table-cell; display: table-cell;
padding: 2em;
padding: @circularPadding;
text-align: center; text-align: center;
vertical-align: middle; vertical-align: middle;
border-radius: 500em; border-radius: 500em;
@ -198,7 +198,7 @@
--------------------*/ --------------------*/
.ui.raised.segment { .ui.raised.segment {
box-shadow: 0px 1px 2px 1px @borderColor;
box-shadow: @raisedBoxShadow;
} }
@ -244,7 +244,6 @@
padding: 0em; padding: 0em;
} }
/*------------------- /*-------------------
Colors Colors
--------------------*/ --------------------*/
@ -284,39 +283,39 @@
.ui.inverted.segment, .ui.inverted.segment,
.ui.inverted.black.segment { .ui.inverted.black.segment {
background-color: @black !important; background-color: @black !important;
color: #FFFFFF !important;
color: @white !important;
} }
.ui.inverted.blue.segment { .ui.inverted.blue.segment {
background-color: @blue !important; background-color: @blue !important;
color: #FFFFFF !important;
color: @white !important;
} }
.ui.inverted.green.segment { .ui.inverted.green.segment {
background-color: @green !important; background-color: @green !important;
color: #FFFFFF !important;
color: @white !important;
} }
.ui.inverted.orange.segment { .ui.inverted.orange.segment {
background-color: @orange !important; background-color: @orange !important;
color: #FFFFFF !important;
color: @white !important;
} }
.ui.inverted.pink.segment { .ui.inverted.pink.segment {
background-color: @pink !important; background-color: @pink !important;
color: #FFFFFF !important;
color: @white !important;
} }
.ui.inverted.purple.segment { .ui.inverted.purple.segment {
background-color: @purple !important; background-color: @purple !important;
color: #FFFFFF !important;
color: @white !important;
} }
.ui.inverted.red.segment { .ui.inverted.red.segment {
background-color: @red !important; background-color: @red !important;
color: #FFFFFF !important;
color: @white !important;
} }
.ui.inverted.teal.segment { .ui.inverted.teal.segment {
background-color: @teal !important; background-color: @teal !important;
color: #FFFFFF !important;
color: @white !important;
} }
.ui.inverted.yellow.segment { .ui.inverted.yellow.segment {
background-color: @yellow !important; background-color: @yellow !important;
color: #FFFFFF !important;
color: @white !important;
} }
/*------------------- /*-------------------
@ -361,15 +360,15 @@
box-shadow: none; box-shadow: none;
} }
.ui.inverted.segment .segment { .ui.inverted.segment .segment {
color: rgba(0, 0, 0, 0.7);
color: @textColor;
} }
.ui.inverted.segment .inverted.segment { .ui.inverted.segment .inverted.segment {
color: #FFFFFF;
color: @white;
} }
.ui.inverted.segment, .ui.inverted.segment,
.ui.primary.inverted.segment { .ui.primary.inverted.segment {
background-color: @black; background-color: @black;
color: #FFFFFF;
color: @white;
} }
/*------------------- /*-------------------
@ -377,24 +376,24 @@
--------------------*/ --------------------*/
.ui.secondary.segment { .ui.secondary.segment {
background-color: @secondaryColor;
background-color: @secondaryBackground;
color: @textColor; color: @textColor;
} }
.ui.tertiary.segment { .ui.tertiary.segment {
background-color: @tertiaryColor;
background-color: @tertiaryBackground;
color: @lightTextColor; color: @lightTextColor;
} }
.ui.secondary.inverted.segment { .ui.secondary.inverted.segment {
background-color: @black; background-color: @black;
background-image: linear-gradient(rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.3) 100%);
color: @offWhite;
background-image: @secondaryInvertedBackground;
color: @secondaryInvertedColor;
} }
.ui.tertiary.inverted.segment { .ui.tertiary.inverted.segment {
background-color: @black; background-color: @black;
background-image: linear-gradient(rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.6) 100%);
color: @darkWhite;
background-image: @tertiaryInvertedColor;
color: @tertiaryInvertedColor;
} }

22
src/themes/default/collections/menu.variables
View File

@ -15,6 +15,8 @@
@horizontalPadding: 0.95em; @horizontalPadding: 0.95em;
@background: #FFFFFF; @background: #FFFFFF;
@itemBackground: none;
@fontWeight: normal; @fontWeight: normal;
@boxShadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); @boxShadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
@ -33,11 +35,6 @@
rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.1) 50%,
rgba(0, 0, 0, 0.05) 100%) rgba(0, 0, 0, 0.05) 100%)
; ;
@verticalDividerBackground: linear-gradient(to right,
rgba(0, 0, 0, 0.03) 0%,
rgba(0, 0, 0, 0.1) 1.5em,
rgba(0, 0, 0, 0.03) 100%)
;
@headerBackground: rgba(0, 0, 0, 0.04); @headerBackground: rgba(0, 0, 0, 0.04);
@headerWeight: bold; @headerWeight: bold;
@ -90,7 +87,7 @@
@inputVerticalMargin: -0.8em; @inputVerticalMargin: -0.8em;
@inputOffset: -0.05em; @inputOffset: -0.05em;
@inputVerticalPadding: 0.5em; @inputVerticalPadding: 0.5em;
@inputIconOffset: 0.25em;
@inputIconOffset: -0.3em;
@smallInputOffset: 0em; @smallInputOffset: 0em;
@smallInputVerticalPadding: 0.4em; @smallInputVerticalPadding: 0.4em;
@ -108,6 +105,7 @@
@labelHorizontalPadding: 0.8em; @labelHorizontalPadding: 0.8em;
/* Dropdown */ /* Dropdown */
@dropdownBackground: #FFFFFF;
@dropdownMenuOffset: 1px; @dropdownMenuOffset: 1px;
@dropdownPointingDistance: 0.75em; @dropdownPointingDistance: 0.75em;
@dropdownTextColor: @textColor; @dropdownTextColor: @textColor;
@ -152,6 +150,17 @@
Types Types
---------------*/ ---------------*/
/* Vertical */
@verticalBackground: #FFFFFF;
@verticalItemBackground: none;
@verticalDividerBackground: linear-gradient(to right,
rgba(0, 0, 0, 0.03) 0%,
rgba(0, 0, 0, 0.1) 1.5em,
rgba(0, 0, 0, 0.03) 100%)
;
/* Secondary */ /* Secondary */
@secondaryBackground: none; @secondaryBackground: none;
@secondaryTransition: color 0.2s ease; @secondaryTransition: color 0.2s ease;
@ -221,6 +230,7 @@
/* Labeled Icon */ /* Labeled Icon */
@labeledIconSize: 1.5em; @labeledIconSize: 1.5em;
@labeledIconMinWidth: 6em;
@labeledIconTextMargin: 0.3em; @labeledIconTextMargin: 0.3em;
/* Text */ /* Text */

55
src/themes/default/elements/button.variables
View File

@ -27,30 +27,44 @@
@backgroundColor: #FAFAFA; @backgroundColor: #FAFAFA;
@backgroundImage: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.05)); @backgroundImage: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.05));
@boxShadow: @boxShadow:
0px 0px 0px 1px rgba(0, 0, 0, 0.08) inset, 0px 0px 0px 1px rgba(0, 0, 0, 0.08) inset,
0px -@shadowDistance 0px 0px rgba(0, 0, 0, 0.1) inset 0px -@shadowDistance 0px 0px rgba(0, 0, 0, 0.1) inset
; ;
@coloredBoxShadow: none;
/* transitions */
@transition:
opacity @transitionDuration @transitionEasing,
background-color @transitionDuration @transitionEasing,
color @transitionDuration @transitionEasing,
background @transitionDuration @transitionEasing,
box-shadow @transitionDuration @transitionEasing
;
/* Padding */ /* Padding */
@verticalPadding: 0.8em; @verticalPadding: 0.8em;
@horizontalPadding: 1.5em; @horizontalPadding: 1.5em;
@compactVerticalPadding: (@verticalPadding * 0.75);
@compactHorizontalPadding: (@horizontalPadding * 0.75);
/* Shadow */ /* Shadow */
@shadowDistance: 0em; @shadowDistance: 0em;
@shadowOffset: (@shadowDistance / 2); @shadowOffset: (@shadowDistance / 2);
/* Icon */
@iconMargin: 0.6em;
/* Loader */
@loaderPath: "@{imagePath}/loader-mini.gif";
@hugeLoaderPath: "@{imagePath}/loader-small.gif";
@massiveLoaderPath: "@{imagePath}/loader-medium.gif";
/*------------------- /*-------------------
Group
Group
--------------------*/ --------------------*/
@verticalBoxShadow: 0px 0px 0px 1px @borderColor inset; @verticalBoxShadow: 0px 0px 0px 1px @borderColor inset;
/*------------------- /*-------------------
States States
--------------------*/ --------------------*/
@ -73,8 +87,24 @@
Types Types
--------------------*/ --------------------*/
/* Or */
@orWidth: 0.3em;
@orHeight: 1.1em;
@orVerticalOffset: -0.1em;
@orHorizontalOffset: -0.9em;
@orTextStyle: normal;
@orTextWeight: bold;
@orCircleSize: 1.8em;
@orLineHeight: 1.55;
@orBoxShadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
@orSpacerHeight: 0.5em;
@orSpacerColor: @white;
/* Icon */ /* Icon */
@iconMargin: 0.6em;
@iconHoverOpacity: 0.85; @iconHoverOpacity: 0.85;
@iconButtonOpacity: 0.9; @iconButtonOpacity: 0.9;
@ -108,6 +138,19 @@
Variations Variations
--------------------*/ --------------------*/
/* Colors */
@coloredBackgroundImage: none;
@coloredBoxShadow: none;
/* Compact */
@compactVerticalPadding: (@verticalPadding * 0.75);
@compactHorizontalPadding: (@horizontalPadding * 0.75);
/* Attached */
@attachedOffset: -1px;
@attachedBoxShadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
@attachedHorizontalPadding: 0.75em;
/* Floated */ /* Floated */
@floatedMargin: 0.25em; @floatedMargin: 0.25em;

3
src/themes/default/elements/divider.overrides
View File

@ -0,0 +1,3 @@
/*******************************
Overrides
*******************************/

48
src/themes/default/elements/divider.variables
View File

@ -0,0 +1,48 @@
/*******************************
Standard
*******************************/
/*-------------------
Divider
--------------------*/
@highlightWidth: 1px;
@highlightColor: rgba(255, 255, 255, 0.8);
@shadowWidth: 1px;
@shadowColor: rgba(0, 0, 0, 0.1);
@dividerTextColor: @textColor;
/*-------------------
Coupling
--------------------*/
/* Icon */
@dividerIconSize: 1rem;
@dividerIconMargin: 0rem;
/*******************************
Variations
*******************************/
/* Horizontal / Vertical */
@directionalFontSize: 0.875rem;
@directionalTextColor: @invertedLightTextColor;
@horizontalDividerVerticalMargin: 1rem;
@horizontalDividerHorizontalMargin: 1.5rem;
@verticalDividerWidth: 6%;
/* Inverted */
@invertedTextColor: @white;
@invertedHighlightColor: rgba(255, 255, 255, 0.15);
@invertedShadowColor: rgba(0, 0, 0, 0.15);
/* Section */
@sectionMargin: 2rem;

78
src/themes/default/elements/header.variables
View File

@ -10,18 +10,86 @@
// @teal // @teal
// @black // @black
/*******************************
Standard
*******************************/
/*------------------- /*-------------------
Modified Globals
Header
--------------------*/ --------------------*/
@fontFamily : Source Sans Pro, Helvetica Neue, Helvetica, Arial, sans-serif; @fontFamily : Source Sans Pro, Helvetica Neue, Helvetica, Arial, sans-serif;
@topMargin: 1em;
@bottomMargin: 1rem;
@horizontalPadding: 0em;
@verticalPadding: 0em;
@lineHeight: 1.33;
/* HTML Headings */
@h1: 2rem;
@h2: 1.75rem;
@h3: 1.33rem;
@h4: 1.1rem;
@h5: 1rem;
/* Sub Header */
@subHeaderLineHeight: 1.2;
@subHeaderColor: rgba(0, 0, 0, 0.5);
/*-------------------
Coupling
--------------------*/
@iconMargin: 1em;
@iconAlignment: baseline;
@contentAlignment: top;
@precedingParagraphMargin: 0em;
/*******************************
Variations
*******************************/
/* Icon Header */
@iconHeaderSize: 3em;
@iconHeaderMargin: 0.2em;
@circularHeaderIconSize: 2em;
@squareHeaderIconSize: 2em;
/* Inverted */
@invertedColor: @white;
@invertedSubHeaderColor: rgba(255, 255, 255, 0.85);
/* Divided */
@dividedBorder: 1px solid rgba(0, 0, 0, 0.1);
@dividedBorderPadding: 0.2rem;
@dividedSubHeaderPadding: 0.5rem;
@dividedIconPadding: 0.2em;
/* Block */
@blockBackground: rgba(0, 0, 0, 0.05);
@blockHorizontalPadding: 1em;
@blockVerticalPadding: 0.5em;
/* Attached */
@attachedColor: #F0F0F0;
@attachedVerticalPadding: 0.75rem;
@attachedHorizontalPadding: 1rem;
@attachedBoxShadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
@attachedBorderRadius: 0.3125em;
/* Floated */
@floatedMargin: 0.5em;
/* Sizing */
@tiny: 1em; @tiny: 1em;
@small: 1.1em; @small: 1.1em;
@medium: 1.33em; @medium: 1.33em;
@large: 1.75em; @large: 1.75em;
@huge: 2em; @huge: 2em;
/*-------------------
Header Variables
--------------------*/

30
src/themes/default/elements/image.variables
View File

@ -1,26 +1,35 @@
/*-------------------
Globals Used
--------------------*/
/*
@borderColor
*/
/*******************************
Standard
*******************************/
/*------------------- /*-------------------
Variables
Image
--------------------*/ --------------------*/
@placeholderColor: rgba(0, 0, 0, 0.05); @placeholderColor: rgba(0, 0, 0, 0.05);
@roundedBorderRadius: 0.3125em; @roundedBorderRadius: 0.3125em;
@imageSpacing: 0.25rem;
@imageHorizontalMargin: 0.25rem;
@imageVerticalMargin: 0.5em;
/*******************************
Types
*******************************/
/* Avatar */
@avatarSize: 2em; @avatarSize: 2em;
@avatarMargin: @imageHorizontalMargin;
/*******************************
Variations
*******************************/
/* Floated */
@floatedHorizontalMargin: 1em; @floatedHorizontalMargin: 1em;
@floatedVerticalMargin: 1em; @floatedVerticalMargin: 1em;
/* Sizing */
@mini: 0.7em; @mini: 0.7em;
@tiny: 0.8em; @tiny: 0.8em;
@small: 0.875em; @small: 0.875em;
@ -30,6 +39,7 @@
@huge: 1.375em; @huge: 1.375em;
@massive: 1.5em; @massive: 1.5em;
/* Size */
@miniWidth: 20px; @miniWidth: 20px;
@tinyWidth: 80px; @tinyWidth: 80px;
@smallWidth: 150px; @smallWidth: 150px;

3
src/themes/default/elements/input.overrides
View File

@ -0,0 +1,3 @@
/*******************************
Overrides
*******************************/

102
src/themes/default/elements/input.variables
View File

@ -0,0 +1,102 @@
/*-------------------
Globals Used
--------------------*/
// (Color Variables)
// @transitionDuration
// @transitionEasing
// @iconWidth
// @borderColor
// @textColor, @invertedTextColor
/*-------------------
Element
--------------------*/
@fontFamily: "Helvetica Neue", "Helvetica", Arial;
@verticalPadding: 0.65em;
@horizontalPadding: 1em;
@inputHeight: (@verticalPadding * 2) + 1.5;
@background: #FFFFFF;
@borderWidth: 1px;
@border: @borderWidth solid rgba(0, 0, 0, 0.15);
@boxShadow: none;
@borderRadius: 0.3125em;
@transition:
background-color 0.3s ease-out,
box-shadow 0.2s ease,
border-color 0.2s ease
;
@inputColor: @textColor;
/*-------------------
Types
--------------------*/
/* Icon */
@iconOpacity: 0.5;
@iconOffset: 0.82em;
@iconFocusOpacity: 1;
@iconMargin: 2.75em;
@iconTransition: opacity 0.3s ease-out;
/* Circular Icon Input */
@circularIconVerticalOffset: 0.35em;
@circularIconHorizontalOffset: 0.5em;
/* Labeled */
@labelSize: 0.55em;
@labelIconPosition: 0.4em 0em 0em 2em;
@labelMargin: 3.25em;
@labelIconMargin: 1.25em;
/*-------------------
States
--------------------*/
/* Placeholder */
@placeholderColor: @unselectedTextColor;
@placeholderFocusColor: @textColor;
@placeholderErrorColor: rgba(255, 80, 80, 0.4);
@placeholderErrorFocusColor: rgba(255, 80, 80, 0.7);
/* Down */
@downBorderColor: rgba(0, 0, 0, 0.3);
@downBackground: #FAFAFA;
@downColor: @textColor;
@downBoxShadow: none;
/* Focus */
@focusBorderColor: @selectedBorderColor;
@focusBackground: '';
@focusColor: @selectedTextColor;
@focusBoxShadow: none;
/* Error */
@errorBackground: #FFFAFA;
@errorBorder: #E7BEBE;
@errorColor: #D95C5C;
@errorBoxShadow: none;
/* Loading */
@loadingImage: "../images/loader-mini.gif";
/*-------------------
Variations
--------------------*/
/* Sizing */
@mini: 0.8125rem;
@small: 0.875rem;
@medium: 1rem;
@large: 1.125rem;
@big: 1.25rem;
@huge: 1.375rem;
@massive: 1.5rem;

53
src/themes/default/elements/segment.variables
View File

@ -1,16 +1,12 @@
/*******************************
Standard
*******************************/
/*------------------- /*-------------------
Globals Used
Segment
--------------------*/ --------------------*/
/*
@borderColor
*/
/*-------------------
Segment Variables
--------------------*/
@boxShadow: 0px 0px 0px 1px @borderColor;
@verticalPadding: 1em; @verticalPadding: 1em;
@horizontalPadding: 1em; @horizontalPadding: 1em;
@ -18,10 +14,45 @@
@margin: 1em; @margin: 1em;
@borderRadius: 5px; @borderRadius: 5px;
/*-------------------
Coupling
--------------------*/
/* Page Grid Segment */
@pageGridMargin: 2 * @verticalPadding; @pageGridMargin: 2 * @verticalPadding;
/*******************************
Variations
*******************************/
/* Piled */
@piledMargin: 2em;
@piledBoxShadow: 0px 0px 1px 1px @borderColor;
@piledDegrees: 1.2deg;
/* Circular */
@circularPadding: 2em;
/* Stacked */
@stackedPadding: @verticalPadding + (0.7em);
@stackedHeight: 5px;
/* Raised */
@raisedBoxShadow: 0px 1px 2px 1px @borderColor;
/* Colors */
@coloredBorderSize: 0.2em; @coloredBorderSize: 0.2em;
@secondaryColor: #FAF9FA;
@tertiaryColor: #EBEBEB;
/* Ordinality */
@secondaryBackground: #FAF9FA;
@secondaryColor: @textColor;
@tertiaryBackground: #EBEBEB;
@tertiaryColor: @lightTextColor;
@secondaryInvertedBackground: linear-gradient(rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.3) 100%);
@secondaryInvertedColor: @offWhite;
@tertiaryInvertedBackground: linear-gradient(rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.6) 100%);
@tertiaryInvertedColor: @darkWhite;

36
src/themes/github/collections/menu.variables
View File

@ -10,35 +10,57 @@
@activeBorderSize : 0em; @activeBorderSize : 0em;
@hoverBackground : rgba(0, 0, 0, 0.01);
@downBackground : rgba(0, 0, 0, 0.05);
@hoverBackground : rgba(0, 0, 0, 0.02);
@downBackground : rgba(0, 0, 0, 0.06);
@activeBackground : rgba(0, 0, 0, 0.03);
@activeHoverBackground : rgba(0, 0, 0, 0.03);
@activeBackground : rgba(0, 0, 0, 0.04);
@activeHoverBackground : rgba(0, 0, 0, 0.04);
@boxShadow : @boxShadow :
0px 1px 2px 0px rgba(0, 0, 0, 0.15), 0px 1px 2px 0px rgba(0, 0, 0, 0.15),
0px 0px 0px 1px rgba(0, 0, 0, 0.05) 0px 0px 0px 1px rgba(0, 0, 0, 0.05)
; ;
@headerBackground: rgba(0, 0, 0, 0.08);
@subMenuMargin: 1em; @subMenuMargin: 1em;
@subMenuFontSize: 0.9rem; @subMenuFontSize: 0.9rem;
@subMenuHorizontalPadding: 0.7em; @subMenuHorizontalPadding: 0.7em;
@arrowHoverColor: #EEEEEE;
@arrowActiveColor: #EEEEEE;
@arrowVerticalHoverColor: #F4F4F4;
@arrowVerticalActiveColor: #F4F4F4;
/*------------------- /*-------------------
Elements Elements
--------------------*/ --------------------*/
@inputVerticalPadding: 0.65em; @inputVerticalPadding: 0.65em;
@inputIconOffset: 0em;
@inputIconOffset: -0.1em;
@buttonOffset: -0.15em; @buttonOffset: -0.15em;
@buttonVerticalPadding: 0.75em; @buttonVerticalPadding: 0.75em;
/*-------------------
Types
--------------------*/
@paginationMinWidth: 3.5em;
@tieredActiveItemBackground: #F5F5F5;
@tieredActiveMenuBackground: #F5F5F5;
/*------------------- /*-------------------
Variations Variations
--------------------*/ --------------------*/
@verticalBackground: #FFFFFF;
@verticalItemBackground: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.02));
@invertedBackground: #333333 linear-gradient(rgba(255, 255, 255, 0.15), rgba(0, 0, 0, 0.15));
@invertedBoxShadow :
0px 1px 2px 0px rgba(0, 0, 0, 0.15),
0px 0px 0px 1px rgba(255, 255, 255, 0.15)
;
@secondaryVerticalPadding: 0.75em; @secondaryVerticalPadding: 0.75em;

2
src/themes/github/elements/button.variables
View File

@ -23,6 +23,8 @@
0 0 0 1px rgba(0, 0, 0, 0.13) inset, 0 0 0 1px rgba(0, 0, 0, 0.13) inset,
0 1px 3px rgba(0, 0, 0, 0.05) 0 1px 3px rgba(0, 0, 0, 0.05)
; ;
@coloredBackgroundImage: linear-gradient(rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.2));
@coloredBoxShadow: @coloredBoxShadow:
0 -1px 0 0 rgba(0, 0, 0, 0.05) inset, 0 -1px 0 0 rgba(0, 0, 0, 0.05) inset,
0 0 0 1px rgba(0, 0, 0, 0.1) inset, 0 0 0 1px rgba(0, 0, 0, 0.1) inset,

3
src/themes/user/elements/divider.overrides
View File

@ -0,0 +1,3 @@
/*******************************
Overrides
*******************************/

3
src/themes/user/elements/divider.variables
View File

@ -0,0 +1,3 @@
/*******************************
User Variable Overrides
*******************************/

3
src/themes/user/elements/input.overrides
View File

@ -0,0 +1,3 @@
/*******************************
Overrides
*******************************/

3
src/themes/user/elements/input.variables
View File

@ -0,0 +1,3 @@
/*******************************
User Variable Overrides
*******************************/
Write Preview
Loading…
Cancel
Save