@geira/iconfont 0.2.4 → 0.2.7

package/src/scss/styles.scss

@@ -1,286 +1,286 @@
-* {
-  margin  : 0;
-  padding : 0;
-  color   : #263238;
-}
-
-html, body {
-  height : 100%;
-  min-width: 320px;
-}
-
-body {
-  font-family : "Trebuchet MS", Helvetica, sans-serif;
-  font-size   : 1.2em;
-}
-
-.main {
-  display        : flex;
-  flex-direction : column;
-  min-height     : 100%;
-}
-
-h2, h3, h4, h5 {
-  margin-bottom : 15px;
-  color         : #546e7a;
-}
-
-h2 {
-  font-weight : normal;
-  color       : #ff8a65;
-}
-
-h5 {
-  color : #ff8a65;
-}
-
-a {
-  text-decoration : none;
-  color           : #00acc1;
-}
-
-header {
-  padding          : 0;
-  background-color : #fbe9e7;
-  box-shadow       : 0 0 8px rgba(0, 0, 0, .3);
-  position         : fixed;
-  width            : 100%;
-  text-align       : center;
-  z-index          : 2;
-  display          : flex;
-  align-content    : center;
-  align-items      : center;
-  place-content    : center space-between;
-}
-
-header h1 {
-  font-size : 1.5em;
-  color     : #e64a19;
-  padding   : 20px 20px;
-}
-
-header a {
-  color : #00838f;
-}
-
-header ul li {
-  display        : inline-block;
-  padding        : 8px 20px;
-  text-transform : uppercase;
-  font-size      : 1em;
-}
-
-header ul.logos {
-  padding-right : 10px;
-}
-
-header ul.logos li {
-  padding : 0 10px;
-}
-
-header ul li a {
-  color           : #00838f;
-  text-decoration : none;
-  display         : flex;
-  align-items     : center;
-}
-
-header ul.logos li a i {
-  color : #00838f;
-}
-
-header ul li.active a {
-  color  : #ff8a65;
-  cursor : default;
-}
-
-.title-h2 {
-  margin-top: 110px;
-}
-
-.container {
-  flex-grow : 1;
-}
-
-.search {
-  display       : flex;
-  margin-top    : 110px;
-  align-items   : center;
-  place-content : center;
-  margin-bottom : 20px;
-}
-
-.search #match {
-  max-width     : 400px;
-  width         : 90%;
-  padding       : 15px 20px;
-  font-size     : 18px;
-  border-radius : 10px;
-  border        : 1px solid #cfd8dc;
-}
-
-.center {
-  text-align : center;
-}
-
-p {
-  margin-bottom : 10px;
-  font-size     : .8em;
-  line-height   : 1.3;
-}
-
-.block {
-  background-color : #eceff1;
-  margin-bottom    : 30px;
-}
-
-.icons-preview {
-  line-height      : 0;
-  padding          : 10px;
-  background-color : #fbe9e7;
-  display          : flex;
-  align-items      : center;
-}
-
-.icons-code {
-  padding    : 20px;
-  text-align : center;
-}
-
-.row {
-  display        : flex;
-  flex-direction : row;
-  align-items    : stretch;
-}
-
-.some-class:before {
-  content   : "\E0BA";
-  font-size : 48px;
-
-}
-
-.geira-icons {
-  font-size : 48px;
-}
-
-#icons {
-  height        : 100%;
-  min-height    : 100%;
-  min-width     : 100%;
-  width         : 100%;
-  flex-flow     : row wrap;
-  box-sizing    : border-box;
-  display       : flex;
-  place-content : center;
-}
-
-.icon {
-  flex       : 1 1 10%;
-  box-sizing : border-box;
-  max-width  : 10%;
-  padding    : 10px;
-  list-style : none;
-}
-
-.icon > div {
-  height         : 100%;
-  min-height     : 100%;
-  min-width      : 100%;
-  width          : 100%;
-  place-content  : center;
-  align-items    : center;
-  flex-direction : column;
-  box-sizing     : border-box;
-  display        : flex;
-  border         : 1px solid #eceff1;
-  border-radius  : 10px;
-  padding        : 10px 5px 5px;
-}
-
-.icon i {
-  color : #d84315;
-}
-
-.icon span {
-  margin      : 5px 0;
-  font-size   : .6em;
-  font-weight : bold;
-  color       : #b0bec5;
-}
-
-span.name {
-  font-size : .8em;
-  color     : #455a64;
-}
-
-span.tags {
-  display : none;
-}
-
-#quantity {
-  color            : #90a4ae;
-  font-size        : .8em;
-  background-color : #ffffff;
-  padding          : 2px 5px;
-  margin-left      : 4px;
-  border-radius    : 5px;
-}
-
-#version {
-  font-size : .4em;
-  color     : #546e7a;
-}
-
-footer {
-  background-color : #fbe9e7;
-  padding          : 15px;
-  text-align       : center;
-  margin-top       : 40px;
-}
-
-footer p {
-  margin    : 0;
-  font-size : .6em;
-  color     : #607d8b;
-}
-
-@media all and (max-width: 1400px) {
-  .icon {
-    flex       : 1 1 16.6%;
-    max-width  : 16.6%;
-  }
-}
-
-@media all and (max-width: 1100px) {
-  .icon {
-    flex       : 1 1 25%;
-    max-width  : 25%;
-  }
-}
-
-@media all and (max-width: 876px) {
-  .icon {
-    flex       : 1 1 33.3%;
-    max-width  : 33.3%;
-  }
-
-  header {
-    position         : inherit;
-    width            : 100%;
-  }
-
-  .search {
-    margin-top: 30px;
-  }
-
-  .title-h2 {
-    margin-top: 30px;
-  }
-}
-
-@media all and (max-width: 600px) {
-  .icon {
-    flex       : 1 1 50%;
-    max-width  : 50%;
-  }
-}
+* {
+  margin  : 0;
+  padding : 0;
+  color   : #263238;
+}
+
+html, body {
+  height : 100%;
+  min-width: 320px;
+}
+
+body {
+  font-family : "Trebuchet MS", Helvetica, sans-serif;
+  font-size   : 1.2em;
+}
+
+.main {
+  display        : flex;
+  flex-direction : column;
+  min-height     : 100%;
+}
+
+h2, h3, h4, h5 {
+  margin-bottom : 15px;
+  color         : #546e7a;
+}
+
+h2 {
+  font-weight : normal;
+  color       : #ff8a65;
+}
+
+h5 {
+  color : #ff8a65;
+}
+
+a {
+  text-decoration : none;
+  color           : #00acc1;
+}
+
+header {
+  padding          : 0;
+  background-color : #fbe9e7;
+  box-shadow       : 0 0 8px rgba(0, 0, 0, .3);
+  position         : fixed;
+  width            : 100%;
+  text-align       : center;
+  z-index          : 2;
+  display          : flex;
+  align-content    : center;
+  align-items      : center;
+  place-content    : center space-between;
+}
+
+header h1 {
+  font-size : 1.5em;
+  color     : #e64a19;
+  padding   : 20px 20px;
+}
+
+header a {
+  color : #00838f;
+}
+
+header ul li {
+  display        : inline-block;
+  padding        : 8px 20px;
+  text-transform : uppercase;
+  font-size      : 1em;
+}
+
+header ul.logos {
+  padding-right : 10px;
+}
+
+header ul.logos li {
+  padding : 0 10px;
+}
+
+header ul li a {
+  color           : #00838f;
+  text-decoration : none;
+  display         : flex;
+  align-items     : center;
+}
+
+header ul.logos li a i {
+  color : #00838f;
+}
+
+header ul li.active a {
+  color  : #ff8a65;
+  cursor : default;
+}
+
+.title-h2 {
+  margin-top: 110px;
+}
+
+.container {
+  flex-grow : 1;
+}
+
+.search {
+  display       : flex;
+  margin-top    : 110px;
+  align-items   : center;
+  place-content : center;
+  margin-bottom : 20px;
+}
+
+.search #match {
+  max-width     : 400px;
+  width         : 90%;
+  padding       : 15px 20px;
+  font-size     : 18px;
+  border-radius : 10px;
+  border        : 1px solid #cfd8dc;
+}
+
+.center {
+  text-align : center;
+}
+
+p {
+  margin-bottom : 10px;
+  font-size     : .8em;
+  line-height   : 1.3;
+}
+
+.block {
+  background-color : #eceff1;
+  margin-bottom    : 30px;
+}
+
+.icons-preview {
+  line-height      : 0;
+  padding          : 10px;
+  background-color : #fbe9e7;
+  display          : flex;
+  align-items      : center;
+}
+
+.icons-code {
+  padding    : 20px;
+  text-align : center;
+}
+
+.row {
+  display        : flex;
+  flex-direction : row;
+  align-items    : stretch;
+}
+
+.some-class:before {
+  content   : "\E0BA";
+  font-size : 48px;
+
+}
+
+.geira-icons {
+  font-size : 48px;
+}
+
+#icons {
+  height        : 100%;
+  min-height    : 100%;
+  min-width     : 100%;
+  width         : 100%;
+  flex-flow     : row wrap;
+  box-sizing    : border-box;
+  display       : flex;
+  place-content : center;
+}
+
+.icon {
+  flex       : 1 1 10%;
+  box-sizing : border-box;
+  max-width  : 10%;
+  padding    : 10px;
+  list-style : none;
+}
+
+.icon > div {
+  height         : 100%;
+  min-height     : 100%;
+  min-width      : 100%;
+  width          : 100%;
+  place-content  : center;
+  align-items    : center;
+  flex-direction : column;
+  box-sizing     : border-box;
+  display        : flex;
+  border         : 1px solid #eceff1;
+  border-radius  : 10px;
+  padding        : 10px 5px 5px;
+}
+
+.icon i {
+  color : #d84315;
+}
+
+.icon span {
+  margin      : 5px 0;
+  font-size   : .6em;
+  font-weight : bold;
+  color       : #b0bec5;
+}
+
+span.name {
+  font-size : .8em;
+  color     : #455a64;
+}
+
+span.tags {
+  display : none;
+}
+
+#quantity {
+  color            : #90a4ae;
+  font-size        : .8em;
+  background-color : #ffffff;
+  padding          : 2px 5px;
+  margin-left      : 4px;
+  border-radius    : 5px;
+}
+
+#version {
+  font-size : .4em;
+  color     : #546e7a;
+}
+
+footer {
+  background-color : #fbe9e7;
+  padding          : 15px;
+  text-align       : center;
+  margin-top       : 40px;
+}
+
+footer p {
+  margin    : 0;
+  font-size : .6em;
+  color     : #607d8b;
+}
+
+@media all and (max-width: 1400px) {
+  .icon {
+    flex       : 1 1 16.6%;
+    max-width  : 16.6%;
+  }
+}
+
+@media all and (max-width: 1100px) {
+  .icon {
+    flex       : 1 1 25%;
+    max-width  : 25%;
+  }
+}
+
+@media all and (max-width: 876px) {
+  .icon {
+    flex       : 1 1 33.3%;
+    max-width  : 33.3%;
+  }
+
+  header {
+    position         : inherit;
+    width            : 100%;
+  }
+
+  .search {
+    margin-top: 30px;
+  }
+
+  .title-h2 {
+    margin-top: 30px;
+  }
+}
+
+@media all and (max-width: 600px) {
+  .icon {
+    flex       : 1 1 50%;
+    max-width  : 50%;
+  }
+}