updating & reorganizing the core styleguide

Author: dmolsen

core/styleguide/assets/icons.dev.svg

@@ -0,0 +1,34 @@
+.sg-pattern-state:before {
+	margin-right: 4px;
+	content: "\2022";
+	display: inline-block;
+	margin-bottom: -4px;
+	font-size: 18px;
+	vertical-align: bottom;
+}
+
+.sg-nav .sg-pattern-state:before {
+	margin-top: -4px;
+	margin-bottom: 0;
+	margin-left: -4px;
+	height: 20px;
+	display: block;
+	float: left;
+}
+
+.sg-sub-nav .sg-pattern-state:before {
+	margin-left: -11px;
+	margin-right: 4px;
+}
+
+.inprogress:before {
+	color: #FF4136 !important;
+}
+
+.inreview:before {
+	color: #FFCC00 !important;
+}
+
+.complete:before {
+	color: #2ECC40 !important;
+}

core/styleguide/assets/icons.eot

@@ -224,9 +224,6 @@
     min-width: 0; }
     .sg-controls .sg-nav-phases .sg-acc-panel.active {
       max-height: none; }
-  @media all and (min-width: 69.5em) {
-    .sg-controls {
-      width: 41.5em; } }
 
 .sg-control-trigger {
   border-bottom: 1px solid rgba(255, 255, 255, 0.05); }
@@ -263,7 +260,7 @@
   .sg-current-size:hover .sg-input {
     background: #999999;
     color: #000; }
-  @media all and (min-width: 69.5em) {
+  @media all and (min-width: 72.5em) {
     .sg-current-size {
       float: left; } }
 
@@ -273,7 +270,7 @@
     .sg-size {
       width: auto; } }
 
-@media all and (min-width: 69.5em) {
+@media all and (min-width: 72.5em) {
   .sg-size-options {
     float: left;
     position: static;
@@ -312,7 +309,7 @@
     top: 2em;
     left: 0; }
 
-.sg-checkbox:before {
+.sg-iconitem:before {
   display: inline-block;
   margin-right: 0.4em; }
 
@@ -348,6 +345,7 @@
   bottom: 0;
   left: 0;
   right: 0;
+  background-color: white;
 }
   #sg-viewport.hay-mode {
     -webkit-transition: all 40s linear;
@@ -503,14 +501,16 @@
     -o-transition: bottom 0.3s ease-out;
     transition: bottom 0.3s ease-out; }
 
+.sg-view-close {
+  width: 100%;
+  margin-bottom: -10px; }
+
 .sg-view-close-btn {
   color: #fff;
-  position: absolute;
-  top: 1em;
-  right: 1em;
   text-transform: uppercase;
   text-decoration: none;
-  text-align: right; }
+  text-align: right; 
+  display: block; }
 
 .has-annotation {
   cursor: help !important;
@@ -585,47 +585,118 @@
   color: gray;
   font-size: 1em; }
 
-/* Pattern Lab icon fonts */
-@font-face {
-  font-family: 'icons';
-  src: url("../assets/icons.eot");
-  src: url("../assets/icons.eot?#iefix") format("embedded-opentype"), url("../assets/icons.woff") format("woff"), url("../assets/icons.ttf") format("truetype"), url("../assets/icons.svg#icons") format("svg");
-  font-weight: normal;
-  font-style: normal; }
+#sg-code-markup {
+  padding-top: 10px; }
 
-.icon-reload, .icon-cog, .icon-minus, .icon-plus, .icon-menu, .icon-checkbox-unchecked, .sg-checkbox, .icon-checkbox-checked, .sg-checkbox.active, .icon-eye {
-  font-family: 'icons';
-  speak: none;
-  font-style: normal;
-  font-weight: normal;
-  font-variant: normal;
-  text-transform: none;
-  line-height: 1;
-  -webkit-font-smoothing: antialiased; }
+#sg-code-tabs {
+  list-style: none;
+  margin: 0;
+  padding: 0; }
 
-.icon-reload:before {
-  content: "\e002"; }
+#sg-code-tabs li {
+  float: left;
+  background-color: #333;
+  font-size: 1.3em;
+  font-weight: bold;
+  padding: 5px 15px;
+  border-top: 2px solid #666;
+  margin-right: 2px;
+  cursor: pointer; }
 
-.icon-cog:before {
-  content: "\e000"; }
+.sg-code-title-active {
+  color: #bbb;
+  background-color: #272822 !important; }
 
-.icon-minus:before {
-  content: "\e003"; }
+div.clear {
+  clear: both; }
 
-.icon-plus:before {
-  content: "\e004"; }
+.sg-code-patternname {
+  color: #aaa; }
 
-.icon-menu:before {
-  content: "\e005"; }
+#sg-code-loader {
+  display: none;
+  position: absolute;
+  left: 45%;
+  top: 20%;
+  width: 150px;
+  padding: 10px;
+  text-align: center;
+  border-radius: 10px;
+  background-color: #000;
+  z-index: 100; }
+
+.spinner {
+  height: 30px;
+  width: 30px;
+  margin-left: auto; margin-right: auto;
+  background-position: center center;
+  background-repeat: no-repeat;
+  background: url('../images/spinner.gif');
+  border-radius: 50%;
+  opacity: .7; }
 
-.icon-checkbox-unchecked:before, .sg-checkbox:before {
-  content: "\e006"; }
+/* Pattern Lab icon fonts */
+@font-face {
+	font-family: 'icomoon';
+	src:url('../fonts/icomoon.eot?srsv7g');
+	src:url('../fonts/icomoon.eot?#iefixsrsv7g') format('embedded-opentype'),
+		url('../fonts/icomoon.woff?srsv7g') format('woff'),
+		url('../fonts/icomoon.ttf?srsv7g') format('truetype'),
+		url('../fonts/icomoon.svg?srsv7g#icomoon') format('svg');
+	font-weight: normal;
+	font-style: normal;
+}
 
-.icon-checkbox-checked:before, .sg-checkbox.active:before {
-  content: "\e007"; }
+.icon-search, .icon-cog, .icon-minus, .icon-plus, .icon-menu, .icon-radio-checked, .icon-radio-unchecked, .icon-file, .icon-link, .icon-keyboard, .icon-qrcode, .icon-eye, .sg-iconitem {
+	font-family: 'icomoon';
+	speak: none;
+	font-style: normal;
+	font-weight: normal;
+	font-variant: normal;
+	text-transform: none;
+	line-height: 1;
+
+	/* Better Font Rendering =========== */
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+}
 
+.icon-search:before {
+	content: "\e600";
+}
+.icon-cog:before {
+	content: "\e601";
+}
+.icon-minus:before {
+	content: "\e602";
+}
+.icon-plus:before {
+	content: "\e603";
+}
+.icon-menu:before {
+	content: "\e604";
+}
+.icon-radio-checked:before, .sg-checkbox.active:before {
+	content: "\e605";
+}
+.icon-radio-unchecked:before, .sg-checkbox:before {
+	content: "\e606";
+}
+.icon-file:before {
+	content: "\e607";
+}
+.icon-link:before {
+	content: "\e608";
+}
+.icon-keyboard:before {
+	content: "\e609";
+}
+.icon-qrcode:before {
+	content: "\e60a";
+}
 .icon-eye:before {
-  content: "\e001"; }
+	content: "\e60b";
+}
 
 /******************************************************************/
 /* End Pattern Lab Interface code */