Browse Source

language changes, sidebar fixes

pull/13/head
jlukic 11 years ago
parent
commit
8ae48bba2c
8 changed files with 137 additions and 146 deletions
  1. 72
      build/uncompressed/elements/button.css
  2. 12
      build/uncompressed/modules/sidebar.css
  3. 10
      node/src/documents/introduction.html
  4. 18
      node/src/documents/modules/sidebar.html
  5. 72
      node/src/files/components/semantic/elements/button.css
  6. 12
      node/src/files/components/semantic/modules/sidebar.css
  7. 75
      src/elements/button.less
  8. 12
      src/modules/sidebar.less

72
build/uncompressed/elements/button.css

@ -796,114 +796,114 @@
/*--- Black ---*/
.ui.black.buttons .button,
.ui.black.button {
background-color: #5C6166 !important;
color: #FFFFFF !important;
background-color: #5C6166;
color: #FFFFFF;
text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.1);
}
.ui.black.buttons .button:hover,
.ui.black.button:hover {
background-color: #4C4C4C !important;
color: #FFFFFF !important;
background-color: #4C4C4C;
color: #FFFFFF;
}
.ui.black.buttons .button:active,
.ui.black.button:active {
background-color: #333333 !important;
color: #FFFFFF !important;
background-color: #333333;
color: #FFFFFF;
}
/*--- Green ---*/
.ui.green.buttons .button,
.ui.green.button {
background-color: #5BBD72 !important;
color: #FFFFFF !important;
background-color: #5BBD72;
color: #FFFFFF;
text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.1);
}
.ui.green.buttons .button:hover,
.ui.green.button:hover,
.ui.green.buttons .active.button,
.ui.green.button.active {
background-color: #58cb73 !important;
color: #FFFFFF !important;
background-color: #58cb73;
color: #FFFFFF;
}
.ui.green.buttons .button:active,
.ui.green.button:active {
background-color: #4CB164 !important;
color: #FFFFFF !important;
background-color: #4CB164;
color: #FFFFFF;
}
/*--- Red ---*/
.ui.red.buttons .button,
.ui.red.button {
background-color: #D95C5C !important;
color: #FFFFFF !important;
background-color: #D95C5C;
color: #FFFFFF;
text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.1);
}
.ui.red.buttons .button:hover,
.ui.red.button:hover,
.ui.red.buttons .active.button,
.ui.red.button.active {
background-color: #E75859 !important;
color: #FFFFFF !important;
background-color: #E75859;
color: #FFFFFF;
}
.ui.red.buttons .button:active,
.ui.red.button:active {
background-color: #D24B4C !important;
color: #FFFFFF !important;
background-color: #D24B4C;
color: #FFFFFF;
}
/*--- Blue ---*/
.ui.blue.buttons .button,
.ui.blue.button {
background-color: #6ECFF5 !important;
color: #FFFFFF !important;
background-color: #6ECFF5;
color: #FFFFFF;
text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.1);
}
.ui.blue.buttons .button:hover,
.ui.blue.button:hover,
.ui.blue.buttons .active.button,
.ui.blue.button.active {
background-color: #1AB8F3 !important;
color: #FFFFFF !important;
background-color: #1AB8F3;
color: #FFFFFF;
}
.ui.blue.buttons .button:active,
.ui.blue.button:active {
background-color: #0AA5DF !important;
color: #FFFFFF !important;
background-color: #0AA5DF;
color: #FFFFFF;
}
/*--- Purple ---*/
.ui.purple.buttons .button,
.ui.purple.button {
background-color: #564F8A !important;
color: #FFFFFF !important;
background-color: #564F8A;
color: #FFFFFF;
text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.1);
}
.ui.purple.buttons .button:hover,
.ui.purple.button:hover,
.ui.purple.buttons .active.button,
.ui.purple.button.active {
background-color: #3E3773 !important;
color: #FFFFFF !important;
background-color: #3E3773;
color: #FFFFFF;
}
.ui.purple.buttons .button:active,
.ui.purple.button:active {
background-color: #2E2860 !important;
color: #FFFFFF !important;
background-color: #2E2860;
color: #FFFFFF;
}
/*--- Teal ---*/
.ui.teal.buttons .button,
.ui.teal.button {
background-color: #00B5AD !important;
color: #FFFFFF !important;
background-color: #00B5AD;
color: #FFFFFF;
text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.1);
}
.ui.teal.buttons .button:hover,
.ui.teal.button:hover,
.ui.teal.buttons .active.button,
.ui.teal.button.active {
background-color: #009A93 !important;
color: #FFFFFF !important;
background-color: #009A93;
color: #FFFFFF;
}
.ui.teal.buttons .button:active,
.ui.teal.button:active {
background-color: #00847E !important;
color: #FFFFFF !important;
background-color: #00847E;
color: #FFFFFF;
}
/*---------------
Positive

12
build/uncompressed/modules/sidebar.css

@ -79,14 +79,14 @@ body {
Variations
*******************************/
.ui.floating.sidebar {
-webkit-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.2);
box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 3px 0px 3px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 3px 0px 3px rgba(0, 0, 0, 0.2);
box-shadow: 3px 0px 3px rgba(0, 0, 0, 0.2);
}
.ui.right.floating.sidebar {
-webkit-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.2);
box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: -3px 0px 3px rgba(0, 0, 0, 0.2);
-moz-box-shadow: -3px 0px 3px rgba(0, 0, 0, 0.2);
box-shadow: -3px 0px 3px rgba(0, 0, 0, 0.2);
}
.ui.top.floating.sidebar {
-webkit-box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.2);

