richard
/
SemanSemantic-UItic-UI
mirror of https://github.com/Semantic-Org/Semantic-UI.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

New examples

pull/2300/head
jlukic 10 years ago
parent
d842e46aa7
commit
df06ea37f4
9 changed files with 333 additions and 448 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 442
      examples/basic.html
  2. 199
      examples/homepage.html
  3. BIN
      examples/images/avatar/nan.jpg
  4. BIN
      examples/images/avatar/tom.jpg
  5. BIN
      examples/images/bg.jpg
  6. BIN
      examples/images/cat.png
  7. BIN
      examples/images/logo.png
  8. 125
      examples/login.html
  9. 15
      src/definitions/collections/grid.less

442
examples/basic.html
View File

@ -1,442 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<!-- Standard Meta -->
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<!-- Site Properities -->
<title>Bootstrap - Semantic</title>
<link rel="stylesheet" type="text/css" href="../dist/semantic.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.js"></script>
<script src="../dist/semantic.js"></script>
<script>
$(document)
.ready(function() {
$('.ui.selection.dropdown').dropdown();
$('.ui.menu .ui.dropdown').dropdown({
on: 'hover'
});
})
;
</script>
</head>
<body>
<div class="ui grid container">
<div class="row">
<div class="column">
<h1 class="ui header">Bootstrap Migration</h1>
</div>
</div>
<div class="row">
<div class="column">
<div class="ui message">
<h1 class="ui header">Hello, world!</h1>
<p>This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
<a class="ui blue button">Learn more &raquo;</a>
</div>
</div>
</div>
<div class="row">
<div class="column">
<h1 class="ui header">Buttons</h1>
<a class="ui button" tabindex="0">
Default
</a>
<a class="ui primary button" tabindex="0">
Primary
</a>
<a class="ui basic button" tabindex="0">
Basic
</a>
<a class="ui positive button" tabindex="0">
Success
</a>
<a class="ui negative button" tabindex="0">
Error
</a>
</div>
</div>
<div class="row">
<div class="column">
<h1 class="ui header">Thumbnails</h1>
<div class="ui divider"></div>
<img class="ui small image" src="images/wireframe/image.png">
</div>
</div>
<div class="row">
<div class="column">
<h1 class="ui header">Dropdown</h1>
<div class="ui divider"></div>
<div class="ui selection dropdown">
<input type="hidden" name="selection">
<i class="dropdown icon"></i>
<div class="default text">Select</div>
<div class="menu">
<div class="item" data-value="male">Male</div>
<div class="item" data-value="female">Female</div>
</div>
</div>
<div class="ui vertical menu">
<a class="active item">
Friends
</a>
<a class="item">
Messages
</a>
<div class="ui dropdown item">
<i class="dropdown icon"></i>
More
<div class="menu">
<a class="item">Edit Profile</a>
<a class="item">Choose Language</a>
<a class="item">Account Settings</a>
</div>
</div>
</div>
<div class="ui dropdown">
<div class="visible menu">
<div class="header">Categories</div>
<div class="item">
<i class="dropdown icon"></i>
<span class="text">Clothing</span>
<div class="menu">
<div class="header">Mens</div>
<div class="item">Shirts</div>
<div class="item">Pants</div>
<div class="item">Jeans</div>
<div class="item">Shoes</div>
<div class="divider"></div>
<div class="header">Womens</div>
<div class="item">Dresses</div>
<div class="item">Shoes</div>
<div class="item">Bags</div>
</div>
</div>
<div class="item">Home Goods</div>
<div class="item">Bedroom</div>
<div class="divider"></div>
<div class="header">Order</div>
<div class="item">Status</div>
<div class="item">Cancellations</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="column">
<h1 class="ui header">Badges</h1>
<div class="ui divider"></div>
<div class="ui vertical menu">
<div class="item">
One <span class="ui label">2</span>
</div>
<div class="item">
Two <span class="ui label">2</span>
</div>
<div class="item">
Three <span class="ui label">2</span>
</div>
</div>
</div>
</div>
<div class="row">
<div class="column">
<h1 class="ui header">Tables</h1>
<div class="ui two column grid">
<div class="column">
<table class="ui table">
<thead>
<tr>
<th>Name</th>
<th>Premium Plan</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>No</td>
</tr>
<tr>
<td>Jamie</td>
<td>Yes</td>
</tr>
<tr>
<td>Jill</td>
<td>Yes</td>
</tr>
</tbody>
</table>
</div>
<div class="column">
<table class="ui basic table">
<thead>
<tr>
<th>Name</th>
<th>Premium Plan</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>No</td>
</tr>
<tr>
<td>Jamie</td>
<td>Yes</td>
</tr>
<tr>
<td>Jill</td>
<td>Yes</td>
</tr>
</tbody>
</table>
</div>
<div class="column">
<table class="ui definition table">
<thead>
<tr>
<th>Name</th>
<th>Premium Plan</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>No</td>
</tr>
<tr>
<td>Jamie</td>
<td>Yes</td>
</tr>
<tr>
<td>Jill</td>
<td>Yes</td>
</tr>
</tbody>
</table>
</div>
<div class="column">
<table class="ui very basic table">
<thead>
<tr>
<th>Name</th>
<th>Premium Plan</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>No</td>
</tr>
<tr>
<td>Jamie</td>
<td>Yes</td>
</tr>
<tr>
<td>Jill</td>
<td>Yes</td>
</tr>
</tbody>
</table>
</div>
<div class="sixteen wide column">
<table class="ui celled structured table">
<thead>
<tr>
<th rowspan="2">Name</th>
<th rowspan="2">Type</th>
<th rowspan="2">Files</th>
<th colspan="3">Languages</th>
</tr>
<tr>
<th>Ruby</th>
<th>JavaScript</th>
<th>Python</th>
</tr>
</thead>
<tbody>
<tr>
<td>Alpha Team</td>
<td>Project 1</td>
<td>2</td>
<td>
<i class="large green checkmark icon"></i>
</td>
<td></td>
<td></td>
</tr>
<tr>
<td rowspan="3">Beta Team</td>
<td>Project 1</td>
<td>52</td>
<td>
<i class="large green checkmark icon"></i>
</td>
<td></td>
<td></td>
</tr>
<tr>
<td>Project 2</td>
<td>12</td>
<td></td>
<td>
<i class="large green checkmark icon"></i>
</td>
<td></td>
</tr>
<tr>
<td>Project 3</td>
<td>21</td>
<td>
<i class="large green checkmark icon"></i>
</td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="row">
<div class="column">
<h1 class="ui header">Alerts</h1>
<div class="ui divider"></div>
<div class="ui positive message">Well done! You successfully read this important alert message.</div>
<div class="ui info message">Heads up! This alert needs your attention, but it's not super important.</div>
<div class="ui warning message">Warning! Best check yo self, you're not looking too good.</div>
<div class="ui error message">Oh snap! Change a few things up and try submitting again.</div>
</div>
</div>
<div class="row">
<div class="column">
<h1 class="ui header">List groups</h1>
<div class="ui divider"></div>
<div class="ui three column grid">
<div class="column">
<div class="ui segments">
<div class="ui segment">
<p>Cras justo odio</p>
</div>
<div class="ui segment">
<p>Dapibus ac facilisis in</p>
</div>
<div class="ui segment">
<p>Morbi leo risus</p>
</div>
<div class="ui segment">
<p>Porta ac consectetur ac</p>
</div>
<div class="ui segment">
<p>Vestibulum at eros</p>
</div>
</div>
</div>
<div class="column">
<div class="ui fluid vertical menu">
<a class="item">
<p>Cras justo odio</p>
</a>
<a class="item">
<p>Vestibulum at eros</p>
</a>
</div>
</div>
<div class="column">
<div class="ui fluid vertical menu">
<a class="item">
<h1 class="ui medium header">List group item heading</h1>
<p>Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
</a>
<a class="item">
<h1 class="ui medium header">List group item heading</h1>
<p>Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
</a>
<a class="item">
<h1 class="ui medium header">List group item heading</h1>
<p>Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="column">
<h1 class="ui header">Panels</h1>
<div class="ui divider"></div>
<div class="ui three column grid">
<div class="column">
<div class="ui segments">
<div class="ui top attached error message">Error</div>
<div class="ui segment">Panel content</div>
</div>
</div>
<div class="column">
<div class="ui segments">
<div class="ui top attached info message">Info</div>
<div class="ui segment">Panel content</div>
</div>
</div>
<div class="column">
<div class="ui segments">
<div class="ui top attached success message">Success</div>
<div class="ui segment">Panel content</div>
</div>
</div>
<div class="column">
<h4 class="ui top attached inverted header">Header</h4>
<div class="ui buttom attached segment">Panel content</div>
</div>
<div class="column">
<div class="ui segments">
<h4 class="ui top attached block header">Header</h4>
<div class="ui buttom attached segment">Panel content</div>
</div>
</div>
<div class="column">
<div class="ui segments">
<h4 class="ui top attached header">Header</h4>
<div class="ui buttom attached segment">Panel content</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="column">
<h1 class="ui header">Wells</h1>
<div class="ui divider"></div>
<div class="ui segment">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur.</p>
</div>
<div class="ui secondary segment">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur.</p>
</div>
<div class="ui tertiary segment">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur.</p>
</div>
<div class="ui inverted segment">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur.</p>
</div>
<div class="ui secondary inverted segment">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur.</p>
</div>
<div class="ui tertiary inverted segment">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur.</p>
</div>
</div>
</div>
</div>
</body>
</html>

