From f53709f59f088f3a8b06e996bd6454c71f2a2ec8 Mon Sep 17 00:00:00 2001 From: Berrak Nil Date: Wed, 7 Feb 2018 18:12:12 +0300 Subject: [PATCH 1/2] [Reliability]: Convert SASS syntax to SCSS --- app/styles/app/animation/barricade.sass | 13 - app/styles/app/animation/barricade.scss | 19 + app/styles/app/animation/tractor.sass | 19 - app/styles/app/animation/tractor.scss | 30 + app/styles/app/base.sass | 104 ---- app/styles/app/base.scss | 133 +++++ app/styles/app/layout.sass | 97 --- app/styles/app/layout.scss | 139 +++++ app/styles/app/layouts/ansi.sass | 59 -- app/styles/app/layouts/ansi.scss | 114 ++++ app/styles/app/layouts/branches.sass | 44 -- app/styles/app/layouts/branches.scss | 67 +++ app/styles/app/layouts/broadcasts.sass | 128 ---- app/styles/app/layouts/broadcasts.scss | 160 +++++ app/styles/app/layouts/caches.sass | 63 -- app/styles/app/layouts/caches.scss | 91 +++ app/styles/app/layouts/content.sass | 50 -- app/styles/app/layouts/content.scss | 72 +++ app/styles/app/layouts/dashboard.sass | 34 -- app/styles/app/layouts/dashboard.scss | 46 ++ app/styles/app/layouts/error.sass | 163 ----- app/styles/app/layouts/error.scss | 250 ++++++++ app/styles/app/layouts/features.sass | 69 --- app/styles/app/layouts/features.scss | 104 ++++ app/styles/app/layouts/footer.sass | 75 --- app/styles/app/layouts/footer.scss | 102 ++++ app/styles/app/layouts/jobs.sass | 161 ----- app/styles/app/layouts/jobs.scss | 229 +++++++ app/styles/app/layouts/log.sass | 243 -------- app/styles/app/layouts/log.scss | 318 ++++++++++ app/styles/app/layouts/missing-notice.sass | 26 - app/styles/app/layouts/missing-notice.scss | 34 ++ app/styles/app/layouts/owner.sass | 65 -- app/styles/app/layouts/owner.scss | 103 ++++ app/styles/app/layouts/profile.sass | 186 ------ app/styles/app/layouts/profile.scss | 285 +++++++++ app/styles/app/layouts/pull-requests.sass | 68 --- app/styles/app/layouts/pull-requests.scss | 99 +++ app/styles/app/layouts/repo.sass | 38 -- app/styles/app/layouts/repo.scss | 55 ++ app/styles/app/layouts/requests.sass | 76 --- app/styles/app/layouts/requests.scss | 117 ++++ app/styles/app/layouts/settings.sass | 213 ------- app/styles/app/layouts/settings.scss | 311 ++++++++++ app/styles/app/layouts/sidebar.sass | 53 -- app/styles/app/layouts/sidebar.scss | 79 +++ app/styles/app/layouts/top.sass | 67 --- app/styles/app/layouts/top.scss | 90 +++ app/styles/app/mixins.sass | 120 ---- app/styles/app/mixins.scss | 169 ++++++ app/styles/app/modules/account.sass | 40 -- app/styles/app/modules/account.scss | 56 ++ app/styles/app/modules/avatar.sass | 59 -- app/styles/app/modules/avatar.scss | 80 +++ app/styles/app/modules/badge.sass | 24 - app/styles/app/modules/badge.scss | 23 + .../app/modules/beta-features-button.sass | 9 - .../app/modules/beta-features-button.scss | 12 + app/styles/app/modules/build-header.sass | 101 ---- app/styles/app/modules/build-header.scss | 139 +++++ app/styles/app/modules/build-tile.sass | 69 --- app/styles/app/modules/build-tile.scss | 97 +++ app/styles/app/modules/buttons.sass | 185 ------ app/styles/app/modules/buttons.scss | 259 ++++++++ app/styles/app/modules/codedisplay.sass | 5 - app/styles/app/modules/codedisplay.scss | 6 + app/styles/app/modules/dashboard-row.sass | 99 --- app/styles/app/modules/dashboard-row.scss | 143 +++++ app/styles/app/modules/dropdown.sass | 121 ---- app/styles/app/modules/dropdown.scss | 167 ++++++ app/styles/app/modules/dropup.sass | 78 --- app/styles/app/modules/dropup.scss | 113 ++++ app/styles/app/modules/flash.sass | 87 --- app/styles/app/modules/flash.scss | 116 ++++ app/styles/app/modules/forms.sass | 125 ---- app/styles/app/modules/forms.scss | 178 ++++++ app/styles/app/modules/icons.sass | 69 --- app/styles/app/modules/icons.scss | 95 +++ app/styles/app/modules/lastbuild.sass | 38 -- app/styles/app/modules/lastbuild.scss | 54 ++ app/styles/app/modules/loader.sass | 77 --- app/styles/app/modules/loader.scss | 90 +++ app/styles/app/modules/loading-indicator.sass | 44 -- app/styles/app/modules/loading-indicator.scss | 64 ++ app/styles/app/modules/logo.sass | 20 - app/styles/app/modules/logo.scss | 26 + app/styles/app/modules/navigation.sass | 87 --- app/styles/app/modules/navigation.scss | 123 ++++ app/styles/app/modules/notice.sass | 67 --- app/styles/app/modules/notice.scss | 96 +++ app/styles/app/modules/pagination.sass | 42 -- app/styles/app/modules/pagination.scss | 52 ++ app/styles/app/modules/popup.sass | 61 -- app/styles/app/modules/popup.scss | 83 +++ app/styles/app/modules/row.sass | 117 ---- app/styles/app/modules/row.scss | 168 ++++++ app/styles/app/modules/search.sass | 22 - app/styles/app/modules/search.scss | 27 + app/styles/app/modules/status-icon.sass | 48 -- app/styles/app/modules/status-icon.scss | 68 +++ app/styles/app/modules/switch.sass | 75 --- app/styles/app/modules/switch.scss | 100 ++++ app/styles/app/modules/sync-button.sass | 44 -- app/styles/app/modules/sync-button.scss | 61 ++ app/styles/app/modules/tabs.sass | 89 --- app/styles/app/modules/tabs.scss | 128 ++++ app/styles/app/modules/tofuburger.sass | 7 - app/styles/app/modules/tofuburger.scss | 8 + app/styles/app/modules/tooltips.sass | 4 - app/styles/app/modules/tooltips.scss | 5 + app/styles/app/pages/getting-started.sass | 62 -- app/styles/app/pages/getting-started.scss | 96 +++ app/styles/app/pages/home-pro.sass | 282 --------- app/styles/app/pages/home-pro.scss | 400 +++++++++++++ app/styles/app/pages/landing.sass | 421 ------------- app/styles/app/pages/landing.scss | 562 ++++++++++++++++++ app/styles/app/pages/logo.sass | 111 ---- app/styles/app/pages/logo.scss | 176 ++++++ app/styles/app/pages/plans.sass | 185 ------ app/styles/app/pages/plans.scss | 254 ++++++++ app/styles/app/vars.sass | 68 --- app/styles/app/vars.scss | 67 +++ 122 files changed, 7408 insertions(+), 5276 deletions(-) delete mode 100644 app/styles/app/animation/barricade.sass create mode 100644 app/styles/app/animation/barricade.scss delete mode 100644 app/styles/app/animation/tractor.sass create mode 100644 app/styles/app/animation/tractor.scss delete mode 100644 app/styles/app/base.sass create mode 100644 app/styles/app/base.scss delete mode 100644 app/styles/app/layout.sass create mode 100644 app/styles/app/layout.scss delete mode 100644 app/styles/app/layouts/ansi.sass create mode 100644 app/styles/app/layouts/ansi.scss delete mode 100644 app/styles/app/layouts/branches.sass create mode 100644 app/styles/app/layouts/branches.scss delete mode 100644 app/styles/app/layouts/broadcasts.sass create mode 100644 app/styles/app/layouts/broadcasts.scss delete mode 100644 app/styles/app/layouts/caches.sass create mode 100644 app/styles/app/layouts/caches.scss delete mode 100644 app/styles/app/layouts/content.sass create mode 100644 app/styles/app/layouts/content.scss delete mode 100644 app/styles/app/layouts/dashboard.sass create mode 100644 app/styles/app/layouts/dashboard.scss delete mode 100644 app/styles/app/layouts/error.sass create mode 100644 app/styles/app/layouts/error.scss delete mode 100644 app/styles/app/layouts/features.sass create mode 100644 app/styles/app/layouts/features.scss delete mode 100644 app/styles/app/layouts/footer.sass create mode 100644 app/styles/app/layouts/footer.scss delete mode 100644 app/styles/app/layouts/jobs.sass create mode 100644 app/styles/app/layouts/jobs.scss delete mode 100644 app/styles/app/layouts/log.sass create mode 100644 app/styles/app/layouts/log.scss delete mode 100644 app/styles/app/layouts/missing-notice.sass create mode 100644 app/styles/app/layouts/missing-notice.scss delete mode 100644 app/styles/app/layouts/owner.sass create mode 100644 app/styles/app/layouts/owner.scss delete mode 100644 app/styles/app/layouts/profile.sass create mode 100644 app/styles/app/layouts/profile.scss delete mode 100644 app/styles/app/layouts/pull-requests.sass create mode 100644 app/styles/app/layouts/pull-requests.scss delete mode 100644 app/styles/app/layouts/repo.sass create mode 100644 app/styles/app/layouts/repo.scss delete mode 100644 app/styles/app/layouts/requests.sass create mode 100644 app/styles/app/layouts/requests.scss delete mode 100644 app/styles/app/layouts/settings.sass create mode 100644 app/styles/app/layouts/settings.scss delete mode 100644 app/styles/app/layouts/sidebar.sass create mode 100644 app/styles/app/layouts/sidebar.scss delete mode 100644 app/styles/app/layouts/top.sass create mode 100644 app/styles/app/layouts/top.scss delete mode 100644 app/styles/app/mixins.sass create mode 100644 app/styles/app/mixins.scss delete mode 100644 app/styles/app/modules/account.sass create mode 100644 app/styles/app/modules/account.scss delete mode 100644 app/styles/app/modules/avatar.sass create mode 100644 app/styles/app/modules/avatar.scss delete mode 100644 app/styles/app/modules/badge.sass create mode 100644 app/styles/app/modules/badge.scss delete mode 100644 app/styles/app/modules/beta-features-button.sass create mode 100644 app/styles/app/modules/beta-features-button.scss delete mode 100644 app/styles/app/modules/build-header.sass create mode 100644 app/styles/app/modules/build-header.scss delete mode 100644 app/styles/app/modules/build-tile.sass create mode 100644 app/styles/app/modules/build-tile.scss delete mode 100644 app/styles/app/modules/buttons.sass create mode 100644 app/styles/app/modules/buttons.scss delete mode 100644 app/styles/app/modules/codedisplay.sass create mode 100644 app/styles/app/modules/codedisplay.scss delete mode 100644 app/styles/app/modules/dashboard-row.sass create mode 100644 app/styles/app/modules/dashboard-row.scss delete mode 100644 app/styles/app/modules/dropdown.sass create mode 100644 app/styles/app/modules/dropdown.scss delete mode 100644 app/styles/app/modules/dropup.sass create mode 100644 app/styles/app/modules/dropup.scss delete mode 100644 app/styles/app/modules/flash.sass create mode 100644 app/styles/app/modules/flash.scss delete mode 100644 app/styles/app/modules/forms.sass create mode 100644 app/styles/app/modules/forms.scss delete mode 100644 app/styles/app/modules/icons.sass create mode 100644 app/styles/app/modules/icons.scss delete mode 100644 app/styles/app/modules/lastbuild.sass create mode 100644 app/styles/app/modules/lastbuild.scss delete mode 100644 app/styles/app/modules/loader.sass create mode 100644 app/styles/app/modules/loader.scss delete mode 100644 app/styles/app/modules/loading-indicator.sass create mode 100644 app/styles/app/modules/loading-indicator.scss delete mode 100644 app/styles/app/modules/logo.sass create mode 100644 app/styles/app/modules/logo.scss delete mode 100644 app/styles/app/modules/navigation.sass create mode 100644 app/styles/app/modules/navigation.scss delete mode 100644 app/styles/app/modules/notice.sass create mode 100644 app/styles/app/modules/notice.scss delete mode 100644 app/styles/app/modules/pagination.sass create mode 100644 app/styles/app/modules/pagination.scss delete mode 100644 app/styles/app/modules/popup.sass create mode 100644 app/styles/app/modules/popup.scss delete mode 100644 app/styles/app/modules/row.sass create mode 100644 app/styles/app/modules/row.scss delete mode 100644 app/styles/app/modules/search.sass create mode 100644 app/styles/app/modules/search.scss delete mode 100644 app/styles/app/modules/status-icon.sass create mode 100644 app/styles/app/modules/status-icon.scss delete mode 100644 app/styles/app/modules/switch.sass create mode 100644 app/styles/app/modules/switch.scss delete mode 100644 app/styles/app/modules/sync-button.sass create mode 100644 app/styles/app/modules/sync-button.scss delete mode 100644 app/styles/app/modules/tabs.sass create mode 100644 app/styles/app/modules/tabs.scss delete mode 100644 app/styles/app/modules/tofuburger.sass create mode 100644 app/styles/app/modules/tofuburger.scss delete mode 100644 app/styles/app/modules/tooltips.sass create mode 100644 app/styles/app/modules/tooltips.scss delete mode 100644 app/styles/app/pages/getting-started.sass create mode 100644 app/styles/app/pages/getting-started.scss delete mode 100644 app/styles/app/pages/home-pro.sass create mode 100644 app/styles/app/pages/home-pro.scss delete mode 100644 app/styles/app/pages/landing.sass create mode 100644 app/styles/app/pages/landing.scss delete mode 100644 app/styles/app/pages/logo.sass create mode 100644 app/styles/app/pages/logo.scss delete mode 100644 app/styles/app/pages/plans.sass create mode 100644 app/styles/app/pages/plans.scss delete mode 100644 app/styles/app/vars.sass create mode 100644 app/styles/app/vars.scss diff --git a/app/styles/app/animation/barricade.sass b/app/styles/app/animation/barricade.sass deleted file mode 100644 index 16233b2ff5..0000000000 --- a/app/styles/app/animation/barricade.sass +++ /dev/null @@ -1,13 +0,0 @@ -.barricade - .reflector path:last-child - stroke: rgba(198, 52, 52, .8) - animation: blinking infinite 800ms ease - animation-direction: alternate - -@keyframes blinking - 0% - stroke-width: 0px - stroke-opacity: 1 - 100% - stroke-width: 15px - stroke-opacity: 0.4 diff --git a/app/styles/app/animation/barricade.scss b/app/styles/app/animation/barricade.scss new file mode 100644 index 0000000000..25277a788a --- /dev/null +++ b/app/styles/app/animation/barricade.scss @@ -0,0 +1,19 @@ +.barricade { + .reflector path:last-child { + stroke: rgba(198, 52, 52, 0.8); + animation: blinking infinite 800ms ease; + animation-direction: alternate; + } +} + +@keyframes blinking { + 0% { + stroke-width: 0px; + stroke-opacity: 1; + } + + 100% { + stroke-width: 15px; + stroke-opacity: 0.4; + } +} diff --git a/app/styles/app/animation/tractor.sass b/app/styles/app/animation/tractor.sass deleted file mode 100644 index 3b072febcc..0000000000 --- a/app/styles/app/animation/tractor.sass +++ /dev/null @@ -1,19 +0,0 @@ -.tractor - @media #{$medium-up} - width: 258px - height: 188px -.tractor-arm - @media #{$medium-up} - width: 90px - height: 71px - transform-origin: 89px 70px - animation: armMovement 1.5s 1 ease - -@keyframes armMovement - 0%, - 100% - transform: rotateZ(0) - 40% - transform: rotateZ(-20deg) - 70% - transform: rotateZ(10deg) \ No newline at end of file diff --git a/app/styles/app/animation/tractor.scss b/app/styles/app/animation/tractor.scss new file mode 100644 index 0000000000..ec88fd1193 --- /dev/null +++ b/app/styles/app/animation/tractor.scss @@ -0,0 +1,30 @@ +.tractor { + @media #{$medium-up} { + width: 258px; + height: 188px; + } +} + +.tractor-arm { + @media #{$medium-up} { + width: 90px; + height: 71px; + transform-origin: 89px 70px; + animation: armMovement 1.5s 1 ease; + } +} + +@keyframes armMovement { + 0%, + 100% { + transform: rotateZ(0); + } + + 40% { + transform: rotateZ(-20deg); + } + + 70% { + transform: rotateZ(10deg); + } +} diff --git a/app/styles/app/base.sass b/app/styles/app/base.sass deleted file mode 100644 index 474fccfc31..0000000000 --- a/app/styles/app/base.sass +++ /dev/null @@ -1,104 +0,0 @@ -*, -*:before, -*:after - box-sizing: border-box - -html, -body - height: 100% - padding: 0 - margin: 0 - color: $asphalt-grey - font-size: 14px - font-weight: 400 - font-style: normal - font-family: $font-family-sans-serif - line-height: 1.45 - background-color: $pebble-grey - -h1, h2, h3, h4, h5, h6 - font-weight: $font-weight-normal - -img - max-width: 100% - height: auto - -ms-interpolation-mode: bicubic - display: inline-block - vertical-align: middle - -button - background: white - border: none - font-family: $font-family-sans-serif - font-size: inherit - color: $asphalt-grey - -textarea - height: auto - min-height: 50px - -address - font-style: normal - -select - width: 100% - -strong - font-weight: 400 - -a - color: $asphalt-grey - text-decoration: none - &:hover, - &:active - text-decoration: none - -.display - display: block !important - -.display-inline - display: inline-block !important - -.hidden - display: none - -.pointer - cursor: pointer - -.helptext - font-size: $font-size-m - color: $cement-grey - +linkStyle - -span.emoji.emoji-sizer - width: 20px - height: 20px - margin: -4px 0 - display: inline-block - background-size: contain - -.warning - color: #c00 - a - color: #c00 - text-decoration: underline - -.small-title - font-size: 18px - color: $oxide-blue - -.blank-list - @include resetul - -.monospace - font-family: Cousine, monospace - font-size: 13px - line-height: 1 - -.float-right - float: right - -.m-l-s - margin-left: .6rem -.margin-left-s - margin-left: 10px diff --git a/app/styles/app/base.scss b/app/styles/app/base.scss new file mode 100644 index 0000000000..14d3beee5f --- /dev/null +++ b/app/styles/app/base.scss @@ -0,0 +1,133 @@ +*, +*:before, +*:after { + box-sizing: border-box; +} + +html, +body { + height: 100%; + padding: 0; + margin: 0; + color: $asphalt-grey; + font-size: 14px; + font-weight: 400; + font-style: normal; + font-family: $font-family-sans-serif; + line-height: 1.45; + background-color: $pebble-grey; +} + +h1, h2, h3, h4, h5, h6 { + font-weight: $font-weight-normal; +} + +img { + max-width: 100%; + height: auto; + -ms-interpolation-mode: bicubic; + display: inline-block; + vertical-align: middle; +} + +button { + background: white; + border: none; + font-family: $font-family-sans-serif; + font-size: inherit; + color: $asphalt-grey; +} + +textarea { + height: auto; + min-height: 50px; +} + +address { + font-style: normal; +} + +select { + width: 100%; +} + +strong { + font-weight: 400; +} + +a { + color: $asphalt-grey; + text-decoration: none; + + &:hover, + &:active { + text-decoration: none; + } +} + +.display { + display: block !important; +} + +.display-inline { + display: inline-block !important; +} + +.hidden { + display: none; +} + +.pointer { + cursor: pointer; +} + +.helptext { + font-size: $font-size-m; + color: $cement-grey; + + @include linkStyle; +} + +span.emoji.emoji-sizer { + width: 20px; + height: 20px; + margin: (-4px) 0; + display: inline-block; + background-size: contain; +} + +.warning { + color: #c00; + + a { + color: #c00; + text-decoration: underline; + } +} + +.small-title { + font-size: 18px; + color: $oxide-blue; +} + +.blank-list { + @include resetul; +} + +.monospace { + font-family: Cousine, monospace; + font-size: 13px; + line-height: 1; +} + +.float-right { + float: right; +} + +.m-l-s { + margin-left: 0.6rem; +} + +.margin-left-s { + margin-left: 10px; +} diff --git a/app/styles/app/layout.sass b/app/styles/app/layout.sass deleted file mode 100644 index 259a316cf7..0000000000 --- a/app/styles/app/layout.sass +++ /dev/null @@ -1,97 +0,0 @@ -$max-width: 1024px -$padding-top: 24px - -.main - position: relative - width: 100% - min-height: calc(100vh - 174px - 55px) - margin-top: $padding-top - padding-bottom: 5rem - background-color: white - -.loading-page - background-color: white - @extend .centered - .main - padding-bottom: 5rem - margin-bottom: -5rem - -#left - position: relative - padding: 0 0 110px 0 - background-color: white - border-right: 2px solid #f2f2f2 - -.wrapper - overflow: hidden - background-color: white - #main, - #left - margin-bottom: -99989px - padding-bottom: 100034px - .footer - display: none - -.wrapper-main - padding: 0 $column-gutter/2 - -@media #{$large-up} - #left, - .wrapper-main - min-height: 100vh - #left - width: grid-calc(6, 24) - float: left - margin-left: -100% - max-width: 325px - .wrapper-main - width: grid-calc(18, 24) - float: left - margin-left: grid-calc(6, 24) - overflow: visible - -@media #{$xlarge-up} - #left - width: grid-calc(7, 36) - .wrapper-main - width: grid-calc(29, 36) - margin-left: grid-calc(7, 36) - -@media #{$xxlarge-up} - #left - width: grid-calc(6, 36) - .wrapper-main - width: grid-calc(30, 36) - margin-left: grid-calc(6, 36) - -@media screen and (min-width: 2200px) - #left - width: grid-calc(5, 36) - .wrapper-main - width: grid-calc(31, 36) - margin-left: grid-calc(5, 36) - -.feature-wrapper.dashboard, -.centered, -.centered.wrapper - #left - display: none - #main - padding-bottom: 5rem - margin-bottom: 0 - .row - max-width: $max-width - .topbar, - .inner - max-width: $max-width - margin: auto - padding-left: $column-gutter/2 - padding-right: $column-gutter/2 - .main, - .wrapper-main - max-width: $max-width - margin-left: auto - margin-right: auto - float: none - .footer - display: block diff --git a/app/styles/app/layout.scss b/app/styles/app/layout.scss new file mode 100644 index 0000000000..986006e740 --- /dev/null +++ b/app/styles/app/layout.scss @@ -0,0 +1,139 @@ +$max-width: 1024px; +$padding-top: 24px; + +.main { + position: relative; + width: 100%; + min-height: calc(100vh - 174px - 55px); + margin-top: $padding-top; + padding-bottom: 5rem; + background-color: white; +} + +.loading-page { + background-color: white; + + @extend .centered; + + .main { + padding-bottom: 5rem; + margin-bottom: -5rem; + } +} + +#left { + position: relative; + padding: 0 0 110px 0; + background-color: white; + border-right: 2px solid #f2f2f2; +} + +.wrapper { + overflow: hidden; + background-color: white; + + #main, + #left { + margin-bottom: -99989px; + padding-bottom: 100034px; + } + + .footer { + display: none; + } +} + +.wrapper-main { + padding: 0 ($column-gutter / 2); +} + +@media #{$large-up} { + #left, + .wrapper-main { + min-height: 100vh; + } + + #left { + width: grid-calc(6, 24); + float: left; + margin-left: -100%; + max-width: 325px; + } + + .wrapper-main { + width: grid-calc(18, 24); + float: left; + margin-left: grid-calc(6, 24); + overflow: visible; + } +} + +@media #{$xlarge-up} { + #left { + width: grid-calc(7, 36); + } + + .wrapper-main { + width: grid-calc(29, 36); + margin-left: grid-calc(7, 36); + } +} + +@media #{$xxlarge-up} { + #left { + width: grid-calc(6, 36); + } + + .wrapper-main { + width: grid-calc(30, 36); + margin-left: grid-calc(6, 36); + } +} + +@media screen and (min-width: 2200px) { + #left { + width: grid-calc(5, 36); + } + + .wrapper-main { + width: grid-calc(31, 36); + margin-left: grid-calc(5, 36); + } +} + +.feature-wrapper.dashboard, +.centered, +.centered.wrapper { + #left { + display: none; + } + + #main { + padding-bottom: 5rem; + margin-bottom: 0; + } + + .row { + max-width: $max-width; + } + + .topbar, + .inner { + max-width: $max-width; + margin: auto; + padding-left: $column-gutter / 2; + padding-right: $column-gutter / 2; + } + + .main, + .wrapper-main { + max-width: $max-width; + margin-left: auto; + margin-right: auto; + float: none; + } + + .footer { + display: block; + } +} diff --git a/app/styles/app/layouts/ansi.sass b/app/styles/app/layouts/ansi.sass deleted file mode 100644 index 6d02764866..0000000000 --- a/app/styles/app/layouts/ansi.sass +++ /dev/null @@ -1,59 +0,0 @@ -// ansi styles, see javascripts/lib/deansi.js -.ansi - .bold - font-weight: bold - .italic - font-style: italic - .underline - text-decoration: underline - .black - color: $ansi-black - .black.bold - color: $ansi-black-bold - .red - color: $ansi-red - .red.bold - color: $ansi-red-bold - .green - color: $ansi-green - .green.bold - color: $ansi-green-bold - .yellow - color: $ansi-yellow - .yellow.bold - color: $ansi-yellow-bold - .blue - color: $ansi-blue - .blue.bold - color: $ansi-blue-bold - .magenta - color: $ansi-magenta - .magenta.bold - color: $ansi-magenta-bold - .cyan - color: $ansi-cyan - .cyan - color: $ansi-cyan-bold - .white - color: $ansi-white - .white.bold - color: $ansi-white-bold - .grey - color: $ansi-grey - .bg-black - background-color: $ansi-black - .bg-red - background-color: $ansi-red - .bg-green - background-color: $ansi-green - .bg-yellow - background-color: $ansi-yellow - .bg-blue - background-color: $ansi-blue - .bg-magenta - background-color: $ansi-magenta - .bg-cyan - background-color: $ansi-cyan - .bg-white - background-color: $ansi-white - diff --git a/app/styles/app/layouts/ansi.scss b/app/styles/app/layouts/ansi.scss new file mode 100644 index 0000000000..2ccda82dc0 --- /dev/null +++ b/app/styles/app/layouts/ansi.scss @@ -0,0 +1,114 @@ +// ansi styles, see javascripts/lib/deansi.js +.ansi { + .bold { + font-weight: bold; + } + + .italic { + font-style: italic; + } + + .underline { + text-decoration: underline; + } + + .black { + color: $ansi-black; + } + + .black.bold { + color: $ansi-black-bold; + } + + .red { + color: $ansi-red; + } + + .red.bold { + color: $ansi-red-bold; + } + + .green { + color: $ansi-green; + } + + .green.bold { + color: $ansi-green-bold; + } + + .yellow { + color: $ansi-yellow; + } + + .yellow.bold { + color: $ansi-yellow-bold; + } + + .blue { + color: $ansi-blue; + } + + .blue.bold { + color: $ansi-blue-bold; + } + + .magenta { + color: $ansi-magenta; + } + + .magenta.bold { + color: $ansi-magenta-bold; + } + + .cyan { + color: $ansi-cyan; + } + + .cyan { + color: $ansi-cyan-bold; + } + + .white { + color: $ansi-white; + } + + .white.bold { + color: $ansi-white-bold; + } + + .grey { + color: $ansi-grey; + } + + .bg-black { + background-color: $ansi-black; + } + + .bg-red { + background-color: $ansi-red; + } + + .bg-green { + background-color: $ansi-green; + } + + .bg-yellow { + background-color: $ansi-yellow; + } + + .bg-blue { + background-color: $ansi-blue; + } + + .bg-magenta { + background-color: $ansi-magenta; + } + + .bg-cyan { + background-color: $ansi-cyan; + } + + .bg-white { + background-color: $ansi-white; + } +} diff --git a/app/styles/app/layouts/branches.sass b/app/styles/app/layouts/branches.sass deleted file mode 100644 index 30a3e28048..0000000000 --- a/app/styles/app/layouts/branches.sass +++ /dev/null @@ -1,44 +0,0 @@ -.branches - .small-title - margin: 1.5em 0 0.7em - -.branch-row - - @media #{$medium-up} - display: flex - justify-content: space-between - & > div:first-of-type - width: 30% - padding-left: 1em - & > div:nth-of-type(2) - width: 20% - & > div:nth-of-type(3) - width: 20% - // & > div:nth-of-type(4) - // width: 5% - & > div:nth-of-type(4) - width: 28% - @media #{$large-up} - & > div:nth-of-type(2) - width: 21% - & > div:nth-of-type(3) - width: 21% - // & > div:nth-of-type(4) - // width: 2em - & > div:nth-of-type(4) - width: 25% - - .row-last-build - @media #{$medium-up} - padding-left: 1em - &:before - content: ""; - display: block; - width: 1px; - background-color: #EFF0EC; - position: absolute; - height: 3.7em; - margin-left: -1em; - -.is-relative - position: relative diff --git a/app/styles/app/layouts/branches.scss b/app/styles/app/layouts/branches.scss new file mode 100644 index 0000000000..151d5cfa81 --- /dev/null +++ b/app/styles/app/layouts/branches.scss @@ -0,0 +1,67 @@ +.branches { + .small-title { + margin: 1.5em 0 0.7em; + } +} + +.branch-row { + @media #{$medium-up} { + display: flex; + justify-content: space-between; + + & > div:first-of-type { + width: 30%; + padding-left: 1em; + } + + & > div:nth-of-type(2) { + width: 20%; + } + + & > div:nth-of-type(3) { + width: 20%; + } + + // & > div:nth-of-type(4) + // width: 5% + & > div:nth-of-type(4) { + width: 28%; + } + } + + @media #{$large-up} { + & > div:nth-of-type(2) { + width: 21%; + } + + & > div:nth-of-type(3) { + width: 21%; + } + + // & > div:nth-of-type(4) + // width: 2em + & > div:nth-of-type(4) { + width: 25%; + } + } + + .row-last-build { + @media #{$medium-up} { + padding-left: 1em; + + &:before { + content: ""; + display: block; + width: 1px; + background-color: #EFF0EC; + position: absolute; + height: 3.7em; + margin-left: -1em; + } + } + } +} + +.is-relative { + position: relative; +} diff --git a/app/styles/app/layouts/broadcasts.sass b/app/styles/app/layouts/broadcasts.sass deleted file mode 100644 index 269689107c..0000000000 --- a/app/styles/app/layouts/broadcasts.sass +++ /dev/null @@ -1,128 +0,0 @@ -.broadcast - display: inline-block - height: $top-height - width: 40px - margin-left: 1em - line-height: 2.5 - cursor: pointer - vertical-align: middle - @media #{$medium-up} - float: left - -.broadcasts - position: relative - background-color: white - list-style: none - padding: 0 1em - margin: 0 auto .7em - border-radius: 2px - height: 0 - transform-origin: center center - opacity: 0 - will-change: opacity - transition: opacity 150ms ease - - &:after - content: "" - position: absolute - display: block - width: 14px - height: 14px - background: white - top: -0.5em - left: 136px - transform: rotate(45deg) - border-top: solid 2px $cream-dark - border-left: solid 2px $cream-dark - li - border-bottom: solid 2px $cream-dark - &:last-of-type - border-bottom: none - p - position: relative - margin: .5em 0 - padding: 0 1.5rem - word-wrap: break-word - a - line-height: 1.45 - text-decoration: underline - - &.is-open - @include z-index(above-flashes) - border: solid 2px $cream-dark - opacity: 1 - height: auto - - @media #{$medium-up} - position: absolute - top: $top-height - left: 145px - width: 27em - height: auto - margin-left: -0.4em - &:after - left: 1rem - -.broadcast-status - display: inline-block - width: 10px - height: 10px - margin-right: .5rem - margin-left: -1.5rem - border-radius: 50% - background-color: $cement-grey - - &.warning - background-color: $brick-red - - &.announcement - background-color: $turf-green - -.broadcast-close - position: absolute - top: -2px - right: -0.5em - - -$broadcast-states: (warning: $brick-red, announcement: $turf-green) - -=colorBroadcast($color) - +colorSVG($color) - &:hover, - &.is-open - +colorSVG($color) - .count-wrapper - color: $color - -.icon-broadcast - display: inline-block - width: 16px - height: 16px - vertical-align: middle - +colorSVG($cement-grey) - &:hover, - &.is-open - +colorSVG($asphalt-grey) - - @each $class, $color in $broadcast-states - &.#{$class} - +colorBroadcast($color) - - .count-wrapper - position: absolute - top: 0 - height: 15px - width: 15px - margin-top: 11px - margin-left: 7px - - border-radius: 50% - border: 1px solid currentColor - background: white - - text-align: center - line-height: normal - font-size: 11px - - .count - margin-top: -1px diff --git a/app/styles/app/layouts/broadcasts.scss b/app/styles/app/layouts/broadcasts.scss new file mode 100644 index 0000000000..ede39a0170 --- /dev/null +++ b/app/styles/app/layouts/broadcasts.scss @@ -0,0 +1,160 @@ +.broadcast { + display: inline-block; + height: $top-height; + width: 40px; + margin-left: 1em; + line-height: 2.5; + cursor: pointer; + vertical-align: middle; + + @media #{$medium-up} { + float: left; + } +} + +.broadcasts { + position: relative; + background-color: white; + list-style: none; + padding: 0 1em; + margin: 0 auto 0.7em; + border-radius: 2px; + height: 0; + transform-origin: center center; + opacity: 0; + will-change: opacity; + transition: opacity 150ms ease; + + &:after { + content: ""; + position: absolute; + display: block; + width: 14px; + height: 14px; + background: white; + top: -0.5em; + left: 136px; + transform: rotate(45deg); + border-top: solid 2px $cream-dark; + border-left: solid 2px $cream-dark; + } + + li { + border-bottom: solid 2px $cream-dark; + + &:last-of-type { + border-bottom: none; + } + } + + p { + position: relative; + margin: 0.5em 0; + padding: 0 1.5rem; + word-wrap: break-word; + } + + a { + line-height: 1.45; + text-decoration: underline; + } + + &.is-open { + @include z-index(above-flashes); + + border: solid 2px $cream-dark; + opacity: 1; + height: auto; + } + + @media #{$medium-up} { + position: absolute; + top: $top-height; + left: 145px; + width: 27em; + height: auto; + margin-left: -0.4em; + + &:after { + left: 1rem; + } + } +} + +.broadcast-status { + display: inline-block; + width: 10px; + height: 10px; + margin-right: 0.5rem; + margin-left: -1.5rem; + border-radius: 50%; + background-color: $cement-grey; + + &.warning { + background-color: $brick-red; + } + + &.announcement { + background-color: $turf-green; + } +} + +.broadcast-close { + position: absolute; + top: -2px; + right: -0.5em; +} + +$broadcast-states: (warning: $brick-red, announcement: $turf-green); + +@mixin colorBroadcast($color) { + @include colorSVG($color); + + &:hover, + &.is-open { + @include colorSVG($color); + } + + .count-wrapper { + color: $color; + } +} + +.icon-broadcast { + display: inline-block; + width: 16px; + height: 16px; + vertical-align: middle; + + @include colorSVG($cement-grey); + + &:hover, + &.is-open { + @include colorSVG($asphalt-grey); + } + + @each $class, $color in $broadcast-states { + &.#{$class} { + @include colorBroadcast($color); + } + } + + .count-wrapper { + position: absolute; + top: 0; + height: 15px; + width: 15px; + margin-top: 11px; + margin-left: 7px; + border-radius: 50%; + border: 1px solid currentColor; + background: white; + text-align: center; + line-height: normal; + font-size: 11px; + + .count { + margin-top: -1px; + } + } +} diff --git a/app/styles/app/layouts/caches.sass b/app/styles/app/layouts/caches.sass deleted file mode 100644 index a68e89f03c..0000000000 --- a/app/styles/app/layouts/caches.sass +++ /dev/null @@ -1,63 +0,0 @@ -.caches-header - .small-title - margin-top: .5em - small - color: $cement-grey - font-size: 14px - a:hover, - a:active - border-bottom: 1px solid $cement-grey - - @media #{$medium-up} - display: flex - flex-flow: row wrap - justify-content: space-between - align-items: center - -.caches-list - padding: 0 - margin: 0 - list-style: none - -.cache-item - border: 1px solid rgba($cement-grey, 0.2) - margin-bottom: 5px - font-size: 15px - padding: 0 1em - &:hover, - &:active - background-color: $pebble-grey - - @media #{$medium-up} - display: flex - justify-content: space-between - flex-flow: row nowrap - align-items: center - padding: .3em 0 - white-space: nowrap - .row-item:first-of-type - flex: 1 0 30% - padding-left: 1em - overflow: hidden - .row-item:nth-of-type(2) - flex: 1 0 30% - .row-item:nth-of-type(3) - flex: 1 0 30% - .row-item:last-of-type - flex: 0 0 50px - margin-right: 1em - a - display: flex - justify-content: center - -.delete-cache-button - .icon-trash - margin-left: 4px - &:hover, - &:active - color: $brick-red - +colorSVG($brick-red) - -.delete-cache-icon - position: relative - display: block diff --git a/app/styles/app/layouts/caches.scss b/app/styles/app/layouts/caches.scss new file mode 100644 index 0000000000..b5eed16b9c --- /dev/null +++ b/app/styles/app/layouts/caches.scss @@ -0,0 +1,91 @@ +.caches-header { + .small-title { + margin-top: 0.5em; + + small { + color: $cement-grey; + font-size: 14px; + } + + a:hover, + a:active { + border-bottom: 1px solid $cement-grey; + } + } + + @media #{$medium-up} { + display: flex; + flex-flow: row wrap; + justify-content: space-between; + align-items: center; + } +} + +.caches-list { + padding: 0; + margin: 0; + list-style: none; +} + +.cache-item { + border: 1px solid rgba($cement-grey, 0.2); + margin-bottom: 5px; + font-size: 15px; + padding: 0 1em; + + &:hover, + &:active { + background-color: $pebble-grey; + } + + @media #{$medium-up} { + display: flex; + justify-content: space-between; + flex-flow: row nowrap; + align-items: center; + padding: 0.3em 0; + white-space: nowrap; + + .row-item:first-of-type { + flex: 1 0 30%; + padding-left: 1em; + overflow: hidden; + } + + .row-item:nth-of-type(2) { + flex: 1 0 30%; + } + + .row-item:nth-of-type(3) { + flex: 1 0 30%; + } + + .row-item:last-of-type { + flex: 0 0 50px; + margin-right: 1em; + + a { + display: flex; + justify-content: center; + } + } + } +} + +.delete-cache-button { + .icon-trash { + margin-left: 4px; + } + + &:hover, + &:active { + color: $brick-red; + + @include colorSVG($brick-red); + } +} + +.delete-cache-icon { + position: relative; + display: block; +} diff --git a/app/styles/app/layouts/content.sass b/app/styles/app/layouts/content.sass deleted file mode 100644 index 2d46326a7f..0000000000 --- a/app/styles/app/layouts/content.sass +++ /dev/null @@ -1,50 +0,0 @@ -// used in first_sync, auth and insufficient_oauth_permissions - -.content-page - padding: 70px 0 - text-align: center - -.content-title - color: $oxide-blue - font-size: 36px - @media #{$medium-up} - font-size: 50px - &.auth - margin-bottom: 0 - line-height: 1.2 - -.content-subtitle - font-size: 22px - -.content-text - +linkStyle - margin: 0 1em - font-size: 18px - line-height: 1.5 - text-align: left - @media #{$medium-up} - width: 600px - margin: auto - -.content-button - @extend %button - font-size: 24px - padding: 0.6em 0.8em - font-weight: 300 - background-color: $oxide-blue - color: white - &:hover, - &:active - background-color: darken($oxide-blue, 10) - .loading-indicator - margin-left: 0.5em - -.mascot-spin - animation: mrT 2.5s infinite ease - animation-direction: alternate - -@keyframes mrT - 0% - transform: rotateY(0deg) - 100% - transform: rotateY(360deg) diff --git a/app/styles/app/layouts/content.scss b/app/styles/app/layouts/content.scss new file mode 100644 index 0000000000..576da54e91 --- /dev/null +++ b/app/styles/app/layouts/content.scss @@ -0,0 +1,72 @@ +// used in first_sync, auth and insufficient_oauth_permissions + +.content-page { + padding: 70px 0; + text-align: center; +} + +.content-title { + color: $oxide-blue; + font-size: 36px; + + @media #{$medium-up} { + font-size: 50px; + } + + &.auth { + margin-bottom: 0; + line-height: 1.2; + } +} + +.content-subtitle { + font-size: 22px; +} + +.content-text { + @include linkStyle; + + margin: 0 1em; + font-size: 18px; + line-height: 1.5; + text-align: left; + + @media #{$medium-up} { + width: 600px; + margin: auto; + } +} + +.content-button { + @extend %button; + + font-size: 24px; + padding: 0.6em 0.8em; + font-weight: 300; + background-color: $oxide-blue; + color: white; + + &:hover, + &:active { + background-color: darken($oxide-blue, 10); + } + + .loading-indicator { + margin-left: 0.5em; + } +} + +.mascot-spin { + animation: mrT 2.5s infinite ease; + animation-direction: alternate; +} + +@keyframes mrT { + 0% { + transform: rotateY(0deg); + } + + 100% { + transform: rotateY(360deg); + } +} diff --git a/app/styles/app/layouts/dashboard.sass b/app/styles/app/layouts/dashboard.sass deleted file mode 100644 index d9ad6d2e57..0000000000 --- a/app/styles/app/layouts/dashboard.sass +++ /dev/null @@ -1,34 +0,0 @@ -.repo-list - list-style: none - padding: 0 - -.dashboard .centered - background-color: white - -.dashboard-header - width: 100% - display: flex - flex-flow: column-reverse wrap - justify-content: space-between - padding: 2em 0 - @media #{$medium-up} - flex-direction: row - align-items: baseline - -.dashboard-section - &:not(:last-of-type) - margin-bottom: 4rem - &:first-of-type - margin-top: 4rem - -.starred-empty - border: dotted 1px $cement-grey - border-radius: 2px - text-align: center - padding: 2rem 0 - font-size: 18px - color: $cement-grey - span - padding-left: 2em - background-size: 24px 24px - background-repeat: no-repeat diff --git a/app/styles/app/layouts/dashboard.scss b/app/styles/app/layouts/dashboard.scss new file mode 100644 index 0000000000..8ae5b5602b --- /dev/null +++ b/app/styles/app/layouts/dashboard.scss @@ -0,0 +1,46 @@ +.repo-list { + list-style: none; + padding: 0; +} + +.dashboard .centered { + background-color: white; +} + +.dashboard-header { + width: 100%; + display: flex; + flex-flow: column-reverse wrap; + justify-content: space-between; + padding: 2em 0; + + @media #{$medium-up} { + flex-direction: row; + align-items: baseline; + } +} + +.dashboard-section { + &:not(:last-of-type) { + margin-bottom: 4rem; + } + + &:first-of-type { + margin-top: 4rem; + } +} + +.starred-empty { + border: dotted 1px $cement-grey; + border-radius: 2px; + text-align: center; + padding: 2rem 0; + font-size: 18px; + color: $cement-grey; + + span { + padding-left: 2em; + background-size: 24px 24px; + background-repeat: no-repeat; + } +} diff --git a/app/styles/app/layouts/error.sass b/app/styles/app/layouts/error.sass deleted file mode 100644 index b466cecb87..0000000000 --- a/app/styles/app/layouts/error.sass +++ /dev/null @@ -1,163 +0,0 @@ -/* - * Error Pages + Maintenance - */ - -@mixin error-bg-gradient($color) - background: linear-gradient(0deg, $color, $color 38.9%, $error-bg-gradient 39%, white 60%, white) - -.navigation.is-error - height: 100% - li - display: inline-block - margin-right: 1.5em - a - line-height: 56px - -.error, -.maintenance - height: 100vh - overflow: hidden - -.error-full-size - position: absolute - top: 0 - height: 100% - width: 100% - overflow: hidden - background-repeat: no-repeat - -.main--error - min-height: 100% - -.error-text, -.maintenance-text - position: absolute - top: 6% - left: 0 - right: 0 - text-align: center - h1 - margin: 1em 0 .4em - font-size: 40px - @media #{$medium-up} - font-size: 70px - p - padding: 0 1em - font-size: 20px - color: $cement-grey - +linkStyle - -.icon-twitter - display: inline-block - width: 1.1em - height: 1.1em - background: - image: url(/images/error/twitter.svg) - repeat: no-repeat - size: 100% auto - position: 0 .2em - -.error500 - .error-bg - @include error-bg-gradient($error-sand) - .hill-left - background: - image: url(/images/error/500-hills-left.svg) - size: auto 10vh - position: 0 58% - @media #{$medium-up} - background-size: 38vw auto - .hill-right - @media #{$medium-up} - background: - image: url(/images/error/500-hills-right.svg) - size: 38vw auto - position: 99% 59% - .shadow-left - background: - image: url(/images/error/500-hills-shade-left.svg) - size: 24vw auto - position: 6% 72% - .shadow-right - background: - image: url(/images/error/500-hills-shade-right.svg) - size: 17vw auto - position: 95% 79% - .road - background: - image: url(/images/error/500-road.svg) - size: auto 27vh - position: 42% 78% - @media #{$medium-up} - background: - size: auto 40vh - position: 42% 91.3% - -.error404 - .error-bg - @include error-bg-gradient($error-hill-grey) - .hill-left - @media #{$medium-up} - background: - image: url(/images/error/404-hills-left.svg) - size: auto 25vh - position: 0 58% - .hill-right - background: - image: url(/images/error/404-hills-right.svg) - size: auto 20vw - position: 99% 60% - @media #{$medium-up} - background-size: 50vw auto - .error-excavator - background: - image: url(/images/error/excavator.svg) - size: auto 25vh - position: 71% 83% - .error-travis - background: - image: url(/images/error/pensive-travis.svg) - size: auto 60vh - position: 34% 100% - @media #{$medium-up} - background-size: auto 50vh - @media #{$large-up} - background-size: auto 60vh - -.maintenance - .maintenance-bg - @include error-bg-gradient($maintenance-grass) - .hill-left - background: - image: url(/images/error/maintenance-hills-left.svg) - size: 80vw auto - position: 0 58% - @media #{$medium-up} - background-size: 58vw auto - @media #{$large-up} - bakground-size: 50vw auto - .hill-right - @media #{$medium-up} - background: - image: url(/images/error/maintenance-hills-right.svg) - size: 38vw auto - position: 99% 59% - .shadow-left - background: - image: url(/images/error/maintenance-grass-shade-left.svg) - size: 24vw auto - position: 6% 73% - .shadow-right - background: - image: url(/images/error/maintenance-grass-shade-right.svg) - size: 17vw auto - position: 95% 79% - .maintenance-tractor - background: - image: url(/images/error/maintenance-tractor.svg) - size: 87vw auto - position: 63% 87% - @media #{$medium-up} - background: - size: auto 44vh - position: 63% 83% diff --git a/app/styles/app/layouts/error.scss b/app/styles/app/layouts/error.scss new file mode 100644 index 0000000000..4f0239701b --- /dev/null +++ b/app/styles/app/layouts/error.scss @@ -0,0 +1,250 @@ +/* Error Pages + Maintenance + */ + +@mixin error-bg-gradient($color) { + background: linear-gradient(0deg, $color, $color 38.9%, $error-bg-gradient 39%, white 60%, white); +} + +.navigation.is-error { + height: 100%; + + li { + display: inline-block; + margin-right: 1.5em; + } + + a { + line-height: 56px; + } +} + +.error, +.maintenance { + height: 100vh; + overflow: hidden; +} + +.error-full-size { + position: absolute; + top: 0; + height: 100%; + width: 100%; + overflow: hidden; + background-repeat: no-repeat; +} + +.main--error { + min-height: 100%; +} + +.error-text, +.maintenance-text { + position: absolute; + top: 6%; + left: 0; + right: 0; + text-align: center; + + h1 { + margin: 1em 0 0.4em; + font-size: 40px; + + @media #{$medium-up} { + font-size: 70px; + } + } + + p { + padding: 0 1em; + font-size: 20px; + color: $cement-grey; + + @include linkStyle; + } +} + +.icon-twitter { + display: inline-block; + width: 1.1em; + height: 1.1em; + background: { + image: url(/images/error/twitter.svg); + repeat: no-repeat; + size: 100% auto; + position: 0 0.2em; + }; +} + +.error500 { + .error-bg { + @include error-bg-gradient($error-sand); + } + + .hill-left { + background: { + image: url(/images/error/500-hills-left.svg); + size: auto 10vh; + position: 0 58%; + }; + + @media #{$medium-up} { + background-size: 38vw auto; + } + } + + .hill-right { + @media #{$medium-up} { + background: { + image: url(/images/error/500-hills-right.svg); + size: 38vw auto; + position: 99% 59%; + }; + } + } + + .shadow-left { + background: { + image: url(/images/error/500-hills-shade-left.svg); + size: 24vw auto; + position: 6% 72%; + }; + } + + .shadow-right { + background: { + image: url(/images/error/500-hills-shade-right.svg); + size: 17vw auto; + position: 95% 79%; + }; + } + + .road { + background: { + image: url(/images/error/500-road.svg); + size: auto 27vh; + position: 42% 78%; + }; + + @media #{$medium-up} { + background: { + size: auto 40vh; + position: 42% 91.3%; + }; + } + } +} + +.error404 { + .error-bg { + @include error-bg-gradient($error-hill-grey); + } + + .hill-left { + @media #{$medium-up} { + background: { + image: url(/images/error/404-hills-left.svg); + size: auto 25vh; + position: 0 58%; + }; + } + } + + .hill-right { + background: { + image: url(/images/error/404-hills-right.svg); + size: auto 20vw; + position: 99% 60%; + }; + + @media #{$medium-up} { + background-size: 50vw auto; + } + } + + .error-excavator { + background: { + image: url(/images/error/excavator.svg); + size: auto 25vh; + position: 71% 83%; + }; + } + + .error-travis { + background: { + image: url(/images/error/pensive-travis.svg); + size: auto 60vh; + position: 34% 100%; + }; + + @media #{$medium-up} { + background-size: auto 50vh; + } + + @media #{$large-up} { + background-size: auto 60vh; + } + } +} + +.maintenance { + .maintenance-bg { + @include error-bg-gradient($maintenance-grass); + } + + .hill-left { + background: { + image: url(/images/error/maintenance-hills-left.svg); + size: 80vw auto; + position: 0 58%; + }; + + @media #{$medium-up} { + background-size: 58vw auto; + } + + @media #{$large-up} { + bakground-size: 50vw auto; + } + } + + .hill-right { + @media #{$medium-up} { + background: { + image: url(/images/error/maintenance-hills-right.svg); + size: 38vw auto; + position: 99% 59%; + }; + } + } + + .shadow-left { + background: { + image: url(/images/error/maintenance-grass-shade-left.svg); + size: 24vw auto; + position: 6% 73%; + }; + } + + .shadow-right { + background: { + image: url(/images/error/maintenance-grass-shade-right.svg); + size: 17vw auto; + position: 95% 79%; + }; + } + + .maintenance-tractor { + background: { + image: url(/images/error/maintenance-tractor.svg); + size: 87vw auto; + position: 63% 87%; + }; + + @media #{$medium-up} { + background: { + size: auto 44vh; + position: 63% 83%; + }; + } + } +} diff --git a/app/styles/app/layouts/features.sass b/app/styles/app/layouts/features.sass deleted file mode 100644 index bf5fab9692..0000000000 --- a/app/styles/app/layouts/features.sass +++ /dev/null @@ -1,69 +0,0 @@ -.layout-features - background: white - -.features-hero - padding-top: 2em - margin-bottom: 3em - -.feature-name - display: inline-block - margin: 0 - vertical-align: middle - small - margin-left: .5em - font-size: .7em - +linkStyle - -.features-list - padding: 0 - margin: 0 - list-style: none - @media #{$medium-up} - width: 54% - - .feature - margin-bottom: 3em - - -.travis-pride - .top - background: linear-gradient(to bottom, #e2453c 0%, #e07e39 16%, #e5d667 32%, #51b95b 48%, #1e72b7 66%, #6f5ba7 86%) no-repeat - .navigation-anchor - color: white - .navigation-nested - background: linear-gradient(to top, #e2453c 0%, #e07e39 16%, #e5d667 32%, #51b95b 48%, #1e72b7 66%, #6f5ba7 86%) no-repeat - a - color: white - &:hover, - &:active - background-color: rgba(255, 255, 255, 0.3) - .icon-broadcast:not(.warning):not(.announcement), - +colorSVG(white) - .broadcasts - @media #{$small-only} - &:after - left: 107px - @media #{$medium-up} - left: 115px - - .logo - width: 70px - a - background: - image: url(/images/logos/TravisCI-Mascot-pride.svg) - repeat: no-repeat - size: 50px - position: center - color: transparent - transition: transform 200ms ease - &:hover, - &:active - transform: rotateY(180deg) - background: - image: url(/images/logos/Tessa-pride.svg) - - -.travis-comicsans - * - font-family: Comic Sans, Comic Sans MS, sans-serif !important - letter-spacing: -1.1px diff --git a/app/styles/app/layouts/features.scss b/app/styles/app/layouts/features.scss new file mode 100644 index 0000000000..62fdd23b45 --- /dev/null +++ b/app/styles/app/layouts/features.scss @@ -0,0 +1,104 @@ +.layout-features { + background: white; +} + +.features-hero { + padding-top: 2em; + margin-bottom: 3em; +} + +.feature-name { + display: inline-block; + margin: 0; + vertical-align: middle; + + small { + margin-left: 0.5em; + font-size: 0.7em; + } + + @include linkStyle; +} + +.features-list { + padding: 0; + margin: 0; + list-style: none; + + @media #{$medium-up} { + width: 54%; + } + + .feature { + margin-bottom: 3em; + } +} + +.travis-pride { + .top { + background: linear-gradient(to bottom, #e2453c 0%, #e07e39 16%, #e5d667 32%, #51b95b 48%, #1e72b7 66%, #6f5ba7 86%) no-repeat; + } + + .navigation-anchor { + color: white; + } + + .navigation-nested { + background: linear-gradient(to top, #e2453c 0%, #e07e39 16%, #e5d667 32%, #51b95b 48%, #1e72b7 66%, #6f5ba7 86%) no-repeat; + + a { + color: white; + + &:hover, + &:active { + background-color: rgba(255, 255, 255, 0.3); + } + } + } + + .icon-broadcast:not(.warning):not(.announcement) { + @include colorSVG(white); + } + + .broadcasts { + @media #{$small-only} { + &:after { + left: 107px; + } + } + + @media #{$medium-up} { + left: 115px; + } + } + + .logo { + width: 70px; + + a { + background: { + image: url(/images/logos/TravisCI-Mascot-pride.svg); + repeat: no-repeat; + size: 50px; + position: center; + color: transparent; + }; + transition: transform 200ms ease; + + &:hover, + &:active { + transform: rotateY(180deg); + background: { + image: url(/images/logos/Tessa-pride.svg); + }; + } + } + } +} + +.travis-comicsans { + * { + font-family: Comic Sans, Comic Sans MS, sans-serif !important; + letter-spacing: -1.1px; + } +} diff --git a/app/styles/app/layouts/footer.sass b/app/styles/app/layouts/footer.sass deleted file mode 100644 index 53ba7e813a..0000000000 --- a/app/styles/app/layouts/footer.sass +++ /dev/null @@ -1,75 +0,0 @@ -.footer - position: relative - padding : 20px 0 - background-color : $pebble-grey - font-size : 12px - line-height : 22px - color: $asphalt-grey - - a - display: inline-block - vertical-align: middle - color: $asphalt-grey - text-decoration: none - &:hover, - &:active - text-decoration : underline - - ul - padding: 0 - margin: 0 - list-style: none - - .inner - display: flex - flex-flow: row wrap - justify-content: space-between - align-items: flex-start - max-width: 1024px - margin: auto - - .footer-elem - flex: 1 0 70% - margin-left: 1em - @media #{$medium-up} - .footer-elem - flex: 0 1 16% - margin-left: 1em - &:first-of-type - flex: 1 1 30% - margin-left: 0 - -.footer-title - font-size : 15px - margin : 0 0 10px 0 - padding-top : 6px - font-weight : 400 - color : $cement-grey - border-top : solid 4px rgba($cement-grey, 0.15) - -.travis-footer - width: 100% - height: 3.5rem - background-repeat: no-repeat - opacity: 0.4 - .travis-logo - height: 49px - -.status-circle - display : inline-block - height : 11px - width : 11px - text-indent : -9999px - margin-right : 5px - border-radius: 100px - vertical-align: middle - &.none - background: $turf-green - &.maintenance - background: $dozer-yellow - &.degraded - background: $dozer-yellow - &.minor - background: mix($brick-red, $dozer-yellow) - &.major - background: $brick-red diff --git a/app/styles/app/layouts/footer.scss b/app/styles/app/layouts/footer.scss new file mode 100644 index 0000000000..dae53c9cc4 --- /dev/null +++ b/app/styles/app/layouts/footer.scss @@ -0,0 +1,102 @@ +.footer { + position: relative; + padding: 20px 0; + background-color: $pebble-grey; + font-size: 12px; + line-height: 22px; + color: $asphalt-grey; + + a { + display: inline-block; + vertical-align: middle; + color: $asphalt-grey; + text-decoration: none; + + &:hover, + &:active { + text-decoration: underline; + } + } + + ul { + padding: 0; + margin: 0; + list-style: none; + } + + .inner { + display: flex; + flex-flow: row wrap; + justify-content: space-between; + align-items: flex-start; + max-width: 1024px; + margin: auto; + } + + .footer-elem { + flex: 1 0 70%; + margin-left: 1em; + } + + @media #{$medium-up} { + .footer-elem { + flex: 0 1 16%; + margin-left: 1em; + + &:first-of-type { + flex: 1 1 30%; + margin-left: 0; + } + } + } +} + +.footer-title { + font-size: 15px; + margin: 0 0 10px 0; + padding-top: 6px; + font-weight: 400; + color: $cement-grey; + border-top: solid 4px rgba($cement-grey, 0.15); +} + +.travis-footer { + width: 100%; + height: 3.5rem; + background-repeat: no-repeat; + opacity: 0.4; + + .travis-logo { + height: 49px; + } +} + +.status-circle { + display: inline-block; + height: 11px; + width: 11px; + text-indent: -9999px; + margin-right: 5px; + border-radius: 100px; + vertical-align: middle; + + &.none { + background: $turf-green; + } + + &.maintenance { + background: $dozer-yellow; + } + + &.degraded { + background: $dozer-yellow; + } + + &.minor { + background: mix($brick-red, $dozer-yellow); + } + + &.major { + background: $brick-red; + } +} diff --git a/app/styles/app/layouts/jobs.sass b/app/styles/app/layouts/jobs.sass deleted file mode 100644 index 920d2b467c..0000000000 --- a/app/styles/app/layouts/jobs.sass +++ /dev/null @@ -1,161 +0,0 @@ -.jobs-list - margin: 0 - padding: 0 - list-style: none - font-size: 15px - -.jobs-item - border: 1px solid $cream-dark - margin-bottom: 5px - display: flex - flex-flow: column nowrap - @media #{$medium-up} - flex-flow: row nowrap - @each $state, $colorMap in $stateMap - +colorJobs(map-get($colorMap, color), $state, 3px, map-get($colorMap, color-bg)) - +colorFadeOut($state, map-get($colorMap, color-bg)) - - a - display: block - padding-left: 1em - @media #{$medium-up} - display: flex - flex-flow: row nowrap - flex: 1 0 90% - justify-content: flex-start - align-items: center - height: 34px - - &:hover - a - margin-left: -2px // related to the width given in color jobs - - .repo-main-tools - flex: 0 0 3rem - justify-content: flex-end - align-items: center - -.section-title - font-size: 16px - color: $cement-grey - font-weight: 400 - margin: 3rem 0 1rem - -.stage .section-title - @extend .small-title - -.stage .stage-header - display: flex - justify-content: space-between - - h2 .icon - margin-bottom: 3px - - &.passed h2 - color: $turf-green - +colorSVG($turf-green) - - &.failed, &.errored - h2 - color: $brick-red - +colorSVG($brick-red) - - &.canceled - h2 - color: $cement-grey - +colorSVG($cement-grey) - - .stage-duration - @extend .section-title - width: 13.7rem - padding-left: 0.3rem - - svg - font-size: 15px - -.stage - aside - color: $asphalt-grey - margin-top: 1rem - opacity: 0.5 - -.spaced + .stage - .stage-header h2, .stage-duration - margin-top: 1.5rem - -.job-state - display: inline-block - @media #{$medium-up} - flex: 0 0 2em - -.job-number - display: inline-block - white-space: nowrap - @media #{$medium-up} - flex: 0 0 7em - padding-right: 1em - border-right: 1px solid $cream-dark - -.job-os - position: relative - pointer-events: none - .icon - width: 18px - height: 20px - @media #{$medium-up} - flex: 0 0 3.6em - text-align: center - pointer-events: initial - .icon - padding-left: 0 - text-indent: 999% - white-space: nowrap - overflow: hidden - &.unknown .icon - +colorSVGFill($cement-grey) - -.job-lang - overflow: hidden - @media #{$medium-up} - flex: 1 0 20% - position: relative - padding: 0.3em 0.5em 0.5em 0.7em - align-self: flex-start - white-space: nowrap - overflow: hidden - text-overflow: ellipsis - &:after - @include fadeOut(right, -90deg, white) - top: -1px - -.job-env - @media #{$medium-up} - flex: 1 0 30% - position: relative - max-width: 23em - margin-left: -1em - padding: 0.3em 0.5em 0.5em 1.2em - align-self: flex-start - white-space: nowrap - overflow: hidden - text-overflow: ellipsis - &:after - @include fadeOut(right, -90deg, white) - @media #{$xlarge-up} - flex: 2 0 20em - max-width: 39em - @media #{$xxlarge-up} - max-width: 55em - &.is-empty - opacity: .5 - -.centered - @media #{$xlarge-up} - .job-env - flex: 0 0 21em - .job-lang - flex: 0 0 21em - -.job-duration - flex: 0 0 10rem - white-space: nowrap diff --git a/app/styles/app/layouts/jobs.scss b/app/styles/app/layouts/jobs.scss new file mode 100644 index 0000000000..423d9461a0 --- /dev/null +++ b/app/styles/app/layouts/jobs.scss @@ -0,0 +1,229 @@ +.jobs-list { + margin: 0; + padding: 0; + list-style: none; + font-size: 15px; +} + +.jobs-item { + border: 1px solid $cream-dark; + margin-bottom: 5px; + display: flex; + flex-flow: column nowrap; + + @media #{$medium-up} { + flex-flow: row nowrap; + } + + @each $state, $colorMap in $stateMap { + @include colorJobs(map-get($colorMap, color), $state, 3px, map-get($colorMap, color-bg)); + @include colorFadeOut($state, map-get($colorMap, color-bg)); + } + + a { + display: block; + padding-left: 1em; + + @media #{$medium-up} { + display: flex; + flex-flow: row nowrap; + flex: 1 0 90%; + justify-content: flex-start; + align-items: center; + height: 34px; + } + } + + &:hover { + a { + margin-left: -2px; + } + } + + .repo-main-tools { + flex: 0 0 3rem; + justify-content: flex-end; + align-items: center; + } +} + +.section-title { + font-size: 16px; + color: $cement-grey; + font-weight: 400; + margin: 3rem 0 1rem; +} + +.stage .section-title { + @extend .small-title; +} + +.stage .stage-header { + display: flex; + justify-content: space-between; + + h2 .icon { + margin-bottom: 3px; + } + + &.passed h2 { + color: $turf-green; + + @include colorSVG($turf-green); + } + + &.failed, &.errored { + h2 { + color: $brick-red; + + @include colorSVG($brick-red); + } + } + + &.canceled { + h2 { + color: $cement-grey; + + @include colorSVG($cement-grey); + } + } + + .stage-duration { + @extend .section-title; + + width: 13.7rem; + padding-left: 0.3rem; + + svg { + font-size: 15px; + } + } +} + +.stage { + aside { + color: $asphalt-grey; + margin-top: 1rem; + opacity: 0.5; + } +} + +.spaced + .stage { + .stage-header h2, .stage-duration { + margin-top: 1.5rem; + } +} + +.job-state { + display: inline-block; + + @media #{$medium-up} { + flex: 0 0 2em; + } +} + +.job-number { + display: inline-block; + white-space: nowrap; + + @media #{$medium-up} { + flex: 0 0 7em; + padding-right: 1em; + border-right: 1px solid $cream-dark; + } +} + +.job-os { + position: relative; + pointer-events: none; + + .icon { + width: 18px; + height: 20px; + } + + @media #{$medium-up} { + flex: 0 0 3.6em; + text-align: center; + pointer-events: initial; + + .icon { + padding-left: 0; + text-indent: 999%; + white-space: nowrap; + overflow: hidden; + } + } + + &.unknown .icon { + @include colorSVGFill($cement-grey); + } +} + +.job-lang { + overflow: hidden; + + @media #{$medium-up} { + flex: 1 0 20%; + position: relative; + padding: 0.3em 0.5em 0.5em 0.7em; + align-self: flex-start; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + + &:after { + @include fadeOut(right, -90deg, white); + + top: -1px; + } + } +} + +.job-env { + @media #{$medium-up} { + flex: 1 0 30%; + position: relative; + max-width: 23em; + margin-left: -1em; + padding: 0.3em 0.5em 0.5em 1.2em; + align-self: flex-start; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + + &:after { + @include fadeOut(right, -90deg, white); + } + } + + @media #{$xlarge-up} { + flex: 2 0 20em; + max-width: 39em; + } + + @media #{$xxlarge-up} { + max-width: 55em; + } + + &.is-empty { + opacity: 0.5; + } +} + +.centered { + @media #{$xlarge-up} { + .job-env { + flex: 0 0 21em; + } + + .job-lang { + flex: 0 0 21em; + } + } +} + +.job-duration { + flex: 0 0 10rem; + white-space: nowrap; +} diff --git a/app/styles/app/layouts/log.sass b/app/styles/app/layouts/log.sass deleted file mode 100644 index 3e7286368d..0000000000 --- a/app/styles/app/layouts/log.sass +++ /dev/null @@ -1,243 +0,0 @@ -.log - position: relative - - .log-tail - @include z-index(above-above) - position: absolute - display: block - top: 0 - right: 0 - margin: 10px 10px 0 0 - - .tail-label - display: none - padding: 0.1em 0.5em 0.1em - cursor: pointer - border-radius: 2px - color: $pebble-grey - background-color: $cement-grey - .icon-arrow - +colorSVG(white) - width: 14px - height: 12px - margin-right: 4px - vertical-align: baseline - - &:hover - .tail-label - display: inline-block - .tail-status - display: none - - &.scrolling - position: fixed - right: 32px - - &.bottom - bottom: 45px - top: inherit - - .tail-status - position: relative - display: inline-block - height: 20px - width: 20px - vertical-align: middle - background-color: $cement-grey - border-radius: 50% - &:after - content: "" - position: absolute - top: 0 - right: 0 - left: 0 - bottom: 0 - margin: auto - display: block - height: 10px - width: 10px - background: #f1f1f1 - border-radius: 50% - - &.active .tail-status - background-color: #6b0 - - .to-top - @include z-index(above-above) - position: absolute - display: block - bottom: 2px - right: 2px - - margin-right: 2px - padding-right: 16px - text-align: right - color: #999 - background: inline-image('ui/workers-close.svg') no-repeat right 6px - -.log-header - height: 44px - margin: 0 - padding: .7em .8em .6em - text-align: right - background-color: $log-header-bg - - @media #{$small-only} - display: flex - a - margin-left: .4em - @media #{$small-only} - flex-grow: 1 - -.log-main - display: none - margin-bottom: 5em - &.is-visible - display: block - @media #{$medium-up} - display: block - -[class^="toggle-log-button"] - .icon-eye - vertical-align: middle - display: inline-block - @media #{$medium-up} - display: none !important - -.toggle-log-button - display: block - width: 100% - padding: .3em 1em - border: 1px solid $pebble-grey - border-radius: 2px - color: $asphalt-grey - text-align: center - cursor: pointer - &.hidden - display: none - &:hover, - &:active - border-color: $oxide-blue - color: $oxide-blue - +colorSVG($oxide-blue) -.toggle-log-button--dark - @extend %log-button - width: 50% - background-color: transparent - &:hover, - &:active - background-color: #999a98 - -.log-body - position: relative - - pre - clear: left - min-height: 42px - padding: 15px 0 - color: $pebble-grey - font-family: $font-family-monospace - font-size: $font-size-log - line-height: $line-height-log - white-space: pre-wrap - word-wrap: break-word - background-color: $color-bg-log-fold - counter-reset: line-numbering - margin-top: 0 - - .cut - padding: 20px 15px 0 55px - - .log-line - position: relative - padding: 0 15px 0 62px - margin: 0 - min-height: 19px - &:hover - background-color: $color-bg-log-hover !important - &.highlight - background-color: $color-bg-log-highlight - a - color: white - a - display: inline-block - text-align: right - min-width: 40px - margin-left: -40px - cursor: pointer - text-decoration: none - position: absolute - - &::before - content: counter(line-numbering) - counter-increment: line-numbering - padding-right: 1em - - .fold - position: relative - height: 19px - overflow: hidden - cursor: pointer - &.open - height: auto - - .log-line:first-of-type - padding-right: 190px - - // &.active - .log-line:first-of-type - background: darken($color-bg-log-hover, 10) inline-image('ui/log.fold.open.2.svg') no-repeat 8px 3px - &.highlight - background-color: $color-bg-log-fold-highlight - - &:not(.open) .log-line:first-of-type - visibility: visible - height: auto - min-height: 16px - background-image: inline-image('ui/log.fold.closed.3.svg') - - .fold-name - position: absolute - @include z-index(above) - display: block - top: 1px - right: 85px - padding: 4px 7px 2px 7px - line-height: 10px - font-size: 10px - background-color: #666 - border-radius: 6px - color: #bbb - - .fold-start:not(.fold), - .fold-end - display: none - - .duration - position: absolute - display: block - top: 1px - right: 12px - padding: 4px 7px 2px 7px - line-height: 10px - font-size: 10px - background-color: #666 - border-radius: 6px - color: #bbb - - .loading - padding: 25px 0 0 10px - -.log-notice - background-color: #A6ADAD - color: white - min-height: 70px - line-height: 35px - text-align: center - border-radius: 4px - @media #{$medium-up} - height: 70px - line-height: 70px - -.log-container.hidden - display: none diff --git a/app/styles/app/layouts/log.scss b/app/styles/app/layouts/log.scss new file mode 100644 index 0000000000..9956695fbf --- /dev/null +++ b/app/styles/app/layouts/log.scss @@ -0,0 +1,318 @@ +.log { + position: relative; + + .log-tail { + @include z-index(above-above); + + position: absolute; + display: block; + top: 0; + right: 0; + margin: 10px 10px 0 0; + + .tail-label { + display: none; + padding: 0.1em 0.5em 0.1em; + cursor: pointer; + border-radius: 2px; + color: $pebble-grey; + background-color: $cement-grey; + + .icon-arrow { + @include colorSVG(white); + + width: 14px; + height: 12px; + margin-right: 4px; + vertical-align: baseline; + } + } + + &:hover { + .tail-label { + display: inline-block; + } + + .tail-status { + display: none; + } + } + + &.scrolling { + position: fixed; + right: 32px; + } + + &.bottom { + bottom: 45px; + top: inherit; + } + + .tail-status { + position: relative; + display: inline-block; + height: 20px; + width: 20px; + vertical-align: middle; + background-color: $cement-grey; + border-radius: 50%; + + &:after { + content: ""; + position: absolute; + top: 0; + right: 0; + left: 0; + bottom: 0; + margin: auto; + display: block; + height: 10px; + width: 10px; + background: #f1f1f1; + border-radius: 50%; + } + } + + &.active .tail-status { + background-color: #6b0; + } + } + + .to-top { + @include z-index(above-above); + + position: absolute; + display: block; + bottom: 2px; + right: 2px; + margin-right: 2px; + padding-right: 16px; + text-align: right; + color: #999; + background: inline-image("ui/workers-close.svg") no-repeat right 6px; + } +} + +.log-header { + height: 44px; + margin: 0; + padding: 0.7em 0.8em 0.6em; + text-align: right; + background-color: $log-header-bg; + + @media #{$small-only} { + display: flex; + } + + a { + margin-left: 0.4em; + + @media #{$small-only} { + flex-grow: 1; + } + } +} + +.log-main { + display: none; + margin-bottom: 5em; + + &.is-visible { + display: block; + } + + @media #{$medium-up} { + display: block; + } +} + +[class^="toggle-log-button"] { + .icon-eye { + vertical-align: middle; + display: inline-block; + } + + @media #{$medium-up} { + display: none !important; + } +} + +.toggle-log-button { + display: block; + width: 100%; + padding: 0.3em 1em; + border: 1px solid $pebble-grey; + border-radius: 2px; + color: $asphalt-grey; + text-align: center; + cursor: pointer; + + &.hidden { + display: none; + } + + &:hover, + &:active { + border-color: $oxide-blue; + color: $oxide-blue; + + @include colorSVG($oxide-blue); + } +} + +.toggle-log-button--dark { + @extend %log-button; + + width: 50%; + background-color: transparent; + + &:hover, + &:active { + background-color: #999a98; + } +} + +.log-body { + position: relative; + + pre { + clear: left; + min-height: 42px; + padding: 15px 0; + color: $pebble-grey; + font-family: $font-family-monospace; + font-size: $font-size-log; + line-height: $line-height-log; + white-space: pre-wrap; + word-wrap: break-word; + background-color: $color-bg-log-fold; + counter-reset: line-numbering; + margin-top: 0; + } + + .cut { + padding: 20px 15px 0 55px; + } + + .log-line { + position: relative; + padding: 0 15px 0 62px; + margin: 0; + min-height: 19px; + + &:hover { + background-color: $color-bg-log-hover !important; + } + + &.highlight { + background-color: $color-bg-log-highlight; + + a { + color: white; + } + } + + a { + display: inline-block; + text-align: right; + min-width: 40px; + margin-left: -40px; + cursor: pointer; + text-decoration: none; + position: absolute; + + &::before { + content: counter(line-numbering); + counter-increment: line-numbering; + padding-right: 1em; + } + } + } + + .fold { + position: relative; + height: 19px; + overflow: hidden; + cursor: pointer; + + &.open { + height: auto; + } + + .log-line:first-of-type { + padding-right: 190px; + } + + // &.active + .log-line:first-of-type { + background: darken($color-bg-log-hover, 10) inline-image("ui/log.fold.open.2.svg") no-repeat 8px 3px; + + &.highlight { + background-color: $color-bg-log-fold-highlight; + } + } + + &:not(.open) .log-line:first-of-type { + visibility: visible; + height: auto; + min-height: 16px; + background-image: inline-image("ui/log.fold.closed.3.svg"); + } + + .fold-name { + position: absolute; + + @include z-index(above); + + display: block; + top: 1px; + right: 85px; + padding: 4px 7px 2px 7px; + line-height: 10px; + font-size: 10px; + background-color: #666; + border-radius: 6px; + color: #bbb; + } + } + + .fold-start:not(.fold), + .fold-end { + display: none; + } + + .duration { + position: absolute; + display: block; + top: 1px; + right: 12px; + padding: 4px 7px 2px 7px; + line-height: 10px; + font-size: 10px; + background-color: #666; + border-radius: 6px; + color: #bbb; + } + + .loading { + padding: 25px 0 0 10px; + } +} + +.log-notice { + background-color: #A6ADAD; + color: white; + min-height: 70px; + line-height: 35px; + text-align: center; + border-radius: 4px; + + @media #{$medium-up} { + height: 70px; + line-height: 70px; + } +} + +.log-container.hidden { + display: none; +} diff --git a/app/styles/app/layouts/missing-notice.sass b/app/styles/app/layouts/missing-notice.sass deleted file mode 100644 index 31e8a41c0d..0000000000 --- a/app/styles/app/layouts/missing-notice.sass +++ /dev/null @@ -1,26 +0,0 @@ -.missing-notice - text-align: center - .button - font-size: 16px - -.page-title - font-size: 36px - font-weight: 200 - line-height: 1 - margin-bottom: .5em - -.page-notice - font-size: $font-size-m - +linkStyle - -.page-graphic - height: 180px - width: 310px - margin: 5.75rem auto 0 - padding: 0 2em - line-height: 0 - border-bottom: 1px solid #DEDCDB - svg - width: 100% - height: 100% - diff --git a/app/styles/app/layouts/missing-notice.scss b/app/styles/app/layouts/missing-notice.scss new file mode 100644 index 0000000000..501d09681a --- /dev/null +++ b/app/styles/app/layouts/missing-notice.scss @@ -0,0 +1,34 @@ +.missing-notice { + text-align: center; + + .button { + font-size: 16px; + } +} + +.page-title { + font-size: 36px; + font-weight: 200; + line-height: 1; + margin-bottom: 0.5em; +} + +.page-notice { + font-size: $font-size-m; + + @include linkStyle; +} + +.page-graphic { + height: 180px; + width: 310px; + margin: 5.75rem auto 0; + padding: 0 2em; + line-height: 0; + border-bottom: 1px solid #DEDCDB; + + svg { + width: 100%; + height: 100%; + } +} diff --git a/app/styles/app/layouts/owner.sass b/app/styles/app/layouts/owner.sass deleted file mode 100644 index 61d6b1f5db..0000000000 --- a/app/styles/app/layouts/owner.sass +++ /dev/null @@ -1,65 +0,0 @@ -.owner-header - display: flex - flex-flow: row wrap - justify-content: flex-start - align-items: center - margin-bottom: 3rem - .owner-title - margin: .3em 0 .2em - font-size: 36px - font-weight: 400 - line-height: .9 - @media #{$medium-up} - white-space: nowrap - .owner-handle - margin: 0 - font-size: $font-size-ml - a:hover - text-decoration: underline - svg - +colorSVGFill(rgba(black, 0.2)) - img - border-radius: 50% - background-color: $pebble-grey - -.owner-avatar - flex: 0 0 20% - @media #{$medium-up} - flex: 0 0 17% - .avatar - width: 125px - height: 125px - -.owner-info - flex: 1 0 75% - @media #{$medium-up} - flex: 1 0 80% - position: relative - overflow: hidden - &:after - content: "" - @include fadeOut(right, -90deg, white) - -.owner-tiles - padding: 0 - list-style-type: none - - .build-status - text-transform: capitalize - -.owner-tile - padding: .5em 0 - - @media #{$medium-up} - & > div:first-of-type - flex: 0 0 30% - padding-left: 1em - & > div:nth-of-type(2) - flex: 0 0 13% - & > div:nth-of-type(3) - flex: 0 0 13% - & > div:nth-of-type(4) - flex: 0 0 12% - margin-right: 2em - & > div:nth-of-type(5) - flex: 0 0 24% diff --git a/app/styles/app/layouts/owner.scss b/app/styles/app/layouts/owner.scss new file mode 100644 index 0000000000..ddd71569ad --- /dev/null +++ b/app/styles/app/layouts/owner.scss @@ -0,0 +1,103 @@ +.owner-header { + display: flex; + flex-flow: row wrap; + justify-content: flex-start; + align-items: center; + margin-bottom: 3rem; + + .owner-title { + margin: 0.3em 0 0.2em; + font-size: 36px; + font-weight: 400; + line-height: 0.9; + + @media #{$medium-up} { + white-space: nowrap; + } + } + + .owner-handle { + margin: 0; + font-size: $font-size-ml; + + a:hover { + text-decoration: underline; + } + + svg { + @include colorSVGFill(rgba(black, 0.2)); + } + } + + img { + border-radius: 50%; + background-color: $pebble-grey; + } +} + +.owner-avatar { + flex: 0 0 20%; + + @media #{$medium-up} { + flex: 0 0 17%; + } + + .avatar { + width: 125px; + height: 125px; + } +} + +.owner-info { + flex: 1 0 75%; + + @media #{$medium-up} { + flex: 1 0 80%; + } + + position: relative; + overflow: hidden; + + &:after { + content: ""; + + @include fadeOut(right, -90deg, white); + } +} + +.owner-tiles { + padding: 0; + list-style-type: none; + + .build-status { + text-transform: capitalize; + } +} + +.owner-tile { + padding: 0.5em 0; + + @media #{$medium-up} { + & > div:first-of-type { + flex: 0 0 30%; + padding-left: 1em; + } + + & > div:nth-of-type(2) { + flex: 0 0 13%; + } + + & > div:nth-of-type(3) { + flex: 0 0 13%; + } + + & > div:nth-of-type(4) { + flex: 0 0 12%; + margin-right: 2em; + } + + & > div:nth-of-type(5) { + flex: 0 0 24%; + } + } +} diff --git a/app/styles/app/layouts/profile.sass b/app/styles/app/layouts/profile.sass deleted file mode 100644 index 6d4609188b..0000000000 --- a/app/styles/app/layouts/profile.sass +++ /dev/null @@ -1,186 +0,0 @@ -$profile-breakpoint: 600px - -.profile-page - display: flex - padding-top: 20px - @media (max-width: $profile-breakpoint) - flex-flow: column-reverse - -.profile-main - flex-grow: 1 - -.profile-aside - flex: 0 0 180px - margin-right: 55px - @media #{$medium-up} - flex: 0 0 290px - @media (max-width: $profile-breakpoint) - margin-top: 55px - @media (min-width: $profile-breakpoint) - display: flex - flex-flow: column wrap - .profile-user - order: 1 - .profile-betafeatures - order: 2 - .profile-orgs - order: 3 - .profile-additional - order: 4 - ul - padding: 0 - margin: 0 - list-style-type: none - h2 - font-size: $font-size-sm - border-bottom: solid 2px $pebble-grey - -.profile-header - display: flex - justify-content: space-between - align-items: center - .h2--grey - margin-bottom: 0 - line-heigth: 1 - -.profile-getstarted - display: flex - flex-flow: column wrap - margin: 0 0 3rem - padding: 1em - list-style: none - border-radius: 4px - @media #{$medium} - flex-flow: row nowrap - justify-content: space-around - li - text-align: center - figure - margin: 0 - figcaption - width: 90% - margin: auto - padding: 0 1em 0 2.8em - @media #{$medium-up} - text-align: left - -.profile-repositorylist - @include resetul - font-size: $font-size-m - dispay: flex - flex-flow: column wrap - li - display: flex - flex-flow: row wrap - margin-bottom: .8em - -.profile-settings - display: flex - align-items: center - -.profile-settings .icon-disabled - +colorSVG(rgba(black, 0.2)) - -.profile-repo - position: relative - flex: 1 - padding: .25em .5em .3em - white-space: nowrap - overflow: hidden - border-radius: 2px - - .sync-spinner - vertical-align: top - &.admin - &:hover - background-color: $pebble-grey - &:after - content: "" - @include fadeOut(right, -90deg, $pebble-grey) - .active &:hover - background-color: $agate-blue - &:after - content: "" - @include fadeOut(right, -90deg, $agate-blue) - &.non-admin - color: rgba(black, 0.45) - &:hover - background-color: transparentize($pebble-grey, 0.5) - &:after - content: "" - @include fadeOut(right, -90deg, $pebble-grey) - .active &:hover - background-color: transparentize($agate-blue, 0.5) - &:after - content: "" - @include fadeOut(right, -90deg, $agate-blue) - -.profile-additional - margin-top: 20px - border-top: solid 2px $pebble-grey -.profile-text, -.profile-additional - +linkStyle - -.repositories-error - width: 100% - p - position: relative - padding: .7em em .7em 0.5em - color: $brick-red - background-color: $quartz-red - a - color: $brick-red - text-decoration: underline - &:after - content: "" - position: absolute - top: -0.5em - left: 1.5em - width: 1.2em - height: 1.2em - background: $quartz-red - transform: rotate(45deg) - .close - position: absolute - top: .5em - right: 0 - line-height: 1 - -.profile-token-toggle - .icon-seemore - vertical-align: middle - &:hover - path, ellipse - stroke: $asphalt-grey - &.is-visible - .icon-seemore - ellipse - fill: $cement-grey - &:hover - ellipse - fill: $asphalt-grey - -.profile-repositories-filter - margin-bottom: 1.5em - .search - padding: 0 0.5em 0 2.1em - border: 1px solid $pebble-grey - width: 40% - border-radius: 2px - width: 100% - max-width: 400px - background: url(/images/stroke-icons/icon-filter.svg) no-repeat scroll - background-size: auto 50% - background-position: 0.5em center - height: 2.1em - box-sizing: content-box - font-size: $font-size-sm - -webkit-appearance: none - -webkit-appearance: textfield - &::-webkit-search-decoration - -webkit-appearance: none - &::placeholder - color: rgba($cement-grey, .6) - padding: 0 - text-indent: 0 diff --git a/app/styles/app/layouts/profile.scss b/app/styles/app/layouts/profile.scss new file mode 100644 index 0000000000..81b7c8d496 --- /dev/null +++ b/app/styles/app/layouts/profile.scss @@ -0,0 +1,285 @@ +$profile-breakpoint: 600px; + +.profile-page { + display: flex; + padding-top: 20px; + + @media (max-width: $profile-breakpoint) { + flex-flow: column-reverse; + } +} + +.profile-main { + flex-grow: 1; +} + +.profile-aside { + flex: 0 0 180px; + margin-right: 55px; + + @media #{$medium-up} { + flex: 0 0 290px; + } + + @media (max-width: $profile-breakpoint) { + margin-top: 55px; + } + + @media (min-width: $profile-breakpoint) { + display: flex; + flex-flow: column wrap; + + .profile-user { + order: 1; + } + + .profile-betafeatures { + order: 2; + } + + .profile-orgs { + order: 3; + } + + .profile-additional { + order: 4; + } + } + + ul { + padding: 0; + margin: 0; + list-style-type: none; + } + + h2 { + font-size: $font-size-sm; + border-bottom: solid 2px $pebble-grey; + } +} + +.profile-header { + display: flex; + justify-content: space-between; + align-items: center; + + .h2--grey { + margin-bottom: 0; + line-heigth: 1; + } +} + +.profile-getstarted { + display: flex; + flex-flow: column wrap; + margin: 0 0 3rem; + padding: 1em; + list-style: none; + border-radius: 4px; + + @media #{$medium} { + flex-flow: row nowrap; + justify-content: space-around; + } + + li { + text-align: center; + } + + figure { + margin: 0; + } + + figcaption { + width: 90%; + margin: auto; + padding: 0 1em 0 2.8em; + + @media #{$medium-up} { + text-align: left; + } + } +} + +.profile-repositorylist { + @include resetul; + + font-size: $font-size-m; + dispay: flex; + flex-flow: column wrap; + + li { + display: flex; + flex-flow: row wrap; + margin-bottom: 0.8em; + } +} + +.profile-settings { + display: flex; + align-items: center; +} + +.profile-settings .icon-disabled { + @include colorSVG(rgba(black, 0.2)); +} + +.profile-repo { + position: relative; + flex: 1; + padding: 0.25em 0.5em 0.3em; + white-space: nowrap; + overflow: hidden; + border-radius: 2px; + + .sync-spinner { + vertical-align: top; + } + + &.admin { + &:hover { + background-color: $pebble-grey; + + &:after { + content: ""; + + @include fadeOut(right, -90deg, $pebble-grey); + } + } + + .active &:hover { + background-color: $agate-blue; + + &:after { + content: ""; + + @include fadeOut(right, -90deg, $agate-blue); + } + } + } + + &.non-admin { + color: rgba(black, 0.45); + + &:hover { + background-color: transparentize($pebble-grey, 0.5); + + &:after { + content: ""; + + @include fadeOut(right, -90deg, $pebble-grey); + } + } + + .active &:hover { + background-color: transparentize($agate-blue, 0.5); + + &:after { + content: ""; + + @include fadeOut(right, -90deg, $agate-blue); + } + } + } +} + +.profile-additional { + margin-top: 20px; + border-top: solid 2px $pebble-grey; +} + +.profile-text, +.profile-additional { + @include linkStyle; +} + +.repositories-error { + width: 100%; + + p { + position: relative; + padding: 0.7em em 0.7em 0.5em; + color: $brick-red; + background-color: $quartz-red; + + a { + color: $brick-red; + text-decoration: underline; + } + + &:after { + content: ""; + position: absolute; + top: -0.5em; + left: 1.5em; + width: 1.2em; + height: 1.2em; + background: $quartz-red; + transform: rotate(45deg); + } + } + + .close { + position: absolute; + top: 0.5em; + right: 0; + line-height: 1; + } +} + +.profile-token-toggle { + .icon-seemore { + vertical-align: middle; + + &:hover { + path, ellipse { + stroke: $asphalt-grey; + } + } + } + + &.is-visible { + .icon-seemore { + ellipse { + fill: $cement-grey; + } + + &:hover { + ellipse { + fill: $asphalt-grey; + } + } + } + } +} + +.profile-repositories-filter { + margin-bottom: 1.5em; + + .search { + padding: 0 0.5em 0 2.1em; + border: 1px solid $pebble-grey; + width: 40%; + border-radius: 2px; + width: 100%; + max-width: 400px; + background: url(/images/stroke-icons/icon-filter.svg) no-repeat scroll; + background-size: auto 50%; + background-position: 0.5em center; + height: 2.1em; + box-sizing: content-box; + font-size: $font-size-sm; + -webkit-appearance: none; + -webkit-appearance: textfield; + + &::-webkit-search-decoration { + -webkit-appearance: none; + } + + &::placeholder { + color: rgba($cement-grey, 0.6); + padding: 0; + text-indent: 0; + } + } +} diff --git a/app/styles/app/layouts/pull-requests.sass b/app/styles/app/layouts/pull-requests.sass deleted file mode 100644 index caa8a1dc43..0000000000 --- a/app/styles/app/layouts/pull-requests.sass +++ /dev/null @@ -1,68 +0,0 @@ -.build-list - padding: 0 - margin: 0 - list-style: none - -.pr-row - @media #{$small-only} - .row-item.actions ~ .row-item - display: none - - @media #{$medium-up} - display: flex - justify-content: flex-start - flex-flow: row nowrap - align-items: center - - .two-line - padding: 0 - margin: .4em 0 - white-space: nowrap - .row-item:not(.build-info) - display: block - - .row-committer - padding-left: 1.6em - margin-bottom: 0 - - .build-info - display: flex - flex-flow: row wrap - align-items: baseline - padding-left: 0.4em - - .row-branch - flex: 0 0 30% - position: relative - overflow: hidden - &:after - content: "" - +fadeOut(right, -90deg, white) - &:hover - &:after - content: none - a - background-color: white - .row-message - padding-left: 1.6em - flex: 0 0 70% - overflow: hidden - position: relative - &:after - +fadeOut(right, -90deg, white) - - .two-line:first-of-type - flex: 0 0 50% - padding-left: .5em - border-right: 1px solid $cream-dark - .two-line:nth-of-type(2) - flex: 0 0 22% - margin-left: 1em - .two-line:nth-of-type(3) - flex: 0 0 22% - .two-line:last-of-type - flex: 0 0 2em - - .row-item.actions - overflow: visible - transform: translate(0, -3px) diff --git a/app/styles/app/layouts/pull-requests.scss b/app/styles/app/layouts/pull-requests.scss new file mode 100644 index 0000000000..cce75be726 --- /dev/null +++ b/app/styles/app/layouts/pull-requests.scss @@ -0,0 +1,99 @@ +.build-list { + padding: 0; + margin: 0; + list-style: none; +} + +.pr-row { + @media #{$small-only} { + .row-item.actions ~ .row-item { + display: none; + } + } + + @media #{$medium-up} { + display: flex; + justify-content: flex-start; + flex-flow: row nowrap; + align-items: center; + + .two-line { + padding: 0; + margin: 0.4em 0; + white-space: nowrap; + + .row-item:not(.build-info) { + display: block; + } + } + + .row-committer { + padding-left: 1.6em; + margin-bottom: 0; + } + + .build-info { + display: flex; + flex-flow: row wrap; + align-items: baseline; + padding-left: 0.4em; + } + + .row-branch { + flex: 0 0 30%; + position: relative; + overflow: hidden; + + &:after { + content: ""; + + @include fadeOut(right, -90deg, white); + } + + &:hover { + &:after { + content: none; + } + + a { + background-color: white; + } + } + } + + .row-message { + padding-left: 1.6em; + flex: 0 0 70%; + overflow: hidden; + position: relative; + + &:after { + @include fadeOut(right, -90deg, white); + } + } + + .two-line:first-of-type { + flex: 0 0 50%; + padding-left: 0.5em; + border-right: 1px solid $cream-dark; + } + + .two-line:nth-of-type(2) { + flex: 0 0 22%; + margin-left: 1em; + } + + .two-line:nth-of-type(3) { + flex: 0 0 22%; + } + + .two-line:last-of-type { + flex: 0 0 2em; + } + + .row-item.actions { + overflow: visible; + transform: translate(0, -3px); + } + } +} diff --git a/app/styles/app/layouts/repo.sass b/app/styles/app/layouts/repo.sass deleted file mode 100644 index 6805054199..0000000000 --- a/app/styles/app/layouts/repo.sass +++ /dev/null @@ -1,38 +0,0 @@ -.repo-header - header - @media #{$medium-up} - display: flex - flex-flow: row wrap - justify-content: flex-start - align-items: center - - .repo-title - margin: 0 - font-size: 36px - font-weight: $font-weight-normal - a - color: $asphalt-grey - border-bottom: 2px solid transparent - transition: border-color 100ms ease - &:hover, - &:active - border-color: $asphalt-grey - -.repo-gh - @extend .icon--l - flex: 0 0 30px - margin: 0 1.2em - +colorSVGFill(rgba(black, 0.2)) - -.repo-navigation - margin: 1.9em 0 1.2em - @media #{$medium-up} - display: flex - flex-flow: row-reverse wrap - justify-content: space-between - border-bottom: 2px $pebble-grey solid - - .option-button - width: 10em - .option-dropdown a - padding-left: 2.4em diff --git a/app/styles/app/layouts/repo.scss b/app/styles/app/layouts/repo.scss new file mode 100644 index 0000000000..d9640dd238 --- /dev/null +++ b/app/styles/app/layouts/repo.scss @@ -0,0 +1,55 @@ +.repo-header { + header { + @media #{$medium-up} { + display: flex; + flex-flow: row wrap; + justify-content: flex-start; + align-items: center; + } + } + + .repo-title { + margin: 0; + font-size: 36px; + font-weight: $font-weight-normal; + + a { + color: $asphalt-grey; + border-bottom: 2px solid transparent; + transition: border-color 100ms ease; + + &:hover, + &:active { + border-color: $asphalt-grey; + } + } + } +} + +.repo-gh { + @extend .icon--l; + + flex: 0 0 30px; + margin: 0 1.2em; + + @include colorSVGFill(rgba(black, 0.2)); +} + +.repo-navigation { + margin: 1.9em 0 1.2em; + + @media #{$medium-up} { + display: flex; + flex-flow: row-reverse wrap; + justify-content: space-between; + border-bottom: 2px $pebble-grey solid; + } + + .option-button { + width: 10em; + + .option-dropdown a { + padding-left: 2.4em; + } + } +} diff --git a/app/styles/app/layouts/requests.sass b/app/styles/app/layouts/requests.sass deleted file mode 100644 index de25e85ee7..0000000000 --- a/app/styles/app/layouts/requests.sass +++ /dev/null @@ -1,76 +0,0 @@ -=requestFadeOut($status, $color) - &.highlighted.#{$status} - box-shadow: 0px 0px 3px 3px $color - &:hover - padding-left: .87em - @media #{$medium-up} - &.#{$status}:hover - padding-left: 0 - .status-icon.api - svg - background-color: $color - .fade-out - &:after - @include fadeOut(right, -90deg, $color, 30%) - -.requests - padding: 0 - margin: 0 - list-style: none - -.request-item - @each $state, $key in $requestStatusMap - $colorMap: map-get($stateMap, $key) - +colorJobs(map-get($colorMap, color), $state, 3px, map-get($colorMap, color-bg)) - +requestFadeOut($state, map-get($colorMap, color-bg)) - - position: relative - margin-bottom: 5px - padding-left: 1em - font-size: 15px - border: 1px solid $pebble-grey - strong - margin-right: .5em - font-weight: $font-weight-bold - a:hover, - a:active, - a:focus - text-decoration: underline - - &:hover - padding-left: .87em - - &.highlighted - box-shadow: 0px 0px 3px 3px $haze-yellow - - .request-icon - width: 18px - height: 19px - margin-right: .1rem - - @media #{$medium-up} - display: flex - justify-content: space-between - flex-flow: row nowrap - align-items: center - padding: .3em 0 .3em 2px - white-space: nowrap - &:hover - padding-left: 0.1em - .row-item.fade-out - position: relative - .row-item:first-of-type - flex: 0 0 3em - padding-left: .7em - border-right: 1px solid $cream-dark - .row-item:nth-of-type(2) - flex: 1 0 15% - padding-left: 1em - .row-item:nth-of-type(3) - flex: 0 0 15% - .row-item:nth-of-type(4) - flex: 1 0 30% - .row-item:nth-of-type(5) - flex: 0 0 8% - .row-item:last-of-type - flex: 0 0 20% diff --git a/app/styles/app/layouts/requests.scss b/app/styles/app/layouts/requests.scss new file mode 100644 index 0000000000..e2305379eb --- /dev/null +++ b/app/styles/app/layouts/requests.scss @@ -0,0 +1,117 @@ +@mixin requestFadeOut($status, $color) { + &.highlighted.#{$status} { + box-shadow: 0px 0px 3px 3px $color; + } + + &:hover { + padding-left: 0.87em; + } + + @media #{$medium-up} { + &.#{$status}:hover { + padding-left: 0; + + .status-icon.api { + svg { + background-color: $color; + } + } + + .fade-out { + &:after { + @include fadeOut(right, -90deg, $color, 30%); + } + } + } + } +} + +.requests { + padding: 0; + margin: 0; + list-style: none; +} + +.request-item { + @each $state, $key in $requestStatusMap { + $colorMap: map-get($stateMap, $key); + + @include colorJobs(map-get($colorMap, color), $state, 3px, map-get($colorMap, color-bg)); + @include requestFadeOut($state, map-get($colorMap, color-bg)); + } + + position: relative; + margin-bottom: 5px; + padding-left: 1em; + font-size: 15px; + border: 1px solid $pebble-grey; + + strong { + margin-right: 0.5em; + font-weight: $font-weight-bold; + } + + a:hover, + a:active, + a:focus { + text-decoration: underline; + } + + &:hover { + padding-left: 0.87em; + } + + &.highlighted { + box-shadow: 0px 0px 3px 3px $haze-yellow; + } + + .request-icon { + width: 18px; + height: 19px; + margin-right: 0.1rem; + } + + @media #{$medium-up} { + display: flex; + justify-content: space-between; + flex-flow: row nowrap; + align-items: center; + padding: 0.3em 0 0.3em 2px; + white-space: nowrap; + + &:hover { + padding-left: 0.1em; + } + + .row-item.fade-out { + position: relative; + } + + .row-item:first-of-type { + flex: 0 0 3em; + padding-left: 0.7em; + border-right: 1px solid $cream-dark; + } + + .row-item:nth-of-type(2) { + flex: 1 0 15%; + padding-left: 1em; + } + + .row-item:nth-of-type(3) { + flex: 0 0 15%; + } + + .row-item:nth-of-type(4) { + flex: 1 0 30%; + } + + .row-item:nth-of-type(5) { + flex: 0 0 8%; + } + + .row-item:last-of-type { + flex: 0 0 20%; + } + } +} diff --git a/app/styles/app/layouts/settings.sass b/app/styles/app/layouts/settings.sass deleted file mode 100644 index 153bd13ca6..0000000000 --- a/app/styles/app/layouts/settings.sass +++ /dev/null @@ -1,213 +0,0 @@ -.settings - padding-top: .8em - -.settings-section - padding: 0 0 1em - margin-bottom: 3em - border-bottom: 2px solid $pebble-grey - &:last-of-type - border-bottom: none - .small-title - margin-top: 0 - .switch - div - display: inline-block - -%settings-list - padding: 0 - margin: 0 - list-style: none - li - margin-bottom: 1rem - -.settings-list--columns - @extend %settings-list - li - @media #{$medium-up} - display: inline-block - width: grid-calc(11, 24) - -.settings-list--envvars, .settings-list--crons - @extend %settings-list - -.settings-input - display: inline-block - margin-right: 1.4rem - vertical-align: middle - & + .label - vertical-align: middle - input - width: 80px - font-size: $font-size-s - text-align: center - -.limit-concurrent-builds - input - display: inline-block - width: 3em - height: 30px - margin: 0 .5em - text-align: center - box-shadow: none - -%settings-row - border-radius: 2px - background-color: $pebble-grey - -.settings-envvar, .settings-cron - @extend %settings-row - padding: .4em .5em - -.settings-sshkey - @extend %settings-row - padding: .6em .5em - display: block - margin-bottom: 1rem - overflow: hidden - span - vertical-align: middle - @media #{$medium-up} - overflow: visible - -%settings-name-section - display: inline-block - position: relative - vertical-align: middle - overflow: hidden - white-space: nowrap - color: $asphalt-grey - &:after - content: "" - @include fadeOut(right, -90deg, $pebble-grey) - -.ssh-key-name - @extend %settings-name-section - width: 100% - margin-bottom: 1em - @media #{$medium-up} - width: 32% - margin-bottom: 0 - -.env-var-name - @extend %settings-name-section - width: 100% - margin-bottom: 1em - @media #{$medium-up} - width: grid-calc(6, 12) - margin-bottom: 0 - -%settings-value-section - display: inline-block - vertical-align: middle - overflow: hidden - color: $asphalt-grey - -.ssh-key-value - @extend %settings-value-section - word-break: break-all - @media #{$medium-up} - width: grid-calc(6, 12) - word-break: normal - white-space: nowrap - -$env-var-value-background: lighten($cement-grey, 20) - -.env-var-value - @extend %settings-value-section - background-color: $env-var-value-background - border-radius: 2px - white-space: nowrap - width: 76% - padding: 0.3em 0.7em - input - display: inline-block - width: 100% - border: none - background: transparent - color: $asphalt-grey - font-size: inherit - -.env-var-value - @media #{$medium-up} - width: grid-calc(3, 12) - -.newly-created - animation: haze-fade 2s 3s both - - .env-var-name::after - display: none - - .env-var-value - animation: canary-fade 2s 3s both - -@keyframes canary-fade - 0% - background: $canary-yellow - - 100% - background: $env-var-value-background - -@keyframes haze-fade - 0% - background: $haze-yellow - - 100% - background: $pebble-grey - -%settings-action-section - display: inline-block - position: relative - float: right - width: 24% - vertical-align: middle - text-align: center - @media #{$medium-up} - width: grid-calc(4, 24) - @media #{$xlarge-up} - width: grid-calc(4, 36) - button - &:hover, - &:active - +colorSVG($brick-red) - -.env-var-action - @extend %settings-action-section - a - padding: 1em - -.ssh-key-action - @extend %settings-action-section - margin-top: 1em - @media #{$medium-up} - margin-top: 0 - .icon-delete - margin: .2em auto 0 - .icon-delete-disabled - display: block - margin: .2em auto 0 - -.settings-cron - display: flex - flex-flow: column nowrap - justify-content: space-between - @media #{$medium} - flex-flow: row nowrap - -.cron-job-text - white-space: nowrap - @media #{$medium} - flex: 0 1 14em - position: relative - overflow: hidden - &:after - +fadeOut(right, -90deg, $pebble-grey) - -.cron-job-action - position: relative - text-align: center - @media #{$medium} - flex-basis: 7em - button - &:hover, - &:active - +colorSVG($brick-red) diff --git a/app/styles/app/layouts/settings.scss b/app/styles/app/layouts/settings.scss new file mode 100644 index 0000000000..937bbe5e14 --- /dev/null +++ b/app/styles/app/layouts/settings.scss @@ -0,0 +1,311 @@ +.settings { + padding-top: 0.8em; +} + +.settings-section { + padding: 0 0 1em; + margin-bottom: 3em; + border-bottom: 2px solid $pebble-grey; + + &:last-of-type { + border-bottom: none; + } + + .small-title { + margin-top: 0; + } + + .switch { + div { + display: inline-block; + } + } +} + +%settings-list { + padding: 0; + margin: 0; + list-style: none; + + li { + margin-bottom: 1rem; + } +} + +.settings-list--columns { + @extend %settings-list; + + li { + @media #{$medium-up} { + display: inline-block; + width: grid-calc(11, 24); + } + } +} + +.settings-list--envvars, .settings-list--crons { + @extend %settings-list; +} + +.settings-input { + display: inline-block; + margin-right: 1.4rem; + vertical-align: middle; + + & + .label { + vertical-align: middle; + } + + input { + width: 80px; + font-size: $font-size-s; + text-align: center; + } +} + +.limit-concurrent-builds { + input { + display: inline-block; + width: 3em; + height: 30px; + margin: 0 0.5em; + text-align: center; + box-shadow: none; + } +} + +%settings-row { + border-radius: 2px; + background-color: $pebble-grey; +} + +.settings-envvar, .settings-cron { + @extend %settings-row; + + padding: 0.4em 0.5em; +} + +.settings-sshkey { + @extend %settings-row; + + padding: 0.6em 0.5em; + display: block; + margin-bottom: 1rem; + overflow: hidden; + + span { + vertical-align: middle; + } + + @media #{$medium-up} { + overflow: visible; + } +} + +%settings-name-section { + display: inline-block; + position: relative; + vertical-align: middle; + overflow: hidden; + white-space: nowrap; + color: $asphalt-grey; + + &:after { + content: ""; + + @include fadeOut(right, -90deg, $pebble-grey); + } +} + +.ssh-key-name { + @extend %settings-name-section; + + width: 100%; + margin-bottom: 1em; + + @media #{$medium-up} { + width: 32%; + margin-bottom: 0; + } +} + +.env-var-name { + @extend %settings-name-section; + + width: 100%; + margin-bottom: 1em; + + @media #{$medium-up} { + width: grid-calc(6, 12); + margin-bottom: 0; + } +} + +%settings-value-section { + display: inline-block; + vertical-align: middle; + overflow: hidden; + color: $asphalt-grey; +} + +.ssh-key-value { + @extend %settings-value-section; + + word-break: break-all; + + @media #{$medium-up} { + width: grid-calc(6, 12); + word-break: normal; + white-space: nowrap; + } +} + +$env-var-value-background: lighten($cement-grey, 20); + +.env-var-value { + @extend %settings-value-section; + + background-color: $env-var-value-background; + border-radius: 2px; + white-space: nowrap; + width: 76%; + padding: 0.3em 0.7em; + + input { + display: inline-block; + width: 100%; + border: none; + background: transparent; + color: $asphalt-grey; + font-size: inherit; + } +} + +.env-var-value { + @media #{$medium-up} { + width: grid-calc(3, 12); + } +} + +.newly-created { + animation: haze-fade 2s 3s both; + + .env-var-name::after { + display: none; + } + + .env-var-value { + animation: canary-fade 2s 3s both; + } +} + +@keyframes canary-fade { + 0% { + background: $canary-yellow; + } + + 100% { + background: $env-var-value-background; + } +} + +@keyframes haze-fade { + 0% { + background: $haze-yellow; + } + + 100% { + background: $pebble-grey; + } +} + +%settings-action-section { + display: inline-block; + position: relative; + float: right; + width: 24%; + vertical-align: middle; + text-align: center; + + @media #{$medium-up} { + width: grid-calc(4, 24); + } + + @media #{$xlarge-up} { + width: grid-calc(4, 36); + } + + button { + &:hover, + &:active { + @include colorSVG($brick-red); + } + } +} + +.env-var-action { + @extend %settings-action-section; + + a { + padding: 1em; + } +} + +.ssh-key-action { + @extend %settings-action-section; + + margin-top: 1em; + + @media #{$medium-up} { + margin-top: 0; + } + + .icon-delete { + margin: 0.2em auto 0; + } + + .icon-delete-disabled { + display: block; + margin: 0.2em auto 0; + } +} + +.settings-cron { + display: flex; + flex-flow: column nowrap; + justify-content: space-between; + + @media #{$medium} { + flex-flow: row nowrap; + } +} + +.cron-job-text { + white-space: nowrap; + + @media #{$medium} { + flex: 0 1 14em; + position: relative; + overflow: hidden; + + &:after { + @include fadeOut(right, -90deg, $pebble-grey); + } + } +} + +.cron-job-action { + position: relative; + text-align: center; + + @media #{$medium} { + flex-basis: 7em; + } + + button { + &:hover, + &:active { + @include colorSVG($brick-red); + } + } +} diff --git a/app/styles/app/layouts/sidebar.sass b/app/styles/app/layouts/sidebar.sass deleted file mode 100644 index ac927b9c65..0000000000 --- a/app/styles/app/layouts/sidebar.sass +++ /dev/null @@ -1,53 +0,0 @@ -.tile - +travisColorRows(8px) - height: auto - padding: 0.8em 0.5em 0.8em 1.5em - margin-bottom: .46rem - background-color: white - border-radius: 0 - li:last-child & - margin-bottom: 0 - - h2, p - margin: 0 - font-size: inherit - h2 - position: relative - display: inline-block - margin-bottom: .7em - padding-left: 1px - @media #{$medium-up} - width: 72% - white-space: nowrap - overflow: hidden - &:after - @include fadeOut(right, -90deg, white) - p.tile-title - width: 10% - @media #{$medium-up} - width: 27% - white-space: nowrap - overflow: hidden - a:hover - text-decoration: underline - -#tab_new - a:hover - .icon--plus:after - color: $oxide-blue - -.sidebar-list - margin-top: 1.4rem - ul - @include resetul - border-bottom: .46rem solid $pebble-grey - background-color: $pebble-grey - -.travistab-nav--sidebar - padding: 0 1em - -.sidebar-seperator - width: 90% - margin: 1rem auto - border: none - border-bottom: solid 2px $pebble-grey diff --git a/app/styles/app/layouts/sidebar.scss b/app/styles/app/layouts/sidebar.scss new file mode 100644 index 0000000000..3fef125de7 --- /dev/null +++ b/app/styles/app/layouts/sidebar.scss @@ -0,0 +1,79 @@ +.tile { + @include travisColorRows(8px); + + height: auto; + padding: 0.8em 0.5em 0.8em 1.5em; + margin-bottom: 0.46rem; + background-color: white; + border-radius: 0; + + li:last-child & { + margin-bottom: 0; + } + + h2, p { + margin: 0; + font-size: inherit; + } + + h2 { + position: relative; + display: inline-block; + margin-bottom: 0.7em; + padding-left: 1px; + + @media #{$medium-up} { + width: 72%; + white-space: nowrap; + overflow: hidden; + + &:after { + @include fadeOut(right, -90deg, white); + } + } + } + + p.tile-title { + width: 10%; + + @media #{$medium-up} { + width: 27%; + white-space: nowrap; + overflow: hidden; + } + } + + a:hover { + text-decoration: underline; + } +} + +#tab_new { + a:hover { + .icon--plus:after { + color: $oxide-blue; + } + } +} + +.sidebar-list { + margin-top: 1.4rem; + + ul { + @include resetul; + + border-bottom: 0.46rem solid $pebble-grey; + background-color: $pebble-grey; + } +} + +.travistab-nav--sidebar { + padding: 0 1em; +} + +.sidebar-seperator { + width: 90%; + margin: 1rem auto; + border: none; + border-bottom: solid 2px $pebble-grey; +} diff --git a/app/styles/app/layouts/top.sass b/app/styles/app/layouts/top.sass deleted file mode 100644 index 391d4f24b7..0000000000 --- a/app/styles/app/layouts/top.sass +++ /dev/null @@ -1,67 +0,0 @@ -.top .cta - display: none - font-size: 16px - color: $turf-green - text-align: right - background-color: #fff - border-bottom: 2px solid rgba($cement-grey, 0.2) - border-top: 2px solid rgba($cement-grey, 0.2) - line-height: 2.7em - - p - position: relative - padding: 0 $column-gutter/2 - margin: auto - &:after, - &:before - content: "" - display: block - width: 13px - position: absolute - transform: rotate(45deg) - &:after - height: 13px - background: rgba($cement-grey, 0.1) - top: -0.4rem - right: 4rem - &:before - height: 15px - background: white - top: -0.3rem - right: 57px - @include z-index(above) - - @media #{$medium-up} - display: block - -#auth .top .cta, -.landing-pro .cta - display: none !important - -.top - background-color: $pebble-grey - -.landing-pro .top, -.landing-page .top - background-color: white - border-bottom: 1px solid $pebble-grey - -.topbar - height: $top-height - padding: 0 $column-gutter/2 - clear: both - overflow: hidden - font-size: $font-size-m - color: $asphalt-grey - a - color: $asphalt-grey - &:hover - text-decoration: underline - &.has-autoheight - height: auto - @media #{$medium-up} - &, - &.has-autoheight - position: relative - height: $top-height - overflow: visible diff --git a/app/styles/app/layouts/top.scss b/app/styles/app/layouts/top.scss new file mode 100644 index 0000000000..c6b274ea5a --- /dev/null +++ b/app/styles/app/layouts/top.scss @@ -0,0 +1,90 @@ +.top .cta { + display: none; + font-size: 16px; + color: $turf-green; + text-align: right; + background-color: #fff; + border-bottom: 2px solid rgba($cement-grey, 0.2); + border-top: 2px solid rgba($cement-grey, 0.2); + line-height: 2.7em; + + p { + position: relative; + padding: 0 ($column-gutter / 2); + margin: auto; + + &:after, + &:before { + content: ""; + display: block; + width: 13px; + position: absolute; + transform: rotate(45deg); + } + + &:after { + height: 13px; + background: rgba($cement-grey, 0.1); + top: -0.4rem; + right: 4rem; + } + + &:before { + height: 15px; + background: white; + top: -0.3rem; + right: 57px; + + @include z-index(above); + } + } + + @media #{$medium-up} { + display: block; + } +} + +#auth .top .cta, +.landing-pro .cta { + display: none !important; +} + +.top { + background-color: $pebble-grey; +} + +.landing-pro .top, +.landing-page .top { + background-color: white; + border-bottom: 1px solid $pebble-grey; +} + +.topbar { + height: $top-height; + padding: 0 ($column-gutter / 2); + clear: both; + overflow: hidden; + font-size: $font-size-m; + color: $asphalt-grey; + + a { + color: $asphalt-grey; + + &:hover { + text-decoration: underline; + } + } + + &.has-autoheight { + height: auto; + } + + @media #{$medium-up} { + &, + &.has-autoheight { + position: relative; + height: $top-height; + overflow: visible; + } + } +} diff --git a/app/styles/app/mixins.sass b/app/styles/app/mixins.sass deleted file mode 100644 index 7aba96c043..0000000000 --- a/app/styles/app/mixins.sass +++ /dev/null @@ -1,120 +0,0 @@ -=resetul - margin: 0 - padding: 0 - list-style: none - -=linkStyle($color: $cement-grey) - a - color: inherit - text-decoration: none - border-bottom: 1px solid $color - padding-bottom: 0.1rem - transition: color 200ms ease, border 200ms ease - &:hover, - &:active - color: $color - text-decoration: none - border-color: transparent - -=travisBorder - border-radius: 2px - border: 1px solid $dry-cement - -=fadeOut($position, $angle, $color, $width: 0%) - content: "" - display: block - position: absolute - - @if $position == bottom - bottom: 0 - width: 100% - height: 2em - @else if $position == right - top: 0 - right: 0 - width: 2em - height: 100% - - background: linear-gradient($angle, rgba($color, 1) $width, rgba($color, 0) 100%) - -=colorFadeOut($status, $color) - @media #{$medium-up} - &.#{$status}:hover - .job-lang, - .job-env - &:after - +fadeOut(right, -90deg, $color) - .job-lang:hover, - .job-env:hover - overflow: visible - z-index: 80 - white-space: unset - word-break: break-word - background-color: $color - &:after - content: none !important - -=colorSVG($color) - path, polyline, circle, line, polygon, rect, ellipse - fill: none - stroke: $color - -=colorSVGFill($color) - path, polyline, circle, line, polygon, rect, ellipse - fill: $color - stroke: none - -=colorSVGFull($stroke, $fill) - path, polyline, circle, line, polygon, rect, ellipse - fill: $fill - stroke: $stroke - -=colorStatusIcons($color, $status) - .status-icon.#{$status}, - .request-icon.#{$status} - +colorSVG($color) - -=rowColor($status, $color, $color-bg: $color) - &.#{$status} - .color - color: $color - a - color: $color - text-decoration: none - &:hover, - &:active - border-bottom: 1px solid $color - .status-icon, - .request-icon - +colorSVG($color-bg) - .background - background-color: $color-bg - -=rowBg($width, $status, $color) - &.#{$status} - background: linear-gradient(to right, $color 0%, $color $width, white $width, white 100%) no-repeat - -=colorBg($color, $status, $width, $color2: white) - &.#{$status} - background: linear-gradient(to right, $color 0%, $color $width, $color2 $width, $color2 100%) no-repeat - -=colorLinks($color, $status) - .#{$status}, - .#{$status} a, - color: $color - -=colorJobs($color, $status, $width, $hover, $bg-start: $color) - &.#{$status} - +colorLinks($color, $status) - +colorStatusIcons($color, $status) - +rowColor($status, $color) - &:hover, - &:active - background-color: $hover - border-left: $width solid $color - -=travisColorRows($gradient-width: 10px) - @each $state, $colorMap in $stateMap - +colorBg(map-get($colorMap, gradient), $state, $gradient-width) - +colorLinks(map-get($colorMap, color), $state) - +colorStatusIcons(map-get($colorMap, color), $state) diff --git a/app/styles/app/mixins.scss b/app/styles/app/mixins.scss new file mode 100644 index 0000000000..5888b1d0a0 --- /dev/null +++ b/app/styles/app/mixins.scss @@ -0,0 +1,169 @@ +@mixin resetul { + margin: 0; + padding: 0; + list-style: none; +} + +@mixin linkStyle($color: $cement-grey) { + a { + color: inherit; + text-decoration: none; + border-bottom: 1px solid $color; + padding-bottom: 0.1rem; + transition: color 200ms ease, border 200ms ease; + + &:hover, + &:active { + color: $color; + text-decoration: none; + border-color: transparent; + } + } +} + +@mixin travisBorder { + border-radius: 2px; + border: 1px solid $dry-cement; +} + +@mixin fadeOut($position, $angle, $color, $width: 0%) { + content: ""; + display: block; + position: absolute; + + @if $position == bottom { + bottom: 0; + width: 100%; + height: 2em; + } + @else if $position == right { + top: 0; + right: 0; + width: 2em; + height: 100%; + } + + background: linear-gradient($angle, rgba($color, 1) $width, rgba($color, 0) 100%); +} + +@mixin colorFadeOut($status, $color) { + @media #{$medium-up} { + &.#{$status}:hover { + .job-lang, + .job-env { + &:after { + @include fadeOut(right, -90deg, $color); + } + } + + .job-lang:hover, + .job-env:hover { + overflow: visible; + z-index: 80; + white-space: unset; + word-break: break-word; + background-color: $color; + + &:after { + content: none !important; + } + } + } + } +} + +@mixin colorSVG($color) { + path, polyline, circle, line, polygon, rect, ellipse { + fill: none; + stroke: $color; + } +} + +@mixin colorSVGFill($color) { + path, polyline, circle, line, polygon, rect, ellipse { + fill: $color; + stroke: none; + } +} + +@mixin colorSVGFull($stroke, $fill) { + path, polyline, circle, line, polygon, rect, ellipse { + fill: $fill; + stroke: $stroke; + } +} + +@mixin colorStatusIcons($color, $status) { + .status-icon.#{$status}, + .request-icon.#{$status} { + @include colorSVG($color); + } +} + +@mixin rowColor($status, $color, $color-bg: $color) { + &.#{$status} { + .color { + color: $color; + + a { + color: $color; + text-decoration: none; + + &:hover, + &:active { + border-bottom: 1px solid $color; + } + } + } + + .status-icon, + .request-icon { + @include colorSVG($color-bg); + } + + .background { + background-color: $color-bg; + } + } +} + +@mixin rowBg($width, $status, $color) { + &.#{$status} { + background: linear-gradient(to right, $color 0%, $color $width, white $width, white 100%) no-repeat; + } +} + +@mixin colorBg($color, $status, $width, $color2: white) { + &.#{$status} { + background: linear-gradient(to right, $color 0%, $color $width, $color2 $width, $color2 100%) no-repeat; + } +} + +@mixin colorLinks($color, $status) { + .#{$status}, + .#{$status} a, { + color: $color; + } +} + +@mixin colorJobs($color, $status, $width, $hover, $bg-start: $color) { + &.#{$status} { + @include colorLinks($color, $status); + @include colorStatusIcons($color, $status); + @include rowColor($status, $color); + + &:hover, + &:active { + background-color: $hover; + border-left: $width solid $color; + } + } +} + +@mixin travisColorRows($gradient-width: 10px) { + @each $state, $colorMap in $stateMap { + @include colorBg(map-get($colorMap, gradient), $state, $gradient-width); + @include colorLinks(map-get($colorMap, color), $state); + @include colorStatusIcons(map-get($colorMap, color), $state); + } +} diff --git a/app/styles/app/modules/account.sass b/app/styles/app/modules/account.sass deleted file mode 100644 index ae5a4fcddc..0000000000 --- a/app/styles/app/modules/account.sass +++ /dev/null @@ -1,40 +0,0 @@ -.org-info - display: flex - flex-flow: row nowrap - justify-content: flex-start - padding: .5rem .3rem - > .account-info - margin-left: 1rem - > .account-avatar - border-radius: 50% - border: 2px solid transparent - &:hover - color: $oxide-blue - &.active - background: rgba(181, 214, 217, 0.15) - color: $oxide-blue - border-radius: 4px - > .account-avatar - border: 2px solid $oxide-blue - .user & - align-items: flex-start - .organization & - align-items: center - -.account-name - margin: 0 - font-size: $font-size-sm - font-weight: $font-weight-bold - width: 180px - white-space: nowrap - text-overflow: ellipsis - overflow: hidden - @media #{$medium-up} - width: 240px - - -.account-repo-count, -.account-token - margin: 0 - - diff --git a/app/styles/app/modules/account.scss b/app/styles/app/modules/account.scss new file mode 100644 index 0000000000..b7ae6faacd --- /dev/null +++ b/app/styles/app/modules/account.scss @@ -0,0 +1,56 @@ +.org-info { + display: flex; + flex-flow: row nowrap; + justify-content: flex-start; + padding: 0.5rem 0.3rem; + + > .account-info { + margin-left: 1rem; + } + + > .account-avatar { + border-radius: 50%; + border: 2px solid transparent; + } + + &:hover { + color: $oxide-blue; + } + + &.active { + background: rgba(181, 214, 217, 0.15); + color: $oxide-blue; + border-radius: 4px; + + > .account-avatar { + border: 2px solid $oxide-blue; + } + } + + .user & {} + + align-items: flex-start; + + .organization & {} + + align-items: center; +} + +.account-name { + margin: 0; + font-size: $font-size-sm; + font-weight: $font-weight-bold; + width: 180px; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + + @media #{$medium-up} { + width: 240px; + } +} + +.account-repo-count, +.account-token { + margin: 0; +} diff --git a/app/styles/app/modules/avatar.sass b/app/styles/app/modules/avatar.sass deleted file mode 100644 index a8d0ae1798..0000000000 --- a/app/styles/app/modules/avatar.sass +++ /dev/null @@ -1,59 +0,0 @@ -=absoluteCenter - position: absolute - top: 0 - right: 0 - bottom: 0 - left: 0 - margin: auto - -.avatar - display: inline-block - width: 2.3em - height: 2.3em - position: relative - vertical-align: middle - border-radius: 50% - overflow: hidden - .pseudo-avatar - +absoluteCenter - border: 1px solid $cement-grey - border-radius: 50% - background: white - transform: scale(.95) - &:after - content: attr(data-initials) - +absoluteCenter - color: $cement-grey - font-weight: 600 - text-align: center - font-size: 1.4em - line-height: 1.6 - text-transform: uppercase - - .real-avatar - +absoluteCenter - border-radius: 50% - width: 100% - height: 100% - line-height: 0.9 - overflow: hidden - -.account - .pseudo-avatar ~ .real-avatar - background-color: $pebble-grey - -.profile - .avatar - margin-left: 1em - top: -3px - .pseudo-avatar ~ .real-avatar - background-color: $pebble-grey - -.avatar--small - @extend .avatar - width: 18px - height: 18px - margin-right: .3rem - .pseudo-avatar:after - font-size: 9px - line-height: 16px diff --git a/app/styles/app/modules/avatar.scss b/app/styles/app/modules/avatar.scss new file mode 100644 index 0000000000..15aeca6ee9 --- /dev/null +++ b/app/styles/app/modules/avatar.scss @@ -0,0 +1,80 @@ +@mixin absoluteCenter { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + margin: auto; +} + +.avatar { + display: inline-block; + width: 2.3em; + height: 2.3em; + position: relative; + vertical-align: middle; + border-radius: 50%; + overflow: hidden; + + .pseudo-avatar { + @include absoluteCenter; + + border: 1px solid $cement-grey; + border-radius: 50%; + background: white; + transform: scale(0.95); + + &:after { + content: attr(data-initials); + + @include absoluteCenter; + + color: $cement-grey; + font-weight: 600; + text-align: center; + font-size: 1.4em; + line-height: 1.6; + text-transform: uppercase; + } + } + + .real-avatar { + @include absoluteCenter; + + border-radius: 50%; + width: 100%; + height: 100%; + line-height: 0.9; + overflow: hidden; + } +} + +.account { + .pseudo-avatar ~ .real-avatar { + background-color: $pebble-grey; + } +} + +.profile { + .avatar { + margin-left: 1em; + top: -3px; + } + + .pseudo-avatar ~ .real-avatar { + background-color: $pebble-grey; + } +} + +.avatar--small { + @extend .avatar; + + width: 18px; + height: 18px; + margin-right: 0.3rem; + + .pseudo-avatar:after { + font-size: 9px; + line-height: 16px; + } +} diff --git a/app/styles/app/modules/badge.sass b/app/styles/app/modules/badge.sass deleted file mode 100644 index 9d9d99a472..0000000000 --- a/app/styles/app/modules/badge.sass +++ /dev/null @@ -1,24 +0,0 @@ -.badge - display: inline-block - padding: 0 0.7em - margin: 0 0.6em - border-radius: 15px - font-size: 1rem - color: $dozer-yellow - border: 1px solid $canary-yellow - background: $haze-yellow - - &.message-label - position: relative - top: -1px - - background: $pebble-grey - border: 0 - - padding: 0 0.5em - margin: 0 0.3em 0 0 - - color: $cement-grey - font-size: 0.9rem - font-weight: bold - text-transform: uppercase diff --git a/app/styles/app/modules/badge.scss b/app/styles/app/modules/badge.scss new file mode 100644 index 0000000000..2377af3e8b --- /dev/null +++ b/app/styles/app/modules/badge.scss @@ -0,0 +1,23 @@ +.badge { + display: inline-block; + padding: 0 0.7em; + margin: 0 0.6em; + border-radius: 15px; + font-size: 1rem; + color: $dozer-yellow; + border: 1px solid $canary-yellow; + background: $haze-yellow; + + &.message-label { + position: relative; + top: -1px; + background: $pebble-grey; + border: 0; + padding: 0 0.5em; + margin: 0 0.3em 0 0; + color: $cement-grey; + font-size: 0.9rem; + font-weight: bold; + text-transform: uppercase; + } +} diff --git a/app/styles/app/modules/beta-features-button.sass b/app/styles/app/modules/beta-features-button.sass deleted file mode 100644 index dd4096a5a2..0000000000 --- a/app/styles/app/modules/beta-features-button.sass +++ /dev/null @@ -1,9 +0,0 @@ -.beta-features - vertical-align: middle - background-color: $oxide-blue - color: white - border-radius: 2px - font-size: .9rem - width: 60% - &:hover - background-color: #229191 diff --git a/app/styles/app/modules/beta-features-button.scss b/app/styles/app/modules/beta-features-button.scss new file mode 100644 index 0000000000..960d30bd86 --- /dev/null +++ b/app/styles/app/modules/beta-features-button.scss @@ -0,0 +1,12 @@ +.beta-features { + vertical-align: middle; + background-color: $oxide-blue; + color: white; + border-radius: 2px; + font-size: 0.9rem; + width: 60%; + + &:hover { + background-color: #229191; + } +} diff --git a/app/styles/app/modules/build-header.sass b/app/styles/app/modules/build-header.sass deleted file mode 100644 index ece5f2bd2a..0000000000 --- a/app/styles/app/modules/build-header.sass +++ /dev/null @@ -1,101 +0,0 @@ -.build-header - +travisBorder - +travisColorRows - font-size: 16px - clear: both - - @media #{$medium-up} - display: flex - flex-flow: row no-wrap - justify-content: space-between - - a:hover, - a:active - .inner-underline - text-decoration: underline - -.build-commit, -.build-tools - padding-left: 2rem - -.build-commit - font-size: 16px - overflow: hidden - position: relative - &:after - content: "" - +fadeOut(right, -90deg, white, 20%) - @media #{$medium-up} - flex: 0 1 55% - padding-left: 2.2rem - -.build-tools - padding: 1rem 0 1rem 3rem - overflow: auto - @media #{$medium-up} - flex: 0 0 10rem - padding: 1rem 0 - - .action-button-container + .action-button-container - margin-top: .7rem - - -.build-info - font-size: 15px - padding-left: 2rem - @media #{$medium-up} - flex: 0 1 37% - -.build-title, -.build-status - margin: 1rem 0 - padding-left: 1rem - font-weight: $font-weight-normal - font-size: 16px - -.build-title - .status-icon - margin-left: -1.9rem - margin-right: 0.7rem - @media #{$medium-up} - white-space: nowrap - -.commit-info - font-size: 15px - padding-left: 1rem - -.commit-branch - margin-right: .5em - font-weight: $font-weight-bold - font-size: 16px - -.build-status - padding-left: 0 - -.commit-author - margin: 1rem 0 .7rem - - .avatar--small:first-of-type - margin-left: -2px - - .avatar--small:not(:first-of-type) - margin-left: 20px - -.commit-description - margin: 1rem 0 - @media #{$medium-up} - max-height: 4.5em - position: relative - overflow: hidden - &:after - conent: "" - +fadeOut(bottom, 360deg, white, 5%) - -.list-icon - padding: 0 - margin: 1rem 0 - list-style: none - line-height: 1.7 - white-space: nowrap - .commit-clock - margin-bottom: 1rem diff --git a/app/styles/app/modules/build-header.scss b/app/styles/app/modules/build-header.scss new file mode 100644 index 0000000000..42204ceb34 --- /dev/null +++ b/app/styles/app/modules/build-header.scss @@ -0,0 +1,139 @@ +.build-header { + @include travisBorder; + @include travisColorRows; + + font-size: 16px; + clear: both; + + @media #{$medium-up} { + display: flex; + flex-flow: row no-wrap; + justify-content: space-between; + } + + a:hover, + a:active { + .inner-underline { + text-decoration: underline; + } + } +} + +.build-commit, +.build-tools { + padding-left: 2rem; +} + +.build-commit { + font-size: 16px; + overflow: hidden; + position: relative; + + &:after { + content: ""; + + @include fadeOut(right, -90deg, white, 20%); + } + + @media #{$medium-up} { + flex: 0 1 55%; + padding-left: 2.2rem; + } +} + +.build-tools { + padding: 1rem 0 1rem 3rem; + overflow: auto; + + @media #{$medium-up} { + flex: 0 0 10rem; + padding: 1rem 0; + } + + .action-button-container + .action-button-container { + margin-top: 0.7rem; + } +} + +.build-info { + font-size: 15px; + padding-left: 2rem; + + @media #{$medium-up} { + flex: 0 1 37%; + } +} + +.build-title, +.build-status { + margin: 1rem 0; + padding-left: 1rem; + font-weight: $font-weight-normal; + font-size: 16px; +} + +.build-title { + .status-icon { + margin-left: -1.9rem; + margin-right: 0.7rem; + } + + @media #{$medium-up} { + white-space: nowrap; + } +} + +.commit-info { + font-size: 15px; + padding-left: 1rem; +} + +.commit-branch { + margin-right: 0.5em; + font-weight: $font-weight-bold; + font-size: 16px; +} + +.build-status { + padding-left: 0; +} + +.commit-author { + margin: 1rem 0 0.7rem; + + .avatar--small:first-of-type { + margin-left: -2px; + } + + .avatar--small:not(:first-of-type) { + margin-left: 20px; + } +} + +.commit-description { + margin: 1rem 0; + + @media #{$medium-up} { + max-height: 4.5em; + position: relative; + overflow: hidden; + + &:after { + conent: ""; + + @include fadeOut(bottom, 360deg, white, 5%); + } + } +} + +.list-icon { + padding: 0; + margin: 1rem 0; + list-style: none; + line-height: 1.7; + white-space: nowrap; + + .commit-clock { + margin-bottom: 1rem; + } +} diff --git a/app/styles/app/modules/build-tile.sass b/app/styles/app/modules/build-tile.sass deleted file mode 100644 index 7b57dcd10d..0000000000 --- a/app/styles/app/modules/build-tile.sass +++ /dev/null @@ -1,69 +0,0 @@ -.build-tiles - height: 4.7em - margin: 0 - padding: 0 - clear: both - list-style: none - li - position: relative - height: 100% - float: left - width: 20% - background-color: $pebble-grey - border-right: 1px solid white - &:last-of-type - border-right: none - .status-icon - padding: 1px - position: absolute - top: 0 - right: 0 - bottom: 0 - left: 0 - width: 18px - height: 18px - margin: auto !important - background-color: transparent - transition: top 200ms ease - &.started, - &.received, - &.booting, - &.queued, - &.created - height: 10px - .build-tile-number - margin: auto - height: 1em - width: auto - text-align: center - position: absolute - transform: scale(.7) - opacity: 0 - color: white - transition: transform 200ms ease, opacity 200ms ease - top: 0 - right: 0 - bottom: -1.5em - left: 0 - &:hover - .status-icon - top: -1.4em - .build-tile-number - transform: scale(1) - opacity: 1 - a - display: block - height: 100% - text-align: center - - @each $state, $colorMap in $stateMap - > .#{$state} - background-color: map-get($colorMap, color-bg) - .status-icon - +colorSVG(map-get($colorMap, color)) - &:hover - background-color: map-get($colorMap, color) - .status-icon - +colorSVG(white) - * - stroke-width: 2px diff --git a/app/styles/app/modules/build-tile.scss b/app/styles/app/modules/build-tile.scss new file mode 100644 index 0000000000..84f642436f --- /dev/null +++ b/app/styles/app/modules/build-tile.scss @@ -0,0 +1,97 @@ +.build-tiles { + height: 4.7em; + margin: 0; + padding: 0; + clear: both; + list-style: none; + + li { + position: relative; + height: 100%; + float: left; + width: 20%; + background-color: $pebble-grey; + border-right: 1px solid white; + + &:last-of-type { + border-right: none; + } + + .status-icon { + padding: 1px; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + width: 18px; + height: 18px; + margin: auto !important; + background-color: transparent; + transition: top 200ms ease; + + &.started, + &.received, + &.booting, + &.queued, + &.created { + height: 10px; + } + } + + .build-tile-number { + margin: auto; + height: 1em; + width: auto; + text-align: center; + position: absolute; + transform: scale(0.7); + opacity: 0; + color: white; + transition: transform 200ms ease, opacity 200ms ease; + top: 0; + right: 0; + bottom: -1.5em; + left: 0; + } + + &:hover { + .status-icon { + top: -1.4em; + } + + .build-tile-number { + transform: scale(1); + opacity: 1; + } + } + } + + a { + display: block; + height: 100%; + text-align: center; + } + + @each $state, $colorMap in $stateMap { + > .#{$state} { + background-color: map-get($colorMap, color-bg); + + .status-icon { + @include colorSVG(map-get($colorMap, color)); + } + + &:hover { + background-color: map-get($colorMap, color); + + .status-icon { + @include colorSVG(white); + + * { + stroke-width: 2px; + } + } + } + } + } +} diff --git a/app/styles/app/modules/buttons.sass b/app/styles/app/modules/buttons.sass deleted file mode 100644 index 5298b0c1fd..0000000000 --- a/app/styles/app/modules/buttons.sass +++ /dev/null @@ -1,185 +0,0 @@ -%button - display: inline-block - padding: 0.7em 0.8rem 0.6em - cursor: pointer - white-space: nowrap - border-radius: 2px - border: none - vertical-align: middle - line-height: 1 - text-decoration: none - font-family: inherit - font-size: 14px - -.button - @extend %button - position: relative - overflow: visible - outline: none - text-align: center - color: white - background-color: darken($pebble-grey, 10) - -.no-button - background: transparent - border: none - cursor: pointer - -.button:hover, -.button:focus, -.button:active, -.button.active - border-color: $pebble-grey - background-color: $cement-grey - -.auth-button - @extend %button - height: 36px - color: #fff - line-height: 0.5 - background-color: $turf-green - .label-align - line-height: 1.4 - .loading-indicator - vertical-align: top - margin-left: .3em - i - background-color: white - width: 6px - height: 6px - -.auth-button.signed-out - .icon - margin: 0 0 0 4px - vertical-align: top - &:hover, - &:active - background-color: darken($turf-green, 10) - -.auth-button--white - @extend %button - vertical-align: baseline - border: 1px solid #f1f1f1 !important - padding: 0.7em 0.8em !important - border-radius: 2px - font-size: inherit - &:active, - &:hover, - &:focus - color: $oxide-blue !important - border-color: $oxide-blue !important - -.button--blue - @extend %button - border: none - color: white - background-color: $oxide-blue - &:hover, - &:active - background-color: darken($oxide-blue, 10) - -.inactive - cursor: default - background: $dry-cement !important - color: white - &:hover, - &:active - background: $dry-cement !important - -#auth #navigation .auth-button - display: none - -.action-button--restart, -.action-button--debug, -.action-button--cancel - display: block - width: 8em - padding: 0 0.5em - border: 1px solid $pebble-grey - border-radius: 14px - cursor: pointer - white-space: nowrap - &:active, - &:focus - outline: thin dotted - &:hover, - &:active - +colorSVG($oxide-blue) - border-color: $oxide-blue - color: $oxide-blue - text-decoration: none !important -.action-button--cancel - &:hover, - &:active - +colorSVG($brick-red) - border-color: $brick-red - color: $brick-red - -.repo-main-tools.labelless - display: inline-flex - padding-top: 2px - margin-left: 5px - button - display: inline-block - width: 22px - height: 22px - padding: 0 - margin-right: 5px - border-radius: 30px - border-color: $cement-grey - transform: translate(0, 1px) scale(0.85) - &:hover, &:active - border-color: $oxide-blue - .label-align - display: none - .action-button--restart .icon - transform: scale(0.75) translate(4px, -2px) - .action-button--cancel - .icon - transform: scale(0.65) translate(1px, -2px) - margin-right: 1px // pixel weirdness for better Safari rendering - &:hover, &:active - +colorSVG($brick-red) - border-color: $brick-red - color: $brick-red - .action-button--debug - display: none - -.jobs-item - .repo-main-tools - transform: translate(-5px, -2px) - button - background: transparent - -%log-button - display: inline-block - height: 28px - padding: 0 0.8em - border: 1px solid $pebble-grey - color: $pebble-grey - border-radius: 2px - text-align: center - line-height: 1.8 - font-size: 14px - font-weight: 300 - background-color: inherit - cursor: pointer - [class^="icon"] - margin-right: .3em - .icon - +colorSVG(white) - -.remove-log-button - @extend %log-button - &:hover, - &:active - background-color: #d94341 - display: none - @media #{$medium-up} - display: inline-block - -.download-log-button - @extend %log-button - &:hover, - &:active - background-color: #999a98 diff --git a/app/styles/app/modules/buttons.scss b/app/styles/app/modules/buttons.scss new file mode 100644 index 0000000000..bbd0c0eecb --- /dev/null +++ b/app/styles/app/modules/buttons.scss @@ -0,0 +1,259 @@ +%button { + display: inline-block; + padding: 0.7em 0.8rem 0.6em; + cursor: pointer; + white-space: nowrap; + border-radius: 2px; + border: none; + vertical-align: middle; + line-height: 1; + text-decoration: none; + font-family: inherit; + font-size: 14px; +} + +.button { + @extend %button; + + position: relative; + overflow: visible; + outline: none; + text-align: center; + color: white; + background-color: darken($pebble-grey, 10); +} + +.no-button { + background: transparent; + border: none; + cursor: pointer; +} + +.button:hover, +.button:focus, +.button:active, +.button.active { + border-color: $pebble-grey; + background-color: $cement-grey; +} + +.auth-button { + @extend %button; + + height: 36px; + color: #fff; + line-height: 0.5; + background-color: $turf-green; + + .label-align { + line-height: 1.4; + } + + .loading-indicator { + vertical-align: top; + margin-left: 0.3em; + + i { + background-color: white; + width: 6px; + height: 6px; + } + } +} + +.auth-button.signed-out { + .icon { + margin: 0 0 0 4px; + vertical-align: top; + } + + &:hover, + &:active { + background-color: darken($turf-green, 10); + } +} + +.auth-button--white { + @extend %button; + + vertical-align: baseline; + border: 1px solid #f1f1f1 !important; + padding: 0.7em 0.8em !important; + border-radius: 2px; + font-size: inherit; + + &:active, + &:hover, + &:focus { + color: $oxide-blue !important; + border-color: $oxide-blue !important; + } +} + +.button--blue { + @extend %button; + + border: none; + color: white; + background-color: $oxide-blue; + + &:hover, + &:active { + background-color: darken($oxide-blue, 10); + } +} + +.inactive { + cursor: default; + background: $dry-cement !important; + color: white; + + &:hover, + &:active { + background: $dry-cement !important; + } +} + +#auth #navigation .auth-button { + display: none; +} + +.action-button--restart, +.action-button--debug, +.action-button--cancel { + display: block; + width: 8em; + padding: 0 0.5em; + border: 1px solid $pebble-grey; + border-radius: 14px; + cursor: pointer; + white-space: nowrap; + + &:active, + &:focus { + outline: thin dotted; + } + + &:hover, + &:active { + @include colorSVG($oxide-blue); + + border-color: $oxide-blue; + color: $oxide-blue; + text-decoration: none !important; + } +} + +.action-button--cancel { + &:hover, + &:active { + @include colorSVG($brick-red); + + border-color: $brick-red; + color: $brick-red; + } +} + +.repo-main-tools.labelless { + display: inline-flex; + padding-top: 2px; + margin-left: 5px; + + button { + display: inline-block; + width: 22px; + height: 22px; + padding: 0; + margin-right: 5px; + border-radius: 30px; + border-color: $cement-grey; + transform: translate(0, 1px) scale(0.85); + + &:hover, &:active { + border-color: $oxide-blue; + } + + .label-align { + display: none; + } + } + + .action-button--restart .icon { + transform: scale(0.75) translate(4px, -2px); + } + + .action-button--cancel { + .icon { + transform: scale(0.65) translate(1px, -2px); + margin-right: 1px; + } + + &:hover, &:active { + @include colorSVG($brick-red); + + border-color: $brick-red; + color: $brick-red; + } + } + + .action-button--debug { + display: none; + } +} + +.jobs-item { + .repo-main-tools { + transform: translate(-5px, -2px); + + button { + background: transparent; + } + } +} + +%log-button { + display: inline-block; + height: 28px; + padding: 0 0.8em; + border: 1px solid $pebble-grey; + color: $pebble-grey; + border-radius: 2px; + text-align: center; + line-height: 1.8; + font-size: 14px; + font-weight: 300; + background-color: inherit; + cursor: pointer; + + [class^="icon"] { + margin-right: 0.3em; + } + + .icon { + @include colorSVG(white); + } +} + +.remove-log-button { + @extend %log-button; + + &:hover, + &:active { + background-color: #d94341; + } + + display: none; + + @media #{$medium-up} { + display: inline-block; + } +} + +.download-log-button { + @extend %log-button; + + &:hover, + &:active { + background-color: #999a98; + } +} diff --git a/app/styles/app/modules/codedisplay.sass b/app/styles/app/modules/codedisplay.sass deleted file mode 100644 index 375686714a..0000000000 --- a/app/styles/app/modules/codedisplay.sass +++ /dev/null @@ -1,5 +0,0 @@ -.codedisplay - border: 1px solid $pebble-grey - white-space: pre-wrap - background-color: white !important - font-size: 12px diff --git a/app/styles/app/modules/codedisplay.scss b/app/styles/app/modules/codedisplay.scss new file mode 100644 index 0000000000..da47e46520 --- /dev/null +++ b/app/styles/app/modules/codedisplay.scss @@ -0,0 +1,6 @@ +.codedisplay { + border: 1px solid $pebble-grey; + white-space: pre-wrap; + background-color: white !important; + font-size: 12px; +} diff --git a/app/styles/app/modules/dashboard-row.sass b/app/styles/app/modules/dashboard-row.sass deleted file mode 100644 index e9551dfc2a..0000000000 --- a/app/styles/app/modules/dashboard-row.sass +++ /dev/null @@ -1,99 +0,0 @@ -.dash-star - cursor: pointer - padding: 0 0.3em - &:hover, - &:active - svg path - stroke-width: 2px - &.is-starred - +colorSVGFull($dozer-yellow, $canary-yellow) - -.dash-private - display: block - text-align: center - .icon - margin-right: 0 - -.dash-head - flex: 0 0 2% - display: flex - padding: 1em - justify-content: space-between - align-items: center - @media #{$medium-up} - flex: 0 0 4em - display: flex - flex-direction: column - height: 55px - padding: .3em 0 - border-right: 1px solid rgba($asphalt-grey, .2) - -.dash-body - flex-grow: 1 - position: relative - @media #{$medium-up} - padding: 0 1.5em 0 - height: 5rem - -.dash-main - @media #{$small-only} - padding: 0 1em - @media #{$medium-up} - display: flex - flex-flow: row nowrap - align-items: center - justify-content: space-between - height: 70px - -.dash-finished - display: relative - -.dash-aside - @media #{$medium-up} - position: relative - top: -2rem - width: 100% - bottom: 0 - overflow: hidden - -section[class^="dash-"] - @media #{$small-only} - margin-top: 1em - -.dash-header - position: relative - flex: 0 0 19% -.dash-default - flex: 0 0 19% - position: relative - overflow: hidden -.dash-menu - flex: 0 0 34% -.dash-last - flex: 0 0 19% -.dash-commit - flex: 0 0 17% -.dash-finished - flex: 0 0 21% -.dash-no-build - flex: 0 0 62% - -.dash-helptext - display: inline-block - margin-right: 1em - -.activate-repo-button - @extend %button - background-color: $pebble-grey - color: $cement-grey - font-size: 14px - cursor: default - &.is-active:hover - background-color: $oxide-blue - color: white - cursor: pointer - -.dash-default, -.dash-last - @each $key, $value in $stateMap - +rowColor(#{$key}, map-get($value, color)) diff --git a/app/styles/app/modules/dashboard-row.scss b/app/styles/app/modules/dashboard-row.scss new file mode 100644 index 0000000000..365f2346c2 --- /dev/null +++ b/app/styles/app/modules/dashboard-row.scss @@ -0,0 +1,143 @@ +.dash-star { + cursor: pointer; + padding: 0 0.3em; + + &:hover, + &:active { + svg path { + stroke-width: 2px; + } + } + + &.is-starred { + @include colorSVGFull($dozer-yellow, $canary-yellow); + } +} + +.dash-private { + display: block; + text-align: center; + + .icon { + margin-right: 0; + } +} + +.dash-head { + flex: 0 0 2%; + display: flex; + padding: 1em; + justify-content: space-between; + align-items: center; + + @media #{$medium-up} { + flex: 0 0 4em; + display: flex; + flex-direction: column; + height: 55px; + padding: 0.3em 0; + border-right: 1px solid rgba($asphalt-grey, 0.2); + } +} + +.dash-body { + flex-grow: 1; + position: relative; + + @media #{$medium-up} { + padding: 0 1.5em 0; + height: 5rem; + } +} + +.dash-main { + @media #{$small-only} { + padding: 0 1em; + } + + @media #{$medium-up} { + display: flex; + flex-flow: row nowrap; + align-items: center; + justify-content: space-between; + height: 70px; + } +} + +.dash-finished { + display: relative; +} + +.dash-aside { + @media #{$medium-up} { + position: relative; + top: -2rem; + width: 100%; + bottom: 0; + overflow: hidden; + } +} + +section[class^="dash-"] { + @media #{$small-only} { + margin-top: 1em; + } +} + +.dash-header { + position: relative; + flex: 0 0 19%; +} + +.dash-default { + flex: 0 0 19%; + position: relative; + overflow: hidden; +} + +.dash-menu { + flex: 0 0 34%; +} + +.dash-last { + flex: 0 0 19%; +} + +.dash-commit { + flex: 0 0 17%; +} + +.dash-finished { + flex: 0 0 21%; +} + +.dash-no-build { + flex: 0 0 62%; +} + +.dash-helptext { + display: inline-block; + margin-right: 1em; +} + +.activate-repo-button { + @extend %button; + + background-color: $pebble-grey; + color: $cement-grey; + font-size: 14px; + cursor: default; + + &.is-active:hover { + background-color: $oxide-blue; + color: white; + cursor: pointer; + } +} + +.dash-default, +.dash-last { + @each $key, $value in $stateMap { + @include rowColor(#{$key}, map-get($value, color)); + } +} diff --git a/app/styles/app/modules/dropdown.sass b/app/styles/app/modules/dropdown.sass deleted file mode 100644 index 424abda141..0000000000 --- a/app/styles/app/modules/dropdown.sass +++ /dev/null @@ -1,121 +0,0 @@ -.option-button - position: relative - width: 17em - &.is-open, - .is-open & - &:hover - .option-display - color: $oxide-blue - border-color: $oxide-blue - .option-tofu - +colorSVGFill($oxide-blue) - border-color: $oxide-blue - .option-arrow - border-color: $oxide-blue - transform: rotate(-90deg) - border-bottom: none - border-top: 1px solid $oxide-blue - &.is-open - .option-dropdown - display: block - -$dropdown-button-height: 30px -$dropdown-button-margin: -9px - -.option-display - height: $dropdown-button-height - width: 100% - padding: 0 - border: 1px solid $dry-cement - color: $asphalt-grey - border-radius: 2px - text-align: center - line-height: 2 - font-size: 14px - cursor: pointer - text-align: left - white-space: nowrap - &:focus - outline: none - .label-align - padding: 0 1em - overflow: hidden - float: left - line-height: 2 - .avatar - max-width: 20px - max-height: 20px - margin-right: .5em - margin-top: -0.1em - border-radius: 50% - overflow: hidden - -.option-tofu, -.option-arrow - width: 2em - height: 2em - display: inline-block - vertical-align: top -.option-tofu - padding: 0 5px - border-left: 1px solid $pebble-grey - .icon-tofu - +colorSVGFill($cement-grey) - width: 1.4rem - height: 2rem -.option-arrow - +colorSVG($cement-grey) - background: - repeat: no-repeat - position: 50% - transform: rotate(90deg) - background-size: 14px - float: right - @media #{$medium-up} - border-bottom: 1px solid $dry-cement - -.option-dropdown - display: none - position: absolute - top: $dropdown-button-height + ($dropdown-button-margin * .8) - width: 100% - padding: 0 - margin: 6px 0 0 - list-style: none - @include z-index(above) - background-color: white - border: 1px solid $oxide-blue - a, - button - display: block - width: 100% - margin-bottom: 0px - padding: .5em 1em - font-size: 14px - color: $oxide-blue - cursor: pointer - &:hover - color: white - background-color: $oxide-blue - -.option-search - input[type="text"] - display: block - padding-left: 1em - outline: none - border-bottom: 1px solid $oxide-blue - border-radius: 0 - -.option-list - list-style: none - padding: 0 - margin: 0 - a - color: $asphalt-grey - cursor: pointer - img - width: 22px - height: 22px - vertical-align: top - margin-right: .3em - border-radius: 50% diff --git a/app/styles/app/modules/dropdown.scss b/app/styles/app/modules/dropdown.scss new file mode 100644 index 0000000000..d993143642 --- /dev/null +++ b/app/styles/app/modules/dropdown.scss @@ -0,0 +1,167 @@ +.option-button { + position: relative; + width: 17em; + + &.is-open, + .is-open & {} + + &:hover { + .option-display { + color: $oxide-blue; + border-color: $oxide-blue; + } + + .option-tofu { + @include colorSVGFill($oxide-blue); + + border-color: $oxide-blue; + } + + .option-arrow { + border-color: $oxide-blue; + transform: rotate(-90deg); + border-bottom: none; + border-top: 1px solid $oxide-blue; + } + } + + &.is-open { + .option-dropdown { + display: block; + } + } +} + +$dropdown-button-height: 30px; +$dropdown-button-margin: -9px; + +.option-display { + height: $dropdown-button-height; + width: 100%; + padding: 0; + border: 1px solid $dry-cement; + color: $asphalt-grey; + border-radius: 2px; + text-align: center; + line-height: 2; + font-size: 14px; + cursor: pointer; + text-align: left; + white-space: nowrap; + + &:focus { + outline: none; + } + + .label-align { + padding: 0 1em; + overflow: hidden; + float: left; + line-height: 2; + } + + .avatar { + max-width: 20px; + max-height: 20px; + margin-right: 0.5em; + margin-top: -0.1em; + border-radius: 50%; + overflow: hidden; + } +} + +.option-tofu, +.option-arrow { + width: 2em; + height: 2em; + display: inline-block; + vertical-align: top; +} + +.option-tofu { + padding: 0 5px; + border-left: 1px solid $pebble-grey; + + .icon-tofu { + @include colorSVGFill($cement-grey); + + width: 1.4rem; + height: 2rem; + } +} + +.option-arrow { + @include colorSVG($cement-grey); + + background: { + repeat: no-repeat; + position: 50%; + }; + transform: rotate(90deg); + background-size: 14px; + float: right; + + @media #{$medium-up} { + border-bottom: 1px solid $dry-cement; + } +} + +.option-dropdown { + display: none; + position: absolute; + top: $dropdown-button-height + $dropdown-button-margin * 0.8; + width: 100%; + padding: 0; + margin: 6px 0 0; + list-style: none; + + @include z-index(above); + + background-color: white; + border: 1px solid $oxide-blue; + + a, + button { + display: block; + width: 100%; + margin-bottom: 0px; + padding: 0.5em 1em; + font-size: 14px; + color: $oxide-blue; + cursor: pointer; + + &:hover { + color: white; + background-color: $oxide-blue; + } + } +} + +.option-search { + input[type="text"] { + display: block; + padding-left: 1em; + outline: none; + border-bottom: 1px solid $oxide-blue; + border-radius: 0; + } +} + +.option-list { + list-style: none; + padding: 0; + margin: 0; + + a { + color: $asphalt-grey; + cursor: pointer; + } + + img { + width: 22px; + height: 22px; + vertical-align: top; + margin-right: 0.3em; + border-radius: 50%; + } +} diff --git a/app/styles/app/modules/dropup.sass b/app/styles/app/modules/dropup.sass deleted file mode 100644 index 8240312f7d..0000000000 --- a/app/styles/app/modules/dropup.sass +++ /dev/null @@ -1,78 +0,0 @@ -.dropup - &.is-open - .dropup-list - display: block - .dropup-tofu - +colorSVGFill($oxide-blue) - outline: none - -.dropup-tofu - width: 2.5em - height: 2em - border: none - padding: 0 - cursor: pointer - display: none - .icon-tofu - +colorSVGFill($cement-grey) - width: 1.9em - vertical-align: middle - @media #{$medium-up} - display: inline-block - &:hover, - &:active - +colorSVGFill($oxide-blue) - outline: none - &:focus - outline: none - -.dropup-list - list-style: none - padding: 0 - margin: 2em 0 0 - background-color: white - text-align: center - - li - display: inline-block - a, - button - display: inline-block - width: 100% - padding: 0.5em 1em - background-color: white - cursor: pointer - [class^="icon-"] - margin-right: .3rem - &:hover, - &:active - +colorSVG(white) - background: $oxide-blue - color: white - - @media #{$medium-up} - position: absolute - right: 0 - bottom: 4.5em - margin: 0 - background-color: white - border: 1px solid $oxide-blue - border-radius: 2px - display: none - @include z-index(above) - text-align: left - li - display: block - &:last-of-type - &:after - content: "" - display: block - width: 1.6em - height: 1.6em - border: 1px solid $oxide-blue - background: white - transform: rotate(45deg) - position: absolute - bottom: -0.7em - right: 1.7em - @include z-index(under) diff --git a/app/styles/app/modules/dropup.scss b/app/styles/app/modules/dropup.scss new file mode 100644 index 0000000000..8399c24c58 --- /dev/null +++ b/app/styles/app/modules/dropup.scss @@ -0,0 +1,113 @@ +.dropup { + &.is-open { + .dropup-list { + display: block; + } + + .dropup-tofu { + @include colorSVGFill($oxide-blue); + + outline: none; + } + } +} + +.dropup-tofu { + width: 2.5em; + height: 2em; + border: none; + padding: 0; + cursor: pointer; + display: none; + + .icon-tofu { + @include colorSVGFill($cement-grey); + + width: 1.9em; + vertical-align: middle; + } + + @media #{$medium-up} { + display: inline-block; + } + + &:hover, + &:active { + @include colorSVGFill($oxide-blue); + + outline: none; + } + + &:focus { + outline: none; + } +} + +.dropup-list { + list-style: none; + padding: 0; + margin: 2em 0 0; + background-color: white; + text-align: center; + + li { + display: inline-block; + } + + a, + button { + display: inline-block; + width: 100%; + padding: 0.5em 1em; + background-color: white; + cursor: pointer; + + [class^="icon-"] { + margin-right: 0.3rem; + } + + &:hover, + &:active { + @include colorSVG(white); + + background: $oxide-blue; + color: white; + } + } + + @media #{$medium-up} { + position: absolute; + right: 0; + bottom: 4.5em; + margin: 0; + background-color: white; + border: 1px solid $oxide-blue; + border-radius: 2px; + display: none; + + @include z-index(above); + + text-align: left; + + li { + display: block; + + &:last-of-type { + &:after { + content: ""; + display: block; + width: 1.6em; + height: 1.6em; + border: 1px solid $oxide-blue; + background: white; + transform: rotate(45deg); + position: absolute; + bottom: -0.7em; + right: 1.7em; + + @include z-index(under); + } + } + } + } +} diff --git a/app/styles/app/modules/flash.sass b/app/styles/app/modules/flash.sass deleted file mode 100644 index dc13b947cf..0000000000 --- a/app/styles/app/modules/flash.sass +++ /dev/null @@ -1,87 +0,0 @@ -.flash - @include resetul - text-align: center - height: 0 - li - position: relative - display: flex - flex-direction: row - justify-content: center - align-items: center - - width: 100% - li.notice, li.success, li.error - opacity: 1 - @include z-index(flashes) - height: $top-height - top: -1px // avoids a pesky gap after topbar - - &.fixed - position: fixed - top: 0 - - .close - position: absolute - cursor: pointer - right: 0.6rem - top: 0 - height: 100% - .icon - margin-right: 0 - height: 24px - width: 22px - - .success - color: $turf-green - background-color: $seed-green - +colorSVGFill($turf-green) - - animation: fadeFlashOut 7s 1 ease forwards - - .flash-message svg - height: 38px - width: 32px - margin-top: -5px - - .error - color: $brick-red - background-color: $quartz-red - +colorSVGFill($brick-red) - - .flash-message svg - height: 34px - width: 30px - margin-top: -1px - - .notice - color: $dozer-yellow - background-color: $haze-yellow - +colorSVGFill($dozer-yellow) - - .flash-message svg - height: 19px - width: 14px - margin-right: 6px - +colorSVG($dozer-yellow) - stroke-width: 1.5px - - -.flash-message - display: flex - align-items: center - padding: 0 - margin: 0 - line-height: 1 - font-size: 1.14rem - - .preamble - font-weight: bold - padding-right: 0.5rem - -@keyframes fadeFlashOut - 0% - opacity: 1 - 98% - opacity: 1 - 100% - opacity: 0 diff --git a/app/styles/app/modules/flash.scss b/app/styles/app/modules/flash.scss new file mode 100644 index 0000000000..64f49d115a --- /dev/null +++ b/app/styles/app/modules/flash.scss @@ -0,0 +1,116 @@ +.flash { + @include resetul; + + text-align: center; + height: 0; + + li { + position: relative; + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + width: 100%; + } + + li.notice, li.success, li.error { + opacity: 1; + + @include z-index(flashes); + + height: $top-height; + top: -1px; + + &.fixed { + position: fixed; + top: 0; + } + } + + .close { + position: absolute; + cursor: pointer; + right: 0.6rem; + top: 0; + height: 100%; + + .icon { + margin-right: 0; + height: 24px; + width: 22px; + } + } + + .success { + color: $turf-green; + background-color: $seed-green; + + @include colorSVGFill($turf-green); + + animation: fadeFlashOut 7s 1 ease forwards; + + .flash-message svg { + height: 38px; + width: 32px; + margin-top: -5px; + } + } + + .error { + color: $brick-red; + background-color: $quartz-red; + + @include colorSVGFill($brick-red); + + .flash-message svg { + height: 34px; + width: 30px; + margin-top: -1px; + } + } + + .notice { + color: $dozer-yellow; + background-color: $haze-yellow; + + @include colorSVGFill($dozer-yellow); + + .flash-message svg { + height: 19px; + width: 14px; + margin-right: 6px; + + @include colorSVG($dozer-yellow); + + stroke-width: 1.5px; + } + } +} + +.flash-message { + display: flex; + align-items: center; + padding: 0; + margin: 0; + line-height: 1; + font-size: 1.14rem; + + .preamble { + font-weight: bold; + padding-right: 0.5rem; + } +} + +@keyframes fadeFlashOut { + 0% { + opacity: 1; + } + + 98% { + opacity: 1; + } + + 100% { + opacity: 0; + } +} diff --git a/app/styles/app/modules/forms.sass b/app/styles/app/modules/forms.sass deleted file mode 100644 index 8107bae5a1..0000000000 --- a/app/styles/app/modules/forms.sass +++ /dev/null @@ -1,125 +0,0 @@ -%input-base - display: inline-block - width: 100% - padding: .4em .4em - border: 1px solid #dbdcdc - border-radius: 2px - color: $asphalt-grey - font-size: 14px - font-family: $font-family-sans-serif - background: white - -input[type="text"], -input[type="email"], -input[type="number"], -input[type="password"], -select - @extend %input-base - height: 32px - -textarea - @extend %input-base - -::placeholder - color: $cement-grey - -.form-elem - margin-bottom: 20px - -.form-label - font-size: 10px - color: $cement-grey - text-transform: uppercase - .form-elem & - display: block - margin-bottom: 5px - -.form-submit - display: inline-block - border: none - border-radius: 4px - padding: .5em .8em - color: white - font-size: $font-size-sm - font-weight: 300 - background-color: $cement-grey - cursor: pointer - &:hover - background-color: $oxide-blue - -.form-helptext - margin-top: 0 - margin-bottom: 5px - font-size: 12px - color: $cement-grey - -.form--sshkey - .form-elem - margin-bottom: .5rem - @media #{$medium-up} - .form-elem - max-width: 460px - -.form--envvar, .form--cron - .form-elem - display: inline-block - vertical-align: top - width: 100% - margin-bottom: 1em - @media #{$medium-up} - .form-elem - margin-bottom: 0 - .form-elem:first-of-type, - .form-elem:nth-of-type(2) - margin-right: 1em - .form-elem:last-of-type - float: right - text-align: right - -.form--envvar - .switch - .label - font-size: $font-size-s - width: 7rem - line-height: 1.2 - text-align: left - @media #{$medium-up} - .form-elem:first-of-type, - .form-elem:nth-of-type(2) - width: 31.5% - .form-elem:nth-of-type(3) - width: 24% - .form-elem:last-of-type - width: 6% - -.form--cron - padding: .4em 0 - .form-elem - select - width: 70% - .select - span - vertical-align: middle - font-size: 16px - color: #8d8d8d - display: inline-block - padding-right: 5px - @media #{$medium-up} - .form-elem:first-of-type, - .form-elem:nth-of-type(2), - .form-elem:nth-of-type(3) - width: grid-calc(3, 10) - margin-right: 0em - padding-right: 5px - .form-elem:last-of-type - width: 6% - -.form-error - .env-name, - .ssh-value - border: $brick-red 2px solid - .form-error-message - color: $brick-red - font-size: 14px - padding: .2em 0 - margin: 0 diff --git a/app/styles/app/modules/forms.scss b/app/styles/app/modules/forms.scss new file mode 100644 index 0000000000..5dd401c480 --- /dev/null +++ b/app/styles/app/modules/forms.scss @@ -0,0 +1,178 @@ +%input-base { + display: inline-block; + width: 100%; + padding: 0.4em 0.4em; + border: 1px solid #dbdcdc; + border-radius: 2px; + color: $asphalt-grey; + font-size: 14px; + font-family: $font-family-sans-serif; + background: white; +} + +input[type="text"], +input[type="email"], +input[type="number"], +input[type="password"], +select { + @extend %input-base; + + height: 32px; +} + +textarea { + @extend %input-base; +} + +::placeholder { + color: $cement-grey; +} + +.form-elem { + margin-bottom: 20px; +} + +.form-label { + font-size: 10px; + color: $cement-grey; + text-transform: uppercase; + + .form-elem & { + display: block; + margin-bottom: 5px; + } +} + +.form-submit { + display: inline-block; + border: none; + border-radius: 4px; + padding: 0.5em 0.8em; + color: white; + font-size: $font-size-sm; + font-weight: 300; + background-color: $cement-grey; + cursor: pointer; + + &:hover { + background-color: $oxide-blue; + } +} + +.form-helptext { + margin-top: 0; + margin-bottom: 5px; + font-size: 12px; + color: $cement-grey; +} + +.form--sshkey { + .form-elem { + margin-bottom: 0.5rem; + } + + @media #{$medium-up} { + .form-elem { + max-width: 460px; + } + } +} + +.form--envvar, .form--cron { + .form-elem { + display: inline-block; + vertical-align: top; + width: 100%; + margin-bottom: 1em; + } + + @media #{$medium-up} { + .form-elem { + margin-bottom: 0; + } + + .form-elem:first-of-type, + .form-elem:nth-of-type(2) { + margin-right: 1em; + } + + .form-elem:last-of-type { + float: right; + text-align: right; + } + } +} + +.form--envvar { + .switch { + .label { + font-size: $font-size-s; + width: 7rem; + line-height: 1.2; + text-align: left; + } + } + + @media #{$medium-up} { + .form-elem:first-of-type, + .form-elem:nth-of-type(2) { + width: 31.5%; + } + + .form-elem:nth-of-type(3) { + width: 24%; + } + + .form-elem:last-of-type { + width: 6%; + } + } +} + +.form--cron { + padding: 0.4em 0; + + .form-elem { + select { + width: 70%; + } + } + + .select { + span { + vertical-align: middle; + font-size: 16px; + color: #8d8d8d; + display: inline-block; + padding-right: 5px; + } + } + + @media #{$medium-up} { + .form-elem:first-of-type, + .form-elem:nth-of-type(2), + .form-elem:nth-of-type(3) { + width: grid-calc(3, 10); + margin-right: 0em; + padding-right: 5px; + } + + .form-elem:last-of-type { + width: 6%; + } + } +} + +.form-error { + .env-name, + .ssh-value { + border: $brick-red 2px solid; + } + + .form-error-message { + color: $brick-red; + font-size: 14px; + padding: 0.2em 0; + margin: 0; + } +} diff --git a/app/styles/app/modules/icons.sass b/app/styles/app/modules/icons.sass deleted file mode 100644 index b2100b8bbd..0000000000 --- a/app/styles/app/modules/icons.sass +++ /dev/null @@ -1,69 +0,0 @@ -%icon - display: inline-block - vertical-align: middle - -.icon - @extend %icon - width: 15px - height: 16px - margin-right: 4px - -.icon--m - @extend %icon - width: 18px - height: 19px - margin-right: 1px - -.icon--l - @extend %icon - width: 30px - height: 30px - margin-right: 7px - -.icon svg, -svg.icon, -svg.icon--l, -svg.icon--m - +colorSVG($cement-grey) - -@each $state, $colorMap in $stateMap - svg.icon, - svg.icon--m, - svg.icon--l - &.#{$state} - +colorSVG(map-get($colorMap, color)) - -.icon-hover - &:hover, - &:active - +colorSVG($oxide-blue) - -.icon.white - +colorSVG(white) -.icon.green - +colorSVG($turf-green) -.icon.red - +colorSVG($brick-red) - -.icon-help - +colorSVG($cement-grey) - display: inline-block - width: 20px - height: 20px - padding: 0.2em - margin-left: .2em - vertical-align: middle - border-radius: 50% - border: 1px solid $pebble-grey - &:hover, - &:active - border-color: $oxide-blue - +colorSVG($oxide-blue) - -.icon--plus - width: 1.1rem - height: 1.4rem - &:after - content: "+" - font-size: 16px - color: $asphalt-grey diff --git a/app/styles/app/modules/icons.scss b/app/styles/app/modules/icons.scss new file mode 100644 index 0000000000..d52807685a --- /dev/null +++ b/app/styles/app/modules/icons.scss @@ -0,0 +1,95 @@ +%icon { + display: inline-block; + vertical-align: middle; +} + +.icon { + @extend %icon; + + width: 15px; + height: 16px; + margin-right: 4px; +} + +.icon--m { + @extend %icon; + + width: 18px; + height: 19px; + margin-right: 1px; +} + +.icon--l { + @extend %icon; + + width: 30px; + height: 30px; + margin-right: 7px; +} + +.icon svg, +svg.icon, +svg.icon--l, +svg.icon--m { + @include colorSVG($cement-grey); +} + +@each $state, $colorMap in $stateMap { + svg.icon, + svg.icon--m, + svg.icon--l { + &.#{$state} { + @include colorSVG(map-get($colorMap, color)); + } + } +} + +.icon-hover { + &:hover, + &:active { + @include colorSVG($oxide-blue); + } +} + +.icon.white { + @include colorSVG(white); +} + +.icon.green { + @include colorSVG($turf-green); +} + +.icon.red { + @include colorSVG($brick-red); +} + +.icon-help { + @include colorSVG($cement-grey); + + display: inline-block; + width: 20px; + height: 20px; + padding: 0.2em; + margin-left: 0.2em; + vertical-align: middle; + border-radius: 50%; + border: 1px solid $pebble-grey; + + &:hover, + &:active { + border-color: $oxide-blue; + + @include colorSVG($oxide-blue); + } +} + +.icon--plus { + width: 1.1rem; + height: 1.4rem; + + &:after { + content: "+"; + font-size: 16px; + color: $asphalt-grey; + } +} diff --git a/app/styles/app/modules/lastbuild.sass b/app/styles/app/modules/lastbuild.sass deleted file mode 100644 index 2c79913396..0000000000 --- a/app/styles/app/modules/lastbuild.sass +++ /dev/null @@ -1,38 +0,0 @@ -.lastbuilds - list-style: none - margin: 0 - padding: 0 - width: 100% - display: flex - justify-content: flex-start - @media #{$small-only} - flex-flow: row wrap - margin-top: 1em - - li - flex: 0 0 20% - height: 30px - @each $key, $value in $stateMap - &.#{$key} - background-color: map-get($value, color) - - @media #{$medium-up} - flex: 0 0 10% - margin-right: 2px - transform: translateY(25px) - transition: transform 150ms ease - &:hover - transform: translateY(0) - a - display: block - width: 100% - height: 30% - padding-top: 4px - color: white - text-align: center - - .status-icon - svg * - stroke: white !important - .circle - border-color: white !important diff --git a/app/styles/app/modules/lastbuild.scss b/app/styles/app/modules/lastbuild.scss new file mode 100644 index 0000000000..32ea8a5799 --- /dev/null +++ b/app/styles/app/modules/lastbuild.scss @@ -0,0 +1,54 @@ +.lastbuilds { + list-style: none; + margin: 0; + padding: 0; + width: 100%; + display: flex; + justify-content: flex-start; + + @media #{$small-only} { + flex-flow: row wrap; + margin-top: 1em; + } + + li { + flex: 0 0 20%; + height: 30px; + + @each $key, $value in $stateMap { + &.#{$key} { + background-color: map-get($value, color); + } + } + + @media #{$medium-up} { + flex: 0 0 10%; + margin-right: 2px; + transform: translateY(25px); + transition: transform 150ms ease; + + &:hover { + transform: translateY(0); + } + } + } + + a { + display: block; + width: 100%; + height: 30%; + padding-top: 4px; + color: white; + text-align: center; + } + + .status-icon { + svg * { + stroke: white !important; + } + + .circle { + border-color: white !important; + } + } +} diff --git a/app/styles/app/modules/loader.sass b/app/styles/app/modules/loader.sass deleted file mode 100644 index 951987ae99..0000000000 --- a/app/styles/app/modules/loader.sass +++ /dev/null @@ -1,77 +0,0 @@ - - -#loader-container-large - margin-top: 2em - height : 70px - text-align : center - -#loader-container-large .load-text - font-size : 25px - line-height : 30px - font-weight : 300 - margin-top : 20px - font-weight: 400 - -.loader-large - width : 60px - height : 60px - position : relative - margin : 0 auto - -#loader-container-medium - height : 40px - margin-top : 15px - text-align : center - -#loader-container-medium .load-text - vertical-align : 10px - display : inline-block - -.loader-medium - width : 30px - height : 30px - position : relative - display : inline-block - margin : 0 auto - margin-right : 10px - -#loader-container-small - height : 20px - margin-top : 22px - text-align : center - -#loader-container-small .load-text - vertical-align : 3px - display : inline-block - -.loader-small - width : 15px - height : 15px - position : relative - display : inline-block - margin : 0 auto - margin-right : 5px - -.load-circle1, .load-circle2 - width : 100% - height : 100% - border-radius : 50% - opacity : 0.7 - position : absolute - top : 0 - left : 0 - animation : bounce 1.5s infinite ease-in-out - -.load-circle1 - background-color : #347389 - -.load-circle2 - background-color : #bdc5c5 - animation-delay : -0.5s - -@keyframes bounce - 0%, 100% - transform : scale(0.0) - 60% - transform: scale(1.0) - diff --git a/app/styles/app/modules/loader.scss b/app/styles/app/modules/loader.scss new file mode 100644 index 0000000000..0f4ccefb1c --- /dev/null +++ b/app/styles/app/modules/loader.scss @@ -0,0 +1,90 @@ +#loader-container-large { + margin-top: 2em; + height: 70px; + text-align: center; +} + +#loader-container-large .load-text { + font-size: 25px; + line-height: 30px; + font-weight: 300; + margin-top: 20px; + font-weight: 400; +} + +.loader-large { + width: 60px; + height: 60px; + position: relative; + margin: 0 auto; +} + +#loader-container-medium { + height: 40px; + margin-top: 15px; + text-align: center; +} + +#loader-container-medium .load-text { + vertical-align: 10px; + display: inline-block; +} + +.loader-medium { + width: 30px; + height: 30px; + position: relative; + display: inline-block; + margin: 0 auto; + margin-right: 10px; +} + +#loader-container-small { + height: 20px; + margin-top: 22px; + text-align: center; +} + +#loader-container-small .load-text { + vertical-align: 3px; + display: inline-block; +} + +.loader-small { + width: 15px; + height: 15px; + position: relative; + display: inline-block; + margin: 0 auto; + margin-right: 5px; +} + +.load-circle1, .load-circle2 { + width: 100%; + height: 100%; + border-radius: 50%; + opacity: 0.7; + position: absolute; + top: 0; + left: 0; + animation: bounce 1.5s infinite ease-in-out; +} + +.load-circle1 { + background-color: #347389; +} + +.load-circle2 { + background-color: #bdc5c5; + animation-delay: -0.5s; +} + +@keyframes bounce { + 0%, 100% { + transform: scale(0); + } + + 60% { + transform: scale(1); + } +} diff --git a/app/styles/app/modules/loading-indicator.sass b/app/styles/app/modules/loading-indicator.sass deleted file mode 100644 index eeb0832567..0000000000 --- a/app/styles/app/modules/loading-indicator.sass +++ /dev/null @@ -1,44 +0,0 @@ -.loading-indicator - display: inline-block - vertical-align: middle - i - position: relative - display: inline-block - width: 8px - height: 8px - background-color: #A6ADAD - border-radius: 50% - line-height: 0 - transform-origin: center center - animation: bouncedelay 1.3s infinite linear - &:nth-child(2) - animation-delay: 0.3s - &:nth-child(3) - animation-delay: 0.6s - - .white & - i - background-color: white - -@keyframes bouncedelay - 0%, 80%, 100% - transform: scale(0) - 40% - transform: scale(1.0) - -.loading-container - text-align: center - padding: 1.5em 1em - -.inline-block - display: inline-block - -.loading-indicator--white - @extend .loading-indicator - i - background-color: white - -.icon-height - .loading-indicator - height: 28px - margin-bottom: .5em diff --git a/app/styles/app/modules/loading-indicator.scss b/app/styles/app/modules/loading-indicator.scss new file mode 100644 index 0000000000..f3902db3ef --- /dev/null +++ b/app/styles/app/modules/loading-indicator.scss @@ -0,0 +1,64 @@ +.loading-indicator { + display: inline-block; + vertical-align: middle; + + i { + position: relative; + display: inline-block; + width: 8px; + height: 8px; + background-color: #A6ADAD; + border-radius: 50%; + line-height: 0; + transform-origin: center center; + animation: bouncedelay 1.3s infinite linear; + + &:nth-child(2) { + animation-delay: 0.3s; + } + + &:nth-child(3) { + animation-delay: 0.6s; + } + } + + .white & { + i { + background-color: white; + } + } +} + +@keyframes bouncedelay { + 0%, 80%, 100% { + transform: scale(0); + } + + 40% { + transform: scale(1); + } +} + +.loading-container { + text-align: center; + padding: 1.5em 1em; +} + +.inline-block { + display: inline-block; +} + +.loading-indicator--white { + @extend .loading-indicator; + + i { + background-color: white; + } +} + +.icon-height { + .loading-indicator { + height: 28px; + margin-bottom: 0.5em; + } +} diff --git a/app/styles/app/modules/logo.sass b/app/styles/app/modules/logo.sass deleted file mode 100644 index d9a1b3baed..0000000000 --- a/app/styles/app/modules/logo.sass +++ /dev/null @@ -1,20 +0,0 @@ -.logo - position: relative - display: inline-block - height: $top-height - width: 100px - margin: 0 1.5rem 0 0 - vertical-align: middle - float: left - a - display: block - height: $top-height - outline: none - text-indent: -9999px - transition: background-color 200ms ease - background: inline-image('ui/travis-ci-logo.svg') no-repeat 0 50% - - &:hover - background: $cream-light inline-image('ui/travis-ci-logo-hover.svg') no-repeat 50% - .centered & - margin-left: 0 diff --git a/app/styles/app/modules/logo.scss b/app/styles/app/modules/logo.scss new file mode 100644 index 0000000000..6e326e8d0d --- /dev/null +++ b/app/styles/app/modules/logo.scss @@ -0,0 +1,26 @@ +.logo { + position: relative; + display: inline-block; + height: $top-height; + width: 100px; + margin: 0 1.5rem 0 0; + vertical-align: middle; + float: left; + + a { + display: block; + height: $top-height; + outline: none; + text-indent: -9999px; + transition: background-color 200ms ease; + background: inline-image("ui/travis-ci-logo.svg") no-repeat 0 50%; + + &:hover { + background: $cream-light inline-image("ui/travis-ci-logo-hover.svg") no-repeat 50%; + } + } + + .centered & { + margin-left: 0; + } +} diff --git a/app/styles/app/modules/navigation.sass b/app/styles/app/modules/navigation.sass deleted file mode 100644 index 29bd734095..0000000000 --- a/app/styles/app/modules/navigation.sass +++ /dev/null @@ -1,87 +0,0 @@ -$nav-line-height: 35px - -.navigation-toggle - float: right - @media #{$medium-up} - display: none - -.navigation - height: 0 - will-change: height - transition: height 200ms ease - overflow: hidden - > ul - padding: 0 - margin: 0 - list-style: none - li - display: block - &.is-open - height: 100% - - @media #{$medium-up} - overflow: visible - > ul > li - display: inline-block - margin-left: -0.5em - white-space: nowrap - &:first-of-type - a - margin-left: -0.5em - - .profile - float: right - line-height: $top-height - @media #{$medium-up} - margin-right: 0 - > a - padding-right: 0 - -.navigation-anchor - display: block - width: 100% - line-height: $nav-line-height - &:hover - text-decoration: underline - cursor: pointer - @media #{$medium-up} - line-height: $top-height + 1px // such magic wow - padding: 0 1em - -.deployment-version - border: 1px solid $cement-grey - font-size: 50% - padding: 6px - border-radius: 15px - - display: inline - position: relative - top: -2px - -.navigation-nested - margin: 0 - padding: 0 0 0 1em - list-style: none - line-height: $nav-line-height - - @media #{$medium-up} - display: none - position: absolute - padding: 0 0 0 0 - margin: -1px 0 0 0 - @include z-index(above-flashes) - background-color: #f1f1f1 - - li - display: block - text-align: left - a - display: block - padding: 0 2em - &:hover - text-decoration: none - background-color: $cream-light - -.navigation-anchor:hover ~ .navigation-nested, -.navigation-nested:hover - display: block diff --git a/app/styles/app/modules/navigation.scss b/app/styles/app/modules/navigation.scss new file mode 100644 index 0000000000..21f2ff7e16 --- /dev/null +++ b/app/styles/app/modules/navigation.scss @@ -0,0 +1,123 @@ +$nav-line-height: 35px; + +.navigation-toggle { + float: right; + + @media #{$medium-up} { + display: none; + } +} + +.navigation { + height: 0; + will-change: height; + transition: height 200ms ease; + overflow: hidden; + + > ul { + padding: 0; + margin: 0; + list-style: none; + } + + li { + display: block; + } + + &.is-open { + height: 100%; + } + + @media #{$medium-up} { + overflow: visible; + + > ul > li { + display: inline-block; + margin-left: -0.5em; + white-space: nowrap; + + &:first-of-type { + a { + margin-left: -0.5em; + } + } + } + } + + .profile { + float: right; + line-height: $top-height; + + @media #{$medium-up} { + margin-right: 0; + + > a { + padding-right: 0; + } + } + } +} + +.navigation-anchor { + display: block; + width: 100%; + line-height: $nav-line-height; + + &:hover { + text-decoration: underline; + cursor: pointer; + } + + @media #{$medium-up} { + line-height: $top-height + 1px; + padding: 0 1em; + } +} + +.deployment-version { + border: 1px solid $cement-grey; + font-size: 50%; + padding: 6px; + border-radius: 15px; + display: inline; + position: relative; + top: -2px; +} + +.navigation-nested { + margin: 0; + padding: 0 0 0 1em; + list-style: none; + line-height: $nav-line-height; + + @media #{$medium-up} { + display: none; + position: absolute; + padding: 0 0 0 0; + margin: (-1px) 0 0 0; + + @include z-index(above-flashes); + + background-color: #f1f1f1; + + li { + display: block; + text-align: left; + } + + a { + display: block; + padding: 0 2em; + + &:hover { + text-decoration: none; + background-color: $cream-light; + } + } + } +} + +.navigation-anchor:hover ~ .navigation-nested, +.navigation-nested:hover { + display: block; +} diff --git a/app/styles/app/modules/notice.sass b/app/styles/app/modules/notice.sass deleted file mode 100644 index c5f51aed52..0000000000 --- a/app/styles/app/modules/notice.sass +++ /dev/null @@ -1,67 +0,0 @@ -=notice($color: $haze-yellow, $bg: doyer-yellow) - +linkStyle($color) - padding: 0.3em 0.5em 0.2em - margin-bottom: .5em - background-color: $bg - color: $color - border-radius: 2px - font-size: $font-size-m - .icon-flag - +colorSVG($color) - width: 1.3em - height: 1.5em - margin: 0 .6em 0 .2em - vertical-align: middle - -.notice, -.notice--yellow - +notice($dozer-yellow, $haze-yellow) -.notice--blue - +notice($oxide-blue, $agate-blue) -.notice--red - +notice($brick-red, $quartz-red) - -=notice-banner($bg, $color) - +linkStyle($color) - padding: 1em 1.5em - margin-bottom: .5em - background-color: $bg - color: $color - border-radius: 2px - font-size: $font-size-m - display: block - .icon-flag - +colorSVG($color) - width: 18px - height: 18px - margin-right: .3em - vertical-align: middle - code - font-size: .9em - padding: .1em .3em - border-radius: 2px - border: 1px solid lighten($color, 10) - strong - font-weight: 600 - padding-right: 0.5rem - -.notice-banner--yellow.spaced - display: flex - justify-content: space-between - margin-top: 2.5rem - -.profile-main .notice-banner--yellow, -.profile-main .notice-banner--green - @media (min-width: 600px) // aka profile-breakpoint - margin: 0 0 20px - @media #{$large} - display: flex - justify-content: space-between - align-items: baseline - -.notice-banner--yellow - +notice-banner($haze-yellow, $dozer-yellow) -.notice-banner--green - +notice-banner($seed-green, $turf-green) -.notice-banner--red - +notice-banner($quartz-red, $brick-red) diff --git a/app/styles/app/modules/notice.scss b/app/styles/app/modules/notice.scss new file mode 100644 index 0000000000..6a729c9f21 --- /dev/null +++ b/app/styles/app/modules/notice.scss @@ -0,0 +1,96 @@ +@mixin notice($color: $haze-yellow, $bg: doyer-yellow) { + @include linkStyle($color); + + padding: 0.3em 0.5em 0.2em; + margin-bottom: 0.5em; + background-color: $bg; + color: $color; + border-radius: 2px; + font-size: $font-size-m; + + .icon-flag { + @include colorSVG($color); + + width: 1.3em; + height: 1.5em; + margin: 0 0.6em 0 0.2em; + vertical-align: middle; + } +} + +.notice, +.notice--yellow { + @include notice($dozer-yellow, $haze-yellow); +} + +.notice--blue { + @include notice($oxide-blue, $agate-blue); +} + +.notice--red { + @include notice($brick-red, $quartz-red); +} + +@mixin notice-banner($bg, $color) { + @include linkStyle($color); + + padding: 1em 1.5em; + margin-bottom: 0.5em; + background-color: $bg; + color: $color; + border-radius: 2px; + font-size: $font-size-m; + display: block; + + .icon-flag { + @include colorSVG($color); + + width: 18px; + height: 18px; + margin-right: 0.3em; + vertical-align: middle; + } + + code { + font-size: 0.9em; + padding: 0.1em 0.3em; + border-radius: 2px; + border: 1px solid lighten($color, 10); + } + + strong { + font-weight: 600; + padding-right: 0.5rem; + } +} + +.notice-banner--yellow.spaced { + display: flex; + justify-content: space-between; + margin-top: 2.5rem; +} + +.profile-main .notice-banner--yellow, +.profile-main .notice-banner--green { + @media (min-width: 600px) { + margin: 0 0 20px; + } + + @media #{$large} { + display: flex; + justify-content: space-between; + align-items: baseline; + } +} + +.notice-banner--yellow { + @include notice-banner($haze-yellow, $dozer-yellow); +} + +.notice-banner--green { + @include notice-banner($seed-green, $turf-green); +} + +.notice-banner--red { + @include notice-banner($quartz-red, $brick-red); +} diff --git a/app/styles/app/modules/pagination.sass b/app/styles/app/modules/pagination.sass deleted file mode 100644 index 2095c7429e..0000000000 --- a/app/styles/app/modules/pagination.sass +++ /dev/null @@ -1,42 +0,0 @@ -.pagination-navigation - display: flex - justify-content: center - - ul - display: flex - align-items: baseline - flex-wrap: wrap - justify-content: center - padding: 0 - list-style: none - - li - margin: 0 .5em - -.pagination-button - padding: .4em .5em - border: solid 1px $pebble-grey - border-radius: 2px - text-transform: uppercase - &:hover, - &:active - color: $oxide-blue - border-color: $oxide-blue - - -.pagination-link - display: inline-block - width: 2.5em - height: 2.5em - line-height: 2.5 - border-radius: 50% - text-align: center - border: solid 1px transparent - &:hover, - &:active - color: $oxide-blue - border-color: $oxide-blue - &.active - color: $oxide-blue - font-weight: 600 - background-color: rgba($agate-blue, .3) diff --git a/app/styles/app/modules/pagination.scss b/app/styles/app/modules/pagination.scss new file mode 100644 index 0000000000..377bbb8f6e --- /dev/null +++ b/app/styles/app/modules/pagination.scss @@ -0,0 +1,52 @@ +.pagination-navigation { + display: flex; + justify-content: center; + + ul { + display: flex; + align-items: baseline; + flex-wrap: wrap; + justify-content: center; + padding: 0; + list-style: none; + } + + li { + margin: 0 0.5em; + } +} + +.pagination-button { + padding: 0.4em 0.5em; + border: solid 1px $pebble-grey; + border-radius: 2px; + text-transform: uppercase; + + &:hover, + &:active { + color: $oxide-blue; + border-color: $oxide-blue; + } +} + +.pagination-link { + display: inline-block; + width: 2.5em; + height: 2.5em; + line-height: 2.5; + border-radius: 50%; + text-align: center; + border: solid 1px transparent; + + &:hover, + &:active { + color: $oxide-blue; + border-color: $oxide-blue; + } + + &.active { + color: $oxide-blue; + font-weight: 600; + background-color: rgba($agate-blue, 0.3); + } +} diff --git a/app/styles/app/modules/popup.sass b/app/styles/app/modules/popup.sass deleted file mode 100644 index ea795b348c..0000000000 --- a/app/styles/app/modules/popup.sass +++ /dev/null @@ -1,61 +0,0 @@ -.ember-modal-dialog - @include z-index(dialog) - position: fixed - &.emd-in-place - position: static - -.ember-modal-wrapper.emd-static.emd-wrapper-target-attachment-center - .ember-modal-dialog - top: 50% - left: 50% - transform: translate(-50%, -50%) - -.ember-modal-wrapper.emd-animatable - &.emd-wrapper-target-attachment-center - width: 100vw - height: 100vh - position: fixed - top: 0 - left: 0 - display: flex - align-items: center - justify-content: center - &.emd-wrapper-target-attachment-center .ember-modal-overlay - display: flex - align-items: center - justify-content: center - .ember-modal-dialog - position: relative - -.ember-modal-overlay - width: 100vw - height: 100vh - position: fixed - top: 0 - left: 0 - @include z-index(overlay) - -.ember-modal-dialog - border-radius: 2px - background-color: #fff - border: solid 1px $pebble-grey - padding: 2em - -.ember-modal-overlay.translucent - background-color: rgba($cement-grey, .6) - -.modal-close - position: absolute - top: 1em - right: 1em - -.status-images - width: 100% - @media #{$medium-up} - width: 600px - - select, textarea - margin-bottom: 1em - - .small-title - margin: .3em 0 .8em diff --git a/app/styles/app/modules/popup.scss b/app/styles/app/modules/popup.scss new file mode 100644 index 0000000000..25071dc7f0 --- /dev/null +++ b/app/styles/app/modules/popup.scss @@ -0,0 +1,83 @@ +.ember-modal-dialog { + @include z-index(dialog); + + position: fixed; + + &.emd-in-place { + position: static; + } +} + +.ember-modal-wrapper.emd-static.emd-wrapper-target-attachment-center { + .ember-modal-dialog { + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + } +} + +.ember-modal-wrapper.emd-animatable { + &.emd-wrapper-target-attachment-center { + width: 100vw; + height: 100vh; + position: fixed; + top: 0; + left: 0; + display: flex; + align-items: center; + justify-content: center; + } + + &.emd-wrapper-target-attachment-center .ember-modal-overlay { + display: flex; + align-items: center; + justify-content: center; + } + + .ember-modal-dialog { + position: relative; + } +} + +.ember-modal-overlay { + width: 100vw; + height: 100vh; + position: fixed; + top: 0; + left: 0; + + @include z-index(overlay); +} + +.ember-modal-dialog { + border-radius: 2px; + background-color: #fff; + border: solid 1px $pebble-grey; + padding: 2em; +} + +.ember-modal-overlay.translucent { + background-color: rgba($cement-grey, 0.6); +} + +.modal-close { + position: absolute; + top: 1em; + right: 1em; +} + +.status-images { + width: 100%; + + @media #{$medium-up} { + width: 600px; + } + + select, textarea { + margin-bottom: 1em; + } + + .small-title { + margin: 0.3em 0 0.8em; + } +} diff --git a/app/styles/app/modules/row.sass b/app/styles/app/modules/row.sass deleted file mode 100644 index 0b69e53a0b..0000000000 --- a/app/styles/app/modules/row.sass +++ /dev/null @@ -1,117 +0,0 @@ -.fade-out - @media #{$medium-up} - white-space: nowrap - position:relative - overflow: hidden - &:after - content: "" - @include fadeOut(right, -90deg, white, 30%) - -.label-align - vertical-align: middle - line-height: 1.5 - -.rows - @each $state, $colorMap in $stateMap - +rowColor($state, map-get($colorMap, color), map-get($colorMap, gradient)) - +travisBorder - display: flex - flex-flow: column wrap - margin-bottom: 1rem - @media #{$medium-up} - position: relative - flex-flow: row nowrap - justify-content: space-between - align-items: center - - .label - margin: 0 - font-size: 10px - color: $cement-grey - text-transform: uppercase - font-weight: 600 - - .row-label, - .row-label a - font-size: $font-size-m - color: $cement-grey - - .row-label - margin: 0 - a:hover, - a:active - border-bottom: 1px solid $cement-grey - - .row-content - margin: 0 - font-size: 16px - white-space: nowrap - a:hover, - a:active - border-bottom: 1px solid $asphalt-grey - -// old! remove this -.row-li - background: linear-gradient(to right, $pebble-grey 0%, $pebble-grey 10px, white 10px, white 100%) no-repeat - +travisColorRows - +travisBorder - position: relative - font-size: 16px - margin-bottom: .3rem - - @media #{$medium-up} - display: flex - justify-content: flex-start - align-items: center - - h2, h3, small - margin: 0 - font-size: 16px - small - font-weight: $font-weight-bold - margin-right: 1em - - .row-header - width: 100% - - .row-item - margin: .2em - font-weight: $font-weight-normal - white-space: nowrap - padding-left: 1em - a:hover, - a:active, - a:focus - test-decoration: none - .inner-underline - text-decoration: underline - - @media #{$medium-up} - display: inline-block - padding-left: 0 - - %row-element - vertical-align: middle - @media #{$medium-up} - display: inline-block - .row-item - vertical-align: middle - - .two-line - @extend %row-element - padding: .4em 0 - margin-left: 1em - text-align: left - - @media #{$medium-up} - margin-left: 0 - - .one-line - @extend %row-element - .row-item - display: inline-block - .row-nav - display: none - text-align: center - @media #{$medium-up} - display: block diff --git a/app/styles/app/modules/row.scss b/app/styles/app/modules/row.scss new file mode 100644 index 0000000000..01456452e5 --- /dev/null +++ b/app/styles/app/modules/row.scss @@ -0,0 +1,168 @@ +.fade-out { + @media #{$medium-up} { + white-space: nowrap; + + position:relative {} + + overflow: hidden; + + &:after { + content: ""; + + @include fadeOut(right, -90deg, white, 30%); + } + } +} + +.label-align { + vertical-align: middle; + line-height: 1.5; +} + +.rows { + @each $state, $colorMap in $stateMap { + @include rowColor($state, map-get($colorMap, color), map-get($colorMap, gradient)); + } + + @include travisBorder; + + display: flex; + flex-flow: column wrap; + margin-bottom: 1rem; + + @media #{$medium-up} { + position: relative; + flex-flow: row nowrap; + justify-content: space-between; + align-items: center; + } + + .label { + margin: 0; + font-size: 10px; + color: $cement-grey; + text-transform: uppercase; + font-weight: 600; + } + + .row-label, + .row-label a { + font-size: $font-size-m; + color: $cement-grey; + } + + .row-label { + margin: 0; + + a:hover, + a:active { + border-bottom: 1px solid $cement-grey; + } + } + + .row-content { + margin: 0; + font-size: 16px; + white-space: nowrap; + + a:hover, + a:active { + border-bottom: 1px solid $asphalt-grey; + } + } +} + +// old! remove this +.row-li { + background: linear-gradient(to right, $pebble-grey 0%, $pebble-grey 10px, white 10px, white 100%) no-repeat; + + @include travisColorRows; + @include travisBorder; + + position: relative; + font-size: 16px; + margin-bottom: 0.3rem; + + @media #{$medium-up} { + display: flex; + justify-content: flex-start; + align-items: center; + } + + h2, h3, small { + margin: 0; + font-size: 16px; + } + + small { + font-weight: $font-weight-bold; + margin-right: 1em; + } + + .row-header { + width: 100%; + } + + .row-item { + margin: 0.2em; + font-weight: $font-weight-normal; + white-space: nowrap; + padding-left: 1em; + + a:hover, + a:active, + a:focus { + test-decoration: none; + + .inner-underline { + text-decoration: underline; + } + } + + @media #{$medium-up} { + display: inline-block; + padding-left: 0; + } + } + + %row-element { + vertical-align: middle; + + @media #{$medium-up} { + display: inline-block; + } + + .row-item { + vertical-align: middle; + } + } + + .two-line { + @extend %row-element; + + padding: 0.4em 0; + margin-left: 1em; + text-align: left; + + @media #{$medium-up} { + margin-left: 0; + } + } + + .one-line { + @extend %row-element; + + .row-item { + display: inline-block; + } + + .row-nav { + display: none; + text-align: center; + + @media #{$medium-up} { + display: block; + } + } + } +} diff --git a/app/styles/app/modules/search.sass b/app/styles/app/modules/search.sass deleted file mode 100644 index 56997fd1f4..0000000000 --- a/app/styles/app/modules/search.sass +++ /dev/null @@ -1,22 +0,0 @@ -.search--sidebar - position: relative - height: 7.2em - .search-inner - position: absolute - top: 0 - right: 0 - left: 0 - bottom: 0 - margin: auto - width: 90% - height: 33px - border: solid 1px lighten($cement-grey, 20) - border-radius: 4px - overflow: hidden - input - display: inline-block - width: 90% - padding: .5em - vertical-align: middle - border: none - background: white diff --git a/app/styles/app/modules/search.scss b/app/styles/app/modules/search.scss new file mode 100644 index 0000000000..8c0cd9d535 --- /dev/null +++ b/app/styles/app/modules/search.scss @@ -0,0 +1,27 @@ +.search--sidebar { + position: relative; + height: 7.2em; + + .search-inner { + position: absolute; + top: 0; + right: 0; + left: 0; + bottom: 0; + margin: auto; + width: 90%; + height: 33px; + border: solid 1px lighten($cement-grey, 20); + border-radius: 4px; + overflow: hidden; + + input { + display: inline-block; + width: 90%; + padding: 0.5em; + vertical-align: middle; + border: none; + background: white; + } + } +} diff --git a/app/styles/app/modules/status-icon.sass b/app/styles/app/modules/status-icon.sass deleted file mode 100644 index e2a2eec3b9..0000000000 --- a/app/styles/app/modules/status-icon.sass +++ /dev/null @@ -1,48 +0,0 @@ -.status-icon, -.request-icon - +colorSVG($cement-grey) - & * - stroke-linecap: round - stroke-linejoin: round - stroke-miterlimit: 10 - overflow: visible - -.status-icon - @extend %icon - width: 13px - height: 14px - line-height: 0 - margin-right: .3rem - svg * - stroke-width: 2px - - &.started, - &.received, - &.created, - &.queued - height: 7px - svg * - stroke-width: 1px - - &.started, - &.received - transform-origin: center center - animation: rotation 3s infinite ease - -.request-icon - @extend %icon - width: 15px - height: 16px - margin-right: .1rem - - &.cron - width: 18px - height: 19px - -@keyframes rotation - 0% - transform: rotateZ(0deg) - 45%, 55% - transform: rotateZ(180deg) - 100% - transform: rotateZ(360deg) diff --git a/app/styles/app/modules/status-icon.scss b/app/styles/app/modules/status-icon.scss new file mode 100644 index 0000000000..11e36a3ddc --- /dev/null +++ b/app/styles/app/modules/status-icon.scss @@ -0,0 +1,68 @@ +.status-icon, +.request-icon { + @include colorSVG($cement-grey); + + & * { + stroke-linecap: round; + stroke-linejoin: round; + stroke-miterlimit: 10; + overflow: visible; + } +} + +.status-icon { + @extend %icon; + + width: 13px; + height: 14px; + line-height: 0; + margin-right: 0.3rem; + + svg * { + stroke-width: 2px; + } + + &.started, + &.received, + &.created, + &.queued { + height: 7px; + + svg * { + stroke-width: 1px; + } + } + + &.started, + &.received { + transform-origin: center center; + animation: rotation 3s infinite ease; + } +} + +.request-icon { + @extend %icon; + + width: 15px; + height: 16px; + margin-right: 0.1rem; + + &.cron { + width: 18px; + height: 19px; + } +} + +@keyframes rotation { + 0% { + transform: rotateZ(0deg); + } + + 45%, 55% { + transform: rotateZ(180deg); + } + + 100% { + transform: rotateZ(360deg); + } +} diff --git a/app/styles/app/modules/switch.sass b/app/styles/app/modules/switch.sass deleted file mode 100644 index fcb271ba4f..0000000000 --- a/app/styles/app/modules/switch.sass +++ /dev/null @@ -1,75 +0,0 @@ -.switch - $switch-height: 32px - $switch-width: 80px - - $switch-inner-width: 36px - $switch-inner-heigth: 26px - - padding: 0 - - .switch-inner - display: inline-block - width: $switch-width - height: $switch-height - margin-right: 1em - padding: 3px - vertical-align: middle - overflow: visible - background-color: darken($pebble-grey, 10) - border-radius: 3px - border: none - cursor: pointer - span - width: $switch-inner-width - height: $switch-inner-heigth - border-radius: 2px - background-color: $cement-grey - color: white - text-align: center - font-weight: 300 - font-size: 12px - line-height: 2.2 - - span - display: inline-block - vertical-align: middle - - .label - vertical-align: middle - font-size: $font-size-m - display: inline-block - &.label--small .label - width: 7em - font-size: 12px - line-height: 1.3 - - .on - display: none - margin-left: -49% - .icon-on - margin-left: 1px - .off - margin-left: 36px - - &.active - .switch-inner - background-color: $agate-blue - span - background-color: $oxide-blue - .on - display: inline-block - .off - display: none - - &.disabled - cursor: default - pointer-events: none - opacity: .5 - - [class^="icon-"] - +colorSVG(white) - width: 15px - height: 100% - -.feature .switch .on - margin-left: 0 diff --git a/app/styles/app/modules/switch.scss b/app/styles/app/modules/switch.scss new file mode 100644 index 0000000000..0db629e4d8 --- /dev/null +++ b/app/styles/app/modules/switch.scss @@ -0,0 +1,100 @@ +.switch { + $switch-height: 32px; + $switch-width: 80px; + + $switch-inner-width: 36px; + $switch-inner-heigth: 26px; + + padding: 0; + + .switch-inner { + display: inline-block; + width: $switch-width; + height: $switch-height; + margin-right: 1em; + padding: 3px; + vertical-align: middle; + overflow: visible; + background-color: darken($pebble-grey, 10); + border-radius: 3px; + border: none; + cursor: pointer; + + span { + width: $switch-inner-width; + height: $switch-inner-heigth; + border-radius: 2px; + background-color: $cement-grey; + color: white; + text-align: center; + font-weight: 300; + font-size: 12px; + line-height: 2.2; + } + } + + span { + display: inline-block; + vertical-align: middle; + } + + .label { + vertical-align: middle; + font-size: $font-size-m; + display: inline-block; + } + + &.label--small .label { + width: 7em; + font-size: 12px; + line-height: 1.3; + } + + .on { + display: none; + margin-left: -49%; + + .icon-on { + margin-left: 1px; + } + } + + .off { + margin-left: 36px; + } + + &.active { + .switch-inner { + background-color: $agate-blue; + + span { + background-color: $oxide-blue; + } + } + + .on { + display: inline-block; + } + + .off { + display: none; + } + } + + &.disabled { + cursor: default; + pointer-events: none; + opacity: 0.5; + } + + [class^="icon-"] { + @include colorSVG(white); + + width: 15px; + height: 100%; + } +} + +.feature .switch .on { + margin-left: 0; +} diff --git a/app/styles/app/modules/sync-button.sass b/app/styles/app/modules/sync-button.sass deleted file mode 100644 index 3836a1f383..0000000000 --- a/app/styles/app/modules/sync-button.sass +++ /dev/null @@ -1,44 +0,0 @@ -.sync-button - vertical-align: middle - display: flex - flex-flow: row-reverse wrap - position: relative - .button - position: relative - @include z-index(above-above) - height: 2.6rem - padding: 0.6em 0.8em - background-color: $oxide-blue - border: none - border-radius: 2px - &:hover - background-color: #229191 - .sync-last - position: absolute - right: 9em - top: 0 - width: 170% - @include z-index(under) - transition: transform 150ms ease, opacity 250ms ease - transform: translateX(80%) - opacity: 0 - background: white - .button:hover ~ .sync-last - transform: translateX(0) - opacity: 1 - @include z-index(above) - - .is-syncing - background-color: $oxide-blue - - .loading-indicator--white - vertical-align: middle - margin-right: .5em - -.sync-last - display: inline-block - margin: 0 1em 0 - color: $asphalt-grey - text-align: right - line-height: 3 - font-size: 0.9rem diff --git a/app/styles/app/modules/sync-button.scss b/app/styles/app/modules/sync-button.scss new file mode 100644 index 0000000000..349b1c948c --- /dev/null +++ b/app/styles/app/modules/sync-button.scss @@ -0,0 +1,61 @@ +.sync-button { + vertical-align: middle; + display: flex; + flex-flow: row-reverse wrap; + position: relative; + + .button { + position: relative; + + @include z-index(above-above); + + height: 2.6rem; + padding: 0.6em 0.8em; + background-color: $oxide-blue; + border: none; + border-radius: 2px; + + &:hover { + background-color: #229191; + } + } + + .sync-last { + position: absolute; + right: 9em; + top: 0; + width: 170%; + + @include z-index(under); + + transition: transform 150ms ease, opacity 250ms ease; + transform: translateX(80%); + opacity: 0; + background: white; + } + + .button:hover ~ .sync-last { + transform: translateX(0); + opacity: 1; + + @include z-index(above); + } + + .is-syncing { + background-color: $oxide-blue; + } + + .loading-indicator--white { + vertical-align: middle; + margin-right: 0.5em; + } +} + +.sync-last { + display: inline-block; + margin: 0 1em 0; + color: $asphalt-grey; + text-align: right; + line-height: 3; + font-size: 0.9rem; +} diff --git a/app/styles/app/modules/tabs.sass b/app/styles/app/modules/tabs.sass deleted file mode 100644 index e557a1947b..0000000000 --- a/app/styles/app/modules/tabs.sass +++ /dev/null @@ -1,89 +0,0 @@ -$border-size: 2px - -=tabLinkHighlight - &:after - content: "" - position: absolute - bottom: - $border-size - display: block - width: 100% - height: 2px - background-color: $oxide-blue - -%travistab-nav-base - ul - padding: 0 - margin: 0 - list-style: none - li - display: inline-block - vertical-align: bottom - &.active a - color: $oxide-blue - +tabLinkHighlight - a - position: relative - display: block - padding: .5em 0 - &:hover, - &:active, - &.active - color: $oxide-blue - +tabLinkHighlight - -.travistab - margin-top: 2em - -.travistab-nav - @extend %travistab-nav-base - - li:not(:last-of-type) - margin-right: 1.5em - a - &:hover, - &:active, - &.active - &:after - background-color: $oxide-blue - - &.travistab-nav--underline - border-bottom: $border-size solid $pebble-grey - -.travistab-nav--secondary - @extend %travistab-nav-base - margin-bottom: 1.2rem - li - width: 25% - text-align: center - padding-right: 1em - a - border-bottom: $border-size solid $pebble-grey - &:hover, - &:active, - &.active - &:after - background-color: $agate-blue - -.travistab-nav - #tab_build, - #tab_job, - #tab_request, - #tab_requests, - #tab_caches, - #tab_settings - display: none - &.active - display: inline-block - -#tab_build - position: relative - @media #{$medium-up} - left: .5em - - .tab-arrow - display: inline-block - position: absolute - top: 8px - left: -22px - width: 1.2em - height: 1.4em diff --git a/app/styles/app/modules/tabs.scss b/app/styles/app/modules/tabs.scss new file mode 100644 index 0000000000..2bc00dcfff --- /dev/null +++ b/app/styles/app/modules/tabs.scss @@ -0,0 +1,128 @@ +$border-size: 2px; + +@mixin tabLinkHighlight { + &:after { + content: ""; + position: absolute; + bottom: -$border-size; + display: block; + width: 100%; + height: 2px; + background-color: $oxide-blue; + } +} + +%travistab-nav-base { + ul { + padding: 0; + margin: 0; + list-style: none; + } + + li { + display: inline-block; + vertical-align: bottom; + + &.active a { + color: $oxide-blue; + + @include tabLinkHighlight; + } + } + + a { + position: relative; + display: block; + padding: 0.5em 0; + + &:hover, + &:active, + &.active { + color: $oxide-blue; + + @include tabLinkHighlight; + } + } +} + +.travistab { + margin-top: 2em; +} + +.travistab-nav { + @extend %travistab-nav-base; + + li:not(:last-of-type) { + margin-right: 1.5em; + } + + a { + &:hover, + &:active, + &.active { + &:after { + background-color: $oxide-blue; + } + } + } + + &.travistab-nav--underline { + border-bottom: $border-size solid $pebble-grey; + } +} + +.travistab-nav--secondary { + @extend %travistab-nav-base; + + margin-bottom: 1.2rem; + + li { + width: 25%; + text-align: center; + padding-right: 1em; + } + + a { + border-bottom: $border-size solid $pebble-grey; + + &:hover, + &:active, + &.active { + &:after { + background-color: $agate-blue; + } + } + } +} + +.travistab-nav { + #tab_build, + #tab_job, + #tab_request, + #tab_requests, + #tab_caches, + #tab_settings { + display: none; + + &.active { + display: inline-block; + } + } +} + +#tab_build { + position: relative; + + @media #{$medium-up} { + left: 0.5em; + } + + .tab-arrow { + display: inline-block; + position: absolute; + top: 8px; + left: -22px; + width: 1.2em; + height: 1.4em; + } +} diff --git a/app/styles/app/modules/tofuburger.sass b/app/styles/app/modules/tofuburger.sass deleted file mode 100644 index 11995183b5..0000000000 --- a/app/styles/app/modules/tofuburger.sass +++ /dev/null @@ -1,7 +0,0 @@ -.tofuburger - height: $top-height - width: 35px - border: none - line-height: 1 - outline: none - cursor: pointer diff --git a/app/styles/app/modules/tofuburger.scss b/app/styles/app/modules/tofuburger.scss new file mode 100644 index 0000000000..9ab8e1fc08 --- /dev/null +++ b/app/styles/app/modules/tofuburger.scss @@ -0,0 +1,8 @@ +.tofuburger { + height: $top-height; + width: 35px; + border: none; + line-height: 1; + outline: none; + cursor: pointer; +} diff --git a/app/styles/app/modules/tooltips.sass b/app/styles/app/modules/tooltips.sass deleted file mode 100644 index 3617949039..0000000000 --- a/app/styles/app/modules/tooltips.sass +++ /dev/null @@ -1,4 +0,0 @@ -.ember-tooltip - padding: 3px 6px - font-size: 12px - background-color: #666 diff --git a/app/styles/app/modules/tooltips.scss b/app/styles/app/modules/tooltips.scss new file mode 100644 index 0000000000..0fe154daee --- /dev/null +++ b/app/styles/app/modules/tooltips.scss @@ -0,0 +1,5 @@ +.ember-tooltip { + padding: 3px 6px; + font-size: 12px; + background-color: #666; +} diff --git a/app/styles/app/pages/getting-started.sass b/app/styles/app/pages/getting-started.sass deleted file mode 100644 index 3000930044..0000000000 --- a/app/styles/app/pages/getting-started.sass +++ /dev/null @@ -1,62 +0,0 @@ -.getting-started - @include linkStyle - max-width: 900px - margin: auto - padding: 2em 1em - @media #{$medium} - padding: 2em 0 - p, li - font-size: $font-size-m - line-height: 25px - .h2--grey - margin-bottom: 1em - - .getting-started-hidden // in the SVG! - display: none - -.getting-started-steps - @include resetul - h2:before - width: 1.5em - height: 1.5em - margin-right: .5em - font-size: $font-size-m - background-color: #35a764 - color: white - display: inline-block - border-radius: 50% - text-align: center - vertical-align: top - li:nth-child(1) - h2:before - content: "1" - li:nth-child(2) - h2:before - content: "2" - li:nth-child(3) - h2:before - content: "3" - > li - display: flex - flex-flow: column - @media #{$medium} - flex-flow: row nowrap - margin-bottom: 5rem - &:nth-of-type(2) - flex-flow: row-reverse nowrap - > div - flex: 1 0 70% - -.getting-started-image - width: 100% - height: 190px - flex: 0 0 250px - -.note - padding: .4em .5em - border-radius: 4px - font-style: italic - color: $asphalt-grey - background-color: $agate-blue - strong - text-transform: uppercase diff --git a/app/styles/app/pages/getting-started.scss b/app/styles/app/pages/getting-started.scss new file mode 100644 index 0000000000..305006fd47 --- /dev/null +++ b/app/styles/app/pages/getting-started.scss @@ -0,0 +1,96 @@ +.getting-started { + @include linkStyle; + + max-width: 900px; + margin: auto; + padding: 2em 1em; + + @media #{$medium} { + padding: 2em 0; + } + + p, li { + font-size: $font-size-m; + line-height: 25px; + } + + .h2--grey { + margin-bottom: 1em; + } + + .getting-started-hidden { + // in the SVG! + display: none; + } +} + +.getting-started-steps { + @include resetul; + + h2:before { + width: 1.5em; + height: 1.5em; + margin-right: 0.5em; + font-size: $font-size-m; + background-color: #35a764; + color: white; + display: inline-block; + border-radius: 50%; + text-align: center; + vertical-align: top; + } + + li:nth-child(1) { + h2:before { + content: "1"; + } + } + + li:nth-child(2) { + h2:before { + content: "2"; + } + } + + li:nth-child(3) { + h2:before { + content: "3"; + } + } + + > li { + display: flex; + flex-flow: column; + + @media #{$medium} { + flex-flow: row nowrap; + margin-bottom: 5rem; + + &:nth-of-type(2) { + flex-flow: row-reverse nowrap; + + > div { + flex: 1 0 70%; + } + } + } + } +} + +.getting-started-image { + width: 100%; + height: 190px; + flex: 0 0 250px; +} + +.note { + padding: 0.4em 0.5em; + border-radius: 4px; + font-style: italic; + color: $asphalt-grey; + background-color: $agate-blue; + + strong { + text-transform: uppercase; + } +} diff --git a/app/styles/app/pages/home-pro.sass b/app/styles/app/pages/home-pro.sass deleted file mode 100644 index aab6ea1f79..0000000000 --- a/app/styles/app/pages/home-pro.sass +++ /dev/null @@ -1,282 +0,0 @@ -.landing-pro - br - display: none - @media #{$medium-up} - display: block - - .wrapper - width: 100% - padding-bottom: 0 - margin-bottom: 0 - - .landing-footer - margin-top: 0 - - .inner - margin: auto - max-width: 1024px - padding: 0 $column-gutter/2 - - .text-logo - @extend .text-small - line-height: 1.8 - margin-bottom: 2em - text-align: left - @media #{$medium-up} - width: 80% - margin-right: auto - margin-left: auto - @media #{$large-up} - width: 70% - - .hero-computer - width: 100% - height: 35em - margin-top: 3em - @media #{$medium-up} - position: absolute - margin-top: 0 - transform: translateY(-.1rem) - - .section--grey - padding: 4rem 0 5rem - background-color: #F6F6F6 - - .section--white - padding: 6rem 0 - background-color: white - - .section--center - text-align: center - - .section--feature - .inner - @media #{$medium-up} - flex-direction: row-reverse - display: flex - justify-content: space-between - align-items: center - .section-list, - .section-text - flex: 0 0 48% - padding: 0 1em - - .list--check - li - @extend .text-big - line-height: 1.65 - - .section--hero - .inner - @media #{$medium-up} - display: flex - justify-content: space-between - flex-direction: row - .section-text - flex: 0 0 47% - text-align: center - @media #{$medium-up} - text-align: left - .section-image - flex: 0 0 50% - - .section-image - position: relative - - .text-big - margin: 0.8em 0 1.7em - - %list - list-style: none - padding: 0 - margin: 0 - - .list--customers - @extend %list - width: 80% - margin: 2em auto 0 - @media #{$medium-up} - display: flex - justify-content: space-around - flex-wrap: wrap - align-items: center - li - width: 9em // because Safari can't handle flex-basis - flex: 0 0 9em - margin-bottom: 3em - @media #{$medium-up} - margin-bottom: 0 - - .list--languages - @extend %list - @media #{$medium-up} - display: flex - justify-content: space-around - flex-wrap: wrap - li - flex: 0 0 5em - - .list--check, - .list--cross - @extend %list - - .list--features - @extend %list - margin-top: 5em - @media #{$medium-up} - display: flex - justify-content: space-between - flex-flow: row wrap - margin-top: 1em - li - flex: 0 0 16em - - [class^="feature-"] - display: block - height: 2em - width: 2em - margin: auto - - .language - display: block - height: 3.5em - width: 3.5em - margin: 0 auto .5em - - .customer - svg - max-height: 28px - - -.landing-button - display: inline-block - padding: 0.6em 0.9em - margin: 0 auto - color: white - border-radius: 2px - font-size: 27px - font-weight: inherit - text-decoration: none - background-color: $turf-green - cursor: pointer - &:hover, - &:active - color: white - background-color: darken($turf-green, 8) - -.hero-button - @extend .landing-button - svg - width: 45px - height: 45px - vertical-align: middle - margin-right: .4em - &.org - margin: 2em auto - -%h1 - margin: 0 - font-size: 54px - font-weight: 200 - line-height: 1.2 - -.h1--grey - @extend %h1 - @include linkStyle - color: $asphalt-grey !important - a - color: $asphalt-grey - -.h1--teal - @extend %h1 - font-size: 64px - color: $oxide-blue !important - -.h1--green - @extend %h1 - color: $turf-green !important - -.h1--red - @extend %h1 - color: $brick-red !important - -%h2 - margin: 0 0 .5em - font-size: 36px - font-weight: 200 - line-height: 1.3 - -.h2--grey - @extend %h2 - color: $asphalt-grey - -.h2--green - @extend %h2 - color: $turf-green - -.h2--red - @extend %h2 - color: $brick-red - -.h2--teal - @extend %h2 - color: $oxide-blue - -%h3 - margin: .5em 0 - font-size: 22px - font-weight: 300 - -.h3 - @extend %h3 - -.h3--plans - @extend %h3 - font-size: 28px - text-align: center - line-height: 1.3 - -.h3--teal - @extend %h3 - color: $oxide-blue - -.h3--red - @extend %h3 - color: $brick-red - -.h3--green - @extend %h3 - color: $turf-green - -.h3--yellow - @extend %h3 - color: $dozer-yellow - -.text-big - @include linkStyle - font-size: 20px - font-weight: 300 - line-height: 1.55 - -.text-small - @include linkStyle - margin: 0 0 2.5em - font-size: 16px - -.text-medium - @include linkStyle - margin: 1.5em 0 - font-size: 16px - -.h2--grey - font-size: 45px - color: $asphalt-grey -.h2--teal - font-size: 45px - color: $oxide-blue -.em--yellow - color: $dozer-yellow -.align-right - text-align: right -.align-center - text-align: center diff --git a/app/styles/app/pages/home-pro.scss b/app/styles/app/pages/home-pro.scss new file mode 100644 index 0000000000..f94257e561 --- /dev/null +++ b/app/styles/app/pages/home-pro.scss @@ -0,0 +1,400 @@ +.landing-pro { + br { + display: none; + + @media #{$medium-up} { + display: block; + } + } + + .wrapper { + width: 100%; + padding-bottom: 0; + margin-bottom: 0; + } + + .landing-footer { + margin-top: 0; + } + + .inner { + margin: auto; + max-width: 1024px; + padding: 0 ($column-gutter / 2); + } + + .text-logo { + @extend .text-small; + + line-height: 1.8; + margin-bottom: 2em; + text-align: left; + + @media #{$medium-up} { + width: 80%; + margin-right: auto; + margin-left: auto; + } + + @media #{$large-up} { + width: 70%; + } + } + + .hero-computer { + width: 100%; + height: 35em; + margin-top: 3em; + + @media #{$medium-up} { + position: absolute; + margin-top: 0; + transform: translateY(-0.1rem); + } + } + + .section--grey { + padding: 4rem 0 5rem; + background-color: #F6F6F6; + } + + .section--white { + padding: 6rem 0; + background-color: white; + } + + .section--center { + text-align: center; + } + + .section--feature { + .inner { + @media #{$medium-up} { + flex-direction: row-reverse; + display: flex; + justify-content: space-between; + align-items: center; + } + } + + .section-list, + .section-text { + flex: 0 0 48%; + padding: 0 1em; + } + + .list--check { + li { + @extend .text-big; + + line-height: 1.65; + } + } + } + + .section--hero { + .inner { + @media #{$medium-up} { + display: flex; + justify-content: space-between; + flex-direction: row; + } + } + + .section-text { + flex: 0 0 47%; + text-align: center; + + @media #{$medium-up} { + text-align: left; + } + } + + .section-image { + flex: 0 0 50%; + } + + .section-image { + position: relative; + } + + .text-big { + margin: 0.8em 0 1.7em; + } + } + + %list { + list-style: none; + padding: 0; + margin: 0; + } + + .list--customers { + @extend %list; + + width: 80%; + margin: 2em auto 0; + + @media #{$medium-up} { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + align-items: center; + } + + li { + width: 9em; + flex: 0 0 9em; + margin-bottom: 3em; + + @media #{$medium-up} { + margin-bottom: 0; + } + } + } + + .list--languages { + @extend %list; + + @media #{$medium-up} { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + } + + li { + flex: 0 0 5em; + } + } + + .list--check, + .list--cross { + @extend %list; + } + + .list--features { + @extend %list; + + margin-top: 5em; + + @media #{$medium-up} { + display: flex; + justify-content: space-between; + flex-flow: row wrap; + margin-top: 1em; + } + + li { + flex: 0 0 16em; + } + } + + [class^="feature-"] { + display: block; + height: 2em; + width: 2em; + margin: auto; + } + + .language { + display: block; + height: 3.5em; + width: 3.5em; + margin: 0 auto 0.5em; + } + + .customer { + svg { + max-height: 28px; + } + } +} + +.landing-button { + display: inline-block; + padding: 0.6em 0.9em; + margin: 0 auto; + color: white; + border-radius: 2px; + font-size: 27px; + font-weight: inherit; + text-decoration: none; + background-color: $turf-green; + cursor: pointer; + + &:hover, + &:active { + color: white; + background-color: darken($turf-green, 8); + } +} + +.hero-button { + @extend .landing-button; + + svg { + width: 45px; + height: 45px; + vertical-align: middle; + margin-right: 0.4em; + } + + &.org { + margin: 2em auto; + } +} + +%h1 { + margin: 0; + font-size: 54px; + font-weight: 200; + line-height: 1.2; +} + +.h1--grey { + @extend %h1; + + @include linkStyle; + + color: $asphalt-grey !important; + + a { + color: $asphalt-grey; + } +} + +.h1--teal { + @extend %h1; + + font-size: 64px; + color: $oxide-blue !important; +} + +.h1--green { + @extend %h1; + + color: $turf-green !important; +} + +.h1--red { + @extend %h1; + + color: $brick-red !important; +} + +%h2 { + margin: 0 0 0.5em; + font-size: 36px; + font-weight: 200; + line-height: 1.3; +} + +.h2--grey { + @extend %h2; + + color: $asphalt-grey; +} + +.h2--green { + @extend %h2; + + color: $turf-green; +} + +.h2--red { + @extend %h2; + + color: $brick-red; +} + +.h2--teal { + @extend %h2; + + color: $oxide-blue; +} + +%h3 { + margin: 0.5em 0; + font-size: 22px; + font-weight: 300; +} + +.h3 { + @extend %h3; +} + +.h3--plans { + @extend %h3; + + font-size: 28px; + text-align: center; + line-height: 1.3; +} + +.h3--teal { + @extend %h3; + + color: $oxide-blue; +} + +.h3--red { + @extend %h3; + + color: $brick-red; +} + +.h3--green { + @extend %h3; + + color: $turf-green; +} + +.h3--yellow { + @extend %h3; + + color: $dozer-yellow; +} + +.text-big { + @include linkStyle; + + font-size: 20px; + font-weight: 300; + line-height: 1.55; +} + +.text-small { + @include linkStyle; + + margin: 0 0 2.5em; + font-size: 16px; +} + +.text-medium { + @include linkStyle; + + margin: 1.5em 0; + font-size: 16px; +} + +.h2--grey { + font-size: 45px; + color: $asphalt-grey; +} + +.h2--teal { + font-size: 45px; + color: $oxide-blue; +} + +.em--yellow { + color: $dozer-yellow; +} + +.align-right { + text-align: right; +} + +.align-center { + text-align: center; +} diff --git a/app/styles/app/pages/landing.sass b/app/styles/app/pages/landing.sass deleted file mode 100644 index 1f98692d6a..0000000000 --- a/app/styles/app/pages/landing.sass +++ /dev/null @@ -1,421 +0,0 @@ -.top.landing-page .topbar, -.wrapper.centered .topbar - margin: 0 auto - max-width: 1024px - -.top.landing-page - background-color: #fff - -.landing-centered-wrapper - .button - .sync-spinner - height: 1.45em; - margin-right: 0.3em; - transform: translateY(-0.1em); - -.landing - margin: 0 auto 170px auto - font-weight: 300 - overflow-x: hidden - - h1 - font-size: 5em - line-height: 1em - font-weight: 300 - color: rgba($asphalt-grey, .8) - margin-bottom: 0 - - .hero, .oss-testing, .customers, .recent-builds, .free-for-oss, .private-repos, .landing-features-list, .build-flows, .user-testimonials - padding: 70px 0 70px 0 - - .hero, .oss-testing, .customers, .recent-builds-text, .free-for-oss, .private-repos, .landing-features-list, .build-flows, .user-testimonials - - h1, h2 - margin-top: 0 - - h2 - font-size: 3.3em - line-height: 1.15em - font-weight: 300 - color: $turf-green - - p - line-height: 1.5em - color: $asphalt-grey - font-size: 1.7em - - .hero.z-1 - text-align: center - position: relative - - - .landing-centered-wrapper - max-width: 1024px - margin: 0 auto - - > .columns.medium-6:first-child - padding-right: 2em - > .columns.medium-6:last-child - padding-left: 2em - - #laptop - margin-bottom: -192px - - #laptop img - border: 2px solid rgba($cement-grey, 0.2) - border-radius: 2px - - .hero - h1 - color: $oxide-blue - line-height: 1.2em - margin-bottom: 0 - - p - margin: 0 - line-height: 1.5em - - br.mobile-break - display: none - - .loading-indicator--white - height: 1.4em; - line-height: 1; - margin-right: 0.5em; - - .oss-testing - background-color: #ffffff - text-align: center - position: relative - - h2 - margin: 0 - - p - margin-top: 0.5em - margin-bottom: 2em - - br.mobile-break - display: none - .os-numbers - width: 80% - @media #{$medium-up} - width: 60% - - .oss-flip-numbers - width: 90% - display: inline-block - margin: 0 auto - @media #{$medium-up} - width: 80% - white-space: nowrap - - .flip-num - display: inline-block - padding-right: 10px - - img - height: 140px - max-width: 55px - @media #{$medium-up} - max-width: 93px - - .customers - text-align: center - - .left - text-align: left - padding: 0 0 0 12% - .free-for-oss - text-align: center - - h1 - margin-bottom: 0.3em - - p - margin: 0 - - span.bold-italic - font-weight: 600 - font-style: italic - - br.mobile-no-break - display: inline-block - - .os-numbers - width: 80% - @media #{$medium-up} - width: 60% - - .private-repos - text-align: center - - h2 - color: $oxide-blue - margin: 0 - text-align: right - - p - margin-top: 0.5em - margin-bottom: 2em - text-align: right - - a - text-decoration: none - border-bottom: 1px solid $asphalt-grey - transition: all 200ms ease - &:hover - border-bottom: none - color: $cement-grey - - .mobile-envelope - display: none - - .desktop-envelope - display: inline-block - - .landing-features-list - h2 - margin: 0 - - h3 - font-size: 1.4em - font-weight: 300 - text-align: center - margin-bottom: 35px - padding-top: 40px - - p - font-size: 16px - - br.mobile-break - display: none - - .features-callouts - text-align: center - @media #{$medium-only} - float: none - - #f-co-1, #f-co-2, #f-co-3, #f-co-4 - background-repeat: no-repeat; - background-position: 50% 0 - height: 32px - - #f-co-1, #f-co-2, #f-co-3, #f-co-4 - background-image: url('../images/landing-page/features-callouts-1.svg') - - #f-co-2 - background-image: url('../images/landing-page/features-callouts-2.svg') - - #f-co-3 - background-image: url('../images/landing-page/features-callouts-3.svg') - - #f-co-4 - background-image: url('../images/landing-page/features-callouts-4.svg') - - .features-checked - padding-left: 30px - @media #{$medium-only} - float: none - - h2 - @media #{$medium-only} - width: grid-calc(8, 12) - margin: 1em auto - ul - @media #{$medium-only} - width: grid-calc(5, 12) - margin: auto - - ul - @include resetul - margin-top: 1.6rem; - - li - font-size: 1.7em - line-height: 1.7em - &:before - @extend %icon - content: "" - background-image: url('../images/landing-page/features-check.svg') - background-size: 100% - background-repeat: no-repeat - width: 0.7em - height: 0.7em - margin-right: .3em - - .build-flows - text-align: center - - h2 - color: $cement-grey - - h2#pr-bf-margin - margin-top: 90px - - .branch-bf - .bf - display: inline-block - width: 120px - - p - font-size: 13px - line-height: 1.5em - - .divider-line-horizontal - width: 50px - height: 3px - background: lighten($cement-grey, 30) - display: inline-block - margin-bottom: 75px - - .divider-line-vertical - display: none - - .user-testimonials - margin-bottom: 50px - - h2 - color: $oxide-blue - text-align: right - - p - font-size: 1.2em - margin: 0 - display: inline-block - - img.home-avatar - max-width: 81px - float: right - - img.social - margin: -2px 3px 0 15px - display: inline-block - - .author - font-weight: 500 - margin: 6px 0 0 0 - - .title - margin: 0 0 20px 0 - a - font-size: 1.2em - - a:hover - text-decoration: underline - - @media (max-width: 900px) - .oss-testing br.mobile-break - display: inline-block - - .landing-centered-wrapper - width: 100% - - @media (max-width: 1024px) - .landing-features-list .features-checked - margin-top: 40px - - .landing-features-list .features-checked h2 - text-align: center - - @media (max-width: 886px) - #hero-copy - display: block - width: 100% - text-align: center - - .hero h1 - max-width: 100% - - .hero p - text-align: center - max-width: 100% - - .hero br.mobile-break - display: inline-block - - .landing-features-list .features-callouts - padding: 0 60px 0 60px - - .landing-features-list .features-checked - padding: 0 60px 0 60px - - @media (max-width: 846px) - .build-flows .branch-bf .bf - width: 100% - display: block - clear: all - - .build-flows .branch-bf .bf img - width: 120px - height: 120px - - .build-flows .branch-bf .bf p - font-size: 1.5em - - .build-flows .branch-bf .divider-line-horizontal - display: none - - .build-flows .branch-bf .divider-line-vertical - width: 3px - height: 40px - background: $pebble-grey - display: inline-block - margin-bottom: 10px - - @media (max-width: 797px) - .customers .left - text-align: center - padding: 20px 0 0 0 - - .recent-builds-text h2, - .user-testimonials h2, - .private-repos h2, - .recent-builds-text p, - .user-testimonials p, - .private-repos p - text-align: center - - .free-for-oss br.mobile-no-break - display: none - - .private-repos .desktop-envelope - display: none - - .private-repos .mobile-envelope - display: inline-block - margin-bottom: 40px - - .user-testimonials - margin-bottom: 50px - - @media (max-width: 640px) - .user-testimonials - margin-bottom: 140px - - @media (max-width: 608px) - br.mobile-break - display: inline-break - -.landing-vert-center-m - @media #{$medium-up} - position: relative - transform: translateY(65%) -.landing-vert-center-s - @media #{$medium-up} - position: relative - overflow: auto - transform: translateY(7%) - -.landing-page - .navigation-nested - background-color: white - -.landing, -.landing-pro - background-color: white - margin-bottom: 0 - -.landing-pro - .footer - background: white diff --git a/app/styles/app/pages/landing.scss b/app/styles/app/pages/landing.scss new file mode 100644 index 0000000000..26f265cc65 --- /dev/null +++ b/app/styles/app/pages/landing.scss @@ -0,0 +1,562 @@ +.top.landing-page .topbar, +.wrapper.centered .topbar { + margin: 0 auto; + max-width: 1024px; +} + +.top.landing-page { + background-color: #fff; +} + +.landing-centered-wrapper { + .button { + .sync-spinner { + height: 1.45em; + margin-right: 0.3em; + transform: translateY(-0.1em); + } + } +} + +.landing { + margin: 0 auto 170px auto; + font-weight: 300; + overflow-x: hidden; + + h1 { + font-size: 5em; + line-height: 1em; + font-weight: 300; + color: rgba($asphalt-grey, 0.8); + margin-bottom: 0; + } + + .hero, .oss-testing, .customers, .recent-builds, .free-for-oss, .private-repos, .landing-features-list, .build-flows, .user-testimonials { + padding: 70px 0 70px 0; + } + + .hero, .oss-testing, .customers, .recent-builds-text, .free-for-oss, .private-repos, .landing-features-list, .build-flows, .user-testimonials { + h1, h2 { + margin-top: 0; + } + + h2 { + font-size: 3.3em; + line-height: 1.15em; + font-weight: 300; + color: $turf-green; + } + + p { + line-height: 1.5em; + color: $asphalt-grey; + font-size: 1.7em; + } + } + + .hero.z-1 { + text-align: center; + position: relative; + } + + .landing-centered-wrapper { + max-width: 1024px; + margin: 0 auto; + + > .columns.medium-6:first-child { + padding-right: 2em; + } + + > .columns.medium-6:last-child { + padding-left: 2em; + } + } + + #laptop { + margin-bottom: -192px; + } + + #laptop img { + border: 2px solid rgba($cement-grey, 0.2); + border-radius: 2px; + } + + .hero { + h1 { + color: $oxide-blue; + line-height: 1.2em; + margin-bottom: 0; + } + + p { + margin: 0; + line-height: 1.5em; + } + + br.mobile-break { + display: none; + } + + .loading-indicator--white { + height: 1.4em; + line-height: 1; + margin-right: 0.5em; + } + } + + .oss-testing { + background-color: #ffffff; + text-align: center; + position: relative; + + h2 { + margin: 0; + } + + p { + margin-top: 0.5em; + margin-bottom: 2em; + } + + br.mobile-break { + display: none; + } + } + + .os-numbers { + width: 80%; + + @media #{$medium-up} { + width: 60%; + } + } + + .oss-flip-numbers { + width: 90%; + display: inline-block; + margin: 0 auto; + + @media #{$medium-up} { + width: 80%; + white-space: nowrap; + } + } + + .flip-num { + display: inline-block; + padding-right: 10px; + + img { + height: 140px; + max-width: 55px; + + @media #{$medium-up} { + max-width: 93px; + } + } + } + + .customers { + text-align: center; + + .left { + text-align: left; + padding: 0 0 0 12%; + } + } + + .free-for-oss { + text-align: center; + + h1 { + margin-bottom: 0.3em; + } + + p { + margin: 0; + } + + span.bold-italic { + font-weight: 600; + font-style: italic; + } + + br.mobile-no-break { + display: inline-block; + } + } + + .os-numbers { + width: 80%; + + @media #{$medium-up} { + width: 60%; + } + } + + .private-repos { + text-align: center; + + h2 { + color: $oxide-blue; + margin: 0; + text-align: right; + } + + p { + margin-top: 0.5em; + margin-bottom: 2em; + text-align: right; + } + + a { + text-decoration: none; + border-bottom: 1px solid $asphalt-grey; + transition: all 200ms ease; + + &:hover { + border-bottom: none; + color: $cement-grey; + } + } + + .mobile-envelope { + display: none; + } + + .desktop-envelope { + display: inline-block; + } + } + + .landing-features-list { + h2 { + margin: 0; + } + + h3 { + font-size: 1.4em; + font-weight: 300; + text-align: center; + margin-bottom: 35px; + padding-top: 40px; + } + + p { + font-size: 16px; + } + + br.mobile-break { + display: none; + } + + .features-callouts { + text-align: center; + + @media #{$medium-only} { + float: none; + } + } + + #f-co-1, #f-co-2, #f-co-3, #f-co-4 { + background-repeat: no-repeat; + background-position: 50% 0; + height: 32px; + } + + #f-co-1, #f-co-2, #f-co-3, #f-co-4 { + background-image: url("../images/landing-page/features-callouts-1.svg"); + } + + #f-co-2 { + background-image: url("../images/landing-page/features-callouts-2.svg"); + } + + #f-co-3 { + background-image: url("../images/landing-page/features-callouts-3.svg"); + } + + #f-co-4 { + background-image: url("../images/landing-page/features-callouts-4.svg"); + } + + .features-checked { + padding-left: 30px; + + @media #{$medium-only} { + float: none; + } + + h2 { + @media #{$medium-only} { + width: grid-calc(8, 12); + margin: 1em auto; + } + } + + ul { + @media #{$medium-only} { + width: grid-calc(5, 12); + margin: auto; + } + } + } + + ul { + @include resetul; + + margin-top: 1.6rem; + } + + li { + font-size: 1.7em; + line-height: 1.7em; + + &:before { + @extend %icon; + + content: ""; + background-image: url("../images/landing-page/features-check.svg"); + background-size: 100%; + background-repeat: no-repeat; + width: 0.7em; + height: 0.7em; + margin-right: 0.3em; + } + } + } + + .build-flows { + text-align: center; + + h2 { + color: $cement-grey; + } + + h2#pr-bf-margin { + margin-top: 90px; + } + + .branch-bf { + .bf { + display: inline-block; + width: 120px; + + p { + font-size: 13px; + line-height: 1.5em; + } + } + } + + .divider-line-horizontal { + width: 50px; + height: 3px; + background: lighten($cement-grey, 30); + display: inline-block; + margin-bottom: 75px; + } + + .divider-line-vertical { + display: none; + } + } + + .user-testimonials { + margin-bottom: 50px; + + h2 { + color: $oxide-blue; + text-align: right; + } + + p { + font-size: 1.2em; + margin: 0; + display: inline-block; + } + + img.home-avatar { + max-width: 81px; + float: right; + } + + img.social { + margin: (-2px) 3px 0 15px; + display: inline-block; + } + + .author { + font-weight: 500; + margin: 6px 0 0 0; + } + + .title { + margin: 0 0 20px 0; + } + + a { + font-size: 1.2em; + } + + a:hover { + text-decoration: underline; + } + } + + @media (max-width: 900px) { + .oss-testing br.mobile-break { + display: inline-block; + } + + .landing-centered-wrapper { + width: 100%; + } + } + + @media (max-width: 1024px) { + .landing-features-list .features-checked { + margin-top: 40px; + } + + .landing-features-list .features-checked h2 { + text-align: center; + } + } + + @media (max-width: 886px) { + #hero-copy { + display: block; + width: 100%; + text-align: center; + } + + .hero h1 { + max-width: 100%; + } + + .hero p { + text-align: center; + max-width: 100%; + } + + .hero br.mobile-break { + display: inline-block; + } + + .landing-features-list .features-callouts { + padding: 0 60px 0 60px; + } + + .landing-features-list .features-checked { + padding: 0 60px 0 60px; + } + } + + @media (max-width: 846px) { + .build-flows .branch-bf .bf { + width: 100%; + display: block; + clear: all; + } + + .build-flows .branch-bf .bf img { + width: 120px; + height: 120px; + } + + .build-flows .branch-bf .bf p { + font-size: 1.5em; + } + + .build-flows .branch-bf .divider-line-horizontal { + display: none; + } + + .build-flows .branch-bf .divider-line-vertical { + width: 3px; + height: 40px; + background: $pebble-grey; + display: inline-block; + margin-bottom: 10px; + } + } + + @media (max-width: 797px) { + .customers .left { + text-align: center; + padding: 20px 0 0 0; + } + + .recent-builds-text h2, + .user-testimonials h2, + .private-repos h2, + .recent-builds-text p, + .user-testimonials p, + .private-repos p { + text-align: center; + } + + .free-for-oss br.mobile-no-break { + display: none; + } + + .private-repos .desktop-envelope { + display: none; + } + + .private-repos .mobile-envelope { + display: inline-block; + margin-bottom: 40px; + } + + .user-testimonials { + margin-bottom: 50px; + } + } + + @media (max-width: 640px) { + .user-testimonials { + margin-bottom: 140px; + } + } + + @media (max-width: 608px) { + br.mobile-break { + display: inline-break; + } + } +} + +.landing-vert-center-m { + @media #{$medium-up} { + position: relative; + transform: translateY(65%); + } +} + +.landing-vert-center-s { + @media #{$medium-up} { + position: relative; + overflow: auto; + transform: translateY(7%); + } +} + +.landing-page { + .navigation-nested { + background-color: white; + } +} + +.landing, +.landing-pro { + background-color: white; + margin-bottom: 0; +} + +.landing-pro { + .footer { + background: white; + } +} diff --git a/app/styles/app/pages/logo.sass b/app/styles/app/pages/logo.sass deleted file mode 100644 index eb3aa48858..0000000000 --- a/app/styles/app/pages/logo.sass +++ /dev/null @@ -1,111 +0,0 @@ -.landing-pro - .logo-header - margin-bottom: 90px - - .list--fonts - @extend %list - margin: 3em 0 7em - @media #{$medium-up} - display: flex - flex-flow: row wrap - justify-content: space-between - li - flex: 1 0 33% - margin-bottom: 2em - @media #{$medium-up} - flex: 0 0 33% - margin-bottom: 0 - [class^="font-"] - font-size: 36px - margin: 0 - .text-big - margin: .5em 0 0 - .font-light - font-weight: 300 - color: $oxide-blue - .font-regular - font-weight: 400 - color: $dozer-yellow - .font-semibold - font-weight: 600 - color: $asphalt-grey - - .list--colors - @extend %list - @media #{$medium-up} - display: flex - flex-flow: row wrap - justify-content: space-around - li - flex: 0 0 19% - [class^="colors-sample"] - height: 3em - margin-bottom: .5em - .colors-sample--teal - background-color: $oxide-blue - .colors-sample--green - background-color: $turf-green - .colors-sample--yellow - background-color: $canary-yellow - .colors-sample--red - background-color: $brick-red - .colors-sample--grey - background-color: $asphalt-grey - - .list--mascot - @extend %list - display: flex - flex-wrap: wrap - justify-content: space-around - justify-content: center - @media #{$medium-up} - width: 80% - margin: auto - li - flex: 0 0 15em - - .list--tessa - @extend %list - display: flex - flex-wrap: wrap - justify-content: space-around - justify-content: center - @media #{$medium-up} - width: 80% - margin: auto - li - flex: 0 0 15em - - .logo-logos - margin-top: 6em - display: flex - flex-wrap: wrap - justify-content: space-between - figure - margin: 0 - flex: 1 0 48% - [class^="logos--"] - padding: 2em - margin-bottom: 1em - .logos--light - background-color: #EDF3F3 - .logos--dark - background-color: #40A3AD - - - .does-donts - @media #{$medium-up} - display: flex - flex-wrap: wrap - justify-content: space-between - .does, - .donts - flex: 0 0 46% - - .does - margin-bottom: 3em - @media #{$medium-up} - margin-bottom: 0 - - .text-logo - margin: 0 auto 3em diff --git a/app/styles/app/pages/logo.scss b/app/styles/app/pages/logo.scss new file mode 100644 index 0000000000..8393a984f4 --- /dev/null +++ b/app/styles/app/pages/logo.scss @@ -0,0 +1,176 @@ +.landing-pro { + .logo-header { + margin-bottom: 90px; + } + + .list--fonts { + @extend %list; + + margin: 3em 0 7em; + + @media #{$medium-up} { + display: flex; + flex-flow: row wrap; + justify-content: space-between; + } + + li { + flex: 1 0 33%; + margin-bottom: 2em; + + @media #{$medium-up} { + flex: 0 0 33%; + margin-bottom: 0; + } + } + + [class^="font-"] { + font-size: 36px; + margin: 0; + } + + .text-big { + margin: 0.5em 0 0; + } + + .font-light { + font-weight: 300; + color: $oxide-blue; + } + + .font-regular { + font-weight: 400; + color: $dozer-yellow; + } + + .font-semibold { + font-weight: 600; + color: $asphalt-grey; + } + } + + .list--colors { + @extend %list; + + @media #{$medium-up} { + display: flex; + flex-flow: row wrap; + justify-content: space-around; + } + + li { + flex: 0 0 19%; + } + + [class^="colors-sample"] { + height: 3em; + margin-bottom: 0.5em; + } + + .colors-sample--teal { + background-color: $oxide-blue; + } + + .colors-sample--green { + background-color: $turf-green; + } + + .colors-sample--yellow { + background-color: $canary-yellow; + } + + .colors-sample--red { + background-color: $brick-red; + } + + .colors-sample--grey { + background-color: $asphalt-grey; + } + } + + .list--mascot { + @extend %list; + + display: flex; + flex-wrap: wrap; + justify-content: space-around; + justify-content: center; + + @media #{$medium-up} { + width: 80%; + margin: auto; + } + + li { + flex: 0 0 15em; + } + } + + .list--tessa { + @extend %list; + + display: flex; + flex-wrap: wrap; + justify-content: space-around; + justify-content: center; + + @media #{$medium-up} { + width: 80%; + margin: auto; + } + + li { + flex: 0 0 15em; + } + } + + .logo-logos { + margin-top: 6em; + display: flex; + flex-wrap: wrap; + justify-content: space-between; + + figure { + margin: 0; + flex: 1 0 48%; + } + + [class^="logos--"] { + padding: 2em; + margin-bottom: 1em; + } + } + + .logos--light { + background-color: #EDF3F3; + } + + .logos--dark { + background-color: #40A3AD; + } + + .does-donts { + @media #{$medium-up} { + display: flex; + flex-wrap: wrap; + justify-content: space-between; + } + + .does, + .donts { + flex: 0 0 46%; + } + + .does { + margin-bottom: 3em; + + @media #{$medium-up} { + margin-bottom: 0; + } + } + } + + .text-logo { + margin: 0 auto 3em; + } +} diff --git a/app/styles/app/pages/plans.sass b/app/styles/app/pages/plans.sass deleted file mode 100644 index f389fbbe62..0000000000 --- a/app/styles/app/pages/plans.sass +++ /dev/null @@ -1,185 +0,0 @@ - -$light-blue: #FCFDFD - -=planBtn($color) - display: inline-block - padding: .5em 1em - border: 1px solid $color - border-radius: 3px - font-size: 20px - color: $color - background: white - transition: background-color 200ms ease - cursor: pointer - &:hover, - &:active - background-color: $color - color: white - -$plan-buttons: (green: $turf-green, blue: $oxide-blue, grey: $cement-grey, red: $brick-red) - -@each $ident, $color in $plan-buttons - .plans-button--#{$ident} - +planBtn($color) - -.plans-hero - padding-top: 60px - padding-bottom: 55px - -.list--plans - display: flex - flex-wrap: wrap - justify-content: space-between - margin: 0 - padding: 0 - list-style: none - - .plan, - .plan--important - flex: 0 0 25% - align-self: center - padding: .5em 1.5em 0 - margin-bottom: 2em - background-color: $light-blue - border: - width: 1px - color: $agate-blue - style: solid - - .plan--important - padding: .5em 2em 3em - @include z-index(above) - box-shadow: $oxide-blue 0px 0px 9px 0px - - .plans-price, - .plans-name, - .plans-name + .plans-label - color: $oxide-blue - .plan-icon - +colorSVG($oxide-blue) - - @media screen and (min-width: 50em) - .plan:nth-of-type(1), .plan:nth-of-type(3) - border-right: none - .plan:nth-of-type(3) - border-left: none - - @media screen and (max-width: 50em) - justify-content: space-around - .plan--important - order: 0 - .plan - order: 1 - .plan, - .plan--important - flex: 0 1 240px - - .list - padding: 0 - list-style: none - margin: 3em 0 - font-size: 16px - li - line-height: 2 - - .list-em - display: inline-block - width: 1.3em - font-weight: 600 - font-size: 18px - - .plan-icon - @extend %icon - +colorSVG($cement-grey) - width: 13px - height: 14px - margin-right: 8px - -.plans-label - margin-top: 0 - font-size: 13px - color: $cement-grey - font-weight: 600 - text-transform: uppercase -.plans-name - font-size: 30px - font-weight: 300 - margin-bottom: 0 -.plans-timeframe - margin-bottom: 4em - text-align: center - -.plans-price - margin: 2rem 0 0 - font-size: 50px - text-align: center - -.plans-prices - @media #{$medium} - margin-top: -4em - margin-bottom: 4em - -.section-headline - margin-bottom: 0 - -.section--two - display: flex - flex-flow: column nowrap - [class^="plans-button"] - margin-top: 1em - > div - margin-bottom: 5em - svg - width: 100% // safari width calc is off otherwise - @media #{$medium} - flex-flow: row nowrap - justify-content: space-around - > div - display: flex - flex-flow: column - justify-content: space-between - flex: 0 0 48% - align-items: flex-start - margin-bottom: 0 - - &.section--os - padding-top: 6em - padding-bottom: 6em - - &.section--enterprise - margin: 3em 1em 9em - padding-top: 3em - padding-bottom: 4em - background-color: $light-blue - border: 1px solid $oxide-blue - @media #{$medium} - margin: 3em auto 9em - > div - justify-content: center - flex: 0 0 45% - -.inner.section--faq - margin-bottom: 6em - -.landing-pro - .list--faq - display: flex - flex-flow: row wrap - justify-content: space-between - padding: 0 - margin: 3em 0 0 - list-style: none - li - flex: 0 0 100% - padding: 1em 1.5em 1.7em - margin-bottom: 2em - border: solid 1px rgba($cement-grey, .2) - @media #{$medium-up} - flex: 0 0 48% - - .faq-text - @include linkStyle - margin: 0 - font-size: 16px - a - display: inline-block diff --git a/app/styles/app/pages/plans.scss b/app/styles/app/pages/plans.scss new file mode 100644 index 0000000000..e0c8b89603 --- /dev/null +++ b/app/styles/app/pages/plans.scss @@ -0,0 +1,254 @@ +$light-blue: #FCFDFD; + +@mixin planBtn($color) { + display: inline-block; + padding: 0.5em 1em; + border: 1px solid $color; + border-radius: 3px; + font-size: 20px; + color: $color; + background: white; + transition: background-color 200ms ease; + cursor: pointer; + + &:hover, + &:active { + background-color: $color; + color: white; + } +} + +$plan-buttons: (green: $turf-green, blue: $oxide-blue, grey: $cement-grey, red: $brick-red); + +@each $ident, $color in $plan-buttons { + .plans-button--#{$ident} { + @include planBtn($color); + } +} + +.plans-hero { + padding-top: 60px; + padding-bottom: 55px; +} + +.list--plans { + display: flex; + flex-wrap: wrap; + justify-content: space-between; + margin: 0; + padding: 0; + list-style: none; + + .plan, + .plan--important { + flex: 0 0 25%; + align-self: center; + padding: 0.5em 1.5em 0; + margin-bottom: 2em; + background-color: $light-blue; + border: { + width: 1px; + color: $agate-blue; + style: solid; + }; + } + + .plan--important { + padding: 0.5em 2em 3em; + + @include z-index(above); + + box-shadow: $oxide-blue 0px 0px 9px 0px; + + .plans-price, + .plans-name, + .plans-name + .plans-label { + color: $oxide-blue; + } + + .plan-icon { + @include colorSVG($oxide-blue); + } + } + + @media screen and (min-width: 50em) { + .plan:nth-of-type(1), .plan:nth-of-type(3) { + border-right: none; + } + + .plan:nth-of-type(3) { + border-left: none; + } + } + + @media screen and (max-width: 50em) { + justify-content: space-around; + + .plan--important { + order: 0; + } + + .plan { + order: 1; + } + + .plan, + .plan--important { + flex: 0 1 240px; + } + } + + .list { + padding: 0; + list-style: none; + margin: 3em 0; + font-size: 16px; + + li { + line-height: 2; + } + } + + .list-em { + display: inline-block; + width: 1.3em; + font-weight: 600; + font-size: 18px; + } + + .plan-icon { + @extend %icon; + + @include colorSVG($cement-grey); + + width: 13px; + height: 14px; + margin-right: 8px; + } +} + +.plans-label { + margin-top: 0; + font-size: 13px; + color: $cement-grey; + font-weight: 600; + text-transform: uppercase; +} + +.plans-name { + font-size: 30px; + font-weight: 300; + margin-bottom: 0; +} + +.plans-timeframe { + margin-bottom: 4em; + text-align: center; +} + +.plans-price { + margin: 2rem 0 0; + font-size: 50px; + text-align: center; +} + +.plans-prices { + @media #{$medium} { + margin-top: -4em; + margin-bottom: 4em; + } +} + +.section-headline { + margin-bottom: 0; +} + +.section--two { + display: flex; + flex-flow: column nowrap; + + [class^="plans-button"] { + margin-top: 1em; + } + + > div { + margin-bottom: 5em; + } + + svg { + width: 100%; + } + + @media #{$medium} { + flex-flow: row nowrap; + justify-content: space-around; + + > div { + display: flex; + flex-flow: column; + justify-content: space-between; + flex: 0 0 48%; + align-items: flex-start; + margin-bottom: 0; + } + } + + &.section--os { + padding-top: 6em; + padding-bottom: 6em; + } + + &.section--enterprise { + margin: 3em 1em 9em; + padding-top: 3em; + padding-bottom: 4em; + background-color: $light-blue; + border: 1px solid $oxide-blue; + + @media #{$medium} { + margin: 3em auto 9em; + + > div { + justify-content: center; + flex: 0 0 45%; + } + } + } +} + +.inner.section--faq { + margin-bottom: 6em; +} + +.landing-pro { + .list--faq { + display: flex; + flex-flow: row wrap; + justify-content: space-between; + padding: 0; + margin: 3em 0 0; + list-style: none; + + li { + flex: 0 0 100%; + padding: 1em 1.5em 1.7em; + margin-bottom: 2em; + border: solid 1px rgba($cement-grey, 0.2); + + @media #{$medium-up} { + flex: 0 0 48%; + } + } + } + + .faq-text { + @include linkStyle; + + margin: 0; + font-size: 16px; + + a { + display: inline-block; + } + } +} diff --git a/app/styles/app/vars.sass b/app/styles/app/vars.sass deleted file mode 100644 index 6b5113c65a..0000000000 --- a/app/styles/app/vars.sass +++ /dev/null @@ -1,68 +0,0 @@ -$font-size-ml: 18px -$font-size-m: 16px -$font-size-sm: 14px -$line-height-m: 1.3 -$font-size-s: 12px - -$font-weight-light: 300 -$font-weight-normal: 400 -$font-weight-bold: 600 - -$top-height: 55px - -$turf-green: #39aa56 -$seed-green: #deecdc - -$canary-yellow: #edde3f -$dozer-yellow: #cdb62c -$haze-yellow: #faf6db - -$cement-grey: #9d9d9d -$dry-cement: lighten($cement-grey, 30) -$asphalt-grey: #666666 -$pebble-grey: #f1f1f1 - -$brick-red: #db4545 -$quartz-red: #fce8e2 - -$oxide-blue: #3eaaaf -$agate-blue: #b6d6d9 - -$cream-light: #FAFAF8 -$cream-dark: #EFF0EC - - -// log -$log-header-bg: #444444 -$line-height-log: 19px -$font-size-log: 12px -$color-bg-log-hover: #444 -$color-bg-log-highlight: $cement-grey -$color-bg-log-fold: #222 -$color-bg-log-fold-highlight: #777 - -$ansi-black: #4E4E4E -$ansi-black-bold: #7C7C7C -$ansi-red: #FF6C60 -$ansi-red-bold: #FF9B93 -$ansi-green: #00AA00 -$ansi-green-bold: #B1FD79 -$ansi-yellow: #FFFFB6 -$ansi-yellow-bold: #FFFF91 -$ansi-blue: #96CBFE -$ansi-blue-bold: #B5DCFE -$ansi-magenta: #FF73FD -$ansi-magenta-bold: #FF9CFE -$ansi-cyan: #00AAAA -$ansi-cyan-bold: #55FFFF -$ansi-white: #EEEEEE -$ansi-white-bold: #FFFFFF -$ansi-grey: #969696 - -// error pages -$error-heading-color: #357389 -$error-copy-color: $asphalt-grey -$error-bg-gradient: rgba(204,235,247,1) -$maintenance-grass: #8cad7d -$error-hill-grey: #bbcac6 -$error-sand: #dcc682 diff --git a/app/styles/app/vars.scss b/app/styles/app/vars.scss new file mode 100644 index 0000000000..21491ef1a0 --- /dev/null +++ b/app/styles/app/vars.scss @@ -0,0 +1,67 @@ +$font-size-ml: 18px; +$font-size-m: 16px; +$font-size-sm: 14px; +$line-height-m: 1.3; +$font-size-s: 12px; + +$font-weight-light: 300; +$font-weight-normal: 400; +$font-weight-bold: 600; + +$top-height: 55px; + +$turf-green: #39aa56; +$seed-green: #deecdc; + +$canary-yellow: #edde3f; +$dozer-yellow: #cdb62c; +$haze-yellow: #faf6db; + +$cement-grey: #9d9d9d; +$dry-cement: lighten($cement-grey, 30); +$asphalt-grey: #666666; +$pebble-grey: #f1f1f1; + +$brick-red: #db4545; +$quartz-red: #fce8e2; + +$oxide-blue: #3eaaaf; +$agate-blue: #b6d6d9; + +$cream-light: #FAFAF8; +$cream-dark: #EFF0EC; + +// log +$log-header-bg: #444444; +$line-height-log: 19px; +$font-size-log: 12px; +$color-bg-log-hover: #444; +$color-bg-log-highlight: $cement-grey; +$color-bg-log-fold: #222; +$color-bg-log-fold-highlight: #777; + +$ansi-black: #4E4E4E; +$ansi-black-bold: #7C7C7C; +$ansi-red: #FF6C60; +$ansi-red-bold: #FF9B93; +$ansi-green: #00AA00; +$ansi-green-bold: #B1FD79; +$ansi-yellow: #FFFFB6; +$ansi-yellow-bold: #FFFF91; +$ansi-blue: #96CBFE; +$ansi-blue-bold: #B5DCFE; +$ansi-magenta: #FF73FD; +$ansi-magenta-bold: #FF9CFE; +$ansi-cyan: #00AAAA; +$ansi-cyan-bold: #55FFFF; +$ansi-white: #EEEEEE; +$ansi-white-bold: #FFFFFF; +$ansi-grey: #969696; + +// error pages +$error-heading-color: #357389; +$error-copy-color: $asphalt-grey; +$error-bg-gradient: rgba(204, 235, 247, 1); +$maintenance-grass: #8cad7d; +$error-hill-grey: #bbcac6; +$error-sand: #dcc682; From 83df5adfa58333bc2eacf351700c70dbcace1907 Mon Sep 17 00:00:00 2001 From: Berrak Nil Date: Wed, 7 Feb 2018 19:20:15 +0300 Subject: [PATCH 2/2] Setting the extension option for sassOptions is unnecessary --- ember-cli-build.js | 3 --- 1 file changed, 3 deletions(-) diff --git a/ember-cli-build.js b/ember-cli-build.js index f5f1e62593..fc8764a6fe 100644 --- a/ember-cli-build.js +++ b/ember-cli-build.js @@ -57,9 +57,6 @@ module.exports = function () { 'public/images/stroke-icons', 'public/images/svg' ] - }, - sassOptions: { - extensions: 'sass' } });