10
node/src/documents/introduction.html

@ -19,12 +19,6 @@ type : 'Semantic'
<a class="item">Getting Started</a>
</div>
</div>
<h2 class="ui dividing header">Philosophy</h2>
<h3>The right tool for the job</h3>
<p>Languages are particularly good at describing physical scenes and concrete behavior, but are particularly poor at describing complex behavior or abstractions. For example, try explaining how a watch works in English, or how you feel about love to your significant other. </p>
<p>Programming languages, on the other hand, are particularly good at describing complex behavior, like a watch, but not as concise at describing physical scenes and concrete behavior.</p>
<p>User interfaces are much more like the first category, scenes made of virtual components, but still use languages to describe components that are built like other programming languages.</p>
<p>Semantic seeks to bridge that gap and bring the best features of natural languages to interface design, to make creating and developing UI more simple and succint.</p>
<h2 class="ui dividing header">What's Different</h2>
@ -40,10 +34,10 @@ type : 'Semantic'
<p>In Semantic element definitions can be expressed in groups have shared atttributes like size, color, type avoiding repetitive declarations</p>
<h3 class="ui header">Portable and self-contained.</h3>
<p>Interface libraries shouldnt be walled gardens. UI components in Semantic are all self contained, that define optional couplings with other components. That means choosing to use semantic doesn't mean adopting an entire framework, or rewriting your codebase. Pick and choose what you want.</p>
<p>UI components in Semantic can be downloaded individually, defining only optional couplings with other components. That means choosing to use semantic doesn't mean adopting an entire framework, or rewriting your codebase. Pick and choose what you want.</p>
<h3 class="ui header">Shared language, different implementations</h3>
<p>Semantic defines a relationship between UI element qualities and class names. Describing your site's content using a common language allows other developers to create UI definitions to match one shared vocabulary. This means you can redesign your website without retooling your html. Simply redefine the look and feel of your ui.</p>
<p>Semantic defines a relationship between UI element qualities and class names. Describing your site's content using a common language allows other developers to create UI definitions to match one shared vocabulary. This means you can redesign your website without retooling your html. Simply alter the look and feel of your UI using a different definition.</p>
<h3 class="ui header">Only the important stuff</h3>
<p>Instead of giving every possible variation, or behavior under the sun, element definitions are designed to be a starting off point. No oversized downloads, or kitchen sink, just the stuff to get you started.</p>

18
node/src/documents/modules/sidebar.html