199
examples/homepage.html
View File

@ -0,0 +1,199 @@
<!DOCTYPE html>
<html>
<head>
<!-- Standard Meta -->
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<!-- Site Properities -->
<title>Homepage - Semantic</title>
<link rel="stylesheet" type="text/css" href="../dist/components/reset.css">
<link rel="stylesheet" type="text/css" href="../dist/components/site.css">
<link rel="stylesheet" type="text/css" href="../dist/components/container.css">
<link rel="stylesheet" type="text/css" href="../dist/components/grid.css">
<link rel="stylesheet" type="text/css" href="../dist/components/header.css">
<link rel="stylesheet" type="text/css" href="../dist/components/image.css">
<link rel="stylesheet" type="text/css" href="../dist/components/menu.css">
<link rel="stylesheet" type="text/css" href="../dist/components/divider.css">
<link rel="stylesheet" type="text/css" href="../dist/components/segment.css">
<link rel="stylesheet" type="text/css" href="../dist/components/button.css">
<link rel="stylesheet" type="text/css" href="../dist/components/list.css">
<link rel="stylesheet" type="text/css" href="../dist/components/icon.css">
<style type="text/css">
.masthead.segment {
min-height: 700px;
padding: 1em 0em;
}
.masthead .logo.item img {
margin-right: 1em;
}
.masthead .ui.menu .ui.button {
margin-left: 0.5em;
}
.masthead h1.ui.header {
margin-top: 2em;
margin-bottom: 1em;
font-size: 4em;
font-weight: normal;
}
.masthead h2 {
font-size: 1.7em;
font-weight: normal;
}
.ui.vertical.stripe {
padding: 8em 0em;
}
.ui.vertical.stripe h3 {
font-size: 2em;
}
.ui.vertical.stripe .button + h3,
.ui.vertical.stripe p + h3 {
margin-top: 3em;
}
.ui.vertical.stripe .floated.image {
clear: both;
}
.ui.vertical.stripe p {
font-size: 1.33em;
}
.ui.vertical.stripe .horizontal.divider {
margin: 3em 0em;
}
.quote.stripe.segment {
padding: 0em;
}
.quote.stripe.segment .grid .column {
padding-top: 5em;
padding-bottom: 5em;
}
.footer.segment {
padding: 5em 0em;
}
</style>
</head>
<body>
<div class="ui inverted vertical masthead center aligned segment">
<div class="ui container">
<div class="ui large secondary inverted pointing menu">
<a class="active item">Home</a>
<a class="item">Work</a>
<a class="item">Company</a>
<a class="item">Careers</a>
<div class="right item">
<a class="ui inverted button">Log in</a>
<a class="ui inverted button">Sign Up</a>
</div>
</div>
</div>
<div class="ui text container">
<h1 class="ui inverted header">
Do Something Very Easy
<div class="sub header">The World's Most Awesome Tool.</div>
</h1>
<h2>Do whatever you want when you want, <br>and you will get exactly what you want.</p>
<div class="ui massive primary button">Get Started <i class="right arrow icon"></i></div>
</div>
</div>
<div class="ui vertical stripe segment">
<div class="ui middle aligned stackable grid container">
<div class="row">
<div class="eight wide column">
<h3 class="ui header">We Help Companies and Companions</h3>
<p>We can give your company superpowers to do things that they never thought possible. Let us delight your customers and empower your needs...through pure data analytics.</p>
<h3 class="ui header">We Make Bananas That Can Dance</h3>
<p>Yes that's right, you thought it was the stuff of dreams, but even bananas can be bioengineered.</p>
</div>
<div class="six wide right floated column">
<img src="images/wireframe/white-image.png" class="ui large bordered rounded image">
</div>
</div>
<div class="row">
<div class="center aligned column">
<a class="ui huge button">Check Them Out</a>
</div>
</div>
</div>
</div>
<div class="ui vertical stripe quote segment">
<div class="ui equal width stackable internally celled grid">
<div class="center aligned row">
<div class="column">
<h3>"What a Company"</h3>
<p>That is what they all say about us</p>
</div>
<div class="column">
<h3>"I shouldn't have gone with their competitor."</h3>
<p>
<img src="images/avatar/nan.jpg" class="ui avatar image"> <b>Nan</b> Chief Fun Officer Acme Toys
</p>
</div>
</div>
</div>
</div>
<div class="ui vertical stripe segment">
<div class="ui text container">
<h3 class="ui header">Breaking The Grid, Grabs Your Attention</h3>
<p>Instead of focusing on content creation and hard work, we have learned how to master the art of doing nothing by providing massive amounts of whitespace and generic content that can seem massive, monolithic and worth your attention.</p>
<a class="ui large button">Read More</a>
<h4 class="ui horizontal header divider">
<a href="#">Case Studies</a>
</h4>
<h3 class="ui header">Did We Tell You About Our Bananas?</h3>
<p>Yes I know you probably disregarded the earlier boasts as non-sequitor filler content, but its really true. It took years of gene splicing and combinatory DNA research, but our bananas can really dance.</p>
<a class="ui large button">I'm Still Quite Interested</a>
</div>
</div>
<div class="ui inverted vertical footer segment">
<div class="ui container">
<div class="ui stackable inverted divided equal height stackable grid">
<div class="three wide column">
<h4 class="ui inverted header">About</h4>
<div class="ui inverted link list">
<a href="#" class="item">Sitemap</a>
<a href="#" class="item">Contact Us</a>
<a href="#" class="item">Religious Ceremonies</a>
<a href="#" class="item">Gazebo Plans</a>
</div>
</div>
<div class="three wide column">
<h4 class="ui inverted header">Services</h4>
<div class="ui inverted link list">
<a href="#" class="item">Banana Pre-Order</a>
<a href="#" class="item">DNA FAQ</a>
<a href="#" class="item">How To Access</a>
<a href="#" class="item">Favorite X-Men</a>
</div>
</div>
<div class="seven wide column">
<h4 class="ui inverted header">Footer Header</h4>
<p>Extra space for a call to action inside the footer that could help re-engage users.</p>
</div>
</div>
</div>
</div>
</body>
</html>

BIN
examples/images/avatar/nan.jpg
View File

Before After
Width: 650  |  Height: 650  |  Size: 23 KiB

BIN
examples/images/avatar/tom.jpg
View File

Before After
Width: 650  |  Height: 650  |  Size: 25 KiB

BIN
examples/images/bg.jpg
View File

Before After
Width: 2248  |  Height: 1420  |  Size: 46 KiB Width: 1900  |  Height: 1200  |  Size: 109 KiB

BIN
examples/images/cat.png
View File

Before After
Width: 500  |  Height: 574  |  Size: 107 KiB

BIN
examples/images/logo.png
View File

Before After
Width: 640  |  Height: 640  |  Size: 7.2 KiB Width: 128  |  Height: 128  |  Size: 731 B

125
examples/login.html
View File

@ -0,0 +1,125 @@
<!DOCTYPE html>
<html>
<head>
<!-- Standard Meta -->
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<!-- Site Properities -->
<title>Homepage - Semantic</title>
<link rel="stylesheet" type="text/css" href="../dist/components/reset.css">
<link rel="stylesheet" type="text/css" href="../dist/components/site.css">
<link rel="stylesheet" type="text/css" href="../dist/components/container.css">
<link rel="stylesheet" type="text/css" href="../dist/components/grid.css">
<link rel="stylesheet" type="text/css" href="../dist/components/header.css">
<link rel="stylesheet" type="text/css" href="../dist/components/image.css">
<link rel="stylesheet" type="text/css" href="../dist/components/menu.css">
<link rel="stylesheet" type="text/css" href="../dist/components/divider.css">
<link rel="stylesheet" type="text/css" href="../dist/components/segment.css">
<link rel="stylesheet" type="text/css" href="../dist/components/form.css">
<link rel="stylesheet" type="text/css" href="../dist/components/input.css">
<link rel="stylesheet" type="text/css" href="../dist/components/button.css">
<link rel="stylesheet" type="text/css" href="../dist/components/list.css">
<link rel="stylesheet" type="text/css" href="../dist/components/message.css">
<link rel="stylesheet" type="text/css" href="../dist/components/icon.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.js"></script>
<script src="../dist/components/form.js"></script>
<script src="../dist/components/transition.js"></script>
<style type="text/css">
body {
background-color: #DADADA;
}
body > .grid {
height: 100%;
}
.image {
margin-top: -100px;
}
.column {
max-width: 450px;
}
</style>
<script>
$(document)
.ready(function() {
$('.ui.form')
.form({
fields: {
email: {
identifier : 'email',
rules: [
{
type : 'empty',
prompt : 'Please enter your e-mail'
},
{
type : 'email',
prompt : 'Please enter a valid e-mail'
}
]
},
password: {
identifier : 'password',
rules: [
{
type : 'empty',
prompt : 'Please enter your password'
},
{
type : 'length[6]',
prompt : 'Your password must be at least 6 characters'
}
]
}
}
})
;
})
;
</script>
</head>
<body>
<div class="ui middle aligned center aligned grid">
<div class="column">
<h2 class="ui teal image header">
<img src="images/logo.png" class="image">
<div class="content">
Log-in to your account
</div>
</h2>
<form class="ui large form">
<div class="ui stacked segment">
<div class="field">
<div class="ui left icon input">
<i class="user icon"></i>
<input type="text" name="email" placeholder="E-mail address">
</div>
</div>
<div class="field">
<div class="ui left icon input">
<i class="lock icon"></i>
<input type="password" name="password" placeholder="Password">
</div>
</div>
<div class="ui fluid large teal submit button">Login</div>
</div>
<div class="ui error message"></div>
</form>
<div class="ui message">
New to us? <a href="#">Sign Up</a>
</div>
</div>
</div>
</body>
</html>

