Commit c638c8e2 authored by Panayiotis Lipiridis's avatar Panayiotis Lipiridis
Browse files

Added sizes

parent ec75cd1e

Gruntfile.coffee

+2 −0
Original line number Diff line number Diff line
@@ -25,10 +25,12 @@ module.exports = (grunt)-> 
          keepalive: true

        files: ["#{SRC_DIR}/**/*.less"]

        tasks: ["less"]



      css:

        options:

          livereload: true

        files: "#{TARGET_DIR}/<%= pkg.name %>.css"



      html_templates:

        options:

          livereload: true

css/country-flag-icons.css

+268 −253

File changed.

Preview size limit exceeded, changes collapsed.

css/country-flag-icons.min.css

+1 −1

File changed.

Preview size limit exceeded, changes collapsed.

index.html

+41 −19
Original line number Diff line number Diff line
@@ -16,21 +16,6 @@ 
      <div class="page-header">

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

      </div>

      <p>

        <span class="badge"><span class="flag-icon flag-icon-gr"></span> badge</span>

      </p>

      <hr>

      <p>

        <span class="flag-icon flag-icon-gr"></span>

        Hello, world!

        <span class="label label-default"><span class="flag-icon flag-icon-gr"></span> label</span>

        <span class="label label-primary"><span class="flag-icon flag-icon-gr"></span> label</span>

        <span class="label label-success"><span class="flag-icon flag-icon-gr"></span> label</span>

        <span class="label label-info"><span class="flag-icon flag-icon-gr"></span> label</span>

        <span class="label label-warning"><span class="flag-icon flag-icon-gr"></span> label</span>

        <span class="label label-danger"><span class="flag-icon flag-icon-gr"></span> label</span>

      </p>

      <hr>

      <h1>

        h1

        <span class="flag-icon flag-icon-gr"></span>
@@ -75,13 +60,50 @@ 
        <span class="label label-danger"><span class="flag-icon flag-icon-gr"></span> label</span>

      </h4>

      <hr>

      <p class="lead">

        p.lead <span class="flag-icon flag-icon-gr"></span>

      </p>

      <h5>

        h5

        <span class="flag-icon flag-icon-gr"></span>

        <span class="label label-default"><span class="flag-icon flag-icon-gr"></span> label</span>

        <span class="label label-primary"><span class="flag-icon flag-icon-gr"></span> label</span>

        <span class="label label-success"><span class="flag-icon flag-icon-gr"></span> label</span>

        <span class="label label-info"><span class="flag-icon flag-icon-gr"></span> label</span>

        <span class="label label-warning"><span class="flag-icon flag-icon-gr"></span> label</span>

        <span class="label label-danger"><span class="flag-icon flag-icon-gr"></span> label</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> label</span>

        <span class="label label-primary"><span class="flag-icon flag-icon-gr"></span> label</span>

        <span class="label label-success"><span class="flag-icon flag-icon-gr"></span> label</span>

        <span class="label label-info"><span class="flag-icon flag-icon-gr"></span> label</span>

        <span class="label label-warning"><span class="flag-icon flag-icon-gr"></span> label</span>

        <span class="label label-danger"><span class="flag-icon flag-icon-gr"></span> label</span>

      </h6>

      <hr>

      <p>

        p <span class="flag-icon flag-icon-gr"></span>

        p

        <span class="flag-icon flag-icon-gr"></span>

        <span class="label label-default"><span class="flag-icon flag-icon-gr"></span> label</span>

        <span class="label label-primary"><span class="flag-icon flag-icon-gr"></span> label</span>

        <span class="label label-success"><span class="flag-icon flag-icon-gr"></span> label</span>

        <span class="label label-info"><span class="flag-icon flag-icon-gr"></span> label</span>

        <span class="label label-warning"><span class="flag-icon flag-icon-gr"></span> label</span>

        <span class="label label-danger"><span class="flag-icon flag-icon-gr"></span> label</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> label</span>

        <span class="label label-primary"><span class="flag-icon flag-icon-gr"></span> label</span>

        <span class="label label-success"><span class="flag-icon flag-icon-gr"></span> label</span>

        <span class="label label-info"><span class="flag-icon flag-icon-gr"></span> label</span>

        <span class="label label-warning"><span class="flag-icon flag-icon-gr"></span> label</span>

        <span class="label label-danger"><span class="flag-icon flag-icon-gr"></span> label</span>

      </p>

      <hr>

    </div>

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

  </body>

less/country-flag-icons.less

+24 −8
Original line number Diff line number Diff line 
@import 'variabless';



.flag-icon {

  position: relative;

  top: 1px;

  display: inline-block;

  background-size: contain;

  background-position: 50%;

  background-repeat: no-repeat;



  width: (4 / 3 * 1em);

  line-height: 1;

  box-sizing: border-box;

  width: unit(4 / 3, em);

  line-height: 1em;

  &:before {

    content: "\00a0";

  }

  &.flag-icon-squared {

    width: 1em;

  }

  .flag-icon-x(2);

  .flag-icon-x(3);

}





.flag-icon-x(@size) {

  &.flag-icon-@{size}x {

    width: unit(@size * 4 / 3, em);

    line-height: unit(@size, em);

    &.flag-icon-squared {

      width: unit(@size, em);

    }

  }

}



.flag-icon(@country) {

  .flag-icon-@{country} {

    background-image: ~"url(../flags/4x3/@{country}.svg)";

    background-image: ~"url(@{country-flag-icons-path}/4x3/@{country}.svg)";

    &.flag-icon-squared {

      background-image: ~"url(@{country-flag-icons-path}/1x1/@{country}.svg)";

    }

  .flag-icon-square-@{country} {

    background-image: ~"url(../flags/1x1/@{country}.svg)";

  }

}