lukechilds
/
Semantic-UI-Docs
mirror of https://github.com/lukechilds/Semantic-UI-Docs.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

grid: iterating on grid docs/ui 

Former-commit-id: 356c04e4ec97f4731038655cedaf09db5ab5d786
Former-commit-id: f51a6b0d2413f596927459f3309418bf030c3163
beta
Jack Lukic 12 years ago
parent
d529b51ded
commit
82734238a7
10 changed files with 684 additions and 139 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 221
      node/src/documents/collections/grid.html
  2. 6
      node/src/documents/index.html
  3. 251
      node/src/files/components/semantic/src/collections/grid.css
  4. 4
      node/src/files/components/semantic/src/collections/menu.css
  5. 28
      node/src/files/components/semantic/src/elements/label.css
  6. 12
      node/src/files/javascript/semantic.js
  7. 18
      node/src/files/stylesheets/semantic.css
  8. 251
      src/collections/grid.css
  9. 4
      src/collections/menu.css
  10. 28
      src/elements/label.css

221
node/src/documents/collections/grid.html
View File

@ -7,47 +7,214 @@ type : 'UI Collection'
---
<div class="segment">
<div class="container">
<h1>Grid</h1>
<p>A grid is a set of elements without a visual definition, that creates a structure to harmonize negative space in a layout.</p>
</div>
</div>
<div class="main container">
<div class="peek">
<div class="ui vertical pointing menu">
<a class="active item">Standard</a>
<a class="item">States</a>
<a class="item">Variations</a>
<a class="item">Groups</a>
<div class="ui grid">
<div class="eight across column">
<h1>Grid</h1>
<p>A grid is a set of elements without a visual definition, that creates a structure to harmonize negative space in a layout.</p>
</div>
</div>
</div>
<div class="main ui grid">
<div class="eight across column">
<h2>Collection</h2>
<p>A grid is made up of a collection of divisions. If divisions are of equal size, the grid can specify this by using the classname "split" along with how many divisions to use.</p>
<p>Otherwise a grid is assumed to have 12 sub divisions by default. Individual divisions can then specify
<div class="ui grid">
<div class="division">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum iaculis sapien sed dui porta id sagittis sapien imperdiet. Quisque suscipit dui vel sapien dapibus a faucibus sapien mattis. Nulla facilisi. Aliquam vitae ante a quam tincidunt blandit. Duis adipiscing, metus at dictum auctor, odio enim ornare urna, quis aliquam arcu nibh vitae felis. Donec gravida aliquam enim in mattis. Phasellus risus purus, luctus quis lobortis eget, dignissim quis ante.</p>
<div class="example">
<h4>Grid</h4>
<p>A grid is made up of columns of content. By default a grid must assume a certain number of columns. The semantic library assumes 12 columns by default.</p>
<div class="ui grid">
<div class="column">
1
</div>
<div class="column">
2
</div>
<div class="column">
3
</div>
<div class="column">
4
</div>
<div class="column">
5
</div>
<div class="column">
6
</div>
<div class="column">
7
</div>
<div class="column">
8
</div>
<div class="column">
9
</div>
<div class="column">
10
</div>
<div class="column">
11
</div>
<div class="column">
12
</div>
</div>
<div class="division">
<p>Aliquam lobortis commodo sem ac accumsan. Vestibulum non faucibus lorem. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur sed lorem lorem. Nam augue erat, dignissim nec aliquam vel, congue et sapien. Integer viverra justo vel nibh suscipit commodo. Nullam ut turpis nibh, in luctus risus. Sed ut risus nec dui mattis porta. Nam nisi magna, ornare mollis congue a, suscipit at nisl.</p>
</div>
<div class="example">
<h4>Rows</h4>
<p>A basic grid has padding on the first and last columns of each row. If no rows are specified, a grid will assume only one row. A row must always have the same number of columns as the grid.</p>
<div class="ui grid">
<div class="row">
<div class="column">
1a
</div>
<div class="column">
2a
</div>
<div class="column">
3a
</div>
<div class="column">
4a
</div>
<div class="column">
5a
</div>
<div class="column">
6a
</div>
<div class="column">
7a
</div>
<div class="column">
8a
</div>
<div class="column">
9a
</div>
<div class="column">
10a
</div>
<div class="column">
11a
</div>
<div class="column">
12a
</div>
</div>
<div class="row">
<div class="column">
1b
</div>
<div class="column">
2b
</div>
<div class="column">
3b
</div>
<div class="column">
4b
</div>
<div class="column">
5b
</div>
<div class="column">
6b
</div>
<div class="column">
7b
</div>
<div class="column">
8b
</div>
<div class="column">
9b
</div>
<div class="column">
10b
</div>
<div class="column">
11b
</div>
<div class="column">
12b
</div>
</div>
</div>
<div class="division">
<p>Donec semper mollis condimentum. Aenean eget rutrum magna. Mauris ornare nibh scelerisque turpis lobortis dignissim. Etiam eleifend justo eget quam semper vulputate. Nulla et risus convallis velit molestie iaculis. Aliquam erat volutpat. Pellentesque aliquet pellentesque nibh ut tincidunt. Nunc faucibus euismod tincidunt. Etiam convallis adipiscing est, id rutrum erat facilisis eu. Mauris in porttitor diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam consectetur orci nec quam semper sit amet bibendum nulla feugiat. Nam vehicula, arcu blandit semper sodales, nisi nisl imperdiet dolor, nec hendrerit dui lorem id felis. Integer diam ante, tempus dictum varius in, bibendum vitae nibh. Sed placerat, libero quis ultricies tempor, nisl ipsum semper orci, vitae viverra mauris lectus nec enim. Quisque eget massa eu ligula blandit molestie.</p>
<div class="example">
<h4>Grid</h4>
<p>A grid will automatically center any columns that do not match a full row width. This is useful for centering content</p>
<div class="ui grid">
<div class="column">
1
</div>
<div class="column">
2
</div>
<div class="column">
3
</div>
<div class="column">
4
</div>
</div>
</div>
</div>
<h2>States</h2>
<h2>Variations</h2>
<p>TBD</p>
<h3>Grid</h3>
<h2>Variations</h2>
<div class="example">
<h4>Evenly Divided Grid</h4>
<p>A grid can be divided into equal parts.</p>
<div class="ui three column grid">
<div class="column">
<p><b>Colume One</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum iaculis sapien sed dui porta id sagittis sapien imperdiet. Quisque suscipit dui vel sapien dapibus a faucibus sapien mattis. Nulla facilisi. Aliquam vitae ante a quam tincidunt blandit. Duis adipiscing, metus at dictum auctor, odio enim ornare urna, quis aliquam arcu nibh vitae felis. Donec gravida aliquam enim in mattis. Phasellus risus purus, luctus quis lobortis eget, dignissim quis ante.</p>
</div>
<div class="column">
<p><b>Colume Two</b> Aliquam lobortis commodo sem ac accumsan. Vestibulum non faucibus lorem. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur sed lorem lorem. Nam augue erat, dignissim nec aliquam vel, congue et sapien. Integer viverra justo vel nibh suscipit commodo. Nullam ut turpis nibh, in luctus risus. Sed ut risus nec dui mattis porta. Nam nisi magna, ornare mollis congue a, suscipit at nisl.</p>
</div>
<div class="column">
<p><b>Colume Three</b> Donec semper mollis condimentum. Aenean eget rutrum magna. Mauris ornare nibh scelerisque turpis lobortis dignissim. Etiam eleifend justo eget quam semper vulputate. Nulla et risus convallis velit molestie iaculis. Aliquam erat volutpat. Pellentesque aliquet pellentesque nibh ut tincidunt. Nunc faucibus euismod tincidunt. Etiam convallis adipiscing est, id rutrum erat facilisis eu. Mauris in porttitor diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam consectetur orci nec quam semper sit amet bibendum nulla feugiat. Nam vehicula, arcu blandit semper sodales, nisi nisl imperdiet dolor, nec hendrerit dui lorem id felis. Integer diam ante, tempus dictum varius in, bibendum vitae nibh. Sed placerat, libero quis ultricies tempor, nisl ipsum semper orci, vitae viverra mauris lectus nec enim. Quisque eget massa eu ligula blandit molestie.</p>
</div>
</div>
</div>
<p>TBD</p>
<div class="example">
<div class="ui two column grid">
<div class="column">
<p><b>Colume One</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum iaculis sapien sed dui porta id sagittis sapien imperdiet. Quisque suscipit dui vel sapien dapibus a faucibus sapien mattis. Nulla facilisi. Aliquam vitae ante a quam tincidunt blandit. Duis adipiscing, metus at dictum auctor, odio enim ornare urna, quis aliquam arcu nibh vitae felis. Donec gravida aliquam enim in mattis. Phasellus risus purus, luctus quis lobortis eget, dignissim quis ante.</p>
</div>
<div class="column">
<p><b>Colume Two</b> Aliquam lobortis commodo sem ac accumsan. Vestibulum non faucibus lorem. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur sed lorem lorem. Nam augue erat, dignissim nec aliquam vel, congue et sapien. Integer viverra justo vel nibh suscipit commodo. Nullam ut turpis nibh, in luctus risus. Sed ut risus nec dui mattis porta. Nam nisi magna, ornare mollis congue a, suscipit at nisl.</p>
</div>
<div class="column">
<p><b>Colume Three</b> Donec semper mollis condimentum. Aenean eget rutrum magna. Mauris ornare nibh scelerisque turpis lobortis dignissim. Etiam eleifend justo eget quam semper vulputate. Nulla et risus convallis velit molestie iaculis. Aliquam erat volutpat. Pellentesque aliquet pellentesque nibh ut tincidunt. Nunc faucibus euismod tincidunt. Etiam convallis adipiscing est, id rutrum erat facilisis eu. Mauris in porttitor diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam consectetur orci nec quam semper sit amet bibendum nulla feugiat. Nam vehicula, arcu blandit semper sodales, nisi nisl imperdiet dolor, nec hendrerit dui lorem id felis. Integer diam ante, tempus dictum varius in, bibendum vitae nibh. Sed placerat, libero quis ultricies tempor, nisl ipsum semper orci, vitae viverra mauris lectus nec enim. Quisque eget massa eu ligula blandit molestie.</p>
</div>
</div>
</div>
<h3>Columns</h3>
<div class="example">
<h4>Spanning Column</h4>
<p>A grid column can span across multiple column rows.</p>
<div class="ui grid">
<div class="three wide column">
<p><b>Colume One</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum iaculis sapien sed dui porta id sagittis sapien imperdiet. Quisque suscipit dui vel sapien dapibus a faucibus sapien mattis. Nulla facilisi. Aliquam vitae ante a quam tincidunt blandit. Duis adipiscing, metus at dictum auctor, odio enim ornare urna, quis aliquam arcu nibh vitae felis. Donec gravida aliquam enim in mattis. Phasellus risus purus, luctus quis lobortis eget, dignissim quis ante.</p>
</div>
<div class="six wide column">
<p><b>Colume Two</b> Aliquam lobortis commodo sem ac accumsan. Vestibulum non faucibus lorem. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur sed lorem lorem. Nam augue erat, dignissim nec aliquam vel, congue et sapien. Integer viverra justo vel nibh suscipit commodo. Nullam ut turpis nibh, in luctus risus. Sed ut risus nec dui mattis porta. Nam nisi magna, ornare mollis congue a, suscipit at nisl.</p>
</div>
<div class="three wide column">
<p><b>Colume Three</b> Donec semper mollis condimentum. Aenean eget rutrum magna. Mauris ornare nibh scelerisque turpis lobortis dignissim. Etiam eleifend justo eget quam semper vulputate. Nulla et risus convallis velit molestie iaculis. Aliquam erat volutpat. Pellentesque aliquet pellentesque nibh ut tincidunt. Nunc faucibus euismod tincidunt. Etiam convallis adipiscing est, id rutrum erat facilisis eu. Mauris in porttitor diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam consectetur orci nec quam semper sit amet bibendum nulla feugiat. Nam vehicula, arcu blandit semper sodales, nisi nisl imperdiet dolor, nec hendrerit dui lorem id felis. Integer diam ante, tempus dictum varius in, bibendum vitae nibh. Sed placerat, libero quis ultricies tempor, nisl ipsum semper orci, vitae viverra mauris lectus nec enim. Quisque eget massa eu ligula blandit molestie.</p>
</div>
</div>
</div>
</div>
</div>
</body>

