kaui 2.1.0 → 2.2.1

data/app/assets/stylesheets/kaui/{common.less → common.scss}

@@ -2,7 +2,9 @@
  * Basic & Common
  */
 @import url(https://fonts.googleapis.com/css?family=Lato:400,700,900,300);
-
+$smphone: unquote("max-width: 450px");
+$phone: unquote("max-width: 768px");
+$tablet: unquote("max-width: 1024px");
 body {
     background: #f9f9f9;
     animation: all 0.5s;
@@ -187,7 +189,7 @@ table {
     border: 1px solid #f3f3f3;
     padding: 0 60px;
 
-    @media (@phone) {
+    @media ($phone) {
         padding: 0 5px;
     }
 
@@ -199,7 +201,7 @@ table {
         text-transform: uppercase;
         padding: 10px 20px;
 
-        @media (@phone) {
+        @media ($phone) {
             padding: 5px;
             word-break: break-word;
         }
@@ -216,7 +218,7 @@ table {
     td {
         padding: 20px;
 
-        @media (@phone) {
+        @media ($phone) {
             padding: 5px;
             word-break: break-word;
         }
@@ -227,7 +229,7 @@ table {
             display: none;
         }
 
-        @media (@phone) {
+        @media ($phone) {
             padding: 0;
             display: block;
             line-height: 0;
@@ -312,7 +314,7 @@ table {
         th, td {
             padding: 5px;
 
-            @media (@phone) {
+            @media ($phone) {
                 padding: 2px;
                 font-size: 10px;
             }
@@ -328,7 +330,7 @@ table {
 table.transparent {
     margin-bottom: 30px;
 
-    @media (@phone) {
+    @media ($phone) {
         th {
             width: 40%;
             word-break: break-all;
@@ -384,14 +386,14 @@ table.subtitle {
 .fix-position {
     padding-left: 20px;
 
-    @media (@phone) {
+    @media ($phone) {
         padding-left: 15px;
     }
 }
 
 > .row {
     > .col-md-5 {
-        @media (@phone) {
+        @media ($phone) {
             padding: 0 15px 0 25px;
         }
     }
@@ -406,7 +408,7 @@ table.subtitle {
     overflow: hidden;
     transition: all 0.5s;
 
-    @media (@phone) {
+    @media ($phone) {
         padding: 0 10px;
     }
 
@@ -443,7 +445,7 @@ table.subtitle {
     .first-line {
         cursor: pointer;
 
-        @media (@phone) {
+        @media ($phone) {
             font-size: 12px;
         }
 
@@ -478,7 +480,7 @@ table.subtitle {
     .expires {
         float: right;
 
-        @media (@phone) {
+        @media ($phone) {
             display: none;
         }
     }
@@ -491,7 +493,7 @@ table.subtitle {
             border-bottom: 1px solid #ccc;
             margin-bottom: 30px;
 
-            @media (@phone) {
+            @media ($phone) {
                 margin: 0 -10px;
                 padding: 0 10px;
             }
@@ -505,7 +507,7 @@ table.subtitle {
                     margin: 0 5px 0 0;
                 }
 
-                @media (@phone) {
+                @media ($phone) {
                     width: 32%;
                     display: inline-block;
                     text-align: center;
@@ -546,7 +548,7 @@ form[id^="new_tag_definition"] {
 
       .tag-definition-select {
         display: inline-block;
-        width: calc(~"100% - 25px");
+        width: calc(unquote("100% - 25px"));
       }
     }
   }

data/app/assets/stylesheets/kaui/{datatable.less → datatable.scss}

@@ -1,3 +1,6 @@
+$smphone: unquote("max-width: 450px");
+$phone: unquote("max-width: 768px");
+$tablet: unquote("max-width: 1024px");
 .search {
     table {
         font-weight: 400;
@@ -6,7 +9,7 @@
             &:first-of-type {
                 padding-left: 60px;
 
-                @media (@phone) {
+                @media ($phone) {
                     padding: 5px;
                 }
             }
@@ -70,7 +73,7 @@ table.dataTable {
     margin-top: 0 !important;
     margin-bottom: 0 !important;
 
-    @media (@phone) {
+    @media ($phone) {
         margin-bottom: 30px !important;
     }
 }
@@ -94,7 +97,7 @@ table.dataTable.no-footer {
 }
 
 #accounts-table {
-    @media (@phone) {
+    @media ($phone) {
         width: 100% !important;
     }
 }

data/app/assets/stylesheets/kaui/{header.less → header.scss}

@@ -1,6 +1,10 @@
 /*
  * Header Layout
  */
+ $smphone: unquote("max-width: 450px");
+$phone: unquote("max-width: 768px");
+$tablet: unquote("max-width: 1024px");
+
 header {
     padding: 25px 0;
     background: #fff;
@@ -10,7 +14,7 @@ header {
     img {
         vertical-align: middle;
 
-        @media (@phone) {
+        @media ($phone) {
             display: block;
             margin: 0 auto 10px;
         }
@@ -22,7 +26,7 @@ header {
         position: relative;
         display: inline-block;
 
-        @media (@phone) {
+        @media ($phone) {
             width: 185px;
             display: block;
             margin: 0 auto 10px;
@@ -31,11 +35,11 @@ header {
         input[type="text"] {
             padding-right: 28px;
 
-            @media (@tablet) {
+            @media ($tablet) {
                 width: 100px;
             }
 
-            @media (@phone) {
+            @media ($phone) {
                 width: 100%;
             }
         }
@@ -60,14 +64,14 @@ header {
         font-size: 12px;
         text-transform: uppercase;
 
-        @media (@phone) {
+        @media ($phone) {
             text-align: center;
             display: block;
         }
     }
 
     nav {
-        @media (@phone) {
+        @media ($phone) {
             text-align: center;
         }
 
@@ -75,7 +79,7 @@ header {
             padding: 6px 0;
             margin: 0;
 
-            @media (@tablet) {
+            @media ($tablet) {
                 text-align: center;
 
                 &.account-menu {
@@ -83,8 +87,8 @@ header {
                 }
             }
 
-            @media (@phone) {
-                
+            @media ($phone) {
+
             }
 
             li {
@@ -119,7 +123,7 @@ header {
     margin-top: -40px;
 
     .container {
-        @media (@phone) {
+        @media ($phone) {
             text-align: center;
             width: 100%;
             padding: 0 15px;
@@ -135,7 +139,7 @@ header {
         background: transparent;
         vertical-align: top;
 
-        @media (@phone) {
+        @media ($phone) {
             width: 30%;
             padding: 12px 0;
             text-align: center;
@@ -150,7 +154,7 @@ header {
             }
         }
 
-        @media (@smphone) {
+        @media ($smphone) {
             width: 50%;
             border: 0;
 

data/app/assets/stylesheets/kaui/{home.less → home.scss}

@@ -1,13 +1,16 @@
 /*
  * Home Page
  */
+ $smphone: unquote("max-width: 450px");
+$phone: unquote("max-width: 768px");
+$tablet: unquote("max-width: 1024px");
 .home {
     text-align: center;
 
     #home_searchform {
         padding-top: 150px;
 
-        @media (@phone) {
+        @media ($phone) {
             padding-top: 50px;
         }
 
@@ -18,7 +21,7 @@
             width: 330px;
             height: 50px;
 
-            @media (@phone) {
+            @media ($phone) {
                 line-height: 33px;
                 padding: 0 10px;
                 font-size: 16px;
@@ -38,7 +41,7 @@
             vertical-align: top;
             margin: 0 0 0 10px;
 
-            @media (@phone) {
+            @media ($phone) {
                 height: 35px;
                 width: 42px;
                 border-radius: 15px;
@@ -64,7 +67,7 @@
         background: asset-url("kaui/duck.png") no-repeat center center;
         text-align: center;
 
-        @media (@phone) {
+        @media ($phone) {
             position: relative;
             right: initial;
             bottom: initial;

data/app/assets/stylesheets/kaui/{invoice.less → invoice.scss}

@@ -1,9 +1,13 @@
+$smphone: unquote("max-width: 450px");
+$phone: unquote("max-width: 768px");
+$tablet: unquote("max-width: 1024px");
+
 table.invoice-totals {
     border-top: 0;
     padding-top: 15px;
     margin-top: 45px;
 
-    @media (@phone) {
+    @media ($phone) {
         tr:first-of-type {
             th {
                 padding-top: 60px;
@@ -22,7 +26,7 @@ table.invoice-totals {
         text-align: right;
         padding-right: 15px;
 
-        @media (@phone) {
+        @media ($phone) {
             width: 50%;
         }
     }
@@ -30,7 +34,7 @@ table.invoice-totals {
     td {
         width: 20%;
 
-        @media (@phone) {
+        @media ($phone) {
             width: 50%;
         }
     }

data/app/assets/stylesheets/kaui/kaui.scss

@@ -0,0 +1,265 @@
+
+$smphone: unquote("max-width: 450px");
+$phone: unquote("max-width: 768px");
+$tablet: unquote("max-width: 1024px");
+
+@import "kaui/kaui_bootstrap.scss";
+@import "kaui/common.scss";
+@import "kaui/header.scss";
+
+@import "kaui/home.scss";
+
+@import "kaui/tags.scss";
+@import "kaui/subscription.scss";
+@import "kaui/invoice.scss";
+@import "kaui/payment.scss";
+@import "kaui/timeline.scss";
+
+@import "kaui/datatable.scss";
+
+@import "kaui/account.scss";
+@import "kaui/overdue.scss";
+
+@import "kaui/audit.scss";
+@import "kaui/tooltip.scss";
+
+// popover max width
+.popover {
+    max-width: 350px;
+  }
+
+//@todo: Remove?
+/// Set the correct sprite paths
+
+
+// Set the Font Awesome (Font Awesome is default. You can disable by commenting below lines)
+$fontAwesomeEotPath: font-url("fontawesome-webfont.eot");
+$fontAwesomeEotPath_iefix: font-url("fontawesome-webfont.eot?#iefix");
+$fontAwesomeWoffPath: font-url("fontawesome-webfont.woff");
+$fontAwesomeTtfPath: font-url("fontawesome-webfont.ttf");
+$fontAwesomeSvgPath: font-url("fontawesome-webfont.svg#fontawesomeregular");
+
+//@todo: Remove?
+// Font Awesome
+//@import "font-awesome.css";
+
+/* Override Bootstrap 5 font locations */
+@font-face {
+  font-family: 'Glyphicons Halflings';
+  src: image-url('glyphicons-halflings-regular.eot');
+  src: image-url('glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'),
+  image-url('glyphicons-halflings-regular.woff') format('woff'),
+  image-url('glyphicons-halflings-regular.ttf') format('truetype'),
+  image-url('glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
+}
+
+
+$smphone: unquote("max-width: 450px");
+$phone: unquote("max-width: 768px");
+$tablet: unquote("max-width: 1024px");
+
+.tag-bar {
+    border-bottom: 1px solid #ddd;
+    margin-bottom: 0;
+    position: relative;
+
+    .tag-select {
+        display: inline-block;
+        vertical-align: middle;
+
+        @media ($smphone) {
+            width: 35%;
+        }
+
+        span {
+            padding: 5px 20px;
+            text-align: center;
+            display: block;
+            border-right: 1px solid #ddd;
+
+            @media ($phone) {
+                border: 0;
+            }
+
+            i {
+                margin: 0 5px;
+                color: #515151;
+                font-size: 16px;
+
+                &.fa-caret-down {
+                    color: #999999;
+                    font-size: 12px;
+                }
+
+                &.fa-tag {
+                    font-size: 18px;
+                }
+
+                &.fa-money, &.fa-credit-card {
+                    font-size: 16px;
+                }
+            }
+        }
+
+        &:hover {
+            .tag-select-box {
+                max-height: 500px;
+                padding: 20px 25px;
+                border: 1px solid #ddd;
+                box-shadow: 1px 3px 2px rgba(0, 0, 0, 0.11);
+            }
+        }
+
+        .tag-select-box {
+            position: absolute;
+            top: 100%;
+            left: -1px;
+            max-height: 0;
+            background-color: #fff;
+            z-index: 100;
+            padding: 0 15px;
+            font-size: 12px;
+            color: #999999;
+            overflow: auto;
+            width: auto;
+            border-bottom: 0;
+            display: inline-block;
+
+            @media ($phone) {
+                border: 0;
+            }
+
+            strong {
+                display: block;
+                font-weight: 400;
+                margin: 0 0 10px;
+            }
+
+            form {
+                display: inline-block;
+                width: 210px;
+            }
+
+            input[type=checkbox] {
+                display: inline-block;
+                width: 9%;
+                margin: 0 1% 0 0;
+                line-height: 20px;
+                vertical-align: middle;
+            }
+
+            label {
+                font-size: 12px;
+                display: inline-block;
+                width: 85%;
+                line-height: 20px;
+                vertical-align: middle;
+                margin: 0;
+                font-weight: 400;
+            }
+
+            textarea {
+                resize: none;
+                height: 80px;
+                margin: 0 0 20px;
+                width: 100%;
+            }
+
+            a {
+                display: block;
+                font-size: 12px;
+                line-height: 20px;
+            }
+        }
+    }
+
+    .tag-selected {
+        display: inline-block;
+        padding: 2px 5px;
+        vertical-align: middle;
+
+        @media ($phone) {
+            width: 64%;
+            padding: 2px;
+            overflow: hidden;
+            border-left: 1px solid #ddd;
+        }
+
+        span {
+            display: inline-block;
+            font-size: 12px;
+            color: #777777;
+            background: #e5e5e5;
+            padding: 3px 20px;
+            margin: 0 5px;
+            transition: all 0.5s;
+            cursor: pointer;
+
+            &:hover {
+                background-color: #cce9eb;
+            }
+
+            @media ($phone) {
+                font-size: 10px;
+                padding: 3px 5px;
+                display: block;
+                margin: 0 0 2px;
+            }
+        }
+    }
+}
+
+.tag-bar-breathe {
+    margin-bottom: 30px;
+}
+
+.tag-bar-no-border {
+    border-bottom: 0;
+
+    .tag-select {
+        span {
+            border-right: 0;
+        }
+    }
+}
+
+#main-menu {
+    .tag-bar {
+        .tag-select {
+            position: relative;
+        }
+        .tag-select-box {
+          word-break: keep-all;
+          white-space: nowrap;
+        }
+    }
+}
+
+.inline-row-tag-bar{
+    padding-left: 10px !important;
+
+    .tag-bar {
+
+      .tag-select {
+        span {
+          padding: 5px;
+          border-right: none;
+
+          i {
+            margin: 0 3px;
+            font-size: 12px;
+
+            &.fa-tag {
+              font-size: 12px;
+            }
+          }
+        }
+      }
+      .tag-select-box {
+        label {
+          white-space: nowrap;
+        }
+      }
+    }
+}
+

data/app/assets/stylesheets/kaui/kaui_bootstrap.scss

@@ -0,0 +1,3 @@
+@import "font-awesome";
+@import "bootstrap-sprockets";
+@import "bootstrap";

data/app/assets/stylesheets/kaui/{overdue.less → overdue.scss}

@@ -6,4 +6,6 @@
   max-width: 100px;
 }
 
-
+$smphone: unquote("max-width: 450px");
+$phone: unquote("max-width: 768px");
+$tablet: unquote("max-width: 1024px");

data/app/assets/stylesheets/kaui/{payment.less → payment.scss}

@@ -1,3 +1,6 @@
+$smphone: unquote("max-width: 450px");
+$phone: unquote("max-width: 768px");
+$tablet: unquote("max-width: 1024px");
 #invoice-payments h3 {
     text-align: left;
     border-bottom: 0;

data/app/assets/stylesheets/kaui/{subscription.less → subscription.scss}

@@ -21,4 +21,7 @@ table tr.expired {
 
 .price-override-popover {
   cursor: pointer;
-}
+}
+$smphone: unquote("max-width: 450px");
+$phone: unquote("max-width: 768px");
+$tablet: unquote("max-width: 1024px");

data/app/assets/stylesheets/kaui/{tags.less → tags.scss}

@@ -1,3 +1,7 @@
+$smphone: unquote("max-width: 450px");
+$phone: unquote("max-width: 768px");
+$tablet: unquote("max-width: 1024px");
+
 .tag-bar {
     border-bottom: 1px solid #ddd;
     margin-bottom: 0;
@@ -7,7 +11,7 @@
         display: inline-block;
         vertical-align: middle;
 
-        @media (@smphone) {
+        @media ($smphone) {
             width: 35%;
         }
 
@@ -17,7 +21,7 @@
             display: block;
             border-right: 1px solid #ddd;
 
-            @media (@phone) {
+            @media ($phone) {
                 border: 0;
             }
 
@@ -65,7 +69,7 @@
             border-bottom: 0;
             display: inline-block;
 
-            @media (@phone) {
+            @media ($phone) {
                 border: 0;
             }
 
@@ -118,7 +122,7 @@
         padding: 2px 5px;
         vertical-align: middle;
 
-        @media (@phone) {
+        @media ($phone) {
             width: 64%;
             padding: 2px;
             overflow: hidden;
@@ -139,7 +143,7 @@
                 background-color: #cce9eb;
             }
 
-            @media (@phone) {
+            @media ($phone) {
                 font-size: 10px;
                 padding: 3px 5px;
                 display: block;

data/app/assets/stylesheets/kaui/timeline.scss

@@ -0,0 +1,7 @@
+#timeline-table ul {
+    list-style-type: none;
+    padding-left: 0;
+}
+$smphone: unquote("max-width: 450px");
+$phone: unquote("max-width: 768px");
+$tablet: unquote("max-width: 1024px");