[frio] Restore focus styles
authorHypolite Petovan <hypolite@mrpetovan.com>
Mon, 27 Apr 2020 13:43:46 +0000 (09:43 -0400)
committerHypolite Petovan <hypolite@mrpetovan.com>
Mon, 27 Apr 2020 13:43:46 +0000 (09:43 -0400)
- Replace .btn-main by .btn-primary
- Harmonize focus styles between buttons and form controls based on the theme scheme

view/theme/frio/css/style.css
view/theme/frio/templates/jot.tpl
view/theme/frio/templates/searchbox.tpl

index 3dd4b8e..88f290a 100644 (file)
@@ -56,13 +56,13 @@ body a[name]:not([href]) {
     visibility: hidden;
 }
 
-body a:hover, .btn-link:hover, .btn:hover,
-body a:focus, .btn-link:focus, .btn:focus,
-body a:active, .btn-link:active, .btn:active,
-body a.active, .btn-link.active, .btn.active {
+body a:hover, .btn-link:hover,
+body a:focus, .btn-link:focus,
+body a:active, .btn-link:active,
+body a.active, .btn-link.active {
     color: $link_hover_color;
+       outline-color: $link_hover_color;;
     text-decoration: none;
-    outline: none;
 }
 
 .wall-item-container a:hover {
@@ -197,8 +197,8 @@ blockquote {
     padding: 8px 16px;
     color: inherit;
 }
-a.btn:hover {
-    color: #333;
+.btn:focus {
+       outline-color: $link_hover_color;
 }
 
 .btn-default {
@@ -219,17 +219,17 @@ a.btn:hover {
     padding: 1px 5px;
     font-size: 12px;
 }
-.btn-primary {
-    background: $nav_bg !important;
-    color: $btn_primary_color !important;
+.btn.btn-primary {
+    background: $nav_bg;
+    color: $btn_primary_color;
 }
-.btn-primary:hover, .btn-primary:focus {
+.btn.btn-primary:hover, .btn.btn-primary:focus {
+       color: $btn_primary_color;
     background: $btn_primary_hover_color;
     text-decoration: none;
 }
-.btn-primary:active, .btn-primary.active {
-    outline: 0;
-    background: $btn_primary_hover_color !important;
+.btn.btn-primary:active, .btn.btn-primary.active {
+    background: $btn_primary_hover_color;
 }
 
 .btn-primary.active.focus, .btn-primary.active:focus, .btn-primary.active:hover,
@@ -262,31 +262,7 @@ a.btn:hover {
 .btn-separator {
     border-left: 1px solid #777;
 }
-/*.btn-info {
-    background: #6fdbe8;
-    color: #fff!important;
-}
-.btn-info:hover, .btn-info:focus {
-    background: #59d6e4!important;
-    text-decoration: none;
-}
-.btn-info:active, .btn-info.active {
-    outline: 0;
-    background: #59d6e4;
-}*/
 
-.btn-main {
-    background: $link_color;
-    color: #fff!important;
-}
-.btn-main:hover, .btn-main:focus {
-    background: $link_hover_color !important;
-    text-decoration: none;
-}
-.btn-main:active, .btn-main.active {
-    outline: 0;
-    background: $link_hover_color;
-}
 .toggle.btn {
     border: 1px solid transparent;
 }
@@ -2202,19 +2178,13 @@ ul.dropdown-menu li:hover {
     box-shadow: none;
 }
 .form-control:focus {
-    /*border: 2px solid #6fdbe8;*/
     border: 2px solid $link_color;
-    outline: 0;
     box-shadow: none;
 }
 
-
 .checkbox input[type="checkbox"]:focus + label::before,
-.checkbox input[type="radio"]:focus + label::before {
-    /*border: 2px solid #6fdbe8;*/
-    border: 2px solid $link_color;
-    outline: 0;
-    box-shadow: none;
+.radio input[type="radio"]:focus + label::before {
+       outline-color: $link_hover_color;
 }
 
 /* Search form */
index 88130c1..e0c602a 100644 (file)
@@ -1,5 +1,5 @@
 {{* The button to open the jot - in This theme we move the button with js to the second nav bar *}}
-<a class="btn btn-sm btn-main pull-right" id="jotOpen" href="compose/{{$posttype}}{{if $content}}?body={{$content}}{{/if}}" aria-label="{{$new_post}}" title="{{$new_post}}"><i class="fa fa-pencil-square-o fa-2x"></i></a>
+<a class="btn btn-sm btn-primary pull-right" id="jotOpen" href="compose/{{$posttype}}{{if $content}}?body={{$content}}{{/if}}" aria-label="{{$new_post}}" title="{{$new_post}}"><i class="fa fa-pencil-square-o fa-2x"></i></a>
 
 <div id="jot-content">
        <div id="jot-sections">
index ced6fbb..9458942 100644 (file)
@@ -46,7 +46,7 @@ Some parts of this template will be moved by js to other places (see theme.js) -
        </div>
 
 {{if $s}}
-       <a href="search/saved/add?term={{$q}}&amp;return_url={{$return_url}}" class="btn btn-sm btn-main pull-right" id="search-save" title="{{$save_label}}" aria-label="{{$save_label}}" value="{{$save_label}}" data-toggle="tooltip">
+       <a href="search/saved/add?term={{$q}}&amp;return_url={{$return_url}}" class="btn btn-sm btn-primary pull-right" id="search-save" title="{{$save_label}}" aria-label="{{$save_label}}" value="{{$save_label}}" data-toggle="tooltip">
        {{if $mode == "tag"}}
                <i class="fa fa-plus fa-2x" aria-hidden="true"></i>
        {{else}}