@ -27,19 +27,19 @@ type : 'UI Module'
</div>
</div>
</div>
<div class="ui right sidebar vertical menu">
<div class="ui right sidebar inverted red vertical menu">
<div class="header item">Right Sidebar menu</div>
<a class="item">One</a>
<a class="item">Two</a>
<a class="item">Three</a>
</div>
<div class="ui top sidebar menu">
<div class="ui top inverted teal sidebar menu">
<div class="header item">Top Sidebar menu</div>
<a class="item">One</a>
<a class="item">Two</a>
<a class="item">Three</a>
</div>
<div class="ui bottom sidebar menu">
<div class="ui bottom inverted sidebar menu">
<div class="header item">Bottom Sidebar menu</div>
<a class="item">One</a>
<a class="item">Two</a>
@ -141,7 +141,7 @@ type : 'UI Module'
<p>You can also however specify what action should occur when the element is clicked</p>
<div class="code" data-demo="true">
$('.demo.sidebar')
.sidebar('attach events', '.open.button', 'open')
.sidebar('attach events', '.open.button', 'show')
;
$('.open.button')
.removeClass('disabled')
@ -190,15 +190,15 @@ type : 'UI Module'
.removeClass('disabled')
;
</div>
<div class="ui icon buttons">
<div class="ui buttons">
<div class="ui disabled direction button" data-direction="top">
<i class="up arrow icon"></i>
Top
</div>
<div class="ui disabled direction button" data-direction="right">
<i class="right arrow icon"></i>
Right
</div>
<div class="ui disabled direction button" data-direction="bottom">
<i class="down arrow icon"></i>
Bottom
</div>
</div>
</div>
@ -219,7 +219,7 @@ type : 'UI Module'
All the following behaviors can be called using the syntax <code>$('.foo').sidebar('behavior name')</code>
<table class="ui definition table segment">
<table class="ui definition celled table segment">
<tr>
<td>attach events</td>
<td>Attaches sidebar action to given selector</td>

72
node/src/files/components/semantic/elements/button.css

