Browse Source

adds equal height grid row, and fixes to menu

Former-commit-id: cf90defce8cfb32d354978faac376b6728372ba1
Former-commit-id: 1bb04e84d9313113663061cc18190bbba4ec21ca
beta
Jack Lukic 11 years ago
parent
commit
ce54c630f8
  1. 2
      build/minified/collections/grid.min.css
  2. 2
      build/minified/collections/menu.min.css
  3. 2
      build/packaged/semantic.min.css.REMOVED.git-id
  4. 2
      build/packaged/semantic.min.js.REMOVED.git-id
  5. 4
      build/uncompressed/collections/grid.css
  6. 13
      build/uncompressed/collections/menu.css
  7. 20
      node/src/documents/collections/grid.html
  8. 85
      node/src/documents/index.html
  9. 4
      node/src/files/components/semantic/collections/grid.css
  10. 2
      node/src/files/components/semantic/collections/menu.css
  11. 2
      node/src/files/stylesheets/semantic.css
  12. 4
      src/collections/grid.less
  13. 14
      src/collections/menu.less

2
build/minified/collections/grid.min.css

File diff suppressed because one or more lines are too long

2
build/minified/collections/menu.min.css

File diff suppressed because one or more lines are too long

2
build/packaged/semantic.min.css.REMOVED.git-id

@ -1 +1 @@
d56f82dadfd56097a4bed8bee791168ed61bc288
8c596e6e4141b4d7bf798a158e1bed529b4acfa0

2
build/packaged/semantic.min.js.REMOVED.git-id

@ -1 +1 @@
ca255496087e51aa7c123c5ebdcc6793296893cb
4c459f0ed9e411259862a2f2d362b31525c72e20

4
build/uncompressed/collections/grid.css

