diff --git a/pages/_data/invoices.yml b/pages/_data/invoices.yml index f35744e8e35f1437b361902258d28f58dc7ea3bd..ec0e05d29d475db82001cd1ef49660880ef74f79 100644 --- a/pages/_data/invoices.yml +++ b/pages/_data/invoices.yml @@ -7,6 +7,7 @@ status: success status-name: Paid price: $887 + country: us - invoice: "00450" @@ -17,6 +18,7 @@ status: warning status-name: Pending price: $1200 + country: gb - invoice: "00452" @@ -27,6 +29,7 @@ status: warning status-name: Pending price: $534 + country: de - invoice: "00450" @@ -37,6 +40,7 @@ status: secondary status-name: Due in 2 Weeks price: $1500 + country: br - invoice: "00450" @@ -47,6 +51,7 @@ status: danger status-name: Paid Today price: $648 + country: pl - invoice: "00450" @@ -57,6 +62,7 @@ status: secondary status-name: Due in 3 Weeks price: $300 + country: br - invoice: "00450" @@ -67,6 +73,7 @@ status: success status-name: Paid Today price: $2500 + country: us - invoice: "00450" @@ -87,6 +94,7 @@ status: success status-name: Paid price: $887 + country: us - invoice: "00450" @@ -97,6 +105,7 @@ status: warning status-name: Pending price: $1200 + country: us - invoice: "00452" @@ -107,6 +116,7 @@ status: warning status-name: Pending price: $534 + country: us - invoice: "00450" @@ -117,6 +127,7 @@ status: secondary status-name: Due in 2 Weeks price: $1500 + country: us - invoice: "00450" @@ -127,6 +138,7 @@ status: danger status-name: Paid Today price: $648 + country: us - invoice: "00450" @@ -137,6 +149,7 @@ status: secondary status-name: Due in 3 Weeks price: $300 + country: us - invoice: "00450" @@ -147,6 +160,7 @@ status: success status-name: Paid Today price: $2500 + country: us - invoice: "00450" @@ -157,3 +171,4 @@ status: success status-name: Paid Today price: $940 + country: us diff --git a/pages/_docs/flags.md b/pages/_docs/flags.md index bbc945ee2c9e9362290f3c2ed5dc1e4644964896..430e68b66938a0c45a16cf266e690ad9620a9d71 100644 --- a/pages/_docs/flags.md +++ b/pages/_docs/flags.md @@ -18,5 +18,4 @@ menu: docs.flags {% include ui/flag.html name="br" class="flag-size-lg mr-1" %} {% include ui/flag.html name="pt" class="flag-size-md" %} {% include ui/flag.html name="gb" class="mr-1" %} -{% include ui/flag.html name="gr" class="flag-size-sm" %} {% endexample %} diff --git a/pages/_includes/cards/invoices.html b/pages/_includes/cards/invoices.html index 1ca20c96c4c30ad8cd2828b48cb3fc8b39ba1c99..39cabad212e44c725ef92119babbb1b5e4bde9ab 100644 --- a/pages/_includes/cards/invoices.html +++ b/pages/_includes/cards/invoices.html @@ -23,6 +23,7 @@ 00{{ forloop.index | plus: 1400 }} {{ invoice.name }} + {% include ui/flag.html name=invoice.country %} {{ invoice.client }} diff --git a/scss/_variables.scss b/scss/_variables.scss index 162840a7ec1b5ecc0aa0fab4e864cf02fc1c25dd..29df6827a780913db892e96e16bb7e376fed604c 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -147,7 +147,6 @@ $sizes: ( $generate-social-colors: true !default; $generate-color-hues: true !default; $generate-colors: true !default; -$generate-flags: true !default; $enable-gradients: false !default; @@ -232,3 +231,12 @@ $input-border-radius: $border-radius !default; $form-feedback-icon-valid: str-replace(url("data:image/svg+xml,"), "#", "%23") !default; $form-feedback-icon-invalid: str-replace(url("data:image/svg+xml,"), "#", "%23") !default; +/** +Flags + */ +$generate-flags: true !default; +$flag-sizes: ( + "md": 2rem, + "lg": 3rem, + "xl": 4rem +) !default; diff --git a/scss/ui/_flags.scss b/scss/ui/_flags.scss index a75a5435ddb90ddebcce2e629084baac435a9070..655ca4248005c718d165cab4a0b4ced54f7e7ff2 100644 --- a/scss/ui/_flags.scss +++ b/scss/ui/_flags.scss @@ -19,18 +19,14 @@ .flag { position: relative; display: inline-block; - width: 2em; - height: 2rem; - line-height: 2rem; + width: 1.125rem * 1.33333; + height: 1.125rem; background-repeat: no-repeat; - background-position: 50%; - background-size: contain; - border-radius: 2px; - vertical-align: bottom; - } - - .flag::before { - content: "\00a0"; + background-position: center; + background-size: cover; + border-radius: 3px; + border: 1px solid $border-color; + vertical-align: -3px; } @each $country in $countries { @@ -38,12 +34,11 @@ background-image: url("/img/flags/#{$country}.svg"); } } -} -@each $avatar-size, $size in $avatar-sizes { - .flag-size-#{$avatar-size} { - width: $size; - height: $size; - line-height: $size; + @each $flag-size, $size in $flag-sizes { + .flag-size-#{$flag-size} { + width: $size * 1.33333; + height: $size; + } } }