From c63f70c73458270d9f2c21bd7691e3ca8452cca2 Mon Sep 17 00:00:00 2001 From: "CJ Cenizal (MacBook Air)" Date: Thu, 21 Apr 2016 15:07:26 -0700 Subject: [PATCH] Remove SCSS dependency and convert all .scss files into .css. --- README.md | 13 +- dist/styles.css | 569 +++++++++++------- package.json | 5 +- src/index.css | 11 + src/index.scss | 11 - .../{card-group.scss => card-group.css} | 6 +- src/styles/{card.scss => card.css} | 0 .../{centered-icon.scss => centered-icon.css} | 8 +- ...ntered-prompt.scss => centered-prompt.css} | 8 +- .../{feature-list.scss => feature-list.css} | 14 +- .../{form-footer.scss => form-footer.css} | 12 +- src/styles/{side-bar.scss => side-bar.css} | 10 +- .../{site-header.scss => site-header.css} | 18 +- .../{stepper-input.scss => stepper-input.css} | 0 src/styles/{tabs.scss => tabs.css} | 8 +- 15 files changed, 400 insertions(+), 293 deletions(-) create mode 100644 src/index.css delete mode 100644 src/index.scss rename src/styles/{card-group.scss => card-group.css} (95%) rename src/styles/{card.scss => card.css} (100%) rename src/styles/{centered-icon.scss => centered-icon.css} (86%) rename src/styles/{centered-prompt.scss => centered-prompt.css} (93%) rename src/styles/{feature-list.scss => feature-list.css} (88%) rename src/styles/{form-footer.scss => form-footer.css} (88%) rename src/styles/{side-bar.scss => side-bar.css} (88%) rename src/styles/{site-header.scss => site-header.css} (81%) rename src/styles/{stepper-input.scss => stepper-input.css} (100%) rename src/styles/{tabs.scss => tabs.css} (83%) diff --git a/README.md b/README.md index 7034570..dc39d53 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # Flexbox Patterns -This repository contains the original SCSS used for the +This repository contains the original CSS used for the components at [www.flexboxpatterns.com](http://www.flexboxpatterns.com). Feel free to use these styles however you like! @@ -10,14 +10,11 @@ Assuming you have Node installed, you can install the project dependencies with `npm install`. This will install PostCSS and Autoprefixer; two critical tools for making your CSS cross-browser compatible. -This project also requires you have [SASS](http://sass-lang.com/) installed -(`sudo gem install sass`). - ## Commands `npm run build` -I've chosen to write the styles with SCSS since it's widely adopted and I've -found that it makes me more productive. This command will compile the SCSS into -CSS and add various vendor-prefixed properties. Open up `dist/index.html` -to see a demo page of the various flexbox patterns in the browser. +This command will concatenate the source CSS files into a single CSS file, and +then use PostCSS to add various vendor-prefixed properties. Open up +`dist/index.html` to see a demo page of the various flexbox patterns in the +browser. diff --git a/dist/styles.css b/dist/styles.css index 4fc754f..b00da20 100644 --- a/dist/styles.css +++ b/dist/styles.css @@ -1,3 +1,7 @@ + +/*===================================================== + contents of: styles/stepper-input.css + =====================================================*/ .stepperInput { /** * Setting display to flex makes this container lay @@ -8,13 +12,15 @@ */ display: -webkit-flex; display: -ms-flexbox; - display: flex; } + display: flex; +} -.stepperInput__input { - border-left: 0; - border-right: 0; - width: 60px; - text-align: center; } + .stepperInput__input { + border-left: 0; + border-right: 0; + width: 60px; + text-align: center; + } .button { cursor: pointer; @@ -23,22 +29,28 @@ background-color: #4EBBE4; font-size: 12px; border: 1px solid #16A2D7; - border-radius: 4px; } + border-radius: 4px; +} .button--addOnLeft { border-top-right-radius: 0; - border-bottom-right-radius: 0; } + border-bottom-right-radius: 0; +} .button--addOnRight { border-top-left-radius: 0; - border-bottom-left-radius: 0; } + border-bottom-left-radius: 0; +} .input { border: 1px solid #D7DBDD; padding: 0 10px; border-radius: 0; - box-shadow: none; } - + box-shadow: none; +} +/*===================================================== + contents of: styles/tabs.css + =====================================================*/ .tabs { /** * Setting display to flex makes this container lay @@ -48,17 +60,25 @@ display: -webkit-flex; display: -ms-flexbox; display: flex; - border-bottom: 1px solid #D7DBDD; } -.tab { - cursor: pointer; - padding: 5px 30px; - color: #16A2D7; - font-size: 12px; - border-bottom: 2px solid transparent; } + border-bottom: 1px solid #D7DBDD; +} + + .tab { + cursor: pointer; + padding: 5px 30px; + color: #16A2D7; + font-size: 12px; + border-bottom: 2px solid transparent; + } + .tab.is-tab-selected { - border-bottom-color: #4EBBE4; } + border-bottom-color: #4EBBE4; + } +/*===================================================== + contents of: styles/site-header.css + =====================================================*/ .siteHeader { /** * Lay out the children of this container with @@ -67,6 +87,7 @@ display: -webkit-flex; display: -ms-flexbox; display: flex; + /** * Make the container put as much space as possible * between its children, with the children at either @@ -75,45 +96,59 @@ -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; + padding: 10px; - background-color: #56727C; } + background-color: #56727C; +} -.siteHeader__section { - /** - * Lay out the children of this container with - * flexbox. - */ - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - /** - * Align the children in the center, along - * the main axis. By default the children will - * align along their top edges. - */ - -webkit-align-items: center; - -ms-flex-align: center; - align-items: center; } + .siteHeader__section { + /** + * Lay out the children of this container with + * flexbox. + */ + display: -webkit-flex; + display: -ms-flexbox; + display: flex; -.siteHeader__item { - padding: 5px 15px; - font-size: 12px; } - .siteHeader__item + .siteHeader__item { - margin-left: 5px; } - .siteHeader__item.is-site-header-item-selected { - color: #FFFFFF; - background-color: #415F69; - border-radius: 4px; } + /** + * Align the children in the center, along + * the main axis. By default the children will + * align along their top edges. + */ + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; + } -.siteHeaderLogo { - font-size: 20px; - line-height: 0; - color: white; } + .siteHeader__item { + padding: 5px 15px; + font-size: 12px; + } -.siteHeaderButton { - cursor: pointer; - color: #D9E9EF; } + .siteHeader__item + .siteHeader__item { + margin-left: 5px; + } + .siteHeader__item.is-site-header-item-selected { + color: #FFFFFF; + background-color: #415F69; + border-radius: 4px; + } + + .siteHeaderLogo { + font-size: 20px; + line-height: 0; + color: white; + } + + .siteHeaderButton { + cursor: pointer; + color: #D9E9EF; + } + +/*===================================================== + contents of: styles/form-footer.css + =====================================================*/ .formFooter { /** * Lay out the children of this container with @@ -122,6 +157,7 @@ display: -webkit-flex; display: -ms-flexbox; display: flex; + /** * Align the children in the center, along * the main axis, which is horizontal in this case. @@ -129,63 +165,70 @@ -webkit-align-items: center; -ms-flex-align: center; align-items: center; - /** - * Make the container put as much space as possible - * between its children, with the children at either - * end laying flush against the container's edges. - */ + + /** + * Make the container put as much space as possible + * between its children, with the children at either + * end laying flush against the container's edges. + */ -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; + border-top: 1px solid #D7DBDD; - padding: 10px; } + padding: 10px; +} -.formFooter__section { - /** - * This container orders items horizontally. - */ - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - /** - * It aligns them vertically in the center. - */ - -webkit-align-items: center; - -ms-flex-align: center; - align-items: center; } + .formFooter__section { + /** + * This container orders items horizontally. + */ + display: -webkit-flex; + display: -ms-flexbox; + display: flex; -.formFooter__item + .formFooter__item { - margin-left: 5px; } + /** + * It aligns them vertically in the center. + */ + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; + } -.formFooterFeedback { - color: #86969C; - font-size: 12px; - line-height: 0; } + .formFooter__item + .formFooter__item { + margin-left: 5px; + } -.formFooterSpinner { - -webkit-animation: formFooterSpinner 1s infinite steps(8, end); - animation: formFooterSpinner 1s infinite steps(8, end); } + .formFooterFeedback { + color: #86969C; + font-size: 12px; + line-height: 0; + } + + .formFooterSpinner { + -webkit-animation: formFooterSpinner 1s infinite steps(8, end); + animation: formFooterSpinner 1s infinite steps(8, end); + } @-webkit-keyframes formFooterSpinner { - 0% { - -webkit-transform: rotate(0deg); - transform: rotate(0deg); } - 100% { - -webkit-transform: rotate(360deg); - transform: rotate(360deg); } } + 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } + 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } +} @keyframes formFooterSpinner { - 0% { - -webkit-transform: rotate(0deg); - transform: rotate(0deg); } - 100% { - -webkit-transform: rotate(360deg); - transform: rotate(360deg); } } + 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } + 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } +} + .button--clear { color: #16A2D7; background-color: #FFFFFF; - border: 1px solid #FFFFFF; } + border: 1px solid #FFFFFF; +} +/*===================================================== + contents of: styles/side-bar.css + =====================================================*/ .sideBar { /** * This container orders items according to flexbox @@ -195,6 +238,7 @@ display: -webkit-flex; display: -ms-flexbox; display: flex; + /** * ...sets the main axis to be vertical instead of * horizontal, so now the children are laid out @@ -203,6 +247,7 @@ -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; + /** * It will also put as much space as possible * between its children, with the children at either end @@ -211,21 +256,29 @@ -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; + height: 300px; width: 150px; border-right: 1px solid #D7DBDD; background-color: #FCFDFD; - padding: 10px; } + padding: 10px; +} + + .sideBar__item { + cursor: pointer; + padding: 5px 10px; + color: #16A2D7; + font-size: 12px; + } -.sideBar__item { - cursor: pointer; - padding: 5px 10px; - color: #16A2D7; - font-size: 12px; } .sideBar__item.is-side-bar-item-selected { background-color: #EEF3F5; - border-radius: 4px; } + border-radius: 4px; + } +/*===================================================== + contents of: styles/centered-prompt.css + =====================================================*/ .centeredPrompt { /** * Lay out the children of this container with @@ -234,6 +287,7 @@ display: -webkit-flex; display: -ms-flexbox; display: flex; + /** * Rotate the main axis so that the children * are laid out vertically, the same as in the @@ -242,6 +296,7 @@ -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; + /** * Align the children in the center, along * the main axis. Because the direction is @@ -251,6 +306,7 @@ -webkit-align-items: center; -ms-flex-align: center; align-items: center; + /** * Instead of pushing the children apart, as in * previous examples, we will group them together @@ -259,31 +315,41 @@ -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; + min-height: 300px; - padding: 10px; } + padding: 10px; +} -.centeredPrompt__item + .centeredPrompt__item { - margin-top: 5px; } + .centeredPrompt__item + .centeredPrompt__item { + margin-top: 5px; + } -.centeredPromptIcon { - font-size: 60px; - line-height: 0; } + .centeredPromptIcon { + font-size: 60px; + line-height: 0; + } -.centeredPromptLabel { - color: #86969C; - font-size: 30px; - font-weight: 700; - text-align: center; } + .centeredPromptLabel { + color: #86969C; + font-size: 30px; + font-weight: 700; + text-align: center; + } -.centeredPromptDetails { - color: #86969C; - font-size: 16px; - margin-bottom: 10px; - text-align: center; } + .centeredPromptDetails { + color: #86969C; + font-size: 16px; + margin-bottom: 10px; + text-align: center; + } .icon { - color: #BCD2DA; } + color: #BCD2DA; +} +/*===================================================== + contents of: styles/centered-icon.css + =====================================================*/ .centeredIcon { /** * Lay out the children of this container with @@ -292,6 +358,7 @@ display: -webkit-flex; display: -ms-flexbox; display: flex; + /** * As in the above "Centered prmopt" example, * we'll rotate the main axis so that the children @@ -300,6 +367,7 @@ -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; + /** * And just like in that example, align the children * in the center, along the main axis. @@ -307,6 +375,7 @@ -webkit-align-items: center; -ms-flex-align: center; align-items: center; + /** * Same thing here as before: group the children * together in the center of their container. @@ -314,13 +383,21 @@ -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; + border: 1px solid #D7DBDD; font-size: 40px; width: 90px; height: 90px; border-radius: 100%; - box-shadow: 0 2px 1px rgba(0, 0, 0, 0.05), 0 2px 3px rgba(0, 0, 0, 0.05), 0 4px 8px rgba(0, 0, 0, 0.05); } + box-shadow: + 0 2px 1px rgba(0, 0, 0, 0.05), + 0 2px 3px rgba(0, 0, 0, 0.05), + 0 4px 8px rgba(0, 0, 0, 0.05); +} +/*===================================================== + contents of: styles/feature-list.css + =====================================================*/ .featureListItem { /** * Lay out the children of this container with @@ -329,6 +406,7 @@ display: -webkit-flex; display: -ms-flexbox; display: flex; + /** * Align the children in the center, along * the main axis, which is horizontal in this case. @@ -336,10 +414,14 @@ -webkit-align-items: center; -ms-flex-align: center; align-items: center; + max-width: 400px; - padding: 10px; } - .featureListItem + .featureListItem { - border-top: 1px solid #D7DBDD; } + padding: 10px; +} + +.featureListItem + .featureListItem { + border-top: 1px solid #D7DBDD; +} .featureListItem--reverse { /** @@ -350,20 +432,27 @@ */ -webkit-flex-direction: row-reverse; -ms-flex-direction: row-reverse; - flex-direction: row-reverse; } + flex-direction: row-reverse; +} -.featureListItem__icon, -.featureListItem__description { - padding: 5px 15px; } + .featureListItem__icon, + .featureListItem__description { + padding: 5px 15px; + } -.featureListItem__icon { - font-size: 50px; - line-height: 0; } + .featureListItem__icon { + font-size: 50px; + line-height: 0; + } -.featureListItem__description { - color: #86969C; - font-size: 12px; } + .featureListItem__description { + color: #86969C; + font-size: 12px; + } +/*===================================================== + contents of: styles/card.css + =====================================================*/ .card { /** * Lay out the children of this container with @@ -372,6 +461,7 @@ display: -webkit-flex; display: -ms-flexbox; display: flex; + /** * Rotate the main axis so that the children * are laid out vertically. @@ -379,66 +469,82 @@ -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; + border: 1px solid #CAD0D2; border-radius: 4px; - overflow: hidden; } + overflow: hidden; +} -.card__description { - /** - * Lay out the children of this container with - * flexbox. - */ - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - /** - * We're going to lay out this element's children - * just like in the "Centered prompt" example. - * First we'll rotate the main axis so that the - * children are laid out vertically. - */ - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - /** - * Just like in the "Centered prompt" example, - * we'll align the children in the center, along - * the main axis. - */ - -webkit-align-items: center; - -ms-flex-align: center; - align-items: center; - /** - * And just like in the "Centered prompt", we'll - * group the children in the center of their - * container. - */ - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - padding: 15px; } + .card__description { + /** + * Lay out the children of this container with + * flexbox. + */ + display: -webkit-flex; + display: -ms-flexbox; + display: flex; -.card__descriptionIcon { - font-size: 32px; - margin-bottom: 10px; } + /** + * We're going to lay out this element's children + * just like in the "Centered prompt" example. + * First we'll rotate the main axis so that the + * children are laid out vertically. + */ + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; -.card__descriptionText { - color: #57727C; - font-size: 12px; - text-align: center; } + /** + * Just like in the "Centered prompt" example, + * we'll align the children in the center, along + * the main axis. + */ + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; -.card__price { - text-align: center; - color: #57727C; - font-size: 12px; - font-weight: 700; - padding: 5px 15px; - border-top: 1px solid #D7DBDD; - background-color: #EEF3F5; } + /** + * And just like in the "Centered prompt", we'll + * group the children in the center of their + * container. + */ + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + + padding: 15px; + } + + .card__descriptionIcon { + font-size: 32px; + margin-bottom: 10px; + } + + .card__descriptionText { + color: #57727C; + font-size: 12px; + text-align: center; + } + + .card__price { + text-align: center; + color: #57727C; + font-size: 12px; + font-weight: 700; + padding: 5px 15px; + border-top: 1px solid #D7DBDD; + background-color: #EEF3F5; + } .card--fixedWidth { - max-width: 120px; } - + max-width: 120px; +} +/*===================================================== + contents of: index.css + =====================================================*/ +/*===================================================== + contents of: styles/card-group.css + =====================================================*/ .cardGroup { /** * Lay out the children of this container with @@ -447,54 +553,61 @@ display: -webkit-flex; display: -ms-flexbox; display: flex; + border: 1px solid #CAD0D2; border-radius: 4px; - overflow: hidden; } + overflow: hidden; +} + + .cardGroup__card { + /** + * The flex property is a short-hand for setting + * the flex-shrink, flex-grow, and flex-basis + * properties. These properties control how the + * element resizes to fill its container. + * + * We'll also set flex-grow to 1 so that it + * will expand to fill its container. (The + * default value is 1.) + * + * We'll set flex-shrink to 1 so that the element + * will shrink as its container gets smaller. + * (The default value is 0.) + * + * Last, we set flex-basis to 0 so that its + * size is solely determined by the size of + * the container. (The default value + * is auto, which would cause the content's + * size to also be a factor in this calculation.) + * + * The net result of these properties is that the + * element is a fluid size, and will expand and + * shrink with its container and siblings, but + * they will all have the same size, even if they + * have different amounts of content. + */ + -webkit-flex: 1 1 0; + -ms-flex: 1 1 0; + flex: 1 1 0; + + border: none; + border-radius: 0; + } -.cardGroup__card { - /** - * The flex property is a short-hand for setting - * the flex-shrink, flex-grow, and flex-basis - * properties. These properties control how the - * element resizes to fill its container. - * - * We'll also set flex-grow to 1 so that it - * will expand to fill its container. (The - * default value is 1.) - * - * We'll set flex-shrink to 1 so that the element - * will shrink as its container gets smaller. - * (The default value is 0.) - * - * Last, we set flex-basis to 0 so that its - * size is solely determined by the size of - * the container. (The default value - * is auto, which would cause the content's - * size to also be a factor in this calculation.) - * - * The net result of these properties is that the - * element is a fluid size, and will expand and - * shrink with its container and siblings, but - * they will all have the same size, even if they - * have different amounts of content. - */ - -webkit-flex: 1 1 0; - -ms-flex: 1 1 0; - flex: 1 1 0; - border: none; - border-radius: 0; } .cardGroup__card + .cardGroup__card { - border-left: 1px solid #D7DBDD; } + border-left: 1px solid #D7DBDD; + } + + .cardGroup__cardDescription { + /** + * We're doing almost the exact same thing here as + * we did above. The difference is that its + * flex-basis is auto, so now the size of its content + * will affect how large it is. + */ + -webkit-flex: 1 1 auto; + -ms-flex: 1 1 auto; + flex: 1 1 auto; + } -.cardGroup__cardDescription { - /** - * We're doing almost the exact same thing here as - * we did above. The difference is that its - * flex-basis is auto, so now the size of its content - * will affect how large it is. - */ - -webkit-flex: 1 1 auto; - -ms-flex: 1 1 auto; - flex: 1 1 auto; } -/*# sourceMappingURL=styles.css.map */ \ No newline at end of file diff --git a/package.json b/package.json index 530397f..893eed5 100644 --- a/package.json +++ b/package.json @@ -10,13 +10,14 @@ }, "devDependencies": { "autoprefixer": "6.2.3", + "css-concat": "0.0.4", "jade": "1.11.0", "postcss-cli": "2.3.3" }, "scripts": { "build": "npm run compileCss && npm run autoPrefixCss && npm run compileHtml", - "compileCss": "sass src/index.scss dist/styles.css", + "compileCss": "node_modules/.bin/css-concat src/index.css dist/styles.css", "autoPrefixCss": "node_modules/.bin/postcss --local-plugins --use autoprefixer --autoprefixer.browsers 'last 2 versions' -o dist/styles.css dist/styles.css", - "compileHtml": "./node_modules/.bin/jade src/index.jade -P -o dist" + "compileHtml": "node_modules/.bin/jade src/index.jade -P -o dist" } } diff --git a/src/index.css b/src/index.css new file mode 100644 index 0000000..76db4ab --- /dev/null +++ b/src/index.css @@ -0,0 +1,11 @@ + +@import url("./styles/stepper-input.css"); +@import url("./styles/tabs.css"); +@import url("./styles/site-header.css"); +@import url("./styles/form-footer.css"); +@import url("./styles/side-bar.css"); +@import url("./styles/centered-prompt.css"); +@import url("./styles/centered-icon.css"); +@import url("./styles/feature-list.css"); +@import url("./styles/card.css"); +@import url("./styles/card-group.css"); diff --git a/src/index.scss b/src/index.scss deleted file mode 100644 index f6ac3a4..0000000 --- a/src/index.scss +++ /dev/null @@ -1,11 +0,0 @@ - -@import "styles/stepper-input"; -@import "styles/tabs"; -@import "styles/site-header"; -@import "styles/form-footer"; -@import "styles/side-bar"; -@import "styles/centered-prompt"; -@import "styles/centered-icon"; -@import "styles/feature-list"; -@import "styles/card"; -@import "styles/card-group"; diff --git a/src/styles/card-group.scss b/src/styles/card-group.css similarity index 95% rename from src/styles/card-group.scss rename to src/styles/card-group.css index fa8b901..45eabf0 100644 --- a/src/styles/card-group.scss +++ b/src/styles/card-group.css @@ -41,10 +41,10 @@ border: none; border-radius: 0; + } - & + & { - border-left: 1px solid #D7DBDD; - } + .cardGroup__card + .cardGroup__card { + border-left: 1px solid #D7DBDD; } .cardGroup__cardDescription { diff --git a/src/styles/card.scss b/src/styles/card.css similarity index 100% rename from src/styles/card.scss rename to src/styles/card.css diff --git a/src/styles/centered-icon.scss b/src/styles/centered-icon.css similarity index 86% rename from src/styles/centered-icon.scss rename to src/styles/centered-icon.css index 165b422..fe22e1d 100644 --- a/src/styles/centered-icon.scss +++ b/src/styles/centered-icon.css @@ -30,7 +30,7 @@ height: 90px; border-radius: 100%; box-shadow: - 0 2px 1px rgba(#000000, 0.05), - 0 2px 3px rgba(#000000, 0.05), - 0 4px 8px rgba(#000000, 0.05); -} \ No newline at end of file + 0 2px 1px rgba(0, 0, 0, 0.05), + 0 2px 3px rgba(0, 0, 0, 0.05), + 0 4px 8px rgba(0, 0, 0, 0.05); +} diff --git a/src/styles/centered-prompt.scss b/src/styles/centered-prompt.css similarity index 93% rename from src/styles/centered-prompt.scss rename to src/styles/centered-prompt.css index b3f3127..02349e9 100644 --- a/src/styles/centered-prompt.scss +++ b/src/styles/centered-prompt.css @@ -31,10 +31,8 @@ padding: 10px; } - .centeredPrompt__item { - & + & { - margin-top: 5px; - } + .centeredPrompt__item + .centeredPrompt__item { + margin-top: 5px; } .centeredPromptIcon { @@ -58,4 +56,4 @@ .icon { color: #BCD2DA; -} \ No newline at end of file +} diff --git a/src/styles/feature-list.scss b/src/styles/feature-list.css similarity index 88% rename from src/styles/feature-list.scss rename to src/styles/feature-list.css index 7060bf2..fc8cec7 100644 --- a/src/styles/feature-list.scss +++ b/src/styles/feature-list.css @@ -4,7 +4,7 @@ * flexbox, which is horizontal by default. */ display: flex; - + /** * Align the children in the center, along * the main axis, which is horizontal in this case. @@ -13,10 +13,10 @@ max-width: 400px; padding: 10px; - - & + & { - border-top: 1px solid #D7DBDD; - } +} + +.featureListItem + .featureListItem { + border-top: 1px solid #D7DBDD; } .featureListItem--reverse { @@ -29,7 +29,7 @@ flex-direction: row-reverse; } - .featureListItem__icon, + .featureListItem__icon, .featureListItem__description { padding: 5px 15px; } @@ -42,4 +42,4 @@ .featureListItem__description { color: #86969C; font-size: 12px; - } \ No newline at end of file + } diff --git a/src/styles/form-footer.scss b/src/styles/form-footer.css similarity index 88% rename from src/styles/form-footer.scss rename to src/styles/form-footer.css index 4c89fdc..f203dcc 100644 --- a/src/styles/form-footer.scss +++ b/src/styles/form-footer.css @@ -27,17 +27,15 @@ * This container orders items horizontally. */ display: flex; - + /** * It aligns them vertically in the center. */ align-items: center; } - .formFooter__item { - & + & { - margin-left: 5px; - } + .formFooter__item + .formFooter__item { + margin-left: 5px; } .formFooterFeedback { @@ -47,7 +45,7 @@ } .formFooterSpinner { - animation: formFooterSpinner 1s infinite steps(8, end); + animation: formFooterSpinner 1s infinite steps(8, end); } @keyframes formFooterSpinner { @@ -59,4 +57,4 @@ color: #16A2D7; background-color: #FFFFFF; border: 1px solid #FFFFFF; -} \ No newline at end of file +} diff --git a/src/styles/side-bar.scss b/src/styles/side-bar.css similarity index 88% rename from src/styles/side-bar.scss rename to src/styles/side-bar.css index 0bf9ecb..a4103a1 100644 --- a/src/styles/side-bar.scss +++ b/src/styles/side-bar.css @@ -32,9 +32,9 @@ padding: 5px 10px; color: #16A2D7; font-size: 12px; + } - &.is-side-bar-item-selected { - background-color: #EEF3F5; - border-radius: 4px; - } - } \ No newline at end of file + .sideBar__item.is-side-bar-item-selected { + background-color: #EEF3F5; + border-radius: 4px; + } diff --git a/src/styles/site-header.scss b/src/styles/site-header.css similarity index 81% rename from src/styles/site-header.scss rename to src/styles/site-header.css index 0248652..e12827b 100644 --- a/src/styles/site-header.scss +++ b/src/styles/site-header.css @@ -34,16 +34,16 @@ .siteHeader__item { padding: 5px 15px; font-size: 12px; + } - & + & { - margin-left: 5px; - } + .siteHeader__item + .siteHeader__item { + margin-left: 5px; + } - &.is-site-header-item-selected { - color: #FFFFFF; - background-color: #415F69; - border-radius: 4px; - } + .siteHeader__item.is-site-header-item-selected { + color: #FFFFFF; + background-color: #415F69; + border-radius: 4px; } .siteHeaderLogo { @@ -55,4 +55,4 @@ .siteHeaderButton { cursor: pointer; color: #D9E9EF; - } \ No newline at end of file + } diff --git a/src/styles/stepper-input.scss b/src/styles/stepper-input.css similarity index 100% rename from src/styles/stepper-input.scss rename to src/styles/stepper-input.css diff --git a/src/styles/tabs.scss b/src/styles/tabs.css similarity index 83% rename from src/styles/tabs.scss rename to src/styles/tabs.css index b1150e7..ec27601 100644 --- a/src/styles/tabs.scss +++ b/src/styles/tabs.css @@ -15,8 +15,8 @@ color: #16A2D7; font-size: 12px; border-bottom: 2px solid transparent; - - &.is-tab-selected { - border-bottom-color: #4EBBE4; - } + } + + .tab.is-tab-selected { + border-bottom-color: #4EBBE4; }