Removed redash-newstyle.less (#4017)

getredash · Oct 27, 2019 · ee85923 · ee85923
1 parent 4866be6
commit ee85923
Show file tree

Hide file tree

Showing 24 changed files with 1,025 additions and 1,225 deletions.
diff --git a/client/app/assets/less/inc/alert.less b/client/app/assets/less/inc/alert.less
@@ -1,6 +1,5 @@
 .alert {
-    padding-left: 30px;
-    padding-right: 30px;
+    padding: 15px;
 
     span {
         cursor: pointer;

diff --git a/client/app/assets/less/inc/base.less b/client/app/assets/less/inc/base.less
@@ -19,11 +19,15 @@ html, body {
 }
 
 body {
-    padding-top: @header-height;
+    padding-top: 0;
+    background: #F6F8F9;
+    font-family: @redash-font;
     position: relative;
+
     &.headless {
-        padding-top: 0;
-        .nav.app-header {
+        padding-top: 10px;
+
+        .nav.app-header, .navbar {
             display: none;
         }
     }
@@ -47,20 +51,20 @@ strong {
     position: relative;
     padding-top: 30px;
     padding-bottom: 30px;
-
+    
     @media (min-width: (@screen-sm-min + 1)) {
         padding-right: 15px;
         padding-left: 15px;
     }
-
+    
     @media (min-width: (@screen-lg-min + 80px)) {
         margin-left: @sidebar-left-width;
     }
-
+    
     @media (min-width: @screen-sm-min) and (max-width: (@screen-md-max + 80px)) {
         margin-left: @sidebar-left-mid-width;
     }
-
+    
     @media (max-width: (@screen-sm-min)) {
         margin-left: 0;
     }
@@ -72,10 +76,34 @@ strong {
     }
 }
 
+// Fixed width layout for specific pages
+@media (min-width: 768px) {
+    settings-screen, home-page, page-dashboard-list, page-queries-list, page-alerts-list, alert-page, queries-search-results-page, .fixed-container {
+        .container {
+            width: 750px;
+        }
+    }
+}
+
+@media (min-width: 992px) {
+    settings-screen, home-page, page-dashboard-list, page-queries-list, page-alerts-list, alert-page, queries-search-results-page, .fixed-container {
+        .container {
+            width: 970px;
+        }
+    }
+}
+
+@media (min-width: 1200px) {
+    settings-screen, home-page, page-dashboard-list, page-queries-list, page-alerts-list, alert-page, queries-search-results-page, .fixed-container {
+        .container {
+            width: 1170px;
+        }
+    }
+}
+
 .scrollbox {
     overflow: auto;
     position: relative;
-
 }
 
 .clickable {
@@ -95,3 +123,150 @@ strong {
     resize: both !important;
     transition: height 0s, width 0s !important;
 }
+
+// Ace Editor
+.ace_editor {
+    border: 1px solid fade(@redash-gray, 15%) !important;
+}
+
+.ace-tm {
+    .ace_gutter {
+        background: #fff !important;
+    }
+
+    .ace_gutter-active-line {
+        background-color: fade(@redash-gray, 20%) !important;
+    }
+
+    .ace_marker-layer .ace_active-line {
+        background: fade(@redash-gray, 9%) !important;
+    }
+}
+
+.bg-ace {
+    background-color: fade(@redash-gray, 12%) !important;
+}
+
+// resizeable
+.rg-top span, .rg-bottom span {
+    height: 3px;
+    border-color: #b1c1ce; // TODO: variable
+}
+
+.rg-bottom {
+    bottom: 15px;
+
+    span {
+        margin: 1.5px 0 0 -10px;
+    }
+}
+
+// Plotly
+text.slicetext {
+    text-shadow: 1px 1px 5px #333;
+}
+
+// markdown
+.markdown strong {
+    font-weight: bold;
+}
+
+.markdown img {
+    max-width: 100%;
+}
+
+.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {
+    background-color: fade(@redash-gray, 15%);
+    color: #111;
+}
+
+.profile__image--navbar {
+    border-radius: 100%;
+    margin-right: 3px;
+    margin-top: -2px;
+}
+
+.profile__image--settings {
+    border-radius: 100%;
+}
+
+.profile__image_thumb {
+    border-radius: 100%;
+    margin-right: 3px;
+    margin-top: -2px;
+    width: 20px;
+    height: 20px;
+}
+
+
+// Error state
+.error-state {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    text-align: center;
+    margin-top: 25vh;
+    padding: 35px;
+    font-size: 14px;
+    line-height: 21px;
+
+    .error-state__icon {
+        .zmdi {
+            font-size: 64px;
+            color: @redash-gray;
+        }
+    }
+
+    @media (max-width: 767px) {
+        margin-top: 10vh;
+    }
+}
+
+// page
+.page-header--new .btn-favourite, .page-header--new .btn-archive {
+    font-size: 19px;
+  }
+
+  .page-title {
+    display: flex;
+    align-items: center;
+
+    h3 {
+      margin-right: 5px !important;
+    }
+
+    .label {
+      margin-top: 3px;
+      display: inline-block;
+    }
+
+    favorites-control {
+      margin-right: 5px;
+    }
+
+    @media (max-width: 767px) {
+      display: block;
+
+      favorites-control {
+        float: left;
+      }
+
+      h3 {
+        width: 100%;
+        margin-bottom: 5px !important;
+        display: block !important;
+      }
+    }
+  }
+
+  .page-header-wrapper, .page-header--new {
+    h3 {
+      margin: 0.2em 0;
+      line-height: 1.3;
+      font-weight: 500;
+    }
+  }
+
+  .select-option-divider {
+    margin: 10px 0 !important;
+  }
diff --git a/client/app/assets/less/inc/bootstrap-overrides.less b/client/app/assets/less/inc/bootstrap-overrides.less
@@ -31,7 +31,7 @@
 
 .collapsing,
 .collapse.in {
-    padding: 5px 10px;
+    padding: 0;
     transition: all 0.35s ease;
 }
 

diff --git a/client/app/assets/less/inc/button.less b/client/app/assets/less/inc/button.less
@@ -122,3 +122,21 @@
   top: 1px;
   position: relative;
 }
+
+
+.btn-default {
+    background-color: fade(@redash-gray, 15%);
+}
+
+.btn-transparent {
+    background-color: transparent !important;
+}
+
+.btn-default:hover, .btn-default:focus, .btn-default.focus, .btn-default:active, .btn-default.active, .open > .dropdown-toggle.btn-default {
+    background-color: fade(@redash-gray, 25%);
+}
+
+.btn-default:active:hover, .btn-default.active:hover, .open > .dropdown-toggle.btn-default:hover, .btn-default:active:focus, .btn-default.active:focus, .open > .dropdown-toggle.btn-default:focus, .btn-default:active.focus, .btn-default.active.focus, .open > .dropdown-toggle.btn-default.focus {
+    color: #333;
+    background-color: fade(@redash-gray, 45%);
+}
diff --git a/client/app/assets/less/inc/form.less b/client/app/assets/less/inc/form.less
@@ -55,14 +55,17 @@ textarea.v-resizable {
     .transition-duration(300ms);
     resize: none;
     box-shadow: 0 0 0 40px rgba(0, 0, 0, 0) !important;
-    border-radius: 0;
+    border-radius: @redash-input-radius;
 
     &:focus {
-        box-shadow: 0 0 1px -2px rgba(121,194,255,0.5) !important;
+        box-shadow: none !important;
+        border-color: @blue;
+    }
+    &:hover {
+        border-color: @blue;
     }
 }
 
-
 /* --------------------------------------------------------
     Custom Checkbox + Radio
 -----------------------------------------------------------*/

diff --git a/client/app/assets/less/inc/generics.less b/client/app/assets/less/inc/generics.less
@@ -153,4 +153,10 @@
 /* --------------------------------------------------------
     Border Radius
 -----------------------------------------------------------*/
-.brd-2 { border-radius: 2px; }
+.brd-2 { border-radius: 2px; }
+
+
+/* --------------------------------------------------------
+    Alignment
+-----------------------------------------------------------*/
+.va-top { vertical-align: top; }
diff --git a/client/app/assets/less/inc/label.less b/client/app/assets/less/inc/label.less
@@ -1,14 +1,37 @@
 .label {
+    border-radius: 2px;
+    padding: 3px 6px 4px;
+    font-weight: 500;
+    font-size: 11px;
+}
+
+.badge {
     border-radius: 1px;
-    padding: 4px 5px 3px;
 }
 
-h1, h2, h3, h4, h5, h6 {
-    .label {
-        border-radius: 2px;
-    }
+.label-default {
+    background: fade(@redash-gray, 85%);
 }
 
-.badge {
-    border-radius: 1px;
+.label-tag-unpublished {
+    background: fade(@redash-gray, 85%);
+}
+
+.label-tag-archived {
+    .label-warning();
+}
+
+.label-tag {
+    background: fade(@redash-gray, 10%);
+    color: fade(@redash-gray, 75%);
+}
+
+.label-tag-unpublished,
+.label-tag-archived,
+.label-tag {
+    margin-right: 3px;
+    display: inline;
+    margin-top: 2px;
+    max-width: 24ch;
+    .text-overflow();
 }