Commit 6ee96b9a authored by Panayiotis Lipiridis's avatar Panayiotis Lipiridis
Browse files

Fixes

parent 89335203

css/country-flag-icons.css

+13 −8
Original line number Diff line number Diff line 
.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);

}

css/country-flag-icons.min.css

+1 −1

File changed.

Preview size limit exceeded, changes collapsed.

index.html

+117 −90
Original line number Diff line number Diff line
@@ -9,12 +9,46 @@ 
    <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="jumbotron text-center">

      <div class="container">

      <div class="page-header">

        <h1>country-flag-icons</h1>

        <p class="lead">

          250+ svg based country flags!

        </p>

      </div>

    </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
@@ -26,7 +60,6 @@ 
          <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>
@@ -37,7 +70,6 @@ 
          <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>
@@ -48,7 +80,6 @@ 
          <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>
@@ -59,7 +90,6 @@ 
          <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>
@@ -70,7 +100,6 @@ 
          <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>
@@ -81,7 +110,6 @@ 
          <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>
@@ -92,7 +120,6 @@ 
          <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>
@@ -103,7 +130,7 @@ 
          <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>

      </section>

    </div>

    <script src="http://localhost:35729/livereload.js"></script>

  </body>

less/country-flag-icons.less

+8 −6
Original line number Diff line number Diff line
@@ -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 {