6
node/src/documents/index.html
View File

@ -23,7 +23,11 @@ type : 'Library'
</div>
<h2>What is Semantic?</h2>
<p>Semantic has two parts. The <a href="#standard">semantic specification</a>, and the <a href="#library">semantic library</a>.</b></p>
<p>Most developers create similar types of interface elements in their codebase, things like navigation menus, buttons, and forms, but each programmer may have different ways of structuring and classifying these elements.</p>
<p>The semantic specification is a set of standards designed to help developers share a common language for defining interface elements. The semantic library is a first draft at a UI library implementing these standards.</p>
<p>With a community developed standard for interface elements, anyone can share a style definition of a UI element, without having to restructure their websites' codebase to match.</p>
<p>Developing a standard for defining UI modules like chat rooms, pop-ups, and modals, along with a consensus on
<a name="standard"></a>
<h2>The UI Specification</h2>

251
node/src/files/components/semantic/src/collections/grid.css
View File

@ -1,14 +1,46 @@
/*
* # Semantic Grid
* http://github.com/quirkyinc/semantic
*
*
* Copyright 2013 Contributors
* Released under the MIT license
* http://opensource.org/licenses/MIT
*
* Released: May 6 2013
*/
/*******************************
Grid
Grid
*******************************/
/* Classic 12 section grid */
.ui.grid {
width: 100%;
display: table;
display: block;
text-align: center;
padding: 0% 5.55555%;
font-size: 0em;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
.ui.grid > .division {
display: table-cell;
/*-------------------
Columns
--------------------*/
.ui.grid > .column,
.ui.grid > .row > .column {
display: inline-block;
text-align: left;
font-size: 1rem;
padding-left: 1em;
padding-right: 1em;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
@ -17,70 +49,217 @@
vertical-align: top;
}
.ui.grid .division:first-child {
padding-left: 0% !important;
.ui.grid > .column:first-child,
.ui.grid > .row > .column:first-child {
padding-left: 0%;
}
.ui.grid > .column:last-child,
.ui.grid > .row > .column:last-child {
padding-right: 0%;
}
.ui.grid .division:last-child {
padding-right: 0% !important;
/*-------------------
Rows
--------------------*/
.ui.grid > .row {
padding-top: 2.55%;
}
.ui.grid > .row:first-child {
padding-top: 0px;
}
/*******************************
Variations
*******************************/
/* Sizing Combinations */
.ui.grid .division,
.ui.grid .one.wide.division {
width: 8.3333%;
padding-left: 1.5%;
padding-right: 1.5%;
}
.ui.six.part.grid .division,
.ui.grid .two.wide.division {
.ui.grid .two.across.column {
width: 16.66667%;
}
.ui.four.part.grid .division,
.ui.grid .three.wide.division {
.ui.grid .three.across.column {
width: 25%;
}
.ui.three.part.grid .division,
.ui.grid .four.wide.division {
.ui.grid .four.across.column {
width: 33.3333%;
}
.ui.grid .five.wide.division {
.ui.grid .five.across.column {
width: 41.6666%;
}
.ui.two.part.grid .division,
.ui.grid .six.wide.division {
.ui.grid .six.across.column {
width: 50%;
}
.ui.grid .seven.wide.division {
.ui.grid .seven.across.column {
width: 58.3333%;
}
.ui.grid .eight.wide.division {
.ui.grid .eight.across.column {
width: 66.6666%;
}
.ui.grid .nine.wide.division {
.ui.grid .nine.across.column {
width: 75%;
}
.ui.grid .ten.wide.division {
.ui.grid .ten.across.column {
width: 83.3333%;
}
.ui.grid .eleven.wide.division {
.ui.grid .eleven.across.column {
width: 91.666%;
}
.ui.grid .twelve.wide.division {
.ui.grid .twelve.across.column {
width: 100%;
}
/* Variations */
/*-------------------
Column Count
--------------------*/
/* Standard */
.ui.grid > .column,
.ui.grid > .row > .column {
width: 8.3333%;
}
.ui.two.column.grid .column {
width: 50%;
}
.ui.two.column.grid .column:nth-child(2n+1) {
padding-left: 0%;
}
.ui.two.column.grid .column:nth-child(2n) {
padding-right: 0%;
}
.ui.three.column.grid .column {
width: 33.3333%;
}
.ui.three.column.grid .column:nth-child(3n+1) {
padding-left: 0%;
}
.ui.three.column.grid .column:nth-child(3n) {
padding-right: 0%;
}
.ui.four.column.grid .column {
width: 25%;
}
.ui.four.column.grid .column:nth-child(4n+1) {
padding-left: 0%;
}
.ui.four.column.grid .column:nth-child(4n) {
padding-right: 0%;
}
.ui.five.column.grid .column {
width: 20%;
}
.ui.five.column.grid .column:nth-child(5n+1) {
padding-left: 0%;
}
.ui.five.column.grid .column:nth-child(5n) {
padding-right: 0%;
}
.ui.six.column.grid .column {
width: 16.66667%;
}
.ui.six.column.grid .column:nth-child(6n+1) {
padding-left: 0%;
}
.ui.six.column.grid .column:nth-child(6n) {
padding-right: 0%;
}
.ui.seven.column.grid .column {
width: 14.2857%;
}
.ui.seven.column.grid .column:nth-child(7n+1) {
padding-left: 0%;
}
.ui.seven.column.grid .column:nth-child(7n) {
padding-right: 0%;
}
.ui.eight.column.grid .column {
width: 12.5%;
}
.ui.eight.column.grid .column:nth-child(8n+1) {
padding-left: 0%;
}
.ui.eight.column.grid .column:nth-child(8n) {
padding-right: 0%;
}
/* Fitted grid */
.ui.fitted.grid .division,
.ui.grid .fitted.division {
.ui.nine.column.grid .column {
width: 11.1111%;
}
.ui.nine.column.grid .column:nth-child(9n+1) {
padding-left: 0%;
}
.ui.nine.column.grid .column:nth-child(9n) {
padding-right: 0%;
}
.ui.ten.column.grid .column {
width: 10%;
}
.ui.ten.column.grid .column:nth-child(10n+1) {
padding-left: 0%;
}
.ui.ten.column.grid .column:nth-child(10n) {
padding-right: 0%;
}
.ui.eleven.column.grid .column {
width: 9.0909%;
}
.ui.eleven.column.grid .column:nth-child(11n+1) {
padding-left: 0%;
}
.ui.eleven.column.grid .column:nth-child(11n) {
padding-right: 0%;
}
/*-------------------
Fitted
--------------------*/
.ui.fitted.grid {
padding: 0%;
}
.ui.fitted.grid .column,
.ui.grid .fitted.column {
padding-left: 0%;
padding-right: 0%;
}
/*-------------------
Padded
--------------------*/
/*----------------------
Vertically Centered
-----------------------*/
/* Vertical Centered */
.ui.centered.grid .division,
.ui.centered.division {
.ui.centered.grid .column,
.ui.centered.column {
display: table-cell;
vertical-align: middle;
}
@media only screen and (max-width : 1000px) {
.ui.folding.grid {
display: block !important;
}
.ui.folding.grid .column {
display: block !important;
width: 100% !important;
padding: 0% !important;
}
}

4
node/src/files/components/semantic/src/collections/menu.css
View File

@ -48,7 +48,7 @@
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
vertical-align: middle;
min-height: 1.25em;
min-height: 1.3em;
-webkit-transition:
opacity 0.1s linear,
@ -121,6 +121,7 @@
border-radius: 0px;
}
/*--------------
Items
---------------*/
@ -244,7 +245,6 @@
position: absolute;
top: 100%;
left: 0px;
margin: 1px 0px 0px 0px;
background-color: #FFFFFF;
opacity: 0;

28
node/src/files/components/semantic/src/elements/label.css
View File

@ -92,6 +92,11 @@ a.ui.label {
Variations
*******************************/
/*-------------------
Tag
--------------------*/
.ui.tag.labels .label,
.ui.tag.label {
margin-left: 1em;
@ -158,9 +163,9 @@ a.ui.label {
border-radius: 100px 100px 100px 100px;
}
/*******************************
Attached
*******************************/
/*-------------------
Attached
--------------------*/
.ui.attached.label {
position: absolute;
@ -198,11 +203,9 @@ a.ui.label {
}
/*******************************
Colors
*******************************/
/*-------------------
Colors
--------------------*/
/*--- Standard ---*/
@ -461,6 +464,7 @@ a.ui.teal.tag.label:hover:before {
/*------------------
Floating Label
-------------------*/
.ui.floating.label {
position: absolute;
z-index: 100;
@ -473,11 +477,9 @@ a.ui.teal.tag.label:hover:before {
box-shadow: 0px -2px 0 0px rgba(0, 0, 0, 0.1) inset;
}
/*******************************
Sizes
*******************************/
/*-------------------
Sizes
--------------------*/
.ui.label {
font-size: 13px;

12
node/src/files/javascript/semantic.js
View File

@ -43,8 +43,7 @@ semantic.ready = function() {
createCode: function() {
var
$example = $(this).closest('.example'),
$shape = $example.find('.shape.module'),
$demo = $example.children().slice(3).not('.annotated, .ignore'),
$demo = $example.children().not('p, h4, i.code, .annotated, .ignore'),
$annotated = $example.find('.annotated'),
$code = $annotated.find('.code'),
whiteSpace = new RegExp('\\n\\s{4}', 'g'),
@ -99,13 +98,13 @@ semantic.ready = function() {
contentType = $code.data('type') || 'javascript',
editor = ace.edit($code[0]),
editorSession = editor.getSession(),
padding = -1,
padding = 4,
codeHeight = editor.getSession().getScreenLength() * (editor.renderer.lineHeight) + editor.renderer.scrollBar.getWidth() + padding
;
editor.setTheme('ace/theme/github');
editor.setShowPrintMargin(false);
editor.setReadOnly(true);
//editor.renderer.setShowGutter(false);
editor.renderer.setShowGutter(false);
editor.setHighlightActiveLine(false);
editorSession.setUseWrapMode(true);
@ -288,11 +287,10 @@ semantic.ready = function() {
$peek
.waypoint('sticky', {
offset: 85,
stuckClass: 'stuck'
offset : 85,
stuckClass : 'stuck'
})
;
console.log($peekItem);
$peekItem
.state('destroy')
.on('click', handler.peek)

18
node/src/files/stylesheets/semantic.css
View File

@ -387,6 +387,7 @@ box-shadow: 3px 0px 2px rgba(0, 0, 0, 0.2); */
position: relative;
width: 100%;
height: 200px;
text-align: left;
}
#example div.code {
font-size: 14px;
@ -433,12 +434,12 @@ box-shadow: 3px 0px 2px rgba(0, 0, 0, 0.2); */
#example div.code .ace_attribute-name {
color: #934E4E;
}
/*
#example div.code .ace_gutter,
#example div.code .ace_scroller {
margin: 14px 10px;
}
*/
#example div.code .ace_content {
}
#example div.code .ace_string {
@ -471,6 +472,9 @@ box-shadow: 3px 0px 2px rgba(0, 0, 0, 0.2); */
#example .example {
position: relative;
}
#example .example .grid i.code {
right: 25%;
}
#example .example i.code {
cursor: pointer;
position: absolute;
@ -515,3 +519,13 @@ box-shadow: 3px 0px 2px rgba(0, 0, 0, 0.2); */
}
}
@media only screen and (max-width : 1000px) {
#example .fixed .section,
#example .fixed .title b {
display: none;
}
#example .fixed .container {
width: auto;
margin: 0px auto;
}
}

251
src/collections/grid.css
View File

@ -1,14 +1,46 @@
/*
* # Semantic Grid
* http://github.com/quirkyinc/semantic
*
*
* Copyright 2013 Contributors
* Released under the MIT license
* http://opensource.org/licenses/MIT
*
* Released: May 6 2013
*/
/*******************************
Grid
Grid
*******************************/
/* Classic 12 section grid */
.ui.grid {
width: 100%;
display: table;
display: block;
text-align: center;
padding: 0% 5.55555%;
font-size: 0em;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
.ui.grid > .division {
display: table-cell;
/*-------------------
Columns
--------------------*/
.ui.grid > .column,
.ui.grid > .row > .column {
display: inline-block;
text-align: left;
font-size: 1rem;
padding-left: 1em;
padding-right: 1em;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
@ -17,70 +49,217 @@
vertical-align: top;
}
.ui.grid .division:first-child {
padding-left: 0% !important;
.ui.grid > .column:first-child,
.ui.grid > .row > .column:first-child {
padding-left: 0%;
}
.ui.grid > .column:last-child,
.ui.grid > .row > .column:last-child {
padding-right: 0%;
}
.ui.grid .division:last-child {
padding-right: 0% !important;
/*-------------------
Rows
--------------------*/
.ui.grid > .row {
padding-top: 2.55%;
}
.ui.grid > .row:first-child {
padding-top: 0px;
}
/*******************************
Variations
*******************************/
/* Sizing Combinations */
.ui.grid .division,
.ui.grid .one.wide.division {
width: 8.3333%;
padding-left: 1.5%;
padding-right: 1.5%;
}
.ui.six.part.grid .division,
.ui.grid .two.wide.division {
.ui.grid .two.across.column {
width: 16.66667%;
}
.ui.four.part.grid .division,
.ui.grid .three.wide.division {
.ui.grid .three.across.column {
width: 25%;
}
.ui.three.part.grid .division,
.ui.grid .four.wide.division {
.ui.grid .four.across.column {
width: 33.3333%;
}
.ui.grid .five.wide.division {
.ui.grid .five.across.column {
width: 41.6666%;
}
.ui.two.part.grid .division,
.ui.grid .six.wide.division {
.ui.grid .six.across.column {
width: 50%;
}
.ui.grid .seven.wide.division {
.ui.grid .seven.across.column {
width: 58.3333%;
}
.ui.grid .eight.wide.division {
.ui.grid .eight.across.column {
width: 66.6666%;
}
.ui.grid .nine.wide.division {
.ui.grid .nine.across.column {
width: 75%;
}
.ui.grid .ten.wide.division {
.ui.grid .ten.across.column {
width: 83.3333%;
}
.ui.grid .eleven.wide.division {
.ui.grid .eleven.across.column {
width: 91.666%;
}
.ui.grid .twelve.wide.division {
.ui.grid .twelve.across.column {
width: 100%;
}
/* Variations */
/*-------------------
Column Count
--------------------*/
/* Standard */
.ui.grid > .column,
.ui.grid > .row > .column {
width: 8.3333%;
}
.ui.two.column.grid .column {
width: 50%;
}
.ui.two.column.grid .column:nth-child(2n+1) {
padding-left: 0%;
}
.ui.two.column.grid .column:nth-child(2n) {
padding-right: 0%;
}
.ui.three.column.grid .column {
width: 33.3333%;
}
.ui.three.column.grid .column:nth-child(3n+1) {
padding-left: 0%;
}
.ui.three.column.grid .column:nth-child(3n) {
padding-right: 0%;
}
.ui.four.column.grid .column {
width: 25%;
}
.ui.four.column.grid .column:nth-child(4n+1) {
padding-left: 0%;
}
.ui.four.column.grid .column:nth-child(4n) {
padding-right: 0%;
}
.ui.five.column.grid .column {
width: 20%;
}
.ui.five.column.grid .column:nth-child(5n+1) {
padding-left: 0%;
}
.ui.five.column.grid .column:nth-child(5n) {
padding-right: 0%;
}
.ui.six.column.grid .column {
width: 16.66667%;
}
.ui.six.column.grid .column:nth-child(6n+1) {
padding-left: 0%;
}
.ui.six.column.grid .column:nth-child(6n) {
padding-right: 0%;
}
.ui.seven.column.grid .column {
width: 14.2857%;
}
.ui.seven.column.grid .column:nth-child(7n+1) {
padding-left: 0%;
}
.ui.seven.column.grid .column:nth-child(7n) {
padding-right: 0%;
}
.ui.eight.column.grid .column {
width: 12.5%;
}
.ui.eight.column.grid .column:nth-child(8n+1) {
padding-left: 0%;
}
.ui.eight.column.grid .column:nth-child(8n) {
padding-right: 0%;
}
/* Fitted grid */
.ui.fitted.grid .division,
.ui.grid .fitted.division {
.ui.nine.column.grid .column {
width: 11.1111%;
}
.ui.nine.column.grid .column:nth-child(9n+1) {
padding-left: 0%;
}
.ui.nine.column.grid .column:nth-child(9n) {
padding-right: 0%;
}
.ui.ten.column.grid .column {
width: 10%;
}
.ui.ten.column.grid .column:nth-child(10n+1) {
padding-left: 0%;
}
.ui.ten.column.grid .column:nth-child(10n) {
padding-right: 0%;
}
.ui.eleven.column.grid .column {
width: 9.0909%;
}
.ui.eleven.column.grid .column:nth-child(11n+1) {
padding-left: 0%;
}
.ui.eleven.column.grid .column:nth-child(11n) {
padding-right: 0%;
}
/*-------------------
Fitted
--------------------*/
.ui.fitted.grid {
padding: 0%;
}
.ui.fitted.grid .column,
.ui.grid .fitted.column {
padding-left: 0%;
padding-right: 0%;
}
/*-------------------
Padded
--------------------*/
/*----------------------
Vertically Centered
-----------------------*/
/* Vertical Centered */
.ui.centered.grid .division,
.ui.centered.division {
.ui.centered.grid .column,
.ui.centered.column {
display: table-cell;
vertical-align: middle;
}
@media only screen and (max-width : 1000px) {
.ui.folding.grid {
display: block !important;
}
.ui.folding.grid .column {
display: block !important;
width: 100% !important;
padding: 0% !important;
}
}

4
src/collections/menu.css
View File

@ -48,7 +48,7 @@
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
vertical-align: middle;
min-height: 1.25em;
min-height: 1.3em;
-webkit-transition:
opacity 0.1s linear,
@ -121,6 +121,7 @@
border-radius: 0px;
}
/*--------------
Items
---------------*/
@ -244,7 +245,6 @@
position: absolute;
top: 100%;
left: 0px;
margin: 1px 0px 0px 0px;
background-color: #FFFFFF;
opacity: 0;

28
src/elements/label.css
View File

@ -92,6 +92,11 @@ a.ui.label {
Variations
*******************************/
/*-------------------
Tag
--------------------*/
.ui.tag.labels .label,
.ui.tag.label {
margin-left: 1em;
@ -158,9 +163,9 @@ a.ui.label {
border-radius: 100px 100px 100px 100px;
}
/*******************************
Attached
*******************************/
/*-------------------
Attached
--------------------*/
.ui.attached.label {
position: absolute;
@ -198,11 +203,9 @@ a.ui.label {
}
/*******************************
Colors
*******************************/
/*-------------------
Colors
--------------------*/
/*--- Standard ---*/
@ -461,6 +464,7 @@ a.ui.teal.tag.label:hover:before {
/*------------------
Floating Label
-------------------*/
.ui.floating.label {
position: absolute;
z-index: 100;
@ -473,11 +477,9 @@ a.ui.teal.tag.label:hover:before {
box-shadow: 0px -2px 0 0px rgba(0, 0, 0, 0.1) inset;
}
/*******************************
Sizes
*******************************/
/*-------------------
Sizes
--------------------*/
.ui.label {
font-size: 13px;

Write Preview
Loading…
Cancel
Save