diff --git a/app/components/orgs-filter.js b/app/components/orgs-filter.js index 7434cefe..5432c3be 100644 --- a/app/components/orgs-filter.js +++ b/app/components/orgs-filter.js @@ -1,6 +1,8 @@ import Ember from 'ember'; export default Ember.Component.extend({ + + classNames: ['organisation-filter'], actions: { toggleOrgFilter() { this.toggleProperty('showFilter'); diff --git a/app/components/repo-show-tools.js b/app/components/repo-show-tools.js index bc7e0fef..de63a3cf 100644 --- a/app/components/repo-show-tools.js +++ b/app/components/repo-show-tools.js @@ -3,7 +3,7 @@ import config from 'travis/config/environment'; export default Ember.Component.extend({ popup: Ember.inject.service(), - classNames: ['settings-menu'], + classNames: ['option-button'], classNameBindings: ['isOpen:display'], isOpen: false, diff --git a/app/styles/app/components/sync-button.sass b/app/styles/app/components/sync-button.sass index 51ea1bcf..cb4c8ed4 100644 --- a/app/styles/app/components/sync-button.sass +++ b/app/styles/app/components/sync-button.sass @@ -1,61 +1,47 @@ .sync-button - padding: 0.8em 0 + vertical-align: middle display: flex - flex-direction: row-reverse + flex-flow: row-reverse wrap .button - padding: 5px 10px - margin-left: .5em - height: 25px position: relative - z-index: 1 - background: #a6adad - color: #ffffff - font-size: 14px - font-weight: $font-weight-normal + z-index: 2 + height: 2.6rem + padding: 0.6em 0.8em + background-color: $agate-blue border: none border-radius: 2px - line-height: 1 + font-size: 14px &:hover - background: #8d9b9a - cursor: pointer + background-color: $oxide-blue + .sync-last + position: relative + z-index: -1 + transition: transform 150ms ease, opacity 250ms ease + transform: translateX(80%) + opacity: 0 + .button:hover ~ .sync-last + transform: translateX(0) + opacity: 1 + z-index: 1 + + .is-syncing + background-color: $oxide-blue + + .icon-trigger + @extend %icon-line-trigger-white + @extend %icon + width: 1.5em + height: 1.5em + margin-right: 0.3em + - &.is-syncing - background: #c6b93d - color: white - .icon - width: 1.1em - height: 1.2em - vertical-align: middle - svg path - fill: white - .icon - margin-right: .5em .loading-indicator--white - margin-right: .5em vertical-align: top - -.profile-main - .sync-button - button - max-width: none - font-size: $font-size-sm - .sync-last - font-size: $font-size-sm - color: #adaaab - margin-left: .8rem + margin-right: .5em .sync-last display: inline-block - margin: 0 - font-size: 14px - color: #848384 + margin: 0 1em 0 + color: $asphalt-grey text-align: right - - pointer-events: none - transform: translateX(50%) - opacity: 0 - transition: transform 200ms ease, opacity 100ms ease - - .button:hover ~ & - transform: translateX(0) - opacity: 1 + line-height: 2.6 diff --git a/app/styles/app/layouts/dashboard.sass b/app/styles/app/layouts/dashboard.sass index 279608b7..214227e9 100644 --- a/app/styles/app/layouts/dashboard.sass +++ b/app/styles/app/layouts/dashboard.sass @@ -1,4 +1,28 @@ -.dashboard-active, -.dashbaord-inactive +.repo-list list-style: none padding: 0 + + +.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-repos + padding-bottom: 5rem + +.dashboard-section + margin-bottom: 4rem + +.starred-empty + border: dotted 1px $pebble-grey + border-radius: 2px + text-align: center + padding: 2rem 0 + font-size: 20px + color: $cement-grey diff --git a/app/styles/app/layouts/owner.sass b/app/styles/app/layouts/owner.sass index 3b8839cb..8f223750 100644 --- a/app/styles/app/layouts/owner.sass +++ b/app/styles/app/layouts/owner.sass @@ -1,9 +1,10 @@ .owner-header + display: flex + flex-flow: row wrap + justify-content: flex-start + align-items: center padding: 0 $column-gutter/2 margin-bottom: 3rem - color: #969496 - a - color: #969496 .owner-title margin: .3em 0 .2em font-size: 36px @@ -22,61 +23,26 @@ text-decoration: underline img border-radius: 50% - background-color: #F4F3ED - - .sync-button - margin-top: .8rem - p, button - margin: 0 - .sync-last - color: #969496 - font-size: $font-size-sm - -.owner-avatar, -.owner-info - @extend %inline-block - vertical-align: middle + background-color: $pebble-grey .owner-avatar - width: grid-calc(4, 12) + flex: 0 0 20% @media #{$medium-up} - width: grid-calc(2, 12) + flex: 0 0 17% .owner-info - width: grid-calc(7, 12) + flex: 1 0 75% @media #{$medium-up} - width: grid-calc(29, 36) - position: relative - overflow: hidden - &:after - content: "" - @include fadeOut(right, -90deg, white) + flex: 1 0 80% + position: relative + overflow: hidden + &:after + content: "" + @include fadeOut(right, -90deg, white) .tabs--owner padding : 0 $column-gutter/2 - .active, - .active:hover, - position: relative - color: $oxide-blue - &:after - content: "" - position: absolute - left: 0 - bottom: -0.25em - width: 100% - height: 2px - background-color: $oxide-blue - .active - font-weight: 600 - -.tabnav--owner - margin-bottom: 1.5rem - @media #{$medium-up} - height: 2.2em - border-bottom: solid 2px $cream-dark - - .owner-tiles padding: 0 list-style-type: none diff --git a/app/styles/app/layouts/profile.sass b/app/styles/app/layouts/profile.sass index d191f1e7..05c838e5 100644 --- a/app/styles/app/layouts/profile.sass +++ b/app/styles/app/layouts/profile.sass @@ -13,23 +13,17 @@ header h1 margin: 0 1.7rem 0 0 - color: #808080 - font-size: 35px + color: $asphalt-grey + font-size: 36px font-weight: 400 - line-height: 1.45 - p:not(.sync-last) - font-size: $font-size-sm - color: $cement-grey - margin: 2rem 0 1rem 0 - a - color: $cement-grey - text-decoration: underline + @media #{$medium-up} - .profile-header, .sync-button + .profile-header display: inline-block vertical-align: middle .sync-button - margin-top: .5em + float: right + margin-top: .4em @media #{$large-up} .profile-header position: relative @@ -39,13 +33,6 @@ &:after @include fadeOut(right, -90deg, white) - .loading-indicator--white - vertical-align: top - margin-right: .5em - p - font-size: $font-size-m - color: $cement-grey - .cta-btn text-align: right @@ -111,9 +98,8 @@ .profile-orgs h1 - color: #898b8c font-size: $font-size-sm - border-bottom: solid 2px $cream-dark + border-bottom: solid 2px $pebble-grey .profile-user margin: 1rem 0 2rem @@ -145,9 +131,8 @@ p.profile-user-last vertical-align: middle .profile-settings display: inline-block - padding: .2em .2em .2em .5em; - height: 28px; - vertical-align: bottom; + padding: .2em .2em .2em .5em + height: 28px .icon width: 14px height: 14px @@ -159,7 +144,7 @@ p.profile-user-last display: inline-block !important .profile-repo - border-radius: 4px + border-radius: 2px position: relative display: inline-block width: grid-calc(13, 24) @@ -176,34 +161,31 @@ p.profile-user-last .sync-spinner vertical-align: top &:hover - background-color: #ededec + background-color: $pebble-grey &:after content: "" - @include fadeOut(right, -90deg, #ededec) + @include fadeOut(right, -90deg, $pebble-grey) .active &:hover - background-color: #e2eee2 + background-color: $seed-green &:after content: "" - @include fadeOut(right, -90deg, #e2eee2) + @include fadeOut(right, -90deg, $seed-green) @media #{$medium-up} width: grid-calc(18, 24) height: 30px &:hover span display: inline-block + color: $cement-grey @media #{$large-up} width: grid-calc(19, 24) .profile-additional - border-top: solid 2px #f3f2f2 + border-top: solid 2px $pebble-grey .profile-text, -.profile-additional p - color: #adaaab - line-height: $line-height-m - a - color: #adaaab - text-decoration: underline +.profile-additional + +linkStyle .hooks-error width: 100%; diff --git a/app/styles/app/layouts/repo.sass b/app/styles/app/layouts/repo.sass index aabd00c3..f9a2ed13 100644 --- a/app/styles/app/layouts/repo.sass +++ b/app/styles/app/layouts/repo.sass @@ -42,78 +42,8 @@ justify-content: space-between border-bottom: 2px #f1f1f1 solid - -$dropdown-button-height: 30px -$dropdown-button-margin: -9px - -.settings-button - display: block - height: $dropdown-button-height - padding: 0 - border: 1px solid $pebble-grey - color: $asphalt-grey - border-radius: 2px - text-align: center - line-height: 2 - font-size: 14px - cursor: pointer - .label-align - padding: 0 1em - &:hover, - &:active, - // .display &, - .settings-menu:hover & - color: $oxide-blue - border-color: $oxide-blue - .settings-tofu - border-color: $oxide-blue - background-image: inline-image('/line-icons/icon-tofuburger-teal.svg') - - @media #{$medium-up} - margin-top: $dropdown-button-margin - -.settings-dropdown - display: none - position: absolute - top: $dropdown-button-height + ($dropdown-button-margin * .8) - width: 100% - padding: 0 - margin: 6px 0 0 - list-style: none - z-index: 60 - background-color: white - border: 1px solid $oxide-blue - a - display: block - padding: .4em 1em .5em 2.4em - font-size: 14px - color: $oxide-blue - &:hover - color: white - background-color: $oxide-blue - @media #{$medium-up} - margin-top: -3px - -.settings-tofu - width: 2em - height: 2em - display: inline-block - vertical-align: top - background: - image: inline-image('/line-icons/icon-tofuburger.svg') - repeat: no-repeat - size: 20px - position: 50% - @media #{$medium-up} - border-left: 1px solid $pebble-grey - -.settings-menu - position: relative - @media #{$small-only} - &.display - .settings-dropdown - display: block - @media #{$medium-up} - &:hover - .settings-dropdown - display: block + .option-button + width: 10em + margin-top: -9px + .option-dropdown a + padding-left: 2.4em diff --git a/app/styles/app/mixins.sass b/app/styles/app/mixins.sass index 3d2fb2db..27e64b4f 100644 --- a/app/styles/app/mixins.sass +++ b/app/styles/app/mixins.sass @@ -48,12 +48,12 @@ =linkStyle a text-decoration: none - border-bottom: 1px solid #bfc0c1 + border-bottom: 1px solid $cement-grey padding-bottom: 0.1rem transition: color 200ms ease, border 200ms ease &:hover, &:active - color: #303030 + color: $cement-grey text-decoration: none border-color: transparent diff --git a/app/styles/app/modules/dropdown.sass b/app/styles/app/modules/dropdown.sass index bb6b088a..c61b40b8 100644 --- a/app/styles/app/modules/dropdown.sass +++ b/app/styles/app/modules/dropdown.sass @@ -1,38 +1,42 @@ -$dropdown-border: #C3D9DB - -.dropdown--db - @include resetul - border-radius: 4px - position: absolute - padding: .8em .5em - z-index: 90 - width: 12.5em; - right: 0; - top: 4em; - border: 2px $oxide-blue solid; - background-color: white - display: none - a - display: block - padding: 0.4em 1em .2em - &:hover - background-color: $oxide-blue - color: white - &:before - content: "" - width: 1.2em - height: 1.2em - display: block - position: absolute - top: -0.7em; - right: 1.1em; - background-color: white - border-top: solid 2px $oxide-blue; - border-left: solid 2px $oxide-blue; - transform: rotate(45deg); - -.filter +.option-button position: relative + width: 17em + @media #{$small-only} + &.display + .option-dropdown + display: block + @media #{$medium-up} + &:hover + .option-dropdown + display: block + .option-display + color: $oxide-blue + border-color: $oxide-blue + .option-tofu + border-color: $oxide-blue + background-image: inline-image('/line-icons/icon-tofuburger-teal.svg') + +$dropdown-button-height: 30px +$dropdown-button-margin: -9px + +.option-display + display: flex + height: $dropdown-button-height + padding: 0 + border: 1px solid $pebble-grey + color: $asphalt-grey + border-radius: 2px + text-align: center + line-height: 2 + font-size: 14px + cursor: pointer + text-align: left + white-space: nowrap + .label-align + flex-grow: 1 + padding: 0 1em + line-height: 2 + overflow: hidden img max-width: 20px max-height: 20px @@ -41,39 +45,59 @@ $dropdown-border: #C3D9DB border-radius: 50% overflow: hidden -.filter--org - float: left +.option-tofu + width: 2em + height: 2em + display: inline-block + vertical-align: top + background: + image: inline-image('/line-icons/icon-tofuburger.svg') + repeat: no-repeat + size: 20px + position: 50% + @media #{$medium-up} + border-left: 1px solid $pebble-grey -.filter-current - padding: .9em 0 - cursor: pointer - a - color: $oxide-blue - -.filter-dropdown - @include resetul - position: absolute - top: 3em - min-width: 14em - background-color: white - border-radius: 2px - overflow: hidden - border: 1px solid $cream-dark - border-top: none - z-index: 40 +.option-dropdown display: none - li - white-space: nowrap + position: absolute + top: $dropdown-button-height + ($dropdown-button-margin * .8) + width: 100% + padding: 0 + margin: 6px 0 0 + list-style: none + z-index: 60 + background-color: white + border: 1px solid $oxide-blue a - display: inline-block - width: 100% - padding: 10px 10px 10px 20px + display: block + padding: .5em 1em + font-size: 14px + color: $oxide-blue &:hover color: white - background : $oxide-blue - .is-selected - a - font-weight: 600 + background-color: $oxide-blue - &.is-open + +.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/switch.sass b/app/styles/app/modules/switch.sass index 860d86e8..ac62680c 100644 --- a/app/styles/app/modules/switch.sass +++ b/app/styles/app/modules/switch.sass @@ -13,15 +13,15 @@ padding: 3px 3px 3px 4px vertical-align: middle overflow: visible - background-color: #E2E1E2 - border-radius: 4px + background-color: darken($pebble-grey, 10) + border-radius: 2px border: none cursor: pointer span width: $switch-inner-width height: $switch-inner-heigth - border-radius: 4px - background-color: #A5A4A4 + border-radius: 2px + background-color: $cement-grey color: white text-align: center font-weight: 300 @@ -50,9 +50,9 @@ &.active .switch-inner - background-color: #B8D6B9 + background-color: darken($seed-green, 10) span - background-color: #3BA85D + background-color: $turf-green .on display: inline-block .off diff --git a/app/templates/components/orgs-filter.hbs b/app/templates/components/orgs-filter.hbs index 978f008a..03a7a4ca 100644 --- a/app/templates/components/orgs-filter.hbs +++ b/app/templates/components/orgs-filter.hbs @@ -1,9 +1,9 @@ -
-
- {{#if orgs.isLoading}} - {{loading-indicator}} - {{else}} - + - + {{/each}} +
+
diff --git a/app/templates/components/repo-show-tools.hbs b/app/templates/components/repo-show-tools.hbs index 0638d21d..68c99b42 100644 --- a/app/templates/components/repo-show-tools.hbs +++ b/app/templates/components/repo-show-tools.hbs @@ -1,8 +1,8 @@ - + More options - + -