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

missing files

pull/13/head
Jack Lukic 12 years ago
parent
72b75b8fd6
commit
d231b86a6d
7 changed files with 938 additions and 0 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 260
      docs/form.html
  2. 92
      src/modules/ui/accordion.css
  3. 182
      src/modules/ui/modal.css
  4. 140
      src/modules/ui/nag.css
  5. 122
      src/ui/flat/block.css
  6. 98
      src/ui/flat/header.css
  7. 44
      src/ui/flat/segment.css

260
docs/form.html
View File

@ -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>

92
src/modules/ui/accordion.css
View File

@ -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;
}

182
src/modules/ui/modal.css
View File

@ -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;
}

140
src/modules/ui/nag.css
View File

@ -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;
}

122
src/ui/flat/block.css
View File

@ -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;
}

98
src/ui/flat/header.css
View File

@ -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;
}

44
src/ui/flat/segment.css
View File

@ -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