reskinning of panel for menus

docs/button.html

@@ -7,6 +7,7 @@
   <link rel="stylesheet" class="ui" href="../src/ui/flat/state.js" type="text/css" media="screen" />
   <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/icons.css" type="text/css" media="screen" />
   <link rel="stylesheet" class="ui" href="../src/ui/flat/table.css" type="text/css" media="screen" />
@@ -100,7 +101,7 @@
         <i class="icon right-dir"></i>
       </div>
       <div class="right swap link item">
-        Swap Layout
+        Swap Theme
       </div>
     </div>
 </div>
@@ -115,11 +116,14 @@
 </div>
 <div class="main container">
 
-  <div class="ui large vertical pointing panel peek">
-    <li class="active">Standard</li>
-    <li>States</li>
-    <li>Variations</li>
-    <li>Group</li>
+  <div class="peek">
+    <div class="top attached ui header">Overview</div>
+    <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>
 

docs/stylesheets/example.css

@@ -168,6 +168,9 @@ a:hover {
   left: -230px;
   width: 180px;
 }
+#example .peek .panel {
+  width: 180px;
+}
 #example .sticky-wrapper.stuck {
   height: 0px !important;
 }

src/ui/flat/button.css

@@ -140,14 +140,6 @@
 .ui.button.active.hover a {
   color: #555555;
 }
-.ui.buttons .button.active.hover.down,
-.ui.button.active.hover.down {
-  background: #E0E0E0 -webkit-linear-gradient(top, #E0E0E0 0%, #E8E8E8 100%);
-  background: #E0E0E0 -moz-linear-gradient(top, #E0E0E0 0%, #E8E8E8 100%);
-  background: #E0E0E0 -o-linear-gradient(top, #E0E0E0 0%, #E8E8E8 100%);
-  background: #E0E0E0 -ms-linear-gradient(top, #E0E0E0 0%, #E8E8E8 100%);
-  background: #E0E0E0 linear-gradient(top, #E0E0E0 0%, #E8E8E8 100%);
-}
 
 /*--------------
     Loading 
@@ -563,14 +555,8 @@ Containing Icon
     0px 0px 4px -2px rgba(0, 0, 0, 0.2) inset
   ;
 }
-.ui.button.toggle.active.hover.loading,
-.ui.button.toggle.active.loading {
-  border-color: #CCCCCC;
-}
 .ui.button.toggle.active.hover.down {
-  border: 1px solid #77CF66;
-
-  background-color: #B6F3A2;
+  background-color: #BBF0A9;
   color: #21A627;
 
   -webkit-box-shadow: 0px 1px 3px 0px rgba(67, 97, 53, 0.5) inset;

src/ui/flat/panel.css

@@ -6,11 +6,10 @@
   margin: 0px 0px 25px;
   height: 41px;
 
-  border: 1px solid #DADADA;
-  border: 1px solid rgba(0, 0, 0, 0.12);
-
   padding: 0px;
 
+  box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.15);
+
   -webkit-border-radius: 4px;
   -moz-border-radius: 4px;
   border-radius: 4px;
@@ -112,15 +111,20 @@
   text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.8);
 
   -webkit-box-shadow:
-    0px 0px 2px rgba(0, 0, 0, 0.1) inset
+    0px 0px 1px rgba(0, 0, 0, 0.1) inset
   ;
   -moz-box-shadow:
-    0px 0px 2px rgba(0, 0, 0, 0.1) inset
+    0px 0px 1px rgba(0, 0, 0, 0.1) inset
   ;
   box-shadow:
-    0px 0px 2px rgba(0, 0, 0, 0.1) inset
+    0px 0px 1px rgba(0, 0, 0, 0.1) inset
   ;
 }
+
+.ui.panel li.active {
+  border-left: 5px solid #AAAAAA;
+}
+
 .ui.panel li.active,
 .ui.panel li.active.hover {
   cursor: default;
@@ -165,9 +169,9 @@
   bottom: auto;
   left: auto;
 
-  -webkit-box-shadow: -1px 1px 1px 0 rgba(0, 0, 0, 0.1) inset;
-  -moz-box-shadow: -1px 1px 1px 0 rgba(0, 0, 0, 0.1) inset;
-  box-shadow: -1px 1px 1px 0 rgba(0, 0, 0, 0.1) inset;
+  -webkit-box-shadow: 1px -1px 1px 0 rgba(0, 0, 0, 0.15);
+  -moz-box-shadow: 1px -1px 1px 0 rgba(0, 0, 0, 0.15);
+  box-shadow: 1px -1px 1px 0 rgba(0, 0, 0, 0.15);
 
   margin-top: -7px;
   width: 12px;
@@ -259,7 +263,6 @@
 
 /* Bottom Side */
 .bottom.attached.ui.panel {
-  margin-top: -1px;
   -webkit-border-radius: 0px 0px 4px 4px;
   -moz-border-radius: 0px 0px 4px 4px;
   border-radius: 0px 0px 4px 4px;
@@ -490,6 +493,9 @@
   font-weight: bold;
   padding: 16px 35px;
 }
+.large.vertical.ui.panel li.active {
+  padding-left: 15px;
+}
 
 /* Large Vertical Panel */
 .large.vertical.ui.panel,

src/ui/flat/text.css

@@ -10,12 +10,7 @@
   padding: 8px 13px;
 
   background-color: #FFFFFF;
-  border: 1px solid rgba(0, 0, 0, 0.1);
-  background: -webkit-linear-gradient(top, #FFFFFF 0px, #F2F2F2 100%);
-  background: -moz-linear-gradient(top, #FFFFFF 0px, #F2F2F2 100%);
-  background: -o-linear-gradient(top, #FFFFFF 0px, #F2F2F2 100%);
-  background: -ms-linear-gradient(top, #FFFFFF 0px, #F2F2F2 100%);
-  background: linear-gradient(top, #FFFFFF 0px, #F2F2F2 100%);
+  box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.15);
 
   line-height: 1.5;
   font-size: 13px;
@@ -25,16 +20,6 @@
   -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.75) inset
-  ;
-  -moz-box-shadow:
-    0px 0px 0px 1px rgba(255, 255, 255, 0.75) inset
-  ;
-  box-shadow:
-    0px 0px 0px 1px rgba(255, 255, 255, 0.75) inset
-  ;
 }
 
 .ui.block {
@@ -155,16 +140,18 @@
 /*--------------
      Resizes
 ---------------*/
-
+.ui.header {
+  font-size: 16px;
+}
 .ui.header.large {
   padding-top: 8px;
   padding-bottom: 8px;
-  font-size: 14px;
+  font-size: 18px;
 }
 .ui.header.huge {
   padding-top: 8px;
   padding-bottom: 8px;
-  font-size: 16px;
+  font-size: 22px;
 }
 
 /*******************************