diff --git a/.stylelintrc.js b/.stylelintrc.js index 0626c5d..fd73e4e 100644 --- a/.stylelintrc.js +++ b/.stylelintrc.js @@ -1,9 +1,7 @@ module.exports = { - extends: ['stylelint-config-standard', 'stylelint-config-recommended-scss'], plugins: ['stylelint-scss', 'stylelint-order'], processor: ['stylelint-processor-html'], rules: { - 'no-empty-source': null, 'at-rule-name-space-after': 'always', 'at-rule-no-vendor-prefix': true, 'at-rule-semicolon-space-before': 'never', @@ -23,29 +21,19 @@ module.exports = { ] } ], - 'block-closing-brace-empty-line-before': null, - 'block-opening-brace-space-before': null, 'color-named': 'never', 'declaration-block-semicolon-newline-after': 'always-multi-line', 'declaration-block-semicolon-newline-before': 'never-multi-line', 'declaration-block-semicolon-space-after': 'always-single-line', - 'declaration-empty-line-before': null, - 'declaration-no-important': null, - 'font-family-name-quotes': null, - 'font-family-no-missing-generic-family-keyword': null, 'function-url-no-scheme-relative': true, 'function-url-quotes': 'always', - 'function-name-case': null, 'length-zero-no-unit': true, 'max-empty-lines': 1, - 'max-line-length': null, 'media-feature-name-no-vendor-prefix': true, 'media-feature-parentheses-space-inside': 'never', 'media-feature-range-operator-space-after': 'always', 'media-feature-range-operator-space-before': 'never', - 'no-descending-specificity': null, 'no-duplicate-selectors': true, - 'no-eol-whitespace': null, 'number-leading-zero': 'always', 'media-feature-name-no-unknown': [ true, @@ -276,15 +264,11 @@ module.exports = { 'selector-max-compound-selectors': 6, 'selector-max-empty-lines': 1, 'selector-max-id': 2, - 'selector-max-specificity': null, 'selector-max-type': 3, 'selector-max-universal': 1, 'selector-no-vendor-prefix': true, 'string-quotes': 'double', 'value-keyword-case': 'lower', - 'value-list-comma-newline-after': 'never-multi-line', - 'value-list-comma-newline-before': 'never-multi-line', - 'value-list-comma-space-after': 'always', - 'value-no-vendor-prefix': true + 'value-no-vendor-prefix': true, } }; diff --git a/package.json b/package.json index 4ab76fc..a39d84e 100644 --- a/package.json +++ b/package.json @@ -44,8 +44,6 @@ "sass-loader": "8.0.2", "standard-version": "7.1.0", "stylelint": "13.3.1", - "stylelint-config-recommended-scss": "4.2.0", - "stylelint-config-standard": "20.0.0", "stylelint-order": "4.0.0", "stylelint-scss": "3.16.1" }, diff --git a/src/flags/a.scss b/src/flags/a.scss index cfc6e95..e29876f 100644 --- a/src/flags/a.scss +++ b/src/flags/a.scss @@ -6,6 +6,10 @@ @include flagSymbol("\e901", #fff, 32%, 23%); } } +// Åland Islands +&-ax { + // +} // Albania &-al { background: #da291c; @@ -35,9 +39,9 @@ &::after { position: absolute; - top: 38%; - left: 48%; - font-size: $flag-size / 6; + top: 35%; + left: 55%; + font-size: $flag-size / 8; color: #d21034; content: "★"; transform: rotate(15deg); @@ -47,26 +51,10 @@ // American Samoa &-as { background: - linear-gradient( - -20deg, - #fff 31%, - transparent 15% - ) 0 $flag-size / 3 - linear-gradient( - -160deg, - #fff 31%, - transparent 15% - ) 0 $flag-size / 3 - linear-gradient( - -20deg, - #b00018 34%, - transparent 15% - ) 0 $flag-size / 3 - linear-gradient( - -160deg, - #b00018 34%, - transparent 15% - ) 0 $flag-size / 3 + linear-gradient(-20deg, #fff 31%,transparent 15%) 0 $flag-size / 3, + linear-gradient(-160deg, #fff 31%,transparent 15%) 0 $flag-size / 3, + linear-gradient(-20deg, #b00018 34%,transparent 15%) 0 $flag-size / 3, + linear-gradient(-160deg, #b00018 34%,transparent 15%) 0 $flag-size / 3, #000053; &::after { @@ -111,7 +99,7 @@ @include threePart(#4891d9, #fff, #4891d9); &::after { - @include flagBase64Symbol($emblem-ar, 35%, 25%, 18px, 18px); + @include flagBase64Symbol($emblem-ar, 33%, 26%, $flag-size / 3.2, $flag-size / 3.2); } } // Armenia diff --git a/src/flags/b.scss b/src/flags/b.scss index 25bad1f..39a7d75 100644 --- a/src/flags/b.scss +++ b/src/flags/b.scss @@ -1,36 +1,13 @@ // Bahamas &-bs { background: - linear-gradient( - 146deg, - #000 25%, - transparent 15% - ) 0 $flag-size * 0.95 - linear-gradient( - 34deg, - #000 25%, - transparent 15% - ) 0 $flag-size * 0.95 - linear-gradient( - to bottom, - #00a9ce, - #00a9ce calc(100% / 3), - #fdda24 calc(100% / 3), - #fdda24 calc(100% / 3 * 2), - #00a9ce calc(100% / 3 * 2), - #00a9ce 100% - ); + linear-gradient(146deg, #000 25%, transparent 15%) 0 $flag-size, + linear-gradient(34deg, #000 25%, transparent 15%) 0 $flag-size, + linear-gradient(to bottom, #00a9ce, #00a9ce calc(100% / 3), #fdda24 calc(100% / 3), #fdda24 calc(100% / 3 * 2), #00a9ce calc(100% / 3 * 2), #00a9ce 100%); } // Bahrain &-bh { - background: - linear-gradient( - 90deg, - #fff, - #fff 25%, - #ce1126 25%, - #ce1126 100% - ); + background: linear-gradient(90deg, #fff, #fff 25%, #ce1126 25%, #ce1126 100%); &::before { position: absolute; @@ -40,36 +17,21 @@ height: 100%; content: ""; background: - linear-gradient( - 154deg, - #fff 35%, - transparent 31% - ) 0 $flag-height / 10 - linear-gradient( - 24deg, - #fff 35%, - transparent 31% - ) 0 $flag-width / 5; + linear-gradient(154deg, #fff 35%, transparent 31% ) 0 $flag-height / 10, + linear-gradient(24deg, #fff 35%, transparent 31% ) 0 $flag-width / 5; background-size: $flag-height / 5 $flag-height / 5; } } // Bangladesh &-bd { - background: - radial-gradient( - $flag-size / 1.75 at 40% 50%, - #f42a41, - #f42a41 35%, - transparent 35%, - transparent 100% - ) #006a4e; + background: radial-gradient($flag-size / 1.75 at 40% 50%, #f42a41, #f42a41 35%, transparent 35%, transparent 100% ) #006a4e; } // Barbados &-bb { @include threePart(#012169, #ffc726, #012169, to right); &::before { - @include flagSymbol("\e906", #000, 32%, 20%, $flag-size / 3); + @include flagSymbol("\e906", #000, 34%, 20%, $flag-size / 3); } } // Belarus @@ -86,15 +48,7 @@ } // Belize &-bz { - background: - linear-gradient( - to bottom, - #ce1126 15%, - #052d74 15%, - #052d74 85%, - #ce1126 85%, - #ce1126 100% - ); + background: linear-gradient( to bottom, #ce1126 15%, #052d74 15%, #052d74 85%, #ce1126 85%, #ce1126 100%); } // Benin &-bj { @@ -106,12 +60,7 @@ } // Bhutan &-bt { - background: - linear-gradient( - 146.5deg, - #ffd520 50%, - #ff4e12 50% - ); + background: linear-gradient(146.5deg, #ffd520 50%, #ff4e12 50%); } // Bolivia &-bo { @@ -161,29 +110,29 @@ 149deg, #009b3a 30%, transparent 25% - ) + ), linear-gradient( -149deg, #009b3a 30%, transparent 25% - ) + ), linear-gradient( -30deg, #009b3a 30%, transparent 25% - ) + ), linear-gradient( 30deg, #009b3a 30%, transparent 25% - ) + ), radial-gradient( $flag-size / 2 at 50% 50%, transparent 0, transparent 35%, #fedf00 35%, #fedf00 100% - ) + ), radial-gradient( $flag-size at 40% 96%, transparent 0, @@ -192,7 +141,7 @@ #fff 39%, transparent 39%, transparent 100% - ) #002776; + ), #002776; } // British Indian Ocean Territory &-io { diff --git a/stories/countries.const.js b/stories/countries.const.js index 23b325d..d32ba8d 100644 --- a/stories/countries.const.js +++ b/stories/countries.const.js @@ -25,7 +25,7 @@ export const COUNTRY_CODES = [ { name: 'Benin', code: 'BJ'}, { name: 'Bermuda', code: 'BM'}, { name: 'Bhutan', code: 'BT'}, - { name: 'Bolivia, Plurinational State of', code: 'BO'}, + { name: 'Plurinational State of Bolivia', code: 'BO'}, { name: 'Bonaire, Sint Eustatius and Saba', code: 'BQ'}, { name: 'Bosnia and Herzegovina', code: 'BA'}, { name: 'Botswana', code: 'BW'}, @@ -50,10 +50,10 @@ export const COUNTRY_CODES = [ { name: 'Colombia', code: 'CO'}, { name: 'Comoros', code: 'KM'}, { name: 'Congo', code: 'CG'}, - { name: 'Congo, the Democratic Republic of the', code: 'CD'}, + { name: 'Democratic Republic of Congo', code: 'CD'}, { name: 'Cook Islands', code: 'CK'}, { name: 'Costa Rica', code: 'CR'}, - { name: 'Côte d`Ivoire', code: 'CI'}, + { name: 'Côte d\'Ivoire', code: 'CI'}, { name: 'Croatia', code: 'HR'}, { name: 'Cuba', code: 'CU'}, { name: 'Curaçao', code: 'CW'}, @@ -116,11 +116,11 @@ export const COUNTRY_CODES = [ { name: 'Kazakhstan', code: 'KZ'}, { name: 'Kenya', code: 'KE'}, { name: 'Kiribati', code: 'KI'}, - { name: 'Korea, Democratic People`s Republic of', code: 'KP'}, + { name: 'Democratic People\'s Republic of Korea', code: 'KP'}, { name: 'Korea, Republic of', code: 'KR'}, { name: 'Kuwait', code: 'KW'}, { name: 'Kyrgyzstan', code: 'KG'}, - { name: 'Lao People`s Democratic Republic', code: 'LA'}, + { name: 'Lao People\'s Democratic Republic', code: 'LA'}, { name: 'Latvia', code: 'LV'}, { name: 'Lebanon', code: 'LB'}, { name: 'Lesotho', code: 'LS'}, @@ -130,7 +130,7 @@ export const COUNTRY_CODES = [ { name: 'Lithuania', code: 'LT'}, { name: 'Luxembourg', code: 'LU'}, { name: 'Macao', code: 'MO'}, - { name: 'Macedonia, the Former Yugoslav Republic of', code: 'MK'}, + { name: 'Former Yugoslav Republic of Macedonia', code: 'MK'}, { name: 'Madagascar', code: 'MG'}, { name: 'Malawi', code: 'MW'}, { name: 'Malaysia', code: 'MY'}, @@ -143,7 +143,7 @@ export const COUNTRY_CODES = [ { name: 'Mauritius', code: 'MU'}, { name: 'Mayotte', code: 'YT'}, { name: 'Mexico', code: 'MX'}, - { name: 'Micronesia, Federated States of', code: 'FM'}, + { name: 'Federated States of Micronesia', code: 'FM'}, { name: 'Moldova, Republic of', code: 'MD'}, { name: 'Monaco', code: 'MC'}, { name: 'Mongolia', code: 'MN'}, @@ -239,8 +239,8 @@ export const COUNTRY_CODES = [ { name: 'Uruguay', code: 'UY'}, { name: 'Uzbekistan', code: 'UZ'}, { name: 'Vanuatu', code: 'VU'}, - { name: 'Venezuela, Bolivarian Republic of', code: 'VE'}, - { name: 'Viet Nam', code: 'VN'}, + { name: 'Bolivarian Republic of Venezuela', code: 'VE'}, + { name: 'Vietnam', code: 'VN'}, { name: 'Virgin Islands, British', code: 'VG'}, { name: 'Virgin Islands, U.S.', code: 'VI'}, { name: 'Wallis and Futuna', code: 'WF'}, diff --git a/stories/index.scss b/stories/index.scss index 29c718b..b0c30cd 100644 --- a/stories/index.scss +++ b/stories/index.scss @@ -2,30 +2,41 @@ body { font-family: Arial, Helvetica, sans-serif; } -p { - margin: 0; +.label { + display: block; + width: 75%; + height: 12px; + overflow: hidden; font-size: 12px; + text-overflow: ellipsis; + white-space: nowrap; + background: #d0d0d0; + border-radius: 16px; @extend .padding; } .wrapper { float: left; + width: 50%; - @media screen and (max-width: 640px) { - width: 50%; + @media screen and (min-width: 640px) { + width: 33.33333%; } - @media screen and (max-width: 1280px) { - width: 33.33333%; + @media screen and (min-width: 768px) { + width: 25%; } + @media screen and (min-width: 1024px) { + width: 12.5%; + } } .padding { - padding: 10px 5px; + padding: 10px; } .margin { - margin: 5px; + margin: 20px 0; } diff --git a/stories/index.stories.js b/stories/index.stories.js index 0f98fa2..403c856 100644 --- a/stories/index.stories.js +++ b/stories/index.stories.js @@ -5,9 +5,9 @@ export default { }; export const Flags = () => `
${COUNTRY_CODES.map(country => `
-
-

${country.name}

-
- ` +
+
${country.name} / [${country.code}]
+
+ ` ).toString().replace(/,/g, '')}`; diff --git a/yarn.lock b/yarn.lock index 1f34c23..3e94235 100644 --- a/yarn.lock +++ b/yarn.lock @@ -8479,25 +8479,6 @@ style-search@^0.1.0: resolved "https://registry.yarnpkg.com/style-search/-/style-search-0.1.0.tgz#7958c793e47e32e07d2b5cafe5c0bf8e12e77902" integrity sha1-eVjHk+R+MuB9K1yv5cC/jhLneQI= -stylelint-config-recommended-scss@4.2.0: - version "4.2.0" - resolved "https://registry.yarnpkg.com/stylelint-config-recommended-scss/-/stylelint-config-recommended-scss-4.2.0.tgz#3ad3fc858215cfd16a0f90aecf1ac0ea8a3e6971" - integrity sha512-4bI5BYbabo/GCQ6LbRZx/ZlVkK65a1jivNNsD+ix/Lw0U3iAch+jQcvliGnnAX8SUPaZ0UqzNVNNAF3urswa7g== - dependencies: - stylelint-config-recommended "^3.0.0" - -stylelint-config-recommended@^3.0.0: - version "3.0.0" - resolved "https://registry.yarnpkg.com/stylelint-config-recommended/-/stylelint-config-recommended-3.0.0.tgz#e0e547434016c5539fe2650afd58049a2fd1d657" - integrity sha512-F6yTRuc06xr1h5Qw/ykb2LuFynJ2IxkKfCMf+1xqPffkxh0S09Zc902XCffcsw/XMFq/OzQ1w54fLIDtmRNHnQ== - -stylelint-config-standard@20.0.0: - version "20.0.0" - resolved "https://registry.yarnpkg.com/stylelint-config-standard/-/stylelint-config-standard-20.0.0.tgz#06135090c9e064befee3d594289f50e295b5e20d" - integrity sha512-IB2iFdzOTA/zS4jSVav6z+wGtin08qfj+YyExHB3LF9lnouQht//YyB0KZq9gGz5HNPkddHOzcY8HsUey6ZUlA== - dependencies: - stylelint-config-recommended "^3.0.0" - stylelint-order@4.0.0: version "4.0.0" resolved "https://registry.yarnpkg.com/stylelint-order/-/stylelint-order-4.0.0.tgz#2a945c2198caac3ff44687d7c8582c81d044b556"