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

Finishes list variables, adjustments/tweaks to image variables

pull/954/head
jlukic 11 years ago
parent
f9e2f243cc
commit
aafa618a07
4 changed files with 146 additions and 72 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 35
      src/definitions/elements/image.less
  2. 134
      src/definitions/views/list.less
  3. 4
      src/themes/packages/default/elements/image.variables
  4. 45
      src/themes/packages/default/views/list.variables

35
src/definitions/elements/image.less
View File

@ -54,6 +54,39 @@ img.ui.image {
Variations
*******************************/
/*--------------
Inline
---------------*/
.ui.inline.image,
.ui.inline.image img {
display: inline-block;
}
/*------------------
Vertical Aligned
-------------------*/
.ui.top.aligned.images .image,
.ui.top.aligned.image,
.ui.top.aligned.image img {
display: inline-block;
vertical-align: top;
}
.ui.middle.aligned.images .image,
.ui.middle.aligned.image,
.ui.middle.aligned.image img {
display: inline-block;
vertical-align: middle;
}
.ui.bottom.aligned.images .image,
.ui.bottom.aligned.image,
.ui.bottom.aligned.image img {
display: inline-block;
vertical-align: bottom;
}
/*--------------
Rounded
---------------*/
@ -77,7 +110,7 @@ img.ui.image {
}
/*--------------
Circular
Circular
---------------*/
.ui.circular.images .image,

134
src/definitions/views/list.less
View File

@ -62,8 +62,8 @@ ol.ui.list li,
line-height: @itemLineHeight;
}
ul.ui.list > li:first-child,
ol.ui.list > li:first-child,
ul.ui.list > li:first-child:after,
ol.ui.list > li:first-child:after,
.ui.list .item:after {
content: '';
display: block;
@ -109,10 +109,17 @@ ol.ui.list ol,
/* Image */
.ui.list .item > .image {
display: table-cell;
background-color: transparent;
margin: 0em;
padding-right: @imageDistance;
vertical-align: @imageAlign;
}
.ui.list .item > .top.aligned.image {
vertical-align: top;
}
.ui.list .item > .image img {
vertical-align: @imageAlign;
}
.ui.list .item > img.image,
.ui.list .item > .image:only-child {
display: inline-block;
@ -418,9 +425,11 @@ ul.ui.horizontal.bulleted.list li:first-child::before,
--------------------*/
ol.ui.list,
.ui.ordered.list {
.ui.ordered.list,
.ui.ordered.list .list,
ol.ui.list ol {
counter-reset: ordered;
margin-left: 1.5rem;
margin-left: @orderedCountDistance;
list-style-type: none;
}
ol.ui.list li,
@ -431,7 +440,7 @@ ol.ui.list li,
ol.ui.list li:before,
.ui.ordered.list .item:before {
position: absolute;
left: @orderedCountOffset;
left: -(@orderedCountDistance);
counter-increment: @orderedCountName;
content: @orderedCountContent;
text-align: @orderedCountTextAlign;
@ -439,16 +448,11 @@ ol.ui.list li:before,
opacity: @orderedCountOpacity;
}
ol.ui.list ol,
.ui.ordered.list .list {
counter-reset: @orderedCountName;
padding-left: @orderedCountDistance;
}
/* Child Lists */
ol.ui.list ol,
.ui.ordered.list .list {
padding-left: @orderedChildCountDistance;
margin-left: @orderedChildCountDistance;
}
ol.ui.list ol li:before,
.ui.ordered.list .list .item:before {
@ -503,18 +507,25 @@ ol.ui.horizontal.list li:before,
}
/* Divided Ordered */
.ui.divided.ordered.list:not(.horizontal),
.ui.divided.ordered.list .list {
.ui.divided.ordered.list {
margin-left: 0em;
padding-left: 0em;
}
.ui.divided.ordered.list .item:not(.horizontal) {
.ui.divided.ordered.list .item {
padding-left: @orderedCountDistance;
padding-right: @orderedCountDistance;
}
.ui.divided.ordered.list .item:before {
left: 0em;
}
.ui.divided.ordered.list .item .list {
margin-left: -(@orderedChildCountDistance);
margin-right: -(@orderedChildCountDistance);
padding-bottom: @itemVerticalPadding;
}
.ui.divided.ordered.list .item .list .item {
padding-left: @orderedChildCountDistance;
padding-right: @orderedChildCountDistance;
}
/* Divided horizontal */
@ -523,12 +534,11 @@ ol.ui.horizontal.list li:before,
}
.ui.divided.horizontal.list > .item {
border-top: none;
border-left: 1px solid rgba(0, 0, 0, 0.1);
border-left: @dividedBorder;
margin: 0em;
padding-left: 0.75em;
padding-right: 0.75em;
line-height: 0.6;
padding-left: @horizontalDividedSpacing;
padding-right: @horizontalDividedSpacing;
line-height: @horizontalDividedLineHeight;
}
.ui.horizontal.divided.list > .item:first-child {
border-left: none;
@ -538,10 +548,10 @@ ol.ui.horizontal.list li:before,
/* Inverted */
.ui.divided.inverted.list > .item,
.ui.divided.inverted.list > .list {
border-color: rgba(255, 255, 255, 0.2);
border-color: @dividedInvertedBorder;
}
.ui.divided.inverted.horizontal.list .item {
border-color: rgba(255, 255, 255, 0.2);
border-color: @dividedInvertedBorder;
}
@ -552,12 +562,12 @@ ol.ui.horizontal.list li:before,
.ui.celled.list > .item,
.ui.celled.list > .list {
border-top: 1px solid rgba(0, 0, 0, 0.1);
padding-left: 0.5rem;
padding-right: 0.5rem;
border-top: @celledBorder;
padding-left: @celledHorizontalPadding;
padding-right: @celledHorizontalPadding;
}
.ui.celled.list > .item:last-child {
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
border-bottom: @celledBorder;
}
/* Padding on all elements */
@ -568,10 +578,6 @@ ol.ui.horizontal.list li:before,
}
/* Sub Menu */
.ui.celled.list .item .list {
margin-left: -0.5em;
margin-right: -0.5em;
}
.ui.celled.list .item .list .item {
border-width: 0px;
}
@ -583,11 +589,17 @@ ol.ui.horizontal.list li:before,
.ui.celled.bulleted.list {
margin-left: 0em;
}
.ui.celled.bulleted.list > .item {
padding-left: 1.5rem;
.ui.celled.bulleted.list .item {
padding-left: (@bulletDistance);
padding-right: (@bulletDistance);
}
.ui.celled.bulleted.list > .item:before {
left: 0.5em;
.ui.celled.bulleted.list .item:before {
left: 0em;
}
.ui.celled.bulleted.list .item .list {
margin-left: -(@bulletDistance);
margin-right: -(@bulletDistance);
padding-bottom: @itemVerticalPadding;
}
/* Celled Ordered */
@ -595,15 +607,20 @@ ol.ui.horizontal.list li:before,
margin-left: 0em;
}
.ui.celled.ordered.list .item {
padding-left: 2rem;
padding-right: 2rem;
padding-left: @orderedCountDistance;
padding-right: @orderedCountDistance;
}
.ui.celled.ordered.list .item:before {
left: 0.5em;
left: 0em;
}
.ui.celled.ordered.list .item .list {
margin-left: -2rem;
margin-right: -2rem;
margin-left: -(@orderedChildCountDistance);
margin-right: -(@orderedChildCountDistance);
padding-bottom: @itemVerticalPadding;
}
.ui.celled.ordered.list .item .list .item {
padding-left: @orderedChildCountDistance;
padding-right: @orderedChildCountDistance;
}
/* Celled Horizontal */
@ -612,58 +629,55 @@ ol.ui.horizontal.list li:before,
}
.ui.horizontal.celled.list .item {
border-top: none;
border-left: 1px solid rgba(0, 0, 0, 0.1);
border-left: @celledBorder;
margin: 0em;
padding-left: 0.75rem;
padding-right: 0.75rem;
padding-left: @horizontalCelledSpacing;
padding-right: @horizontalCelledSpacing;
line-height: 0.6;
line-height: @horizontalCelledLineHeight;
}
.ui.horizontal.celled.list .item:last-child {
border-bottom: none;
border-right: 1px solid rgba(0, 0, 0, 0.1);
border-right: @celledBorder;
}
/* Inverted */
.ui.celled.inverted.list > .item,
.ui.celled.inverted.list > .list {
border-color: rgba(255, 255, 255, 0.2);
border-color: @celledInvertedBorder;
}
.ui.celled.inverted.horizontal.list .item {
border-color: rgba(255, 255, 255, 0.2);
border-color: @celledInvertedBorder;
}
/*-------------------
Relaxed
--------------------*/
.ui.relaxed.list:not(.horizontal) .item {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
padding-top: @relaxedVerticalPadding;
padding-bottom: @relaxedVerticalPadding;
}
.ui.relaxed.list .header {
margin-bottom: 0.25rem;
margin-bottom: @relaxedHeaderMargin;
}
.ui.horizontal.relaxed.list .item {
padding-left: 1.25rem;
padding-right: 1.25rem;
padding-left: @relaxedHorizontalPadding;
padding-right: @relaxedHorizontalPadding;
}
.ui.very.relaxed.list:not(.horizontal) .item {
padding-top: 1rem;
padding-bottom: 1rem;
padding-top: @veryRelaxedVerticalPadding;
padding-bottom: @veryRelaxedVerticalPadding;
}
.ui.very.relaxed.list .header {
margin-bottom: 0.5rem;
margin-bottom: @veryRelaxedHeaderMargin;
}
.ui.horizontal.very.relaxed.list .item {
padding-left: 2rem;
padding-right: 2rem;
padding-left: @veryRelaxedHorizontalPadding;
padding-right: @veryRelaxedHorizontalPadding;
}
/*-------------------
Sizes
--------------------*/

4
src/themes/packages/default/elements/image.variables
View File

@ -10,7 +10,7 @@
@roundedBorderRadius: 0.3125em;
@imageHorizontalMargin: 0.25rem;
@imageVerticalMargin: 0.5em;
@imageVerticalMargin: 0.5rem;
@imageBorder: 1px solid rgba(0, 0, 0, 0.1);
/*******************************
@ -18,7 +18,7 @@
*******************************/
/* Avatar */
@avatarSize: 2em;
@avatarSize: 2.5em;
@avatarMargin: @imageHorizontalMargin;

45
src/themes/packages/default/views/list.variables
View File

@ -22,8 +22,8 @@
@horizontalPadding: 0em;
/* Sub List */
@childListDistance: 0.75em;
@childListPadding: @childListDistance 0em @childListDistance 0em;
@childListDistance: 0.5em;
@childListPadding: @childListDistance 0em 0em 0em;
@childListIndent: 1em;
/* List Item */
@ -38,17 +38,17 @@
/* Icon */
@iconDistance: 0.3em;
@iconAlign: top;
@iconAlign: middle;
@iconOffset: ((@itemLineHeight - 1rem) / 2);
@iconTransition: color 0.2s ease;
/* Image */
@imageDistance: 1em;
@imageAlign: top;
@imageDistance: 0.5em;
@imageAlign: middle;
/* Content */
@contentDistance: 0.5em;
@contentAlign: top;
@contentAlign: middle;
/* Link */
@itemLinkColor: @textColor;
@ -149,9 +149,8 @@
/* Ordered List */
@orderedCountName: ordered;
@orderedCountContent: counters(ordered, ".");
@orderedCountDistance: 2.5rem;
@orderedCountOffset: -1.5rem;
@orderedCountContent: counters(ordered, ".") " ";
@orderedCountDistance: 1.25rem;
@orderedCountOpacity: 0.6;
@orderedCountTextAlign: right;
@orderedCountVerticalAlign: top;
@ -165,9 +164,37 @@
/* Divided */
@dividedBorderWidth: 1px;
@dividedBorder: @dividedBorderWidth solid @borderColor;
@dividedInvertedBorder: @dividedBorderWidth solid @whiteBorderColor;
@dividedChildListBorder: none;
@dividedChildItemBorder: none;
/* Divided Horizontal */
@horizontalDividedSpacing: (@horizontalSpacing / 2);
@horizontalDividedLineHeight: 0.6;
/* Divided */
@celledBorderWidth: 1px;
@celledBorder: @celledBorderWidth solid @borderColor;
@celledInvertedBorder: @dividedBorderWidth solid @whiteBorderColor;
@celledHorizontalPadding: 0.5em;
@celledChildListBorder: none;
@celledChildItemBorder: none;
/* Divided Horizontal */
@horizontalCelledSpacing: (@horizontalSpacing / 2);
@horizontalCelledLineHeight: 0.6;
/* Relaxed */
@relaxedVerticalPadding: 0.5rem;
@relaxedHeaderMargin: 0.25rem;
@relaxedHorizontalPadding: 1.25rem;
/* Very Relaxed */
@veryRelaxedVerticalPadding: 1rem;
@veryRelaxedHeaderMargin: 0.5rem;
@veryRelaxedHorizontalPadding: 2rem;
/* Sizes */
@mini: 0.7rem;
@tiny: 0.8rem;

Write Preview
Loading…
Cancel
Save