admin-ui: Focus style _details_h4_lt template

Fix apyrgio/synnefo#244

snf-admin-app/synnefo_admin/admin/static/css/bootstrap.css

@@ -416,9 +416,7 @@ a:hover, a:focus {
 }
 /* line 58, ../sass/bootstrap/_scaffolding.scss */
 a:focus {
-  outline: thin dotted;
-  outline: 5px auto -webkit-focus-ring-color;
-  outline-offset: -2px;
+  outline: 0 none;
 }
 
 /* line 69, ../sass/bootstrap/_scaffolding.scss */
@@ -2410,9 +2408,7 @@ select[size] {
 input[type="file"]:focus,
 input[type="radio"]:focus,
 input[type="checkbox"]:focus {
-  outline: thin dotted;
-  outline: 5px auto -webkit-focus-ring-color;
-  outline-offset: -2px;
+  outline: 0 none;
 }
 
 /* line 83, ../sass/bootstrap/_forms.scss */
@@ -2855,9 +2851,7 @@ select[multiple].input-lg,
 }
 /* line 25, ../sass/bootstrap/_buttons.scss */
 .btn:focus, .btn:active:focus, .btn.active:focus {
-  outline: thin dotted;
-  outline: 5px auto -webkit-focus-ring-color;
-  outline-offset: -2px;
+  outline: 0 none;
 }
 /* line 31, ../sass/bootstrap/_buttons.scss */
 .btn:hover, .btn:focus {
@@ -4847,87 +4841,89 @@ input[type="button"].btn-block {
   border: 1px solid transparent;
   border-radius: 0 0 0 0;
 }
-/* line 89, ../sass/bootstrap/_navs.scss */
-.nav-tabs > li > a:hover {
-  border-color: #d9d9d9 #d9d9d9 inherit;
+/* line 90, ../sass/bootstrap/_navs.scss */
+.nav-tabs > li > a:hover, .nav-tabs > li > a:focus {
+  background: inherit;
+  color: inherit;
+  border-color: inherit inherit inherit;
 }
-/* line 98, ../sass/bootstrap/_navs.scss */
+/* line 101, ../sass/bootstrap/_navs.scss */
 .nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {
-  color: #555555;
-  background-color: #303030;
-  border: 1px solid #dddddd;
+  color: inherit;
+  background-color: inherit;
+  border: 1px solid inherit;
   border-bottom-color: transparent;
   cursor: default;
 }
 
-/* line 118, ../sass/bootstrap/_navs.scss */
+/* line 121, ../sass/bootstrap/_navs.scss */
 .nav-pills > li {
   float: left;
 }
-/* line 122, ../sass/bootstrap/_navs.scss */
+/* line 125, ../sass/bootstrap/_navs.scss */
 .nav-pills > li > a {
   border-radius: 0;
 }
-/* line 125, ../sass/bootstrap/_navs.scss */
+/* line 128, ../sass/bootstrap/_navs.scss */
 .nav-pills > li + li {
   margin-left: 2px;
 }
-/* line 133, ../sass/bootstrap/_navs.scss */
+/* line 136, ../sass/bootstrap/_navs.scss */
 .nav-pills > li.active > a, .nav-pills > li.active > a:hover, .nav-pills > li.active > a:focus {
   color: white;
   background-color: white;
 }
 
-/* line 144, ../sass/bootstrap/_navs.scss */
+/* line 147, ../sass/bootstrap/_navs.scss */
 .nav-stacked > li {
   float: none;
 }
-/* line 146, ../sass/bootstrap/_navs.scss */
+/* line 149, ../sass/bootstrap/_navs.scss */
 .nav-stacked > li + li {
   margin-top: 2px;
   margin-left: 0;
 }
 
-/* line 160, ../sass/bootstrap/_navs.scss */
+/* line 163, ../sass/bootstrap/_navs.scss */
 .nav-justified, .nav-tabs.nav-justified {
   width: 100%;
 }
-/* line 163, ../sass/bootstrap/_navs.scss */
+/* line 166, ../sass/bootstrap/_navs.scss */
 .nav-justified > li, .nav-tabs.nav-justified > li {
   float: none;
 }
-/* line 165, ../sass/bootstrap/_navs.scss */
+/* line 168, ../sass/bootstrap/_navs.scss */
 .nav-justified > li > a, .nav-tabs.nav-justified > li > a {
   text-align: center;
   margin-bottom: 5px;
 }
-/* line 171, ../sass/bootstrap/_navs.scss */
+/* line 174, ../sass/bootstrap/_navs.scss */
 .nav-justified > .dropdown .dropdown-menu {
   top: auto;
   left: auto;
 }
 @media (min-width: 768px) {
-  /* line 177, ../sass/bootstrap/_navs.scss */
+  /* line 180, ../sass/bootstrap/_navs.scss */
   .nav-justified > li, .nav-tabs.nav-justified > li {
     display: table-cell;
     width: 1%;
   }
-  /* line 180, ../sass/bootstrap/_navs.scss */
+  /* line 183, ../sass/bootstrap/_navs.scss */
   .nav-justified > li > a, .nav-tabs.nav-justified > li > a {
     margin-bottom: 0;
   }
 }
 
-/* line 190, ../sass/bootstrap/_navs.scss */
+/* line 193, ../sass/bootstrap/_navs.scss */
 .nav-tabs-justified, .nav-tabs.nav-justified {
   border-bottom: 0;
 }
-/* line 193, ../sass/bootstrap/_navs.scss */
+/* line 196, ../sass/bootstrap/_navs.scss */
 .nav-tabs-justified > li > a, .nav-tabs.nav-justified > li > a {
   margin-right: 0;
   border-radius: 0;
 }
-/* line 201, ../sass/bootstrap/_navs.scss */
+/* line 204, ../sass/bootstrap/_navs.scss */
 .nav-tabs-justified > .active > a, .nav-tabs.nav-justified > .active > a,
 .nav-tabs-justified > .active > a:hover,
 .nav-tabs.nav-justified > .active > a:hover,
@@ -4936,12 +4932,12 @@ input[type="button"].btn-block {
   border: 1px solid #dddddd;
 }
 @media (min-width: 768px) {
-  /* line 206, ../sass/bootstrap/_navs.scss */
+  /* line 209, ../sass/bootstrap/_navs.scss */
   .nav-tabs-justified > li > a, .nav-tabs.nav-justified > li > a {
     border-bottom: 1px solid #dddddd;
     border-radius: 0 0 0 0;
   }
-  /* line 212, ../sass/bootstrap/_navs.scss */
+  /* line 215, ../sass/bootstrap/_navs.scss */
   .nav-tabs-justified > .active > a, .nav-tabs.nav-justified > .active > a,
   .nav-tabs-justified > .active > a:hover,
   .nav-tabs.nav-justified > .active > a:hover,
@@ -4951,16 +4947,16 @@ input[type="button"].btn-block {
   }
 }
 
-/* line 224, ../sass/bootstrap/_navs.scss */
+/* line 227, ../sass/bootstrap/_navs.scss */
 .tab-content > .tab-pane {
   display: none;
 }
-/* line 227, ../sass/bootstrap/_navs.scss */
+/* line 230, ../sass/bootstrap/_navs.scss */
 .tab-content > .active {
   display: block;
 }
 
-/* line 237, ../sass/bootstrap/_navs.scss */
+/* line 240, ../sass/bootstrap/_navs.scss */
 .nav-tabs .dropdown-menu {
   margin-top: -1px;
   border-top-right-radius: 0;

snf-admin-app/synnefo_admin/admin/static/sass/_bars-btns.scss

@@ -12,7 +12,8 @@ $default-btn-padding: 8px;
 		line-height: 100%;
 		padding: $padding;
 	}
-	&:hover {
+	&:hover,
+    &:focus{
 		text-decoration: none;
 		opacity: 1;
 	}
@@ -36,7 +37,8 @@ $default-btn-padding: 8px;
 		border: 1px solid transparent;
         width: 100%;
 	}
-	&:hover {
+	&:hover,
+    &:focus{
 		span {
 			border-color: $color;
 		}
@@ -53,7 +55,8 @@ $default-btn-padding: 8px;
 		border: 1px solid transparent;
 		background: transparent;
 	}
-	&:hover {
+	&:hover,
+    &:focus{
 		span {
 			color: $secondary-link-color;
 		}
@@ -66,7 +69,8 @@ $default-btn-padding: 8px;
 	background-color: $color;
 	border-bottom: 2px solid $color; 
 	color: #fff;
-	&:hover {
+	&:hover,
+    &:focus{
 		color: #fff;
 		border-bottom-color: $almost-white;
 	}
@@ -130,7 +134,8 @@ body .container .line-btn.disabled {
 	border-color: $almost-white;
 	opacity: 0.7;
 	color: $almost-white;
-	&:hover {
+	&:hover,
+    &:focus{
 		opacity: 0.7;
 	}
 }

snf-admin-app/synnefo_admin/admin/static/sass/_details.scss

@@ -33,9 +33,11 @@
         .arrow {
 		    position: relative;
             padding: 0 8px;
-		    &:hover {
+		    &:hover,
+            &:focus{
 			    top: 2px;
 			    cursor: pointer;
+                outline: 0 none;
 		    }
 	    }
        .label{
@@ -87,7 +89,8 @@
             cursor: pointer;
             margin-left:10px;
             color: $almost-white;
-            &:hover {
+            &:hover,
+            &:focus{
                 background: lighten($snf_gray-light, 10%);
             }
         }
@@ -137,7 +140,9 @@
 		color: white;
 		border-radius: 0;
 	}
-	&:not(.active)>a:hover {
+	
+    &:not(.active)>a:hover,
+    &:not(.active)>a:focus{
 		opacity: 1;
 		color: white;
 		border-color: transparent;
@@ -173,7 +178,8 @@
 		padding:14px 20px;
 		.object-details {
 			padding: 5px 20px;
-            &:hover {
+            &:hover,
+            &:focus{
                 background: lighten($body-bg, 5%);
             }
 		}

snf-admin-app/synnefo_admin/admin/static/sass/_extra.scss

@@ -44,7 +44,8 @@ body {
 		opacity: 1;
         &.disabled {
             border-color: lighten($btn-link-disabled-color,15%);
-            &:hover {
+            &:hover,
+            &:focus{
                 span {
                     border-color: transparent;
                 }
@@ -71,7 +72,8 @@ body {
         font-size: 16px;
         .dropdown { 
             display: inline;
-            &:hover {
+            &:hover,
+            &:focus{
                 &>a {
                     background: lighten($hover-nav-color, 10%); 
                 }
@@ -212,7 +214,8 @@ svg>text:last-child {
         right: 20px;
         top: 20px;
         color: $gray-dark;
-        &:hover {
+        &:hover,
+        &:focus{
             color: $total-black;
         }
     }

snf-admin-app/synnefo_admin/admin/static/sass/_modals.scss

@@ -75,7 +75,8 @@ p.progress-area {
 	.custom-btn {
 		color: white;
 		opacity: 0.9;
-		&:hover {
+		&:hover,
+        &:focus{
 			opacity: 1;
 		}
 	}
@@ -182,7 +183,8 @@ p.progress-area {
 	// right: 8px;
 	top: 6px;
 	display: none;
-	&:hover {
+	&:hover,
+    &:focus{
 		color: red;
 		// color:#A80A0A;
 		text-decoration: none;
@@ -215,7 +217,8 @@ p.progress-area {
                 font-weight: bold;
             }
         }
-        tr:hover {
+        tr:hover,
+        tr:focus{
             background: $gray-lighter;
             a {
                 color: red;
@@ -226,7 +229,7 @@ p.progress-area {
             position: absolute;
             right: 14px;
             color: transparent;
-            &:hover {
+            &:hover{
                 text-decoration: none;
             }
         }

snf-admin-app/synnefo_admin/admin/static/sass/_tables.scss

@@ -11,7 +11,8 @@ table th {
     .snf-search {
         opacity: 0.7;
         font-size: 15px;
-        &:hover {
+        &:hover, 
+        &:focus{
             opacity: 1;
         }
     }
@@ -46,7 +47,8 @@ table th {
         padding-right: 8px;
         background-color: $link-color;
         color: #fff;
-        &:hover {
+        &:hover,
+        &:focus{
             text-decoration: none;
             background-color: $link-hover-color;
         }
@@ -155,7 +157,9 @@ table.dataTable.no-footer {
     padding: 0 1em;
 }
 
-.container .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
+.container .dataTables_wrapper .dataTables_paginate .paginate_button:hover,
+.container .dataTables_wrapper .dataTables_paginate .paginate_button:focus,
+{
     background: $gray-dark;
     border-color: white;
 }
@@ -165,6 +169,7 @@ table.dataTable.no-footer {
 }
 
 .dataTables_wrapper .dataTables_paginate .paginate_button.current, 
+.dataTables_wrapper .dataTables_paginate .paginate_button.current:focus,
 .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
     background: white;
     border: transparent;

snf-admin-app/synnefo_admin/admin/static/sass/bootstrap/_mixins.scss

@@ -30,10 +30,10 @@
 // WebKit-style focus
 @mixin tab-focus() {
   // Default
-  outline: thin dotted;
+  outline: 0 none;
   // WebKit
-  outline: 5px auto -webkit-focus-ring-color;
-  outline-offset: -2px;
+  //outline: 5px auto -webkit-focus-ring-color;
+ // outline-offset: -2px;
 }
 
 // Center-align a block level element

snf-admin-app/synnefo_admin/admin/static/sass/bootstrap/_navs.scss

@@ -86,7 +86,10 @@
       line-height: $line-height-base;
       border: 1px solid transparent;
       border-radius: $border-radius-base $border-radius-base 0 0;
-      &:hover {
+      &:hover, 
+      &:focus{
+        background: inherit;
+        color: inherit;
         border-color: $nav-tabs-link-hover-border-color $nav-tabs-link-hover-border-color $nav-tabs-border-color;
       }
     }

snf-admin-app/synnefo_admin/admin/static/sass/bootstrap/_variables.scss

@@ -404,11 +404,11 @@ $nav-open-link-hover-color:                 #fff !default;
 //== Tabs
 $nav-tabs-border-color:                     inherit;
 
-$nav-tabs-link-hover-border-color:          $gray-lighter !default;
+$nav-tabs-link-hover-border-color:          inherit;
 
-$nav-tabs-active-link-hover-bg:             $body-bg !default;
-$nav-tabs-active-link-hover-color:          $gray !default;
-$nav-tabs-active-link-hover-border-color:   #ddd !default;
+$nav-tabs-active-link-hover-bg:             inherit;
+$nav-tabs-active-link-hover-color:          inherit;
+$nav-tabs-active-link-hover-border-color:   inherit;
 
 $nav-tabs-justified-link-border-color:            #ddd !default;
 $nav-tabs-justified-active-link-border-color:     $body-bg !default;

snf-admin-app/synnefo_admin/admin/templates/admin/_details_h4_lt.html

+{% load admin_tags %}
+<span class="lt">
+    {% if type != main_type %}
+    <a href="{% url admin-details type item|id %}" class="snf-search icon-link" title="Details for {{ item|repr }}"></a>
+    {% endif %}
+    <span class="title">{{ item|repr }}</span>
+    <span class="arrow snf-angle-down"  role="button" tabindex="0"></span>
+</span>
+

snf-admin-app/synnefo_admin/admin/templates/admin/_ip_details.html

@@ -5,13 +5,7 @@
 <div class="object-details {{ rowcls }}" data-id="{{ip.pk}}"
     data-type="{{type}}">
     <h4 class="clearfix">
-        <span class="lt">
-            {% if type != main_type %}
-            <a href="{% url admin-details type ip.pk %}" class="snf-search icon-link" title="Details for {{ ip.address }}"></a>
-            {% endif %}
-            <span class="title">{{ ip.address }}</span>
-            <span class="arrow  snf-angle-down"></span>
-        </span>
+        {% include "admin/_details_h4_lt.html" %}
         <span class="rt">
             <span class="label">ID: {{ip.pk}}</span>
             <span class="label">IPv{{ ip.ipversion }}</span>

snf-admin-app/synnefo_admin/admin/templates/admin/_network_details.html

@@ -5,13 +5,7 @@
 <div class="network-details object-details {{ rowcls }}" data-id="{{network.pk}}"
     data-type="{{type}}">
     <h4 class="clearfix">
-        <span class="lt">
-            {% if type != main_type %}
-            <a href="{% url admin-details type network.pk %}" class="snf-search icon-link" title="Details for {{ network|repr }}"></a>
-            {% endif %}
-            <span class="title">{{ network|repr }}</span>
-		    <span class="arrow  snf-angle-down"></span>
-		</span>
+        {% include "admin/_details_h4_lt.html" %}
         <span class="rt">
 	        {{ network|object_status_label|safe }}
 		    <span class="label">ID: {{ network.pk }}</span>

snf-admin-app/synnefo_admin/admin/templates/admin/_nic_details.html

@@ -6,7 +6,7 @@
     <h4 class="clearfix">
         <span class="lt">
             <span class="title">{{ nic|repr }}</span>
-            <span class="arrow  snf-angle-down"></span>
+            <span class="arrow  snf-angle-down"  role="button" tabindex="0"></span>
         </span>
         <span class="rt">
             <span class="label">ID: {{nic.pk}}</span>

snf-admin-app/synnefo_admin/admin/templates/admin/_project_details.html

@@ -5,13 +5,7 @@
 <div class="object-details {{ rowcls }}" data-id="{{project.uuid}}"
     data-type="{{type}}">
     <h4 class="clearfix">
-        <span class="lt">
-            {% if type != main_type %}
-            <a href="{% url admin-details type project.uuid %}" class="snf-search icon-link" title="Details for {{ project|repr }}"></a>
-            {% endif %}
-            <span class="title">{{ project|repr }}</span>
-            <span class="arrow  snf-angle-down"></span>
-        </span>
+        {% include "admin/_details_h4_lt.html" %}
         <span class="rt">
             <span class="label">{{ project.state_display|upper }}</span>
             <span class="label">UUID: {{ project.uuid }}</span>

snf-admin-app/synnefo_admin/admin/templates/admin/_quota_details.html

@@ -5,7 +5,7 @@
     <h4 class="clearfix">
         <span class="lt">
             <span class="title">{{ project|repr }}</span>
-            <span class="arrow  snf-angle-down"></span>
+            <span class="arrow  snf-angle-down"  role="button" tabindex="0"></span>
         </span>
         <span class="rt">
             <span class="label">ID: {{ project.id }}</span>

snf-admin-app/synnefo_admin/admin/templates/admin/_user_details.html

@@ -5,13 +5,7 @@
 <div class="object-details {{ rowcls }}" data-id="{{user|id}}"
     data-type="{{type}}">
     <h4 class="clearfix">
-        <span class="lt">
-            {% if type != main_type %}
-            <a href="{% url admin-details type user|id %}" class="snf-search icon-link" title="Details for {{ user|repr }}"></a>
-            {% endif %}
-            <span class="title">{{ user|repr }}</span>
-            <span class="arrow snf-angle-down"></span>
-        </span>
+        {% include "admin/_details_h4_lt.html" %}
         <span class="rt">
             <span class="label">{{ user.status_display|upper }}</span>
             <span class="label">UUID: {{ user.uuid }}</span>

snf-admin-app/synnefo_admin/admin/templates/admin/_vm_details.html

@@ -10,7 +10,7 @@
       <a href="{% url admin-details type vm.pk %}" class="snf-search icon-link" title="Details for {{ vm|repr }}"></a>
     {% endif %}
         <span class="title">{{ vm|repr }}</span>
-        <span class="arrow  snf-angle-down"></span>
+        <span class="arrow  snf-angle-down"  role="button" tabindex="0"></span>
     </span>
     <span class="rt">
         {% if vm.suspended %}

snf-admin-app/synnefo_admin/admin/templates/admin/_volume_details.html

@@ -5,13 +5,7 @@
 <div class="object-details {{ rowcls }}" data-id="{{volume.pk}}"
     data-type="{{type}}">
     <h4 class="clearfix">
-        <span class="lt">
-            {% if type != main_type %}
-            <a href="{% url admin-details type volume.pk %}" class="snf-search icon-link" title="Details for {{ volume|repr }}"></a>
-            {% endif %}
-            <span class="title">{{ volume|repr }}</span>
-            <span class="arrow  snf-angle-down"></span>
-        </span>
+        {% include "admin/_details_h4_lt.html" %}
         <span class="rt">
             {{ volume|object_status_label|safe }}
             <span class="label">ID: {{ volume.pk }}</span>