style(sass): updates to sass for darker colors

polonel · Nov 5, 2018 · 1cf8dd8 · 1cf8dd8
1 parent 884519c
commit 1cf8dd8
Show file tree

Hide file tree

Showing 14 changed files with 63 additions and 42 deletions.
diff --git a/.gitignore b/.gitignore
@@ -29,6 +29,7 @@ node_modules
 *.sassc
 
 #custom
+package-lock.json
 config.json
 import.csv
 /src/mailer/templates/promo/

diff --git a/public/css/plugins.css b/public/css/plugins.css
diff --git a/public/css/plugins.min.css b/public/css/plugins.min.css
diff --git a/src/public/js/vendor/uikit/js/uikit_combined.min.js b/src/public/js/vendor/uikit/js/uikit_combined.min.js
diff --git a/src/sass/partials/common.sass b/src/sass/partials/common.sass
@@ -344,7 +344,7 @@ a.button
     font-size: 24px
     font-weight: 500
     line-height: 30px
-    color: #444
+    color: automatic-text-color(lighten($page_content_right_bg, 10%))
 
 .action-link
   background: transparent
@@ -379,20 +379,20 @@ a.button
   li
     float: none !important
     width: 100% !important
-    background: #f5f5f5 !important
-    color: #444
+    background: $page_content_button_color !important
+    color: $page_content_button_text_color !important
     line-height: 1.4em !important
     height: auto !important
   a
     display: block
     width: 100%
-    background: #f5f5f5 !important
+    background: $page_content_button_color !important
     line-height: 1.4em !important
     padding: 5px 15px !important
-    color: #212121 !important
+    color: $page_content_button_text_color !important
     &:hover
       background: rgba(0,0,0, 0.085) !important
-      color: #212121 !important
+      color: $page_content_button_text_color !important
 
 .disconnected
   z-index: 10000
@@ -676,6 +676,15 @@ div.hoverAction
   background: lighten($page_content_title_bg, 10%)
   border-top: $page_content_border_top
 
+.search-box input.ticket-top-search
+  background: $page_content_button_color
+  height: 30px
+  border: 1px solid $page_content_button_color
+  border-radius: 5px
+  color: $page_content_button_text_color
+  &::placeholder
+    color: automatic-text-color($page_content_button_color, 'muted')
+
 .pagination
   margin-right: 8px
 

diff --git a/src/sass/partials/messages.sass b/src/sass/partials/messages.sass
@@ -23,11 +23,11 @@
     text-overflow: '...'
 
     &:hover
-      background: white
+      background: lighten($page_content_left_bg, 5%)
       cursor: pointer
 
     &.message-folder:hover
-      background: $page_content_left_bg
+      background: lighten($page_content_left_bg, 5%)
       cursor: default
 
     //&:last-child

diff --git a/src/sass/partials/mg.sass b/src/sass/partials/mg.sass
@@ -2,8 +2,10 @@
 .mGraph .mg-x-axis text,
 .mGraph .mg-y-axis text
   font-size: 11px
+  fill: $text_color
 
 .mGraph .mg-active-datapoint
+  fill: $text_color
   font-size: 13px
 
 .mGraph-panel

diff --git a/src/sass/partials/selectize.sass b/src/sass/partials/selectize.sass
@@ -297,7 +297,7 @@
       margin: 0 4px 0 -2px !important
   .selectize-input.disabled
     opacity: 0.5
-    background-color: #fafafa
+    background-color: darken($page_content_right_bg, 5%)
 
 .selectize-input
   border-color: rgba(0, 0, 0, 0.12)

diff --git a/src/sass/partials/topnav.sass b/src/sass/partials/topnav.sass
@@ -152,8 +152,8 @@
   visibility: hidden
   opacity: 0
   z-index: 99999
-  background: #ffffff
-  border: 1px solid rgba(100,100,100,0.4)
+  background: lighten($page_content_right_bg, 10%)
+  border: 1px solid rgba(0,0,0,0.2)
   //padding: 10px
   position: relative
   +boxShadow(0px 3px 8px 0px rgba(0,0,0,0.247059))
@@ -172,7 +172,7 @@
 
   &:after
     border-color: rgba(255, 255, 255, 0)
-    border-bottom-color: #fff
+    border-bottom-color: lighten($page_content_right_bg, 10%)
     border-width: 8px
     margin-left: -8px
 
@@ -204,10 +204,10 @@
   .actions
     width: 100%
     height: auto
-    border-bottom: 1px solid rgba(100,100,100,0.4)
+    border-bottom: 1px solid rgba(0,0,0,0.2)
     line-height: 24px
     font-size: 12px
-    color: #000
+    color: $text_color
     font-family: "Roboto", sans-serif
     a
       width: 100%
@@ -239,13 +239,13 @@
 
   li
     width: 100%
-    background: #ffffff !important
-    border-bottom: 1px solid rgba(100,100,100,0.4)
+    background: lighten($page_content_right_bg, 10%) !important
+    border-bottom: 1px solid rgba(0,0,0,0.2)
     height: 72px
     max-height: 80px
     line-height: normal
     &:hover
