mirror of
https://github.com/cjcenizal/flexbox-patterns.git
synced 2025-08-17 21:32:26 +02:00
Compare commits
14 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
32b10cdc27 | ||
|
|
ec3a380dba | ||
|
|
9b9336056f | ||
|
|
0c8747d500 | ||
|
|
18db3b20df | ||
|
|
45193b80d2 | ||
|
|
a455706b56 | ||
|
|
7f03ade1f7 | ||
|
9b5c57a4d2 | ||
|
|
ac3799a277 | ||
|
|
340ff0d6d7 | ||
|
|
90a709f4af | ||
|
|
c63f70c734 | ||
|
|
cf91c1ffef |
20
README.md
20
README.md
@@ -1,6 +1,6 @@
|
|||||||
# Flexbox Patterns
|
# 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).
|
components at [www.flexboxpatterns.com](http://www.flexboxpatterns.com).
|
||||||
Feel free to use these styles however you like!
|
Feel free to use these styles however you like!
|
||||||
|
|
||||||
@@ -10,14 +10,18 @@ Assuming you have Node installed, you can install the project dependencies with
|
|||||||
`npm install`. This will install PostCSS and Autoprefixer; two critical tools
|
`npm install`. This will install PostCSS and Autoprefixer; two critical tools
|
||||||
for making your CSS cross-browser compatible.
|
for making your CSS cross-browser compatible.
|
||||||
|
|
||||||
This project also requires you have [SASS](http://sass-lang.com/) installed
|
|
||||||
(`sudo gem install sass`).
|
|
||||||
|
|
||||||
## Commands
|
## Commands
|
||||||
|
|
||||||
`npm run build`
|
`npm run build`
|
||||||
|
|
||||||
I've chosen to write the styles with SCSS since it's widely adopted and I've
|
This command will concatenate the source CSS files into a single CSS file, and
|
||||||
found that it makes me more productive. This command will compile the SCSS into
|
then use PostCSS to add various vendor-prefixed properties. Open up
|
||||||
CSS and add various vendor-prefixed properties. Open up `dist/index.html`
|
`dist/index.html` to see a demo page of the various flexbox patterns in the
|
||||||
to see a demo page of the various flexbox patterns in the browser.
|
browser.
|
||||||
|
|
||||||
|
## Things to keep in mind
|
||||||
|
|
||||||
|
_I don't recommend copy-pasting these examples directly into production code._
|
||||||
|
I'm only trying to demonstrate different ways of using flexbox through these
|
||||||
|
examples, so they may not incorporate some accessibility best practices (such as using semantic HTML5 elements and the `role` attribute). Before using this
|
||||||
|
code in production you should make sure it meets your accessibility needs.
|
||||||
|
|||||||
262
dist/index.html
vendored
262
dist/index.html
vendored
@@ -3,7 +3,7 @@
|
|||||||
<head>
|
<head>
|
||||||
<title>Flexbox Patterns Demo Page</title>
|
<title>Flexbox Patterns Demo Page</title>
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
<link href="http://fonts.googleapis.com/css?family=Lato:300,400,700|Ubuntu+Mono" rel="stylesheet" type="text/css">
|
<link href="http://fonts.googleapis.com/css?family=Lato:400" rel="stylesheet" type="text/css">
|
||||||
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
|
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
|
||||||
<link href="styles.css" rel="stylesheet" type="text/css">
|
<link href="styles.css" rel="stylesheet" type="text/css">
|
||||||
<style>
|
<style>
|
||||||
@@ -13,164 +13,156 @@
|
|||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
line-height: 1.5;
|
line-height: 1.5;
|
||||||
}
|
}
|
||||||
|
|
||||||
.demo {
|
.demo {
|
||||||
max-width: 500px;
|
max-width: 500px;
|
||||||
margin-bottom: 40px;
|
margin-bottom: 40px;
|
||||||
}
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
<!-- Card group-->
|
||||||
|
<div class="demo"><div class="cardGroup">
|
||||||
|
<div class="card cardGroup__card">
|
||||||
|
<div class="card__description cardGroup__cardDescription">
|
||||||
|
<div class="icon fa fa-thumbs-o-up card__descriptionIcon"></div>
|
||||||
|
<div class="card__descriptionText">Trial</div>
|
||||||
|
</div>
|
||||||
|
<div class="card__price">Free!</div>
|
||||||
|
</div>
|
||||||
|
<div class="card cardGroup__card">
|
||||||
|
<div class="card__description cardGroup__cardDescription">
|
||||||
|
<div class="icon fa fa-trophy card__descriptionIcon"></div>
|
||||||
|
<div class="card__descriptionText">Basic tier<br/>(most popular)</div>
|
||||||
|
</div>
|
||||||
|
<div class="card__price">$10.00</div>
|
||||||
|
</div>
|
||||||
|
<div class="card cardGroup__card">
|
||||||
|
<div class="card__description cardGroup__cardDescription">
|
||||||
|
<div class="icon fa fa-bolt card__descriptionIcon"></div>
|
||||||
|
<div class="card__descriptionText">Advanced tier<br/>(only for enterprise-level professionals)</div>
|
||||||
|
</div>
|
||||||
|
<div class="card__price">$6,000.00</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- Card group -->
|
</div>
|
||||||
<div class="demo">
|
<!-- Card-->
|
||||||
<div class="cardGroup">
|
<div class="demo"><div class="card card--fixedWidth">
|
||||||
<div class="card cardGroup__card">
|
<div class="card__description">
|
||||||
<div class="card__description cardGroup__cardDescription">
|
<div class="icon fa fa-flask card__descriptionIcon"></div>
|
||||||
<div class="icon fa fa-thumbs-o-up card__descriptionIcon"></div>
|
<div class="card__descriptionText">Science potion</div>
|
||||||
<div class="card__descriptionText">Trial</div>
|
</div>
|
||||||
</div>
|
<div class="card__price">Costs $5</div>
|
||||||
<div class="card__price">Free!</div>
|
</div>
|
||||||
</div>
|
|
||||||
<div class="card cardGroup__card">
|
</div>
|
||||||
<div class="card__description cardGroup__cardDescription">
|
<!-- Centered icon-->
|
||||||
<div class="icon fa fa-trophy card__descriptionIcon"></div>
|
<div class="demo"><div class="centeredIcon">
|
||||||
<div class="card__descriptionText">Basic tier<br/>(most popular)</div>
|
<div class="icon fa fa-phone"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="card__price">$10.00</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="card cardGroup__card">
|
<!-- Centered prompt-->
|
||||||
<div class="card__description cardGroup__cardDescription">
|
<div class="demo"><div class="centeredPrompt">
|
||||||
<div class="icon fa fa-bolt card__descriptionIcon"></div>
|
<div class="centeredPrompt__item centeredPromptIcon">
|
||||||
<div class="card__descriptionText">Advanced tier<br/>(only for enterprise-level professionals)</div>
|
<div class="icon fa fa-smile-o"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="card__price">$6,000.00</div>
|
<div class="centeredPrompt__item centeredPromptLabel">Welcome to the app!</div>
|
||||||
</div>
|
<div class="centeredPrompt__item centeredPromptDetails">Thanks for signing up. Let’s take a look around.</div>
|
||||||
|
<div class="centeredPrompt__item button">Begin tour</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<!-- Feature list-->
|
||||||
|
<div class="demo"><div class="featureListItem">
|
||||||
|
<div class="featureListItem__icon">
|
||||||
|
<div class="icon fa fa-calendar"></div>
|
||||||
|
</div>
|
||||||
|
<div class="featureListItem__description">The calendar feature makes scheduling a snap.</div>
|
||||||
|
</div>
|
||||||
|
<div class="featureListItem featureListItem--reverse">
|
||||||
|
<div class="featureListItem__icon">
|
||||||
|
<div class="icon fa fa-dashboard"></div>
|
||||||
|
</div>
|
||||||
|
<div class="featureListItem__description">Our dashboard gives you a bird’s-eye-view-at-a-glance-on-the-go.</div>
|
||||||
|
</div>
|
||||||
|
<div class="featureListItem">
|
||||||
|
<div class="featureListItem__icon">
|
||||||
|
<div class="icon fa fa-envelope"></div>
|
||||||
|
</div>
|
||||||
|
<div class="featureListItem__description">You can get notified by email or SMS.</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<!-- Form footer-->
|
||||||
|
<div class="demo"><div class="formFooter">
|
||||||
|
<!-- This section gets pushed to the left side-->
|
||||||
|
<div class="formFooter__section">
|
||||||
|
<div class="formFooter__item formFooterFeedback">
|
||||||
|
<div class="fa fa-spinner formFooterSpinner"></div> Saving...
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<!-- This section gets pushed to the right side-->
|
||||||
<!-- Card -->
|
<div class="formFooter__section">
|
||||||
<div class="demo">
|
<div class="formFooter__item button button--clear">Reset</div>
|
||||||
<div class="card card--fixedWidth">
|
<div class="formFooter__item button">Save</div>
|
||||||
<div class="card__description">
|
|
||||||
<div class="icon fa fa-flask card__descriptionIcon"></div>
|
|
||||||
<div class="card__descriptionText">Science potion</div>
|
|
||||||
</div>
|
|
||||||
<div class="card__price">Costs $5</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- Centered icon -->
|
|
||||||
<div class="demo">
|
|
||||||
<div class="centeredIcon">
|
|
||||||
<div class="icon fa fa-phone"></div>
|
|
||||||
</div>
|
</div>
|
||||||
|
<!-- Side bar-->
|
||||||
|
<div class="demo"><div class="sideBar">
|
||||||
|
<!-- This section gets pushed to the top-->
|
||||||
|
<div class="sideBar__section">
|
||||||
|
<div class="sideBar__item is-side-bar-item-selected">Inbox</div>
|
||||||
|
<div class="sideBar__item">Contacts</div>
|
||||||
|
<div class="sideBar__item">Account</div>
|
||||||
</div>
|
</div>
|
||||||
|
<!-- This section gets pushed to the bottom-->
|
||||||
<!-- Centered prompt -->
|
<div class="sideBar__section">
|
||||||
<div class="demo">
|
<div class="sideBar__item">Change theme</div>
|
||||||
<div class="centeredPrompt">
|
<div class="sideBar__item">Legal</div>
|
||||||
<div class="centeredPrompt__item centeredPromptIcon">
|
|
||||||
<div class="icon fa fa-smile-o"></div>
|
|
||||||
</div>
|
|
||||||
<div class="centeredPrompt__item centeredPromptLabel">Welcome to the app!</div>
|
|
||||||
<div class="centeredPrompt__item centeredPromptDetails">Thanks for signing up. Let’s take a look around.</div>
|
|
||||||
<div class="centeredPrompt__item button">Begin tour</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- Feature list -->
|
|
||||||
<div class="demo">
|
|
||||||
<div class="featureListItem">
|
|
||||||
<div class="featureListItem__icon">
|
|
||||||
<div class="icon fa fa-calendar"></div>
|
|
||||||
</div>
|
|
||||||
<div class="featureListItem__description">The calendar feature makes scheduling a snap.</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="featureListItem featureListItem--reverse">
|
<!-- Site header-->
|
||||||
<div class="featureListItem__icon">
|
<div class="demo"><div class="siteHeader">
|
||||||
<div class="icon fa fa-dashboard"></div>
|
<!-- This section gets pushed to the left side-->
|
||||||
</div>
|
<div class="siteHeader__section">
|
||||||
<div class="featureListItem__description">Our dashboard gives you a bird’s-eye-view-at-a-glance-on-the-go.</div>
|
<div class="siteHeader__item siteHeaderLogo">
|
||||||
</div>
|
<div class="fa fa-inbox"></div>
|
||||||
<div class="featureListItem">
|
|
||||||
<div class="featureListItem__icon">
|
|
||||||
<div class="icon fa fa-envelope"></div>
|
|
||||||
</div>
|
|
||||||
<div class="featureListItem__description">You can get notified by email or SMS.</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
<div class="siteHeader__item siteHeaderButton is-site-header-item-selected">Inbox</div>
|
||||||
|
<div class="siteHeader__item siteHeaderButton">Sent</div>
|
||||||
|
<div class="siteHeader__item siteHeaderButton">Trash</div>
|
||||||
</div>
|
</div>
|
||||||
|
<!-- This section gets pushed to the right side-->
|
||||||
<!-- Form footer -->
|
<div class="siteHeader__section">
|
||||||
<div class="demo">
|
<div class="siteHeader__item siteHeaderButton">Settings</div>
|
||||||
<div class="formFooter">
|
<div class="siteHeader__item siteHeaderButton">Log out</div>
|
||||||
<!-- This section gets pushed to the left side-->
|
|
||||||
<div class="formFooter__section">
|
|
||||||
<div class="formFooter__item formFooterFeedback">
|
|
||||||
<div class="fa fa-spinner formFooterSpinner"></div> Saving...
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- This section gets pushed to the right side-->
|
|
||||||
<div class="formFooter__section">
|
|
||||||
<div class="formFooter__item button button--clear">Reset</div>
|
|
||||||
<div class="formFooter__item button">Save</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- Side bar -->
|
|
||||||
<div class="demo">
|
|
||||||
<div class="sideBar">
|
|
||||||
<!-- This section gets pushed to the top-->
|
|
||||||
<div class="sideBar__section">
|
|
||||||
<div class="sideBar__item is-side-bar-item-selected">Inbox</div>
|
|
||||||
<div class="sideBar__item">Contacts</div>
|
|
||||||
<div class="sideBar__item">Account</div>
|
|
||||||
</div>
|
|
||||||
<!-- This section gets pushed to the bottom-->
|
|
||||||
<div class="sideBar__section">
|
|
||||||
<div class="sideBar__item">Legal</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<!-- Stepper input-->
|
||||||
|
<div class="demo"><div class="stepperInput">
|
||||||
|
<button class="button button--addOnLeft">-</button>
|
||||||
|
<input type="text" placeholder="Age" value="32" class="input stepperInput__input"/>
|
||||||
|
<button class="button button--addOnRight">+</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- Site header -->
|
|
||||||
<div class="demo">
|
|
||||||
<div class="siteHeader">
|
|
||||||
<!-- This section gets pushed to the left side-->
|
|
||||||
<div class="siteHeader__section">
|
|
||||||
<div class="siteHeader__item siteHeaderLogo">
|
|
||||||
<div class="fa fa-inbox"></div>
|
|
||||||
</div>
|
|
||||||
<div class="siteHeader__item siteHeaderButton is-site-header-item-selected">Inbox</div>
|
|
||||||
<div class="siteHeader__item siteHeaderButton">Sent</div>
|
|
||||||
<div class="siteHeader__item siteHeaderButton">Trash</div>
|
|
||||||
</div>
|
|
||||||
<!-- This section gets pushed to the right side-->
|
|
||||||
<div class="siteHeader__section">
|
|
||||||
<div class="siteHeader__item siteHeaderButton">Settings</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<!-- Tabs-->
|
||||||
|
<div class="demo"><div class="tabs">
|
||||||
|
<div class="tab is-tab-selected">Tab 1</div>
|
||||||
|
<div class="tab">Tab 2</div>
|
||||||
|
<div class="tab">Tab 3</div>
|
||||||
|
<div class="tab">Tab 4</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- Stepper input -->
|
|
||||||
<div class="demo">
|
|
||||||
<div class="stepperInput">
|
|
||||||
<button class="button button--addOnLeft">-</button>
|
|
||||||
<input type="text" placeholder="Age" value="32" class="input stepperInput__input"/>
|
|
||||||
<button class="button button--addOnRight">+</button>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Tabs -->
|
|
||||||
<div class="demo">
|
|
||||||
<div class="tabs">
|
|
||||||
<div class="tab is-tab-selected">Tab 1</div>
|
|
||||||
<div class="tab">Tab 2</div>
|
|
||||||
<div class="tab">Tab 3</div>
|
|
||||||
<div class="tab">Tab 4</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
575
dist/styles.css
vendored
575
dist/styles.css
vendored
@@ -1,3 +1,7 @@
|
|||||||
|
|
||||||
|
/*=====================================================
|
||||||
|
contents of: styles/stepper-input.css
|
||||||
|
=====================================================*/
|
||||||
.stepperInput {
|
.stepperInput {
|
||||||
/**
|
/**
|
||||||
* Setting display to flex makes this container lay
|
* Setting display to flex makes this container lay
|
||||||
@@ -8,13 +12,15 @@
|
|||||||
*/
|
*/
|
||||||
display: -webkit-flex;
|
display: -webkit-flex;
|
||||||
display: -ms-flexbox;
|
display: -ms-flexbox;
|
||||||
display: flex; }
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
.stepperInput__input {
|
.stepperInput__input {
|
||||||
border-left: 0;
|
border-left: 0;
|
||||||
border-right: 0;
|
border-right: 0;
|
||||||
width: 60px;
|
width: 60px;
|
||||||
text-align: center; }
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
.button {
|
.button {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
@@ -23,22 +29,28 @@
|
|||||||
background-color: #4EBBE4;
|
background-color: #4EBBE4;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
border: 1px solid #16A2D7;
|
border: 1px solid #16A2D7;
|
||||||
border-radius: 4px; }
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
.button--addOnLeft {
|
.button--addOnLeft {
|
||||||
border-top-right-radius: 0;
|
border-top-right-radius: 0;
|
||||||
border-bottom-right-radius: 0; }
|
border-bottom-right-radius: 0;
|
||||||
|
}
|
||||||
|
|
||||||
.button--addOnRight {
|
.button--addOnRight {
|
||||||
border-top-left-radius: 0;
|
border-top-left-radius: 0;
|
||||||
border-bottom-left-radius: 0; }
|
border-bottom-left-radius: 0;
|
||||||
|
}
|
||||||
|
|
||||||
.input {
|
.input {
|
||||||
border: 1px solid #D7DBDD;
|
border: 1px solid #D7DBDD;
|
||||||
padding: 0 10px;
|
padding: 0 10px;
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
box-shadow: none; }
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
/*=====================================================
|
||||||
|
contents of: styles/tabs.css
|
||||||
|
=====================================================*/
|
||||||
.tabs {
|
.tabs {
|
||||||
/**
|
/**
|
||||||
* Setting display to flex makes this container lay
|
* Setting display to flex makes this container lay
|
||||||
@@ -48,17 +60,25 @@
|
|||||||
display: -webkit-flex;
|
display: -webkit-flex;
|
||||||
display: -ms-flexbox;
|
display: -ms-flexbox;
|
||||||
display: flex;
|
display: flex;
|
||||||
border-bottom: 1px solid #D7DBDD; }
|
|
||||||
|
|
||||||
.tab {
|
border-bottom: 1px solid #D7DBDD;
|
||||||
cursor: pointer;
|
}
|
||||||
padding: 5px 30px;
|
|
||||||
color: #16A2D7;
|
.tab {
|
||||||
font-size: 12px;
|
cursor: pointer;
|
||||||
border-bottom: 2px solid transparent; }
|
padding: 5px 30px;
|
||||||
|
color: #16A2D7;
|
||||||
|
font-size: 12px;
|
||||||
|
border-bottom: 2px solid transparent;
|
||||||
|
}
|
||||||
|
|
||||||
.tab.is-tab-selected {
|
.tab.is-tab-selected {
|
||||||
border-bottom-color: #4EBBE4; }
|
border-bottom-color: #4EBBE4;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*=====================================================
|
||||||
|
contents of: styles/site-header.css
|
||||||
|
=====================================================*/
|
||||||
.siteHeader {
|
.siteHeader {
|
||||||
/**
|
/**
|
||||||
* Lay out the children of this container with
|
* Lay out the children of this container with
|
||||||
@@ -67,6 +87,7 @@
|
|||||||
display: -webkit-flex;
|
display: -webkit-flex;
|
||||||
display: -ms-flexbox;
|
display: -ms-flexbox;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Make the container put as much space as possible
|
* Make the container put as much space as possible
|
||||||
* between its children, with the children at either
|
* between its children, with the children at either
|
||||||
@@ -75,45 +96,59 @@
|
|||||||
-webkit-justify-content: space-between;
|
-webkit-justify-content: space-between;
|
||||||
-ms-flex-pack: justify;
|
-ms-flex-pack: justify;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
background-color: #56727C; }
|
background-color: #56727C;
|
||||||
|
}
|
||||||
|
|
||||||
.siteHeader__section {
|
.siteHeader__section {
|
||||||
/**
|
/**
|
||||||
* Lay out the children of this container with
|
* Lay out the children of this container with
|
||||||
* flexbox.
|
* flexbox.
|
||||||
*/
|
*/
|
||||||
display: -webkit-flex;
|
display: -webkit-flex;
|
||||||
display: -ms-flexbox;
|
display: -ms-flexbox;
|
||||||
display: flex;
|
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;
|
* Align the children in the center, along
|
||||||
font-size: 12px; }
|
* the main axis. By default the children will
|
||||||
.siteHeader__item + .siteHeader__item {
|
* align along their top edges.
|
||||||
margin-left: 5px; }
|
*/
|
||||||
.siteHeader__item.is-site-header-item-selected {
|
-webkit-align-items: center;
|
||||||
color: #FFFFFF;
|
-ms-flex-align: center;
|
||||||
background-color: #415F69;
|
align-items: center;
|
||||||
border-radius: 4px; }
|
}
|
||||||
|
|
||||||
.siteHeaderLogo {
|
.siteHeader__item {
|
||||||
font-size: 20px;
|
padding: 5px 15px;
|
||||||
line-height: 0;
|
font-size: 12px;
|
||||||
color: white; }
|
}
|
||||||
|
|
||||||
.siteHeaderButton {
|
.siteHeader__item + .siteHeader__item {
|
||||||
cursor: pointer;
|
margin-left: 5px;
|
||||||
color: #D9E9EF; }
|
}
|
||||||
|
|
||||||
|
.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 {
|
.formFooter {
|
||||||
/**
|
/**
|
||||||
* Lay out the children of this container with
|
* Lay out the children of this container with
|
||||||
@@ -122,6 +157,7 @@
|
|||||||
display: -webkit-flex;
|
display: -webkit-flex;
|
||||||
display: -ms-flexbox;
|
display: -ms-flexbox;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Align the children in the center, along
|
* Align the children in the center, along
|
||||||
* the main axis, which is horizontal in this case.
|
* the main axis, which is horizontal in this case.
|
||||||
@@ -129,63 +165,70 @@
|
|||||||
-webkit-align-items: center;
|
-webkit-align-items: center;
|
||||||
-ms-flex-align: center;
|
-ms-flex-align: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
/**
|
|
||||||
* Make the container put as much space as possible
|
/**
|
||||||
* between its children, with the children at either
|
* Make the container put as much space as possible
|
||||||
* end laying flush against the container's edges.
|
* between its children, with the children at either
|
||||||
*/
|
* end laying flush against the container's edges.
|
||||||
|
*/
|
||||||
-webkit-justify-content: space-between;
|
-webkit-justify-content: space-between;
|
||||||
-ms-flex-pack: justify;
|
-ms-flex-pack: justify;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
|
||||||
border-top: 1px solid #D7DBDD;
|
border-top: 1px solid #D7DBDD;
|
||||||
padding: 10px; }
|
padding: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
.formFooter__section {
|
.formFooter__section {
|
||||||
/**
|
/**
|
||||||
* This container orders items horizontally.
|
* This container orders items horizontally.
|
||||||
*/
|
*/
|
||||||
display: -webkit-flex;
|
display: -webkit-flex;
|
||||||
display: -ms-flexbox;
|
display: -ms-flexbox;
|
||||||
display: flex;
|
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; }
|
* It aligns them vertically in the center.
|
||||||
|
*/
|
||||||
|
-webkit-align-items: center;
|
||||||
|
-ms-flex-align: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
.formFooterFeedback {
|
.formFooter__item + .formFooter__item {
|
||||||
color: #86969C;
|
margin-left: 5px;
|
||||||
font-size: 12px;
|
}
|
||||||
line-height: 0; }
|
|
||||||
|
|
||||||
.formFooterSpinner {
|
.formFooterFeedback {
|
||||||
-webkit-animation: formFooterSpinner 1s infinite steps(8, end);
|
color: #86969C;
|
||||||
animation: formFooterSpinner 1s infinite steps(8, end); }
|
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 {
|
@-webkit-keyframes formFooterSpinner {
|
||||||
0% {
|
0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
|
||||||
-webkit-transform: rotate(0deg);
|
100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
|
||||||
transform: rotate(0deg); }
|
}
|
||||||
100% {
|
|
||||||
-webkit-transform: rotate(360deg);
|
|
||||||
transform: rotate(360deg); } }
|
|
||||||
|
|
||||||
@keyframes formFooterSpinner {
|
@keyframes formFooterSpinner {
|
||||||
0% {
|
0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
|
||||||
-webkit-transform: rotate(0deg);
|
100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
|
||||||
transform: rotate(0deg); }
|
}
|
||||||
100% {
|
|
||||||
-webkit-transform: rotate(360deg);
|
|
||||||
transform: rotate(360deg); } }
|
|
||||||
.button--clear {
|
.button--clear {
|
||||||
color: #16A2D7;
|
color: #16A2D7;
|
||||||
background-color: #FFFFFF;
|
background-color: #FFFFFF;
|
||||||
border: 1px solid #FFFFFF; }
|
border: 1px solid #FFFFFF;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*=====================================================
|
||||||
|
contents of: styles/side-bar.css
|
||||||
|
=====================================================*/
|
||||||
.sideBar {
|
.sideBar {
|
||||||
/**
|
/**
|
||||||
* This container orders items according to flexbox
|
* This container orders items according to flexbox
|
||||||
@@ -195,6 +238,7 @@
|
|||||||
display: -webkit-flex;
|
display: -webkit-flex;
|
||||||
display: -ms-flexbox;
|
display: -ms-flexbox;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* ...sets the main axis to be vertical instead of
|
* ...sets the main axis to be vertical instead of
|
||||||
* horizontal, so now the children are laid out
|
* horizontal, so now the children are laid out
|
||||||
@@ -203,6 +247,7 @@
|
|||||||
-webkit-flex-direction: column;
|
-webkit-flex-direction: column;
|
||||||
-ms-flex-direction: column;
|
-ms-flex-direction: column;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* It will also put as much space as possible
|
* It will also put as much space as possible
|
||||||
* between its children, with the children at either end
|
* between its children, with the children at either end
|
||||||
@@ -211,21 +256,29 @@
|
|||||||
-webkit-justify-content: space-between;
|
-webkit-justify-content: space-between;
|
||||||
-ms-flex-pack: justify;
|
-ms-flex-pack: justify;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
|
||||||
height: 300px;
|
height: 300px;
|
||||||
width: 150px;
|
width: 150px;
|
||||||
border-right: 1px solid #D7DBDD;
|
border-right: 1px solid #D7DBDD;
|
||||||
background-color: #FCFDFD;
|
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 {
|
.sideBar__item.is-side-bar-item-selected {
|
||||||
background-color: #EEF3F5;
|
background-color: #EEF3F5;
|
||||||
border-radius: 4px; }
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*=====================================================
|
||||||
|
contents of: styles/centered-prompt.css
|
||||||
|
=====================================================*/
|
||||||
.centeredPrompt {
|
.centeredPrompt {
|
||||||
/**
|
/**
|
||||||
* Lay out the children of this container with
|
* Lay out the children of this container with
|
||||||
@@ -234,6 +287,7 @@
|
|||||||
display: -webkit-flex;
|
display: -webkit-flex;
|
||||||
display: -ms-flexbox;
|
display: -ms-flexbox;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Rotate the main axis so that the children
|
* Rotate the main axis so that the children
|
||||||
* are laid out vertically, the same as in the
|
* are laid out vertically, the same as in the
|
||||||
@@ -242,6 +296,7 @@
|
|||||||
-webkit-flex-direction: column;
|
-webkit-flex-direction: column;
|
||||||
-ms-flex-direction: column;
|
-ms-flex-direction: column;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Align the children in the center, along
|
* Align the children in the center, along
|
||||||
* the main axis. Because the direction is
|
* the main axis. Because the direction is
|
||||||
@@ -251,6 +306,7 @@
|
|||||||
-webkit-align-items: center;
|
-webkit-align-items: center;
|
||||||
-ms-flex-align: center;
|
-ms-flex-align: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Instead of pushing the children apart, as in
|
* Instead of pushing the children apart, as in
|
||||||
* previous examples, we will group them together
|
* previous examples, we will group them together
|
||||||
@@ -259,31 +315,41 @@
|
|||||||
-webkit-justify-content: center;
|
-webkit-justify-content: center;
|
||||||
-ms-flex-pack: center;
|
-ms-flex-pack: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
|
||||||
min-height: 300px;
|
min-height: 300px;
|
||||||
padding: 10px; }
|
padding: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
.centeredPrompt__item + .centeredPrompt__item {
|
.centeredPrompt__item + .centeredPrompt__item {
|
||||||
margin-top: 5px; }
|
margin-top: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
.centeredPromptIcon {
|
.centeredPromptIcon {
|
||||||
font-size: 60px;
|
font-size: 60px;
|
||||||
line-height: 0; }
|
line-height: 0;
|
||||||
|
}
|
||||||
|
|
||||||
.centeredPromptLabel {
|
.centeredPromptLabel {
|
||||||
color: #86969C;
|
color: #86969C;
|
||||||
font-size: 30px;
|
font-size: 30px;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
text-align: center; }
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
.centeredPromptDetails {
|
.centeredPromptDetails {
|
||||||
color: #86969C;
|
color: #86969C;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
text-align: center; }
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
.icon {
|
.icon {
|
||||||
color: #BCD2DA; }
|
color: #BCD2DA;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*=====================================================
|
||||||
|
contents of: styles/centered-icon.css
|
||||||
|
=====================================================*/
|
||||||
.centeredIcon {
|
.centeredIcon {
|
||||||
/**
|
/**
|
||||||
* Lay out the children of this container with
|
* Lay out the children of this container with
|
||||||
@@ -292,6 +358,7 @@
|
|||||||
display: -webkit-flex;
|
display: -webkit-flex;
|
||||||
display: -ms-flexbox;
|
display: -ms-flexbox;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* As in the above "Centered prmopt" example,
|
* As in the above "Centered prmopt" example,
|
||||||
* we'll rotate the main axis so that the children
|
* we'll rotate the main axis so that the children
|
||||||
@@ -300,6 +367,7 @@
|
|||||||
-webkit-flex-direction: column;
|
-webkit-flex-direction: column;
|
||||||
-ms-flex-direction: column;
|
-ms-flex-direction: column;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* And just like in that example, align the children
|
* And just like in that example, align the children
|
||||||
* in the center, along the main axis.
|
* in the center, along the main axis.
|
||||||
@@ -307,6 +375,7 @@
|
|||||||
-webkit-align-items: center;
|
-webkit-align-items: center;
|
||||||
-ms-flex-align: center;
|
-ms-flex-align: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Same thing here as before: group the children
|
* Same thing here as before: group the children
|
||||||
* together in the center of their container.
|
* together in the center of their container.
|
||||||
@@ -314,13 +383,21 @@
|
|||||||
-webkit-justify-content: center;
|
-webkit-justify-content: center;
|
||||||
-ms-flex-pack: center;
|
-ms-flex-pack: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
|
||||||
border: 1px solid #D7DBDD;
|
border: 1px solid #D7DBDD;
|
||||||
font-size: 40px;
|
font-size: 40px;
|
||||||
width: 90px;
|
width: 90px;
|
||||||
height: 90px;
|
height: 90px;
|
||||||
border-radius: 100%;
|
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 {
|
.featureListItem {
|
||||||
/**
|
/**
|
||||||
* Lay out the children of this container with
|
* Lay out the children of this container with
|
||||||
@@ -329,6 +406,7 @@
|
|||||||
display: -webkit-flex;
|
display: -webkit-flex;
|
||||||
display: -ms-flexbox;
|
display: -ms-flexbox;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Align the children in the center, along
|
* Align the children in the center, along
|
||||||
* the main axis, which is horizontal in this case.
|
* the main axis, which is horizontal in this case.
|
||||||
@@ -336,10 +414,14 @@
|
|||||||
-webkit-align-items: center;
|
-webkit-align-items: center;
|
||||||
-ms-flex-align: center;
|
-ms-flex-align: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
||||||
max-width: 400px;
|
max-width: 400px;
|
||||||
padding: 10px; }
|
padding: 10px;
|
||||||
.featureListItem + .featureListItem {
|
}
|
||||||
border-top: 1px solid #D7DBDD; }
|
|
||||||
|
.featureListItem + .featureListItem {
|
||||||
|
border-top: 1px solid #D7DBDD;
|
||||||
|
}
|
||||||
|
|
||||||
.featureListItem--reverse {
|
.featureListItem--reverse {
|
||||||
/**
|
/**
|
||||||
@@ -350,20 +432,27 @@
|
|||||||
*/
|
*/
|
||||||
-webkit-flex-direction: row-reverse;
|
-webkit-flex-direction: row-reverse;
|
||||||
-ms-flex-direction: row-reverse;
|
-ms-flex-direction: row-reverse;
|
||||||
flex-direction: row-reverse; }
|
flex-direction: row-reverse;
|
||||||
|
}
|
||||||
|
|
||||||
.featureListItem__icon,
|
.featureListItem__icon,
|
||||||
.featureListItem__description {
|
.featureListItem__description {
|
||||||
padding: 5px 15px; }
|
padding: 5px 15px;
|
||||||
|
}
|
||||||
|
|
||||||
.featureListItem__icon {
|
.featureListItem__icon {
|
||||||
font-size: 50px;
|
font-size: 50px;
|
||||||
line-height: 0; }
|
line-height: 0;
|
||||||
|
}
|
||||||
|
|
||||||
.featureListItem__description {
|
.featureListItem__description {
|
||||||
color: #86969C;
|
color: #86969C;
|
||||||
font-size: 12px; }
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*=====================================================
|
||||||
|
contents of: styles/card.css
|
||||||
|
=====================================================*/
|
||||||
.card {
|
.card {
|
||||||
/**
|
/**
|
||||||
* Lay out the children of this container with
|
* Lay out the children of this container with
|
||||||
@@ -372,6 +461,7 @@
|
|||||||
display: -webkit-flex;
|
display: -webkit-flex;
|
||||||
display: -ms-flexbox;
|
display: -ms-flexbox;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Rotate the main axis so that the children
|
* Rotate the main axis so that the children
|
||||||
* are laid out vertically.
|
* are laid out vertically.
|
||||||
@@ -379,66 +469,84 @@
|
|||||||
-webkit-flex-direction: column;
|
-webkit-flex-direction: column;
|
||||||
-ms-flex-direction: column;
|
-ms-flex-direction: column;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|
||||||
border: 1px solid #CAD0D2;
|
border: 1px solid #CAD0D2;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
overflow: hidden; }
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
.card__description {
|
.card__description {
|
||||||
/**
|
/**
|
||||||
* Lay out the children of this container with
|
* Lay out the children of this container with
|
||||||
* flexbox.
|
* flexbox.
|
||||||
*/
|
*/
|
||||||
display: -webkit-flex;
|
display: -webkit-flex;
|
||||||
display: -ms-flexbox;
|
display: -ms-flexbox;
|
||||||
display: flex;
|
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;
|
* We're going to lay out this element's children
|
||||||
margin-bottom: 10px; }
|
* 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;
|
* Just like in the "Centered prompt" example,
|
||||||
font-size: 12px;
|
* we'll align the children in the center, along
|
||||||
text-align: center; }
|
* the main axis.
|
||||||
|
*/
|
||||||
|
-webkit-align-items: center;
|
||||||
|
-ms-flex-align: center;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
.card__price {
|
/**
|
||||||
text-align: center;
|
* And just like in the "Centered prompt", we'll
|
||||||
color: #57727C;
|
* group the children in the center of their
|
||||||
font-size: 12px;
|
* container.
|
||||||
font-weight: 700;
|
*/
|
||||||
padding: 5px 15px;
|
-webkit-justify-content: center;
|
||||||
border-top: 1px solid #D7DBDD;
|
-ms-flex-pack: center;
|
||||||
background-color: #EEF3F5; }
|
justify-content: center;
|
||||||
|
|
||||||
|
padding: 15px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card__descriptionIcon {
|
||||||
|
font-size: 32px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card__descriptionText {
|
||||||
|
color: #57727C;
|
||||||
|
font-size: 12px;
|
||||||
|
text-align: center;
|
||||||
|
max-width: calc(100% - 30px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.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 {
|
.card--fixedWidth {
|
||||||
max-width: 120px; }
|
max-width: 120px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*=====================================================
|
||||||
|
contents of: index.css
|
||||||
|
=====================================================*/
|
||||||
|
/*=====================================================
|
||||||
|
contents of: styles/card-group.css
|
||||||
|
=====================================================*/
|
||||||
.cardGroup {
|
.cardGroup {
|
||||||
/**
|
/**
|
||||||
* Lay out the children of this container with
|
* Lay out the children of this container with
|
||||||
@@ -447,54 +555,67 @@
|
|||||||
display: -webkit-flex;
|
display: -webkit-flex;
|
||||||
display: -ms-flexbox;
|
display: -ms-flexbox;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
||||||
border: 1px solid #CAD0D2;
|
border: 1px solid #CAD0D2;
|
||||||
border-radius: 4px;
|
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 set flex-grow to 1 so that it will
|
||||||
|
* expand to fill its container. (The default
|
||||||
|
* default value is 0.)
|
||||||
|
*
|
||||||
|
* We'll also set flex-shrink to 1 so that the
|
||||||
|
* element will shrink as its container gets
|
||||||
|
* smaller. (The default value is 1.)
|
||||||
|
*
|
||||||
|
* 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.
|
||||||
|
*
|
||||||
|
* NOTE: IE11 ignores flex short-hand declarations
|
||||||
|
* with unitless flex-basis values. So we have to
|
||||||
|
* use 0% instead of 0 as a workaround. You can
|
||||||
|
* find more info at:
|
||||||
|
* github.com/philipwalton/flexbugs.
|
||||||
|
*/
|
||||||
|
-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 {
|
.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 */
|
|
||||||
@@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "flexbox-patterns",
|
"name": "flexbox-patterns",
|
||||||
"version": "0.0.1",
|
"version": "0.1.3",
|
||||||
"description": "Patterns for using flexbox CSS to build awesome UI components",
|
"description": "Patterns for using flexbox CSS to build awesome UI components",
|
||||||
"repository": "cjcenizal/flexbox-patterns",
|
"repository": "cjcenizal/flexbox-patterns",
|
||||||
"author": {
|
"author": {
|
||||||
@@ -10,9 +10,14 @@
|
|||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"autoprefixer": "6.2.3",
|
"autoprefixer": "6.2.3",
|
||||||
|
"css-concat": "0.0.4",
|
||||||
|
"jade": "1.11.0",
|
||||||
"postcss-cli": "2.3.3"
|
"postcss-cli": "2.3.3"
|
||||||
},
|
},
|
||||||
"scripts": {
|
"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"
|
"build": "npm run compileCss && npm run autoPrefixCss && npm run compileHtml",
|
||||||
|
"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"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
23
src/examples/card-group.html
Normal file
23
src/examples/card-group.html
Normal file
@@ -0,0 +1,23 @@
|
|||||||
|
<div class="cardGroup">
|
||||||
|
<div class="card cardGroup__card">
|
||||||
|
<div class="card__description cardGroup__cardDescription">
|
||||||
|
<div class="icon fa fa-thumbs-o-up card__descriptionIcon"></div>
|
||||||
|
<div class="card__descriptionText">Trial</div>
|
||||||
|
</div>
|
||||||
|
<div class="card__price">Free!</div>
|
||||||
|
</div>
|
||||||
|
<div class="card cardGroup__card">
|
||||||
|
<div class="card__description cardGroup__cardDescription">
|
||||||
|
<div class="icon fa fa-trophy card__descriptionIcon"></div>
|
||||||
|
<div class="card__descriptionText">Basic tier<br/>(most popular)</div>
|
||||||
|
</div>
|
||||||
|
<div class="card__price">$10.00</div>
|
||||||
|
</div>
|
||||||
|
<div class="card cardGroup__card">
|
||||||
|
<div class="card__description cardGroup__cardDescription">
|
||||||
|
<div class="icon fa fa-bolt card__descriptionIcon"></div>
|
||||||
|
<div class="card__descriptionText">Advanced tier<br/>(only for enterprise-level professionals)</div>
|
||||||
|
</div>
|
||||||
|
<div class="card__price">$6,000.00</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
7
src/examples/card.html
Normal file
7
src/examples/card.html
Normal file
@@ -0,0 +1,7 @@
|
|||||||
|
<div class="card card--fixedWidth">
|
||||||
|
<div class="card__description">
|
||||||
|
<div class="icon fa fa-flask card__descriptionIcon"></div>
|
||||||
|
<div class="card__descriptionText">Science potion</div>
|
||||||
|
</div>
|
||||||
|
<div class="card__price">Costs $5</div>
|
||||||
|
</div>
|
||||||
3
src/examples/centered-icon.html
Normal file
3
src/examples/centered-icon.html
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
<div class="centeredIcon">
|
||||||
|
<div class="icon fa fa-phone"></div>
|
||||||
|
</div>
|
||||||
8
src/examples/centered-prompt.html
Normal file
8
src/examples/centered-prompt.html
Normal file
@@ -0,0 +1,8 @@
|
|||||||
|
<div class="centeredPrompt">
|
||||||
|
<div class="centeredPrompt__item centeredPromptIcon">
|
||||||
|
<div class="icon fa fa-smile-o"></div>
|
||||||
|
</div>
|
||||||
|
<div class="centeredPrompt__item centeredPromptLabel">Welcome to the app!</div>
|
||||||
|
<div class="centeredPrompt__item centeredPromptDetails">Thanks for signing up. Let’s take a look around.</div>
|
||||||
|
<div class="centeredPrompt__item button">Begin tour</div>
|
||||||
|
</div>
|
||||||
18
src/examples/feature-list.html
Normal file
18
src/examples/feature-list.html
Normal file
@@ -0,0 +1,18 @@
|
|||||||
|
<div class="featureListItem">
|
||||||
|
<div class="featureListItem__icon">
|
||||||
|
<div class="icon fa fa-calendar"></div>
|
||||||
|
</div>
|
||||||
|
<div class="featureListItem__description">The calendar feature makes scheduling a snap.</div>
|
||||||
|
</div>
|
||||||
|
<div class="featureListItem featureListItem--reverse">
|
||||||
|
<div class="featureListItem__icon">
|
||||||
|
<div class="icon fa fa-dashboard"></div>
|
||||||
|
</div>
|
||||||
|
<div class="featureListItem__description">Our dashboard gives you a bird’s-eye-view-at-a-glance-on-the-go.</div>
|
||||||
|
</div>
|
||||||
|
<div class="featureListItem">
|
||||||
|
<div class="featureListItem__icon">
|
||||||
|
<div class="icon fa fa-envelope"></div>
|
||||||
|
</div>
|
||||||
|
<div class="featureListItem__description">You can get notified by email or SMS.</div>
|
||||||
|
</div>
|
||||||
13
src/examples/form-footer.html
Normal file
13
src/examples/form-footer.html
Normal file
@@ -0,0 +1,13 @@
|
|||||||
|
<div class="formFooter">
|
||||||
|
<!-- This section gets pushed to the left side-->
|
||||||
|
<div class="formFooter__section">
|
||||||
|
<div class="formFooter__item formFooterFeedback">
|
||||||
|
<div class="fa fa-spinner formFooterSpinner"></div> Saving...
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- This section gets pushed to the right side-->
|
||||||
|
<div class="formFooter__section">
|
||||||
|
<div class="formFooter__item button button--clear">Reset</div>
|
||||||
|
<div class="formFooter__item button">Save</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
13
src/examples/side-bar.html
Normal file
13
src/examples/side-bar.html
Normal file
@@ -0,0 +1,13 @@
|
|||||||
|
<div class="sideBar">
|
||||||
|
<!-- This section gets pushed to the top-->
|
||||||
|
<div class="sideBar__section">
|
||||||
|
<div class="sideBar__item is-side-bar-item-selected">Inbox</div>
|
||||||
|
<div class="sideBar__item">Contacts</div>
|
||||||
|
<div class="sideBar__item">Account</div>
|
||||||
|
</div>
|
||||||
|
<!-- This section gets pushed to the bottom-->
|
||||||
|
<div class="sideBar__section">
|
||||||
|
<div class="sideBar__item">Change theme</div>
|
||||||
|
<div class="sideBar__item">Legal</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
16
src/examples/site-header.html
Normal file
16
src/examples/site-header.html
Normal file
@@ -0,0 +1,16 @@
|
|||||||
|
<div class="siteHeader">
|
||||||
|
<!-- This section gets pushed to the left side-->
|
||||||
|
<div class="siteHeader__section">
|
||||||
|
<div class="siteHeader__item siteHeaderLogo">
|
||||||
|
<div class="fa fa-inbox"></div>
|
||||||
|
</div>
|
||||||
|
<div class="siteHeader__item siteHeaderButton is-site-header-item-selected">Inbox</div>
|
||||||
|
<div class="siteHeader__item siteHeaderButton">Sent</div>
|
||||||
|
<div class="siteHeader__item siteHeaderButton">Trash</div>
|
||||||
|
</div>
|
||||||
|
<!-- This section gets pushed to the right side-->
|
||||||
|
<div class="siteHeader__section">
|
||||||
|
<div class="siteHeader__item siteHeaderButton">Settings</div>
|
||||||
|
<div class="siteHeader__item siteHeaderButton">Log out</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
5
src/examples/stepper-input.html
Normal file
5
src/examples/stepper-input.html
Normal file
@@ -0,0 +1,5 @@
|
|||||||
|
<div class="stepperInput">
|
||||||
|
<button class="button button--addOnLeft">-</button>
|
||||||
|
<input type="text" placeholder="Age" value="32" class="input stepperInput__input"/>
|
||||||
|
<button class="button button--addOnRight">+</button>
|
||||||
|
</div>
|
||||||
6
src/examples/tabs.html
Normal file
6
src/examples/tabs.html
Normal file
@@ -0,0 +1,6 @@
|
|||||||
|
<div class="tabs">
|
||||||
|
<div class="tab is-tab-selected">Tab 1</div>
|
||||||
|
<div class="tab">Tab 2</div>
|
||||||
|
<div class="tab">Tab 3</div>
|
||||||
|
<div class="tab">Tab 4</div>
|
||||||
|
</div>
|
||||||
11
src/index.css
Normal file
11
src/index.css
Normal file
@@ -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");
|
||||||
85
src/index.jade
Normal file
85
src/index.jade
Normal file
@@ -0,0 +1,85 @@
|
|||||||
|
doctype html
|
||||||
|
html(lang='en')
|
||||||
|
head
|
||||||
|
|
||||||
|
title Flexbox Patterns Demo Page
|
||||||
|
|
||||||
|
meta(
|
||||||
|
name="viewport"
|
||||||
|
content="width=device-width, initial-scale=1"
|
||||||
|
)
|
||||||
|
|
||||||
|
//- Fonts
|
||||||
|
link(
|
||||||
|
href="http://fonts.googleapis.com/css?family=Lato:400"
|
||||||
|
rel="stylesheet"
|
||||||
|
type="text/css"
|
||||||
|
)
|
||||||
|
|
||||||
|
//- Font aweosome icons
|
||||||
|
link(
|
||||||
|
rel="stylesheet"
|
||||||
|
href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"
|
||||||
|
)
|
||||||
|
|
||||||
|
//- CSS
|
||||||
|
link(
|
||||||
|
href="styles.css"
|
||||||
|
rel="stylesheet"
|
||||||
|
type="text/css"
|
||||||
|
)
|
||||||
|
|
||||||
|
style.
|
||||||
|
body {
|
||||||
|
padding: 40px;
|
||||||
|
font-family: "Lato", "Helvetica", sans-serif;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.demo {
|
||||||
|
max-width: 500px;
|
||||||
|
margin-bottom: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
body
|
||||||
|
|
||||||
|
// Card group
|
||||||
|
.demo
|
||||||
|
include ./examples/card-group.html
|
||||||
|
|
||||||
|
// Card
|
||||||
|
.demo
|
||||||
|
include ./examples/card.html
|
||||||
|
|
||||||
|
// Centered icon
|
||||||
|
.demo
|
||||||
|
include ./examples/centered-icon.html
|
||||||
|
|
||||||
|
// Centered prompt
|
||||||
|
.demo
|
||||||
|
include ./examples/centered-prompt.html
|
||||||
|
|
||||||
|
// Feature list
|
||||||
|
.demo
|
||||||
|
include ./examples/feature-list.html
|
||||||
|
|
||||||
|
// Form footer
|
||||||
|
.demo
|
||||||
|
include ./examples/form-footer.html
|
||||||
|
|
||||||
|
// Side bar
|
||||||
|
.demo
|
||||||
|
include ./examples/side-bar.html
|
||||||
|
|
||||||
|
// Site header
|
||||||
|
.demo
|
||||||
|
include ./examples/site-header.html
|
||||||
|
|
||||||
|
// Stepper input
|
||||||
|
.demo
|
||||||
|
include ./examples/stepper-input.html
|
||||||
|
|
||||||
|
// Tabs
|
||||||
|
.demo
|
||||||
|
include ./examples/tabs.html
|
||||||
@@ -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";
|
|
||||||
@@ -17,13 +17,13 @@
|
|||||||
* properties. These properties control how the
|
* properties. These properties control how the
|
||||||
* element resizes to fill its container.
|
* element resizes to fill its container.
|
||||||
*
|
*
|
||||||
* We'll also set flex-grow to 1 so that it
|
* We'll set flex-grow to 1 so that it will
|
||||||
* will expand to fill its container. (The
|
* expand to fill its container. (The default
|
||||||
* default value is 1.)
|
* default value is 0.)
|
||||||
*
|
*
|
||||||
* We'll set flex-shrink to 1 so that the element
|
* We'll also set flex-shrink to 1 so that the
|
||||||
* will shrink as its container gets smaller.
|
* element will shrink as its container gets
|
||||||
* (The default value is 0.)
|
* smaller. (The default value is 1.)
|
||||||
*
|
*
|
||||||
* Last, we set flex-basis to 0 so that its
|
* Last, we set flex-basis to 0 so that its
|
||||||
* size is solely determined by the size of
|
* size is solely determined by the size of
|
||||||
@@ -36,15 +36,21 @@
|
|||||||
* shrink with its container and siblings, but
|
* shrink with its container and siblings, but
|
||||||
* they will all have the same size, even if they
|
* they will all have the same size, even if they
|
||||||
* have different amounts of content.
|
* have different amounts of content.
|
||||||
|
*
|
||||||
|
* NOTE: IE11 ignores flex short-hand declarations
|
||||||
|
* with unitless flex-basis values. So we have to
|
||||||
|
* use 0% instead of 0 as a workaround. You can
|
||||||
|
* find more info at:
|
||||||
|
* github.com/philipwalton/flexbugs.
|
||||||
*/
|
*/
|
||||||
flex: 1 1 0;
|
flex: 1 1 0%;
|
||||||
|
|
||||||
border: none;
|
border: none;
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
|
}
|
||||||
|
|
||||||
& + & {
|
.cardGroup__card + .cardGroup__card {
|
||||||
border-left: 1px solid #D7DBDD;
|
border-left: 1px solid #D7DBDD;
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.cardGroup__cardDescription {
|
.cardGroup__cardDescription {
|
||||||
@@ -26,7 +26,7 @@
|
|||||||
/**
|
/**
|
||||||
* We're going to lay out this element's children
|
* We're going to lay out this element's children
|
||||||
* just like in the "Centered prompt" example.
|
* just like in the "Centered prompt" example.
|
||||||
* First we'll rotate the main axis so that the
|
* First we'll rotate the main axis so that the
|
||||||
* children are laid out vertically.
|
* children are laid out vertically.
|
||||||
*/
|
*/
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
@@ -45,7 +45,7 @@
|
|||||||
*/
|
*/
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
|
||||||
padding: 15px;
|
padding: 15px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.card__descriptionIcon {
|
.card__descriptionIcon {
|
||||||
@@ -57,6 +57,7 @@
|
|||||||
color: #57727C;
|
color: #57727C;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
max-width: calc(100% - 30px);
|
||||||
}
|
}
|
||||||
|
|
||||||
.card__price {
|
.card__price {
|
||||||
@@ -71,4 +72,4 @@
|
|||||||
|
|
||||||
.card--fixedWidth {
|
.card--fixedWidth {
|
||||||
max-width: 120px;
|
max-width: 120px;
|
||||||
}
|
}
|
||||||
@@ -30,7 +30,7 @@
|
|||||||
height: 90px;
|
height: 90px;
|
||||||
border-radius: 100%;
|
border-radius: 100%;
|
||||||
box-shadow:
|
box-shadow:
|
||||||
0 2px 1px rgba(#000000, 0.05),
|
0 2px 1px rgba(0, 0, 0, 0.05),
|
||||||
0 2px 3px rgba(#000000, 0.05),
|
0 2px 3px rgba(0, 0, 0, 0.05),
|
||||||
0 4px 8px rgba(#000000, 0.05);
|
0 4px 8px rgba(0, 0, 0, 0.05);
|
||||||
}
|
}
|
||||||
@@ -31,10 +31,8 @@
|
|||||||
padding: 10px;
|
padding: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.centeredPrompt__item {
|
.centeredPrompt__item + .centeredPrompt__item {
|
||||||
& + & {
|
margin-top: 5px;
|
||||||
margin-top: 5px;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.centeredPromptIcon {
|
.centeredPromptIcon {
|
||||||
@@ -58,4 +56,4 @@
|
|||||||
|
|
||||||
.icon {
|
.icon {
|
||||||
color: #BCD2DA;
|
color: #BCD2DA;
|
||||||
}
|
}
|
||||||
@@ -4,7 +4,7 @@
|
|||||||
* flexbox, which is horizontal by default.
|
* flexbox, which is horizontal by default.
|
||||||
*/
|
*/
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Align the children in the center, along
|
* Align the children in the center, along
|
||||||
* the main axis, which is horizontal in this case.
|
* the main axis, which is horizontal in this case.
|
||||||
@@ -13,10 +13,10 @@
|
|||||||
|
|
||||||
max-width: 400px;
|
max-width: 400px;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
|
}
|
||||||
& + & {
|
|
||||||
border-top: 1px solid #D7DBDD;
|
.featureListItem + .featureListItem {
|
||||||
}
|
border-top: 1px solid #D7DBDD;
|
||||||
}
|
}
|
||||||
|
|
||||||
.featureListItem--reverse {
|
.featureListItem--reverse {
|
||||||
@@ -29,7 +29,7 @@
|
|||||||
flex-direction: row-reverse;
|
flex-direction: row-reverse;
|
||||||
}
|
}
|
||||||
|
|
||||||
.featureListItem__icon,
|
.featureListItem__icon,
|
||||||
.featureListItem__description {
|
.featureListItem__description {
|
||||||
padding: 5px 15px;
|
padding: 5px 15px;
|
||||||
}
|
}
|
||||||
@@ -42,4 +42,4 @@
|
|||||||
.featureListItem__description {
|
.featureListItem__description {
|
||||||
color: #86969C;
|
color: #86969C;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
}
|
}
|
||||||
@@ -27,17 +27,15 @@
|
|||||||
* This container orders items horizontally.
|
* This container orders items horizontally.
|
||||||
*/
|
*/
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* It aligns them vertically in the center.
|
* It aligns them vertically in the center.
|
||||||
*/
|
*/
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.formFooter__item {
|
.formFooter__item + .formFooter__item {
|
||||||
& + & {
|
margin-left: 5px;
|
||||||
margin-left: 5px;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.formFooterFeedback {
|
.formFooterFeedback {
|
||||||
@@ -47,7 +45,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.formFooterSpinner {
|
.formFooterSpinner {
|
||||||
animation: formFooterSpinner 1s infinite steps(8, end);
|
animation: formFooterSpinner 1s infinite steps(8, end);
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes formFooterSpinner {
|
@keyframes formFooterSpinner {
|
||||||
@@ -59,4 +57,4 @@
|
|||||||
color: #16A2D7;
|
color: #16A2D7;
|
||||||
background-color: #FFFFFF;
|
background-color: #FFFFFF;
|
||||||
border: 1px solid #FFFFFF;
|
border: 1px solid #FFFFFF;
|
||||||
}
|
}
|
||||||
@@ -32,9 +32,9 @@
|
|||||||
padding: 5px 10px;
|
padding: 5px 10px;
|
||||||
color: #16A2D7;
|
color: #16A2D7;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
&.is-side-bar-item-selected {
|
.sideBar__item.is-side-bar-item-selected {
|
||||||
background-color: #EEF3F5;
|
background-color: #EEF3F5;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
}
|
}
|
||||||
}
|
|
||||||
@@ -34,16 +34,16 @@
|
|||||||
.siteHeader__item {
|
.siteHeader__item {
|
||||||
padding: 5px 15px;
|
padding: 5px 15px;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
& + & {
|
.siteHeader__item + .siteHeader__item {
|
||||||
margin-left: 5px;
|
margin-left: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.is-site-header-item-selected {
|
.siteHeader__item.is-site-header-item-selected {
|
||||||
color: #FFFFFF;
|
color: #FFFFFF;
|
||||||
background-color: #415F69;
|
background-color: #415F69;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.siteHeaderLogo {
|
.siteHeaderLogo {
|
||||||
@@ -55,4 +55,4 @@
|
|||||||
.siteHeaderButton {
|
.siteHeaderButton {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
color: #D9E9EF;
|
color: #D9E9EF;
|
||||||
}
|
}
|
||||||
@@ -15,8 +15,8 @@
|
|||||||
color: #16A2D7;
|
color: #16A2D7;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
border-bottom: 2px solid transparent;
|
border-bottom: 2px solid transparent;
|
||||||
|
}
|
||||||
&.is-tab-selected {
|
|
||||||
border-bottom-color: #4EBBE4;
|
.tab.is-tab-selected {
|
||||||
}
|
border-bottom-color: #4EBBE4;
|
||||||
}
|
}
|
||||||
Reference in New Issue
Block a user