Commit 46d97fa7 authored by Panayiotis Lipiridis's avatar Panayiotis Lipiridis
Browse files

Added assets and more examples

parent 29246bbd

Gruntfile.coffee

+7 −0
Original line number Diff line number Diff line
@@ -36,11 +36,18 @@ module.exports = (grunt)-> 
          livereload: true

        files: 'index.html'



    connect:

      server:

        options:

          port: 8000

          keepalive: true





    grunt.loadNpmTasks("grunt-contrib-clean")

    grunt.loadNpmTasks("grunt-contrib-less")

    grunt.loadNpmTasks("grunt-contrib-cssmin")

    grunt.loadNpmTasks("grunt-contrib-watch")

    grunt.loadNpmTasks('grunt-contrib-connect')



    grunt.registerTask("default", ["build", "watch"])

    grunt.registerTask("build", ["clean", "less"])

README.md

+4 −11
Original line number Diff line number Diff line
@@ -6,24 +6,17 @@ CSS classes 
-----------





`.flag-icon`

`.flag-icon` sets the correct proportions for the flag icon when used inline with text.



`.flag-icon-xx` where `xx` is the [ISO 3166-1-alpha-2 code](http://www.iso.org/iso/country_names_and_code_elements)

`.flag-icon-xx` sets the `background-image` with the correct flag, where `xx` is the [ISO 3166-1-alpha-2 code](http://www.iso.org/iso/country_names_and_code_elements).



`.flag-icon-squared` the squared version of the flag

`.flag-icon-squared` for the squared version of the flag.



`.flag-icon-2x` 2 times bigger size



`.flag-icon-3x` 3 times bigger size

`.flag-icon-background` sets the the background to `position: 50%`, `repeat:no-repeat` and `size:contain`.





Usage

-----



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

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

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



    <span class="flag-icon flag-icon-gr flag-icon-squared"></span>
 
    <span class="flag-icon flag-icon-gr flag-icon-squared flag-icon-2x"></span>

    <span class="flag-icon flag-icon-gr flag-icon-squared flag-icon-3x"></span>
 
 No newline at end of file

assets/bootstrap.min.css

0 → 100644
+8 −0

File added.

Preview size limit exceeded, changes collapsed.

assets/docs.css

0 → 100644
+41 −0
Original line number Diff line number Diff line 
.flag-wrapper {

  width: 100%;

  display: inline-block;

  position: relative;

  box-shadow: 0 0 2px black;

  overflow: hidden;

  margin-bottom: 20px;

}



.flag-wrapper:after {

  padding-top: 75%; /*1160/2000 ratio*/

  display: block;

  content: '';

}



.flag-wrapper .flag {

  position: absolute;

  top: 0; bottom: 0; right: 0; left: 0;

  width: 100%;

  height: 100%;

  background-size: cover;

}



footer {

  margin-top: 30px;

  padding: 30px 0;

  border-top: 1px solid #ddd;

}



h1, h2, h3, h4, h5, h6 {

  font-weight: 300;

}



#examples h1, h2, h3, h4, h5, h6, p{

  white-space: nowrap;

  margin-bottom: 8px;

}



#examples {

  overflow: hidden;

}

css/country-flag-icons.css

+19 −15
Original line number Diff line number Diff line
@@ -7,31 +7,35 @@ 
  background-position: 50%;

  background-repeat: no-repeat;

}

.flag-icon.flag-icon-2x {

  width: 2.6666666666666665em;

  line-height: 2em;

}

.flag-icon.flag-icon-2x.flag-icon-squared {

  width: 2em;

}

.flag-icon.flag-icon-3x {

  width: 4em;

  line-height: 3em;

}

.flag-icon.flag-icon-3x.flag-icon-squared {

  width: 3em;

}

.flag-icon:before {

  content: "\00a0";

}

.flag-icon.flag-icon-squared {

  width: 1em;

}

.background-contain {

.flag-icon-background {

  background-size: contain;

  background-position: 50%;

  background-repeat: no-repeat;

}

.flag-icon-gr {

  background-image: url(../flags/4x3/gr.svg);

}

.flag-icon-gr.flag-icon-squared {

  background-image: url(../flags/1x1/gr.svg);

}

.flag-icon-dk {

  background-image: url(../flags/4x3/dk.svg);

}

.flag-icon-dk.flag-icon-squared {

  background-image: url(../flags/1x1/dk.svg);

}

.flag-icon-us {

  background-image: url(../flags/4x3/us.svg);

}

.flag-icon-us.flag-icon-squared {

  background-image: url(../flags/1x1/us.svg);

}

.flag-icon-ad {

  background-image: url(../flags/4x3/ad.svg);

}