updates shape with new high res images

11 years ago · 0f353fc65a
22 changed files with 286 additions and 74 deletions
--- a/NOTES.md
+++ b/NOTES.md
@ -4,8 +4,12 @@ RELEASE NOTES

 Version 0.11 - Sep 26, 2013

+Updates
 -Added relaxed and very relaxed list type with increased padding

+Fixes
+-Connected items no longer assume 3 items per row
+-Fixes display of left corner icon labels

 Updates
 -Updated list docs
--- a/build/less/elements/label.less
+++ b/build/less/elements/label.less
@ -435,6 +435,9 @@ a.ui.label:hover:before {

  border-top-color: inherit;
 }
+.ui.left.corner.label .icon {
+  margin: 0.4em 0em 0em -0.7em;
+}
 .ui.left.corner.label .text {
  margin: 0.5em 0em 0em -0.6em;
  -webkit-transform: rotate(-45deg);
--- a/build/less/views/item.less
+++ b/build/less/views/item.less
@ -109,15 +109,23 @@
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
+
+  -webkit-box-shadow: 0px 0px 0px 1px rbga(0, 0, 0, 0.1);
+  -moz-box-shadow: 0px 0px 0px 1px rbga(0, 0, 0, 0.1);
+  box-shadow: 0px 0px 0px 1px rbga(0, 0, 0, 0.1);
+
+  -webkit-border-radius: 0.2em;
+  -moz-border-radius: 0.2em;
+  border-radius: 0.2em;
 }
 .ui.items .item > .image > img {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
-  -webkit-border-radius: 0.22em;
-  -moz-border-radius: 0.22em;
-  border-radius: 0.22em;
+  -webkit-border-radius: 0.2em;
+  -moz-border-radius: 0.2em;
+  border-radius: 0.2em;
 }


@ -421,6 +429,7 @@
  .ui.stackable.items .item {
    margin: 0em 2em 1em !important;
    display: block !important;
+    height: auto !important;
    width: auto !important;
    padding: 0% !important;
  }
