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

Added sizes

parent ec75cd1e
Loading
Loading
Loading
Loading
+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
+268 −253

File changed.

Preview size limit exceeded, changes collapsed.

+1 −1

File changed.

Preview size limit exceeded, changes collapsed.

+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>
+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)";
  }
}

Loading