improved play and stop button (#2692)

* improved play and stop button if only one record is allowed
* stop button first in action menu
* fix skin colors
* autofocus term field in search form
* fix responsive column layout in invoice listing
* improve responsive header for small screens

assets/sass/avatar.scss

@@ -15,43 +15,21 @@ $avatar-base-size: 30;
     line-height: 1;
     position: relative;
     font-weight: bold;
-    font-size: ($avatar-base-size / 2 - 2)+px;
-    top: ($avatar-base-size / 4 - 1)+px;
+    font-size: ceil($avatar-base-size / 2 - 2)+px;
+    top: ceil($avatar-base-size / 4 - 1)+px;
 }
 
-.avatar-xs {
-    width: ($avatar-base-size * 0.75)+px;
-    height: ($avatar-base-size * 0.75)+px;
-    .initials {
-        font-size: ($avatar-base-size * .75 / 2 - 2)+px;
-        top: ($avatar-base-size * .75 / 4 - 1)+px;
-    }
-}
+$avatarSizes: "xs" .75, "sm" 1.25, "md" 1.5, "lg" 2;
 
-.avatar-sm {
-    width: ($avatar-base-size * 1.25)+px;
-    height: ($avatar-base-size * 1.25)+px;
-    .initials {
-        font-size: ($avatar-base-size * 1.25 / 2 - 2)+px;
-        top: ($avatar-base-size * 1.25 / 4 - 1)+px;
-    }
-}
+@each $avatarSizeName, $avatarBaseSize in $avatarSizes {
+    .avatar-#{$avatarSizeName} {
+        width: ceil($avatar-base-size * $avatarBaseSize)+px;
+        height: ceil($avatar-base-size * $avatarBaseSize)+px;
 
-.avatar-md {
-    width: ($avatar-base-size * 1.5)+px;
-    height: ($avatar-base-size * 1.5)+px;
-    .initials {
-        font-size: ($avatar-base-size * 1.5 / 2 - 2)+px;
-        top: ($avatar-base-size * 1.5 / 4 - 1)+px;
-    }
-}
-
-.avatar-lg {
-    width: ($avatar-base-size * 2)+px;
-    height: ($avatar-base-size * 2)+px;
-    .initials {
-        font-size: ($avatar-base-size * 2 / 2 - 2)+px;
-        top: ($avatar-base-size * 2 / 4 - 1)+px;
+        .initials {
+            font-size: ceil($avatar-base-size * $avatarBaseSize / 2 - 2)+px;
+            top: ceil($avatar-base-size * $avatarBaseSize / 4 - 1)+px;
+        }
     }
 }
 
@@ -59,11 +37,11 @@ $avatar-base-size: 30;
     border-radius: 50%;
     border: 3px solid #fff;
     .avatar {
-        width: ($avatar-base-size * 2.75)+px;
-        height: ($avatar-base-size * 2.75)+px;
+        width: ceil($avatar-base-size * 2.75)+px;
+        height: ceil($avatar-base-size * 2.75)+px;
         .initials {
-            font-size: ($avatar-base-size * 2.75 / 2 - 2)+px;
-            top: ($avatar-base-size * 2.75 / 4 - 1)+px;
+            font-size: ceil($avatar-base-size * 2.75 / 2 - 2)+px;
+            top: ceil($avatar-base-size * 2.75 / 4 - 1)+px;
         }
     }
 }

assets/sass/content-header.scss