--- a/build/less/views/list.less
+++ b/build/less/views/list.less
@ -494,8 +494,8 @@ ol.ui.horizontal.list li:before,
 }

 .ui.very.relaxed.list:not(.horizontal) .item {
-  padding-top: 0.75em;
-  padding-bottom: 0.75em;
+  padding-top: 1em;
+  padding-bottom: 1em;
 }
 .ui.horizontal.very.relaxed.list .item {
  padding-left: 2em;
@ -508,14 +508,17 @@ ol.ui.horizontal.list li:before,
 --------------------*/

 .ui.mini.list .item {
-  font-size: 0.8125rem;
+  font-size: 0.7rem;
 }
 .ui.tiny.list .item {
-  font-size: 0.875rem;
+  font-size: 0.8125rem;
 }
 .ui.small.list .item {
  font-size: 0.875rem;
 }
+.ui.list .item {
+  font-size: 1em;
+}
 .ui.large.list .item {
  font-size: 1.125rem;
 }
--- a/build/uncompressed/elements/label.css
+++ b/build/uncompressed/elements/label.css
@ -345,6 +345,9 @@ a.ui.label:hover:before {
  border-left: 0em solid transparent;
  border-top-color: inherit;
 }
+.ui.left.corner.label .icon {
+  margin: 0.4em 0em 0em -0.7em;
+}
 .ui.left.corner.label .text {
  margin: 0.5em 0em 0em -0.6em;
  -webkit-transform: rotate(-45deg);
--- a/build/uncompressed/views/item.css
+++ b/build/uncompressed/views/item.css
@ -89,15 +89,21 @@
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
+  -webkit-box-shadow: 0px 0px 0px 1px rbga(0, 0, 0, 0.1);
+  -moz-box-shadow: 0px 0px 0px 1px rbga(0, 0, 0, 0.1);
+  box-shadow: 0px 0px 0px 1px rbga(0, 0, 0, 0.1);
+  -webkit-border-radius: 0.2em;
+  -moz-border-radius: 0.2em;
+  border-radius: 0.2em;
 }
 .ui.items .item > .image > img {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
-  -webkit-border-radius: 0.22em;
-  -moz-border-radius: 0.22em;
-  border-radius: 0.22em;
+  -webkit-border-radius: 0.2em;
+  -moz-border-radius: 0.2em;
+  border-radius: 0.2em;
 }
 /*--------------
     Content
@ -366,6 +372,7 @@
  .ui.stackable.items .item {
    margin: 0em 2em 1em !important;
    display: block !important;
+    height: auto !important;
    width: auto !important;
    padding: 0% !important;
  }
--- a/build/uncompressed/views/list.css
+++ b/build/uncompressed/views/list.css
@ -404,8 +404,8 @@ ol.ui.horizontal.list li:before,
  padding-right: 1.25em;
 }
 .ui.very.relaxed.list:not(.horizontal) .item {
-  padding-top: 0.75em;
-  padding-bottom: 0.75em;
+  padding-top: 1em;
+  padding-bottom: 1em;
 }
 .ui.horizontal.very.relaxed.list .item {
  padding-left: 2em;
@ -415,14 +415,17 @@ ol.ui.horizontal.list li:before,
      Sizes
 --------------------*/
 .ui.mini.list .item {
-  font-size: 0.8125rem;
+  font-size: 0.7rem;
 }
 .ui.tiny.list .item {
-  font-size: 0.875rem;
+  font-size: 0.8125rem;
 }
 .ui.small.list .item {
  font-size: 0.875rem;
 }
+.ui.list .item {
+  font-size: 1em;
+}
 .ui.large.list .item {
  font-size: 1.125rem;
 }
--- a/node/src/documents/collections/table.html.eco
+++ b/node/src/documents/collections/table.html.eco
@ -63,7 +63,7 @@ type        : 'UI Collection'

  <div class="example">
    <h4 class="ui header">Positive / Negative</h4>
-    <p>A cell or row may let a user know whether a value is good or bad:</p>
+    <p>A cell or row may let a user know whether a value is good or bad</p>
    <table class="ui table segment">
      <thead>
        <th>Name</th>
@ -98,7 +98,7 @@ type        : 'UI Collection'
  <h3 class="ui header">Cells</h3>
  <div class="example">
    <h4 class="ui header">Error</h4>
-    <p>A cell or row may attention the user to an error or a negative value:</p>
+    <p>A cell or row may attention the user to an error or a negative value</p>
    <table class="ui table segment">
      <thead>
        <th>Name</th>
@ -132,7 +132,7 @@ type        : 'UI Collection'

  <div class="example">
    <h4 class="ui header">Warning</h4>
-    <p>A cell or row may warn a user:</p>
+    <p>A cell or row may warn a user</p>
    <table class="ui table segment">
      <thead>
        <th>Name</th>
@ -166,7 +166,7 @@ type        : 'UI Collection'

  <div class="example">
    <h4 class="ui header">Active</h4>
-    <p>A cell or row can be active:</p>
+    <p>A cell or row can be active or selected by a user</p>
    <table class="ui table segment">
      <thead>
        <th>Name</th>
@ -199,7 +199,7 @@ type        : 'UI Collection'
  </div>
  <div class="example">
    <h4 class="ui header">Disabled</h4>
-    <p>A cell can be disabled:</p>
+    <p>A cell can be disabled</p>
    <table class="ui table segment">
      <thead>
        <th>Name</th>
--- a/node/src/documents/modules/shape.html.eco
+++ b/node/src/documents/modules/shape.html.eco
@ -89,7 +89,7 @@ type        : 'UI Module'
              <a class="ui like corner label">
                <i class="like icon"></i>
              </a>
-              <img src="/images/demo/item1.jpg">
+              <img src="/images/demo/highres2.jpg">
            </div>
            <div class="content">
              <div class="name">Cute Dog</div>
@ -105,7 +105,7 @@ type        : 'UI Module'
              <a class="ui like corner label">
                <i class="like icon"></i>
              </a>
-              <img src="/images/demo/item3.jpg">
+              <img src="/images/demo/highres5.jpg">
            </div>
            <div class="content">
              <div class="name">Silly Dog</div>
@ -121,7 +121,7 @@ type        : 'UI Module'
              <a class="ui like corner label">
                <i class="like icon"></i>
              </a>
-              <img src="/images/demo/item2.jpg">
+              <img src="/images/demo/highres4.jpg">
            </div>
            <div class="content">
              <div class="meta">5 days ago</div>
@ -143,7 +143,7 @@ type        : 'UI Module'
              <a class="ui like corner label">
                <i class="like icon"></i>
              </a>
-              <img src="/images/demo/item4.jpg">
+              <img src="/images/demo/highres.jpg">
            </div>
            <div class="content">
              <div class="name">Cute Dog</div>
@ -159,7 +159,7 @@ type        : 'UI Module'
              <a class="ui like corner label">
                <i class="like icon"></i>
              </a>
-              <img src="/images/demo/item2.jpg">
+              <img src="/images/demo/highres4.jpg">
            </div>
            <div class="content">
              <div class="name">Silly Dog</div>
@ -175,7 +175,7 @@ type        : 'UI Module'
              <a class="ui like corner label">
                <i class="like icon"></i>
              </a>
-              <img src="/images/demo/item5.jpg">
+              <img src="/images/demo/highres6.jpg">
            </div>
            <div class="content">
              <div class="meta">5 days ago</div>
--- a/node/src/documents/views/items.html.eco
+++ b/node/src/documents/views/items.html.eco
@ -77,10 +77,39 @@ type        : 'UI View'
    </div>
  </div>

+  <div class="text example">
+    <div class="ui items">
+      <div class="item">
+        <div class="name">Cute Dog</div>
+        <p class="description">This dog has some things going for it. Its pretty cute and looks like it'd be fun to cuddle up with.</p>
+        <div class="extra">
+            199 votes
+        </div>
+      </div>
+      <div class="item">
+        <div class="meta">5 days ago</div>
+        <div class="name">Faithful Dog</div>
+        <p class="description">Sometimes its more important to have a dog you know you can trust. But not every dog is trustworthy, you can tell by looking at its smile.</p>
+        <div class="extra">
+            311 votes
+        </div>
+      </div>
+      <div class="item">
+        <div class="name">Silly Dog</div>
+        <p class="description">Silly dogs can be quite fun to have as companions. You never know what kind of ridiculous thing they will do.</p>
+        <div class="extra">
+            522 votes
+        </div>
+      </div>
+    </div>
+  </div>
+
+
  <h2 class="ui dividing header">Variations</h2>

  <div class="example">
    <h4 class="ui header">Stackable</h4>
+    <div class="ui ignored info message">Resize your browser to a smaller size to see the items stack after reaching mobile breakpoints</div>
    <p>An item view can have its items take the full width when below a browser resolution threshold to allow for content to display properly at small sizes</p>
    <div class="ui stackable items">
      <div class="item">
@ -88,7 +117,7 @@ type        : 'UI View'
          <a class="like ui corner label">
            <i class="like icon"></i>
          </a>
-          <img src="/images/demo/highres.jpg">
+          <img src="/images/demo/highres5.jpg">
        </div>
        <div class="content">
          <div class="name">Cute Dog</div>
@ -103,7 +132,7 @@ type        : 'UI View'
          <a class="like ui corner label">
            <i class="like icon"></i>
          </a>
-          <img src="/images/demo/highres2.jpg">
+          <img src="/images/demo/highres6.jpg">
        </div>
        <div class="content">
          <div class="meta">5 days ago</div>
@ -154,39 +183,41 @@ type        : 'UI View'
          </div>
        </div>
      </div>
+    </div>
+  </div>
+  <div class="another text example">
+    <div class="ui connected items">
      <div class="row">
        <div class="item">
-          <div class="image">
-            <img src="/images/demo/highres2.jpg">
-          </div>
-          <div class="content">
-            <div class="name">Cute Dog</div>
-            <p class="description">This dog has some things going for it. Its pretty cute and looks like it'd be fun to cuddle up with.</p>
-          </div>
+          <div class="name">Cute Dog</div>
+          <p class="description">This dog has some things going for it. Its pretty cute and looks like it'd be fun to cuddle up with.</p>
        </div>
        <div class="item">
-          <div class="image">
-            <img src="/images/demo/highres.jpg">
-          </div>
-          <div class="content">
-            <div class="name">Faithful Dog</div>
-            <p class="description">Sometimes its more important to have a dog you know you can trust. But not every dog is trustworthy, you can tell by looking at its smile.</p>
-          </div>
+          <div class="name">Faithful Dog</div>
+          <p class="description">Sometimes its more important to have a dog you know you can trust. But not every dog is trustworthy, you can tell by looking at its smile.</p>
        </div>
        <div class="item">
-          <div class="image">
-            <img src="/images/demo/highres4.jpg">
-          </div>
-          <div class="content">
-            <div class="name">Silly Dog</div>
-            <p class="description">Silly dogs can be quite fun to have as companions. You never know what kind of ridiculous thing they will do.</p>
-          </div>
+          <div class="name">Silly Dog</div>
+          <p class="description">Silly dogs can be quite fun to have as companions. You never know what kind of ridiculous thing they will do.</p>
+        </div>
+        <div class="item">
+          <div class="name">Cute Dog</div>
+          <p class="description">This dog has some things going for it. Its pretty cute and looks like it'd be fun to cuddle up with.</p>
+        </div>
+        <div class="item">
+          <div class="name">Faithful Dog</div>
+          <p class="description">Sometimes its more important to have a dog you know you can trust. But not every dog is trustworthy, you can tell by looking at its smile.</p>
+        </div>
+        <div class="item">
+          <div class="name">Silly Dog</div>
+          <p class="description">Silly dogs can be quite fun to have as companions. You never know what kind of ridiculous thing they will do.</p>
        </div>
      </div>
    </div>
  </div>


+
  <div class="example">
    <h4 class="ui header">Column count</h4>
    <p>An item list can list how many columns should exist in a row</p>
--- a/node/src/documents/views/list.html.eco
+++ b/node/src/documents/views/list.html.eco
@ -14,7 +14,6 @@ type        : 'UI View'
    <div class="ui vertical pointing secondary menu">
      <a class="active item">Types</a>
      <a class="item">Content</a>
-      <a class="item">States</a>
      <a class="item">Variations</a>
    </div>
  </div>
@ -273,10 +272,6 @@ type        : 'UI View'
    </div>
  </div>

-
-  <h2 class="ui dividing header">States</h2>
-
-
  <h2 class="ui dividing header">Variations</h2>


@ -361,6 +356,109 @@ type        : 'UI View'
    </div>
  </div>

+  <div class="example">
+    <h4 class="ui header">Relaxed</h4>
+    <p>A list can relax its padding to provide more negative space</p>
+    <div class="ui relaxed divided list">
+      <div class="item">
+        <i class="map marker icon"></i>
+        <div class="content">
+          <a class="header">New York City</a>
+          <div class="description">A lovely city</div>
+        </div>
+      </div>
+      <div class="item">
+        <i class="map marker icon"></i>
+        <div class="content">
+          <a class="header">Chicago</a>
+          <div class="description">A lovely city</div>
+        </div>
+      </div>
+      <div class="item">
+        <i class="map marker icon"></i>
+        <div class="content">
+          <a class="header">Los Angeles</a>
+          <div class="description">A lovely city</div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="another example">
+    <div class="ui very relaxed divided list">
+      <div class="item">
+        <i class="map marker icon"></i>
+        <div class="content">
+          <a class="header">New York City</a>
+          <div class="description">A lovely city</div>
+        </div>
+      </div>
+      <div class="item">
+        <i class="map marker icon"></i>
+        <div class="content">
+          <a class="header">Chicago</a>
+          <div class="description">A lovely city</div>
+        </div>
+      </div>
+      <div class="item">
+        <i class="map marker icon"></i>
+        <div class="content">
+          <a class="header">Los Angeles</a>
+          <div class="description">A lovely city</div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="another example">
+    <div class="ui relaxed horizontal divided list">
+      <div class="item">
+        <i class="map marker icon"></i>
+        <div class="content">
+          <a class="header">New York City</a>
+          <div class="description">A lovely city</div>
+        </div>
+      </div>
+      <div class="item">
+        <i class="map marker icon"></i>
+        <div class="content">
+          <a class="header">Chicago</a>
+          <div class="description">A lovely city</div>
+        </div>
+      </div>
+      <div class="item">
+        <i class="map marker icon"></i>
+        <div class="content">
+          <a class="header">Los Angeles</a>
+          <div class="description">A lovely city</div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="another example">
+    <div class="ui very relaxed horizontal divided list">
+      <div class="item">
+        <i class="map marker icon"></i>
+        <div class="content">
+          <a class="header">New York City</a>
+          <div class="description">A lovely city</div>
+        </div>
+      </div>
+      <div class="item">
+        <i class="map marker icon"></i>
+        <div class="content">
+          <a class="header">Chicago</a>
+          <div class="description">A lovely city</div>
+        </div>
+      </div>
+      <div class="item">
+        <i class="map marker icon"></i>
+        <div class="content">
+          <a class="header">Los Angeles</a>
+          <div class="description">A lovely city</div>
+        </div>
+      </div>
+    </div>
+  </div>
+
  <div class="example">
    <h4 class="ui header">Divided</h4>
    <p>A list can show divisions between content</p>
--- a/node/src/files/build/less/elements/label.less
+++ b/node/src/files/build/less/elements/label.less
@ -435,6 +435,9 @@ a.ui.label:hover:before {

  border-top-color: inherit;
 }
+.ui.left.corner.label .icon {
+  margin: 0.4em 0em 0em -0.7em;
+}
 .ui.left.corner.label .text {
  margin: 0.5em 0em 0em -0.6em;
  -webkit-transform: rotate(-45deg);
--- a/node/src/files/build/less/views/item.less
+++ b/node/src/files/build/less/views/item.less
@ -109,15 +109,23 @@
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
+
+  -webkit-box-shadow: 0px 0px 0px 1px rbga(0, 0, 0, 0.1);
+  -moz-box-shadow: 0px 0px 0px 1px rbga(0, 0, 0, 0.1);
+  box-shadow: 0px 0px 0px 1px rbga(0, 0, 0, 0.1);
+
+  -webkit-border-radius: 0.2em;
+  -moz-border-radius: 0.2em;
+  border-radius: 0.2em;
 }
 .ui.items .item > .image > img {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
-  -webkit-border-radius: 0.22em;
-  -moz-border-radius: 0.22em;
-  border-radius: 0.22em;
+  -webkit-border-radius: 0.2em;
+  -moz-border-radius: 0.2em;
+  border-radius: 0.2em;
 }


@ -421,6 +429,7 @@
  .ui.stackable.items .item {
    margin: 0em 2em 1em !important;
    display: block !important;
+    height: auto !important;
    width: auto !important;
    padding: 0% !important;
  }
--- a/node/src/files/build/less/views/list.less
+++ b/node/src/files/build/less/views/list.less
@ -494,8 +494,8 @@ ol.ui.horizontal.list li:before,
 }

 .ui.very.relaxed.list:not(.horizontal) .item {
-  padding-top: 0.75em;
-  padding-bottom: 0.75em;
+  padding-top: 1em;
+  padding-bottom: 1em;
 }
 .ui.horizontal.very.relaxed.list .item {
  padding-left: 2em;
@ -508,14 +508,17 @@ ol.ui.horizontal.list li:before,
 --------------------*/

 .ui.mini.list .item {
-  font-size: 0.8125rem;
+  font-size: 0.7rem;
 }
 .ui.tiny.list .item {
-  font-size: 0.875rem;
+  font-size: 0.8125rem;
 }
 .ui.small.list .item {
  font-size: 0.875rem;
 }
+.ui.list .item {
+  font-size: 1em;
+}
 .ui.large.list .item {
  font-size: 1.125rem;
 }
--- a/node/src/files/build/uncompressed/elements/label.css
+++ b/node/src/files/build/uncompressed/elements/label.css
@ -345,6 +345,9 @@ a.ui.label:hover:before {
  border-left: 0em solid transparent;
  border-top-color: inherit;
 }
+.ui.left.corner.label .icon {
+  margin: 0.4em 0em 0em -0.7em;
+}
 .ui.left.corner.label .text {
  margin: 0.5em 0em 0em -0.6em;
  -webkit-transform: rotate(-45deg);
--- a/node/src/files/build/uncompressed/views/item.css
+++ b/node/src/files/build/uncompressed/views/item.css
@ -89,15 +89,21 @@
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
+  -webkit-box-shadow: 0px 0px 0px 1px rbga(0, 0, 0, 0.1);
+  -moz-box-shadow: 0px 0px 0px 1px rbga(0, 0, 0, 0.1);
+  box-shadow: 0px 0px 0px 1px rbga(0, 0, 0, 0.1);
+  -webkit-border-radius: 0.2em;
+  -moz-border-radius: 0.2em;
+  border-radius: 0.2em;
 }
 .ui.items .item > .image > img {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
-  -webkit-border-radius: 0.22em;
-  -moz-border-radius: 0.22em;
-  border-radius: 0.22em;
+  -webkit-border-radius: 0.2em;
+  -moz-border-radius: 0.2em;
+  border-radius: 0.2em;
 }
 /*--------------
     Content
@ -366,6 +372,7 @@
  .ui.stackable.items .item {
    margin: 0em 2em 1em !important;
    display: block !important;
+    height: auto !important;
    width: auto !important;
    padding: 0% !important;
  }
--- a/node/src/files/build/uncompressed/views/list.css
+++ b/node/src/files/build/uncompressed/views/list.css
@ -404,8 +404,8 @@ ol.ui.horizontal.list li:before,
  padding-right: 1.25em;
 }
 .ui.very.relaxed.list:not(.horizontal) .item {
-  padding-top: 0.75em;
-  padding-bottom: 0.75em;
+  padding-top: 1em;
+  padding-bottom: 1em;
 }
 .ui.horizontal.very.relaxed.list .item {
  padding-left: 2em;
@ -415,14 +415,17 @@ ol.ui.horizontal.list li:before,
      Sizes
 --------------------*/
 .ui.mini.list .item {
-  font-size: 0.8125rem;
+  font-size: 0.7rem;
 }
 .ui.tiny.list .item {
-  font-size: 0.875rem;
+  font-size: 0.8125rem;
 }
 .ui.small.list .item {
  font-size: 0.875rem;
 }
+.ui.list .item {
+  font-size: 1em;
+}
 .ui.large.list .item {
  font-size: 1.125rem;
 }
--- a/node/src/files/images/demo/highres6.jpg
+++ b/node/src/files/images/demo/highres6.jpg
--- a/node/src/files/stylesheets/semantic.css
+++ b/node/src/files/stylesheets/semantic.css
@ -215,6 +215,14 @@ a:hover {
  box-shadow: none;
 }

+/*--------------
+    Items
+---------------*/
+
+#example.item .text.example .item {
+  min-height: 150px;
+}
+

 /*--------------
    Masthead
--- a/src/elements/label.less
+++ b/src/elements/label.less
@ -435,6 +435,9 @@ a.ui.label:hover:before {

  border-top-color: inherit;
 }
+.ui.left.corner.label .icon {
+  margin: 0.4em 0em 0em -0.7em;
+}
 .ui.left.corner.label .text {
  margin: 0.5em 0em 0em -0.6em;
  -webkit-transform: rotate(-45deg);
--- a/src/views/item.less
+++ b/src/views/item.less
@ -109,15 +109,23 @@
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
+
+  -webkit-box-shadow: 0px 0px 0px 1px rbga(0, 0, 0, 0.1);
+  -moz-box-shadow: 0px 0px 0px 1px rbga(0, 0, 0, 0.1);
+  box-shadow: 0px 0px 0px 1px rbga(0, 0, 0, 0.1);
+
+  -webkit-border-radius: 0.2em;
+  -moz-border-radius: 0.2em;
+  border-radius: 0.2em;
 }
 .ui.items .item > .image > img {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
-  -webkit-border-radius: 0.22em;
-  -moz-border-radius: 0.22em;
-  border-radius: 0.22em;
+  -webkit-border-radius: 0.2em;
+  -moz-border-radius: 0.2em;
+  border-radius: 0.2em;
 }


@ -421,6 +429,7 @@
  .ui.stackable.items .item {
    margin: 0em 2em 1em !important;
    display: block !important;
+    height: auto !important;
    width: auto !important;
    padding: 0% !important;
  }
--- a/src/views/list.less
+++ b/src/views/list.less
@ -494,8 +494,8 @@ ol.ui.horizontal.list li:before,
 }

 .ui.very.relaxed.list:not(.horizontal) .item {
-  padding-top: 0.75em;
-  padding-bottom: 0.75em;
+  padding-top: 1em;
+  padding-bottom: 1em;
 }
 .ui.horizontal.very.relaxed.list .item {
  padding-left: 2em;
@ -508,14 +508,17 @@ ol.ui.horizontal.list li:before,
 --------------------*/

 .ui.mini.list .item {
-  font-size: 0.8125rem;
+  font-size: 0.7rem;
 }
 .ui.tiny.list .item {
-  font-size: 0.875rem;
+  font-size: 0.8125rem;
 }
 .ui.small.list .item {
  font-size: 0.875rem;
 }
+.ui.list .item {
+  font-size: 1em;
+}
 .ui.large.list .item {
  font-size: 1.125rem;
 }