Flexbox Patterns Demo Page

commit 6f5b31c4dc563ac7554f4d859314ec7495c20112 Author: CJ Cenizal (MacBook Air) Date: Sat Jan 2 21:27:50 2016 -0800 Initial commit: a bunch of patterns and a build command. diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..a907a06 --- /dev/null +++ b/.gitignore @@ -0,0 +1,4 @@ +node_modules +.DS_Store +.sass-cache +*.log diff --git a/README.md b/README.md new file mode 100644 index 0000000..7034570 --- /dev/null +++ b/README.md @@ -0,0 +1,23 @@ +# Flexbox Patterns + +This repository contains the original SCSS used for the +components at [www.flexboxpatterns.com](http://www.flexboxpatterns.com). +Feel free to use these styles however you like! + +## Getting started + +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. diff --git a/dist/index.html b/dist/index.html new file mode 100644 index 0000000..d387c44 --- /dev/null +++ b/dist/index.html @@ -0,0 +1,176 @@ + + + + Flexbox Patterns Demo Page + + + + + + + + + +

Trial

Free!

Basic tier
(most popular)

$10.00

Advanced tier
(only for enterprise-level professionals)

$6,000.00

+ + +

Science potion

Costs $5

+ + +

Welcome to the app!

Thanks for signing up. Let’s take a look around.

Begin tour

+ + +

The calendar feature makes scheduling a snap.

Our dashboard gives you a bird’s-eye-view-at-a-glance-on-the-go.

You can get notified by email or SMS.

+ + +

+ +

Saving... +

+ +

Reset

Save

+ + +

+ +

+ + +

+ +

Sent

Trash

+ +

Settings

+ + +

+ + + +

+ + +

Tab 1

Tab 2

Tab 3

Tab 4

