From 91d0ee9c2f9d4109cf7451947d2c382c7016af62 Mon Sep 17 00:00:00 2001
From: John O'Nolan <john@ghost.org>
Date: Tue, 23 Sep 2014 10:36:46 +0300
Subject: [PATCH] Minor start on CSS Style cleanup
See #4107
---
core/client/assets/sass/layouts/editor.scss | 35 +++++++-------
core/client/assets/sass/layouts/users.scss | 28 +++++++----
core/client/assets/sass/patterns/navlist.scss | 47 ++++++++++---------
3 files changed, 60 insertions(+), 50 deletions(-)
diff --git a/core/client/assets/sass/layouts/editor.scss b/core/client/assets/sass/layouts/editor.scss
index 0e85052178..a72f0a9e6c 100644
--- a/core/client/assets/sass/layouts/editor.scss
+++ b/core/client/assets/sass/layouts/editor.scss
@@ -433,6 +433,14 @@ body.zen {
}
.post-settings {
+ @include icon($i-settings, 14px);
+ display: inline-block;
+ padding: 0 10px;
+ color: $midgrey;
+ transition: all 0.15s ease-out 0s;
+ position: relative;
+ top: 1px;
+
&:hover,
&.active {
color: $lightgrey;
@@ -644,19 +652,23 @@ body.zen {
}
#entry-actions {
- margin-right: 6px;
position: relative;
+ margin-right: 6px;
+
.dropdown {
position: absolute;
- bottom: 49px;
right: 0;
+ bottom: 49px;
+
.dropdown-menu {
top: auto;
- left: auto;
right: 100%;
bottom: 100%;
+ left: auto;
}
+
}
+
}
#entry-actions-menu {
@@ -685,24 +697,9 @@ body.zen {
z-index: 600;
transition: transform $side-outlet-transition-duration cubic-bezier(0.1, 0.7, 0.1, 1);
transform: translate3d(-350px, 0px, 0px); // Not off the screen, to give a parallax effect
- }//.editor-cover
-}//body.right-outlet-expanded
-
-.post-settings {
- @include icon($i-settings, 14px);
- display: inline-block;
- padding: 0 10px;
- color: $midgrey;
- transition: all 0.15s ease-out 0s;
- position: relative;
- top: 1px;
-
- &:hover,
- &.active {
- color: $darkgrey;
}
-} // .post-settings
+}
//
diff --git a/core/client/assets/sass/layouts/users.scss b/core/client/assets/sass/layouts/users.scss
index 3e4cc85067..04a0af1aac 100644
--- a/core/client/assets/sass/layouts/users.scss
+++ b/core/client/assets/sass/layouts/users.scss
@@ -15,7 +15,7 @@
font-weight: normal;
color: $midbrown;
margin-bottom: 14px;
-} // .object-list-title
+}
.object-list-item {
@@ -35,13 +35,15 @@
border-top: 1px solid $lightbrown;
-} // .object-list-item
+}
a.object-list-item {
text-decoration: none;
+
&:hover {
background: lighten($lightbrown, 5%);
}
+
&:last-of-type:hover {
box-shadow: inset 0px -1px 0px $lightbrown;
}
@@ -57,6 +59,7 @@ a.object-list-item {
color: transparent;
overflow: hidden;
position: relative;
+
&:before {
position: absolute;
top: 50%;
@@ -67,7 +70,7 @@ a.object-list-item {
color: $brown;
font-size: 14px;
}
-} // .object-list-item-icon
+}
.object-list-item-figure {
width: 35px;
@@ -77,7 +80,7 @@ a.object-list-item {
border-radius: 100%;
background-size: 105%;
background-position: center center;
-} // .object-list-item-figure
+}
.object-list-item-icon,
.object-list-item-figure {
@@ -88,10 +91,8 @@ a.object-list-item {
}
.object-list-item-body {
-
flex: 1 1 auto;
align-items: stretch;
-
padding-left: 15px;
line-height: 1;
@@ -113,7 +114,7 @@ a.object-list-item {
margin-top: 3px;
}
-} // .object-list-item-body
+} //.object-list-item-body
.object-list-item-aside {
@media (max-width: 500px) {
@@ -121,16 +122,19 @@ a.object-list-item {
width: 100%;
margin-top: 15px;
}
+
.object-list-action:not(:first-of-type) {
margin-left: 20px;
@media (min-width: 501px) {
margin-left: 50px;
}
}
+
.role-label {
float: left;
margin-top: -1px;
}
+
.role-label + .role-label {
margin-left: 5px;
}
@@ -143,7 +147,7 @@ a.object-list-item {
&:hover {
}
-} // .object-list-action
+}
//
@@ -194,12 +198,15 @@ a.object-list-item {
// --------------------------------------------------
.invite-new-user {
+
.modal-body {
@include clearfix;
+
fieldset {
margin: 1em 0 0 0;
}
}
+
.form-group {
margin-bottom: 0;
@@ -215,6 +222,7 @@ a.object-list-item {
float: left;
width: 60%;
}
+
&:nth-of-type(2) {
float: left;
width: 35%;
@@ -225,7 +233,7 @@ a.object-list-item {
width: 100%;
}
- } // .form-group
+ } //.form-group
.button-add {
width: 100%;
@@ -234,4 +242,4 @@ a.object-list-item {
line-height: 16px;
}
-} // .invite-new-user
\ No newline at end of file
+} //.invite-new-user
diff --git a/core/client/assets/sass/patterns/navlist.scss b/core/client/assets/sass/patterns/navlist.scss
index 3ab0458129..955249a935 100644
--- a/core/client/assets/sass/patterns/navlist.scss
+++ b/core/client/assets/sass/patterns/navlist.scss
@@ -1,17 +1,34 @@
+//
+// Navigation Lists
+// --------------------------------------------------
+// Mobile style groups of list of links with chevrons
+
.nav-list {
- background: #FFF;
- border: 1px solid #E0DFD7;
- border-radius: $rounded;
- max-width: 500px;
padding: 0;
+ border: 1px solid #E0DFD7;
+ max-width: 500px;
+ border-radius: $rounded;
+ background: #FFF;
+
&.nav-list-block {
max-width: none;
}
}
.nav-list-item {
+ @include icon($i-chevron, 1.4rem, $midbrown) {
+ position: absolute;
+ top: 50%;
+ right: 10px;
+ transform: translateY(-50%);
+ }
+ position: relative;
display: block;
padding: 8px 40px 8px 12px;
- position: relative;
+ color: $darkgrey;
+
+ &:hover {
+ background: lighten($lightbrown, 5%);
+ }
&:first-of-type {
border-top-left-radius: $rounded;
@@ -26,22 +43,8 @@
border-bottom: 1px solid #E0DFD7;
}
- @include icon($i-chevron, 1.4rem, $midbrown) {
- position: absolute;
- top: 50%;
- right: 10px;
- transform: translateY(-50%);
- };
-
- color: $darkgrey;
a {
- &:link, &:visited {
- color: $darkgrey;
- }
- }
-
- &:hover {
- background: lighten($lightbrown, 5%);
+ color: $darkgrey;
}
b {
@@ -50,10 +53,12 @@
font-size: 1.6rem;
line-height: 1.375;
}
+
span {
display: block;
font-size: 1.1rem;
color: $midgrey;
line-height: 1.375;
}
-}
\ No newline at end of file
+
+}//.nav-list-item