Removing some custom admin css to be more compatible with wagtail (#80)

* Removing some custom css to be more compatible with upstream wagtail

* Ignore flex label styles on login page

* Fixing label layout bugs

* Additional form input fixes

coderedcms/static/css/codered-admin.css

@@ -4,7 +4,10 @@ html, body {
     color: #000;
     background-color:#fff;
     font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol",sans-serif !important;
-    font-size:1rem;
+}
+code, pre,
+.monospace textarea {
+    font-family: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
 }
 
 .content-wrapper {
@@ -12,46 +15,23 @@ html, body {
     border:unset;
 }
 
-header {
-    font-size:0.9rem;
-}
-
+.summary ul.stats,
 .summary ul.stats span {
     font-family:inherit !important;
     font-weight:600 !important;
 }
 
-@media screen and (min-width:50em) {
-    .summary ul.stats li::before {
-        font-size:5em !important;
-    }
-    .summary ul.stats span {
-        font-size:3.5em !important;
-    }
-}
-
-code, pre,
-.monospace textarea {
-    font-family: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
-    font-size: 87%;
-}
-
 h1, h2, h3, h4, h5, h6,
 .button, .halloeditor, .tagit, input, select, textarea {
     font-family:inherit;
 }
 
-.button, .halloeditor, .tagit, input, select, textarea {
-    font-size:1em;
-}
-
 body.ready input[type='checkbox'], body.ready input[type='radio'] {
     background-color:unset;
     border:none;
 }
 
 .halloeditor, .tagit, input, select, textarea {
-    background-color:#eee;
     border:1.5px solid #ddd;
     padding-top:0.5em;
     padding-bottom:0.5em;
@@ -59,12 +39,15 @@ body.ready input[type='checkbox'], body.ready input[type='radio'] {
 }
 
 .halloeditor:hover, .tagit:hover, input:hover, select:hover, textarea:hover {
-    background-color:#eee;
     border:1.5px solid #ddd;
 }
+.nav-search input:hover {
+    border-width: 1px;
+}
 
 input[type='checkbox'], input[type='radio'] {
     height:unset;
+    margin-right: 0.5em;
 }
 input[type='checkbox']::before, input[type='radio']::before {
     border:1.5px solid #ccc;
@@ -72,7 +55,7 @@ input[type='checkbox']::before, input[type='radio']::before {
     top:unset;
 }
 .date_field .input::after, .date_field .input::before, .date_time_field .input::after, .date_time_field .input::before, .iconfield .input::after, .iconfield .input::before, .time_field .input::after, .time_field .input::before, .url_field .input::after, .url_field .input::before {
-    font-size:1.5em;
+    font-size:1.7em;
     top:0.35em;
 }
 .full input {
@@ -83,35 +66,16 @@ input[type='checkbox']::before, input[type='radio']::before {
     border-color:#00b0b1;
     background-color:#f2fcfc;
 }
-.button,
-.search-bar .button-filter {
-    height:2.25em;
-}
-a.button {
-    line-height:2.2em;
-}
-.dropdown .button, .dropdown button, .dropdown input[type="button"], .dropdown input[type="reset"], .dropdown input[type="submit"] {
-    height:2.5em;
-    line-height:2.5em;
-}
-.dropdown .dropdown-toggle {
-    line-height:2.5em;
-}
-.dropdown ul a {
-    padding:0.5em 1em;
-}
-.c-dropdown__button, .c-dropdown__toggle {
-    vertical-align: middle;
-}
 .choice_field .input select,
 .model_choice_field .input select,
 .typed_choice_field .input select {
     margin-right:-3em;
+    padding-right: 3em;
 }
 .choice_field .input select ~ span:after,
 .model_choice_field .input select ~ span:after,
 .typed_choice_field .input select ~ span:after {
-    font-size:2em !important;
+    font-size:2.2em !important;
     right:unset;
 }
 
@@ -119,27 +83,42 @@ a.button {
     width:100%;
 }
 
+.field-row {
+    margin-bottom: 0;
+}
+
+
+/* Display labels and fields horizontally, except .label-above */
+
 @media screen and (min-width:50em) {
-    li.sequence-member .fields > li,
-    ul.fields > li > .field {
+    body:not(.login) li.sequence-member .fields > li,
+    body:not(.login) ul.fields > li:not(.label-above) .field {
         display: flex;
         flex-direction: row;
         flex-wrap: nowrap;
         align-items: flex-start;
         justify-content: flex-start;
     }
-    label {
+    body:not(.login) ul.fields > li:not(.label-above) ul.fields > li > label,
+    body:not(.login) ul.fields > li:not(.label-above) .field > label,
+    body:not(.login) .field-content ul > li:not(.label-above) > label {
+        color:inherit;
+        font-weight:normal;
         display:block;
         float:none;
-        margin: 0 auto;
-        width:15em;
-        min-width:15em;
-    }
-    .sequence-member label,
-    .sequence-member .label {
         margin: 0;
-        width:10em;
-        min-width:10em;
+        width: auto;
+    }
+    body:not(.login) ul.fields > li:not(.label-above) .field > label {
+        width:40%;
+        max-width:15em;
+    }
+    body:not(.login) ul.fields > li:not(.label-above) ul.fields > li > label,
+    body:not(.login) ul.fields > li:not(.label-above) ul.fields > li > .label,
+    body:not(.login) .struct-block ul.fields > li:not(.label-above) .field > label,
+    body:not(.login) .multiple     ul.fields > li:not(.label-above) .field > label {
+        width:25%;
+        max-width:10em;
     }
     .object.full .field-content {
         flex-grow: 1;
@@ -151,8 +130,8 @@ a.button {
         margin: 0 auto;
     }
     li.codered-collapsible label+.field,
-    ul.fields > li label+.field-content,
-    ul.fields > li label+.field {
+    body:not(.login) ul.fields > li:not(.label-above) > label+.field-content,
+    body:not(.login) ul.fields > li:not(.label-above) > label+.field {
         display:block;
         flex-grow: 1;
         float:none;
@@ -161,12 +140,8 @@ a.button {
     .input {
         width:100%;
     }
-    .row-flush {
-        margin: unset;
-    }
-    .breadcrumb {
-        margin-left: -20px;
-        margin-right: -20px;
+    label, .boolean_field, .widget-checkbox_input {
+        padding-top: 0.5em;
     }
 }
 
@@ -185,39 +160,11 @@ a.button {
     margin-right: auto;
 }
 
-
-table.listing colgroup col {
-    width:auto;
-}
-
-label {
-    padding-top:0;
-    color:inherit;
-    font-weight:normal;
-}
-
-.post-page-meta {
-    text-align: center;
-}
-
-.text-center {
-    text-align: center;
-}
-
-.no-padding
-{
-    padding: 0px;
-}
-
 .tab-nav a {
-    font-size:0.9em;
-    padding:0.5em 1.5em;
-    max-height:1.5em;
+    font-size: 1em;
 }
-.tab-nav li.settings a {
-    padding:0.5em 1.5em;
-}
-.tab-nav li.seo a::before, 
+
+.tab-nav li.seo a::before,
 .tab-nav li.integrations a::before {
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
@@ -226,7 +173,6 @@ label {
     text-transform: none;
     content: "\f201";
     margin-right: .5em;
-    font-size: 1.2em;
     font-weight: 400;
 }
 
@@ -245,53 +191,24 @@ label {
     max-width:100%;
 }
 
-.nav-search input {
-    padding: 0.5em;
-}
-.nav-search button::before {
-    line-height:2.5em
-}
-
+/* Fix side menu to be able to fit more links without breaking */
 .nav-main a {
     padding: 0.6em 0.8em;
+    font-size: 1.1em;
 }
 .nav-submenu .menu-item a {
-    font-size:0.9em;
     padding: 0.6em 0 0.6em 2em;
 }
 .nav-submenu .menu-item a::before {
     margin-left:0;
 }
 
-.nav-main-solo {
-  top: 43px;
-  bottom: 0;
-  overflow: auto;
-  width: 100%;
-  list-style: none;
-  background-color: #222;
-}
-
-.nav-main-solo a {
-  text-decoration: none;
-  display: block;
-  color: #aaa;
-  padding: 0.39em;
-  font-size: 0.85em;
-  font-weight: 300;
-}
-
-.nav-main-solo a:hover, .nav-main-solo a:focus,
 .nav-main .account:hover, .nav-main .account:focus {
   outline: none;
   background-color: #0a0a0a;
   color: #fff;
 }
 
-.nav-main .footer {
-    font-size:0.9em;
-}
-
 .submenu-active * {
     box-sizing: border-box;
 }
@@ -315,24 +232,22 @@ label {
     .nav-submenu h2, .nav-submenu ul {
         width:100%;
     }
+    .nav-main {
+        margin-bottom: 70px;
+    }
     .nav-main .account em {
-        margin-top:1em;
-        font-size:0.9em;
+        margin-top:0.9em;
+        font-size: 0.9em;
+    }
+    .footer .avatar {
+        width: 40px;
+        height: 40px;
     }
     .submenu-active .nav-submenu {
         display:block;
     }
 }
 
-.c-explorer__item__link {
-    padding: 1em;
-}
-
-.nice-padding {
-    padding-left:20px;
-    padding-right:20px;
-}
-
 
 /* Custom */
 

coderedcms/static/css/codered-editor.css

@@ -15,12 +15,6 @@
     background-color:transparent;
 }
 
-label,
-.sequence-member label,
-.sequence-member .label {
-    font-size:0.9em;
-    padding:0.5em 0.5em 0.5em 0;
-}
 
 .sequence-member input[type='text'],
 .sequence-member input[type='email'],
@@ -47,19 +41,10 @@ label,
     background-color:#f2fcfc;
 }
 
-.input input[type='text'],
-.input input[type='email'],
-.input input[type='url'],
-.input input[type='number'],
-.input input[type='date'],
-.input input[type='time'],
-.input input[type='datetime'],
-.input input[type='datetime-local'],
-.input input[type='color'],
-.input select,
-.input textarea {
-    min-width:300px;
-    width:auto;
+.input input,
+.input select {
+    width: 350px;
+    max-width: 100%;
 }
 .input textarea,
 .full .input input {
@@ -71,7 +56,7 @@ label,
 }
 
 
-/* Override and enhance the streamfield editor */
+/* Override and enhance the streamfield editor to support our deeply nested streamfields. */
 
 .chooser .unchosen::before, .chooser .chosen::before {
     color:rgba(0,0,0,0.2)
@@ -84,7 +69,7 @@ li.sequence-member {
 li.sequence-member li.sequence-member {
     background-color:rgba(0,0,0,0.05);
     border:none;
-    margin:0 0 50px 0;
+    margin:0 0 20px 0;
 
 }
 li.sequence-member:hover {
@@ -111,35 +96,19 @@ li.sequence-member .struct-block .sequence-container .sequence-member-inner {
 
 .sequence-controls {
     border: none;
-    background-color: inherit;
+    background-color: transparent;
+    top: unset;
 }
 .sequence-controls h3 label {
     font-weight: bold;
-    display: inline;
-    vertical-align: middle;
 }
 
 .objects * {
     box-sizing: border-box;
 }
 
-.object.stream-field {
-    margin-top:50px;
-}
-
 .object > h2 {
     font-weight: 600;
-    height: 3em;
-    line-height: 1em;
-}
-.object > h2 label::before, .object > h2::before {
-    line-height:1.5em;
-}
-.object.empty .add .button::before {
-    line-height:2em;
-    height:2em;
-    width:2.3em;
-
 }
 
 .object .multiple {
@@ -167,10 +136,6 @@ li.sequence-member .struct-block .fields {
     color:#888;
 }
 
-.tab-content section {
-    padding-top:0;
-}
-
 .fields > li, .field-col {
     padding-bottom:0.5em;
 }