fixes to button icons, secondary/tertiary buttons. fixes to circular icons

Former-commit-id: 38a34dd7ed
Former-commit-id: 69e8cba325

build/packaged/semantic.min.css.REMOVED.git-id

@@ -1 +1 @@
-c52ea0ff31b2357360f7ace60f140e9cbe790d35
+cb484e8b5a893382c4426c5c9517b411b6e9daf3

build/uncompressed/elements/button.css

@@ -356,13 +356,13 @@
 .ui.secondary.button {
   font-weight: normal;
   box-shadow: none;
-  opacity: 0.7;
+  opacity: 0.9;
 }
 .ui.buttons.tertiary .button,
 .ui.tertiary.button {
   font-weight: normal;
   box-shadow: none;
-  opacity: 0.5;
+  opacity: 0.6;
 }
 /*-------------------
         Sizes
@@ -437,24 +437,6 @@ Containing Icon
   line-height: 1;
   margin-right: 0.5em;
 }
-/* left arrow icons */
-.ui.button i.icon.left,
-.ui.button i.icon.left-open,
-.ui.button i.icon.left-dir {
-  margin: 0em 0.2em 0em;
-}
-/* right positioned icons */
-.ui.button i.icon.up,
-.ui.button i.icon.up-open,
-.ui.button i.icon.up-dir,
-.ui.button i.icon.down,
-.ui.button i.icon.down-open,
-.ui.button i.icon.down-dir,
-.ui.button i.icon.right,
-.ui.button i.icon.right-open,
-.ui.button i.icon.right-dir {
-  margin: 0em;
-}
 /*--------------
     Icon Only
 ---------------*/

build/uncompressed/elements/icons.css

@@ -552,7 +552,7 @@ i.icon.up,
 i.icon.down,
 i.icon.right {
   width: auto;
-  margin: 0em 0em 0em 0.1em;
+  margin: 0em 0em 0em 0.5em;
 }
 /*--------------
      Aliases
@@ -627,8 +627,10 @@ i.circular.icon {
   -webkit-border-radius: 500px;
   -moz-border-radius: 500px;
   border-radius: 500px;
-  padding: 0.43em 0.35em 0.27em;
-  border: 1px solid rgba(0, 0, 0, 0.1);
+  padding: 0.48em 0.4em 0.32em !important;
+  -webkit-box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset;
+  -moz-box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset;
+  box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset;
   width: 1.23em;
   height: 1.23em;
 }

node/src/documents/index.html

@@ -7,13 +7,13 @@ type   : 'Semantic'
 
 <div class="masthead segment">
   <div class="container">
-    <h1 class="ui dividing header"><i class="icon lab"></i>Semantic UI</h1>
-    <h2 class="ui dividing header"><strike>HTML</strike> UI is the DNA of the web.</h2>
+    <h1 class="ui header"><i class="icon lab"></i>Semantic UI</h1>
+    <h2 class="ui header"><strike>HTML</strike> UI is the DNA of the web.</h2>
     <p>Semantic empowers designers and developers by creating a shared vocabulary for user interfaces.</p>
     
-    <div class="ui large black compact menu">
-      <a href="download.html" class="item"><i class="icon cloud"></i> Download</a>
-      <a href="#" class="item"><i class="icon terminal"></i> Try it out</a>
+    <div class="ui two large buttons">
+      <a href="download.html" class="ui button"><i class="icon cloud"></i> Download</a>
+      <a href="#" class="ui button"><i class="icon terminal"></i> Try it out</a>
     </div>
     
   </div>
@@ -23,21 +23,21 @@ type   : 'Semantic'
   <div class="container ui three column grid">
     <div class="column"> 
       <h1 class="ui icon header">
-        <i class="icon community"></i> 
+        <i class="icon red circular community"></i> 
         Made for Everyone
       </h1>
       <p>Code written in Semantic is based on natural language, making it easy to understand and learn.</p>
     </div>
     <div class="column">
       <h1 class="ui icon header">
-        <i class="icon paint"></i> 
+        <i class="icon circular paint"></i> 
         Design Portably
       </h1>
       <p>Semantic defines an exchange format for UI, so swapping out designs doesn't mean rewriting your site's codebase.</p>
     </div>
     <div class="column">
       <h1 class="ui icon header">
-        <i class="icon terminal"></i> 
+        <i class="icon blue circular terminal"></i> 
         Pro Tools
       </h1>
       <p>UI Modules all come with debugging and performance tools to help make sure they perform lightning fast.</p>
@@ -50,24 +50,24 @@ type   : 'Semantic'
         <div class="seven wide column">
           <h2 class="ui header"><i class="icon info"></i> Get Started</h2>
           <p>Learn about how to get started with Semantic UI, and best practices for using the Semantic standard in your project.</p>
-          <div class="ui small teal button">Learn more <i class="right arrow icon"></i></div>
+          <div class="ui small secondary button">Learn more <i class="right arrow icon"></i></div>
         </div>
         <div class="five wide column">
           <h2 class="ui header"><i class="icon paint"></i> See UI elements</h2>
           <p>See some of the UI elements that the Semantic library has to offer.</p>
-          <div class="ui small red button">View Library <i class="right arrow icon"></i></div>
+          <div class="ui small secondary button">View Library <i class="right arrow icon"></i></div>
         </div>
       </div>
     <div class="row">
       <div class="five wide column">
         <h2 class="ui header"><i class="icon terminal"></i> Author Elements </h2>
         <p>Learn about developing and releasing your own skins UI skins.</p>
-        <div class="ui small green button">Authoring Guide <i class="right arrow icon"></i></div>
+        <div class="ui small secondary button">Authoring Guide <i class="right arrow icon"></i></div>
       </div>
       <div class="seven wide column">
         <h2 class="ui header"><i class="icon edit"></i> Help Write the Spec </h2>
         <p>Semantic is a living spec. We need the communitys help to reach our full potential. Help Semantic develop specifications for missing UI elements.</p>
-        <div class="ui small blue button">Contribute <i class="right arrow icon"></i></div>
+        <div class="ui small secondary button">Contribute <i class="right arrow icon"></i></div>
       </div>
     </div>
   </div>

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

@@ -356,13 +356,13 @@
 .ui.secondary.button {
   font-weight: normal;
   box-shadow: none;
-  opacity: 0.7;
+  opacity: 0.9;
 }
 .ui.buttons.tertiary .button,
 .ui.tertiary.button {
   font-weight: normal;
   box-shadow: none;
-  opacity: 0.5;
+  opacity: 0.6;
 }
 /*-------------------
         Sizes
@@ -437,24 +437,6 @@ Containing Icon
   line-height: 1;
   margin-right: 0.5em;
 }
-/* left arrow icons */
-.ui.button i.icon.left,
-.ui.button i.icon.left-open,
-.ui.button i.icon.left-dir {
-  margin: 0em 0.2em 0em;
-}
-/* right positioned icons */
-.ui.button i.icon.up,
-.ui.button i.icon.up-open,
-.ui.button i.icon.up-dir,
-.ui.button i.icon.down,
-.ui.button i.icon.down-open,
-.ui.button i.icon.down-dir,
-.ui.button i.icon.right,
-.ui.button i.icon.right-open,
-.ui.button i.icon.right-dir {
-  margin: 0em;
-}
 /*--------------
     Icon Only
 ---------------*/

