Browse Source

iteration on docs

Former-commit-id: 623688e65cbe8e47f5a54fda28735df55d64169f
Former-commit-id: b02e7daa61661f699c67b7899e3c7624e5976093
beta
Jack Lukic 12 years ago
parent
commit
37612730d6
  1. 344
      examples/button.html
  2. 22
      examples/example.css
  3. 6
      examples/example.js
  4. BIN
      examples/images/heroku.png
  5. BIN
      examples/images/jira.png
  6. BIN
      examples/images/quirky.png
  7. 18
      examples/module.html
  8. 125
      examples/ui/button.css

344
examples/button.html

@ -7,17 +7,20 @@
<link rel="stylesheet" href="ui/state.js" type="text/css" media="screen" /> <link rel="stylesheet" href="ui/state.js" type="text/css" media="screen" />
<link rel="stylesheet" href="ui/panel.css" type="text/css" media="screen" /> <link rel="stylesheet" href="ui/panel.css" type="text/css" media="screen" />
<link rel="stylesheet" href="ui/button.css" type="text/css" media="screen" /> <link rel="stylesheet" href="ui/button.css" type="text/css" media="screen" />
<link rel="stylesheet" href="ui/form.css" type="text/css" media="screen" />
<link rel="stylesheet" href="ui/icons.css" type="text/css" media="screen" />
<link rel="stylesheet" href="ui/table.css" type="text/css" media="screen" /> <link rel="stylesheet" href="ui/table.css" type="text/css" media="screen" />
<link rel="stylesheet" href="library/sidr.css" type="text/css" media="screen" />
<link rel="stylesheet" href="../src/shape.css" type="text/css" media="screen" /> <link rel="stylesheet" href="../src/shape.css" type="text/css" media="screen" />
<link rel="stylesheet" href="example.css" type="text/css" media="screen" /> <link rel="stylesheet" href="example.css" type="text/css" media="screen" />
<script src="../dependencies/jquery.js" type="text/javascript"></script> <script src="../dependencies/jquery.js" type="text/javascript"></script>
<script src="library/sidr.js" type="text/javascript"></script>
<script src="ui/state.js" type="text/javascript"></script> <script src="ui/state.js" type="text/javascript"></script>
<script src="../dependencies/transform2d.js" type="text/javascript"></script>
<script src="../dependencies/transform3d.js" type="text/javascript"></script>
<script src="../src/shape.js" type="text/javascript"></script> <script src="../src/shape.js" type="text/javascript"></script>
<script src="example.js" type="text/javascript"></script> <script src="example.js" type="text/javascript"></script>
@ -25,170 +28,185 @@
</head> </head>
<body id="example"> <body id="example">
<div class="container">
<h1>Semantic UI Spec</h1>
<p>Semantic is a set of standards designed to make front end development less arbitrary. This is the definition of a button.</p>
<h2>Button</h2>
<h4>The standard button:</h4>
<div class="ui button">Button</div>
<h2>States</h2>
<h4>Can be hovered:</h4>
<div class="ui hover button">Hovered Button</div>
<h4>Can be pressed in:</h4>
<div class="ui down button">Pressed Button</div>
<h4>Can be active:</p>
<div class="ui active button">Active Button</div>
<h4>Can be disabled:</h4>
<div class="ui disabled button">Disabled Button</div>
<h4>Can show a loading indicator:</h4>
<div class="ui loading button">Loading Button</div>
<h4>Can alert to a succesful action:</h4>
<div class="ui success button">Succesful Button</div>
<h4>Can alert user of an error:</h4>
<div class="ui error button">Succesful Button</div>
<h2>Standard Variations</h2>
<h4>Can have different sizes:</h4>
<div class="mini ui button">
Mini
</div>
<div class="tiny ui button">
Tiny
</div>
<div class="small ui button">
Small
</div>
<div class="medium ui button">
Medium
</div>
<div class="big ui button">
Big
</div>
<div class="huge ui button">
Huge
</div>
<div class="massive ui button">
<i class="icon pin"></i>
Massive
</div>
<div class="gigantic ui button">
<i class="icon pin"></i>
Gigantic
</div>
<h4>Can have different colors:</h4>
<div class="ui blue button">Blue Button</div>
<div class="purple ui button">Purple Button</div>
<div class="green ui button">Green Button</div>
<h4>Can fit parent container:</h4>
<div class="fluid ui button">Fits container</div>
<h2>Buttons (Button Groups)</h2>
<h4>Can exist together as groups</h4>
<div class="ui buttons">
<div class="ui button">One</div>
<div class="ui button">Two</div>
<div class="ui button">Three</div>
</div>
<h4>Groups can be vertical</h4>
<div class="ui vertical buttons">
<div class="ui button">One</div>
<div class="ui button">Two</div>
<div class="ui button">Three</div>
</div>
<h4>Groups can be divided evenly to fit parent</h4>
<div class="ui three fluid buttons">
<div class="ui button">One</div>
<div class="ui button">Two</div>
<div class="ui button">Three</div>
</div>
<h4>Singular variations can be applied to groups to infer all elements share the same quality</h4>
<p><b>Blue</b></p>
<div class="blue ui buttons">
<div class="ui button">One</div>
<div class="ui button">Two</div>
<div class="ui button">Three</div>
</div>
<br><br>
<p><b>Large</b></p>
<div class="huge ui buttons">
<div class="ui button">One</div>
<div class="ui button">Two</div>
<div class="ui button">Three</div>
</div>
<h2>Additional Variations</h2>
<h4>Can be formatted to fit just an icon or image:</h4>
<div class="mini icon ui button">
<i class="icon pin"></i>
</div>
<div class="tiny icon ui button">
<i class="icon pin"></i>
</div>
<div class="small icon ui button">
<i class="icon pin"></i>
</div>
<div class="medium icon ui button">
<i class="icon pin"></i>
</div>
<div class="big icon ui button">
<i class="icon pin"></i>
</div>
<div class="huge icon ui button">
<i class="icon pin"></i>
</div>
<div class="massive icon ui button">
<i class="icon pin"></i>
</div>
<div class="gigantic icon ui button">
<i class="icon pin"></i>
</div>
<h4>Can be attached to the top or bottom of other content</h4>
<div class="ui top attached button">Top</div>
<div style="border-left: 1px solid #DDDDDD;border-right: 1px solid #DDDDDD;height:200px;"></div>
<div class="ui bottom attached button">Bottom</div>
<h4>Can be attached to an input field</h4>
<input type="text">
<div class="ui attached button">Search</div>
<h2>States</h2>
<div class="state segment">
<h4>Button States</h4>
<div class="ui button">Normal</div>
<div class="ui button hover">Hover</div>
<div class="ui button down">Down</div>
<div class="ui button loading">Loading</div>
<div class="sidr" id="menu">
<ul>
<li><a href="#">UI Library</a></li>
<li class="active"><a href="#">Button</a></li>
<li><a href="#">Shape</a></li>
</ul>
</div>
<div class="full container">
<div class="ui left attached vertical blue menu buttons">
<div class="ui menu button">Menu</div>
<div class="ui button">Source</div>
</div>
<div class="container">
<h1>Semantic UI Spec</h1>
<p>Semantic is a set of standards designed to make front end development less arbitrary. This is the definition of a button.</p>
<h2>Button</h2>
<h4>The standard button:</h4>
<div class="ui button">Button</div>
<h2>States</h2>
<h4>Can be hovered:</h4>
<div class="ui hover button">Hovered Button</div>
<h4>Can be pressed in:</h4>
<div class="ui down button">Pressed Button</div>
<h4>Can be active:</p>
<div class="ui active button">Active Button</div>
<h4>Can be disabled:</h4>
<div class="ui disabled button">Disabled Button</div>
<h4>Can show a loading indicator:</h4>
<div class="ui loading button">Loading Button</div>
<h4>Can alert to a succesful action:</h4>
<div class="ui success button">Succesful Button</div>
<h4>Can alert user of an error:</h4>
<div class="ui error button">Succesful Button</div>
<h2>Standard Variations</h2>
<h4>Can have different sizes:</h4>
<div class="mini ui button">
Mini
</div>
<div class="tiny ui button">
Tiny
</div>
<div class="small ui button">
Small
</div>
<div class="medium ui button">
Medium
</div>
<div class="big ui button">
Big
</div>
<div class="huge ui button">
Huge
</div>
<div class="massive ui button">
<i class="icon pin"></i>
Massive
</div>
<div class="gigantic ui button">
<i class="icon pin"></i>
Gigantic
</div>
<h4>Can have different colors:</h4>
<div class="ui blue button">Blue Button</div>
<div class="purple ui button">Purple Button</div>
<div class="green ui button">Green Button</div>
<h4>Can fit parent container:</h4>
<div class="fluid ui button">Fits container</div>
<h2>Buttons (Button Groups)</h2>
<h4>Can exist together as groups</h4>
<div class="ui buttons">
<div class="ui button">One</div>
<div class="ui button">Two</div>
<div class="ui button">Three</div>
</div>
<h4>Groups can be vertical</h4>
<div class="ui vertical buttons">
<div class="ui button">One</div>
<div class="ui button">Two</div>
<div class="ui button">Three</div>
</div>
<h4>Groups can be divided evenly to fit parent</h4>
<div class="ui three fluid buttons">
<div class="ui button">One</div>
<div class="ui button">Two</div>
<div class="ui button">Three</div>
</div>
<h4>Singular variations can be applied to groups to infer all elements share the same quality</h4>
<p><b>Blue</b></p>
<div class="blue ui buttons">
<div class="ui button">One</div>
<div class="ui button">Two</div>
<div class="ui button">Three</div>
</div>
<br><br> <br><br>
<div class="ui button disabled">Disabled</div> <p><b>Large</b></p>
<div class="ui button active">Active</div> <div class="huge ui buttons">
<div class="ui button active toggle">Toggled</div> <div class="ui button">One</div>
<div class="ui button error">Error</div> <div class="ui button">Two</div>
<div class="ui button success">Success</div> <div class="ui button">Three</div>
</div> </div>
<h2>Additional Variations</h2>
<h4>Can be formatted to fit just an icon or image:</h4>
<div class="mini icon ui button">
<i class="icon pin"></i>
</div>
<div class="tiny icon ui button">
<i class="icon pin"></i>
</div>
<div class="small icon ui button">
<i class="icon pin"></i>
</div>
<div class="medium icon ui button">
<i class="icon pin"></i>
</div>
<div class="big icon ui button">
<i class="icon pin"></i>
</div>
<div class="huge icon ui button">
<i class="icon pin"></i>
</div>
<div class="massive icon ui button">
<i class="icon pin"></i>
</div>
<div class="gigantic icon ui button">
<i class="icon pin"></i>
</div>
<h4>Can be attached to the top or bottom of other content</h4>
<div class="ui top attached button">Top</div>
<div style="border-left: 1px solid #DDDDDD;border-right: 1px solid #DDDDDD;height:200px;"></div>
<div class="ui bottom attached button">Bottom</div>
<h4>Can be attached to an input field</h4>
<div class="ui form">
<input type="text">
<div class="ui attached button">Search</div>
</div>
<h2>States</h2>
<div class="state segment">
<h4>Button States</h4>
<div class="ui button">Normal</div>
<div class="ui button hover">Hover</div>
<div class="ui button down">Down</div>
<div class="ui button loading">Loading</div>
<br><br>
<div class="ui button disabled">Disabled</div>
<div class="ui button active">Active</div>
<div class="ui button active toggle">Toggled</div>
<div class="ui button error">Error</div>
<div class="ui button success">Success</div>
</div>
</div> </div>
</body> </body>
</html> </html>

