diff --git a/gulp/Documentation.js b/gulp/Documentation.js index 96fcae499..8c540f238 100644 --- a/gulp/Documentation.js +++ b/gulp/Documentation.js @@ -12,45 +12,45 @@ var filePath = ''; var build = ''; var jsonData = []; var templateData, - hbsoptions = { - ignorePartials: true, - partials : {}, - batch : [Config.paths.srcDocTemplateModulesComponents], - helpers : {} - } + hbsoptions = { + ignorePartials: true, + partials: {}, + batch: [Config.paths.srcDocTemplateModulesComponents], + helpers: {} + } // // Clean/Delete Tasks // ---------------------------------------------------------------------------- function documentationNuke(done) { - Plugins.del.sync([Config.paths.distDocumentation]); - done(); + Plugins.del.sync([Config.paths.distDocumentation]); + done(); }; // // Build Documentation Styles // ---------------------------------------------------------------------------- function documentationBuildStyles() { - return gulp.src(Config.paths.srcDocumentationCSS + '/' + 'docs.scss') - .pipe(Plugins.plumber(ErrorHandling.onErrorInPipe)) - .pipe(Plugins.debug({ - title: "Building Documentation SASS " + BuildConfig.fileExtension + " File" - })) - .pipe(Plugins.header(Banners.getBannerTemplate(), Banners.getBannerData())) - .pipe(Plugins.header(Banners.getCSSCopyRight(), Banners.getBannerData())) - .pipe(BuildConfig.processorPlugin().on('error', BuildConfig.compileErrorHandler)) - .pipe(Plugins.rename('docs.css')) - .pipe(Plugins.autoprefixer({ - cascade: false - })) - .pipe(Plugins.cssbeautify()) - .pipe(Plugins.csscomb()) - .pipe(gulp.dest(Config.paths.distDocumentationCSS)) - .pipe(Plugins.rename('docs.min.css')) - .pipe(Plugins.cssMinify()) - .pipe(Plugins.header(Banners.getBannerTemplate(), Banners.getBannerData())) - .pipe(Plugins.header(Banners.getCSSCopyRight(), Banners.getBannerData())) - .pipe(gulp.dest(Config.paths.distDocumentationCSS)); + return gulp.src(Config.paths.srcDocumentationCSS + '/' + 'docs.scss') + .pipe(Plugins.plumber(ErrorHandling.onErrorInPipe)) + .pipe(Plugins.debug({ + title: "Building Documentation SASS " + BuildConfig.fileExtension + " File" + })) + .pipe(Plugins.header(Banners.getBannerTemplate(), Banners.getBannerData())) + .pipe(Plugins.header(Banners.getCSSCopyRight(), Banners.getBannerData())) + .pipe(BuildConfig.processorPlugin().on('error', BuildConfig.compileErrorHandler)) + .pipe(Plugins.rename('docs.css')) + .pipe(Plugins.autoprefixer({ + cascade: false + })) + .pipe(Plugins.cssbeautify()) + .pipe(Plugins.csscomb()) + .pipe(gulp.dest(Config.paths.distDocumentationCSS)) + .pipe(Plugins.rename('docs.min.css')) + .pipe(Plugins.cssMinify()) + .pipe(Plugins.header(Banners.getBannerTemplate(), Banners.getBannerData())) + .pipe(Plugins.header(Banners.getCSSCopyRight(), Banners.getBannerData())) + .pipe(gulp.dest(Config.paths.distDocumentationCSS)); }; // @@ -58,18 +58,24 @@ function documentationBuildStyles() { // ---------------------------------------------------------------------------- function prepareHandlebars(cb) { var modelFiles = fs.readdirSync(Config.paths.srcDocumentationModels); - var jsonFile; - var jsonFileName; + // Loop through DocumentationModels and parse JSON data for (var i = 0; i < modelFiles.length; i++) { - jsonFile = fs.readFileSync(Config.paths.srcDocumentationModels + '/' + modelFiles[i], 'utf8'); - jsonFileName = modelFiles[i].replace('.json', ''); + const jsonFile = fs.readFileSync(Config.paths.srcDocumentationModels + '/' + modelFiles[i], 'utf8'); + const jsonFileName = modelFiles[i].replace('.json', ''); jsonData[jsonFileName] = JSON.parse(jsonFile); } // Grab Icon data (in separate folder /src/data/) and parse data - jsonFile = fs.readFileSync(Config.paths.srcData + '/' + 'icons.json', 'utf8'); - jsonData['icons'] = JSON.parse(jsonFile); + const iconData = fs.readFileSync(Config.paths.srcData + '/' + 'icons.json', 'utf8'); + jsonData['icons'] = JSON.parse(iconData); + + const brandIcons = fs.readFileSync(Config.paths.srcData + '/' + 'brand-icons.json', 'utf8'); + jsonData['brandIcons'] = JSON.parse(brandIcons); + + const fileTypeIcons = fs.readFileSync(Config.paths.srcData + '/' + 'file-type-icons.json', 'utf8'); + jsonData['fileTypeIcons'] = JSON.parse(fileTypeIcons); + templateData = jsonData; cb(); }; @@ -79,38 +85,38 @@ function prepareHandlebars(cb) { // ---------------------------------------------------------------------------- function documentationPages() { return gulp.src(Config.paths.srcDocsPages + "/**/index.html") - .pipe(Plugins.plumber(ErrorHandling.oneErrorInPipe)) - .pipe(Plugins.debug({ - title: "Building Documentation Page File to " + Config.paths.distDocumentation - })) - .pipe(Plugins.handlebars(templateData, hbsoptions)) - .pipe(Plugins.fileinclude({ - context: { - filePath: filePath, - build: build - } - })) - .pipe(gulp.dest(Config.paths.distDocumentation)); + .pipe(Plugins.plumber(ErrorHandling.oneErrorInPipe)) + .pipe(Plugins.debug({ + title: "Building Documentation Page File to " + Config.paths.distDocumentation + })) + .pipe(Plugins.handlebars(templateData, hbsoptions)) + .pipe(Plugins.fileinclude({ + context: { + filePath: filePath, + build: build + } + })) + .pipe(gulp.dest(Config.paths.distDocumentation)); }; // // Build index page // ---------------------------------------------------------------------------- function documentationIndexPage() { - return gulp.src(Config.paths.srcTemplate + '/documentation-template.html') - .pipe(Plugins.plumber(ErrorHandling.oneErrorInPipe)) - .pipe(Plugins.debug({ - title: "Building Documentation File to " + Config.paths.distDocumentation - })) - .pipe(Plugins.handlebars(templateData, hbsoptions)) - .pipe(Plugins.fileinclude({ - context: { - filePath: filePath, - build: build - } - })) - .pipe(Plugins.rename('index.html')) - .pipe(gulp.dest(Config.paths.distDocumentation)); + return gulp.src(Config.paths.srcTemplate + '/documentation-template.html') + .pipe(Plugins.plumber(ErrorHandling.oneErrorInPipe)) + .pipe(Plugins.debug({ + title: "Building Documentation File to " + Config.paths.distDocumentation + })) + .pipe(Plugins.handlebars(templateData, hbsoptions)) + .pipe(Plugins.fileinclude({ + context: { + filePath: filePath, + build: build + } + })) + .pipe(Plugins.rename('index.html')) + .pipe(gulp.dest(Config.paths.distDocumentation)); }; // diff --git a/package.json b/package.json index b73915ecb..b0929aed9 100644 --- a/package.json +++ b/package.json @@ -5,7 +5,9 @@ "description": "The front-end framework for building experiences for Office 365.", "license": "MIT", "scripts": { - "test": "gulp" + "test": "gulp", + "start": "gulp watch", + "build": "gulp" }, "browserslist": [ "last 1 version", @@ -56,4 +58,4 @@ "typescript": "^2.0.3", "walk-sync": "^0.3.0" } -} +} \ No newline at end of file diff --git a/src/data/brand-icons.json b/src/data/brand-icons.json new file mode 100644 index 000000000..7f6e5d485 --- /dev/null +++ b/src/data/brand-icons.json @@ -0,0 +1,44 @@ +[ + { + "name": "access" + }, + { + "name": "excel" + }, + { + "name": "infopath" + }, + { + "name": "m365" + }, + { + "name": "office" + }, + { + "name": "onedrive" + }, + { + "name": "onenote" + }, + { + "name": "outlook" + }, + { + "name": "powerpoint" + }, + { + "name": "project" + }, + { + "name": "sharepoint" + }, + { + "name": "teams" + }, + { + "name": "visio" + }, + { + "name": "word" + } +] diff --git a/src/data/file-type-icons.json b/src/data/file-type-icons.json new file mode 100644 index 000000000..a1d825e89 --- /dev/null +++ b/src/data/file-type-icons.json @@ -0,0 +1,134 @@ +[ + { + "name": "accdb" + }, + { + "name": "archive" + }, + { + "name": "audio" + }, + { + "name": "code" + }, + { + "name": "csv" + }, + { + "name": "docset" + }, + { + "name": "docx" + }, + { + "name": "dotx" + }, + { + "name": "email" + }, + { + "name": "exe" + }, + { + "name": "folder" + }, + { + "name": "font" + }, + { + "name": "genericfile" + }, + { + "name": "html" + }, + { + "name": "link" + }, + { + "name": "listitem" + }, + { + "name": "model" + }, + { + "name": "mpp" + }, + { + "name": "mpt" + }, + { + "name": "one" + }, + { + "name": "onepkg" + }, + { + "name": "onetoc" + }, + { + "name": "pdf" + }, + { + "name": "photo" + }, + { + "name": "potx" + }, + { + "name": "ppsx" + }, + { + "name": "pptx" + }, + { + "name": "pub" + }, + { + "name": "rtf" + }, + { + "name": "sharedfolder" + }, + { + "name": "spo" + }, + { + "name": "sysfile" + }, + { + "name": "txt" + }, + { + "name": "vector" + }, + { + "name": "video" + }, + { + "name": "vsdx" + }, + { + "name": "vssx" + }, + { + "name": "vstx" + }, + { + "name": "xlsx" + }, + { + "name": "xls" + }, + { + "name": "xltx" + }, + { + "name": "xml" + }, + { + "name": "xsn" + }, + { + "name": "zip" + } +] diff --git a/src/documentation/pages/BrandIcons/index.html b/src/documentation/pages/BrandIcons/index.html new file mode 100644 index 000000000..0afefedb5 --- /dev/null +++ b/src/documentation/pages/BrandIcons/index.html @@ -0,0 +1,21 @@ +@@include('../../templates/modules/components/DocumentationPageHeader.html') +
+

