Fixes

eunarede · Sep 24, 2013 · 6ee96b9 · 6ee96b9
1 parent 8933520
commit 6ee96b9
Show file tree

Hide file tree

Showing 4 changed files with 139 additions and 105 deletions.
diff --git a/css/country-flag-icons.css b/css/country-flag-icons.css
@@ -1,17 +1,11 @@
 .flag-icon {
   position: relative;
   display: inline-block;
+  width: 1.3333333333333333em;
+  line-height: 1em;
   background-size: contain;
   background-position: 50%;
   background-repeat: no-repeat;
-  width: 1.3333333333333333em;
-  line-height: 1em;
-}
-.flag-icon:before {
-  content: "\00a0";
-}
-.flag-icon.flag-icon-squared {
-  width: 1em;
 }
 .flag-icon.flag-icon-2x {
   width: 2.6666666666666665em;
@@ -27,6 +21,17 @@
 .flag-icon.flag-icon-3x.flag-icon-squared {
   width: 3em;
 }
+.flag-icon:before {
+  content: "\00a0";
+}
+.flag-icon.flag-icon-squared {
+  width: 1em;
+}
+.background-contain {
+  background-size: contain;
+  background-position: 50%;
+  background-repeat: no-repeat;
+}
 .flag-icon-ad {
   background-image: url(../flags/4x3/ad.svg);
 }

diff --git a/css/country-flag-icons.min.css b/css/country-flag-icons.min.css
diff --git a/index.html b/index.html
@@ -9,101 +9,128 @@
     <title>country-flag-icons</title>
     <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
     <link href="./css/country-flag-icons.css" rel="stylesheet">
+    <style>
+      h1, h2, h3, h4, h5, h6 {
+        font-weight: 300;
+      }
+      #examples *{
+        white-space: nowrap;
+        margin-bottom: 8px;
+      }
+      #examples {
+        overflow: hidden;
+      }
+    </style>
   </head>
 
   <body>
-    <div class="container">
-      <div class="page-header">
+    <div class="jumbotron text-center">
+      <div class="container">
         <h1>country-flag-icons</h1>
+        <p class="lead">
+          250+ svg based country flags!
+        </p>
       </div>
