From 58cda9cc7fb79ca9df6746de7f9662bc08dc156a Mon Sep 17 00:00:00 2001 From: Stefan Malzner Date: Fri, 13 Oct 2017 12:29:40 +0200 Subject: initial commit --- src/styles/animations.scss | 90 +++++++++ src/styles/auth.scss | 144 ++++++++++++++ src/styles/badge.scss | 15 ++ src/styles/button.scss | 74 +++++++ src/styles/colors.scss | 22 +++ src/styles/config.scss | 1 + src/styles/content-tabs.scss | 52 +++++ src/styles/fonts.scss | 44 +++++ src/styles/info-bar.scss | 79 ++++++++ src/styles/infobox.scss | 61 ++++++ src/styles/input.scss | 99 ++++++++++ src/styles/layout.scss | 141 +++++++++++++ src/styles/main.scss | 36 ++++ src/styles/mixins.scss | 9 + src/styles/radio.scss | 34 ++++ src/styles/recipes.scss | 72 +++++++ src/styles/reset.scss | 95 +++++++++ src/styles/searchInput.scss | 4 + src/styles/select.scss | 19 ++ src/styles/service-table.scss | 62 ++++++ src/styles/services.scss | 60 ++++++ src/styles/settings.scss | 392 +++++++++++++++++++++++++++++++++++++ src/styles/subscription-popup.scss | 20 ++ src/styles/subscription.scss | 72 +++++++ src/styles/tabs.scss | 72 +++++++ src/styles/toggle.scss | 47 +++++ src/styles/tooltip.scss | 4 + src/styles/type.scss | 73 +++++++ src/styles/util.scss | 20 ++ src/styles/welcome.scss | 75 +++++++ 30 files changed, 1988 insertions(+) create mode 100644 src/styles/animations.scss create mode 100644 src/styles/auth.scss create mode 100644 src/styles/badge.scss create mode 100644 src/styles/button.scss create mode 100644 src/styles/colors.scss create mode 100644 src/styles/config.scss create mode 100644 src/styles/content-tabs.scss create mode 100644 src/styles/fonts.scss create mode 100644 src/styles/info-bar.scss create mode 100644 src/styles/infobox.scss create mode 100644 src/styles/input.scss create mode 100644 src/styles/layout.scss create mode 100644 src/styles/main.scss create mode 100644 src/styles/mixins.scss create mode 100644 src/styles/radio.scss create mode 100644 src/styles/recipes.scss create mode 100644 src/styles/reset.scss create mode 100644 src/styles/searchInput.scss create mode 100644 src/styles/select.scss create mode 100644 src/styles/service-table.scss create mode 100644 src/styles/services.scss create mode 100644 src/styles/settings.scss create mode 100644 src/styles/subscription-popup.scss create mode 100644 src/styles/subscription.scss create mode 100644 src/styles/tabs.scss create mode 100644 src/styles/toggle.scss create mode 100644 src/styles/tooltip.scss create mode 100644 src/styles/type.scss create mode 100644 src/styles/util.scss create mode 100644 src/styles/welcome.scss (limited to 'src/styles') diff --git a/src/styles/animations.scss b/src/styles/animations.scss new file mode 100644 index 000000000..1e49af207 --- /dev/null +++ b/src/styles/animations.scss @@ -0,0 +1,90 @@ +// FadeIn +.fadeIn-appear { + opacity: 0.01; +} + +.fadeIn-appear.fadeIn-appear-active { + opacity: 1; + transition: opacity 0.5s ease-out; +} + +.fadeIn-enter { + opacity: 0.01; + transition: opacity 0.5s ease-out; +} + +.fadeIn-leave { + opacity: 1; +} + +.fadeIn-leave.fadeIn-leave-active { + opacity: 0.01; + transition: opacity 300ms ease-in; +} + +// FadeIn Fast +.fadeIn-fast-appear { + opacity: 0.01; +} + +.fadeIn-fast-appear.fadeIn-fast-appear-active { + opacity: 1; + transition: opacity 0.25s ease-out; +} + +.fadeIn-fast-enter { + opacity: 0.01; + transition: opacity 0.25s ease-out; +} + +.fadeIn-fast-leave { + opacity: 1; +} + +.fadeIn-fast-leave.fadeIn-fast-leave-active { + opacity: 0.01; + transition: opacity 0.25s ease-in; +} + +// Slide down +.slideDown-appear { + max-height: 0; + overflow-y: hidden; +} + +.slideDown-appear.slideDown-appear-active { + max-height: 500px; + transition: max-height 0.5s ease-out; +} + +.slideDown-enter { + max-height: 0; + transition: max-height 0.5s ease-out; +} + +// Slide up +.slideUp-appear { + transform: translateY(20px); + opacity: 0; +} + +.slideUp-appear.slideUp-appear-active { + transform: translateY(0px); + opacity: 1; + transition: all 0.3s ease-out; +} + +.slideUp-enter { + transform: translateY(20px); + opacity: 0; + transition: all 0.3s ease-out; +} + +.slideUp-leave { + opacity: 1; +} + +.slideUp-leave.slideUp-leave-active { + opacity: 0.01; + transition: opacity 300ms ease-in; +} diff --git a/src/styles/auth.scss b/src/styles/auth.scss new file mode 100644 index 000000000..9ad71867c --- /dev/null +++ b/src/styles/auth.scss @@ -0,0 +1,144 @@ +@import './config.scss'; + +.auth { + display: flex; + justify-content: center; + background: $theme-brand-primary; + + .auth__layout { + width: 100%; + &>div>span { + width: 100%; + } + // display: flex; + // align-items: center; + // justify-content: center; + // flex-direction: column; + + // @media only screen and (max-height : 700px) { + // margin: 100px 0; + // } + + &>div { + display: flex; + justify-content: center; + align-items: center; + + &>span { + position: absolute; + } + } + } + + .auth__container { + position: relative; + width: 350px; + height: auto; + margin: 40px auto 0 auto; + background: #FFF; + // padding: 20px; + border-radius: $theme-border-radius; + box-shadow: 0 0 50px rgba(black, 0.2); + + &.auth__container--signup { + width: 450px; + // margin-left: auto; + // margin-right: auto; + } + } + + .auth__logo { + display: block; + width: 150px; + height: auto; + margin: -105px auto 20px auto; + border-radius: $theme-border-radius; + + &.auth__logo--sm { + border: 4px solid #FFF; + box-shadow: 0 0 6px rgba(black, 0.5); + border-radius: 100%; + } + } + + .auth__form { + padding: 20px; + + h1 { + text-align: center; + } + } + + .auth__button { + width: 100%; + + &.auth__button--skip { + margin: 10px auto 0; + } + } + + .auth__links { + padding: 20px; + background: $theme-gray-lighter; + border-bottom-left-radius: $theme-border-radius; + border-bottom-right-radius: $theme-border-radius; + + a { + display: block; + text-align: center; + color: $theme-gray; + margin-bottom: 8px; + + &:last-of-type { + margin-bottom: 0; + } + } + } + + .auth__adlk { + position: absolute; + right: 25px; + bottom: 15px; + + img { + width: 65px; + } + } + + .auth__letter { + margin-bottom: 30px; + } + + .scroll-container { + z-index: 10; + } + + .info-bar { + position: absolute; + } + + &__scroll-container { + overflow: scroll; + width: 100%; + max-height: 100vh; + padding: 80px 0; + } + + .available-services { + margin-bottom: 15px; + } + + .unavailable-services { + margin: 15px 0; + + p { + text-transform: capitalize; + } + } + + .legal { + text-align: center; + margin-top: 20px; + color: $theme-gray-light; + } +} diff --git a/src/styles/badge.scss b/src/styles/badge.scss new file mode 100644 index 000000000..d7dfaf783 --- /dev/null +++ b/src/styles/badge.scss @@ -0,0 +1,15 @@ +@import './config.scss'; + +.badge { + font-size: 14px; + display: inline-block; + padding: 5px 10px; + border-radius: $theme-border-radius; + background: $theme-gray-lighter; + + &.badge--primary, + &.badge--premium { + background: $theme-brand-primary; + color: #FFF; + } +} diff --git a/src/styles/button.scss b/src/styles/button.scss new file mode 100644 index 000000000..c2dd91293 --- /dev/null +++ b/src/styles/button.scss @@ -0,0 +1,74 @@ +@import './config.scss'; + +.franz-form { + .franz-form__button { + position: relative; + background: $theme-brand-primary; + display: block; + padding: 10px 20px; + color: #FFF; + border-radius: 3px; + transition: background 0.5s; + text-align: center; + + &:hover { + background: darken($theme-brand-primary, 5%); + } + + &:active { + transition: none; + background: lighten($theme-brand-primary, 5%); + } + + &:disabled { + opacity: 0.2; + } + + &.franz-form__button--secondary { + background: $theme-gray-lighter; + color: $theme-gray; + + &:hover { + background: darken($theme-gray-lighter, 5%); + } + + &:active { + background: lighten($theme-gray-lighter, 5%); + } + } + + &.franz-form__button--danger { + background: $theme-brand-danger; + + &:hover { + background: darken($theme-brand-danger, 5%); + } + + &:active { + background: lighten($theme-brand-danger, 5%); + } + } + + &.franz-form__button--inverted { + background: none; + padding: 10px 20px; + border: 2px solid $theme-brand-primary; + color: $theme-brand-primary; + transition: background 0.5s, color 0.5s; + + &:hover { + background: darken($theme-brand-primary, 5%); + color: #FFF; + } + } + + .loader { + position: relative; + width: 20px; + height: 12px; + z-index: 9999; + display: inline-block; + margin-right: 5px; + } + } +} diff --git a/src/styles/colors.scss b/src/styles/colors.scss new file mode 100644 index 000000000..5d8302c28 --- /dev/null +++ b/src/styles/colors.scss @@ -0,0 +1,22 @@ +$theme-brand-primary: #3498db; +$theme-brand-success: #5cb85c; +$theme-brand-info: #5bc0de; +$theme-brand-warning: #FF9F00; +$theme-brand-danger: #d9534f; + +$theme-gray-dark: #373a3c; +$theme-gray: #55595c; +$theme-gray-light: #818a91; +$theme-gray-lighter: #eceeef; +$theme-gray-lightest: #f7f7f9; + +$theme-border-radius: 6px; +$theme-border-radius-small: 3px; + +$theme-sidebar-width: 68px; + +$theme-text-color: $theme-gray-dark; + +$theme-transition-time: 0.5s; + +$theme-inset-shadow: inset 0 2px 5px rgba(0,0,0,0.03); diff --git a/src/styles/config.scss b/src/styles/config.scss new file mode 100644 index 000000000..7aa2d674f --- /dev/null +++ b/src/styles/config.scss @@ -0,0 +1 @@ +@import './colors.scss'; diff --git a/src/styles/content-tabs.scss b/src/styles/content-tabs.scss new file mode 100644 index 000000000..aa3c8594b --- /dev/null +++ b/src/styles/content-tabs.scss @@ -0,0 +1,52 @@ +@import './config.scss'; + +.content-tabs { + .content-tabs__tabs { + display: flex; + border-top-left-radius: $theme-border-radius-small; + border-top-right-radius: $theme-border-radius-small; + overflow: hidden; + + .content-tabs__item { + padding: 10px; + flex: 1; + // border: 1px solid $theme-gray-lightest; + color: $theme-gray-dark; + background: $theme-gray-lightest; + border-bottom: 1px solid $theme-gray-lighter; + box-shadow: inset 0px -3px 10px rgba(black, 0.05); + transition: all $theme-transition-time; + + &.is-active { + background: $theme-brand-primary; + color: #FFF; + border-bottom: 1px solid $theme-brand-primary; + box-shadow: none; + } + } + } + + .content-tabs__content { + padding: 20px 20px; + border-bottom-left-radius: $theme-border-radius-small; + border-bottom-right-radius: $theme-border-radius-small; + background: $theme-gray-lightest; + + .content-tabs__item { + top: 0; + display: none; + + &.is-active { + display: block; + } + } + + .franz-form__input-wrapper { + background: #FFF; + } + + .franz-form__field:last-of-type { + margin-bottom: 0; + } + } +} diff --git a/src/styles/fonts.scss b/src/styles/fonts.scss new file mode 100644 index 000000000..bd96ea867 --- /dev/null +++ b/src/styles/fonts.scss @@ -0,0 +1,44 @@ +@import './config.scss'; +// @import './node_modules/mdi/scss/materialdesignicons.scss'; + +@font-face { + font-family: 'Open Sans'; + src: url('../assets/fonts/OpenSans-Light.ttf'); + font-weight: 300; + font-style: normal; +} + +@font-face { + font-family: 'Open Sans'; + src: url('../assets/fonts/OpenSans-Regular.ttf'); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: 'Open Sans'; + src: url('../assets/fonts/OpenSans-Bold.ttf'); + font-weight: bold; + font-style: normal; +} + +@font-face { + font-family: 'Open Sans'; + src: url('../assets/fonts/OpenSans-BoldItalic.ttf'); + font-weight: bold; + font-style: italic; +} + +@font-face { + font-family: 'Open Sans'; + src: url('../assets/fonts/OpenSans-ExtraBold.ttf'); + font-weight: 800; + font-style: normal; +} + +@font-face { + font-family: 'Open Sans'; + src: url('../assets/fonts/OpenSans-ExtraBoldItalic.ttf'); + font-weight: 800; + font-style: italic; +} diff --git a/src/styles/info-bar.scss b/src/styles/info-bar.scss new file mode 100644 index 000000000..c30c951ee --- /dev/null +++ b/src/styles/info-bar.scss @@ -0,0 +1,79 @@ +@import './config.scss'; + +.info-bar { + width: 100%; + height: 50px; + background: $theme-brand-primary; + display: flex; + align-items: center; + justify-content: center; + padding: 0 20px; + position: relative; + // bottom: 0; + z-index: 100; + box-shadow: 0 0 8px rgba(black, 0.2); + + .info-bar__content { + height: auto; + + .mdi { + margin-right: 5px; + } + } + + .info-bar__close { + position: absolute; + right: 10px; + color: #FFF; + } + + .info-bar__cta { + color: #FFF; + padding: 3px 8px; + border-radius: $theme-border-radius-small; + border-color: #FFF; + border-width: 2px; + border-style: solid; + margin-left: 15px; + + .loader { + position: relative; + width: 20px; + height: 12px; + z-index: 9999; + display: inline-block; + margin-right: 5px; + } + } + + &.info-bar--bottom { + order: 10; + } + + &.info-bar--primary { + background: $theme-brand-primary; + color: #FFF; + + a { + color: #FFF; + } + } + + &.info-bar--warning { + background: $theme-brand-warning; + color: #FFF; + + a { + color: #FFF; + } + } + + &.info-bar--danger { + background: $theme-brand-danger; + color: #FFF; + + a { + color: #FFF; + } + } +} diff --git a/src/styles/infobox.scss b/src/styles/infobox.scss new file mode 100644 index 000000000..ad363314d --- /dev/null +++ b/src/styles/infobox.scss @@ -0,0 +1,61 @@ +@import './config.scss'; + +.infobox { + height: auto; + padding: 15px 20px; + margin-bottom: 30px; + border-radius: $theme-border-radius-small; + display: flex; + align-items: center; + + a { + color: #FFF; + } + + .infobox__content { + flex: 1; + } + + &.infobox--success { + background: $theme-brand-success; + color: #FFF; + } + + &.infobox--primary { + background: $theme-brand-primary; + color: #FFF; + } + + &.infobox--danger { + background: $theme-brand-danger; + color: #FFF; + } + + .mdi { + margin-right: 10px; + } + + .infobox__cta { + color: #FFF; + padding: 3px 8px; + border-radius: $theme-border-radius-small; + border-color: #FFF; + border-width: 2px; + border-style: solid; + margin-left: 15px; + + .loader { + position: relative; + width: 20px; + height: 12px; + z-index: 9999; + display: inline-block; + margin-right: 5px; + } + } + + .infobox__delete { + color: #FFF; + margin-right: 0; + } +} diff --git a/src/styles/input.scss b/src/styles/input.scss new file mode 100644 index 000000000..814dce5f8 --- /dev/null +++ b/src/styles/input.scss @@ -0,0 +1,99 @@ +@import './config.scss'; +@import './mixins.scss'; + +.franz-form { + .franz-form__field { + display: flex; + flex: 1; + flex-direction: column; + margin-bottom: 20px; + + &.has-error { + .franz-form__input-wrapper { + border-color: $theme-brand-danger; + } + + .franz-form__input-modifier { + border-color: $theme-brand-danger; + } + } + } + + .franz-form__label { + @include formLabel(); + } + + .franz-form__error { + color: $theme-brand-danger; + margin-top: 10px; + order: 2; + } + + .franz-form__input-wrapper { + display: flex; + width: 100%; + order: 1; + border-radius: $theme-border-radius-small; + background: $theme-gray-lightest; + border: 1px solid $theme-gray-lighter; + flex-wrap: wrap; + } + + .franz-form__input { + flex: 1; + border: 0; + background: none; + width: 100%; + padding: 8px; + // font-size: 18px; + color: $theme-gray; + } + + .franz-form__input-prefix, + .franz-form__input-suffix { + padding: 0 10px; + background: $theme-gray-lighter; + color: $theme-gray-light; + line-height: 35px; + } + + .franz-form__input-modifier { + padding: 0 20px; + border-left: 1px solid $theme-gray-lighter; + color: $theme-gray-light; + font-size: 20px; + } + + .franz-form__password-score { + background: $theme-gray-lighter; + height: 5px; + flex-basis: 100%; + border-bottom-left-radius: 3px; + border-bottom-right-radius: 3px; + + meter { + width: 100%; + height: 100%; + display: block; + border-bottom-left-radius: 3px; + border-bottom-right-radius: 3px; + overflow: hidden; + + &::-webkit-meter-bar { + background: none; + } + + &::-webkit-meter-even-less-good-value { + background: $theme-brand-danger; + } + + &::-webkit-meter-suboptimum-value { + background: $theme-brand-warning; + } + + &::-webkit-meter-optimum-value { + background: $theme-brand-success; + } + } + } +} diff --git a/src/styles/layout.scss b/src/styles/layout.scss new file mode 100644 index 000000000..d87df2684 --- /dev/null +++ b/src/styles/layout.scss @@ -0,0 +1,141 @@ +@import './config.scss'; + +html { + overflow: hidden; +} + +.app { + display: flex; + flex-direction: row; + + .app__service { + display: flex; + flex: 1; + flex-direction: column; + } +} + +.window-draggable { + position: absolute; + width: 100%; + top: 0px; + left: 0px; + height: 35px; + pointer-events: none; + -webkit-app-region: drag; + z-index: 9999; +} + +.darwin { + .sidebar { + padding-top: 23px; + } +} + +.sidebar { + display: flex; + flex-direction: column; + align-items: center; + width: $theme-sidebar-width; + background: $theme-gray-lightest; + box-shadow: 1px 0 10px rgba(0,0,0,0.08); + z-index: 200; + text-align: center; + color: $theme-text-color; + + .sidebar__add-service { + width: 32px; + height: 32px; + background: $theme-gray-lighter; + border-radius: $theme-border-radius-small; + margin: 10px auto; + color: $theme-gray-light; + } + + .sidebar__settings-button { + height: auto; + padding: 20px 0; + font-size: 12px; + position: relative; + + .emoji { + position: absolute; + top: 18px; + right: 12px; + + img { + width: 18px; + } + } + } + + .sidebar__logo { + width: 40px; + height: auto; + } + + & > div { + display: flex; + overflow-y: scroll; + + &::-webkit-scrollbar { + display: none; + } + } +} + +.grid { + .grid__row { + display: flex; + flex-direction: row; + + &>* { + margin-right: 20px; + } + + & :last-child { + margin-right: 0; + } + } +} + +.app-loader { + display: flex; + justify-content: center; + align-items: center; + + .app-loader__title { + color: #FFF; + font-size: 40px; + } + + &>span { + height: auto; + } +} + +.dev-warning { + display: none; +} + +.isDevMode { + .dev-warning { + display: block; + position: fixed; + background: $theme-brand-warning; + width: auto; + height: auto; + top: 5px; + right: 5px; + padding: 4px; + font-size: 10px; + color: #FFF; + z-index: 999999999; + border-radius: 3px; + transition: opacity 0.5s ease; + + &:hover { + opacity: 0; + } + } +} diff --git a/src/styles/main.scss b/src/styles/main.scss new file mode 100644 index 000000000..8afc86f98 --- /dev/null +++ b/src/styles/main.scss @@ -0,0 +1,36 @@ +$mdi-font-path: '../node_modules/mdi/fonts'; +@if $env == development { + $mdi-font-path: '../../node_modules/mdi/fonts'; +} + +@import './node_modules/mdi/scss/materialdesignicons.scss'; + +// modules +@import './reset.scss'; +@import './util.scss'; +@import './layout.scss'; +@import './tabs.scss'; +@import './services.scss'; +@import './settings.scss'; +@import './service-table.scss'; +@import './recipes.scss'; +@import './fonts.scss'; +@import './type.scss'; +@import './welcome.scss'; +@import './auth.scss'; +@import './tooltip.scss'; +@import './info-bar.scss'; +@import './animations.scss'; +@import './infobox.scss'; +@import './badge.scss'; +@import './subscription.scss'; +@import './subscription-popup.scss'; +@import './content-tabs.scss'; + +// form +@import './input.scss'; +@import './radio.scss'; +@import './toggle.scss'; +@import './button.scss'; +@import './searchInput.scss'; +@import './select.scss'; diff --git a/src/styles/mixins.scss b/src/styles/mixins.scss new file mode 100644 index 000000000..c9b1bc988 --- /dev/null +++ b/src/styles/mixins.scss @@ -0,0 +1,9 @@ +@import './config.scss'; + +@mixin formLabel { + width: 100%; + color: $theme-gray-light; + display: block; + margin-bottom: 5px; + order: 0; +} diff --git a/src/styles/radio.scss b/src/styles/radio.scss new file mode 100644 index 000000000..644478cd6 --- /dev/null +++ b/src/styles/radio.scss @@ -0,0 +1,34 @@ +@import './config.scss'; + +.franz-form { + .franz-form__radio-wrapper { + display: flex; + } + + .franz-form__radio { + // background: $theme-gray-lightest; + border: 2px solid $theme-gray-lighter; + color: $theme-gray; + padding: 11px; + margin-right: 20px; + text-align: center; + border-radius: $theme-border-radius-small; + flex: 1; + box-shadow: $theme-inset-shadow; + transition: background $theme-transition-time; + + &:last-of-type { + margin-right: 0; + } + + &.is-selected { + border: 2px solid $theme-brand-primary; + background: #FFF; + color: $theme-brand-primary; + } + + input { + display: none; + } + } +} diff --git a/src/styles/recipes.scss b/src/styles/recipes.scss new file mode 100644 index 000000000..017aa4fe2 --- /dev/null +++ b/src/styles/recipes.scss @@ -0,0 +1,72 @@ +@import './config.scss'; + +.recipes { + .recipes__list { + display: flex; + flex-flow: row wrap; + align-content: flex-start; + min-height: 70%; + height: auto; + + &.recipes__list--disabled { + opacity: 0.3; + filter: grayscale(100%); + pointer-events: none; + } + } + + .recipes__navigation { + height: auto; + margin-bottom: 35px; + + .badge { + margin-right: 10px; + } + + &.recipes__navigation--disabled { + opacity: 0.3; + filter: grayscale(100%); + pointer-events: none; + } + } +} + +.recipe-teaser { + position: relative; + width: calc(25% - 20px); + height: 120px; + margin: 0 20px 20px 0; + border-radius: $theme-border-radius; + background-color: $theme-gray-lightest; + transition: background $theme-transition-time; + overflow: hidden; + + &:hover { + background-color: $theme-gray-lighter; + } + + .recipe-teaser__icon { + width: 50px; + margin-bottom: 10px; + } + + .recipe-teaser__label { + display: block; + } + + h2 { + z-index: 10; + } + + &__dev-badge { + position: absolute; + top: 5px; + right: -13px; + width: 50px; + background: $theme-brand-warning; + color: #FFF; + font-size: 10px; + transform: rotateZ(45deg); + box-shadow: 0 0 4px rgba(black, 0.2); + } +} diff --git a/src/styles/reset.scss b/src/styles/reset.scss new file mode 100644 index 000000000..21763f44f --- /dev/null +++ b/src/styles/reset.scss @@ -0,0 +1,95 @@ +@import './config.scss'; + +/* ============ RESET =========== */ +/* http://meyerweb.com/eric/tools/css/reset */ + +html, body, div, span, applet, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +b, u, i, center, +dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td, +article, aside, canvas, details, embed, +figure, figcaption, footer, header, hgroup, +menu, nav, output, ruby, section, summary, +time, mark, audio, video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; +} +/* HTML5 display-role reset for older browsers */ +article, aside, details, figcaption, figure, +footer, header, hgroup, menu, nav, section { + display: block; +} +body { + line-height: 1; +} +ol, ul { + list-style: none; +} +blockquote, q { + quotes: none; +} +blockquote:before, blockquote:after, q:before, q:after { + content: ''; + content: none; +} +table { + border-collapse: collapse; + border-spacing: 0; +} + +/* Buttons should not have any special style applied by default */ +button { + background: none; + border: none; + padding: 0; +} + +button:focus { + outline: 0; +} + +html { + /* base for rem / 1rem = 10px */ + font-size: 62.5%; + font-family: 'Open Sans'; +} + +body { + /* default font size = 14px */ + font-size: 1.4rem; + color: $theme-gray-dark; +} + +* { + -webkit-font-smoothing: antialiased; + box-sizing: border-box; + font-size: 1.4rem; + font-family: 'Open Sans'; + -webkit-user-select: none; +} + +html, body, div { + height: 100%; + background: none; + box-sizing: border-box; +} + +*:focus { + outline: none; +} + +img { + pointer-events: none; +} + +a { + cursor: default; +} diff --git a/src/styles/searchInput.scss b/src/styles/searchInput.scss new file mode 100644 index 000000000..28ff09fc4 --- /dev/null +++ b/src/styles/searchInput.scss @@ -0,0 +1,4 @@ +.search-input { + width: 100%; + height: auto; +} diff --git a/src/styles/select.scss b/src/styles/select.scss new file mode 100644 index 000000000..965b4321a --- /dev/null +++ b/src/styles/select.scss @@ -0,0 +1,19 @@ +@import './config.scss'; +@import './mixins.scss'; + +$toggle: "PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgdmVyc2lvbj0iMS4xIgogICBpZD0ic3ZnMiIKICAgdmlld0JveD0iMCAwIDM1Ljk3MDk4MyAyMy4wOTE1MTgiCiAgIGhlaWdodD0iNi41MTY5Mzk2bW0iCiAgIHdpZHRoPSIxMC4xNTE4MTFtbSI+CiAgPGRlZnMKICAgICBpZD0iZGVmczQiIC8+CiAgPG1ldGFkYXRhCiAgICAgaWQ9Im1ldGFkYXRhNyI+CiAgICA8cmRmOlJERj4KICAgICAgPGNjOldvcmsKICAgICAgICAgcmRmOmFib3V0PSIiPgogICAgICAgIDxkYzpmb3JtYXQ+aW1hZ2Uvc3ZnK3htbDwvZGM6Zm9ybWF0PgogICAgICAgIDxkYzp0eXBlCiAgICAgICAgICAgcmRmOnJlc291cmNlPSJodHRwOi8vcHVybC5vcmcvZGMvZGNtaXR5cGUvU3RpbGxJbWFnZSIgLz4KICAgICAgICA8ZGM6dGl0bGU+PC9kYzp0aXRsZT4KICAgICAgPC9jYzpXb3JrPgogICAgPC9yZGY6UkRGPgogIDwvbWV0YWRhdGE+CiAgPGcKICAgICB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMjAyLjAxNDUxLC00MDcuMTIyMjUpIgogICAgIGlkPSJsYXllcjEiPgogICAgPHRleHQKICAgICAgIGlkPSJ0ZXh0MzMzNiIKICAgICAgIHk9IjYyOS41MDUwNyIKICAgICAgIHg9IjI5MS40Mjg1NiIKICAgICAgIHN0eWxlPSJmb250LXN0eWxlOm5vcm1hbDtmb250LXdlaWdodDpub3JtYWw7Zm9udC1zaXplOjQwcHg7bGluZS1oZWlnaHQ6MTI1JTtmb250LWZhbWlseTpzYW5zLXNlcmlmO2xldHRlci1zcGFjaW5nOjBweDt3b3JkLXNwYWNpbmc6MHB4O2ZpbGw6IzAwMDAwMDtmaWxsLW9wYWNpdHk6MTtzdHJva2U6bm9uZTtzdHJva2Utd2lkdGg6MXB4O3N0cm9rZS1saW5lY2FwOmJ1dHQ7c3Ryb2tlLWxpbmVqb2luOm1pdGVyO3N0cm9rZS1vcGFjaXR5OjEiCiAgICAgICB4bWw6c3BhY2U9InByZXNlcnZlIj48dHNwYW4KICAgICAgICAgeT0iNjI5LjUwNTA3IgogICAgICAgICB4PSIyOTEuNDI4NTYiCiAgICAgICAgIGlkPSJ0c3BhbjMzMzgiPjwvdHNwYW4+PC90ZXh0PgogICAgPGcKICAgICAgIGlkPSJ0ZXh0MzM0MCIKICAgICAgIHN0eWxlPSJmb250LXN0eWxlOm5vcm1hbDtmb250LXZhcmlhbnQ6bm9ybWFsO2ZvbnQtd2VpZ2h0Om5vcm1hbDtmb250LXN0cmV0Y2g6bm9ybWFsO2ZvbnQtc2l6ZTo0MHB4O2xpbmUtaGVpZ2h0OjEyNSU7Zm9udC1mYW1pbHk6Rm9udEF3ZXNvbWU7LWlua3NjYXBlLWZvbnQtc3BlY2lmaWNhdGlvbjpGb250QXdlc29tZTtsZXR0ZXItc3BhY2luZzowcHg7d29yZC1zcGFjaW5nOjBweDtmaWxsOiMwMDAwMDA7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOm5vbmU7c3Ryb2tlLXdpZHRoOjFweDtzdHJva2UtbGluZWNhcDpidXR0O3N0cm9rZS1saW5lam9pbjptaXRlcjtzdHJva2Utb3BhY2l0eToxIj4KICAgICAgPHBhdGgKICAgICAgICAgaWQ9InBhdGgzMzQ1IgogICAgICAgICBzdHlsZT0iZmlsbDojMzMzMzMzO2ZpbGwtb3BhY2l0eToxIgogICAgICAgICBkPSJtIDIzNy41NjY5Niw0MTMuMjU1MDcgYyAwLjU1ODA0LC0wLjU1ODA0IDAuNTU4MDQsLTEuNDczMjIgMCwtMi4wMzEyNSBsIC0zLjcwNTM1LC0zLjY4MzA0IGMgLTAuNTU4MDQsLTAuNTU4MDQgLTEuNDUwOSwtMC41NTgwNCAtMi4wMDg5MywwIEwgMjIwLDQxOS4zOTM0NiAyMDguMTQ3MzIsNDA3LjU0MDc4IGMgLTAuNTU4MDMsLTAuNTU4MDQgLTEuNDUwODksLTAuNTU4MDQgLTIuMDA4OTMsMCBsIC0zLjcwNTM1LDMuNjgzMDQgYyAtMC41NTgwNCwwLjU1ODAzIC0wLjU1ODA0LDEuNDczMjEgMCwyLjAzMTI1IGwgMTYuNTYyNSwxNi41NDAxNyBjIDAuNTU4MDMsMC41NTgwNCAxLjQ1MDg5LDAuNTU4MDQgMi4wMDg5MiwwIGwgMTYuNTYyNSwtMTYuNTQwMTcgeiIgLz4KICAgIDwvZz4KICA8L2c+Cjwvc3ZnPgo="; + +.franz-form { + .franz-form__select { + -webkit-appearance: none; + min-width: 200px; + padding: 10px; + background-color: $theme-gray-lightest; + background-position: right center; + background-repeat: no-repeat; + background-size: 1ex; + background-origin: content-box; + background-image: url(data:image/svg+xml;base64,#{$toggle}); + border: 1px solid $theme-gray-lighter; + } +} diff --git a/src/styles/service-table.scss b/src/styles/service-table.scss new file mode 100644 index 000000000..66d5ac941 --- /dev/null +++ b/src/styles/service-table.scss @@ -0,0 +1,62 @@ +@import './config.scss'; + +.service-table { + width: 100%; + + .service-table__toggle { + width: 60px; + + .franz-form__field { + margin-bottom: 0; + } + } + + .service-table__icon { + width: 35px; + + &.has-custom-icon { + border-radius: $theme-border-radius; + border: 1px solid $theme-gray-lighter; + width: 37px; + } + } + + .service-table__column-icon { + width: 40px; + } + + .service-table__column-action { + width: 40px + } + + .service-table__column-info { + width: 40px; + + .mdi { + display: block; + font-size: 18px; + color: $theme-gray-light; + } + } + + .service-table__row { + border-bottom: 1px solid $theme-gray-lightest; + + &:hover { + background: $theme-gray-lightest; + } + + &.service-table__row--disabled { + color: $theme-gray-light; + + .service-table__column-icon { + filter: grayscale(100%); + opacity: 0.5; + } + } + } + + td { + padding: 10px; + } +} diff --git a/src/styles/services.scss b/src/styles/services.scss new file mode 100644 index 000000000..3347ea9d7 --- /dev/null +++ b/src/styles/services.scss @@ -0,0 +1,60 @@ +@import './config.scss'; + +.services { + flex: 1; + height: 100%; + position: relative; + overflow: hidden; + background: #FFF; + order: 5; + + .services__webview { + position: absolute; + width: 100%; + top: 0; + left: 0; + z-index: 0; + + webview { + display: inline-flex; + width: 0px; + height: 0px; + } + + &.is-active { + z-index: 100; + + webview { + flex: 0 1; + width: 100%; + height: 100%; + } + } + + &--force-repaint { + webview { + z-index: 5; + } + } + } + + .services__no-service { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + text-align: center; + background: $theme-gray-lighter; + + h1 { + margin: 25px 0 40px; + color: $theme-gray-dark; + } + + a.button { + margin-top: 40px; + // color: #FFF; + // border-color: #FFF; + } + } +} diff --git a/src/styles/settings.scss b/src/styles/settings.scss new file mode 100644 index 000000000..9b19deb4e --- /dev/null +++ b/src/styles/settings.scss @@ -0,0 +1,392 @@ +@import './config.scss'; + +%headline { + font-size: 20px; + font-weight: 400; + letter-spacing: -1px; + color: $theme-gray-light; + + a { + color: $theme-gray-light; + } +} + +.settings-wrapper { + background: rgba(black, 0.5); + position: absolute; + width: 100%; + height: 100%; + top: 0; + left: 0; + z-index: 9998; + display: flex; + justify-content: center; + align-items: center; + padding: 25px; + + .settings-wrapper__action { + position: absolute; + width: 100%; + height: 100%; + top: 0; + left: 0; + } +} + +.settings { + position: relative; + display: flex; + height: 100%; + width: 100%; + max-width: 900px; + min-height: 400px; + max-height: 600px; + z-index: 9999; + background: #FFF; + border-radius: $theme-border-radius; + box-shadow: 0 20px 50px rgba(black, 0.5); + overflow: hidden; + // margin-top: -10%; + + .settings__main { + flex: 1; + display: flex; + flex-direction: column; + height: auto; + } + + .settings__header { + display: flex; + align-items: center; + width: calc(100% - 60px); + height: 50px; + padding: 0 40px; + background: $theme-gray-lighter; + + h1 { + @extend %headline; + margin: 0; + } + + .settings__header-item { + @extend %headline; + } + + .separator { + height: 100%; + margin: 0 15px; + border-right: 1px solid darken($theme-gray-lighter, 10%); + transform: skew(15deg) rotate(2deg); + } + + .mdi { + color: $theme-gray-light; + } + } + + .settings__body { + flex: 1; + padding: 25px 15px 15px 25px; + margin: 15px; + overflow-y: scroll; + + &::-webkit-scrollbar { + width: 8px; + } + + /* Track */ + &::-webkit-scrollbar-track { + -webkit-border-radius: 10px; + border-radius: 10px; + background: none; + } + + /* Handle */ + &::-webkit-scrollbar-thumb { + -webkit-border-radius: 10px; + border-radius: 10px; + background: $theme-gray-lighter; + } + + &::-webkit-scrollbar-thumb:window-inactive { + background: none; + } + } + + .settings__close { + position: absolute; + right: 0; + background: $theme-gray-lighter; + height: 50px; + padding: 0 20px; + font-size: 20px; + border-left: 1px solid darken($theme-gray-lighter, 5%); + color: $theme-gray-light; + transition: background $theme-transition-time; + + &:hover { + background: darken($theme-gray-lighter, 5%); + } + } + + .settings__search-header { + display: flex; + align-items: center; + padding: 0 10px; + border-radius: $theme-border-radius; + transition: background $theme-transition-time; + @extend %headline; + font-size: 22px; + + &:hover { + background: darken($theme-gray-lighter, 5%); + } + + input { + padding-left: 10px; + background: none; + border: 0; + flex: 1; + @extend %headline; + } + } + + .settings__options { + margin-top: 30px; + } + + .settings__message { + display: flex; + margin-top: 40px; + padding-top: 15px; + border-top: 1px solid $theme-gray-lighter; + color: $theme-gray-light; + + .mdi { + color: $theme-gray-light; + font-size: 20px; + margin-right: 10px; + } + } + + .settings__indirect-message-help { + margin: -10px 0 20px 55px;; + font-size: 12px; + color: $theme-gray-light; + + &:last-of-type { + margin-bottom: 30px; + } + } + + .settings__controls { + display: flex; + justify-content: space-between; + padding: 10px 20px; + height: auto; + background: $theme-gray-lighter; + + .franz-form__button { + &[type='submit'] { + margin-left: auto; + } + + &.franz-form__button--secondary { + background: $theme-gray-light; + } + } + } + + .settings__delete-button { + right: 0; + } + + .settings__empty-state { + width: 100%; + height: auto; + min-height: 70%; + text-align: center; + align-self: center; + // margin-top: -20px; + align-items: center; + + a.button { + margin-top: 40px; + } + } + + .account { + height: auto; + // padding: 20px; + + .account__box { + background: $theme-gray-lightest; + border-radius: $theme-border-radius; + padding: 20px; + margin-bottom: 40px; + align-items: center; + + &.account__box--flex { + display: flex; + } + + &.account__box--last { + margin-bottom: 0; + } + + .auth__button { + width: 100%; + margin-top: 10px; + } + } + + .account__avatar { + margin-right: 20px; + position: relative; + + .emoji img { + width: 30px; + } + } + + .account__avatar-premium { + position: absolute; + top: 2px; + right: 2px; + font-size: 26px; + } + + .account__info { + flex: 1; + + h2 { + margin-bottom: 5px; + } + + .badge { + margin-top: 5px; + } + } + + .account__subscription { + display: flex; + align-items: center; + + .badge { + margin-left: 10px; + } + } + + .account__subscription-button { + margin-left: auto; + } + + div { + height: auto; + } + + .invoices { + width: 100%; + + td { + padding: 15px 0; + border-bottom: 1px solid $theme-gray-lighter; + } + + tr:last-of-type td { + border: 0; + padding-bottom: 0; + } + + .invoices__action { + text-align: right; + + button { + color: $theme-brand-primary; + } + } + } + } + + // @include element(add-service-teaser) { + // height: auto; + // margin-top: 20px; + // display: block; + // text-align: center; + // } + .emoji { + display: block; + font-size: 40px; + margin-bottom: 20px; + + img { + width: 40px; + } + } + + .premium-info { + background: lighten($theme-brand-primary, 40%); + padding: 20px; + border-radius: $theme-border-radius; + } + + .content-tabs .premium-info { + background: none; + padding: 0; + } +} + +.settings-navigation { + width: 200px; + height: auto; + background: $theme-gray-lightest; + display: flex; + flex-direction: column; + + .settings-navigation__link { + display: block; + height: 50px; + line-height: 50px; + text-decoration: none; + color: $theme-text-color; + padding: 0 20px; + transition: background $theme-transition-time, color $theme-transition-time; + + &:hover { + background: darken($theme-gray-lightest, 5%); + + .badge { + background: #FFF; + } + } + + &.is-active { + background: $theme-brand-primary; + color: #FFF; + + .badge { + background: #FFF; + color: $theme-brand-primary; + } + } + } + + .settings-navigation__expander { + flex: 1; + } + + .badge { + transition: background $theme-transition-time, color $theme-transition-time; + display: initial; + margin-left: 5px; + } + + .settings-navigation__action-badge { + display: inline-block; + width: 7px; + height: 7px; + background: $theme-brand-danger; + border-radius: 100%; + margin-left: 5px; + } +} diff --git a/src/styles/subscription-popup.scss b/src/styles/subscription-popup.scss new file mode 100644 index 000000000..b6f232fcb --- /dev/null +++ b/src/styles/subscription-popup.scss @@ -0,0 +1,20 @@ +.subscription-popup { + height: 100%; + + &__content { + height: calc(100% - 60px); + } + + &__webview { + height: 100%; + } + + &__toolbar { + height: 60px; + background: $theme-gray-lightest; + display: flex; + justify-content: space-between; + padding: 10px; + border-top: 1px solid $theme-gray-lighter; + } +} diff --git a/src/styles/subscription.scss b/src/styles/subscription.scss new file mode 100644 index 000000000..63183f085 --- /dev/null +++ b/src/styles/subscription.scss @@ -0,0 +1,72 @@ +.subscription { + .subscription__premium-features { + margin: 10px 0; + + li { + height: 30px; + align-items: center; + display: flex; + + &:before { + content: "👍"; + margin-right: 10px; + } + + .badge { + margin-left: 10px; + } + } + } + + .subscription__premium-info { + margin: 15px 0 25px; + } +} + +.paymentTiers { + .franz-form__radio-wrapper { + flex-flow: wrap; + + .franz-form__radio { + width: 32%; + flex: initial; + margin-right: 2%; + + &:nth-child(3) { + margin-right: 0; + } + + &:last-of-type { + margin-right: 0; + margin-top: 2%; + width: 100%; + } + } + } +} + +.settings { + .paymentTiers { + .franz-form__radio-wrapper { + .franz-form__radio { + width: 49%; + + &:nth-child(2) { + margin-right: 0; + } + + &:last-of-type { + width: 100%; + } + } + } + } +} + +.mining-details { + margin-bottom: 15px; + + button { + color: $theme-brand-primary; + } +} diff --git a/src/styles/tabs.scss b/src/styles/tabs.scss new file mode 100644 index 000000000..75568898b --- /dev/null +++ b/src/styles/tabs.scss @@ -0,0 +1,72 @@ +@import './config.scss'; + +.tabs { + display: flex; + // flex: 1; + flex-direction: column; + flex-shrink: 1; + // align-items: center; + // height: auto; + + .placeholder { + width: 100%; + height: 40px; + } +} + +.tab-item { + display: flex; + justify-content: center; + align-items: center; + position: relative; + width: $theme-sidebar-width; + height: $theme-sidebar-width; + min-height: 50px; + transition: background $theme-transition-time; + + &.is-active { + border-left: 4px solid $theme-brand-primary; + background: lighten($theme-brand-primary, 35%); + + .tab-item__icon { + margin-left: -4px; + } + } + + &.has-custom-icon { + .tab-item__icon { + border-radius: $theme-border-radius; + // border: 1px solid $theme-gray-lighter; + // width: 32px; + } + } + + .tab-item__icon { + width: 30px; + height: auto; + } + + .tab-item__message-count { + min-width: 17px; + min-height: 17px; + background: $theme-brand-danger; + color: #FFF; + border-radius: 20px; + padding: 0px 5px; + font-size: 11px; + position: absolute; + right: 5px; + bottom: 5px; + display: flex; + justify-content: center; + align-items: center; + + &.is-indirect { + padding-top: 0px; + } + } + + &.is-reordering { + z-index: 99999; + } +} diff --git a/src/styles/toggle.scss b/src/styles/toggle.scss new file mode 100644 index 000000000..5b47e6495 --- /dev/null +++ b/src/styles/toggle.scss @@ -0,0 +1,47 @@ +@import './config.scss'; + +$toggle-size: 14px; +$toggle-width: 40px; +$toggle-button-size: 22px; + +.franz-form { + .franz-form__toggle-wrapper { + display: flex; + flex-direction: row; + + .franz-form__label { + margin-left: 20px; + } + + .franz-form__toggle { + width: $toggle-width; + height: $toggle-size; + position: relative; + background: $theme-gray-lighter; + border-radius: $theme-border-radius; + + .franz-form__toggle-button { + position: absolute; + left: 0; + top: -($toggle-button-size - $toggle-size) / 2; + width: $toggle-button-size; + height: $toggle-button-size; + background: $theme-gray-light; + border-radius: 100%; + transition: all 0.5s; + box-shadow: 0 1px 4px rgba(0,0,0,0.3); + } + + &.is-active { + .franz-form__toggle-button { + left: $toggle-width - $toggle-button-size; + background: $theme-brand-primary; + } + } + + input { + display: none; + } + } + } +} diff --git a/src/styles/tooltip.scss b/src/styles/tooltip.scss new file mode 100644 index 000000000..1194e7fbb --- /dev/null +++ b/src/styles/tooltip.scss @@ -0,0 +1,4 @@ +.__react_component_tooltip { + padding: 10px !important; + height: auto; +} diff --git a/src/styles/type.scss b/src/styles/type.scss new file mode 100644 index 000000000..935a36f4b --- /dev/null +++ b/src/styles/type.scss @@ -0,0 +1,73 @@ +@import './config.scss'; +@import './mixins.scss'; + +h1 { + font-size: 30px; + font-weight: 300; + letter-spacing: -1px; + margin-bottom: 25px; +} + +h2 { + font-size: 20px; + font-weight: 500; + letter-spacing: -1px; + margin-bottom: 25px; + margin-top: 55px; + + &:first-of-type { + margin-top: 0; + } +} + +p { + margin-bottom: 10px; + line-height: 1.7rem; + + &:last-of-type { + margin-bottom: 0; + } +} + +strong { + font-weight: bold; +} + +a { + text-decoration: none; + color: $theme-text-color; + + &.button { + position: relative; + background: none; + display: inline-block; + padding: 10px 20px; + border: 2px solid $theme-brand-primary; + color: $theme-brand-primary; + border-radius: 3px; + transition: background 0.5s, color 0.5s; + text-align: center; + + &:hover { + background: darken($theme-brand-primary, 5%); + color: #FFF; + } + } + + &.link { + color: $theme-brand-primary; + } +} + +.error-message, .error-message:last-of-type { + margin: 10px 0; + color: $theme-brand-danger; +} + +.center { + text-align: center; +} + +.label { + @include formLabel(); +} diff --git a/src/styles/util.scss b/src/styles/util.scss new file mode 100644 index 000000000..3faad8db3 --- /dev/null +++ b/src/styles/util.scss @@ -0,0 +1,20 @@ +.scroll-container { + height: 100%; + flex: 1; + overflow-y: scroll; + overflow-x: hidden; +} + +.loader { + position: relative; + z-index: 9999; + display: block; + width: 100%; + height: 40px; +} + +.align-middle { + display: flex; + flex-direction: column; + justify-content: center; +} diff --git a/src/styles/welcome.scss b/src/styles/welcome.scss new file mode 100644 index 000000000..5365921fb --- /dev/null +++ b/src/styles/welcome.scss @@ -0,0 +1,75 @@ +.auth { + .welcome { + + &__content { + display: flex; + align-items: center; + justify-content: center; + color: #FFF; + } + + &__logo { + width: 100px; + } + + &__text { + margin-left: 40px; + padding-left: 40px; + border-left: 1px solid #FFF; + + h1 { + font-size: 60px; + letter-spacing: -0.4rem; + margin-bottom: 5px; + } + + h2 { + margin-left: 2px; + margin-bottom: 0; + } + } + + &__services { + width: 100%; + max-width: 800px; + height: 100%; + max-height: 600px; + margin-left: -450px; + } + + &__buttons { + display: block; + margin-top: 100px; + text-align: center; + + .button:first-of-type { + margin-right: 25px; + } + } + + .button { + border-color: #FFF; + color: #FFF; + + &:hover { + background: #FFF; + color: $theme-brand-primary; + } + } + + &__featured-services { + margin-top: 150px; + text-align: center; + margin-top: 80px; + } + + &__featured-service { + width: 35px; + margin-right: 30px; + + &:last-of-type { + margin-right: 0; + } + } + } +} -- cgit v1.2.3-70-g09d2