diff --git a/packages/my-joyent/src/components/diskTypeForm/__tests__/__snapshots__/index.spec.js.snap b/packages/my-joyent/src/components/diskTypeForm/__tests__/__snapshots__/index.spec.js.snap
index 6fa13ba4..3ffc38c9 100644
--- a/packages/my-joyent/src/components/diskTypeForm/__tests__/__snapshots__/index.spec.js.snap
+++ b/packages/my-joyent/src/components/diskTypeForm/__tests__/__snapshots__/index.spec.js.snap
@@ -104,6 +104,18 @@ exports[`renders without throwing 1`] = `
.c5 {
list-style-type: none;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-align-items: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ font-weight: 400;
+}
+
+.c5 label {
font-weight: 400;
}
@@ -197,7 +209,7 @@ exports[`renders without throwing 1`] = `
without throwing 1`] = `
/>
Magnetic
@@ -239,7 +251,7 @@ exports[`renders without throwing 1`] = `
without throwing 1`] = `
/>
SSD
diff --git a/packages/my-joyent/src/components/empty/__tests__/__snapshots__/index.spec.js.snap b/packages/my-joyent/src/components/empty/__tests__/__snapshots__/index.spec.js.snap
index 371e15cb..f9aa0981 100644
--- a/packages/my-joyent/src/components/empty/__tests__/__snapshots__/index.spec.js.snap
+++ b/packages/my-joyent/src/components/empty/__tests__/__snapshots__/index.spec.js.snap
@@ -12,13 +12,13 @@ exports[`renders without throwing 1`] = `
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
- -webkit-box-pack: start;
- -webkit-justify-content: flex-start;
- -ms-flex-pack: start;
- justify-content: flex-start;
- -webkit-flex-grow: 2;
- -ms-flex-grow: 2;
- flex-grow: 2;
+ -webkit-align-items: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ -webkit-flex-grow: 4;
+ -ms-flex-grow: 4;
+ flex-grow: 4;
-webkit-flex-basis: 5.625rem;
-ms-flex-basis: 5.625rem;
flex-basis: 5.625rem;
diff --git a/packages/my-joyent/src/components/filters/__tests__/__snapshots__/filters.spec.js.snap b/packages/my-joyent/src/components/filters/__tests__/__snapshots__/filters.spec.js.snap
index d79e65e8..4629b696 100644
--- a/packages/my-joyent/src/components/filters/__tests__/__snapshots__/filters.spec.js.snap
+++ b/packages/my-joyent/src/components/filters/__tests__/__snapshots__/filters.spec.js.snap
@@ -180,6 +180,7 @@ exports[`renders without throwing 1`] = `
font-style: normal;
font-stretch: normal;
display: block;
+ text-align: left;
}
.c13 {
@@ -253,6 +254,7 @@ exports[`renders without throwing 1`] = `
font-style: normal;
font-stretch: normal;
display: block;
+ text-align: left;
margin-right: 0.75rem;
font-weight: bold;
}
@@ -365,6 +367,18 @@ exports[`renders without throwing 1`] = `
.c21 {
list-style-type: none;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-align-items: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ font-weight: 400;
+}
+
+.c21 label {
font-weight: 400;
}
@@ -924,7 +938,7 @@ exports[`renders without throwing 1`] = `
without throwing 1`] = `
/>
Magnetic
@@ -966,7 +980,7 @@ exports[`renders without throwing 1`] = `
without throwing 1`] = `
/>
SSD
diff --git a/packages/my-joyent/src/components/filters/filters.js b/packages/my-joyent/src/components/filters/filters.js
index 0e81b14b..6322a966 100644
--- a/packages/my-joyent/src/components/filters/filters.js
+++ b/packages/my-joyent/src/components/filters/filters.js
@@ -2,13 +2,10 @@ import React, { Component } from 'react';
import styled from 'styled-components';
import remcalc from 'remcalc';
import isEqual from 'lodash.isequal';
-import {
- Button,
- Label,
- Slider
-} from 'joyent-ui-toolkit';
+import { Button, Label } from 'joyent-ui-toolkit';
import { default as defaultState } from '@state/state';
import { default as DiskTypeFrom } from '@components/diskTypeForm';
+import Sliders from './sliders';
const FilterWrapper = styled.section`
display: flex;
@@ -45,19 +42,6 @@ const Subtitle = styled(Label)`
margin-bottom: ${remcalc(8)};
`;
-const getFirstAndLast = (arr, key) => {
- const sorted = arr.sort(
- (a, b) => (a[key] === b[key] ? 0 : a[key] < b[key] ? -1 : 1)
- );
-
- if (sorted.length > 0) {
- return {
- min: parseFloat(sorted[0][key]),
- max: parseFloat(sorted[sorted.length - 1][key])
- };
- }
-};
-
class Filters extends Component {
constructor(props) {
super(props);
@@ -72,48 +56,18 @@ class Filters extends Component {
groupClick: 0,
defaults: this.props.filters
};
-
- this.groupChange = this.groupChange.bind(this);
- this.handleResetClick = this.handleResetClick.bind(this);
}
- componentWillReceiveProps(nextProps) {
- const { packages } = nextProps;
- packages.length > 1 &&
- this.setState({
- ram: getFirstAndLast(packages, 'memory'),
- cpu: getFirstAndLast(packages, 'vcpus'),
- disk: getFirstAndLast(packages, 'disk'),
- cost: getFirstAndLast(packages, 'price')
- });
- }
-
- groupChange(group) {
- this.props.groupChange(group);
+ groupChange = group => {
+ const { groupChange } = this.props;
+ groupChange(group);
this.setState({
groupClick: this.state.groupClick + 1
});
- }
+ };
- shouldComponentUpdate(nextProps, nextState) {
- const { groupClick, reset } = this.state;
- const { filters } = this.props;
- const filtersMap = filter => ({
- ram: filter.ram,
- cost: filter.cost,
- cpu: filter.cpu,
- disk: filter.disk
- });
- return (
- (nextState.groupClick !== groupClick &&
- isEqual(filtersMap(filters), filtersMap(nextProps.filters))) ||
- nextState.reset !== reset ||
- !isEqual(nextProps.filters.diskType, filters.diskType)
- );
- }
-
- handleResetClick() {
+ handleResetClick = () => {
const { filterReset, filters: { cpu, cost, ram, disk } } = this.props;
const { reset } = this.state;
filterReset();
@@ -125,7 +79,19 @@ class Filters extends Component {
disk,
cost
});
- }
+ };
+
+ handleDiskChange = val => {
+ this.props.diskTypeChange(val);
+
+ // if the object is empty or all values are false we want to reset
+ if (
+ Object.keys(val).length === 0 ||
+ Object.keys(val).every(i => !val[i])
+ ) {
+ this.handleResetClick()
+ }
+ };
render() {
const {
@@ -134,11 +100,10 @@ class Filters extends Component {
cpuSliderChange,
diskSliderChange,
costSliderChange,
- packages,
- diskTypeChange
+ packages
} = this.props;
- const { reset, cpu, cost, ram, disk, defaults } = this.state;
+ const { reset, defaults, groupClick } = this.state;
return (
@@ -171,54 +136,19 @@ class Filters extends Component {
- ramSliderChange(value)}
- >
- GB RAM
-
- cpuSliderChange(value)}
- >
- vCPUs
-
- diskSliderChange(value)}
- >
- TB Disk
-
- costSliderChange(value)}
- >
- $/hr
-
- diskTypeChange(params)}
- onSubmit={e => {}}
+ ramSliderChange(value)}
+ cpuSliderChange={value => cpuSliderChange(value)}
+ diskSliderChange={value => diskSliderChange(value)}
+ costSliderChange={value => costSliderChange(value)}
+ defaults={defaults}
+ filters={filters}
+ reset={reset}
+ groupClick={groupClick}
/>
+
+ this.handleDiskChange(params)} />
);
diff --git a/packages/my-joyent/src/components/filters/sliders.js b/packages/my-joyent/src/components/filters/sliders.js
new file mode 100644
index 00000000..9f89cf40
--- /dev/null
+++ b/packages/my-joyent/src/components/filters/sliders.js
@@ -0,0 +1,123 @@
+import React, { Component } from 'react';
+import { Slider } from 'joyent-ui-toolkit';
+import isEqual from 'lodash.isequal';
+
+const getFirstAndLast = (arr, key) => {
+ const sorted = arr.sort(
+ (a, b) => (a[key] === b[key] ? 0 : a[key] < b[key] ? -1 : 1)
+ );
+
+ if (sorted.length > 0) {
+ return {
+ min: parseFloat(sorted[0][key]),
+ max: parseFloat(sorted[sorted.length - 1][key])
+ };
+ }
+};
+
+class Sliders extends Component {
+ constructor(props) {
+ super(props);
+ const { filters: { cpu, cost, ram, disk }, reset, groupClick } = this.props;
+
+ this.state = {
+ reset,
+ ram,
+ cpu,
+ disk,
+ cost,
+ groupClick
+ };
+ }
+
+ componentWillReceiveProps(nextProps) {
+ const { packages, groupClick, reset } = nextProps;
+ packages.length > 1 &&
+ this.setState({
+ ram: getFirstAndLast(packages, 'memory'),
+ cpu: getFirstAndLast(packages, 'vcpus'),
+ disk: getFirstAndLast(packages, 'disk'),
+ cost: getFirstAndLast(packages, 'price'),
+ groupClick,
+ reset
+ });
+ }
+
+ shouldComponentUpdate(nextProps, nextState) {
+ const { groupClick, reset } = this.state;
+ const { filters } = this.props;
+ const filtersMap = filter => ({
+ ram: filter.ram,
+ cost: filter.cost,
+ cpu: filter.cpu,
+ disk: filter.disk
+ });
+ return (
+ (nextState.groupClick !== groupClick &&
+ isEqual(filtersMap(filters), filtersMap(nextProps.filters))) ||
+ nextState.reset !== reset ||
+ !isEqual(nextProps.filters.diskType, filters.diskType)
+ );
+ }
+
+ render() {
+ const {
+ ramSliderChange,
+ cpuSliderChange,
+ diskSliderChange,
+ costSliderChange,
+ packages,
+ defaults
+ } = this.props;
+
+ const { cpu, cost, ram, disk } = this.state;
+ return [
+ ramSliderChange(value)}
+ >
+ GB RAM
+ ,
+ cpuSliderChange(value)}
+ >
+ vCPUs
+ ,
+ diskSliderChange(value)}
+ >
+ TB Disk
+ ,
+ costSliderChange(value)}
+ >
+ $/hr
+
+ ];
+ }
+}
+
+export default Sliders;
diff --git a/packages/my-joyent/src/components/package/__tests__/__snapshots__/index.spec.js.snap b/packages/my-joyent/src/components/package/__tests__/__snapshots__/index.spec.js.snap
index 255e3408..924c083f 100644
--- a/packages/my-joyent/src/components/package/__tests__/__snapshots__/index.spec.js.snap
+++ b/packages/my-joyent/src/components/package/__tests__/__snapshots__/index.spec.js.snap
@@ -21,13 +21,13 @@ exports[`renders without throwing 1`] = `
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
- -webkit-box-pack: start;
- -webkit-justify-content: flex-start;
- -ms-flex-pack: start;
- justify-content: flex-start;
- -webkit-flex-grow: 2;
- -ms-flex-grow: 2;
- flex-grow: 2;
+ -webkit-align-items: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ -webkit-flex-grow: 4;
+ -ms-flex-grow: 4;
+ flex-grow: 4;
-webkit-flex-basis: 5.625rem;
-ms-flex-basis: 5.625rem;
flex-basis: 5.625rem;
diff --git a/packages/my-joyent/src/components/packages/__tests__/__snapshots__/list.spec.js.snap b/packages/my-joyent/src/components/packages/__tests__/__snapshots__/list.spec.js.snap
index 00da6840..32515a57 100644
--- a/packages/my-joyent/src/components/packages/__tests__/__snapshots__/list.spec.js.snap
+++ b/packages/my-joyent/src/components/packages/__tests__/__snapshots__/list.spec.js.snap
@@ -30,13 +30,13 @@ exports[`renders without throwing 1`] = `
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
- -webkit-box-pack: start;
- -webkit-justify-content: flex-start;
- -ms-flex-pack: start;
- justify-content: flex-start;
- -webkit-flex-grow: 2;
- -ms-flex-grow: 2;
- flex-grow: 2;
+ -webkit-align-items: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ -webkit-flex-grow: 4;
+ -ms-flex-grow: 4;
+ flex-grow: 4;
-webkit-flex-basis: 5.625rem;
-ms-flex-basis: 5.625rem;
flex-basis: 5.625rem;
diff --git a/packages/my-joyent/src/containers/home/__tests__/__snapshots__/index.spec.js.snap b/packages/my-joyent/src/containers/home/__tests__/__snapshots__/index.spec.js.snap
index 5de130a6..260a9b5a 100644
--- a/packages/my-joyent/src/containers/home/__tests__/__snapshots__/index.spec.js.snap
+++ b/packages/my-joyent/src/containers/home/__tests__/__snapshots__/index.spec.js.snap
@@ -1,36 +1,16 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders without throwing 1`] = `
-.c14 {
+.c16 {
background-color: transparent;
text-decoration-skip: objects;
}
-.c14:hover {
+.c16:hover {
text-decoration: none;
}
-.c13 {
- font-weight: 400;
- line-height: 1.5rem;
- font-size: 0.9375rem;
- margin: 0;
-}
-
-.c13 + p,
-.c13 + small,
-.c13 + h1,
-.c13 + h2,
-.c13 + label,
-.c13 + h3,
-.c13 + h4,
-.c13 + h5,
-.c13 + div,
-.c13 + span {
- padding-bottom: 2.25rem;
-}
-
-.c17 {
+.c19 {
font-family: sans-serif;
font-size: 100%;
line-height: 1.15;
@@ -74,47 +54,47 @@ exports[`renders without throwing 1`] = `
border: solid 0.0625rem;
}
-.c17::-moz-focus-inner,
-.c17[type='button']::-moz-focus-inner,
-.c17[type='reset']::-moz-focus-inner,
-.c17[type='submit']::-moz-focus-inner {
+.c19::-moz-focus-inner,
+.c19[type='button']::-moz-focus-inner,
+.c19[type='reset']::-moz-focus-inner,
+.c19[type='submit']::-moz-focus-inner {
border-style: none;
padding: 0;
}
-.c17:-moz-focusring,
-.c17[type='button']:-moz-focusring,
-.c17[type='reset']:-moz-focusring,
-.c17[type='submit']:-moz-focusring {
+.c19:-moz-focusring,
+.c19[type='button']:-moz-focusring,
+.c19[type='reset']:-moz-focusring,
+.c19[type='submit']:-moz-focusring {
outline: 0.0625rem dotted ButtonText;
}
-.c17:focus {
+.c19:focus {
outline: 0;
text-decoration: none;
}
-.c17:hover {
+.c19:hover {
border: solid 0.0625rem;
}
-.c17:active,
-.c17:active:hover,
-.c17:active:focus {
+.c19:active,
+.c19:active:hover,
+.c19:active:focus {
background-image: none;
outline: 0;
}
-.c17[disabled] {
+.c19[disabled] {
cursor: not-allowed;
pointer-events: none;
}
-.c17 + button {
+.c19 + button {
margin-left: 1.25rem;
}
-.c23 {
+.c25 {
font-family: sans-serif;
font-size: 100%;
line-height: 1.15;
@@ -161,47 +141,47 @@ exports[`renders without throwing 1`] = `
font-weight: 600;
}
-.c23::-moz-focus-inner,
-.c23[type='button']::-moz-focus-inner,
-.c23[type='reset']::-moz-focus-inner,
-.c23[type='submit']::-moz-focus-inner {
+.c25::-moz-focus-inner,
+.c25[type='button']::-moz-focus-inner,
+.c25[type='reset']::-moz-focus-inner,
+.c25[type='submit']::-moz-focus-inner {
border-style: none;
padding: 0;
}
-.c23:-moz-focusring,
-.c23[type='button']:-moz-focusring,
-.c23[type='reset']:-moz-focusring,
-.c23[type='submit']:-moz-focusring {
+.c25:-moz-focusring,
+.c25[type='button']:-moz-focusring,
+.c25[type='reset']:-moz-focusring,
+.c25[type='submit']:-moz-focusring {
outline: 0.0625rem dotted ButtonText;
}
-.c23:focus {
+.c25:focus {
outline: 0;
text-decoration: none;
}
-.c23:hover {
+.c25:hover {
border: solid 0.0625rem;
}
-.c23:active,
-.c23:active:hover,
-.c23:active:focus {
+.c25:active,
+.c25:active:hover,
+.c25:active:focus {
background-image: none;
outline: 0;
}
-.c23[disabled] {
+.c25[disabled] {
cursor: not-allowed;
pointer-events: none;
}
-.c23 + button {
+.c25 + button {
margin-left: 1.25rem;
}
-.c24 {
+.c26 {
font-family: sans-serif;
font-size: 100%;
line-height: 1.15;
@@ -243,51 +223,53 @@ exports[`renders without throwing 1`] = `
background-image: none;
border-radius: 0.25rem;
border: solid 0.0625rem;
+ cursor: not-allowed;
+ pointer-events: none;
padding: 0.5625rem 1.125rem;
font-weight: 600;
}
-.c24::-moz-focus-inner,
-.c24[type='button']::-moz-focus-inner,
-.c24[type='reset']::-moz-focus-inner,
-.c24[type='submit']::-moz-focus-inner {
+.c26::-moz-focus-inner,
+.c26[type='button']::-moz-focus-inner,
+.c26[type='reset']::-moz-focus-inner,
+.c26[type='submit']::-moz-focus-inner {
border-style: none;
padding: 0;
}
-.c24:-moz-focusring,
-.c24[type='button']:-moz-focusring,
-.c24[type='reset']:-moz-focusring,
-.c24[type='submit']:-moz-focusring {
+.c26:-moz-focusring,
+.c26[type='button']:-moz-focusring,
+.c26[type='reset']:-moz-focusring,
+.c26[type='submit']:-moz-focusring {
outline: 0.0625rem dotted ButtonText;
}
-.c24:focus {
+.c26:focus {
outline: 0;
text-decoration: none;
}
-.c24:hover {
+.c26:hover {
border: solid 0.0625rem;
}
-.c24:active,
-.c24:active:hover,
-.c24:active:focus {
+.c26:active,
+.c26:active:hover,
+.c26:active:focus {
background-image: none;
outline: 0;
}
-.c24[disabled] {
+.c26[disabled] {
cursor: not-allowed;
pointer-events: none;
}
-.c24 + button {
+.c26 + button {
margin-left: 1.25rem;
}
-.c55 {
+.c57 {
font-family: sans-serif;
font-size: 100%;
line-height: 1.15;
@@ -331,52 +313,53 @@ exports[`renders without throwing 1`] = `
border: solid 0.0625rem;
}
-.c55::-moz-focus-inner,
-.c55[type='button']::-moz-focus-inner,
-.c55[type='reset']::-moz-focus-inner,
-.c55[type='submit']::-moz-focus-inner {
+.c57::-moz-focus-inner,
+.c57[type='button']::-moz-focus-inner,
+.c57[type='reset']::-moz-focus-inner,
+.c57[type='submit']::-moz-focus-inner {
border-style: none;
padding: 0;
}
-.c55:-moz-focusring,
-.c55[type='button']:-moz-focusring,
-.c55[type='reset']:-moz-focusring,
-.c55[type='submit']:-moz-focusring {
+.c57:-moz-focusring,
+.c57[type='button']:-moz-focusring,
+.c57[type='reset']:-moz-focusring,
+.c57[type='submit']:-moz-focusring {
outline: 0.0625rem dotted ButtonText;
}
-.c55:focus {
+.c57:focus {
outline: 0;
text-decoration: none;
}
-.c55:hover {
+.c57:hover {
border: solid 0.0625rem;
}
-.c55:active,
-.c55:active:hover,
-.c55:active:focus {
+.c57:active,
+.c57:active:hover,
+.c57:active:focus {
background-image: none;
outline: 0;
}
-.c55[disabled] {
+.c57[disabled] {
cursor: not-allowed;
pointer-events: none;
}
-.c55 + button {
+.c57 + button {
margin-left: 1.25rem;
}
-.c20 {
+.c22 {
font-weight: 400;
font-size: 0.9375rem;
font-style: normal;
font-stretch: normal;
display: block;
+ text-align: left;
}
.c2 {
@@ -407,7 +390,7 @@ exports[`renders without throwing 1`] = `
padding-left: 0.5rem;
}
-.c44 {
+.c46 {
box-sizing: border-box;
-webkit-flex: 0 0 auto;
-ms-flex: 0 0 auto;
@@ -416,7 +399,7 @@ exports[`renders without throwing 1`] = `
padding-left: 0.5rem;
}
-.c48 {
+.c50 {
box-sizing: border-box;
-webkit-flex: 0 0 auto;
-ms-flex: 0 0 auto;
@@ -436,27 +419,7 @@ exports[`renders without throwing 1`] = `
margin-left: auto;
}
-.c12 {
- margin: 0;
- font-weight: 600;
- line-height: 1.5rem;
- font-size: 0.9375rem;
-}
-
-.c12 + p,
-.c12 + small,
-.c12 + h1,
-.c12 + h2,
-.c12 + label,
-.c12 + h3,
-.c12 + h4,
-.c12 + h5,
-.c12 + div,
-.c12 + span {
- margin-top: 0.75rem;
-}
-
-.c16 {
+.c18 {
background-color: #FFFFFF;
padding: 0.75rem;
min-width: auto;
@@ -464,45 +427,17 @@ exports[`renders without throwing 1`] = `
box-shadow: none;
}
-.c16:hover,
-.c16:focus,
-.c16:active,
-.c16:active:hover,
-.c16:active:focus {
+.c18:hover,
+.c18:focus,
+.c18:active,
+.c18:active:hover,
+.c18:active:focus {
background-color: #FFFFFF;
border: none;
box-shadow: none;
}
-.c9 {
- position: relative;
- margin-bottom: 0.75rem;
- box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
- border: 0.0625rem solid;
- width: 100%;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
-}
-
-.c10 {
- min-width: 2.25rem;
- margin-right: 1.125rem;
- min-height: 100%;
-}
-
-.c11 {
- padding: 0.75rem 0 0.84375rem 0;
-}
-
-.c15 {
- position: absolute;
- right: 0.1875rem;
- top: 0.1875rem;
-}
-
-.c31 {
+.c33 {
font-size: 0.8125rem;
position: absolute;
top: 0.875rem;
@@ -510,7 +445,7 @@ exports[`renders without throwing 1`] = `
color: #464646;
}
-.c33 {
+.c35 {
font-size: 0.8125rem;
position: absolute;
top: 0.875rem;
@@ -518,7 +453,7 @@ exports[`renders without throwing 1`] = `
color: #464646;
}
-.c32 {
+.c34 {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
@@ -538,17 +473,17 @@ exports[`renders without throwing 1`] = `
margin-top: 0.125rem;
}
-.c32::active {
+.c34::active {
-webkit-transform: scale(1.3);
-ms-transform: scale(1.3);
transform: scale(1.3);
}
-.c32::focus {
+.c34::focus {
box-shadow: 0 0 0 5px rgba(63,81,181,0.2);
}
-.c29 {
+.c31 {
background: #D8D8D8;
cursor: pointer;
display: block;
@@ -556,37 +491,85 @@ exports[`renders without throwing 1`] = `
position: relative;
}
-.c30 {
+.c32 {
background: #364ACD;
height: 100%;
position: absolute;
}
-.c28 {
+.c30 {
position: relative;
min-height: 0.625rem;
}
-.c27 {
+.c29 {
font-weight: 400;
font-size: 0.9375rem;
font-style: normal;
font-stretch: normal;
display: block;
+ text-align: left;
margin-right: 0.75rem;
font-weight: bold;
}
-.c26 {
+.c28 {
margin-bottom: 0.625rem;
margin-top: 0.75rem;
}
+.c11 {
+ text-decoration: none;
+ cursor: pointer;
+}
+
+.c11:visited {
+ color: inherit;
+}
+
+.c10 {
+ margin: 0;
+ font-weight: 400;
+ line-height: 1.875rem;
+ font-size: 1.5rem;
+ font-weight: 400;
+ margin: 1.25rem 0 1.125rem 0;
+ display: inline-block;
+}
+
+.c10 + p,
+.c10 + small,
+.c10 + h1,
+.c10 + h2,
+.c10 + label,
+.c10 + h3,
+.c10 + h4,
+.c10 + h5,
+.c10 + div,
+.c10 + span {
+ margin-top: 1.5rem;
+}
+
+.c12 {
+ border: solid;
+ border-width: 0 0.125rem 0.125rem 0;
+ display: inline-block;
+ padding: 0.125rem;
+ -webkit-transform: rotate(-45deg);
+ -ms-transform: rotate(-45deg);
+ transform: rotate(-45deg);
+ margin: 0.1875rem 0.625rem 0.1875rem 0.625rem;
+}
+
+.c9 {
+ display: inline-block;
+}
+
.c6 {
border-bottom: solid 0.0625rem;
}
-.c50 {
+.c52 {
font-size: 0.9375rem;
line-height: 1.5;
font-weight: 600;
@@ -597,13 +580,13 @@ exports[`renders without throwing 1`] = `
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
- -webkit-box-pack: start;
- -webkit-justify-content: flex-start;
- -ms-flex-pack: start;
- justify-content: flex-start;
- -webkit-flex-grow: 2;
- -ms-flex-grow: 2;
- flex-grow: 2;
+ -webkit-align-items: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ -webkit-flex-grow: 4;
+ -ms-flex-grow: 4;
+ flex-grow: 4;
-webkit-flex-basis: 5.625rem;
-ms-flex-basis: 5.625rem;
flex-basis: 5.625rem;
@@ -613,7 +596,7 @@ exports[`renders without throwing 1`] = `
transition: all 300ms ease;
}
-.c46 {
+.c48 {
box-sizing: border-box;
display: -webkit-box;
display: -webkit-flex;
@@ -651,7 +634,7 @@ exports[`renders without throwing 1`] = `
transition: all 300ms ease;
}
-.c47 {
+.c49 {
box-sizing: border-box;
display: -webkit-box;
display: -webkit-flex;
@@ -680,7 +663,7 @@ exports[`renders without throwing 1`] = `
flex-direction: row;
}
-.c49 {
+.c51 {
box-sizing: border-box;
display: -webkit-box;
display: -webkit-flex;
@@ -706,7 +689,7 @@ exports[`renders without throwing 1`] = `
transform: translateY(-50%);
}
-.c52 {
+.c54 {
display: inline-block;
-webkit-flex-direction: column;
-ms-flex-direction: column;
@@ -721,13 +704,13 @@ exports[`renders without throwing 1`] = `
justify-content: flex-end;
}
-.c51 {
+.c53 {
display: inline-block;
padding: 0 1.125rem;
font-weight: 400;
}
-.c53 {
+.c55 {
font-weight: 400;
-webkit-flex-grow: 1;
-ms-flex-grow: 1;
@@ -737,7 +720,7 @@ exports[`renders without throwing 1`] = `
flex-basis: 5.625rem;
}
-.c54 {
+.c56 {
display: inline-block;
-webkit-flex-direction: column;
-ms-flex-direction: column;
@@ -751,7 +734,7 @@ exports[`renders without throwing 1`] = `
transition: all 300ms ease;
}
-.c41 {
+.c43 {
font-family: sans-serif;
font-size: 100%;
line-height: 1.15;
@@ -760,55 +743,55 @@ exports[`renders without throwing 1`] = `
display: none;
}
-.c41[type='checkbox'],
-.c41[type='radio'] {
+.c43[type='checkbox'],
+.c43[type='radio'] {
box-sizing: border-box;
padding: 0;
}
-.c41[type='number']::-webkit-inner-spin-button,
-.c41[type='number']::-webkit-outer-spin-button {
+.c43[type='number']::-webkit-inner-spin-button,
+.c43[type='number']::-webkit-outer-spin-button {
height: auto;
}
-.c41[type='search'] {
+.c43[type='search'] {
-webkit-appearance: textfield;
-moz-appearance: textfield;
appearance: textfield;
outline-offset: -0.125rem;
}
-.c41[type='search']::-webkit-search-cancel-button,
-.c41[type='search']::-webkit-search-decoration {
+.c43[type='search']::-webkit-search-cancel-button,
+.c43[type='search']::-webkit-search-decoration {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
-.c41::-webkit-file-upload-button {
+.c43::-webkit-file-upload-button {
-webkit-appearance: button;
-moz-appearance: button;
appearance: button;
font: inherit;
}
-.c41:checked + label::after {
+.c43:checked + label::after {
opacity: 1;
}
-.c41:selected + label::after {
+.c43:selected + label::after {
opacity: 1;
}
-.c41:disabled + label {
+.c43:disabled + label {
background-color: rgb(249,249,249);
}
-.c41:disabled + label::after {
+.c43:disabled + label::after {
opacity: 0.3;
}
-.c42 {
+.c44 {
color: rgb(100,100,100);
position: absolute;
width: 1.125rem;
@@ -825,7 +808,7 @@ exports[`renders without throwing 1`] = `
height: 1.125rem;
}
-.c42::after {
+.c44::after {
opacity: 0;
content: '';
position: absolute;
@@ -842,7 +825,7 @@ exports[`renders without throwing 1`] = `
transform: rotate(-45deg);
}
-.c40 {
+.c42 {
display: inline-block;
vertical-align: text-bottom;
margin-right: 0.5rem;
@@ -852,17 +835,29 @@ exports[`renders without throwing 1`] = `
cursor: pointer;
}
-.c39 {
+.c41 {
list-style-type: none;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-align-items: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
font-weight: 400;
}
-.c37 {
+.c41 label {
+ font-weight: 400;
+}
+
+.c39 {
margin: 0;
padding: 0;
}
-.c38 {
+.c40 {
padding: 0.35em 0.75em 0.625em;
display: inline-block;
margin: 0;
@@ -879,7 +874,7 @@ exports[`renders without throwing 1`] = `
-webkit-padding-after: 0;
}
-.c35 {
+.c37 {
box-sizing: border-box;
color: inherit;
display: table;
@@ -889,6 +884,34 @@ exports[`renders without throwing 1`] = `
font-weight: 600;
}
+.c13 {
+ position: relative;
+ margin-bottom: 0.75rem;
+ box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
+ border: 0.0625rem solid;
+ width: 100%;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+}
+
+.c14 {
+ min-width: 2.25rem;
+ margin-right: 1.125rem;
+ min-height: 100%;
+}
+
+.c15 {
+ padding: 0.75rem 0 0.84375rem 0;
+}
+
+.c17 {
+ position: absolute;
+ right: 0.1875rem;
+ top: 0.1875rem;
+}
+
.c4 {
font-weight: 400;
display: inline-block;
@@ -913,16 +936,16 @@ exports[`renders without throwing 1`] = `
margin: 1.125rem 0 0 0;
}
-.c34 {
+.c36 {
margin-top: 0.75rem;
min-width: 12.5rem;
}
-.c34 label {
+.c36 label {
font-size: 0.8125rem;
}
-.c36 {
+.c38 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
@@ -934,24 +957,24 @@ exports[`renders without throwing 1`] = `
margin-top: 0.375rem;
}
-.c25 {
+.c27 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
-.c25 > div {
+.c27 > div {
-webkit-flex-grow: 1;
-ms-flex-grow: 1;
flex-grow: 1;
}
-.c25 > div:not(:last-child) {
+.c27 > div:not(:last-child) {
margin-right: 2.25rem;
}
-.c22 {
+.c24 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
@@ -964,26 +987,26 @@ exports[`renders without throwing 1`] = `
margin-bottom: 1.125rem;
}
-.c18 {
+.c20 {
width: 100%;
}
-.c19 {
+.c21 {
line-height: 24px;
font-size: 21px;
margin-bottom: 1.125rem;
}
-.c21 {
+.c23 {
margin-bottom: 0.5rem;
}
-.c45 {
+.c47 {
margin-right: 1.125rem;
margin-bottom: 1.125rem;
}
-.c43 {
+.c45 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
@@ -1014,7 +1037,7 @@ exports[`renders without throwing 1`] = `
}
@media only screen and (min-width:0em) {
- .c44 {
+ .c46 {
-webkit-flex-basis: 100%;
-ms-flex-basis: 100%;
flex-basis: 100%;
@@ -1024,7 +1047,7 @@ exports[`renders without throwing 1`] = `
}
@media only screen and (min-width:48em) {
- .c44 {
+ .c46 {
-webkit-flex-basis: 50%;
-ms-flex-basis: 50%;
flex-basis: 50%;
@@ -1034,7 +1057,7 @@ exports[`renders without throwing 1`] = `
}
@media only screen and (min-width:64em) {
- .c44 {
+ .c46 {
-webkit-flex-basis: 33.333333333333336%;
-ms-flex-basis: 33.333333333333336%;
flex-basis: 33.333333333333336%;
@@ -1044,7 +1067,7 @@ exports[`renders without throwing 1`] = `
}
@media only screen and (min-width:75em) {
- .c44 {
+ .c46 {
-webkit-flex-basis: 25%;
-ms-flex-basis: 25%;
flex-basis: 25%;
@@ -1054,7 +1077,7 @@ exports[`renders without throwing 1`] = `
}
@media only screen and (min-width:0em) {
- .c48 {
+ .c50 {
-webkit-flex-basis: 50%;
-ms-flex-basis: 50%;
flex-basis: 50%;
@@ -1167,7 +1190,46 @@ exports[`renders without throwing 1`] = `
>
+ >
+
+
+
@@ -1175,40 +1237,29 @@ exports[`renders without throwing 1`] = `
className="c2"
>
-