Browse Source

Adds inverted list styles, fixes styling of lists inside horizontal lists

pull/329/head
jlukic 11 years ago
parent
commit
217dc7404d
1 changed files with 120 additions and 53 deletions
  1. 173
      src/views/list.less

173
src/views/list.less

@ -65,31 +65,34 @@ ol.ui.list li,
visibility: hidden;
}
/* Sub-List */
.ui.list .list {
clear: both;
}
/* Icon */
.ui.list .item > .icon {
display: table-cell;
margin: 0em;
padding: 0.1em 0.5em 0em 0em;
vertical-align: top;
display: block;
float: left;
margin: 0em 1em 0em 0em;
padding: 0.1em 0em 0em 0em;
}
.ui.list .item > .icon:only-child {
display: inline-block;
}
.ui.horizontal.list .item > .icon {
float: none;
display: inline-block;
margin: 0em;
padding: 0em 0.25em 0em 0em;
}
/* Image */
.ui.list .item > img {
display: inline-block;
width: 2em;
margin-right: 0.5em;
display: block;
float: left;
margin-right: 1em;
vertical-align: middle;
-webkit-border-radius: 0.2em;
-moz-border-radius: 0.2em;
border-radius: 0.2em;
}
/* Content */
@ -99,9 +102,8 @@ ol.ui.list li,
line-height: 1.2;
}
.ui.list .item > .icon + .content {
display: table-cell;
float: left;
vertical-align: top;
padding-left: 0.5em;
}
/* Link */
@ -120,7 +122,6 @@ ol.ui.list li,
/* Header */
.ui.list .header {
margin-bottom: 0.25em;
font-weight: bold;
}
.ui.list .description {
@ -151,15 +152,19 @@ ol.ui.list li,
display: inline-block;
font-size: 0em;
}
.ui.horizontal.list .item {
.ui.horizontal.list > .item {
display: inline-block;
margin-left: 1em;
font-size: 1rem;
}
.ui.horizontal.list .item:first-child {
.ui.horizontal.list > .item:first-child {
margin-left: 0em;
}
.ui.horizontal.list .list {
padding-left: 0em;
padding-bottom: 0em;
}
/*******************************
States
@ -179,16 +184,30 @@ ol.ui.list li,
Variations
*******************************/
/*-------------------
Inverted
--------------------*/
.ui.inverted.list a .icon {
color: rgba(255, 255, 255, 0.6);
}
.ui.inverted.list .description {
color: rgba(255, 255, 255, 0.8);
}
.ui.inverted.link.list .item {
color: rgba(255, 255, 255, 0.4);
}
/*-------------------
Link
--------------------*/
.ui.link.list .item {
color: rgba(0, 0, 0, 0.4);
color: rgba(0, 0, 0, 0.3);
}
.ui.link.list a.item,
.ui.link.list .item a {
color: rgba(0, 0, 0, 0.6);
color: rgba(0, 0, 0, 0.5);
}
.ui.link.list a.item:hover,
.ui.link.list .item a:hover {
@ -196,13 +215,31 @@ ol.ui.list li,
}
.ui.link.list a.item:active,
.ui.link.list .item a:active {
color: rgba(0, 0, 0, 0.9);
color: rgba(0, 0, 0, 0.8);
}
.ui.link.list a.active.item,
.ui.link.list .active.item a {
color: rgba(0, 0, 0, 0.8);
}
/* Inverted */
.ui.inverted.link.list a.item,
.ui.inverted.link.list .item a {
color: rgba(255, 255, 255, 0.6);
}
.ui.inverted.link.list a.item:hover,
.ui.inverted.link.list .item a:hover {
color: rgba(255, 255, 255, 0.8);
}
.ui.inverted.link.list a.item:active,
.ui.inverted.link.list .item a:active {
color: rgba(255, 255, 255, 0.9);
}
.ui.inverted.link.list a.active.item,
.ui.inverted.link.list .active.item a {
color: rgba(255, 255, 255, 0.8);
}
/*-------------------
Selection
--------------------*/
@ -212,26 +249,6 @@ ol.ui.list li,
color: rgba(0, 0, 0, 0.4);
padding: 0.5em;
-webkit-transition:
0.2s color ease,
0.2s padding-left ease,
0.2s background-color ease
;
-moz-transition:
0.2s color ease,
0.2s padding-left ease,
0.2s background-color ease
;
-o-transition:
0.2s color ease,
0.2s padding-left ease,
0.2s background-color ease
;
-ms-transition:
0.2s color ease,
0.2s padding-left ease,
0.2s background-color ease
;
transition:
0.2s color ease,
0.2s padding-left ease,
@ -242,13 +259,6 @@ ol.ui.list li,
background-color: rgba(0, 0, 0, 0.02);
color: rgba(0, 0, 0, 0.7);
}
.ui.selection.list:not(.horizontal):not(.ordered) .item:hover {
padding-left: 1em;
}
.ui.selection.list:not(.horizontal):not(.ordered) .item:hover .item:hover {
padding-left: 0.5em;
}
.ui.selection.list .item:active {
background-color: rgba(0, 0, 0, 0.05);
color: rgba(0, 0, 0, 0.7);
@ -258,6 +268,38 @@ ol.ui.list li,
color: rgba(0, 0, 0, 0.7);
}
.ui.animated.list .item {
transition:
0.2s color ease,
0.2s padding-left ease,
0.2s background-color ease
;
}
.ui.animated.list:not(.horizontal) .item:hover {
padding-left: 1em;
}
.ui.animated.list:not(.horizontal) .item:hover .item:hover {
padding-left: 0.5em;
}
/* Inverted */
.ui.inverted.selection.list .item {
color: rgba(255, 255, 255, 0.6);
}
.ui.inverted.selection.list .item:hover {
background-color: rgba(255, 255, 255, 0.04);
color: rgba(255, 255, 255, 0.8);
}
.ui.inverted.selection.list .item:active {
background-color: rgba(255, 255, 255, 0.1);
color: rgba(255, 255, 255, 0.7);
}
.ui.inverted.selection.list .item.active {
background-color: rgba(255, 255, 255, 0.08);
color: #FFFFFF;
}
/*-------------------
@ -365,7 +407,7 @@ ol.ui.horizontal.list li:before,
--------------------*/
.ui.divided.list > .item,
.ui.divided.list > .list {
.ui.divided.list:not(.horizontal) > .list {
border-top: 1px solid rgba(0, 0, 0, 0.1);
padding-left: 0.5em;
padding-right: 0.5em;
@ -378,15 +420,15 @@ ol.ui.horizontal.list li:before,
}
/* Sub Menu */
.ui.divided.list .list {
.ui.divided.list:not(.horizontal) .list {
margin-left: -0.5em;
margin-right: -0.5em;
}
.ui.divided.list .list .item {
.ui.divided.list:not(.horizontal) .list .item {
padding-left: 1em;
padding-right: 1em;
}
.ui.divided.list .list .item:first-child {
.ui.divided.list:not(.horizontal) .list .item:first-child {
border-top-width: 1px;
}
@ -422,7 +464,7 @@ ol.ui.horizontal.list li:before,
.ui.divided.horizontal.list {
margin-left: 0em;
}
.ui.divided.horizontal.list .item {
.ui.divided.horizontal.list > .item {
border-top: none;
border-left: 1px solid rgba(0, 0, 0, 0.1);
margin: 0em;
@ -431,11 +473,19 @@ ol.ui.horizontal.list li:before,
line-height: 0.6;
}
.ui.horizontal.divided.list .item:first-child {
.ui.horizontal.divided.list > .item:first-child {
border-left: none;
padding-left: 0em;
}
/* Inverted */
.ui.divided.inverted.list > .item,
.ui.divided.inverted.list > .list {
border-color: rgba(255, 255, 255, 0.2);
}
.ui.divided.inverted.horizontal.list .item {
border-color: rgba(255, 255, 255, 0.2);
}
@ -510,6 +560,17 @@ ol.ui.horizontal.list li:before,
border-right: 1px solid rgba(0, 0, 0, 0.1);
}
/* Inverted */
.ui.celled.inverted.list > .item,
.ui.celled.inverted.list > .list {
border-color: rgba(255, 255, 255, 0.2);
}
.ui.celled.inverted.horizontal.list .item {
border-color: rgba(255, 255, 255, 0.2);
}
/*-------------------
Relaxed
--------------------*/
@ -518,6 +579,9 @@ ol.ui.horizontal.list li:before,
padding-top: 0.5em;
padding-bottom: 0.5em;
}
.ui.relaxed.list .header {
margin-bottom: 0.25em;
}
.ui.horizontal.relaxed.list .item {
padding-left: 1.25em;
padding-right: 1.25em;
@ -527,6 +591,9 @@ ol.ui.horizontal.list li:before,
padding-top: 1em;
padding-bottom: 1em;
}
.ui.very.relaxed.list .header {
margin-bottom: 0.5em;
}
.ui.horizontal.very.relaxed.list .item {
padding-left: 2em;
padding-right: 2em;

Loading…
Cancel
Save