Commit 2e1251e8 authored by Olga Brani's avatar Olga Brani Committed by Alex Pyrgiotis

admin-ui: Focus style _details_h4_lt template

Fix apyrgio/synnefo#244
parent b9af385e
......@@ -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;
......
......@@ -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;
}
}
......
......@@ -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%);
}
}
......
......@@ -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;
}
}
......
......@@ -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;
}
}
......
......@@ -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;
......
......@@ -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
......
......@@ -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;
}
}
......
......@@ -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;
......
{% 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>
......@@ -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>
......
......@@ -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>
......
......@@ -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>
......
......@@ -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>
......
......@@ -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>
......
......@@ -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>
......
......@@ -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 %}
......
......@@ -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>
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment