Jack Lukic
12 years ago
7 changed files with 938 additions and 0 deletions
Unified View
Diff Options
-
260docs/form.html
-
92src/modules/ui/accordion.css
-
182src/modules/ui/modal.css
-
140src/modules/ui/nag.css
-
122src/ui/flat/block.css
-
98src/ui/flat/header.css
-
44src/ui/flat/segment.css
@ -0,0 +1,260 @@ |
|||||
|
<!DOCTYPE HTML> |
||||
|
<html> |
||||
|
<head> |
||||
|
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> |
||||
|
<title>UI Form - Semantic</title> |
||||
|
|
||||
|
<link rel="stylesheet" class="ui" href="../src/ui/flat/panel.css" type="text/css" media="screen" /> |
||||
|
<link rel="stylesheet" class="ui" href="../src/ui/flat/button.css" type="text/css" media="screen" /> |
||||
|
<link rel="stylesheet" class="ui" href="../src/ui/flat/text.css" type="text/css" media="screen" /> |
||||
|
<link rel="stylesheet" class="ui" href="../src/ui/flat/form.css" type="text/css" media="screen" /> |
||||
|
<link rel="stylesheet" class="ui" href="../src/ui/flat/block.css" type="text/css" media="screen" /> |
||||
|
<link rel="stylesheet" class="ui" href="../src/ui/flat/segment.css" type="text/css" media="screen" /> |
||||
|
<link rel="stylesheet" class="ui" href="../src/ui/flat/checkbox.css" type="text/css" media="screen" /> |
||||
|
<link rel="stylesheet" class="ui" href="../src/ui/flat/icons.css" type="text/css" media="screen" /> |
||||
|
|
||||
|
<link rel="stylesheet" href="../src/ui/flat/menu.css" type="text/css" media="screen" /> |
||||
|
|
||||
|
<link rel="stylesheet" href="../src/modules/shape.css" type="text/css" media="screen" /> |
||||
|
|
||||
|
<link rel="stylesheet" href="library/sidr.css" type="text/css" media="screen" /> |
||||
|
<link rel="stylesheet" href="stylesheets/example.css" type="text/css" media="screen" /> |
||||
|
|
||||
|
<script src="../dependencies/jquery.js" type="text/javascript"></script> |
||||
|
<script src="../src/modules/ui/shape.js" type="text/javascript"></script> |
||||
|
<script src="../src/modules/behavior/state.js" type="text/javascript"></script> |
||||
|
|
||||
|
<script src="library/sidr.js" type="text/javascript"></script> |
||||
|
<script src="library/waypoints.js" type="text/javascript"></script> |
||||
|
<script src="javascript/example.js" type="text/javascript"></script> |
||||
|
|
||||
|
</head> |
||||
|
|
||||
|
<body id="example"> |
||||
|
|
||||
|
<div class="sidr" id="menu"> |
||||
|
<ul> |
||||
|
<li><a href="module.html">Introduction</a></li> |
||||
|
<li><a>Download</a></li> |
||||
|
<li><a href="#">UI</a> |
||||
|
<ul> |
||||
|
<li class="active"><a href="button.html">Button</a></li> |
||||
|
<li><a>Text</a></li> |
||||
|
<li><a>Headers</a></li> |
||||
|
<li><a>Columns</a></li> |
||||
|
<li><a>Elements (Grid System)</a></li> |
||||
|
<li><a>Tags</a></li> |
||||
|
<li><a>Items (Lists of Content)</a></li> |
||||
|
<li><a>Panels (Type of Menu)</a></li> |
||||
|
<li><a>Forms</a></li> |
||||
|
<li><a>Fields</a></li> |
||||
|
<li><a>Checkboxes</a></li> |
||||
|
<li><a>Icons</a></li> |
||||
|
<li><a>Dividers</a></li> |
||||
|
</ul> |
||||
|
</li> |
||||
|
<li><a href="#">UI Modules</a> |
||||
|
<ul> |
||||
|
<li><a>Accordion</a></li> |
||||
|
<li><a>Chat Room</a></li> |
||||
|
<li><a>Modal</a></li> |
||||
|
<li><a>Nag</a></li> |
||||
|
<li><a>Popup</a></li> |
||||
|
<li><a>Search</a></li> |
||||
|
<li><a>Star Rating</a></li> |
||||
|
<li><a>Tabs</a></li> |
||||
|
</ul> |
||||
|
</li> |
||||
|
<li><a href="#">Behavioral Modules</a> |
||||
|
<ul> |
||||
|
<li><a>API</a></li> |
||||
|
<li><a>Animation</a></li> |
||||
|
<li><a>Form Validation</a></li> |
||||
|
<li><a>Placeholder Text</a></li> |
||||
|
<li><a class="shape.html">Shape</a></li> |
||||
|
<li><a>State</a></li> |
||||
|
</ul> |
||||
|
</li> |
||||
|
</ul> |
||||
|
</div> |
||||
|
<div class="ui large fixed transparent black menu"> |
||||
|
<div class="container"> |
||||
|
<div class="title item"> |
||||
|
Semantic UI: Button |
||||
|
</div> |
||||
|
<div class="icon previous link item"> |
||||
|
<i class="icon left-dir"></i> |
||||
|
</div> |
||||
|
<div class="section dropdown item"> |
||||
|
1 of 14 |
||||
|
<div class="menu"> |
||||
|
<div class="active item">1. Button</div> |
||||
|
<div class="item">2. Text</div> |
||||
|
<div class="item">3. Headers</div> |
||||
|
<div class="item">4. Columns</div> |
||||
|
<div class="item">5. Elements</div> |
||||
|
<div class="item">6. Tags</div> |
||||
|
<div class="item">7. Items</div> |
||||
|
<div class="item">8. Panels</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="icon next link item"> |
||||
|
<i class="icon right-dir"></i> |
||||
|
</div> |
||||
|
<div class="right menu"> |
||||
|
<a class="item" href="http://github.com/quirky/quirkyinc/semantic"> |
||||
|
<i class="icon cloud"></i> |
||||
|
</a> |
||||
|
<a class="item" href="http://github.com/quirky/quirkyinc/semantic"> |
||||
|
<i class="icon github"></i> |
||||
|
</a> |
||||
|
<div class="dropdown item"> |
||||
|
<i class="icon cog"></i> |
||||
|
<div class="menu"> |
||||
|
<div class="swap item">Change Theme</div> |
||||
|
<div class="item">About Semantic</div> |
||||
|
<div class="item">Choice 3</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="ui huge left attached vertical side buttons"> |
||||
|
<div class="ui blue menu button">Menu</div> |
||||
|
</div> |
||||
|
<div class="segment"> |
||||
|
<div class="container"> |
||||
|
<h1>Form</h1> |
||||
|
<p>Forms are a useful grouping of related elements requiring user input.</p> |
||||
|
<p> |
||||
|
Forms always include fields, and fields always contain form elements. Fields themselves may also include: |
||||
|
<a href="#">standard form fields</a>, like labels, inputs and textareas, as well as: |
||||
|
<a href="#">checkboxes</a>, |
||||
|
<a href="#">sliders</a>, and |
||||
|
<a href="#">message blocks</a>. |
||||
|
</p> |
||||
|
<p>Message blocks are <a href="#">ui text blocks</a> which are formatted for use inside forms.</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="main container"> |
||||
|
|
||||
|
<div class="peek"> |
||||
|
<div class="ui large vertical pointing bottom attached panel"> |
||||
|
<li class="active">Standard</li> |
||||
|
<li>States</li> |
||||
|
<li>Variations</li> |
||||
|
<li>Group</li> |
||||
|
</div> |
||||
|
</div> |
||||
|
<h2>Standard</h2> |
||||
|
|
||||
|
<h4>All Together (Form):</h4> |
||||
|
<div class="ui form segment"> |
||||
|
<div class="ui info block"> |
||||
|
<div class="header">We had some issues</div> |
||||
|
<ul class="list"> |
||||
|
<li>Please enter your first name</li> |
||||
|
<li>Please enter your last name</li> |
||||
|
</ul> |
||||
|
</div> |
||||
|
<div class="two fields"> |
||||
|
<div class="field"> |
||||
|
<label>First Name</label> |
||||
|
<input placeholder="First Name" type="text"> |
||||
|
</div> |
||||
|
<div class="field"> |
||||
|
<label>Last Name</label> |
||||
|
<input placeholder="Last Name" type="text"> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="inline field"> |
||||
|
<div class="ui checkbox"> |
||||
|
<input type="checkbox" id="terms" /> |
||||
|
<label for="terms"></label> |
||||
|
</div> |
||||
|
<label>I agree to the terms and conditions</label> |
||||
|
</div> |
||||
|
<div class="ui blue submit button">Submit</div> |
||||
|
</div> |
||||
|
|
||||
|
<h2>Types of Content</h2> |
||||
|
|
||||
|
<h4>Field:</h4> |
||||
|
<div class="ui form"> |
||||
|
<div class="field"> |
||||
|
<label>User Input</label> |
||||
|
<input type="text"> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<h4>Text Area:</h4> |
||||
|
<div class="ui form"> |
||||
|
<div class="field"> |
||||
|
<label>User Text</label> |
||||
|
<textarea></textarea> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<h4>Checkbox:</h4> |
||||
|
<div class="ui form"> |
||||
|
<div class="field"> |
||||
|
<label>Checkbox (Using attribute ID to trigger checked event)</label> |
||||
|
<div class="ui checkbox"> |
||||
|
<input type="checkbox" id="uniqueid" /> |
||||
|
<label for="uniqueid"></label> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="field"> |
||||
|
<label>Checkbox (<a href="#">Javascript</a>)</label> |
||||
|
<div class="ui checkbox"> |
||||
|
<input type="checkbox"/> |
||||
|
<label></label> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<h4>Messages:</h4> |
||||
|
<div class="ui form"> |
||||
|
<div class="ui block"> |
||||
|
<div class="header">We had some issues</div> |
||||
|
<ul class="list"> |
||||
|
<li>Please enter your first name</li> |
||||
|
<li>Please enter your last name</li> |
||||
|
</ul> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<h2>States</h2> |
||||
|
|
||||
|
<h4>If form is in state state, it will automatically show any error message block:</h4> |
||||
|
<div class="ui error form"> |
||||
|
<div class="ui error block"> |
||||
|
<div class="header">Action Forbidden</div> |
||||
|
<p>Don't try to do that you're crazy!</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<h4>If form is in warning state, it will automatically show any warning message block:</h4> |
||||
|
<div class="ui warning form"> |
||||
|
<div class="ui warning block"> |
||||
|
<div class="header">We had some issues</div> |
||||
|
<ul class="list"> |
||||
|
<li>Please enter your first name</li> |
||||
|
<li>Please enter your last name</li> |
||||
|
</ul> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
|
||||
|
<h2>Variations</h2> |
||||
|
|
||||
|
|
||||
|
|
||||
|
<h2>Fields (Group)</h2> |
||||
|
|
||||
|
|
||||
|
|
||||
|
</div> |
||||
|
</body> |
||||
|
|
||||
|
</html> |
||||
@ -0,0 +1,92 @@ |
|||||
|
.ui.accordion { |
||||
|
|
||||
|
} |
||||
|
|
||||
|
.ui.accordion .title { |
||||
|
cursor: pointer; |
||||
|
font-size: 16px; |
||||
|
font-weight: bold; |
||||
|
color: #3E2151; |
||||
|
margin-top: 8px; |
||||
|
padding: 8px 8px; |
||||
|
border: 1px solid transparent; |
||||
|
border-top: 1px solid #E0E0E0; |
||||
|
|
||||
|
-webkit-box-shadow: 0px 1px 0px #FFFFFF inset; |
||||
|
-moz-box-shadow: 0px 1px 0px #FFFFFF inset; |
||||
|
box-shadow: 0px 1px 0px #FFFFFF inset; |
||||
|
|
||||
|
transition: color 0.2s ease-out; |
||||
|
} |
||||
|
.ui.accordion .title:first-child { |
||||
|
margin-top: 0px; |
||||
|
border-top-color: transparent; |
||||
|
|
||||
|
-webkit-box-shadow: none; |
||||
|
-moz-box-shadow: none; |
||||
|
box-shadow: none; |
||||
|
} |
||||
|
.ui.accordion .title:hover, |
||||
|
.ui.accordion .title.active { |
||||
|
color: #335687; |
||||
|
} |
||||
|
.ui.accordion .title.active { |
||||
|
background-color: #E0E0E0; |
||||
|
border: 1px solid #BBBBBB; |
||||
|
-webkit-box-shadow: 0px 1px 0px #FFFFFF inset; |
||||
|
-moz-box-shadow: 0px 1px 0px #FFFFFF inset; |
||||
|
box-shadow: 0px 1px 0px #FFFFFF inset; |
||||
|
color: #335687; |
||||
|
} |
||||
|
|
||||
|
.ui.accordion .icon { |
||||
|
margin: 0px 4px 4px 2px; |
||||
|
display: inline-block; |
||||
|
text-indent: -9999px; |
||||
|
|
||||
|
vertical-align: middle; |
||||
|
|
||||
|
border-top: 4px solid transparent; |
||||
|
border-bottom: 4px solid transparent; |
||||
|
border-left: 6px solid #3E2151; |
||||
|
border-right: 4px solid transparent; |
||||
|
} |
||||
|
.ui.accordion .title:hover .icon { |
||||
|
border-left-color: #335687; |
||||
|
} |
||||
|
.ui.accordion .title.active .icon { |
||||
|
border-left: 4px solid transparent; |
||||
|
border-top: 6px solid #335687; |
||||
|
margin-left: 0px; |
||||
|
margin-bottom: 0px; |
||||
|
} |
||||
|
|
||||
|
.ui.accordion .content { |
||||
|
display: none; |
||||
|
padding: 10px 20px; |
||||
|
margin: 0px; |
||||
|
font-size: 12px; |
||||
|
line-height: 2; |
||||
|
} |
||||
|
.ui.accordion .content p { |
||||
|
margin: 12px 0px; |
||||
|
font-size: 12px; |
||||
|
} |
||||
|
.ui.accordion .content.active { |
||||
|
display: block; |
||||
|
background-color: #EEEEEE; |
||||
|
|
||||
|
-webkit-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.25) inset; |
||||
|
-moz-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.25) inset; |
||||
|
box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.25) inset; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
/* Connected Accordion */ |
||||
|
.ui.accordion.connected { |
||||
|
background-color: #FAFAFA; |
||||
|
border: 1px solid #DDDDDD; |
||||
|
} |
||||
|
.ui.accordion.connected .title { |
||||
|
margin-top: 0px; |
||||
|
} |
||||
@ -0,0 +1,182 @@ |
|||||
|
/******************************* |
||||
|
Dimmer Styles |
||||
|
*******************************/ |
||||
|
|
||||
|
/* the one true page dimmer */ |
||||
|
#dimmer { |
||||
|
position: absolute; |
||||
|
visibility: hidden; |
||||
|
top: 0px; |
||||
|
left: 0px; |
||||
|
z-index: 999; |
||||
|
|
||||
|
margin: 0px; |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
padding: 0px; |
||||
|
} |
||||
|
#dimmer .content { |
||||
|
position: fixed; |
||||
|
top: 0px; |
||||
|
left: 0px; |
||||
|
|
||||
|
margin: 0px; |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
padding: 0px; |
||||
|
visibility: hidden; |
||||
|
|
||||
|
background-color: #000000; |
||||
|
opacity: 0.0; |
||||
|
} |
||||
|
|
||||
|
/* a generic dimmer */ |
||||
|
.dimmer { |
||||
|
display: none; |
||||
|
position: absolute; |
||||
|
top: 0px; |
||||
|
left: 0px; |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
opacity: 0; |
||||
|
background-color: #000000; |
||||
|
z-index: 999; |
||||
|
} |
||||
|
.white.dimmer { |
||||
|
background-color: #FFFFFF; |
||||
|
} |
||||
|
.loading .dimmer { |
||||
|
display: block; |
||||
|
opacity: 0.8; |
||||
|
|
||||
|
-webkit-transition: opacity 0.5s linear; |
||||
|
-moz-transition: opacity 0.5s linear; |
||||
|
-o-transition: opacity 0.5s linear; |
||||
|
-ms-transition: opacity 0.5s linear; |
||||
|
transition: opacity 0.5s linear; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
/******************************* |
||||
|
Modal Styles |
||||
|
*******************************/ |
||||
|
.modal { |
||||
|
display: none; |
||||
|
position: fixed; |
||||
|
z-index: 1000; |
||||
|
|
||||
|
top: 50%; |
||||
|
left: 50%; |
||||
|
|
||||
|
margin-left: -400px; |
||||
|
width: 800px; |
||||
|
|
||||
|
-webkit-box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.8); |
||||
|
-moz-box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.8); |
||||
|
box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.8); |
||||
|
|
||||
|
-webkit-border-radius: 5px; |
||||
|
-moz-border-radius: 5px; |
||||
|
border-radius: 5px; |
||||
|
} |
||||
|
|
||||
|
.modal.absolute { |
||||
|
position: absolute; |
||||
|
} |
||||
|
.modal.fixed { |
||||
|
position: fixed; |
||||
|
} |
||||
|
|
||||
|
/*-------------- |
||||
|
Close Button |
||||
|
---------------*/ |
||||
|
|
||||
|
.modal > .close { |
||||
|
cursor: pointer; |
||||
|
position: absolute; |
||||
|
font-size: 14px; |
||||
|
color: #FFFFFF; |
||||
|
top: -18px; |
||||
|
right: -18px; |
||||
|
opacity: 0.8; |
||||
|
} |
||||
|
.modal > .close:hover { |
||||
|
opacity: 1; |
||||
|
} |
||||
|
|
||||
|
/*-------------- |
||||
|
Header |
||||
|
---------------*/ |
||||
|
|
||||
|
.modal > hgroup { |
||||
|
background-color: #442359; |
||||
|
padding: 15px 20px; |
||||
|
|
||||
|
-webkit-border-radius: 10px 10px 0px 0px; |
||||
|
-moz-border-radius: 10px 10px 0px 0px; |
||||
|
border-radius: 10px 10px 0px 0px; |
||||
|
} |
||||
|
.modal > hgroup h2 { |
||||
|
margin: 0px; |
||||
|
|
||||
|
font-size: 22px; |
||||
|
font-weight: bold; |
||||
|
color: #FFFFFF; |
||||
|
text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.75); |
||||
|
} |
||||
|
.modal > hgroup h3 { |
||||
|
font-size: 18px; |
||||
|
color: #FFF; |
||||
|
} |
||||
|
|
||||
|
.modal > .content { |
||||
|
position: relative; |
||||
|
overflow: hidden; |
||||
|
padding: 20px 20px 40px; |
||||
|
background-color: #FAFAFA; |
||||
|
|
||||
|
-webkit-border-radius: 0px 0px 10px 10px; |
||||
|
-moz-border-radius: 0px 0px 10px 10px; |
||||
|
border-radius: 0px 0px 10px 10px; |
||||
|
} |
||||
|
|
||||
|
.modal > .content .left { |
||||
|
float: left; |
||||
|
width: 50%; |
||||
|
} |
||||
|
.modal > .content .right { |
||||
|
float: right; |
||||
|
width: 50%; |
||||
|
} |
||||
|
|
||||
|
/* Static In-Page Modal */ |
||||
|
.modal.static { |
||||
|
display: block; |
||||
|
position: relative; |
||||
|
overflow: hidden; |
||||
|
top: 0px; |
||||
|
left: 0px; |
||||
|
|
||||
|
border: 1px solid #CCCCCC; |
||||
|
|
||||
|
width: auto; |
||||
|
height: auto; |
||||
|
margin: 0px auto; |
||||
|
|
||||
|
-webkit-border-radius: 0px; |
||||
|
-moz-border-radius: 0px; |
||||
|
border-radius: 0px; |
||||
|
|
||||
|
color: #555555; |
||||
|
z-index: 2; |
||||
|
|
||||
|
-moz-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2); |
||||
|
-webkit-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2); |
||||
|
box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2); |
||||
|
} |
||||
|
.modal.static > hgroup, |
||||
|
.modal.static > .content { |
||||
|
-webkit-border-radius: 0px; |
||||
|
-moz-border-radius: 0px; |
||||
|
border-radius: 0px; |
||||
|
} |
||||
@ -0,0 +1,140 @@ |
|||||
|
.ui.nag { |
||||
|
display: none; |
||||
|
position: absolute; |
||||
|
top: 0px; |
||||
|
left: 10%; |
||||
|
z-index: 100; |
||||
|
|
||||
|
width: 80%; |
||||
|
min-height: 20px; |
||||
|
|
||||
|
-webkit-box-sizing: border-box; |
||||
|
-moz-box-sizing: border-box; |
||||
|
-ms-box-sizing: border-box; |
||||
|
box-sizing: border-box; |
||||
|
|
||||
|
padding: 8px 20px; |
||||
|
|
||||
|
background-color: #272626; |
||||
|
background: -webkit-linear-gradient(top, rgba(22, 22, 22, 0.85) 0%, rgba(17, 17, 17, 1) 100%); |
||||
|
background: -moz-linear-gradient(top, rgba(22, 22, 22, 0.85) 0%, rgba(17, 17, 17, 1) 100%); |
||||
|
background: -o-linear-gradient(top, rgba(22, 22, 22, 0.85) 0%, rgba(17, 17, 17, 1) 100%); |
||||
|
background: -ms-linear-gradient(top, rgba(22, 22, 22, 0.85) 0%, rgba(17, 17, 17, 1) 100%); |
||||
|
background: linear-gradient(top, rgba(22, 22, 22, 0.85) 0%, rgba(17, 17, 17, 1) 100%); |
||||
|
|
||||
|
-webkit-box-shadow: |
||||
|
0px 2px 3px rgba(0, 0, 0, 0.4), |
||||
|
0px 1px 0px rgba(255, 255, 255, 0.1) inset |
||||
|
; |
||||
|
-moz-box-shadow: |
||||
|
0px 2px 3px rgba(0, 0, 0, 0.4), |
||||
|
0px 1px 0px rgba(255, 255, 255, 0.1) inset |
||||
|
; |
||||
|
box-shadow: |
||||
|
0px 2px 3px rgba(0, 0, 0, 0.4), |
||||
|
0px 1px 0px rgba(255, 255, 255, 0.1) inset |
||||
|
; |
||||
|
text-align: center; |
||||
|
font-size: 14px; |
||||
|
font-weight: bold; |
||||
|
color: #009FDA; |
||||
|
text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.8); |
||||
|
|
||||
|
-webkit-border-radius: 0px 0px 5px 5px; |
||||
|
-moz-border-radius: 0px 0px 5px 5px; |
||||
|
border-radius: 0px 0px 5px 5px; |
||||
|
|
||||
|
-webkit-transition: 0.2s background; |
||||
|
-moz-transition: 0.2s background; |
||||
|
-o-transition: 0.2s background; |
||||
|
-ms-transition: 0.2s background; |
||||
|
transition: 0.2s background; |
||||
|
} |
||||
|
.ui.nag .close { |
||||
|
cursor: pointer; |
||||
|
opacity: 0.4; |
||||
|
|
||||
|
position: absolute; |
||||
|
top: 50%; |
||||
|
right: 15px; |
||||
|
|
||||
|
margin-top: -6px; |
||||
|
|
||||
|
font-size: 12px; |
||||
|
color: #FFFFFF; |
||||
|
|
||||
|
-webkit-transition: 0.1s opacity; |
||||
|
-moz-transition: 0.1s opacity; |
||||
|
-o-transition: 0.1s opacity; |
||||
|
-ms-transition: 0.1s opacity; |
||||
|
transition: 0.1s opacity; |
||||
|
} |
||||
|
.ui.nag .close.hover { |
||||
|
opacity: 1; |
||||
|
} |
||||
|
.ui.nag b { |
||||
|
font-weight: bold; |
||||
|
color: #EEEEEE; |
||||
|
} |
||||
|
/* Bottom Style */ |
||||
|
.ui.nag.bottom { |
||||
|
-webkit-border-radius: 5px 5px 0px 0px; |
||||
|
-moz-border-radius: 5px 5px 0px 0px; |
||||
|
border-radius: 5px 5px 0px 0px; |
||||
|
} |
||||
|
|
||||
|
/* Fixed Style */ |
||||
|
.ui.nag.fixed { |
||||
|
position: fixed; |
||||
|
} |
||||
|
.ui.nag.bottom.fixed { |
||||
|
top: auto; |
||||
|
bottom: 0px; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
|
||||
|
/* Link Style */ |
||||
|
.ui.nag.hover { |
||||
|
cursor: pointer; |
||||
|
background-color: #272626; |
||||
|
background: -webkit-linear-gradient(top, rgba(22, 22, 22, 1) 0%, rgba(17, 17, 17, 1) 100%); |
||||
|
background: -moz-linear-gradient(top, rgba(22, 22, 22, 1) 0%, rgba(17, 17, 17, 1) 100%); |
||||
|
background: -o-linear-gradient(top, rgba(22, 22, 22, 1) 0%, rgba(17, 17, 17, 1) 100%); |
||||
|
background: -ms-linear-gradient(top, rgba(22, 22, 22, 1) 0%, rgba(17, 17, 17, 1) 100%); |
||||
|
background: linear-gradient(top, rgba(22, 22, 22, 1) 0%, rgba(17, 17, 17, 1) 100%); |
||||
|
} |
||||
|
.ui.nag.hover b { |
||||
|
font-weight: bold; |
||||
|
color: #FFFFFF; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
/* White Variation */ |
||||
|
.ui.nag.white { |
||||
|
background-color: #EEEEEE; |
||||
|
background: -webkit-linear-gradient(top, #FFFFFF 0%, #DDDDDD 100%); |
||||
|
background: -moz-linear-gradient(top, #FFFFFF 0%, #DDDDDD 100%); |
||||
|
background: -o-linear-gradient(top, #FFFFFF 0%, #DDDDDD 100%); |
||||
|
background: -ms-linear-gradient(top, #FFFFFF 0%, #DDDDDD 100%); |
||||
|
background: linear-gradient(top, #FFFFFF 0%, #DDDDDD 100%); |
||||
|
|
||||
|
-webkit-box-shadow: |
||||
|
0px 2px 3px rgba(0, 0, 0, 0.2), |
||||
|
0px 1px 0px rgba(255, 255, 255, 0.1) inset |
||||
|
; |
||||
|
-moz-box-shadow: |
||||
|
0px 2px 3px rgba(0, 0, 0, 0.2), |
||||
|
0px 1px 0px rgba(255, 255, 255, 0.1) inset |
||||
|
; |
||||
|
box-shadow: |
||||
|
0px 2px 3px rgba(0, 0, 0, 0.2), |
||||
|
0px 1px 0px rgba(255, 255, 255, 0.1) inset |
||||
|
; |
||||
|
text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.8); |
||||
|
color: #888888; |
||||
|
} |
||||
|
.ui.nag.white .close, |
||||
|
.ui.nag.white b { |
||||
|
color: #000000; |
||||
|
} |
||||
@ -0,0 +1,122 @@ |
|||||
|
.ui.block { |
||||
|
min-height: 18px; |
||||
|
margin: 15px 0px; |
||||
|
|
||||
|
background-color: rgba(0, 0, 0, 0.04); |
||||
|
|
||||
|
font-size: 16px; |
||||
|
|
||||
|
line-height: 1.33; |
||||
|
height: auto; |
||||
|
padding: 1em; |
||||
|
color: #333333; |
||||
|
|
||||
|
-webkit-border-radius: 4px 4px 4px 4px; |
||||
|
-moz-border-radius: 4px 4px 4px 4px; |
||||
|
border-radius: 4px 4px 4px 4px; |
||||
|
|
||||
|
-webkit-box-shadow: |
||||
|
0px 0px 0px 1px rgba(255, 255, 255, 0.55) inset |
||||
|
; |
||||
|
-moz-box-shadow: |
||||
|
0px 0px 0px 1px rgba(255, 255, 255, 0.55) inset |
||||
|
; |
||||
|
box-shadow: |
||||
|
0px 0px 0px 1px rgba(255, 255, 255, 0.55) inset |
||||
|
; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
/*-------------- |
||||
|
Content |
||||
|
---------------*/ |
||||
|
|
||||
|
/* block with headers */ |
||||
|
.ui.block > .header { |
||||
|
font-size: 1.33em; |
||||
|
font-weight: bold; |
||||
|
} |
||||
|
|
||||
|
/* block with paragraphs */ |
||||
|
.ui.block > p { |
||||
|
margin: 5px 0px; |
||||
|
} |
||||
|
.ui.block > p:first-child { |
||||
|
margin: 0px; |
||||
|
} |
||||
|
|
||||
|
/* block with child list */ |
||||
|
.ui.block ul.list { |
||||
|
list-style-position: inside; |
||||
|
margin: 5px 0px 0px; |
||||
|
padding: 0px; |
||||
|
} |
||||
|
.ui.block ul.list li { |
||||
|
position: relative; |
||||
|
list-style-type: none; |
||||
|
margin: 0px 0px 0px 10px; |
||||
|
padding: 0px; |
||||
|
} |
||||
|
.ui.block ul.list li:before { |
||||
|
position: absolute; |
||||
|
content: '\2022'; |
||||
|
top: -0.05em; |
||||
|
left: -10px; |
||||
|
|
||||
|
height: 100%; |
||||
|
vertical-align: baseline; |
||||
|
|
||||
|
color: rgba(0, 0, 0, 0.3); |
||||
|
} |
||||
|
.ui.block ul.list li:first-child { |
||||
|
margin-top: 0px; |
||||
|
} |
||||
|
|
||||
|
/*-------------- |
||||
|
Colors |
||||
|
---------------*/ |
||||
|
|
||||
|
.ui.blue.block, |
||||
|
.ui.info.block { |
||||
|
border-color: #75C9E9; |
||||
|
background-color: #E9F9FF; |
||||
|
color: #1D6582; |
||||
|
} |
||||
|
|
||||
|
/* Success Text Block */ |
||||
|
.ui.green.block, |
||||
|
.ui.success.block, |
||||
|
.ui.positive.block { |
||||
|
background-color: #EEFFE9; |
||||
|
color: #119000; |
||||
|
} |
||||
|
|
||||
|
/* Warning Text Block */ |
||||
|
.ui.yellow.block, |
||||
|
.ui.warning.header, |
||||
|
.ui.warning.block { |
||||
|
background-color: #F6F3D5; |
||||
|
color: #AF9801; |
||||
|
} |
||||
|
/* Error Text Block */ |
||||
|
.ui.red.block, |
||||
|
.ui.error.block, |
||||
|
.ui.negative.block { |
||||
|
background-color: #F1D7D7; |
||||
|
|
||||
|
color: #AD0000; |
||||
|
border-color: #B06C6C; |
||||
|
} |
||||
|
|
||||
|
/*-------------- |
||||
|
States |
||||
|
---------------*/ |
||||
|
|
||||
|
.ui.block.show, |
||||
|
.ui.header.show { |
||||
|
display: block; |
||||
|
} |
||||
|
.ui.block.hide, |
||||
|
.ui.header.hide { |
||||
|
display: none; |
||||
|
} |
||||
@ -0,0 +1,98 @@ |
|||||
|
/******************************* |
||||
|
Headers & Text Blocks |
||||
|
*******************************/ |
||||
|
|
||||
|
/* Header Block */ |
||||
|
.ui.header { |
||||
|
min-height: 18px; |
||||
|
margin: 15px 0px; |
||||
|
padding: 8px 13px; |
||||
|
|
||||
|
background-color: #FFFFFF; |
||||
|
box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.15); |
||||
|
|
||||
|
line-height: 1.5; |
||||
|
font-size: 13px; |
||||
|
font-weight: bold; |
||||
|
text-shadow: 0px 1px 0px #FFFFFF; |
||||
|
|
||||
|
-webkit-border-radius: 4px 4px 4px 4px; |
||||
|
-moz-border-radius: 4px 4px 4px 4px; |
||||
|
border-radius: 4px 4px 4px 4px; |
||||
|
} |
||||
|
|
||||
|
/* Sub Header (De-emphasized) */ |
||||
|
.ui.sub.header { |
||||
|
margin: 0px; |
||||
|
|
||||
|
border: none; |
||||
|
border-bottom: 1px solid #DADADA; |
||||
|
border-radius: 0px; |
||||
|
|
||||
|
background-color: #FFFFFF; |
||||
|
background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0px, rgba(0, 0, 0, 0.03) 100%); |
||||
|
background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0px, rgba(0, 0, 0, 0.03) 100%); |
||||
|
background: -o-linear-gradient(top, rgba(0, 0, 0, 0) 0px, rgba(0, 0, 0, 0.03) 100%); |
||||
|
background: -ms-linear-gradient(top, rgba(0, 0, 0, 0) 0px, rgba(0, 0, 0, 0.03) 100%); |
||||
|
background: linear-gradient(top, rgba(0, 0, 0, 0) 0px, rgba(0, 0, 0, 0.03) 100%); |
||||
|
|
||||
|
font-size: 14px; |
||||
|
padding: 6px 25px; |
||||
|
color: #55356A; |
||||
|
} |
||||
|
|
||||
|
/* Neutral Header */ |
||||
|
.ui.neutral.block, |
||||
|
.ui.neutral.header { |
||||
|
background-color: #E0E0E0; |
||||
|
background: -webkit-linear-gradient(top, #E0E0E0 0px, #DCDCDC 100%); |
||||
|
background: -moz-linear-gradient(top, #E0E0E0 0px, #DCDCDC 100%); |
||||
|
background: -o-linear-gradient(top, #E0E0E0 0px, #DCDCDC 100%); |
||||
|
background: -ms-linear-gradient(top, #E0E0E0 0px, #DCDCDC 100%); |
||||
|
background: linear-gradient(top, #E0E0E0 0px, #DCDCDC 100%); |
||||
|
border-color: #CCCCCC; |
||||
|
|
||||
|
-webkit-box-shadow: none; |
||||
|
-moz-box-shadow: none; |
||||
|
box-shadow: none; |
||||
|
|
||||
|
text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.7); |
||||
|
} |
||||
|
|
||||
|
/* Attached Header */ |
||||
|
.ui.header.attached, |
||||
|
.ui.header.attached.top { |
||||
|
margin: 0px; |
||||
|
-webkit-border-radius: 4px 4px 0px 0px; |
||||
|
-moz-border-radius: 4px 4px 0px 0px; |
||||
|
border-radius: 4px 4px 0px 0px; |
||||
|
} |
||||
|
.ui.header.attached.bottom { |
||||
|
margin-top: 0px; |
||||
|
-webkit-border-radius: 0px 0px 4px 4px; |
||||
|
-moz-border-radius: 0px 0px 4px 4px; |
||||
|
border-radius: 0px 0px 4px 4px; |
||||
|
} |
||||
|
.ui.header.simple { |
||||
|
border-radius: 0px; |
||||
|
background-color: #FAFAFA; |
||||
|
background-image: none; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
/*-------------- |
||||
|
Resizes |
||||
|
---------------*/ |
||||
|
.ui.header { |
||||
|
font-size: 16px; |
||||
|
} |
||||
|
.ui.header.large { |
||||
|
padding-top: 8px; |
||||
|
padding-bottom: 8px; |
||||
|
font-size: 18px; |
||||
|
} |
||||
|
.ui.header.huge { |
||||
|
padding-top: 8px; |
||||
|
padding-bottom: 8px; |
||||
|
font-size: 22px; |
||||
|
} |
||||
@ -0,0 +1,44 @@ |
|||||
|
/******************************* |
||||
|
Page Segments |
||||
|
*******************************/ |
||||
|
|
||||
|
.ui.segment { |
||||
|
background-color: #FFFFFF; |
||||
|
|
||||
|
-webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); |
||||
|
-moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); |
||||
|
box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); |
||||
|
|
||||
|
padding: 15px; |
||||
|
|
||||
|
-webkit-border-radius: 5px 5px 5px 5px; |
||||
|
-moz-border-radius: 5px 5px 5px 5px; |
||||
|
border-radius: 5px 5px 5px 5px; |
||||
|
|
||||
|
min-height: 50px; |
||||
|
overflow: hidden; |
||||
|
} |
||||
|
|
||||
|
.ui.segment.attached { |
||||
|
margin: -1px 0px; |
||||
|
-moz-border-radius: 0px; |
||||
|
-webkit-border-radius: 0px; |
||||
|
border-radius: 0px; |
||||
|
} |
||||
|
.ui.top.attached.segment { |
||||
|
margin-bottom: -1px; |
||||
|
-moz-border-radius: 5px 5px 0px 0px; |
||||
|
-webkit-border-radius: 5px 5px 0px 0px; |
||||
|
border-radius: 5px 5px 0px 0px; |
||||
|
} |
||||
|
.ui.segment.bottom.attached { |
||||
|
margin-top: -1px; |
||||
|
-moz-border-radius: 0px 0px 5px 5px; |
||||
|
-webkit-border-radius: 0px 0px 5px 5px; |
||||
|
border-radius: 0px 0px 5px 5px; |
||||
|
} |
||||
|
|
||||
|
/* Common Views */ |
||||
|
.ui.segment .list li { |
||||
|
padding: 10px 25px; |
||||
|
} |
||||
Write
Preview
Loading…
Cancel
Save