+ + + diff --git a/dist/styles.css b/dist/styles.css new file mode 100644 index 0000000..4fc754f --- /dev/null +++ b/dist/styles.css @@ -0,0 +1,500 @@ +.stepperInput { + /** + * Setting display to flex makes this container lay + * out its children using flexbox. By default, it + * orders items horizontally, top-aligned. + * This has a similar effect to setting the children + * to have display: inline-block. + */ + display: -webkit-flex; + display: -ms-flexbox; + display: flex; } + +.stepperInput__input { + border-left: 0; + border-right: 0; + width: 60px; + text-align: center; } + +.button { + cursor: pointer; + padding: 5px 15px; + color: #FFFFFF; + background-color: #4EBBE4; + font-size: 12px; + border: 1px solid #16A2D7; + border-radius: 4px; } + +.button--addOnLeft { + border-top-right-radius: 0; + border-bottom-right-radius: 0; } + +.button--addOnRight { + border-top-left-radius: 0; + border-bottom-left-radius: 0; } + +.input { + border: 1px solid #D7DBDD; + padding: 0 10px; + border-radius: 0; + box-shadow: none; } + +.tabs { + /** + * Setting display to flex makes this container lay + * out its children using flexbox, the exact same + * as in the above "Stepper input" example. + */ + 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; } + .tab.is-tab-selected { + border-bottom-color: #4EBBE4; } + +.siteHeader { + /** + * Lay out the children of this container with + * flexbox, which is horizontal by default. + */ + 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 + * end laying flush against the container's edges. + */ + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; + padding: 10px; + 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__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; } + +.siteHeaderLogo { + font-size: 20px; + line-height: 0; + color: white; } + +.siteHeaderButton { + cursor: pointer; + color: #D9E9EF; } + +.formFooter { + /** + * Lay out the children of this container with + * flexbox, which is horizontal by default. + */ + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + /** + * Align the children in the center, along + * the main axis, which is horizontal in this case. + */ + -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. + */ + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; + border-top: 1px solid #D7DBDD; + 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__item + .formFooter__item { + margin-left: 5px; } + +.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); } } + +@keyframes formFooterSpinner { + 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; } + +.sideBar { + /** + * This container orders items according to flexbox + * rules. By default, this would arrange its children + * horizontally. However, the next property... + */ + 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 + * vertically, from top to bottom. + */ + -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 + * laying flush against the container's edges. + */ + -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; } + +.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; } + +.centeredPrompt { + /** + * Lay out the children of this container with + * flexbox. + */ + 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 + * above "Side bar" example. + */ + -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 + * "column" this has a similar effect as setting + * text-align: center. + */ + -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 + * in the center of their container. + */ + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + min-height: 300px; + padding: 10px; } + +.centeredPrompt__item + .centeredPrompt__item { + margin-top: 5px; } + +.centeredPromptIcon { + font-size: 60px; + line-height: 0; } + +.centeredPromptLabel { + color: #86969C; + font-size: 30px; + font-weight: 700; + text-align: center; } + +.centeredPromptDetails { + color: #86969C; + font-size: 16px; + margin-bottom: 10px; + text-align: center; } + +.icon { + color: #BCD2DA; } + +.centeredIcon { + /** + * Lay out the children of this container with + * flexbox. + */ + 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 + * are ordered vertically. + */ + -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. + */ + -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. + */ + -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); } + +.featureListItem { + /** + * Lay out the children of this container with + * flexbox, which is horizontal by default. + */ + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + /** + * Align the children in the center, along + * the main axis, which is horizontal in this case. + */ + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; + max-width: 400px; + padding: 10px; } + .featureListItem + .featureListItem { + border-top: 1px solid #D7DBDD; } + +.featureListItem--reverse { + /** + * We can specify the flex-direction so that + * the children elements are displayed in the + * reverse order of how they appear in the + * markup. + */ + -webkit-flex-direction: row-reverse; + -ms-flex-direction: row-reverse; + flex-direction: row-reverse; } + +.featureListItem__icon, +.featureListItem__description { + padding: 5px 15px; } + +.featureListItem__icon { + font-size: 50px; + line-height: 0; } + +.featureListItem__description { + color: #86969C; + font-size: 12px; } + +.card { + /** + * Lay out the children of this container with + * flexbox, which is horizontal by default. + */ + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + /** + * Rotate the main axis so that the children + * are laid out vertically. + */ + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + border: 1px solid #CAD0D2; + border-radius: 4px; + 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__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; } + +.cardGroup { + /** + * Lay out the children of this container with + * flexbox, which is horizontal by default. + */ + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + border: 1px solid #CAD0D2; + border-radius: 4px; + 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 + .cardGroup__card { + 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; } + +/*# sourceMappingURL=styles.css.map */ \ No newline at end of file diff --git a/dist/styles.css.map b/dist/styles.css.map new file mode 100644 index 0000000..d2bc727 --- /dev/null +++ b/dist/styles.css.map @@ -0,0 +1,7 @@ +{ +"version": 3, +"mappings": "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", +"sources": ["../src/styles/stepper-input.scss","../src/styles/tabs.scss","../src/styles/site-header.scss","../src/styles/form-footer.scss","../src/styles/side-bar.scss","../src/styles/centered-prompt.scss","../src/styles/centered-icon.scss","../src/styles/feature-list.scss","../src/styles/card.scss","../src/styles/card-group.scss"], +"names": [], +"file": "styles.css" +} diff --git a/package.json b/package.json new file mode 100644 index 0000000..bf2d650 --- /dev/null +++ b/package.json @@ -0,0 +1,18 @@ +{ + "name": "flexbox-patterns", + "version": "0.0.1", + "description": "Patterns for using flexbox CSS to build awesome UI components", + "repository": "cjcenizal/flexbox-patterns", + "author": { + "name": "CJ Cenizal", + "email": "cj@cenizal.com", + "url": "http://www.cenizal.com/" + }, + "devDependencies": { + "autoprefixer": "6.2.3", + "postcss-cli": "2.3.3" + }, + "scripts": { + "build": "sass src/index.scss dist/styles.css && node_modules/.bin/postcss --local-plugins --use autoprefixer --autoprefixer.browsers 'last 2 versions' -o dist/styles.css dist/styles.css && cp src/index.html dist/index.html" + } +} diff --git a/src/index.html b/src/index.html new file mode 100644 index 0000000..d387c44 --- /dev/null +++ b/src/index.html @@ -0,0 +1,176 @@ + + + + Flexbox Patterns Demo Page + + + + + + + + + +

Trial

Free!

Basic tier
(most popular)

$10.00

Advanced tier
(only for enterprise-level professionals)

$6,000.00

+ + +

Science potion

Costs $5

+ + +

Welcome to the app!

Thanks for signing up. Let’s take a look around.

Begin tour

+ + +

The calendar feature makes scheduling a snap.

Our dashboard gives you a bird’s-eye-view-at-a-glance-on-the-go.

You can get notified by email or SMS.

+ + +

+ +

Saving... +

+ +

Reset

Save

+ + +

+ +

+ + +

+ +

Sent

Trash

+ +

Settings

+ + +

+ + + +

+ + +

Tab 1

Tab 2

Tab 3

Tab 4

+ + + diff --git a/src/index.scss b/src/index.scss new file mode 100644 index 0000000..f6ac3a4 --- /dev/null +++ b/src/index.scss @@ -0,0 +1,11 @@ + +@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.scss new file mode 100644 index 0000000..fa8b901 --- /dev/null +++ b/src/styles/card-group.scss @@ -0,0 +1,58 @@ +.cardGroup { + /** + * Lay out the children of this container with + * flexbox, which is horizontal by default. + */ + display: flex; + + border: 1px solid #CAD0D2; + border-radius: 4px; + 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. + */ + flex: 1 1 0; + + border: none; + border-radius: 0; + + & + & { + 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. + */ + flex: 1 1 auto; + } diff --git a/src/styles/card.scss b/src/styles/card.scss new file mode 100644 index 0000000..6d66176 --- /dev/null +++ b/src/styles/card.scss @@ -0,0 +1,74 @@ +.card { + /** + * Lay out the children of this container with + * flexbox, which is horizontal by default. + */ + display: flex; + + /** + * Rotate the main axis so that the children + * are laid out vertically. + */ + flex-direction: column; + + border: 1px solid #CAD0D2; + border-radius: 4px; + overflow: hidden; +} + + .card__description { + /** + * Lay out the children of this container with + * 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. + */ + flex-direction: column; + + /** + * Just like in the "Centered prompt" example, + * we'll align the children in the center, along + * the main axis. + */ + align-items: center; + + /** + * And just like in the "Centered prompt", we'll + * group the children in the center of their + * container. + */ + 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; +} \ No newline at end of file diff --git a/src/styles/centered-icon.scss b/src/styles/centered-icon.scss new file mode 100644 index 0000000..165b422 --- /dev/null +++ b/src/styles/centered-icon.scss @@ -0,0 +1,36 @@ +.centeredIcon { + /** + * Lay out the children of this container with + * flexbox. + */ + display: flex; + + /** + * As in the above "Centered prmopt" example, + * we'll rotate the main axis so that the children + * are ordered vertically. + */ + flex-direction: column; + + /** + * And just like in that example, align the children + * in the center, along the main axis. + */ + align-items: center; + + /** + * Same thing here as before: group the children + * together in the center of their container. + */ + justify-content: center; + + border: 1px solid #D7DBDD; + font-size: 40px; + width: 90px; + 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 diff --git a/src/styles/centered-prompt.scss b/src/styles/centered-prompt.scss new file mode 100644 index 0000000..b3f3127 --- /dev/null +++ b/src/styles/centered-prompt.scss @@ -0,0 +1,61 @@ +.centeredPrompt { + /** + * Lay out the children of this container with + * flexbox. + */ + display: flex; + + /** + * Rotate the main axis so that the children + * are laid out vertically, the same as in the + * above "Side bar" example. + */ + flex-direction: column; + + /** + * Align the children in the center, along + * the main axis. Because the direction is + * "column" this has a similar effect as setting + * text-align: center. + */ + align-items: center; + + /** + * Instead of pushing the children apart, as in + * previous examples, we will group them together + * in the center of their container. + */ + justify-content: center; + + min-height: 300px; + padding: 10px; +} + + .centeredPrompt__item { + & + & { + margin-top: 5px; + } + } + + .centeredPromptIcon { + font-size: 60px; + line-height: 0; + } + + .centeredPromptLabel { + color: #86969C; + font-size: 30px; + font-weight: 700; + text-align: center; + } + + .centeredPromptDetails { + color: #86969C; + font-size: 16px; + margin-bottom: 10px; + text-align: center; + } + +.icon { + color: #BCD2DA; +} \ No newline at end of file diff --git a/src/styles/feature-list.scss b/src/styles/feature-list.scss new file mode 100644 index 0000000..7060bf2 --- /dev/null +++ b/src/styles/feature-list.scss @@ -0,0 +1,45 @@ +.featureListItem { + /** + * Lay out the children of this container with + * flexbox, which is horizontal by default. + */ + display: flex; + + /** + * Align the children in the center, along + * the main axis, which is horizontal in this case. + */ + align-items: center; + + max-width: 400px; + padding: 10px; + + & + & { + border-top: 1px solid #D7DBDD; + } +} + +.featureListItem--reverse { + /** + * We can specify the flex-direction so that + * the children elements are displayed in the + * reverse order of how they appear in the + * markup. + */ + flex-direction: row-reverse; +} + + .featureListItem__icon, + .featureListItem__description { + padding: 5px 15px; + } + + .featureListItem__icon { + font-size: 50px; + line-height: 0; + } + + .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.scss new file mode 100644 index 0000000..4c89fdc --- /dev/null +++ b/src/styles/form-footer.scss @@ -0,0 +1,62 @@ +.formFooter { + /** + * Lay out the children of this container with + * flexbox, which is horizontal by default. + */ + display: flex; + + /** + * Align the children in the center, along + * the main axis, which is horizontal in this case. + */ + 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. + */ + justify-content: space-between; + + border-top: 1px solid #D7DBDD; + padding: 10px; +} + + .formFooter__section { + /** + * This container orders items horizontally. + */ + display: flex; + + /** + * It aligns them vertically in the center. + */ + align-items: center; + } + + .formFooter__item { + & + & { + margin-left: 5px; + } + } + + .formFooterFeedback { + color: #86969C; + font-size: 12px; + line-height: 0; + } + + .formFooterSpinner { + animation: formFooterSpinner 1s infinite steps(8, end); + } + +@keyframes formFooterSpinner { + 0% { transform: rotate(0deg); } + 100% { transform: rotate(360deg); } +} + +.button--clear { + 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.scss new file mode 100644 index 0000000..0bf9ecb --- /dev/null +++ b/src/styles/side-bar.scss @@ -0,0 +1,40 @@ +.sideBar { + /** + * This container orders items according to flexbox + * rules. By default, this would arrange its children + * horizontally. However, the next property... + */ + display: flex; + + /** + * ...sets the main axis to be vertical instead of + * horizontal, so now the children are laid out + * vertically, from top to bottom. + */ + flex-direction: column; + + /** + * It will also put as much space as possible + * between its children, with the children at either end + * laying flush against the container's edges. + */ + justify-content: space-between; + + height: 300px; + width: 150px; + border-right: 1px solid #D7DBDD; + background-color: #FCFDFD; + padding: 10px; +} + + .sideBar__item { + cursor: pointer; + 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 diff --git a/src/styles/site-header.scss b/src/styles/site-header.scss new file mode 100644 index 0000000..0248652 --- /dev/null +++ b/src/styles/site-header.scss @@ -0,0 +1,58 @@ +.siteHeader { + /** + * Lay out the children of this container with + * flexbox, which is horizontal by default. + */ + display: flex; + + /** + * 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. + */ + justify-content: space-between; + + padding: 10px; + background-color: #56727C; +} + + .siteHeader__section { + /** + * Lay out the children of this container with + * flexbox. + */ + display: flex; + + /** + * Align the children in the center, along + * the main axis. By default the children will + * align along their top edges. + */ + align-items: center; + } + + .siteHeader__item { + padding: 5px 15px; + font-size: 12px; + + & + & { + margin-left: 5px; + } + + &.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; + } \ No newline at end of file diff --git a/src/styles/stepper-input.scss b/src/styles/stepper-input.scss new file mode 100644 index 0000000..17d4951 --- /dev/null +++ b/src/styles/stepper-input.scss @@ -0,0 +1,44 @@ +.stepperInput { + /** + * Setting display to flex makes this container lay + * out its children using flexbox. By default, it + * orders items horizontally, top-aligned. + * This has a similar effect to setting the children + * to have display: inline-block. + */ + display: flex; +} + + .stepperInput__input { + border-left: 0; + border-right: 0; + width: 60px; + text-align: center; + } + +.button { + cursor: pointer; + padding: 5px 15px; + color: #FFFFFF; + background-color: #4EBBE4; + font-size: 12px; + border: 1px solid #16A2D7; + border-radius: 4px; +} + +.button--addOnLeft { + border-top-right-radius: 0; + border-bottom-right-radius: 0; +} + +.button--addOnRight { + border-top-left-radius: 0; + border-bottom-left-radius: 0; +} + +.input { + border: 1px solid #D7DBDD; + padding: 0 10px; + border-radius: 0; + box-shadow: none; +} \ No newline at end of file diff --git a/src/styles/tabs.scss b/src/styles/tabs.scss new file mode 100644 index 0000000..b1150e7 --- /dev/null +++ b/src/styles/tabs.scss @@ -0,0 +1,22 @@ +.tabs { + /** + * Setting display to flex makes this container lay + * out its children using flexbox, the exact same + * as in the above "Stepper input" example. + */ + display: flex; + + border-bottom: 1px solid #D7DBDD; +} + + .tab { + cursor: pointer; + padding: 5px 30px; + color: #16A2D7; + font-size: 12px; + border-bottom: 2px solid transparent; + + &.is-tab-selected { + border-bottom-color: #4EBBE4; + } + }