@@ -32,6 +32,9 @@
 }
 
 @media (max-width: $screen-md-min) {
+    .content-header h1 {
+        font-size: 1.5em;
+    }
     .content-header>.breadcrumb {
         margin-top: 0;
     }

assets/sass/navbar.scss

@@ -5,22 +5,34 @@
  * file that was distributed with this source code.
  */
 
+.navbar-custom-menu {
+    .navbar-nav {
+        li>.ddt-small {
+            padding-top: 10px;
+            padding-bottom: 10px;
+        }
+    }
+}
+
 .navbar-nav {
     img.img-circle {
         max-height: 26px;
         margin-top: -2px;
     }
     .avatar {
-        max-height: 26px;
-        max-width: 26px;
-        margin-top: -2px;
+        max-height: 30px;
+        max-width: 30px;
+        height: 30px;
+        width: 30px;
+        margin-top: 0;
         .initials {
-            top: 4px;
+            top: 5px;
+            left: 0;
         }
     }
-    li>a.ddt-large {
-        padding: 15px 12px 11px 10px;
-        font-size: 10px;
+    li>.ddt-small {
+        padding-top: 10px;
+        padding-bottom: 10px;
     }
     li.messages-menu ul.menu li {
         a:hover .pull-left i {
@@ -43,17 +55,13 @@
         width: unset !important;
     }
     .user-menu {
-        margin-right: 10px;
         ul {
             li {
                 a {
+                    color: #444;
                     &:hover {
                         background-color: #f4f4f4;
-                        i {
-                            color: $blue;
-                        }
                     }
-                    color: #444;
                     i {
                         padding-right: 10px;
                     }
@@ -64,9 +72,6 @@
             }
         }
     }
-    .notifications-menu>.dropdown-menu>li .menu>li>a:hover i {
-        color: $green;
-    }
 }
 
 @media (max-width: $screen-sm-min) {
@@ -80,25 +85,69 @@
         padding: 5px 25px 5px 25px
     }
 }
-
-/*
-.ticktac:hover i.running{
-    color: #4ff131;
+@keyframes ticktac-blink {
+    0% { opacity: 1; }
+    5% { opacity: 0.95; }
+    10% { opacity: 0.9; }
+    15% { opacity: 0.85; }
+    20% { opacity: 0.8; }
+    25% { opacity: 0.75; }
+    30% { opacity: 0.7; }
+    35% { opacity: 0.65; }
+    40% { opacity: 0.6; }
+    45% { opacity: 0.65; }
+    50% { opacity: 0.7; }
+    55% { opacity: 0.75; }
+    60% { opacity: 0.8; }
+    65% { opacity: 0.85; }
+    70% { opacity: 0.9; }
+    75% { opacity: 0.95; }
+    100% { opacity: 1; }
+}
+.ticktac-single {
+    display: block;
+    position: relative;
+    padding-left: 15px;
+    padding-right: 15px;
+    i {
+        animation: ticktac-blink 2s step-end infinite;
+    }
+    span {
+        font-size: 1.8em;
+        line-height: 1em;
+        padding-left: 5px;
+        padding-right: 0;
+    }
+    &:hover {
+        background: rgba(0,0,0,.3);
+    }
+}
+body.fixed {
+    .navbar-nav {
+        .user-menu {
+            margin-right: 10px;
+        }
+    }
 }
 
-li.open .ticktac i.running{
-    color: #4ff131;
+@media (max-width: $screen-sm-min) {
+    .ticktac-single {
+        padding-left: 5px;
+        padding-right: 5px;
+    }
+    .navbar-custom-menu .navbar-nav li>.ddt-small {
+        padding-left: 5px;
+        padding-right: 5px;
+    }
 }
 
-.ticktac i.stopped{
-    color: #fff;
+@media (max-width: $screen-md-min) {
+    .ticktac-single {
+        padding-left: 10px;
+        padding-right: 10px;
+    }
+    .navbar-custom-menu .navbar-nav li>.ddt-small {
+        padding-left: 10px;
+        padding-right: 10px;
+    }
 }
-
-.ticktac:hover i.stopped{
-    color: #4ff131;
-}
-.user-panel>.info {
-    left: 40px;
-    padding-top: 0px;
-}
-*/

assets/sass/skins.scss

@@ -1,26 +1,69 @@
 
-$skins: blue, blue, black, green, purple, red, yellow;
+$skins:
+    "blue" $yellow #fff $yellow $red,
+    "black" $yellow #000 $green $red,
+    "green" $yellow #fff $yellow $red,
+    "purple" $yellow #fff $yellow $red,
+    "red" $yellow #fff $yellow $yellow,
+    "yellow" $blue #fff $green $red
+;
 
-@each $skinColor in $skins {
-    @media (max-width: $screen-sm-min) {
-        .skin-#{$skinColor} .main-header .navbar .dropdown-menu li.divider {
-            background-color: #ccc;
-        }
-        .skin-#{$skinColor} .main-header .navbar .dropdown-menu li a {
-            color: #444;
-        }
-        .skin-#{$skinColor} .main-header .navbar .dropdown-menu li a:hover {
-            background: #fff;
-        }
+@each $skinColor, $navHighlight, $tickTacColor, $startButton, $stopButton in $skins {
+    @each $prefix in (".skin-#{$skinColor}", ".skin-#{$skinColor}-light") {
+        @media (max-width: $screen-sm-min) {
+            #{$prefix} {
+                .main-header .navbar .dropdown-menu li.divider {
+                    background-color: #ccc;
+                }
 
-        .skin-#{$skinColor}-light .main-header .navbar .dropdown-menu li.divider {
-            background-color: #ccc;
+                .main-header .navbar .dropdown-menu li a {
+                    color: #444;
+                }
+
+                .main-header .navbar .dropdown-menu li a:hover {
+                    background: #fff;
+                }
+            }
         }
-        .skin-#{$skinColor}-light .main-header .navbar .dropdown-menu li a {
-            color: #444;
-        }
-        .skin-#{$skinColor}-light .main-header .navbar .dropdown-menu li a:hover {
-            background: #fff;
+        #{$prefix} {
+            .navbar-nav {
+                .user-menu {
+                    ul {
+                        li {
+                            a {
+                                &:hover {
+                                    i {
+                                        color: $navHighlight;
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+                .notifications-menu > .dropdown-menu > li .menu > li > a:hover i {
+                    color: $navHighlight;
+                }
+            }
+            .ticktac-single {
+                i {
+                    color: $tickTacColor;
+                }
+                span {
+                    color: $tickTacColor;
+                }
+                &:hover {
+                    .ticktac-stop {
+                        i {
+                            color: $stopButton;
+                        }
+                    }
+                    .ticktac-start {
+                        i {
+                            color: $startButton;
+                        }
+                    }
+                }
+            }
         }
     }
 }

assets/sass/variables.scss

@@ -25,7 +25,7 @@ $green: #00a65a;
 // Info
 //$aqua: #00c0ef;
 // Warning
-//$yellow: #f39c12;
+$yellow: #f0ad4e;
 $blue: #0073b7;
 //$navy: #001F3F;
 //$teal: #39CCCC;