@ -796,114 +796,114 @@
/*--- Black ---*/
.ui.black.buttons .button,
.ui.black.button {
background-color: #5C6166 !important;
color: #FFFFFF !important;
background-color: #5C6166;
color: #FFFFFF;
text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.1);
}
.ui.black.buttons .button:hover,
.ui.black.button:hover {
background-color: #4C4C4C !important;
color: #FFFFFF !important;
background-color: #4C4C4C;
color: #FFFFFF;
}
.ui.black.buttons .button:active,
.ui.black.button:active {
background-color: #333333 !important;
color: #FFFFFF !important;
background-color: #333333;
color: #FFFFFF;
}
/*--- Green ---*/
.ui.green.buttons .button,
.ui.green.button {
background-color: #5BBD72 !important;
color: #FFFFFF !important;
background-color: #5BBD72;
color: #FFFFFF;
text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.1);
}
.ui.green.buttons .button:hover,
.ui.green.button:hover,
.ui.green.buttons .active.button,
.ui.green.button.active {
background-color: #58cb73 !important;
color: #FFFFFF !important;
background-color: #58cb73;
color: #FFFFFF;
}
.ui.green.buttons .button:active,
.ui.green.button:active {
background-color: #4CB164 !important;
color: #FFFFFF !important;
background-color: #4CB164;
color: #FFFFFF;
}
/*--- Red ---*/
.ui.red.buttons .button,
.ui.red.button {
background-color: #D95C5C !important;
color: #FFFFFF !important;
background-color: #D95C5C;
color: #FFFFFF;
text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.1);
}
.ui.red.buttons .button:hover,
.ui.red.button:hover,
.ui.red.buttons .active.button,
.ui.red.button.active {
background-color: #E75859 !important;
color: #FFFFFF !important;
background-color: #E75859;
color: #FFFFFF;
}
.ui.red.buttons .button:active,
.ui.red.button:active {
background-color: #D24B4C !important;
color: #FFFFFF !important;
background-color: #D24B4C;
color: #FFFFFF;
}
/*--- Blue ---*/
.ui.blue.buttons .button,
.ui.blue.button {
background-color: #6ECFF5 !important;
color: #FFFFFF !important;
background-color: #6ECFF5;
color: #FFFFFF;
text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.1);
}
.ui.blue.buttons .button:hover,
.ui.blue.button:hover,
.ui.blue.buttons .active.button,
.ui.blue.button.active {
background-color: #1AB8F3 !important;
color: #FFFFFF !important;
background-color: #1AB8F3;
color: #FFFFFF;
}
.ui.blue.buttons .button:active,
.ui.blue.button:active {
background-color: #0AA5DF !important;
color: #FFFFFF !important;
background-color: #0AA5DF;
color: #FFFFFF;
}
/*--- Purple ---*/
.ui.purple.buttons .button,
.ui.purple.button {
background-color: #564F8A !important;
color: #FFFFFF !important;
background-color: #564F8A;
color: #FFFFFF;
text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.1);
}
.ui.purple.buttons .button:hover,
.ui.purple.button:hover,
.ui.purple.buttons .active.button,
.ui.purple.button.active {
background-color: #3E3773 !important;
color: #FFFFFF !important;
background-color: #3E3773;
color: #FFFFFF;
}
.ui.purple.buttons .button:active,
.ui.purple.button:active {
background-color: #2E2860 !important;
color: #FFFFFF !important;
background-color: #2E2860;
color: #FFFFFF;
}
/*--- Teal ---*/
.ui.teal.buttons .button,
.ui.teal.button {
background-color: #00B5AD !important;
color: #FFFFFF !important;
background-color: #00B5AD;
color: #FFFFFF;
text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.1);
}
.ui.teal.buttons .button:hover,
.ui.teal.button:hover,
.ui.teal.buttons .active.button,
.ui.teal.button.active {
background-color: #009A93 !important;
color: #FFFFFF !important;
background-color: #009A93;
color: #FFFFFF;
}
.ui.teal.buttons .button:active,
.ui.teal.button:active {
background-color: #00847E !important;
color: #FFFFFF !important;
background-color: #00847E;
color: #FFFFFF;
}
/*---------------
Positive

12
node/src/files/components/semantic/modules/sidebar.css

@ -79,14 +79,14 @@ body {
Variations
*******************************/
.ui.floating.sidebar {
-webkit-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.2);
box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 3px 0px 3px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 3px 0px 3px rgba(0, 0, 0, 0.2);
box-shadow: 3px 0px 3px rgba(0, 0, 0, 0.2);
}
.ui.right.floating.sidebar {
-webkit-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.2);
box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: -3px 0px 3px rgba(0, 0, 0, 0.2);
-moz-box-shadow: -3px 0px 3px rgba(0, 0, 0, 0.2);
box-shadow: -3px 0px 3px rgba(0, 0, 0, 0.2);
}
.ui.top.floating.sidebar {
-webkit-box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.2);

75
src/elements/button.less