node/src/files/components/semantic/elements/icons.css

@@ -552,7 +552,7 @@ i.icon.up,
 i.icon.down,
 i.icon.right {
   width: auto;
-  margin: 0em 0em 0em 0.1em;
+  margin: 0em 0em 0em 0.5em;
 }
 /*--------------
      Aliases
@@ -627,8 +627,10 @@ i.circular.icon {
   -webkit-border-radius: 500px;
   -moz-border-radius: 500px;
   border-radius: 500px;
-  padding: 0.43em 0.35em 0.27em;
-  border: 1px solid rgba(0, 0, 0, 0.1);
+  padding: 0.48em 0.4em 0.32em !important;
+  -webkit-box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset;
+  -moz-box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset;
+  box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset;
   width: 1.23em;
   height: 1.23em;
 }

node/src/files/stylesheets/semantic.css

@@ -316,7 +316,6 @@ box-shadow: 3px 0px 2px rgba(0, 0, 0, 0.2); */
   font-size: 5em;
   line-height: 1.2;
   padding-bottom: 0px;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.6);
   text-shadow: 0px 4px 0px rgba(0, 0, 0, 0.2);
 }
 #example .masthead strike {
@@ -329,6 +328,9 @@ box-shadow: 3px 0px 2px rgba(0, 0, 0, 0.2); */
   border-bottom: none;
   line-height: 1;
 }
+#example .masthead .menu {
+  width: 375px;
+}
 #example .masthead p {
   font-size: 1.25em;
   margin: 0.5em 0em 1.5em;

src/elements/button.less

@@ -447,13 +447,13 @@
 .ui.secondary.button {
   font-weight: normal;
   box-shadow: none;
-  opacity: 0.7;
+  opacity: 0.9;
 }
 .ui.buttons.tertiary .button,
 .ui.tertiary.button {
   font-weight: normal;
   box-shadow: none;
-  opacity: 0.5;
+  opacity: 0.6;
 }
 
 
@@ -536,25 +536,6 @@ Containing Icon
   margin-right: 0.5em;
 }
 
-/* left arrow icons */
-.ui.button i.icon.left,
-.ui.button i.icon.left-open,
-.ui.button i.icon.left-dir {
-  margin: 0em 0.2em 0em;
-}
-/* right positioned icons */
-.ui.button i.icon.up,
-.ui.button i.icon.up-open,
-.ui.button i.icon.up-dir,
-.ui.button i.icon.down,
-.ui.button i.icon.down-open,
-.ui.button i.icon.down-dir,
-.ui.button i.icon.right,
-.ui.button i.icon.right-open,
-.ui.button i.icon.right-dir {
-  margin: 0em;
-}
-
 /*--------------
     Icon Only
 ---------------*/

src/elements/icons.less

@@ -215,7 +215,7 @@ i.icon.up,
 i.icon.down,
 i.icon.right {
   width: auto;
-  margin: 0em 0em 0em 0.1em;
+  margin: 0em 0em 0em 0.5em;
 }
 
 /*--------------
@@ -283,8 +283,11 @@ i.circular.icon {
   -moz-border-radius: 500px;
   border-radius: 500px;
 
-  padding: 0.43em 0.35em 0.27em;
-  border: 1px solid rgba(0, 0, 0, 0.1);
+  padding: 0.48em 0.4em 0.32em !important;
+
+  -webkit-box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset;
+  -moz-box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset;
+  box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset;
 
   width: 1.23em;
   height: 1.23em;