15
src/definitions/collections/grid.less
View File

@ -92,6 +92,9 @@
padding-top: (@rowSpacing / 2);
padding-bottom: (@rowSpacing / 2);
}
.ui.grid > .row:last-child {
padding-bottom: 0em;
}
/*-------------------
Columns
@ -1179,7 +1182,7 @@ body > .ui.grid {
-----------------------*/
/* Top Aligned */
.ui[class*="top aligned"].grid .column,
.ui[class*="top aligned"].grid .column:not(.row),
.ui.grid > [class*="top aligned"].row > .column,
.ui.grid > [class*="top aligned"].column:not(.row),
.ui.grid > .row > [class*="top aligned"].column {
@ -1189,7 +1192,7 @@ body > .ui.grid {
}
/* Middle Aligned */
.ui[class*="middle aligned"].grid .column,
.ui[class*="middle aligned"].grid .column:not(.row),
.ui.grid > [class*="middle aligned"].row > .column,
.ui.grid > [class*="middle aligned"].column:not(.row),
.ui.grid > .row > [class*="middle aligned"].column {
@ -1199,7 +1202,7 @@ body > .ui.grid {
}
/* Bottom Aligned */
.ui[class*="bottom aligned"].grid .column,
.ui[class*="bottom aligned"].grid .column:not(.row),
.ui.grid > [class*="bottom aligned"].row > .column,
.ui.grid > [class*="bottom aligned"].column:not(.row),
.ui.grid > .row > [class*="bottom aligned"].column {
@ -1232,7 +1235,7 @@ body > .ui.grid {
-----------------------*/
/* Left Aligned */
.ui[class*="left aligned"].grid .column,
.ui[class*="left aligned"].grid .column:not(.row),
.ui.grid > [class*="left aligned"].row > .column,
.ui.grid > [class*="left aligned"].column:not(.row),
.ui.grid > .row > [class*="left aligned"].column {
@ -1242,7 +1245,7 @@ body > .ui.grid {
/* Center Aligned */
.ui[class*="center aligned"].grid,
.ui[class*="center aligned"].grid .column,
.ui[class*="center aligned"].grid .column:not(.row),
.ui.grid > [class*="center aligned"].row > .column,
.ui.grid > [class*="center aligned"].column:not(.row),
.ui.grid > .row > [class*="center aligned"].column {
@ -1254,7 +1257,7 @@ body > .ui.grid {
}
/* Right Aligned */
.ui[class*="right aligned"].grid .column,
.ui[class*="right aligned"].grid .column:not(.row),
.ui.grid > [class*="right aligned"].row > .column,
.ui.grid > [class*="right aligned"].column:not(.row),
.ui.grid > .row > [class*="right aligned"].column {

Write Preview
Loading…
Cancel
Save