-      <h1>
-        h1
-        <span class="flag-icon flag-icon-gr"></span>
-        <span class="label label-default"><span class="flag-icon flag-icon-gr"></span> GR</span>
-        <span class="label label-primary"><span class="flag-icon flag-icon-gr"></span> GR</span>
-        <span class="label label-success"><span class="flag-icon flag-icon-gr"></span> GR</span>
-        <span class="label label-info"><span class="flag-icon flag-icon-gr"></span> GR</span>
-        <span class="label label-warning"><span class="flag-icon flag-icon-gr"></span> GR</span>
-        <span class="label label-danger"><span class="flag-icon flag-icon-gr"></span> GR</span>
-      </h1>
-      <hr>
-      <h2>
-        h2
-        <span class="flag-icon flag-icon-gr"></span>
-        <span class="label label-default"><span class="flag-icon flag-icon-gr"></span> GR</span>
-        <span class="label label-primary"><span class="flag-icon flag-icon-gr"></span> GR</span>
-        <span class="label label-success"><span class="flag-icon flag-icon-gr"></span> GR</span>
-        <span class="label label-info"><span class="flag-icon flag-icon-gr"></span> GR</span>
-        <span class="label label-warning"><span class="flag-icon flag-icon-gr"></span> GR</span>
-        <span class="label label-danger"><span class="flag-icon flag-icon-gr"></span> GR</span>
-      </h2>
-      <hr>
-      <h3>
-        h3
-        <span class="flag-icon flag-icon-gr"></span>
-        <span class="label label-default"><span class="flag-icon flag-icon-gr"></span> GR</span>
-        <span class="label label-primary"><span class="flag-icon flag-icon-gr"></span> GR</span>
-        <span class="label label-success"><span class="flag-icon flag-icon-gr"></span> GR</span>
-        <span class="label label-info"><span class="flag-icon flag-icon-gr"></span> GR</span>
-        <span class="label label-warning"><span class="flag-icon flag-icon-gr"></span> GR</span>
-        <span class="label label-danger"><span class="flag-icon flag-icon-gr"></span> GR</span>
-      </h3>
-      <hr>
-      <h4>
-        h4
-        <span class="flag-icon flag-icon-gr"></span>
-        <span class="label label-default"><span class="flag-icon flag-icon-gr"></span> GR</span>
-        <span class="label label-primary"><span class="flag-icon flag-icon-gr"></span> GR</span>
-        <span class="label label-success"><span class="flag-icon flag-icon-gr"></span> GR</span>
-        <span class="label label-info"><span class="flag-icon flag-icon-gr"></span> GR</span>
-        <span class="label label-warning"><span class="flag-icon flag-icon-gr"></span> GR</span>
-        <span class="label label-danger"><span class="flag-icon flag-icon-gr"></span> GR</span>
-      </h4>
-      <hr>
-      <h5>
-        h5
-        <span class="flag-icon flag-icon-gr"></span>
-        <span class="label label-default"><span class="flag-icon flag-icon-gr"></span> GR</span>
-        <span class="label label-primary"><span class="flag-icon flag-icon-gr"></span> GR</span>
-        <span class="label label-success"><span class="flag-icon flag-icon-gr"></span> GR</span>
-        <span class="label label-info"><span class="flag-icon flag-icon-gr"></span> GR</span>
-        <span class="label label-warning"><span class="flag-icon flag-icon-gr"></span> GR</span>
-        <span class="label label-danger"><span class="flag-icon flag-icon-gr"></span> GR</span>
-      </h5>
-      <hr>
-      <h6>
-        h6
-        <span class="flag-icon flag-icon-gr"></span>
-        <span class="label label-default"><span class="flag-icon flag-icon-gr"></span> GR</span>
-        <span class="label label-primary"><span class="flag-icon flag-icon-gr"></span> GR</span>
-        <span class="label label-success"><span class="flag-icon flag-icon-gr"></span> GR</span>
-        <span class="label label-info"><span class="flag-icon flag-icon-gr"></span> GR</span>
-        <span class="label label-warning"><span class="flag-icon flag-icon-gr"></span> GR</span>
-        <span class="label label-danger"><span class="flag-icon flag-icon-gr"></span> GR</span>
-      </h6>
-      <hr>
-      <p>
-        p
-        <span class="flag-icon flag-icon-gr"></span>
-        <span class="label label-default"><span class="flag-icon flag-icon-gr"></span> GR</span>
-        <span class="label label-primary"><span class="flag-icon flag-icon-gr"></span> GR</span>
-        <span class="label label-success"><span class="flag-icon flag-icon-gr"></span> GR</span>
-        <span class="label label-info"><span class="flag-icon flag-icon-gr"></span> GR</span>
-        <span class="label label-warning"><span class="flag-icon flag-icon-gr"></span> GR</span>
-        <span class="label label-danger"><span class="flag-icon flag-icon-gr"></span> GR</span>
-      </p>
-      <hr>
-      <p class="lead">
-        p.lead
-        <span class="flag-icon flag-icon-gr"></span>
-        <span class="label label-default"><span class="flag-icon flag-icon-gr"></span> GR</span>
-        <span class="label label-primary"><span class="flag-icon flag-icon-gr"></span> GR</span>
-        <span class="label label-success"><span class="flag-icon flag-icon-gr"></span> GR</span>
-        <span class="label label-info"><span class="flag-icon flag-icon-gr"></span> GR</span>
-        <span class="label label-warning"><span class="flag-icon flag-icon-gr"></span> GR</span>
-        <span class="label label-danger"><span class="flag-icon flag-icon-gr"></span> GR</span>
-      </p>
-      <hr>
+    </div>
+    <div class="container">
+      <section id="usage">
+        <div class="page-header">
+          <h1>Usage</h1>
+        </div>
+        <pre>
+ Normal  (4x3)   &lt;span class="flag-icon flag-icon-gr"&gt;&lt;/span&gt;
+ Normal  2x      &lt;span class="flag-icon flag-icon-gr flag-icon-2x"&gt;&lt;/span&gt;
+ Normal  3x      &lt;span class="flag-icon flag-icon-gr flag-icon-3x"&gt;&lt;/span&gt;
+
+ Squared (1x1)   &lt;span class="flag-icon flag-icon-gr flag-icon-squared"&gt;&lt;/span&gt;
+ Squared 2x      &lt;span class="flag-icon flag-icon-gr flag-icon-squared flag-icon-2x"&gt;&lt;/span&gt;
+ Squared 3x      &lt;span class="flag-icon flag-icon-gr flag-icon-squared flag-icon-3x"&gt;&lt;/span&gt;</pre>
+      </section>
+      <section id="examples">
+        <div class="page-header">
+          <h1>Examples</h1>
+        </div>
+        <h1>
+          h1
+          <span class="flag-icon flag-icon-gr"></span>
+          <span class="label label-default"><span class="flag-icon flag-icon-gr"></span> GR</span>
+          <span class="label label-primary"><span class="flag-icon flag-icon-gr"></span> GR</span>
+          <span class="label label-success"><span class="flag-icon flag-icon-gr"></span> GR</span>
+          <span class="label label-info"><span class="flag-icon flag-icon-gr"></span> GR</span>
+          <span class="label label-warning"><span class="flag-icon flag-icon-gr"></span> GR</span>
+          <span class="label label-danger"><span class="flag-icon flag-icon-gr"></span> GR</span>
+        </h1>
+        <h2>
+          h2
+          <span class="flag-icon flag-icon-gr"></span>
+          <span class="label label-default"><span class="flag-icon flag-icon-gr"></span> GR</span>
+          <span class="label label-primary"><span class="flag-icon flag-icon-gr"></span> GR</span>
+          <span class="label label-success"><span class="flag-icon flag-icon-gr"></span> GR</span>
+          <span class="label label-info"><span class="flag-icon flag-icon-gr"></span> GR</span>
+          <span class="label label-warning"><span class="flag-icon flag-icon-gr"></span> GR</span>
+          <span class="label label-danger"><span class="flag-icon flag-icon-gr"></span> GR</span>
+        </h2>
+        <h3>
+          h3
+          <span class="flag-icon flag-icon-gr"></span>
+          <span class="label label-default"><span class="flag-icon flag-icon-gr"></span> GR</span>
+          <span class="label label-primary"><span class="flag-icon flag-icon-gr"></span> GR</span>
+          <span class="label label-success"><span class="flag-icon flag-icon-gr"></span> GR</span>
+          <span class="label label-info"><span class="flag-icon flag-icon-gr"></span> GR</span>
+          <span class="label label-warning"><span class="flag-icon flag-icon-gr"></span> GR</span>
+          <span class="label label-danger"><span class="flag-icon flag-icon-gr"></span> GR</span>
+        </h3>
+        <h4>
+          h4
+          <span class="flag-icon flag-icon-gr"></span>
+          <span class="label label-default"><span class="flag-icon flag-icon-gr"></span> GR</span>
+          <span class="label label-primary"><span class="flag-icon flag-icon-gr"></span> GR</span>
+          <span class="label label-success"><span class="flag-icon flag-icon-gr"></span> GR</span>
+          <span class="label label-info"><span class="flag-icon flag-icon-gr"></span> GR</span>
+          <span class="label label-warning"><span class="flag-icon flag-icon-gr"></span> GR</span>
+          <span class="label label-danger"><span class="flag-icon flag-icon-gr"></span> GR</span>
+        </h4>
+        <h5>
+          h5
+          <span class="flag-icon flag-icon-gr"></span>
+          <span class="label label-default"><span class="flag-icon flag-icon-gr"></span> GR</span>
+          <span class="label label-primary"><span class="flag-icon flag-icon-gr"></span> GR</span>
+          <span class="label label-success"><span class="flag-icon flag-icon-gr"></span> GR</span>
+          <span class="label label-info"><span class="flag-icon flag-icon-gr"></span> GR</span>
+          <span class="label label-warning"><span class="flag-icon flag-icon-gr"></span> GR</span>
+          <span class="label label-danger"><span class="flag-icon flag-icon-gr"></span> GR</span>
+        </h5>
+        <h6>
+          h6
+          <span class="flag-icon flag-icon-gr"></span>
+          <span class="label label-default"><span class="flag-icon flag-icon-gr"></span> GR</span>
+          <span class="label label-primary"><span class="flag-icon flag-icon-gr"></span> GR</span>
+          <span class="label label-success"><span class="flag-icon flag-icon-gr"></span> GR</span>
+          <span class="label label-info"><span class="flag-icon flag-icon-gr"></span> GR</span>
+          <span class="label label-warning"><span class="flag-icon flag-icon-gr"></span> GR</span>
+          <span class="label label-danger"><span class="flag-icon flag-icon-gr"></span> GR</span>
+        </h6>
+        <p>
+          p
+          <span class="flag-icon flag-icon-gr"></span>
+          <span class="label label-default"><span class="flag-icon flag-icon-gr"></span> GR</span>
+          <span class="label label-primary"><span class="flag-icon flag-icon-gr"></span> GR</span>
+          <span class="label label-success"><span class="flag-icon flag-icon-gr"></span> GR</span>
+          <span class="label label-info"><span class="flag-icon flag-icon-gr"></span> GR</span>
+          <span class="label label-warning"><span class="flag-icon flag-icon-gr"></span> GR</span>
+          <span class="label label-danger"><span class="flag-icon flag-icon-gr"></span> GR</span>
+        </p>
+        <p class="lead">
+          p.lead
+          <span class="flag-icon flag-icon-gr"></span>
+          <span class="label label-default"><span class="flag-icon flag-icon-gr"></span> GR</span>
+          <span class="label label-primary"><span class="flag-icon flag-icon-gr"></span> GR</span>
+          <span class="label label-success"><span class="flag-icon flag-icon-gr"></span> GR</span>
+          <span class="label label-info"><span class="flag-icon flag-icon-gr"></span> GR</span>
+          <span class="label label-warning"><span class="flag-icon flag-icon-gr"></span> GR</span>
+          <span class="label label-danger"><span class="flag-icon flag-icon-gr"></span> GR</span>
+        </p>
+      </section>
     </div>
     <script src="http://localhost:35729/livereload.js"></script>
   </body>

diff --git a/less/country-flag-icons.less b/less/country-flag-icons.less
@@ -3,22 +3,24 @@
 .flag-icon {
   position: relative;
   display: inline-block;
-  background-size: contain;
-  background-position: 50%;
-  background-repeat: no-repeat;
-
   width: unit(4 / 3, em);
   line-height: 1em;
+  .flag-icon-x(2);
+  .flag-icon-x(3);
+  .background-contain;
   &:before {
     content: "\00a0";
   }
   &.flag-icon-squared {
     width: 1em;
   }
-  .flag-icon-x(2);
-  .flag-icon-x(3);
 }
 
+.background-contain {
+  background-size: contain;
+  background-position: 50%;
+  background-repeat: no-repeat;
+}
 
 .flag-icon-x(@size) {
   &.flag-icon-@{size}x {