-      background: darken(#fff, 4%) !important
+      background: darken(lighten($page_content_right_bg, 10%), 4%) !important
     &:last-child
       border-bottom: none
 
@@ -254,22 +254,21 @@
       width: 100%
       height: 71px
       padding: 10px !important
-      background: #ffffff !important
+      background: lighten($page_content_right_bg, 10%) !important
       line-height: normal !important
       font-size: 12px
-      color: black !important
+      color: $text_color !important
       position: relative
 
       &:hover
         background: transparent !important
-        color: #000 !important
 
       .messageUnread
         width: 16px
         height: 16px
         font-size: 12px
         font-family: "FontAwesome"
-        color: #646464
+        color: automatic-text-color(lighten($page_content_right_bg, 10%), 'muted')
         position: absolute
         top: 8px
         right: 3px
@@ -286,7 +285,7 @@
         margin-bottom: 3px
 
       div.messageDate
-        color: #646464 !important
+        color: automatic-text-color(lighten($page_content_right_bg, 10%), 'muted') !important
 
       div.messageSnippet
         width: 218px
@@ -300,7 +299,7 @@
         font-size: 25px
         line-height: 59px
         text-align: center
-        color: black
+        color: automatic-text-color(lighten($page_content_right_bg, 10%))
         background: transparent !important
         &.warn
           color: #e7a13c

diff --git a/src/sass/partials/ui.sass b/src/sass/partials/ui.sass
@@ -336,7 +336,7 @@ label.md-label
   &.uk-badge-danger
     background: #e53935
   &.uk-badge-grey
-    background: #ccc
+    background: darken($page_content_right_bg, 5%)
   &.uk-badge-small
     font-size: 10px
     padding: 2px 4px
@@ -362,7 +362,9 @@ label.md-label
   padding-right: 12px !important
 
 .uk-dropdown
-  background: #f5f5f5
+  background: $page_content_button_color
+  & >ul > li > a
+    color: $page_content_button_text_color
 
 .uk-dropdown.uk-datepicker
   opacity: 1
@@ -575,13 +577,19 @@ textarea.review-list
 
 .no-data-available-text
   font-size: 2em
-  color: grey
+  color: automatic-text-color(lighten($page_content_right_bg, 10%), 'muted')
   font-weight: 300
   position: absolute
   top: 50%
   left: 50%
   transform: translate(-50%, -50%)
 
+.c3 text, .c3-text.c3-empty
+  fill: $text_color !important
+
+.uk-table thead th
+  color: automatic-text-color(lighten($page_content_right_bg, 10%), 'muted')
+
 .danger-zone,
 .zone
   border: 1px solid rgba(0,0,0,0.175)

diff --git a/src/views/dashboard.hbs b/src/views/dashboard.hbs
@@ -15,8 +15,10 @@
             </div>
         </div>
 
-        <div id="lastUpdated" class="right uk-text-muted uk-text-small" style="margin:23px 25px 0 0;"><strong>Last
-            Updated:</strong> <span>Cache Still Loading...</span></div>
+        <div id="lastUpdated" class="right uk-text-muted uk-text-small" style="margin:23px 25px 0 0;">
+            <strong>Last Updated:</strong>
+            <span>Cache Still Loading...</span>
+        </div>
     </div>
     <!--Content Here-->
     <div class="page-wrapper full-height scrollable no-overflow-x">

diff --git a/src/views/partials/topbar/notifications.hbs b/src/views/partials/topbar/notifications.hbs
@@ -31,7 +31,7 @@
             {{/each}}
         </ul>
     </div>
-    <div class="bottom-actions actions uk-float-left {{#compare (size data.common.notifications.items) '<' 1}} hide {{/compare}}" style="border-bottom: none; border-top: 1px solid rgba(100,100,100,0.4)">
+    <div class="bottom-actions actions uk-float-left {{#compare (size data.common.notifications.items) '<' 1}} hide {{/compare}}" style="border-bottom: none; border-top: 1px solid rgba(0,0,0,0.2)">
         <div class="uk-text-center">
             <a class="hoverUnderline" ng-click="showAllNotifications($event)">View All Notifications</a>
         </div>

diff --git a/src/views/settings.hbs b/src/views/settings.hbs
@@ -281,7 +281,7 @@
                                                 <h5 style="font-weight: normal;">Header Background</h5>
                                                 <p class="uk-text-muted">Background color of the header</p>
                                             </div>
-                                            <div class="uk-float-right uk-clearfix uk-width-1-4">
+                                            <div class="uk-float-right uk-clearfix uk-width-1-3">
                                                 <div class="uk-float-right">
                                                     <button id="headerBGColorBtn" class="uk-button uk-button-small uk-color-button mr-5 mt-10 uk-float-left" style="background: {{htmlColor}}" ng-click="generateRandomColor('', $event);"><i class="material-icons">refresh</i></button>
                                                     <div class="md-input-wrapper uk-float-left" style="width: 50%">
@@ -298,7 +298,7 @@
                                                 <h5 style="font-weight: normal;">Header Primary</h5>
                                                 <p class="uk-text-muted">Text and icon color within the header</p>
                                             </div>
-                                            <div class="uk-float-right uk-clearfix uk-width-1-4">
+                                            <div class="uk-float-right uk-clearfix uk-width-1-3">
                                                 <div class="uk-float-right">
                                                     <button id="headerPrimaryColorBtn" class="uk-button uk-button-small uk-color-button mr-5 mt-10 uk-float-left" style="background: {{htmlColor}}" ng-click="generateRandomColor('', $event);"><i class="material-icons">refresh</i></button>
                                                     <div class="md-input-wrapper uk-float-left" style="width: 50%">
@@ -315,7 +315,7 @@
                                                 <h5 style="font-weight: normal;">Primary</h5>
                                                 <p class="uk-text-muted">Most text and icons. Choose a darker color.</p>
                                             </div>
-                                            <div class="uk-float-right uk-clearfix uk-width-1-4">
+                                            <div class="uk-float-right uk-clearfix uk-width-1-3">
                                                 <div class="uk-float-right">
                                                     <button id="primaryColorBtn" class="uk-button uk-button-small uk-color-button mr-5 mt-10 uk-float-left" style="background: {{htmlColor}}" ng-click="generateRandomColor('{{_id}}', $event);"><i class="material-icons">refresh</i></button>
                                                     <div class="md-input-wrapper uk-float-left" style="width: 50%">
@@ -332,7 +332,7 @@
                                                 <h5 style="font-weight: normal;">Secondary</h5>
                                                 <p class="uk-text-muted">The main background color</p>
                                             </div>
-                                            <div class="uk-float-right uk-clearfix uk-width-1-4">
+                                            <div class="uk-float-right uk-clearfix uk-width-1-3">
                                                 <div class="uk-float-right">
                                                     <button id="secondaryColorBtn" class="uk-button uk-button-small uk-color-button mr-5 mt-10 uk-float-left" style="background: {{htmlColor}}" ng-click="generateRandomColor('{{_id}}', $event);"><i class="material-icons">refresh</i></button>
                                                     <div class="md-input-wrapper uk-float-left" style="width: 50%">
@@ -349,7 +349,7 @@
                                                 <h5 style="font-weight: normal;">Tertiary</h5>
                                                 <p class="uk-text-muted">Accent color, used for links, some buttons, and notifications</p>
                                             </div>
-                                            <div class="uk-float-right uk-clearfix uk-width-1-4">
+                                            <div class="uk-float-right uk-clearfix uk-width-1-3">
                                                 <div class="uk-float-right">
                                                     <button id="tertiaryColorBtn" class="uk-button uk-button-small uk-color-button mr-5 mt-10 uk-float-left" style="background: {{htmlColor}}" ng-click="generateRandomColor('{{_id}}', $event);"><i class="material-icons">refresh</i></button>
                                                     <div class="md-input-wrapper uk-float-left" style="width: 50%">
@@ -366,7 +366,7 @@
                                                 <h5 style="font-weight: normal;">Quaternary</h5>
                                                 <p class="uk-text-muted">Sidebar background color</p>
                                             </div>
-                                            <div class="uk-float-right uk-clearfix uk-width-1-4">
+                                            <div class="uk-float-right uk-clearfix uk-width-1-3">
                                                 <div class="uk-float-right">
                                                     <button id="quaternaryColorBtn" class="uk-button uk-button-small uk-color-button mr-5 mt-10 uk-float-left" style="background: {{htmlColor}}" ng-click="generateRandomColor('{{_id}}', $event);"><i class="material-icons">refresh</i></button>
                                                     <div class="md-input-wrapper uk-float-left" style="width: 50%">
@@ -810,7 +810,7 @@
                                                 </label>
                                             </div>
                                         </div>
-                                        <hr style="float: left; background: #ccc; margin-top: 10px;" />
+                                        <hr style="float: left; margin-top: 10px;" />
                                     </div>
                                     <div class="uk-clearfix uk-margin-medium-bottom">
                                         <div class="left">
@@ -829,7 +829,7 @@
                                                 </label>
                                             </div>
                                         </div>
-                                        <hr style="float: left; background: #ccc; margin-top: 10px;" />
+                                        <hr style="float: left; margin-top: 10px;" />
                                     </div>
                                     <div class="uk-margin-medium-bottom">
                                         <label for="mailerCheckTicketType">Default Ticket Type</label>

diff --git a/src/views/tickets.hbs b/src/views/tickets.hbs
@@ -87,8 +87,8 @@
                         </li>
                     </ul>
                 </div>
-                <div class="search-box" style="float: left; border: none; margin-top: 9px; padding-left: 0;">
-                    <input id="tickets_Search" type="text" placeholder="Search" style="height: 30px; background: #fff; border: 1px solid #ccc; border-radius: 5px;"
+                <div class="search-box" style="float: left; border: none; margin-top: 8px; padding-left: 0;">
+                    <input id="tickets_Search" type="text" placeholder="Search" class="ticket-top-search"
                            ng-keypress="searchBarSubmit($event)"
                            value="{{data.filter.subject}}">
                 </div>