@ -976,129 +976,126 @@
}
/*-------------------
Colors
--------------------*/
/*--- Black ---*/
.ui.black.buttons .button,
.ui.black.button {
background-color: #5C6166 !important;
color: #FFFFFF !important;
background-color: #5C6166;
color: #FFFFFF;
text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.1);
}
.ui.black.buttons .button:hover,
.ui.black.button:hover {
background-color: #4C4C4C !important;
color: #FFFFFF !important;
background-color: #4C4C4C;
color: #FFFFFF;
}
.ui.black.buttons .button:active,
.ui.black.button:active {
background-color: #333333 !important;
color: #FFFFFF !important;
background-color: #333333;
color: #FFFFFF;
}
/*--- Green ---*/
.ui.green.buttons .button,
.ui.green.button {
background-color: #5BBD72 !important;
color: #FFFFFF !important;
background-color: #5BBD72;
color: #FFFFFF;
text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.1);
}
.ui.green.buttons .button:hover,
.ui.green.button:hover,
.ui.green.buttons .active.button,
.ui.green.button.active {
background-color: #58cb73 !important;
color: #FFFFFF !important;
background-color: #58cb73;
color: #FFFFFF;
}
.ui.green.buttons .button:active,
.ui.green.button:active {
background-color: #4CB164 !important;
color: #FFFFFF !important;
background-color: #4CB164;
color: #FFFFFF;
}
/*--- Red ---*/
.ui.red.buttons .button,
.ui.red.button {
background-color: #D95C5C !important;
color: #FFFFFF !important;
background-color: #D95C5C;
color: #FFFFFF;
text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.1);
}
.ui.red.buttons .button:hover,
.ui.red.button:hover,
.ui.red.buttons .active.button,
.ui.red.button.active {
background-color: #E75859 !important;
color: #FFFFFF !important;
background-color: #E75859;
color: #FFFFFF;
}
.ui.red.buttons .button:active,
.ui.red.button:active {
background-color: #D24B4C !important;
color: #FFFFFF !important;
background-color: #D24B4C;
color: #FFFFFF;
}
/*--- Blue ---*/
.ui.blue.buttons .button,
.ui.blue.button {
background-color: #6ECFF5 !important;
color: #FFFFFF !important;
background-color: #6ECFF5;
color: #FFFFFF;
text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.1);
}
.ui.blue.buttons .button:hover,
.ui.blue.button:hover,
.ui.blue.buttons .active.button,
.ui.blue.button.active {
background-color: #1AB8F3 !important;
color: #FFFFFF !important;
background-color: #1AB8F3;
color: #FFFFFF;
}
.ui.blue.buttons .button:active,
.ui.blue.button:active {
background-color: #0AA5DF !important;
color: #FFFFFF !important;
background-color: #0AA5DF;
color: #FFFFFF;
}
/*--- Purple ---*/
.ui.purple.buttons .button,
.ui.purple.button {
background-color: #564F8A !important;
color: #FFFFFF !important;
background-color: #564F8A;
color: #FFFFFF;
text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.1);
}
.ui.purple.buttons .button:hover,
.ui.purple.button:hover,
.ui.purple.buttons .active.button,
.ui.purple.button.active {
background-color: #3E3773 !important;
color: #FFFFFF !important;
background-color: #3E3773;
color: #FFFFFF;
}
.ui.purple.buttons .button:active,
.ui.purple.button:active {
background-color: #2E2860 !important;
color: #FFFFFF !important;
background-color: #2E2860;
color: #FFFFFF;
}
/*--- Teal ---*/
.ui.teal.buttons .button,
.ui.teal.button {
background-color: #00B5AD !important;
color: #FFFFFF !important;
background-color: #00B5AD;
color: #FFFFFF;
text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.1);
}
.ui.teal.buttons .button:hover,
.ui.teal.button:hover,
.ui.teal.buttons .active.button,
.ui.teal.button.active {
background-color: #009A93 !important;
color: #FFFFFF !important;
background-color: #009A93;
color: #FFFFFF;
}
.ui.teal.buttons .button:active,
.ui.teal.button:active {
background-color: #00847E !important;
color: #FFFFFF !important;
background-color: #00847E;
color: #FFFFFF;
}
/*---------------

12
src/modules/sidebar.less

@ -123,15 +123,15 @@ body {
*******************************/
.ui.floating.sidebar {
-webkit-box-shadow:0px 0px 3px rgba(0, 0, 0, 0.2);
-moz-box-shadow:0px 0px 3px rgba(0, 0, 0, 0.2);
box-shadow:0px 0px 3px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 3px 0px 3px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 3px 0px 3px rgba(0, 0, 0, 0.2);
box-shadow: 3px 0px 3px rgba(0, 0, 0, 0.2);
}
.ui.right.floating.sidebar {
-webkit-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.2);
box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: -3px 0px 3px rgba(0, 0, 0, 0.2);
-moz-box-shadow: -3px 0px 3px rgba(0, 0, 0, 0.2);
box-shadow: -3px 0px 3px rgba(0, 0, 0, 0.2);
}
.ui.top.floating.sidebar {

Loading…
Cancel
Save