@ -439,11 +439,11 @@
/*----------------------
Equal Height Columns
-----------------------*/
.ui.grid > .equal.row {
.ui.grid > .equal.height.row {
display: table;
width: 100%;
}
.ui.grid > .equal.row > .column {
.ui.grid > .equal.height.row > .column {
display: table-cell;
}
/*-------------------

13
build/uncompressed/collections/menu.css

@ -127,9 +127,11 @@
.ui.menu .menu {
margin: 0em;
}
.ui.menu .item.left,
.ui.menu .menu.left {
float: left;
}
.ui.menu .item.right,
.ui.menu .menu.right {
float: right;
}
@ -178,6 +180,10 @@
/*--------------
Form Content
---------------*/
.ui.menu .input,
.ui.menu .input input {
width: 100%;
}
.ui.menu input {
margin: 0.25em 0em;
padding-top: 0.55em;
@ -461,6 +467,13 @@
-moz-box-shadow: none;
box-shadow: none;
}
/* Tiered pointing */
.ui.pointing.tiered.menu > .menu > .item:after {
display: none;
}
.ui.pointing.tiered.menu > .sub.menu > .item:after {
display: block;
}
/*--------------
Colors
---------------*/

20
node/src/documents/collections/grid.html

@ -496,6 +496,7 @@ type : 'UI Collection'
</div>
<div class="example">
<h4 class="ui header">Text Alignment</h4>
<p>A grid can specify its text alignment</p>
<div class="ui center aligned three column grid">
@ -568,6 +569,25 @@ type : 'UI Collection'
</div>
<h3 class="ui header">Rows</h3>
<div class="example">
<h4 class="ui header">Equal Height</h4>
<p>A row can specify that it is equal height so all of its columns appear the length of its longest column.</p>
<div class="ui three column grid">
<div class="equal height row">
<div class="column" style="background-color:#F0F0FF;">
<p>This is a short row</p>
</div>
<div class="column" style="background-color:#F0F0FF;">
<p>This is a short row</p>
</div>
<div class="column" style="background-color:#F0F0FF;">
<p>This is a very long row with lots of text in it and way more text than the other rows</p>
<p>It might even span for multiplie paragraphs.</p>
</div>
</div>
</div>
</div>
<div class="example">
<h4 class="ui header">Vertical Alignment</h4>
<p>A row can also specify its vertical alignment to have its columns vertically centered.</p>

85
node/src/documents/index.html

@ -20,34 +20,71 @@ type : 'Semantic'
<div class="stripe">
<div class="ui responsive grid">
<div class="ui column">
<p>Semantic UI is a framework designed to simplify front end development by removing the arbitrary bits.</p>
<h3 class="ui header">Comparing UI Frameworks</h3>
<h3 class="ui header">Comparing frameworks</h3>
<div class="ui bottom pointing label">Bootstrap</div>
<div class="code" data-type="html">
<div class="row">
<div class="col-lg-4">1</div>
<div class="col-lg-4">2</div>
<div class="col-lg-4">3</div>
<p>3 column grid</p>
<div class="ui three column grid">
<div class="column">
<div class="ui teal below pointing label">Semantic</div>
<div class="code" data-type="html">
<div class="ui three column grid">
<div class="column">1</div>
<div class="column">2</div>
<div class="column">3</div>
</div>
</div>
</div>
</div>
<div class="ui bottom pointing label">YUI</div>
<div class="code" data-type="html">
<div class="yui-3-g">
<div class="yui3-u-1-3">1</div>
<div class="yui3-u-1-3">2</div>
<div class="yui3-u-1-3">3</div>
<div class="column">
<div class="ui below pointing label">Bootstrap</div>
<div class="code" data-type="html">
<div class="row">
<div class="col-lg-4">1</div>
<div class="col-lg-4">2</div>
<div class="col-lg-4">3</div>
</div>
</div>
</div>
<div class="column">
<div class="ui below pointing label">YUI</div>
<div class="code" data-type="html">
<div class="yui-3-g">
<div class="yui3-u-1-3">1</div>
<div class="yui3-u-1-3">2</div>
<div class="yui3-u-1-3">3</div>
</div>
</div>
</div>
</div>
<div class="ui bottom pointing label">Semantic</div>
<div class="code" data-type="html">
<div class="ui three column grid">
<div class="column">1</div>
<div class="column">2</div>
<div class="column">3</div>
<div class="ui divider"></div>
<p>Navigation Menu</p>
<div class="ui two column grid">
<div class="column">
<div class="ui teal below pointing label">Semantic</div>
<div class="code" data-type="html">
<div class="ui menu">
<div class="header item">Title</div>
<a class="active item">Home</a>
<a class="item">Link</a>
<a class="item">Link</a>
<div class="right floated text item">
Signed in as <a href="#">user</a>
</div>
</div>
</div>
</div>
<div class="column">
<div class="ui below pointing label">Bootstrap</div>
<div class="code" data-type="html">
<div class="navbar">
<a class="navbar-brand" href="#">Title</a>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<p class="navbar-text pull-right">Signed in as <a href="#" class="navbar-link">User</a></p>
</ul>
</div>
</div>
</div>
</div>
</div>

4
node/src/files/components/semantic/collections/grid.css

@ -439,11 +439,11 @@
/*----------------------
Equal Height Columns
-----------------------*/
.ui.grid > .equal.row {
.ui.grid > .equal.height.row {
display: table;
width: 100%;
}
.ui.grid > .equal.row > .column {
.ui.grid > .equal.height.row > .column {
display: table-cell;
}
/*-------------------

2
node/src/files/components/semantic/collections/menu.css

@ -127,9 +127,11 @@
.ui.menu .menu {
margin: 0em;
}
.ui.menu .item.left,
.ui.menu .menu.left {
float: left;
}
.ui.menu .item.right,
.ui.menu .menu.right {
float: right;
}

2
node/src/files/stylesheets/semantic.css

@ -867,6 +867,8 @@ a:hover {
#example .ui.type.items .image .grid .segment {
min-height: 50px;
text-align: center;
padding-left: 0em;
padding-right: 0em;
-webkit-box-shadow: 0px 0px 0px 1px #DDDDDD;
-moz-box-shadow: 0px 0px 0px 1px #DDDDDD;
box-shadow: 0px 0px 0px 1px #DDDDDD;

4
src/collections/grid.less

@ -522,11 +522,11 @@
Equal Height Columns
-----------------------*/
.ui.grid > .equal.row {
.ui.grid > .equal.height.row {
display: table;
width: 100%;
}
.ui.grid > .equal.row > .column {
.ui.grid > .equal.height.row > .column {
display: table-cell;
}

14
src/collections/menu.less

@ -173,9 +173,11 @@
margin: 0em;
}
.ui.menu .item.left,
.ui.menu .menu.left {
float: left;
}
.ui.menu .item.right,
.ui.menu .menu.right {
float: right;
}
@ -253,6 +255,10 @@
Form Content
---------------*/
.ui.menu .input,
.ui.menu .input input {
width: 100%;
}
.ui.menu input {
margin: 0.25em 0em;
padding-top: 0.55em;
@ -608,6 +614,14 @@
box-shadow: none;
}
/* Tiered pointing */
.ui.pointing.tiered.menu > .menu > .item:after {
display: none;
}
.ui.pointing.tiered.menu > .sub.menu > .item:after {
display: block;
}
/*--------------
Colors
---------------*/

Loading…
Cancel
Save