Skip to content
This repository has been archived by the owner on Nov 28, 2022. It is now read-only.

Commit

Permalink
Team / Apps app frame style update
Browse files Browse the repository at this point in the history
  • Loading branch information
@JohnONolan @kevinansfield
JohnONolan authored and kevinansfield committed Feb 17, 2017
1 parent 503e8d8 commit f7ac444
Show file tree
Hide file tree
Showing 11 changed files with 214 additions and 271 deletions.
8 changes: 5 additions & 3 deletions app/styles/components/modals.css
View file
Expand Up @@ -8,7 +8,6 @@
/* explicit modal container so that background and content can be animated individually */
.fullscreen-modal-container {
display: flex;
align-items: center;
justify-content: center;
visibility: hidden;
position: fixed;
Expand Down Expand Up @@ -58,7 +57,7 @@
}

.fullscreen-modal-action {
margin: 2vh 0 10vh 0;
margin: 6vw 0;
}


Expand Down Expand Up @@ -105,7 +104,7 @@

.modal-header h1 {
display: inline-block;
margin: 0 25px 0 0;
margin: -5px 25px 0 0;
font-size: 2.2rem;
line-height: 1.15em;
font-weight: 600;
Expand Down Expand Up @@ -145,6 +144,9 @@
/* Content Modifiers
/* ---------------------------------------------------------- */

.modal-body fieldset {
margin: 0;
}

/* Login styles */
.modal-body .login-form {
Expand Down
52 changes: 20 additions & 32 deletions app/styles/layouts/apps.css
View file
Expand Up @@ -13,6 +13,10 @@
/* Main Layout
/* ---------------------------------------------------------- */

.apps-grid-container {
margin: 2vw 0;
}

.apps-grid-title {
display: block;
margin-bottom: 5px;
Expand Down Expand Up @@ -47,50 +51,38 @@
}

.apps-card-app {
display: flex;
align-items: center;
justify-content: space-between;
overflow: hidden;
padding: 14px;
height: 75px;
border-top: rgba(0,0,0,0.1) 1px solid;
transition: background 0.3s ease;
}

.apps-card-app:not(last-child) {
border-bottom: rgba(0,0,0,0.1) 1px solid;
}

.apps-card-app:first-of-type {
.apps-grid-cell:first-child .apps-card-app {
border-top: none;
}

.apps-card-content {
position: relative;
.apps-card-left {
display: flex;
align-items: center;
}

.apps-card-content > .gh-btn {
position: absolute;
top: 5px;
right: 20px;
}
.apps-card-content > .apps-configured {
position: absolute;
top: 13px;
right: 29px;
.apps-card-right {
display: flex;
color: var(--midgrey);
white-space: nowrap;
align-items: center;
}

.apps-configured > span {
padding-right: 14px;
font-size: 1.3rem;
.apps-configured {
display: flex;
align-items: center;
}

.apps-configured > i {
position: absolute;
top: 2px;
right: 0;
font-size: 1.1rem;
.apps-configured i {
margin-left: 15px;
color: var(--midgrey);
}

.apps-card-app-icon {
Expand All @@ -104,15 +96,14 @@
}

.apps-card-meta {
position: relative;
display: flex;
flex-direction: column;
padding: 0 70px 0 0;
}

.apps-card-app-title {
margin: 0;
overflow: hidden;
margin: 4px 0 0 0;
padding: 0 70px 0 0;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 1.7rem;
Expand Down Expand Up @@ -251,7 +242,4 @@
flex-direction: column;
align-items: flex-start;
}
.apps-card-content > .apps-configured {
right: 15px;
}
}
5 changes: 3 additions & 2 deletions app/styles/layouts/main.css
View file
Expand Up @@ -380,11 +380,11 @@ body > .ember-view:not(.liquid-target-container) {
top: 0;
left: 0;
z-index: 1000;
width: 205px;
width: 250px;
height: 100%;
transition: transform 0.20s;
/* translate3d for GPU accelerated animation - http://bit.ly/1EY1Xhx */
transform: translate3d(-190px,0,0);
transform: translate3d(-235px,0,0);
}

/* THE FUTURE: Super sexy background blur for Webkit - http://cl.ly/b1rG */
Expand Down Expand Up @@ -462,6 +462,7 @@ body > .ember-view:not(.liquid-target-container) {
padding: 2.9vw 4vw 3vw 4vw;
margin: 0 auto;
overflow-y: auto;
max-width: 1200px;
}

.gh-canvas-header {
Expand Down
148 changes: 39 additions & 109 deletions app/styles/layouts/users.css
View file
@@ -1,55 +1,17 @@
/* Users /ghost/settings/users/
/* ---------------------------------------------------------- */

.users-list-wrapper {
overflow: auto;
height: 100%;
}


/* User list
/* ---------------------------------------------------------- */

.invited-users {
margin-bottom: 34px;
}

.user-list-title {
margin-bottom: 14px;
color: #a1a1a1;
font-size: 13px;
font-weight: normal;
}

.user-list-item {
display: flex;
justify-content: start;
align-items: center;
padding: 0 15px;
height: 68px;
border-top: 1px solid #dfe1e3;
}

/* Only apply these styles to anchor tags (pending invited are divs) */
a.user-list-item {
text-decoration: none;
}

@media (min-width: 601px) {
a.user-list-item:hover {
background: color(#dfe1e3 lightness(+10%));
}
a.user-list-item:last-of-type:hover {
box-shadow: inset 0 -1px 0 #dfe1e3;
}
.gh-invited-users .apps-grid-cell:hover {
background: none;
}

.user-list-item-icon {
position: relative;
display: block;
overflow: hidden;
width: 35px;
height: 35px;
margin-right: 15px;
width: 40px;
height: 40px;
background: #dfe1e3;
border-radius: 100%;
color: transparent;
Expand All @@ -70,11 +32,13 @@ a.user-list-item {
.user-list-item-figure {
position: relative;
display: block;
width: 35px;
height: 35px;
width: 40px;
height: 40px;
margin-right: 15px;
background-position: center center;
background-size: cover;
border-radius: 35px;
border-radius: 100%;
box-shadow: #fff 0 0 0 3px;
}

.user-list-item-figure img {
Expand All @@ -86,51 +50,8 @@ a.user-list-item {
opacity: 0;
}

.user-list-item-body {
flex: 1 1 auto;
align-items: stretch;
padding-left: 15px;
line-height: 1;
}

.user-list-item-body .name {
display: inline-block;
color: var(--darkgrey);
font-size: 15px;
font-weight: 400;
}

.user-list-item-body .description {
display: inline-block;
margin-top: 3px;
color: #a1a1a1;
white-space: nowrap;
font-size: 12px;
}

.user-list-item-body .description-error {
display: inline-block;
margin-top: 3px;
color: var(--red);
white-space: nowrap;
font-size: 12px;
}

.user-list-item-aside .user-list-action {
float: left;
margin-right: 20px;
}

.user-list-item-aside .role-label {
float: left;
margin-top: -1px;
}

.user-list-item-aside .role-label + .role-label {
margin-left: 5px;
}

.user-list-action {
margin-right: 15px;
text-decoration: underline;
text-transform: uppercase;
font-size: 11px;
Expand All @@ -140,36 +61,45 @@ a.user-list-item {
/* Role Labels
/* ---------------------------------------------------------- */

.role-label {
display: inline-block;
padding: 6px 8px;
background: #eee;
color: rgba(0, 0, 0, 0.5);
text-transform: uppercase;
font-size: 9px;
line-height: 1;
font-weight: 400;
.gh-badge.owner {
border: color(var(--darkgrey) blackness(+8%)) 1px solid;
background: linear-gradient(
color(var(--darkgrey) whiteness(+10%)),
color(var(--darkgrey) blackness(+4%))
);
}

.role-label.owner {
background: var(--darkgrey);
color: rgba(255, 255, 255, 0.8);
.gh-badge.administrator {
border: color(var(--red) blackness(+8%)) 1px solid;
background: linear-gradient(
color(var(--red) whiteness(+10%)),
color(var(--red) blackness(+4%))
);
}

.role-label.administrator {
background: var(--red);
color: rgba(255, 255, 255, 0.8);
.gh-badge.editor {
border: color(var(--blue) blackness(+8%)) 1px solid;
background: linear-gradient(
color(var(--blue) whiteness(+10%)),
color(var(--blue) blackness(+4%))
);
}

.role-label.editor {
background: var(--blue);
color: rgba(255, 255, 255, 0.8);
.gh-badge.author {
border: color(var(--lightgrey) blackness(+8%)) 1px solid;
color: color(var(--midgrey) l(+5%));
background: #fff;
}


/* User invitation modal
/* ---------------------------------------------------------- */

.invite-new-user .modal-content {
width: 100%;
max-width: 600px;
}

.invite-new-user .form-group {
margin-bottom: 0;
padding: 0;
Expand All @@ -188,7 +118,7 @@ a.user-list-item {

.invite-new-user .form-group:nth-of-type(2) {
float: left;
margin-left: 5%;
margin-left: 10px;
width: 35%;
}

Expand Down
1 change: 0 additions & 1 deletion app/styles/patterns/forms.css
View file
Expand Up @@ -272,7 +272,6 @@ textarea {
.gh-select {
position: relative;
display: block;
overflow: hidden;
padding: 0;
max-width: 100%;
width: 100%;
Expand Down

0 comments on commit f7ac444

Please sign in to comment.