fixes redundant rules and vertical spacing

12 years ago · edb120eb67
6 changed files with 51 additions and 83 deletions
--- a/build/minified/views/items.min.css
+++ b/build/minified/views/items.min.css
--- a/build/packaged/semantic.min.css
+++ b/build/packaged/semantic.min.css
--- a/build/uncompressed/views/items.css
+++ b/build/uncompressed/views/items.css
@ -34,22 +34,29 @@
      Item
 ---------------*/
 .ui.items .item {
-  float: left;
  display: block;
+  float: left;
+  position: relative;
+  width: 316px;
+  min-height: 375px;
  margin: 1em 0.5em 2.5em;
  padding: 0em;
-  width: 100%;
-  margin: 0%;
-  font-size: 1em;
+  background-color: #FFFFFF;
  line-height: 1.2;
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  -ms-box-sizing: border-box;
-  box-sizing: border-box;
+  font-size: 1em;
+  -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
+  -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
+  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
+  border-bottom: 0.2em solid rgba(0, 0, 0, 0.2);
+  -moz-border-radius: 0.33em;
+  -webkit-border-radius: 0.33em;
+  border-radius: 0.33em;
+  padding: 0.5em;
 }
 .ui.items .item a {
  cursor: pointer;
 }
+.ui.items .item,
 .ui.items .item > .image,
 .ui.items .item > .image .overlay,
 .ui.items .item > .content,
@ -60,22 +67,6 @@
  -ms-box-sizing: border-box;
  box-sizing: border-box;
 }
-.ui.items .item {
-  display: block;
-  position: relative;
-  width: 316px;
-  min-height: 375px;
-  margin: 1em 0.5em;
-  background-color: #FFFFFF;
-  -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
-  -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
-  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
-  border-bottom: 0.2em solid rgba(0, 0, 0, 0.2);
-  -moz-border-radius: 0.33em;
-  -webkit-border-radius: 0.33em;
-  border-radius: 0.33em;
-  padding: 0.5em;
-}
 /*--------------
      Images
 ---------------*/
--- a/node/src/documents/views/items.html
+++ b/node/src/documents/views/items.html
@ -28,7 +28,7 @@ type   : 'UI View'
    <p>A basic item list. </p>
    <div class="ignored error ui message">
      <i class="info icon"></i>
-      Items are given an arbitrary width and height which matches up to the proportions of the content it typically displays. This means metadata must be truncated to ensure content fits well.
+      Items are given an arbitrary width and height which matches up to the proportions of the content it typically displays. This means item content must not be too large for the content area.
    </div>
    <div class="ui items">
      <div class="item">
--- a/node/src/files/components/semantic/views/items.css
+++ b/node/src/files/components/semantic/views/items.css
@ -34,22 +34,29 @@
      Item
 ---------------*/
 .ui.items .item {
-  float: left;
  display: block;
+  float: left;
+  position: relative;
+  width: 316px;
+  min-height: 375px;
  margin: 1em 0.5em 2.5em;
  padding: 0em;
-  width: 100%;
-  margin: 0%;
-  font-size: 1em;
+  background-color: #FFFFFF;
  line-height: 1.2;
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  -ms-box-sizing: border-box;
-  box-sizing: border-box;
+  font-size: 1em;
+  -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
+  -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
+  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
+  border-bottom: 0.2em solid rgba(0, 0, 0, 0.2);
+  -moz-border-radius: 0.33em;
+  -webkit-border-radius: 0.33em;
+  border-radius: 0.33em;
+  padding: 0.5em;
 }
 .ui.items .item a {
  cursor: pointer;
 }
+.ui.items .item,
 .ui.items .item > .image,
 .ui.items .item > .image .overlay,
 .ui.items .item > .content,
@ -60,22 +67,6 @@
  -ms-box-sizing: border-box;
  box-sizing: border-box;
 }
-.ui.items .item {
-  display: block;
-  position: relative;
-  width: 316px;
-  min-height: 375px;
-  margin: 1em 0.5em;
-  background-color: #FFFFFF;
-  -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
-  -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
-  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
-  border-bottom: 0.2em solid rgba(0, 0, 0, 0.2);
-  -moz-border-radius: 0.33em;
-  -webkit-border-radius: 0.33em;
-  border-radius: 0.33em;
-  padding: 0.5em;
-}
 /*--------------
      Images
 ---------------*/
--- a/src/views/items.less
+++ b/src/views/items.less
@ -43,27 +43,36 @@
 ---------------*/

 .ui.items .item {
-  float: left;
  display: block;
+  float: left;
+  position: relative;

+  width: 316px;
+  min-height: 375px;
  margin: 1em 0.5em 2.5em;
  padding: 0em;

-  width: 100%;
-  margin: 0%;
-  font-size: 1em;
+  background-color: #FFFFFF;
  line-height: 1.2;
+  font-size: 1em;

-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  -ms-box-sizing: border-box;
-  box-sizing: border-box;
-}
+  -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
+  -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
+  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
+
+  border-bottom: 0.2em solid rgba(0, 0, 0, 0.2);
+
+  -moz-border-radius: 0.33em;
+  -webkit-border-radius: 0.33em;
+  border-radius: 0.33em;

+  padding: 0.5em;
+}
 .ui.items .item a {
  cursor: pointer;
 }

+.ui.items .item,
 .ui.items .item > .image,
 .ui.items .item > .image .overlay,
 .ui.items .item > .content,
@ -75,29 +84,6 @@
  box-sizing: border-box;
 }

-.ui.items .item {
-  display: block;
-  position: relative;
-
-  width: 316px;
-  min-height: 375px;
-  margin: 1em 0.5em;
-
-  background-color: #FFFFFF;
-
-  -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
-  -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
-  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
-
-  border-bottom: 0.2em solid rgba(0, 0, 0, 0.2);
-
-  -moz-border-radius: 0.33em;
-  -webkit-border-radius: 0.33em;
-  border-radius: 0.33em;
-
-  padding: 0.5em;
-}
-
 /*--------------
      Images
 ---------------*/