Brand and File type Icons

+
+

Brand Icons

+ +
+
+

File Type Icons

+ +
+
+@@include('../../templates/modules/components/DocumentationPageFooter.html') \ No newline at end of file diff --git a/src/documentation/sass/_IconsSection.scss b/src/documentation/sass/_IconsSection.scss index 144aa1531..3827d3ae9 100644 --- a/src/documentation/sass/_IconsSection.scss +++ b/src/documentation/sass/_IconsSection.scss @@ -1,17 +1,16 @@ -#body-content { // Office Dev overrides +#body-content { + // Office Dev overrides .docs-IconList { - ul { margin: 0; margin-bottom: 20px; - + display: flex; + flex-wrap: wrap; li { - float: left; font-size: $ms-font-size-xs; color: $ms-color-neutralSecondary; text-align: center; width: 33.3%; - height: 138px; padding: 10px; overflow: hidden; background-color: $ms-color-neutralLighterAlt; @@ -30,7 +29,6 @@ margin-right: 1%; margin-bottom: 1%; min-height: 124px; - height: 100px; } .ms-Icon { @@ -48,12 +46,7 @@ width: 100%; font-size: $ms-font-size-s; } - } - } - } - } - diff --git a/src/documentation/templates/modules/components/BrandIconPageItem.hbs b/src/documentation/templates/modules/components/BrandIconPageItem.hbs new file mode 100644 index 000000000..38dbc0d0f --- /dev/null +++ b/src/documentation/templates/modules/components/BrandIconPageItem.hbs @@ -0,0 +1,6 @@ +
  • +
    +
    +
    + ms-BrandIcon--{{name}} +
    • diff --git a/src/documentation/templates/modules/components/DocumentationPageHeader.html b/src/documentation/templates/modules/components/DocumentationPageHeader.html index 613a25137..29b18c4fe 100644 --- a/src/documentation/templates/modules/components/DocumentationPageHeader.html +++ b/src/documentation/templates/modules/components/DocumentationPageHeader.html @@ -1,19 +1,23 @@ + Office Fabric UI Core Documentation - + + -
    +
    -
    - @@include('./Navigation.html') + Office UI Fabric +
    + Github +
    +
    +
    + @@include('./Navigation.html') \ No newline at end of file diff --git a/src/documentation/templates/modules/components/Navigation.html b/src/documentation/templates/modules/components/Navigation.html index 4567c34d3..ed806340c 100644 --- a/src/documentation/templates/modules/components/Navigation.html +++ b/src/documentation/templates/modules/components/Navigation.html @@ -1,25 +1,36 @@
    - +
    \ No newline at end of file diff --git a/src/sass/_BrandIcon.scss b/src/sass/_BrandIcon.scss index 11d8973fb..61c36aa59 100644 --- a/src/sass/_BrandIcon.scss +++ b/src/sass/_BrandIcon.scss @@ -1,5 +1,6 @@ // Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. +@import './variables/CDN.Variables'; @include ms-brand-icon-classes('1'); @include ms-brand-icon-size-classes(); @@ -22,87 +23,87 @@ // a future release. Until then, they are mapped to 'one' and 'xlsx'. .ms-BrandIcon--onepkg.ms-BrandIcon--icon16 { - background-image: url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16/one.png); + background-image: url('#{$ms-cdn-path}/item-types/16/one.png'); } .ms-BrandIcon--onepkg.ms-BrandIcon--icon48 { - background-image: url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48/one.png); + background-image: url('#{$ms-cdn-path}/item-types/48/one.png'); } .ms-BrandIcon--onepkg.ms-BrandIcon--icon96 { - background-image: url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96/one.png); + background-image: url('#{$ms-cdn-path}/item-types/96/one.png'); } .ms-BrandIcon--xls.ms-BrandIcon--icon16 { - background-image: url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16/xlsx.png); + background-image: url('#{$ms-cdn-path}/item-types/16/xlsx.png'); } .ms-BrandIcon--xls.ms-BrandIcon--icon48 { - background-image: url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48/xlsx.png); + background-image: url('#{$ms-cdn-path}/item-types/48/xlsx.png'); } .ms-BrandIcon--xls.ms-BrandIcon--icon96 { - background-image: url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96/xlsx.png); + background-image: url('#{$ms-cdn-path}/item-types/96/xlsx.png'); } @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 144dpi) { .ms-BrandIcon--onepkg.ms-BrandIcon--icon16 { - background-image: url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_1.5x/one.png); + background-image: url('#{$ms-cdn-path}/item-types/16_1.5x/one.png'); } .ms-BrandIcon--onepkg.ms-BrandIcon--icon48 { - background-image: url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_1.5x/one.png); + background-image: url('#{$ms-cdn-path}/item-types/48_1.5x/one.png'); } .ms-BrandIcon--onepkg.ms-BrandIcon--icon96 { - background-image: url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_1.5x/one.png); + background-image: url('#{$ms-cdn-path}/item-types/96_1.5x/one.png'); } .ms-BrandIcon--xls.ms-BrandIcon--icon16 { - background-image: url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_1.5x/xlsx.png); + background-image: url('#{$ms-cdn-path}/item-types/16_1.5x/xlsx.png'); } .ms-BrandIcon--xls.ms-BrandIcon--icon48 { - background-image: url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_1.5x/xlsx.png); + background-image: url('#{$ms-cdn-path}/item-types/48_1.5x/xlsx.png'); } .ms-BrandIcon--xls.ms-BrandIcon--icon96 { - background-image: url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_1.5x/xlsx.png); + background-image: url('#{$ms-cdn-path}/item-types/96_1.5x/xlsx.png'); } } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi) { .ms-BrandIcon--onepkg.ms-BrandIcon--icon16 { - background-image: url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_2x/one.png); + background-image: url('#{$ms-cdn-path}/item-types/16_2x/one.png'); } .ms-BrandIcon--onepkg.ms-BrandIcon--icon48 { - background-image: url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_2x/one.png); + background-image: url('#{$ms-cdn-path}/item-types/48_2x/one.png'); } .ms-BrandIcon--onepkg.ms-BrandIcon--icon96 { - background-image: url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_2x/one.png); + background-image: url('#{$ms-cdn-path}/item-types/96_2x/one.png'); } .ms-BrandIcon--xls.ms-BrandIcon--icon16 { - background-image: url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_2x/xlsx.png); + background-image: url('#{$ms-cdn-path}/item-types/16_2x/xlsx.png'); } .ms-BrandIcon--xls.ms-BrandIcon--icon48 { - background-image: url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_2x/xlsx.png); + background-image: url('#{$ms-cdn-path}/item-types/48_2x/xlsx.png'); } .ms-BrandIcon--xls.ms-BrandIcon--icon96 { - background-image: url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_2x/xlsx.png); + background-image: url('#{$ms-cdn-path}/item-types/96_2x/xlsx.png'); } } @media only screen and (-webkit-min-device-pixel-ratio: 3), only screen and (min-resolution: 288dpi) { .ms-BrandIcon--onepkg.ms-BrandIcon--icon16 { - background-image: url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_3x/one.png); + background-image: url('#{$ms-cdn-path}/item-types/16_3x/one.png'); } .ms-BrandIcon--onepkg.ms-BrandIcon--icon48 { - background-image: url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_3x/one.png); + background-image: url('#{$ms-cdn-path}/item-types/48_3x/one.png'); } .ms-BrandIcon--onepkg.ms-BrandIcon--icon96 { - background-image: url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_3x/one.png); + background-image: url('#{$ms-cdn-path}/item-types/96_3x/one.png'); } .ms-BrandIcon--xls.ms-BrandIcon--icon16 { - background-image: url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_3x/xlsx.png); + background-image: url('#{$ms-cdn-path}/item-types/16_3x/xlsx.png'); } .ms-BrandIcon--xls.ms-BrandIcon--icon48 { - background-image: url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_3x/xlsx.png); + background-image: url('#{$ms-cdn-path}/item-types/48_3x/xlsx.png'); } .ms-BrandIcon--xls.ms-BrandIcon--icon96 { - background-image: url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_3x/xlsx.png); + background-image: url('#{$ms-cdn-path}/item-types/96_3x/xlsx.png'); } } diff --git a/src/sass/variables/_BrandIcon.Variables.scss b/src/sass/variables/_BrandIcon.Variables.scss index 04eb10caa..e328b1e9d 100644 --- a/src/sass/variables/_BrandIcon.Variables.scss +++ b/src/sass/variables/_BrandIcon.Variables.scss @@ -1,12 +1,14 @@ // Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. +@import './_CDN.Variables.scss'; + // Image paths -$ms-brand-icon-product-images-path: 'https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png'; -$ms-brand-icon-document-images-path: 'https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent'; +$ms-brand-icon-product-images-path: '#{$ms-cdn-path}/brand-icons/product/png'; +$ms-brand-icon-document-images-path: '#{$ms-cdn-path}/item-types'; // Names -$ms-brand-icon-product-icons: access excel infopath office onedrive onenote outlook powerpoint project sharepoint teams visio word; -$ms-brand-icon-document-icons: accdb archive audio code csv docset docx dotx email exe folder font genericfile html link listitem model mpp mpt odp ods odt one onetoc pdf photo potx ppsx pptx pub rtf sharedfolder spo sysfile txt vector video vsdx vssx vstx xlsx xltx xml xsn zip; +$ms-brand-icon-product-icons: access excel infopath m365 office onedrive onenote outlook powerpoint project sharepoint teams visio word; +$ms-brand-icon-document-icons: accdb archive audio code csv docset docx dotx email exe folder font genericfile html link listitem model mpp mpt one onetoc pdf photo potx ppsx pptx pub rtf sharedfolder spo sysfile txt vector video vsdx vssx vstx xlsx xltx xml xsn zip; // Sizes $ms-brand-icon-sizes: 16 48 96; diff --git a/src/sass/variables/_CDN.Variables.scss b/src/sass/variables/_CDN.Variables.scss new file mode 100644 index 000000000..1a4991725 --- /dev/null +++ b/src/sass/variables/_CDN.Variables.scss @@ -0,0 +1,6 @@ +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +// CDN path and build date variables + +$ms-cdn-build-date: '20221201.001'; +$ms-cdn-path: 'https://res-1.cdn.office.net/files/fabric-cdn-prod_#{$ms-cdn-build-date}/assets' !default; \ No newline at end of file diff --git a/src/sass/variables/_Font.Variables.scss b/src/sass/variables/_Font.Variables.scss index a4dfb9e66..b24ef48c0 100644 --- a/src/sass/variables/_Font.Variables.scss +++ b/src/sass/variables/_Font.Variables.scss @@ -1,7 +1,9 @@ // Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. +@import './CDN.Variables'; + // Font directory and paths -$ms-font-cdn-path: 'https://static2.sharepointonline.com/files/fabric/assets/fonts' !default; +$ms-font-cdn-path: '#{$ms-cdn-path}/fonts' !default; // Fallback fonts, if specified system or web fonts are unavailable. $ms-font-family-fallbacks: 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif !default; diff --git a/src/sass/variables/_Icon.Variables.scss b/src/sass/variables/_Icon.Variables.scss index 1dfc57d82..7dab79db3 100644 --- a/src/sass/variables/_Icon.Variables.scss +++ b/src/sass/variables/_Icon.Variables.scss @@ -1,7 +1,9 @@ // Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. +@import './CDN.Variables'; + // Icon directory and paths -$ms-icon-cdn-path: 'https://static2.sharepointonline.com/files/fabric/assets/icons' !default; +$ms-icon-cdn-path: '#{$ms-cdn-path}/icons' !default; // Sizes $ms-icon-size-xs: 10px;