diff --git a/.gitattributes b/.gitattributes index 61b434ce..1e612a3a 100644 --- a/.gitattributes +++ b/.gitattributes @@ -48,4 +48,10 @@ CODEOWNERS text *.rpi-sdcard binary diff=hex *.wic binary diff=hex *.foo binary diff=hex +*.eot binary diff=hex +*.otf binary diff=hex +*.woff binary diff=hex +*.woff2 binary diff=hex +*.ttf binary diff=hex xz-without-extension binary diff=hex +wmic-output.txt binary diff=hex diff --git a/lib/gui/app/components/drive-selector/index.js b/lib/gui/app/components/drive-selector/index.js new file mode 100644 index 00000000..e40e100f --- /dev/null +++ b/lib/gui/app/components/drive-selector/index.js @@ -0,0 +1,34 @@ +/* + * Copyright 2019 resin.io + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +'use strict' + +/** + * @module Etcher.Components.TargetSelector + */ + +const angular = require('angular') +const { react2angular } = require('react2angular') + +const MODULE_NAME = 'Etcher.Components.TargetSelector' +const SelectTargetButton = angular.module(MODULE_NAME, []) + +SelectTargetButton.component( + 'targetSelector', + react2angular(require('./target-selector.jsx')) +) + +module.exports = MODULE_NAME diff --git a/lib/gui/app/components/drive-selector/target-selector.jsx b/lib/gui/app/components/drive-selector/target-selector.jsx new file mode 100644 index 00000000..9706b89a --- /dev/null +++ b/lib/gui/app/components/drive-selector/target-selector.jsx @@ -0,0 +1,166 @@ +/* + * Copyright 2019 resin.io + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +/* eslint-disable no-magic-numbers */ + +'use strict' + +// eslint-disable-next-line no-unused-vars +const React = require('react') +const propTypes = require('prop-types') +const { default: styled } = require('styled-components') +const { + ChangeButton, + DetailsText, + StepButton, + StepNameButton, + ThemedProvider +} = require('./../../styled-components') +const { Txt } = require('rendition') +const middleEllipsis = require('./../../utils/middle-ellipsis') +const { bytesToClosestUnit } = require('./../../../../shared/units') + +const TargetDetail = styled((props) => ( + + +)) ` + float: ${({ float }) => float} +` + +const TargetDisplayText = ({ + description, + size, + ...props +}) => { + return ( + + + {description} + + + {size} + + + ) +} + +const TargetSelector = (props) => { + const targets = props.selection.getSelectedDrives() + + if (targets.length === 1) { + const target = targets[0] + return ( + + + {/* eslint-disable no-magic-numbers */} + { middleEllipsis(target.description, 20) } + + { !props.flashing && + + Change + + } + + { props.constraints.hasListDriveImageCompatibilityStatus(targets, props.image) && + + } + { bytesToClosestUnit(target.size) } + + + ) + } + + if (targets.length > 1) { + const targetsTemplate = [] + for (const target of targets) { + targetsTemplate.push(( + + + + + )) + } + return ( + + + {targets.length} Targets + + { !props.flashing && + + Change + + } + {targetsTemplate} + + ) + } + + return ( + + 0) ? -1 : 2 } + disabled={props.disabled} + onClick={props.openDriveSelector} + > + Select target + + + ) +} + +TargetSelector.propTypes = { + disabled: propTypes.bool, + openDriveSelector: propTypes.func, + selection: propTypes.object, + reselectDrive: propTypes.func, + flashing: propTypes.bool, + constraints: propTypes.object, + show: propTypes.bool, + tooltip: propTypes.string +} + +module.exports = TargetSelector diff --git a/lib/gui/app/components/drive-selector/templates/drive-selector-modal.tpl.html b/lib/gui/app/components/drive-selector/templates/drive-selector-modal.tpl.html index 07520725..f8df0dd1 100644 --- a/lib/gui/app/components/drive-selector/templates/drive-selector-modal.tpl.html +++ b/lib/gui/app/components/drive-selector/templates/drive-selector-modal.tpl.html @@ -52,7 +52,7 @@
- -
+ +
+ + Flash Another + +
+ ) } diff --git a/lib/gui/app/components/image-selector/image-selector.jsx b/lib/gui/app/components/image-selector/image-selector.jsx index c8cfedb1..d19692cf 100644 --- a/lib/gui/app/components/image-selector/image-selector.jsx +++ b/lib/gui/app/components/image-selector/image-selector.jsx @@ -22,8 +22,6 @@ const propTypes = require('prop-types') const middleEllipsis = require('./../../utils/middle-ellipsis') -const { Provider } = require('rendition') - const shared = require('./../../../../shared/units') const { StepButton, @@ -32,13 +30,14 @@ const { Footer, Underline, DetailsText, - ChangeButton + ChangeButton, + ThemedProvider } = require('./../../styled-components') const SelectImageButton = (props) => { if (props.hasImage) { return ( - + { {/* eslint-disable no-magic-numbers */} { middleEllipsis(props.imageName || props.imageBasename, 20) } - - {shared.bytesToClosestUnit(props.imageSize)} - { !props.flashing && Change } - + + {shared.bytesToClosestUnit(props.imageSize)} + + ) } return ( - + { - + ) } diff --git a/lib/gui/app/components/image-selector/index.js b/lib/gui/app/components/image-selector/index.js index facba54a..e8e3f25b 100644 --- a/lib/gui/app/components/image-selector/index.js +++ b/lib/gui/app/components/image-selector/index.js @@ -1,5 +1,5 @@ /* - * Copyright 2016 resin.io + * Copyright 2018 resin.io * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. diff --git a/lib/gui/app/components/modal/styles/_modal.scss b/lib/gui/app/components/modal/styles/_modal.scss index 7cb86814..5d4c687f 100644 --- a/lib/gui/app/components/modal/styles/_modal.scss +++ b/lib/gui/app/components/modal/styles/_modal.scss @@ -83,6 +83,7 @@ .modal-footer { flex-grow: 0; border: 0; + text-align: center; } .modal { diff --git a/lib/gui/app/components/svg-icon.js b/lib/gui/app/components/svg-icon/index.js similarity index 97% rename from lib/gui/app/components/svg-icon.js rename to lib/gui/app/components/svg-icon/index.js index d00e5646..5ba29955 100644 --- a/lib/gui/app/components/svg-icon.js +++ b/lib/gui/app/components/svg-icon/index.js @@ -28,5 +28,5 @@ const react2angular = require('react2angular').react2angular const MODULE_NAME = 'Etcher.Components.SVGIcon' const angularSVGIcon = angular.module(MODULE_NAME, []) -angularSVGIcon.component('svgIcon', react2angular(require('./svg-icon/svg-icon.jsx'))) +angularSVGIcon.component('svgIcon', react2angular(require('./svg-icon.jsx'))) module.exports = MODULE_NAME diff --git a/lib/gui/app/pages/finish/styles/_finish.scss b/lib/gui/app/pages/finish/styles/_finish.scss index e75cec64..f6748964 100644 --- a/lib/gui/app/pages/finish/styles/_finish.scss +++ b/lib/gui/app/pages/finish/styles/_finish.scss @@ -49,7 +49,6 @@ > b { color: $palette-theme-dark-soft-foreground; - font-family: monospace; } } diff --git a/lib/gui/app/pages/main/main.js b/lib/gui/app/pages/main/main.js index afb63293..7838ba04 100644 --- a/lib/gui/app/pages/main/main.js +++ b/lib/gui/app/pages/main/main.js @@ -44,6 +44,7 @@ const MainPage = angular.module(MODULE_NAME, [ require('../../components/reduced-flashing-infos'), require('../../components/flash-another'), require('../../components/flash-results'), + require('../../components/drive-selector'), require('../../os/open-external/open-external'), require('../../os/dropzone/dropzone'), diff --git a/lib/gui/app/pages/main/templates/main.tpl.html b/lib/gui/app/pages/main/templates/main.tpl.html index e9bc186d..fdf1b71d 100644 --- a/lib/gui/app/pages/main/templates/main.tpl.html +++ b/lib/gui/app/pages/main/templates/main.tpl.html @@ -21,11 +21,13 @@ > +
+
@@ -35,58 +37,20 @@
-
- -
- -
- -
-
- -
- - - {{ drive.getDrivesTitle() | middleEllipsis:20 }} - - -

- {{ drive.getDrivesSubtitle() }} -

- -
-
-
-
- {{ driveObj.description | middleEllipsis:14 }} -
-
+ +
+
diff --git a/lib/gui/app/scss/components/_button.scss b/lib/gui/app/scss/components/_button.scss index 11f4dddb..eaa06c5d 100644 --- a/lib/gui/app/scss/components/_button.scss +++ b/lib/gui/app/scss/components/_button.scss @@ -20,7 +20,7 @@ padding: 10px; padding-top: 11px; - border-radius: 2px; + border-radius: 24px; border: 0; letter-spacing: .5px; @@ -33,6 +33,11 @@ margin-right: 2px; } + &.button-primary{ + width: 200px; + height: 48px; + } + &[disabled] { @extend .button-no-hover; background-color: $palette-theme-dark-disabled-background; diff --git a/lib/gui/app/scss/main.scss b/lib/gui/app/scss/main.scss index 189196e2..de410984 100644 --- a/lib/gui/app/scss/main.scss +++ b/lib/gui/app/scss/main.scss @@ -15,7 +15,7 @@ */ $icon-font-path: "../../../node_modules/bootstrap-sass/assets/fonts/bootstrap/"; -$font-size-base: 13px; +$font-size-base: 16px; $cursor-disabled: initial; $link-hover-decoration: none; $btn-min-width: 170px; @@ -47,44 +47,90 @@ $fa-font-path: "../../../node_modules/@fortawesome/fontawesome-free-webfonts/web @import "../../../../node_modules/@fortawesome/fontawesome-free-webfonts/scss/fa-solid"; @font-face { - font-family: Roboto; - src: url('../../../node_modules/roboto-fontface/fonts/roboto/Roboto-Thin.woff'); - font-weight: 100; + font-family: 'Nunito'; + src: url('Nunito-Regular.eot'); + src: url('./fonts/Nunito-Regular.eot?#iefix') format('embedded-opentype'), + url('./fonts/Nunito-Regular.woff2') format('woff2'), + url('./fonts/Nunito-Regular.woff') format('woff'), + url('./fonts/Nunito-Regular.ttf') format('truetype'); + font-weight: normal; font-style: normal; + font-display: block; } @font-face { - font-family: Roboto; - src: url('../../../node_modules/roboto-fontface/fonts/roboto/Roboto-Light.woff'); + font-family: 'Nunito'; + src: url('Nunito-Bold.eot'); + src: url('./fonts/Nunito-Bold.eot?#iefix') format('embedded-opentype'), + url('./fonts/Nunito-Bold.woff2') format('woff2'), + url('./fonts/Nunito-Bold.woff') format('woff'), + url('./fonts/Nunito-Bold.ttf') format('truetype'); + font-weight: bold; + font-style: normal; + font-display: block; +} + +@font-face { + font-family: 'Nunito'; + src: url('Nunito-Light.eot'); + src: url('./fonts/Nunito-Light.eot?#iefix') format('embedded-opentype'), + url('./fonts/Nunito-Light.woff2') format('woff2'), + url('./fonts/Nunito-Light.woff') format('woff'), + url('./fonts/Nunito-Light.ttf') format('truetype'); font-weight: 300; font-style: normal; + font-display: block; } @font-face { - font-family: Roboto; - src: url('../../../node_modules/roboto-fontface/fonts/roboto/Roboto-Regular.woff'); - font-weight: 400; + font-family: 'CircularStd'; + src: url('./fonts/CircularStd-Bold.eot'); + src: url('./fonts/CircularStd-Bold.eot?#iefix') format('embedded-opentype'), + url('./fonts/CircularStd-Bold.woff2') format('woff2'), + url('./fonts/CircularStd-Bold.woff') format('woff'), + url('./fonts/CircularStd-Bold.ttf') format('truetype'); + font-weight: bold; font-style: normal; + font-display: block; } @font-face { - font-family: Roboto; - src: url('../../../node_modules/roboto-fontface/fonts/roboto/Roboto-Medium.woff'); + font-family: 'CircularStd'; + src: url('./fonts/CircularStd-Book.eot'); + src: url('./fonts/CircularStd-Book.eot?#iefix') format('embedded-opentype'), + url('./fonts/CircularStd-Book.woff2') format('woff2'), + url('./fonts/CircularStd-Book.woff') format('woff'), + url('./fonts/CircularStd-Book.ttf') format('truetype'); font-weight: 500; font-style: normal; + font-display: block; } @font-face { - font-family: Roboto; - src: url('../../../node_modules/roboto-fontface/fonts/roboto/Roboto-Bold.woff'); - font-weight: 700; + font-family: 'CircularStd'; + src: url('./fonts/CircularStd-Medium.eot'); + src: url('./fonts/CircularStd-Medium.eot?#iefix') format('embedded-opentype'), + url('./fonts/CircularStd-Medium.woff2') format('woff2'), + url('./fonts/CircularStd-Medium.woff') format('woff'), + url('./fonts/CircularStd-Medium.ttf') format('truetype'); + font-weight: 400; font-style: normal; + font-display: block; +} + +.circular { + font-family: 'CircularStd'; + font-weight: 500; +} +.nunito { + font-family: 'Nunito'; } body { letter-spacing: 0.5px; display: flex; flex-direction: column; + font-family: 'CircularStd'; > header { flex: 0 0 auto; @@ -100,12 +146,6 @@ body { } } -body, -.tooltip, -.popover { - font-family: Roboto; -} - .section-footer-main { display: flex; align-items: center; @@ -173,7 +213,6 @@ body, .section-header { text-align: right; padding: 5px 8px; - font-size: 15px; > .button { padding-left: 3px; diff --git a/lib/gui/app/styled-components.js b/lib/gui/app/styled-components.js index 04e2e758..3024d54f 100644 --- a/lib/gui/app/styled-components.js +++ b/lib/gui/app/styled-components.js @@ -19,23 +19,29 @@ // eslint-disable-next-line no-unused-vars const React = require('react') const { default: styled } = require('styled-components') -const { colors } = require('./theme') const { - Button, Txt, Flex, Provider + Button, + Txt, + Flex, + Provider } = require('rendition') +const { + space +} = require('styled-system') +const { colors } = require('./theme') const theme = { button: { border: { width: '0', - radius: '2px' + radius: '24px' }, disabled: { opacity: 1 }, - extend: (props) => ` + extend: () => ` width: 200px; - min-height: 48px; + height: 48px; font-size: 16px; &:disabled { @@ -52,29 +58,37 @@ const theme = { } } -exports.StepButton = (props) => { - return ( - - - - ) -} +exports.ThemedProvider = (props) => ( + + +) -exports.ChangeButton = styled(Button) ` +const BaseButton = styled(Button) ` + height: 48px; +` + +exports.BaseButton = BaseButton + +exports.StepButton = (props) => ( + + +) + +exports.ChangeButton = styled(BaseButton) ` color: ${colors.primary.background}; padding: 0; width: 100%; + height: auto; + ${space} &:hover, &:focus, &:active { color: ${colors.primary.background}; } ` -exports.StepNameButton = styled(Button) ` +exports.StepNameButton = styled(BaseButton) ` display: flex; justify-content: center; align-items: center; - height: 39px; width: 100%; font-weight: bold; color: ${colors.dark.foreground}; @@ -98,5 +112,5 @@ exports.Underline = styled(Txt.span) ` ` exports.DetailsText = styled(Txt.p) ` color: ${colors.dark.disabled.foreground}; - margin-bottom: 8px; + margin-bottom: 0; ` diff --git a/lib/gui/css/fonts/CircularStd-Bold.eot b/lib/gui/css/fonts/CircularStd-Bold.eot new file mode 100644 index 00000000..c02a7ab7 Binary files /dev/null and b/lib/gui/css/fonts/CircularStd-Bold.eot differ diff --git a/lib/gui/css/fonts/CircularStd-Bold.otf b/lib/gui/css/fonts/CircularStd-Bold.otf new file mode 100644 index 00000000..9b613959 Binary files /dev/null and b/lib/gui/css/fonts/CircularStd-Bold.otf differ diff --git a/lib/gui/css/fonts/CircularStd-Bold.ttf b/lib/gui/css/fonts/CircularStd-Bold.ttf new file mode 100644 index 00000000..53caf095 Binary files /dev/null and b/lib/gui/css/fonts/CircularStd-Bold.ttf differ diff --git a/lib/gui/css/fonts/CircularStd-Bold.woff b/lib/gui/css/fonts/CircularStd-Bold.woff new file mode 100644 index 00000000..5204e371 Binary files /dev/null and b/lib/gui/css/fonts/CircularStd-Bold.woff differ diff --git a/lib/gui/css/fonts/CircularStd-Bold.woff2 b/lib/gui/css/fonts/CircularStd-Bold.woff2 new file mode 100644 index 00000000..52a110af Binary files /dev/null and b/lib/gui/css/fonts/CircularStd-Bold.woff2 differ diff --git a/lib/gui/css/fonts/CircularStd-Book.eot b/lib/gui/css/fonts/CircularStd-Book.eot new file mode 100644 index 00000000..3c59ed9e Binary files /dev/null and b/lib/gui/css/fonts/CircularStd-Book.eot differ diff --git a/lib/gui/css/fonts/CircularStd-Book.otf b/lib/gui/css/fonts/CircularStd-Book.otf new file mode 100755 index 00000000..3a1f1ad8 Binary files /dev/null and b/lib/gui/css/fonts/CircularStd-Book.otf differ diff --git a/lib/gui/css/fonts/CircularStd-Book.ttf b/lib/gui/css/fonts/CircularStd-Book.ttf new file mode 100644 index 00000000..e77c7f6b Binary files /dev/null and b/lib/gui/css/fonts/CircularStd-Book.ttf differ diff --git a/lib/gui/css/fonts/CircularStd-Book.woff b/lib/gui/css/fonts/CircularStd-Book.woff new file mode 100644 index 00000000..a4be1de5 Binary files /dev/null and b/lib/gui/css/fonts/CircularStd-Book.woff differ diff --git a/lib/gui/css/fonts/CircularStd-Book.woff2 b/lib/gui/css/fonts/CircularStd-Book.woff2 new file mode 100644 index 00000000..acaa8148 Binary files /dev/null and b/lib/gui/css/fonts/CircularStd-Book.woff2 differ diff --git a/lib/gui/css/fonts/CircularStd-Medium.eot b/lib/gui/css/fonts/CircularStd-Medium.eot new file mode 100644 index 00000000..ef0c1a4a Binary files /dev/null and b/lib/gui/css/fonts/CircularStd-Medium.eot differ diff --git a/lib/gui/css/fonts/CircularStd-Medium.otf b/lib/gui/css/fonts/CircularStd-Medium.otf new file mode 100644 index 00000000..7541a5a1 Binary files /dev/null and b/lib/gui/css/fonts/CircularStd-Medium.otf differ diff --git a/lib/gui/css/fonts/CircularStd-Medium.ttf b/lib/gui/css/fonts/CircularStd-Medium.ttf new file mode 100644 index 00000000..5a5e6edd Binary files /dev/null and b/lib/gui/css/fonts/CircularStd-Medium.ttf differ diff --git a/lib/gui/css/fonts/CircularStd-Medium.woff b/lib/gui/css/fonts/CircularStd-Medium.woff new file mode 100644 index 00000000..90d2a35b Binary files /dev/null and b/lib/gui/css/fonts/CircularStd-Medium.woff differ diff --git a/lib/gui/css/fonts/CircularStd-Medium.woff2 b/lib/gui/css/fonts/CircularStd-Medium.woff2 new file mode 100644 index 00000000..6b6797b3 Binary files /dev/null and b/lib/gui/css/fonts/CircularStd-Medium.woff2 differ diff --git a/lib/gui/css/fonts/Nunito-Bold.eot b/lib/gui/css/fonts/Nunito-Bold.eot new file mode 100644 index 00000000..8bb9f084 Binary files /dev/null and b/lib/gui/css/fonts/Nunito-Bold.eot differ diff --git a/lib/gui/css/fonts/Nunito-Bold.ttf b/lib/gui/css/fonts/Nunito-Bold.ttf new file mode 100644 index 00000000..c0a64233 Binary files /dev/null and b/lib/gui/css/fonts/Nunito-Bold.ttf differ diff --git a/lib/gui/css/fonts/Nunito-Bold.woff b/lib/gui/css/fonts/Nunito-Bold.woff new file mode 100644 index 00000000..7a688e35 Binary files /dev/null and b/lib/gui/css/fonts/Nunito-Bold.woff differ diff --git a/lib/gui/css/fonts/Nunito-Bold.woff2 b/lib/gui/css/fonts/Nunito-Bold.woff2 new file mode 100644 index 00000000..891bdd17 Binary files /dev/null and b/lib/gui/css/fonts/Nunito-Bold.woff2 differ diff --git a/lib/gui/css/fonts/Nunito-Light.eot b/lib/gui/css/fonts/Nunito-Light.eot new file mode 100644 index 00000000..41fb3c70 Binary files /dev/null and b/lib/gui/css/fonts/Nunito-Light.eot differ diff --git a/lib/gui/css/fonts/Nunito-Light.ttf b/lib/gui/css/fonts/Nunito-Light.ttf new file mode 100644 index 00000000..4e578069 Binary files /dev/null and b/lib/gui/css/fonts/Nunito-Light.ttf differ diff --git a/lib/gui/css/fonts/Nunito-Light.woff b/lib/gui/css/fonts/Nunito-Light.woff new file mode 100644 index 00000000..b7fb4e2e Binary files /dev/null and b/lib/gui/css/fonts/Nunito-Light.woff differ diff --git a/lib/gui/css/fonts/Nunito-Light.woff2 b/lib/gui/css/fonts/Nunito-Light.woff2 new file mode 100644 index 00000000..9aa61af4 Binary files /dev/null and b/lib/gui/css/fonts/Nunito-Light.woff2 differ diff --git a/lib/gui/css/fonts/Nunito-Regular.eot b/lib/gui/css/fonts/Nunito-Regular.eot new file mode 100644 index 00000000..2b5d7ccc Binary files /dev/null and b/lib/gui/css/fonts/Nunito-Regular.eot differ diff --git a/lib/gui/css/fonts/Nunito-Regular.ttf b/lib/gui/css/fonts/Nunito-Regular.ttf new file mode 100644 index 00000000..06a437e4 Binary files /dev/null and b/lib/gui/css/fonts/Nunito-Regular.ttf differ diff --git a/lib/gui/css/fonts/Nunito-Regular.woff b/lib/gui/css/fonts/Nunito-Regular.woff new file mode 100644 index 00000000..9efd93b0 Binary files /dev/null and b/lib/gui/css/fonts/Nunito-Regular.woff differ diff --git a/lib/gui/css/fonts/Nunito-Regular.woff2 b/lib/gui/css/fonts/Nunito-Regular.woff2 new file mode 100644 index 00000000..f2ba31fb Binary files /dev/null and b/lib/gui/css/fonts/Nunito-Regular.woff2 differ diff --git a/lib/gui/css/main.css b/lib/gui/css/main.css index 28512d65..d77806a5 100644 --- a/lib/gui/css/main.css +++ b/lib/gui/css/main.css @@ -1074,7 +1074,7 @@ html { body { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; - font-size: 13px; + font-size: 16px; line-height: 1.42857; color: #333333; background-color: #fff; } @@ -1128,8 +1128,8 @@ img { border-radius: 50%; } hr { - margin-top: 18px; - margin-bottom: 18px; + margin-top: 22px; + margin-bottom: 22px; border: 0; border-top: 1px solid #eeeeee; } @@ -1181,8 +1181,8 @@ h1, h2, h3, h4, h5, h6, h1, .h1, h2, .h2, h3, .h3 { - margin-top: 18px; - margin-bottom: 9px; } + margin-top: 22px; + margin-bottom: 11px; } h1 small, h1 .small, .h1 small, .h1 .small, @@ -1197,8 +1197,8 @@ h3, .h3 { h4, .h4, h5, .h5, h6, .h6 { - margin-top: 9px; - margin-bottom: 9px; } + margin-top: 11px; + margin-bottom: 11px; } h4 small, h4 .small, .h4 small, .h4 .small, @@ -1211,38 +1211,38 @@ h6, .h6 { font-size: 75%; } h1, .h1 { - font-size: 33px; } + font-size: 41px; } h2, .h2 { - font-size: 27px; } + font-size: 34px; } h3, .h3 { - font-size: 23px; } + font-size: 28px; } h4, .h4 { - font-size: 17px; } + font-size: 20px; } h5, .h5 { - font-size: 13px; } + font-size: 16px; } h6, .h6 { - font-size: 12px; } + font-size: 14px; } p { - margin: 0 0 9px; } + margin: 0 0 11px; } .lead { - margin-bottom: 18px; - font-size: 14px; + margin-bottom: 22px; + font-size: 18px; font-weight: 300; line-height: 1.4; } @media (min-width: 768px) { .lead { - font-size: 19.5px; } } + font-size: 24px; } } small, .small { - font-size: 92%; } + font-size: 87%; } mark, .mark { @@ -1350,14 +1350,14 @@ a.bg-danger:focus { background-color: #e4b9b9; } .page-header { - padding-bottom: 8px; - margin: 36px 0 18px; + padding-bottom: 10px; + margin: 44px 0 22px; border-bottom: 1px solid #eeeeee; } ul, ol { margin-top: 0; - margin-bottom: 9px; } + margin-bottom: 11px; } ul ul, ul ol, ol ul, @@ -1379,7 +1379,7 @@ ol { dl { margin-top: 0; - margin-bottom: 18px; } + margin-bottom: 22px; } dt, dd { @@ -1418,9 +1418,9 @@ abbr[data-original-title] { font-size: 90%; } blockquote { - padding: 9px 18px; - margin: 0 0 18px; - font-size: 16.25px; + padding: 11px 22px; + margin: 0 0 22px; + font-size: 20px; border-left: 5px solid #eeeeee; } blockquote p:last-child, blockquote ul:last-child, @@ -1461,7 +1461,7 @@ blockquote.pull-right { content: "\00A0 \2014"; } address { - margin-bottom: 18px; + margin-bottom: 22px; font-style: normal; line-height: 1.42857; } @@ -1493,9 +1493,9 @@ kbd { pre { display: block; - padding: 8.5px; - margin: 0 0 9px; - font-size: 12px; + padding: 10.5px; + margin: 0 0 11px; + font-size: 15px; line-height: 1.42857; color: #333333; word-break: break-all; @@ -2066,7 +2066,7 @@ th { .table { width: 100%; max-width: 100%; - margin-bottom: 18px; } + margin-bottom: 22px; } .table > thead > tr > th, .table > thead > tr > td, .table > tbody > tr > th, @@ -2230,7 +2230,7 @@ th { @media screen and (max-width: 767px) { .table-responsive { width: 100%; - margin-bottom: 13.5px; + margin-bottom: 16.5px; overflow-y: hidden; -ms-overflow-style: -ms-autohiding-scrollbar; border: 1px solid #ddd; } @@ -2275,8 +2275,8 @@ legend { display: block; width: 100%; padding: 0; - margin-bottom: 18px; - font-size: 19.5px; + margin-bottom: 22px; + font-size: 24px; line-height: inherit; color: #333333; border: 0; @@ -2328,16 +2328,16 @@ input[type="checkbox"]:focus { output { display: block; padding-top: 7px; - font-size: 13px; + font-size: 16px; line-height: 1.42857; color: #555555; } .form-control { display: block; width: 100%; - height: 32px; + height: 36px; padding: 6px 12px; - font-size: 13px; + font-size: 16px; line-height: 1.42857; color: #555555; background-color: #fff; @@ -2380,7 +2380,7 @@ textarea.form-control { input[type="time"].form-control, input[type="datetime-local"].form-control, input[type="month"].form-control { - line-height: 32px; } + line-height: 36px; } input[type="date"].input-sm, .input-group-sm > input.form-control[type="date"], .input-group-sm > input.input-group-addon[type="date"], .input-group-sm > .input-group-btn > input.btn[type="date"], .input-group-sm > .input-group-btn > input.button[type="date"], @@ -2406,7 +2406,7 @@ textarea.form-control { .input-group-sm > .input-group-btn > input.button[type="month"], .input-group-sm input[type="month"] { - line-height: 30px; } + line-height: 33px; } input[type="date"].input-lg, .input-group-lg > input.form-control[type="date"], .input-group-lg > input.input-group-addon[type="date"], .input-group-lg > .input-group-btn > input.btn[type="date"], .input-group-lg > .input-group-btn > input.button[type="date"], @@ -2432,7 +2432,7 @@ textarea.form-control { .input-group-lg > .input-group-btn > input.button[type="month"], .input-group-lg input[type="month"] { - line-height: 45px; } } + line-height: 49px; } } .form-group { margin-bottom: 15px; } @@ -2451,7 +2451,7 @@ textarea.form-control { cursor: initial; } .radio label, .checkbox label { - min-height: 18px; + min-height: 22px; padding-left: 20px; margin-bottom: 0; font-weight: 400; @@ -2491,7 +2491,7 @@ textarea.form-control { margin-left: 10px; } .form-control-static { - min-height: 31px; + min-height: 38px; padding-top: 7px; padding-bottom: 7px; margin-bottom: 0; } @@ -2506,17 +2506,17 @@ textarea.form-control { .input-sm, .input-group-sm > .form-control, .input-group-sm > .input-group-addon, .input-group-sm > .input-group-btn > .btn, .input-group-sm > .input-group-btn > .button { - height: 30px; + height: 33px; padding: 5px 10px; - font-size: 12px; + font-size: 14px; line-height: 1.5; border-radius: 3px; } select.input-sm, .input-group-sm > select.form-control, .input-group-sm > select.input-group-addon, .input-group-sm > .input-group-btn > select.btn, .input-group-sm > .input-group-btn > select.button { - height: 30px; - line-height: 30px; } + height: 33px; + line-height: 33px; } textarea.input-sm, .input-group-sm > textarea.form-control, .input-group-sm > textarea.input-group-addon, @@ -2529,41 +2529,41 @@ select[multiple].input-sm, height: auto; } .form-group-sm .form-control { - height: 30px; + height: 33px; padding: 5px 10px; - font-size: 12px; + font-size: 14px; line-height: 1.5; border-radius: 3px; } .form-group-sm select.form-control { - height: 30px; - line-height: 30px; } + height: 33px; + line-height: 33px; } .form-group-sm textarea.form-control, .form-group-sm select[multiple].form-control { height: auto; } .form-group-sm .form-control-static { - height: 30px; - min-height: 30px; + height: 33px; + min-height: 36px; padding: 6px 10px; - font-size: 12px; + font-size: 14px; line-height: 1.5; } .input-lg, .input-group-lg > .form-control, .input-group-lg > .input-group-addon, .input-group-lg > .input-group-btn > .btn, .input-group-lg > .input-group-btn > .button { - height: 45px; + height: 49px; padding: 10px 16px; - font-size: 17px; + font-size: 20px; line-height: 1.33333; border-radius: 6px; } select.input-lg, .input-group-lg > select.form-control, .input-group-lg > select.input-group-addon, .input-group-lg > .input-group-btn > select.btn, .input-group-lg > .input-group-btn > select.button { - height: 45px; - line-height: 45px; } + height: 49px; + line-height: 49px; } textarea.input-lg, .input-group-lg > textarea.form-control, .input-group-lg > textarea.input-group-addon, @@ -2576,31 +2576,31 @@ select[multiple].input-lg, height: auto; } .form-group-lg .form-control { - height: 45px; + height: 49px; padding: 10px 16px; - font-size: 17px; + font-size: 20px; line-height: 1.33333; border-radius: 6px; } .form-group-lg select.form-control { - height: 45px; - line-height: 45px; } + height: 49px; + line-height: 49px; } .form-group-lg textarea.form-control, .form-group-lg select[multiple].form-control { height: auto; } .form-group-lg .form-control-static { - height: 45px; - min-height: 35px; + height: 49px; + min-height: 42px; padding: 11px 16px; - font-size: 17px; + font-size: 20px; line-height: 1.33333; } .has-feedback { position: relative; } .has-feedback .form-control { - padding-right: 40px; } + padding-right: 45px; } .form-control-feedback { position: absolute; @@ -2608,25 +2608,25 @@ select[multiple].input-lg, right: 0; z-index: 2; display: block; - width: 32px; - height: 32px; - line-height: 32px; + width: 36px; + height: 36px; + line-height: 36px; text-align: center; pointer-events: none; } .input-lg + .form-control-feedback, .input-group-lg > .form-control + .form-control-feedback, .input-group-lg > .input-group-addon + .form-control-feedback, .input-group-lg > .input-group-btn > .btn + .form-control-feedback, .input-group-lg > .input-group-btn > .button + .form-control-feedback, .input-group-lg + .form-control-feedback, .form-group-lg .form-control + .form-control-feedback { - width: 45px; - height: 45px; - line-height: 45px; } + width: 49px; + height: 49px; + line-height: 49px; } .input-sm + .form-control-feedback, .input-group-sm > .form-control + .form-control-feedback, .input-group-sm > .input-group-addon + .form-control-feedback, .input-group-sm > .input-group-btn > .btn + .form-control-feedback, .input-group-sm > .input-group-btn > .button + .form-control-feedback, .input-group-sm + .form-control-feedback, .form-group-sm .form-control + .form-control-feedback { - width: 30px; - height: 30px; - line-height: 30px; } + width: 33px; + height: 33px; + line-height: 33px; } .has-success .help-block, .has-success .control-label, @@ -2716,7 +2716,7 @@ select[multiple].input-lg, color: #a94442; } .has-feedback label ~ .form-control-feedback { - top: 23px; } + top: 27px; } .has-feedback label.sr-only ~ .form-control-feedback { top: 0; } @@ -2776,7 +2776,7 @@ select[multiple].input-lg, .form-horizontal .radio, .form-horizontal .checkbox { - min-height: 25px; } + min-height: 29px; } .form-horizontal .form-group { margin-right: -15px; @@ -2799,12 +2799,12 @@ select[multiple].input-lg, @media (min-width: 768px) { .form-horizontal .form-group-lg .control-label { padding-top: 11px; - font-size: 17px; } } + font-size: 20px; } } @media (min-width: 768px) { .form-horizontal .form-group-sm .control-label { padding-top: 6px; - font-size: 12px; } } + font-size: 14px; } } .btn, .button { display: inline-block; @@ -2818,7 +2818,7 @@ select[multiple].input-lg, background-image: none; border: 1px solid transparent; padding: 6px 12px; - font-size: 13px; + font-size: 16px; line-height: 1.42857; border-radius: 4px; -webkit-user-select: none; @@ -3086,19 +3086,19 @@ fieldset[disabled] a.button { .btn-lg, .btn-group-lg > .btn, .btn-group-lg > .button { padding: 10px 16px; - font-size: 17px; + font-size: 20px; line-height: 1.33333; border-radius: 6px; } .btn-sm, .btn-group-sm > .btn, .btn-group-sm > .button { padding: 5px 10px; - font-size: 12px; + font-size: 14px; line-height: 1.5; border-radius: 3px; } .btn-xs, .btn-group-xs > .btn, .btn-group-xs > .button { padding: 1px 5px; - font-size: 12px; + font-size: 14px; line-height: 1.5; border-radius: 3px; } @@ -3172,7 +3172,7 @@ tbody.collapse.in { min-width: 160px; padding: 5px 0; margin: 2px 0 0; - font-size: 13px; + font-size: 16px; text-align: left; list-style: none; background-color: #fff; @@ -3187,7 +3187,7 @@ tbody.collapse.in { left: auto; } .dropdown-menu .divider { height: 1px; - margin: 8px 0; + margin: 10px 0; overflow: hidden; background-color: #e5e5e5; } .dropdown-menu > li > a { @@ -3236,7 +3236,7 @@ tbody.collapse.in { .dropdown-header { display: block; padding: 3px 20px; - font-size: 12px; + font-size: 14px; line-height: 1.42857; color: #777777; white-space: nowrap; } @@ -3496,7 +3496,7 @@ tbody.collapse.in { .input-group-addon { padding: 6px 12px; - font-size: 13px; + font-size: 16px; font-weight: 400; line-height: 1; color: #555555; @@ -3508,13 +3508,13 @@ tbody.collapse.in { .input-group-sm > .input-group-addon, .input-group-sm > .input-group-btn > .input-group-addon.btn, .input-group-sm > .input-group-btn > .input-group-addon.button { padding: 5px 10px; - font-size: 12px; + font-size: 14px; border-radius: 3px; } .input-group-addon.input-lg, .input-group-lg > .input-group-addon, .input-group-lg > .input-group-btn > .input-group-addon.btn, .input-group-lg > .input-group-btn > .input-group-addon.button { padding: 10px 16px; - font-size: 17px; + font-size: 20px; border-radius: 6px; } .input-group-addon input[type="radio"], .input-group-addon input[type="checkbox"] { @@ -3607,7 +3607,7 @@ tbody.collapse.in { border-color: #ddd; } .nav .nav-divider { height: 1px; - margin: 8px 0; + margin: 10px 0; overflow: hidden; background-color: #e5e5e5; } .nav > li > a > img { @@ -3701,7 +3701,7 @@ tbody.collapse.in { .navbar { position: relative; min-height: 50px; - margin-bottom: 18px; + margin-bottom: 22px; border: 1px solid transparent; } .navbar:before, .navbar:after { display: table; @@ -3806,9 +3806,9 @@ tbody.collapse.in { .navbar-brand { float: left; height: 50px; - padding: 16px 15px; - font-size: 17px; - line-height: 18px; } + padding: 14px 15px; + font-size: 20px; + line-height: 22px; } .navbar-brand:hover, .navbar-brand:focus { text-decoration: none; } .navbar-brand > img { @@ -3843,11 +3843,11 @@ tbody.collapse.in { display: none; } } .navbar-nav { - margin: 8px -15px; } + margin: 7px -15px; } .navbar-nav > li > a { padding-top: 10px; padding-bottom: 10px; - line-height: 18px; } + line-height: 22px; } @media (max-width: 767px) { .navbar-nav .open .dropdown-menu { position: static; @@ -3861,7 +3861,7 @@ tbody.collapse.in { .navbar-nav .open .dropdown-menu .dropdown-header { padding: 5px 15px 5px 25px; } .navbar-nav .open .dropdown-menu > li > a { - line-height: 18px; } + line-height: 22px; } .navbar-nav .open .dropdown-menu > li > a:hover, .navbar-nav .open .dropdown-menu > li > a:focus { background-image: none; } } @media (min-width: 768px) { @@ -3871,8 +3871,8 @@ tbody.collapse.in { .navbar-nav > li { float: left; } .navbar-nav > li > a { - padding-top: 16px; - padding-bottom: 16px; } } + padding-top: 14px; + padding-bottom: 14px; } } .navbar-form { padding: 10px 15px; @@ -3882,8 +3882,8 @@ tbody.collapse.in { border-bottom: 1px solid transparent; -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1); - margin-top: 9px; - margin-bottom: 9px; } + margin-top: 7px; + margin-bottom: 7px; } @media (min-width: 768px) { .navbar-form .form-group { display: inline-block; @@ -3951,18 +3951,18 @@ tbody.collapse.in { border-bottom-left-radius: 0; } .navbar-btn { - margin-top: 9px; - margin-bottom: 9px; } + margin-top: 7px; + margin-bottom: 7px; } .navbar-btn.btn-sm, .btn-group-sm > .navbar-btn.btn, .btn-group-sm > .navbar-btn.button { - margin-top: 10px; - margin-bottom: 10px; } + margin-top: 8.5px; + margin-bottom: 8.5px; } .navbar-btn.btn-xs, .btn-group-xs > .navbar-btn.btn, .btn-group-xs > .navbar-btn.button { margin-top: 14px; margin-bottom: 14px; } .navbar-text { - margin-top: 16px; - margin-bottom: 16px; } + margin-top: 14px; + margin-bottom: 14px; } @media (min-width: 768px) { .navbar-text { float: left; @@ -4104,7 +4104,7 @@ tbody.collapse.in { .breadcrumb { padding: 8px 15px; - margin-bottom: 18px; + margin-bottom: 22px; list-style: none; background-color: #f5f5f5; border-radius: 4px; } @@ -4120,7 +4120,7 @@ tbody.collapse.in { .pagination { display: inline-block; padding-left: 0; - margin: 18px 0; + margin: 22px 0; border-radius: 4px; } .pagination > li { display: inline; } @@ -4174,7 +4174,7 @@ tbody.collapse.in { .pagination-lg > li > a, .pagination-lg > li > span { padding: 10px 16px; - font-size: 17px; + font-size: 20px; line-height: 1.33333; } .pagination-lg > li:first-child > a, @@ -4190,7 +4190,7 @@ tbody.collapse.in { .pagination-sm > li > a, .pagination-sm > li > span { padding: 5px 10px; - font-size: 12px; + font-size: 14px; line-height: 1.5; } .pagination-sm > li:first-child > a, @@ -4205,7 +4205,7 @@ tbody.collapse.in { .pager { padding-left: 0; - margin: 18px 0; + margin: 22px 0; text-align: center; list-style: none; } .pager:before, .pager:after { @@ -4296,7 +4296,7 @@ a.label:hover, a.label:focus { display: inline-block; min-width: 10px; padding: 3px 7px; - font-size: 12px; + font-size: 14px; font-weight: bold; line-height: 1; color: #fff; @@ -4342,7 +4342,7 @@ a.badge:hover, a.badge:focus { color: inherit; } .jumbotron p { margin-bottom: 15px; - font-size: 20px; + font-size: 24px; font-weight: 200; } .jumbotron > hr { border-top-color: #d5d5d5; } @@ -4363,12 +4363,12 @@ a.badge:hover, a.badge:focus { padding-left: 60px; } .jumbotron h1, .jumbotron .h1 { - font-size: 59px; } } + font-size: 72px; } } .thumbnail { display: block; padding: 4px; - margin-bottom: 18px; + margin-bottom: 22px; line-height: 1.42857; background-color: #fff; border: 1px solid #ddd; @@ -4394,7 +4394,7 @@ a.thumbnail.active { .alert { padding: 15px; - margin-bottom: 18px; + margin-bottom: 22px; border: 1px solid transparent; border-radius: 4px; } .alert h4 { @@ -4467,8 +4467,8 @@ a.thumbnail.active { background-position: 0 0; } } .progress { - height: 18px; - margin-bottom: 18px; + height: 22px; + margin-bottom: 22px; overflow: hidden; background-color: #f5f5f5; border-radius: 4px; @@ -4479,8 +4479,8 @@ a.thumbnail.active { float: left; width: 0%; height: 100%; - font-size: 12px; - line-height: 18px; + font-size: 14px; + line-height: 22px; color: #fff; text-align: center; background-color: #337ab7; @@ -4737,7 +4737,7 @@ button.list-group-item-danger { line-height: 1.3; } .panel { - margin-bottom: 18px; + margin-bottom: 22px; background-color: #fff; border: 1px solid transparent; border-radius: 4px; @@ -4763,7 +4763,7 @@ button.list-group-item-danger { .panel-title { margin-top: 0; margin-bottom: 0; - font-size: 15px; + font-size: 18px; color: inherit; } .panel-title > a, .panel-title > small, @@ -4938,7 +4938,7 @@ button.list-group-item-danger { border: 0; } .panel-group { - margin-bottom: 18px; } + margin-bottom: 22px; } .panel-group .panel { margin-bottom: 0; border-radius: 4px; } @@ -5086,7 +5086,7 @@ button.list-group-item-danger { .close { float: right; - font-size: 19.5px; + font-size: 24px; font-weight: bold; line-height: 1; color: #000; @@ -5249,7 +5249,7 @@ button.close { word-spacing: normal; word-wrap: normal; white-space: normal; - font-size: 12px; + font-size: 14px; filter: alpha(opacity=0); opacity: 0; } .tooltip.in { @@ -5354,7 +5354,7 @@ button.close { word-spacing: normal; word-wrap: normal; white-space: normal; - font-size: 13px; + font-size: 16px; background-color: #fff; background-clip: padding-box; border: 1px solid #ccc; @@ -5438,7 +5438,7 @@ button.close { .popover-title { padding: 8px 14px; margin: 0; - font-size: 13px; + font-size: 16px; background-color: #f7f7f7; border-bottom: 1px solid #ebebeb; border-radius: 5px 5px 0 0; } @@ -6029,7 +6029,7 @@ body { .button { padding: 10px; padding-top: 11px; - border-radius: 2px; + border-radius: 24px; border: 0; letter-spacing: .5px; outline: none; @@ -6037,6 +6037,9 @@ body { .button > .glyphicon, .button > .tick { top: 2px; margin-right: 2px; } + .button.button-primary { + width: 200px; + height: 48px; } .button[disabled] { background-color: #3a3c41; color: #787c7f; @@ -6182,7 +6185,8 @@ body { .modal-footer { flex-grow: 0; - border: 0; } + border: 0; + text-align: center; } .modal { display: flex !important; @@ -6594,8 +6598,7 @@ svg-icon > img[disabled] { .page-finish .label { display: inline-block; } .page-finish .label > b { - color: #ddd; - font-family: monospace; } + color: #ddd; } .page-finish .soft { color: #ddd; } @@ -9858,39 +9861,65 @@ readers do not read off random characters that represent icons */ font-weight: 900; } @font-face { - font-family: Roboto; - src: url("../../../node_modules/roboto-fontface/fonts/roboto/Roboto-Thin.woff"); - font-weight: 100; - font-style: normal; } + font-family: 'Nunito'; + src: url("Nunito-Regular.eot"); + src: url("./fonts/Nunito-Regular.eot?#iefix") format("embedded-opentype"), url("./fonts/Nunito-Regular.woff2") format("woff2"), url("./fonts/Nunito-Regular.woff") format("woff"), url("./fonts/Nunito-Regular.ttf") format("truetype"); + font-weight: normal; + font-style: normal; + font-display: block; } @font-face { - font-family: Roboto; - src: url("../../../node_modules/roboto-fontface/fonts/roboto/Roboto-Light.woff"); + font-family: 'Nunito'; + src: url("Nunito-Bold.eot"); + src: url("./fonts/Nunito-Bold.eot?#iefix") format("embedded-opentype"), url("./fonts/Nunito-Bold.woff2") format("woff2"), url("./fonts/Nunito-Bold.woff") format("woff"), url("./fonts/Nunito-Bold.ttf") format("truetype"); + font-weight: bold; + font-style: normal; + font-display: block; } + +@font-face { + font-family: 'Nunito'; + src: url("Nunito-Light.eot"); + src: url("./fonts/Nunito-Light.eot?#iefix") format("embedded-opentype"), url("./fonts/Nunito-Light.woff2") format("woff2"), url("./fonts/Nunito-Light.woff") format("woff"), url("./fonts/Nunito-Light.ttf") format("truetype"); font-weight: 300; - font-style: normal; } + font-style: normal; + font-display: block; } @font-face { - font-family: Roboto; - src: url("../../../node_modules/roboto-fontface/fonts/roboto/Roboto-Regular.woff"); - font-weight: 400; - font-style: normal; } + font-family: 'CircularStd'; + src: url("./fonts/CircularStd-Bold.eot"); + src: url("./fonts/CircularStd-Bold.eot?#iefix") format("embedded-opentype"), url("./fonts/CircularStd-Bold.woff2") format("woff2"), url("./fonts/CircularStd-Bold.woff") format("woff"), url("./fonts/CircularStd-Bold.ttf") format("truetype"); + font-weight: bold; + font-style: normal; + font-display: block; } @font-face { - font-family: Roboto; - src: url("../../../node_modules/roboto-fontface/fonts/roboto/Roboto-Medium.woff"); + font-family: 'CircularStd'; + src: url("./fonts/CircularStd-Book.eot"); + src: url("./fonts/CircularStd-Book.eot?#iefix") format("embedded-opentype"), url("./fonts/CircularStd-Book.woff2") format("woff2"), url("./fonts/CircularStd-Book.woff") format("woff"), url("./fonts/CircularStd-Book.ttf") format("truetype"); font-weight: 500; - font-style: normal; } + font-style: normal; + font-display: block; } @font-face { - font-family: Roboto; - src: url("../../../node_modules/roboto-fontface/fonts/roboto/Roboto-Bold.woff"); - font-weight: 700; - font-style: normal; } + font-family: 'CircularStd'; + src: url("./fonts/CircularStd-Medium.eot"); + src: url("./fonts/CircularStd-Medium.eot?#iefix") format("embedded-opentype"), url("./fonts/CircularStd-Medium.woff2") format("woff2"), url("./fonts/CircularStd-Medium.woff") format("woff"), url("./fonts/CircularStd-Medium.ttf") format("truetype"); + font-weight: 400; + font-style: normal; + font-display: block; } + +.circular { + font-family: 'CircularStd'; + font-weight: 500; } + +.nunito { + font-family: 'Nunito'; } body { letter-spacing: 0.5px; display: flex; - flex-direction: column; } + flex-direction: column; + font-family: 'CircularStd'; } body > header { flex: 0 0 auto; } body > main { @@ -9899,11 +9928,6 @@ body { body > footer { flex: 0 0 auto; } -body, -.tooltip, -.popover { - font-family: Roboto; } - .section-footer-main { display: flex; align-items: center; @@ -9949,8 +9973,7 @@ body, .section-header { text-align: right; - padding: 5px 8px; - font-size: 15px; } + padding: 5px 8px; } .section-header > .button { padding-left: 3px; padding-right: 3px; } diff --git a/npm-shrinkwrap.json b/npm-shrinkwrap.json index 51ec88fd..7abce7cb 100644 --- a/npm-shrinkwrap.json +++ b/npm-shrinkwrap.json @@ -1041,6 +1041,7 @@ "version": "16.8.4", "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-16.8.4.tgz", "integrity": "sha512-eIRpEW73DCzPIMaNBDP5pPIpK1KXyZwNgfxiVagb5iGiz6da+9A5hslSX6GAQKdO7SayVCS/Fr2kjqprgAvkfA==", + "dev": true, "requires": { "@types/react": "*" } diff --git a/package.json b/package.json index 16f5abd0..e6be5f9d 100644 --- a/package.json +++ b/package.json @@ -39,7 +39,6 @@ ], "dependencies": { "@fortawesome/fontawesome-free-webfonts": "^1.0.9", - "@types/react-dom": "^16.8.4", "angular": "1.7.6", "angular-if-state": "^1.0.0", "angular-moment": "^1.0.1", @@ -86,6 +85,7 @@ "@babel/plugin-proposal-function-bind": "^7.2.0", "@babel/preset-env": "^7.2.0", "@babel/preset-react": "^7.0.0", + "@types/react-dom": "^16.8.4", "acorn": "^6.0.5", "angular-mocks": "1.7.6", "babel-loader": "^8.0.4",