22
examples/example.css

@ -38,16 +38,20 @@ a:hover {
#example h1, #example h1,
#example h2, #example h2,
#example h3, #example h3,
#example h4,
#example h5,
#example a, #example a,
#example .ui { #example .ui {
font-family: "Neutraface Bold", "Helvetica Neue", "Arial", sans-serif; font-family: "Neutraface Bold", "Helvetica Neue", "Arial", sans-serif;
font-weight: normal
} }
/* text and headers */ /* text and headers */
#example h1 { #example h1 {
margin: 20px 0px 20px; margin: 50px 0px 20px;
padding-bottom: 5px;
border-bottom: 1px solid #DDDDDD;
}
#example h1:first-child {
margin-top: 20px;
} }
#example h2 { #example h2 {
margin: 40px 0px 20px; margin: 40px 0px 20px;
@ -69,7 +73,8 @@ a:hover {
padding: 3px 5px; padding: 3px 5px;
} }
#example pre code { #example pre code {
border: none;
padding: 0px;
} }
#example p { #example p {
margin: 10px 0px; margin: 10px 0px;
@ -101,12 +106,21 @@ a:hover {
width: 700px; width: 700px;
margin: 0px auto; margin: 0px auto;
} }
#example .full.container {
position: relative;
width: 1000px;
}
#example .shortcuts { #example .shortcuts {
float: right; float: right;
clear: both; clear: both;
} }
#example .menu.buttons {
position: fixed;
}
/******************************* /*******************************

6
examples/example.js

@ -77,6 +77,12 @@ shape.ready = function() {
.on('click', handler.changeShape) .on('click', handler.changeShape)
; ;
$('.menu.button')
.sidr({
name: 'menu'
})
;
}; };

BIN
examples/images/heroku.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 5.5 KiB

BIN
examples/images/jira.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 13 KiB

BIN
examples/images/quirky.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 6.8 KiB

18
examples/module.html

@ -41,7 +41,7 @@
<p>Semantic has two parts. The <a href="#standard">semantic standard</a>, and the <a href="#library">semantic library</a>.</b></p> <p>Semantic has two parts. The <a href="#standard">semantic standard</a>, and the <a href="#library">semantic library</a>.</b></p>
<a name="standard"></a> <a name="standard"></a>
<h2>The standard</h2> <h1>The standard</h1>
<p>The semantic standard attempts to create a standard design pattern for describing static UI components (UI elements), and dynamic UI components or behavioral definitions (Javascript modules).</p> <p>The semantic standard attempts to create a standard design pattern for describing static UI components (UI elements), and dynamic UI components or behavioral definitions (Javascript modules).</p>
<p><b>Static elements</b>: menus, columns, grids, tables, buttons, forms.</p> <p><b>Static elements</b>: menus, columns, grids, tables, buttons, forms.</p>
@ -50,20 +50,20 @@
<h2>Defining UI</h2> <h2>Defining UI</h2>
<p>Semantic creates an exchange format for UI, by defining a consistent HTML structure and set of class names for representing UI elements.</p> <p>Semantic creates an exchange format for UI, by defining a consistent HTML structure and set of class names for representing UI elements.</p>
<p>Sharing a structural standard for UI releases the burden from developers at being a naming authorities in their own projects.</p> <p>Sharing a common standard for UI releases the burden from developers at being a naming authorities in their own projects.</p>
<p>If together as a community we can define a standard for interface elements, we can share designs without having to modify our site's code to match the arbitrary specifications of a library, and interface designs can be freely exchanged between projects and teams.</p>
<p>If, as a community we can agree on consistent UI definitions, then we can freely share variations of element designs without having to modify our site's codebase to match any declarative expectations by other developers, and interface designs can be freely exchanged between projects and teams.</p>
<h3>What's in an element</h3> <h3>What's in an element</h3>
<p><b>UI elements definitions are made of 4 parts</b>: <p><b>UI elements definitions are made of 4 parts</b>:
<ol> <ol>
<li>An ideal form of an element (A bunny has two long ears and is furry)</li> <li>A prototype form of an element (A bunny has two long ears and is furry)</li>
<li>A list of states which the element can exist. (A bunny can either be hopping, eating or sitting still)</li>
<li>A definition of the relationship between a plural and singular instance of an element (Three white bunnies are each white)</li> <li>A definition of the relationship between a plural and singular instance of an element (Three white bunnies are each white)</li>
<li>A definition of possible variations of the element (A bunny can be large or small and can be spotted or fuzzy)</li> <li>A definition of possible variations of the element (A bunny can be large or small and can be spotted or fuzzy)</li>
<li>A list of states which the element can exist. (A bunny can either be hopping, eating or sitting still)</li>
</ol> </ol>
<p>UI elements can be thought of as nouns, and variations as adjectives. Variations are written in a way which only describe the innate features of that variation in the context of the noun. For example, in english, a large planet has a different meaning than a large chair, but both are the same variant "largeness".</p> <p>UI elements can be thought of as nouns, and variations as adjectives. Variations are written so to only describe the innate features of that variation, and must account for the differences when declared along-side other variations.</p>
<p>Variations can be used together without negating each other unless used in a pardoxical way (A large small bunny).</p> <p>For example, in English, a large planet has a different meaning than a large chair, and would require different specific contextual definitions, but both are the same variant "largeness" to the person using the word.</p>
<p>Variations can be used together without negating each other unless used in a paradoxical way (A large small bunny).</p>
<h3>I don't know what you're talking about just show me the code</h3> <h3>I don't know what you're talking about just show me the code</h3>
<p>If you'd like to shortcut any more explanation, check out the standard definition for a UI button for a live example.</p> <p>If you'd like to shortcut any more explanation, check out the standard definition for a UI button for a live example.</p>
@ -95,7 +95,7 @@
</div> </div>
<a name="library"></a> <a name="library"></a>
<h2>The Libraries</h2> <h1>The Libraries</h1>
<p>To semantic library is a set of UI elements and javascript modules that provides an example implementation of the Semantic standard. The purpose is to be useful in their own right for developers, but also to provide a guide for how the standard can be used.</p> <p>To semantic library is a set of UI elements and javascript modules that provides an example implementation of the Semantic standard. The purpose is to be useful in their own right for developers, but also to provide a guide for how the standard can be used.</p>
<h3>The UI Library</h3> <h3>The UI Library</h3>
<ul class="list"> <ul class="list">

125
examples/ui/button.css

@ -341,7 +341,6 @@
.ui.button.toggle.active.hover.down { .ui.button.toggle.active.hover.down {
border: 1px solid #77CF66; border: 1px solid #77CF66;
text-shadow: 0px -1px 0px rgba(255, 255, 255, 0.5);
background-color: #B6F3A2; background-color: #B6F3A2;
color: #21A627; color: #21A627;
@ -365,6 +364,7 @@ input + .ui.attached.button {
margin: 0px 0px 0px -15px; margin: 0px 0px 0px -15px;
height: 14px; height: 14px;
padding: 8px 15px; padding: 8px 15px;
border: 1px solid #D0D0D0;
-webkit-box-shadow: none; -webkit-box-shadow: none;
-moz-box-shadow: none; -moz-box-shadow: none;
@ -373,6 +373,8 @@ input + .ui.attached.button {
-webkit-border-radius: 0px 5px 5px 0px; -webkit-border-radius: 0px 5px 5px 0px;
-moz-border-radius: 0px 5px 5px 0px; -moz-border-radius: 0px 5px 5px 0px;
border-radius: 0px 5px 5px 0px; border-radius: 0px 5px 5px 0px;
vertical-align: top;
} }
.ui.attached.button.loading, .ui.attached.button.loading,
.ui.attached.button.loading.hover { .ui.attached.button.loading.hover {
@ -427,7 +429,6 @@ input + .ui.attached.button {
background: -ms-linear-gradient(top, #E9E9E9 0%, #F0F0F0 100%); background: -ms-linear-gradient(top, #E9E9E9 0%, #F0F0F0 100%);
background: linear-gradient(top, #E9E9E9 0%, #F0F0F0 100%); background: linear-gradient(top, #E9E9E9 0%, #F0F0F0 100%);
text-shadow: 0px -1px 0px rgba(255, 255, 255, 0.3);
-webkit-box-shadow: -webkit-box-shadow:
0px 1px 6px -3px rgba(0, 0, 0, 0.3) inset 0px 1px 6px -3px rgba(0, 0, 0, 0.3) inset
@ -457,7 +458,6 @@ input + .ui.attached.button {
-moz-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2) inset; -moz-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2) inset;
box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2) inset; box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2) inset;
text-shadow: none;
} }
.ui.buttons .button.active.hover, .ui.buttons .button.active.hover,
.ui.buttons .button.active.hover a, .ui.buttons .button.active.hover a,
@ -511,13 +511,13 @@ input + .ui.attached.button {
/* standard */ /* standard */
background: url(/images/ui/throbber-blue-tiny.gif) no-repeat 50% 50%; background: url(/images/ui/throbber-blue-tiny.gif) no-repeat 50% 50%;
/* css 3 multi image */ /* css 3 multi image */
background-image: url(/images/ui/throbber-blue-tiny.gif), -webkit-linear-gradient(top, #22C1FC 0%, #1995FB 100%); background-image: url(/images/ui/throbber-blue-tiny.gif);
background-image: url(/images/ui/throbber-blue-tiny.gif), -moz-linear-gradient(top, #22C1FC 0%, #1995FB 100%); background-image: url(/images/ui/throbber-blue-tiny.gif);
background-image: url(/images/ui/throbber-blue-tiny.gif), -o-linear-gradient(top, #22C1FC 0%, #1995FB 100%); background-image: url(/images/ui/throbber-blue-tiny.gif);
background-image: url(/images/ui/throbber-blue-tiny.gif), -ms-linear-gradient(top, #22C1FC 0%, #1995FB 100%); background-image: url(/images/ui/throbber-blue-tiny.gif);
background-image: url(/images/ui/throbber-blue-tiny.gif), linear-gradient(top, #22C1FC 0%, #1995FB 100%); background-image: url(/images/ui/throbber-blue-tiny.gif);
background-position: 50% 50%, 0px 0px; background-position: 50% 50%, 0px 0px;
background-repeat: no-repeat, repeat; background-repeat: no-repeat;
-moz-border-radius: 3px; -moz-border-radius: 3px;
-webkit-border-radius: 3px; -webkit-border-radius: 3px;
@ -534,44 +534,44 @@ input + .ui.attached.button {
/* standard */ /* standard */
background: url(/images/ui/throbber-tiny.gif) no-repeat 50% 50%; background: url(/images/ui/throbber-tiny.gif) no-repeat 50% 50%;
/* css 3 multi image */ /* css 3 multi image */
background-image: url(/images/ui/throbber-tiny.gif), -webkit-linear-gradient(top, #FFFFFF 0%, #E6E6E6 100%); background-image: url(/images/ui/throbber-tiny.gif);
background-image: url(/images/ui/throbber-tiny.gif), -moz-linear-gradient(top, #FFFFFF 0%, #E6E6E6 100%); background-image: url(/images/ui/throbber-tiny.gif);
background-image: url(/images/ui/throbber-tiny.gif), -o-linear-gradient(top, #FFFFFF 0%, #E6E6E6 100%); background-image: url(/images/ui/throbber-tiny.gif);
background-image: url(/images/ui/throbber-tiny.gif), -ms-linear-gradient(top, #FFFFFF 0%, #E6E6E6 100%); background-image: url(/images/ui/throbber-tiny.gif);
background-image: url(/images/ui/throbber-tiny.gif), linear-gradient(top, #FFFFFF 0%, #E6E6E6 100%); background-image: url(/images/ui/throbber-tiny.gif);
background-position: 50% 50%, 0px 0px; background-position: 50% 50%, 0px 0px;
background-repeat: no-repeat, repeat; background-repeat: no-repeat;
} }
/* resizes */ /* resizes */
/* blue */ /* blue */
.ui.huge.button.loading:after { .ui.huge.button.loading:after {
background-image: url(/images/ui/throbber-blue-small.gif), -webkit-linear-gradient(top, #22C1FC 0%, #1995FB 100%); background-image: url(/images/ui/throbber-blue-small.gif);
background-image: url(/images/ui/throbber-blue-small.gif), -moz-linear-gradient(top, #22C1FC 0%, #1995FB 100%); background-image: url(/images/ui/throbber-blue-small.gif);
background-image: url(/images/ui/throbber-blue-small.gif), -o-linear-gradient(top, #22C1FC 0%, #1995FB 100%); background-image: url(/images/ui/throbber-blue-small.gif);
background-image: url(/images/ui/throbber-blue-small.gif), -ms-linear-gradient(top, #22C1FC 0%, #1995FB 100%); background-image: url(/images/ui/throbber-blue-small.gif);
background-image: url(/images/ui/throbber-blue-small.gif), linear-gradient(top, #22C1FC 0%, #1995FB 100%); background-image: url(/images/ui/throbber-blue-small.gif);
} }
.ui.massive.buttons .button.loading:after, .ui.massive.buttons .button.loading:after,
.ui.gigantic.buttons .button.loading:after, .ui.gigantic.buttons .button.loading:after,
.ui.massive.button.loading:after, .ui.massive.button.loading:after,
.ui.gigantic.button.loading:after { .ui.gigantic.button.loading:after {
background-image: url(/images/ui/throbber-blue-medium.gif), -webkit-linear-gradient(top, #22C1FC 0%, #1995FB 100%); background-image: url(/images/ui/throbber-blue-medium.gif);
background-image: url(/images/ui/throbber-blue-medium.gif), -moz-linear-gradient(top, #22C1FC 0%, #1995FB 100%); background-image: url(/images/ui/throbber-blue-medium.gif);
background-image: url(/images/ui/throbber-blue-medium.gif), -o-linear-gradient(top, #22C1FC 0%, #1995FB 100%); background-image: url(/images/ui/throbber-blue-medium.gif);
background-image: url(/images/ui/throbber-blue-medium.gif), -ms-linear-gradient(top, #22C1FC 0%, #1995FB 100%); background-image: url(/images/ui/throbber-blue-medium.gif);
background-image: url(/images/ui/throbber-blue-medium.gif), linear-gradient(top, #22C1FC 0%, #1995FB 100%); background-image: url(/images/ui/throbber-blue-medium.gif);
} }
/* grey */ /* grey */
.ui.huge.grey.button.loading:after, .ui.huge.grey.button.loading:after,
.ui.huge.button.loading.active:after { .ui.huge.button.loading.active:after {
background-image: url(/images/ui/throbber-small.gif), -webkit-linear-gradient(top, #FFFFFF 0%, #E6E6E6 100%); background-image: url(/images/ui/throbber-small.gif);
background-image: url(/images/ui/throbber-small.gif), -moz-linear-gradient(top, #FFFFFF 0%, #E6E6E6 100%); background-image: url(/images/ui/throbber-small.gif);
background-image: url(/images/ui/throbber-small.gif), -o-linear-gradient(top, #FFFFFF 0%, #E6E6E6 100%); background-image: url(/images/ui/throbber-small.gif);
background-image: url(/images/ui/throbber-small.gif), -ms-linear-gradient(top, #FFFFFF 0%, #E6E6E6 100%); background-image: url(/images/ui/throbber-small.gif);
background-image: url(/images/ui/throbber-small.gif), linear-gradient(top, #FFFFFF 0%, #E6E6E6 100%); background-image: url(/images/ui/throbber-small.gif);
} }
.ui.massive.grey.buttons .button.loading:after, .ui.massive.grey.buttons .button.loading:after,
.ui.gigantic.grey.buttons .button.loading:after, .ui.gigantic.grey.buttons .button.loading:after,
@ -581,11 +581,11 @@ input + .ui.attached.button {
.ui.gigantic.grey.buttons .button.loading.active:after, .ui.gigantic.grey.buttons .button.loading.active:after,
.ui.massive.button.loading.active:after, .ui.massive.button.loading.active:after,
.ui.gigantic.button.loading.active:after { .ui.gigantic.button.loading.active:after {
background-image: url(/images/ui/throbber-medium.gif), -webkit-linear-gradient(top, #FFFFFF 0%, #E6E6E6 100%); background-image: url(/images/ui/throbber-medium.gif);
background-image: url(/images/ui/throbber-medium.gif), -moz-linear-gradient(top, #FFFFFF 0%, #E6E6E6 100%); background-image: url(/images/ui/throbber-medium.gif);
background-image: url(/images/ui/throbber-medium.gif), -o-linear-gradient(top, #FFFFFF 0%, #E6E6E6 100%); background-image: url(/images/ui/throbber-medium.gif);
background-image: url(/images/ui/throbber-medium.gif), -ms-linear-gradient(top, #FFFFFF 0%, #E6E6E6 100%); background-image: url(/images/ui/throbber-medium.gif);
background-image: url(/images/ui/throbber-medium.gif), linear-gradient(top, #FFFFFF 0%, #E6E6E6 100%); background-image: url(/images/ui/throbber-medium.gif);
} }
@ -625,6 +625,9 @@ input + .ui.attached.button {
content: ''; content: '';
/* standard */ /* standard */
background: #EE141D url(/images/ui/button-error.gif) no-repeat 50% 50%; background: #EE141D url(/images/ui/button-error.gif) no-repeat 50% 50%;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
} }
.ui.button.success, .ui.button.success,
@ -632,7 +635,6 @@ input + .ui.attached.button {
.ui.button.success.down { .ui.button.success.down {
background-color: #59B94B; background-color: #59B94B;
color: #FFFFFF; color: #FFFFFF;
text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.5);
border-color: #588D0F; border-color: #588D0F;
} }
@ -702,17 +704,6 @@ input + .ui.attached.button {
display: block; display: block;
float: none; float: none;
} }
.ui.buttons.vertical .button,
.ui.buttons.vertical .mini.button,
.ui.buttons.vertical .tiny.button,
.ui.buttons.vertical .small.button,
.ui.buttons.vertical .massive.button,
.ui.buttons.vertical .huge.button,
.ui.buttons.vertical .gigantic.button {
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
border-radius: 0px;
}
.ui.buttons.vertical .button:first-child, .ui.buttons.vertical .button:first-child,
.ui.buttons.vertical .mini.button:first-child, .ui.buttons.vertical .mini.button:first-child,
.ui.buttons.vertical .tiny.button:first-child, .ui.buttons.vertical .tiny.button:first-child,
@ -1002,6 +993,46 @@ input + .ui.attached.button {
-moz-border-radius: 0px 0px 4px 0px; -moz-border-radius: 0px 0px 4px 0px;
border-radius: 0px 0px 4px 0px; border-radius: 0px 0px 4px 0px;
} }
/* Left Side */
.left.attached.ui.buttons {
margin-left: -1px;
-webkit-border-radius: 0px 4px 4px 0px;
-moz-border-radius: 0px 4px 4px 0px;
border-radius: 0px 4px 4px 0px;
}
.left.attached.ui.buttons .button:first-child {
margin-left: -1px;
-webkit-border-radius: 0px 4px 0px 0px;
-moz-border-radius: 0px 4px 0px 0px;
border-radius: 0px 4px 0px 0px;
}
.left.attached.ui.buttons .button:last-child {
margin-left: -1px;
-webkit-border-radius: 0px 0px 4px 0px;
-moz-border-radius: 0px 0px 4px 0px;
border-radius: 0px 0px 4px 0px;
}
/* Right Side */
.right.attached.ui.buttons,
.right.attached.ui.buttons .button {
margin-right: -1px;
-webkit-border-radius: 4px 0px 0px 4px;
-moz-border-radius: 4px 0px 0px 4px;
border-radius: 4px 0px 0px 4px;
}
.right.attached.ui.buttons .button:first-child {
margin-left: -1px;
-webkit-border-radius: 4px 0px 0px 0px;
-moz-border-radius: 4px 0px 0px 0px;
border-radius: 4px 0px 0px 0px;
}
.right.attached.ui.buttons .button:last-child {
margin-left: -1px;
-webkit-border-radius: 0px 0px 0px 4px;
-moz-border-radius: 0px 0px 0px 4px;
border-radius: 0px 0px 0px 4px;
}
/* Fluid */ /* Fluid */

Loading…
Cancel
Save