yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

adjusting focus outlines with new color and spacing

Browse Source
This commit is contained in:
Niels Lyngsø
2020-01-07 17:00:31 +01:00
parent 79ad482ba2
commit 16a9630be2
16 changed files with 104 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src/Umbraco.Web.UI.Client/lib/bootstrap/less/dropdowns.less
View File

@@ -79,11 +79,9 @@
// Hover/Focus state
// -----------
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus,
.dropdown-menu > li > button:hover,
.dropdown-menu > li > button:focus,
.dropdown-submenu:hover > a,
.dropdown-submenu:focus > a {
.dropdown-submenu:hover > button {
text-decoration: none;
color: @dropdownLinkColorHover;
#gradient > .vertical(@dropdownLinkBackgroundHover, darken(@dropdownLinkBackgroundHover, 5%));
@@ -92,8 +90,7 @@
// Active state
// ------------
.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
.dropdown-menu > .active > a:hover {
color: @dropdownLinkColorActive;
text-decoration: none;
outline: 0;
@@ -104,13 +101,11 @@
// --------------
// Gray out text and ensure the hover/focus state remains gray
.dropdown-menu > .disabled > a,
.dropdown-menu > .disabled > a:hover,
.dropdown-menu > .disabled > a:focus {
.dropdown-menu > .disabled > a:hover {
color: @grayLight;
}
// Nuke hover/focus effects
.dropdown-menu > .disabled > a:hover,
.dropdown-menu > .disabled > a:focus {
.dropdown-menu > .disabled > a:hover {
text-decoration: none;
background-color: transparent;
background-image: none; // Remove CSS gradient

6
src/Umbraco.Web.UI.Client/src/less/components/application/umb-language-picker.less
View File

@@ -19,13 +19,13 @@
box-sizing: border-box;
color: @ui-option-type;
width: 100%;
outline-offset: -3px;
}
.umb-language-picker__expand {
font-size: 14px;
}
.umb-language-picker__toggle:focus,
.umb-language-picker__toggle:hover {
background: @ui-option-hover;
color:@ui-option-type-hover;
@@ -54,10 +54,10 @@
font-size: 14px;
width: 100%;
text-align: left;
outline-offset: -3px;
}
.umb-language-picker__dropdown-item:hover,
.umb-language-picker__dropdown-item:focus {
.umb-language-picker__dropdown-item:hover {
background: @ui-option-hover;
text-decoration: none;
color:@ui-option-type-hover;

20
src/Umbraco.Web.UI.Client/src/less/components/tree/umb-tree-item.less
View File

@@ -4,16 +4,16 @@
width: auto;
margin-top:1px;
.umb-tree-item__label {
user-select: none;
}
&:hover .umb-tree-item__arrow {
visibility: visible;
cursor: pointer
}
}
.umb-tree-item__label {
user-select: none;
}
.umb-tree-item__arrow {
position: relative;
margin-left: -16px;
@@ -92,18 +92,6 @@
color: @blue;
}
.umb-options {
&:hover i {
opacity: .7;
}
i {
background: @ui-active-type;
transition: opacity 120ms ease;
}
}
a,
.umb-tree-icon,
.umb-tree-item__arrow {

34
src/Umbraco.Web.UI.Client/src/less/components/tree/umb-tree.less
View File

@@ -99,6 +99,7 @@ body.touch .umb-tree {
.umb-tree-item__inner {
border: 2px solid transparent;
overflow: visible;
}
.umb-tree-header {
@@ -176,9 +177,25 @@ body.touch .umb-tree {
cursor: pointer;
border-radius: @baseBorderRadius;
&:hover {
background: @btnBackgroundHighlight;
i {
height: 5px !important;
width: 5px !important;
border-radius: 20px;
display: inline-block;
margin: 0 2px 0 0;
background: @ui-active-type;
&:last-child {
margin: 0;
}
}
&:hover {
background: rgba(255, 255, 255, .5);
i {
background: @ui-active-type-hover;
}
}
// NOTE - We're having to repeat ourselves here due to an .sr-only class appearing in umbraco/lib/font-awesome/css/font-awesome.min.css
&.sr-only--hoverable:hover,
&.sr-only--focusable:focus {
@@ -193,19 +210,6 @@ body.touch .umb-tree {
border-radius: 3px;
}
i {
height: 5px !important;
width: 5px !important;
border-radius: 20px;
background: @black;
display: inline-block;
margin: 0 2px 0 0;
&:last-child {
margin: 0;
}
}
.hide-options & {
display: none !important;
}

19
src/Umbraco.Web.UI.Client/src/less/components/umb-checkmark.less
View File

@@ -2,21 +2,30 @@
border: 2px solid @white;
width: 25px;
height: 25px;
border: 1px solid @gray-7;
border: 1px solid @ui-action-discreet-border;
border-radius: 3px;
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
color: @gray-7;
color: @ui-selected-type;
cursor: pointer;
font-size: 15px;
&:hover {
border-color:@ui-action-discreet-border-hover;
color: @ui-selected-type-hover;
}
}
.umb-checkmark--checked {
background: @ui-active;
border-color: @ui-active;
background: @ui-selected-border;
border-color: @ui-selected-border;
color: @white;
&:hover {
background: @ui-selected-border-hover;
border-color: @ui-selected-border-hover;
color: @white;
}
}
.umb-checkmark--xs {
@@ -45,4 +54,4 @@
width: 50px;
height: 50px;
font-size: 20px;
}
}

1
src/Umbraco.Web.UI.Client/src/less/components/umb-editor-navigation-item.less
View File

@@ -105,7 +105,6 @@
&__anchor_dropdown {
// inherits from .dropdown-menu
margin: 0;
overflow: hidden;
// center align horizontal
left: 50%;

1
src/Umbraco.Web.UI.Client/src/less/components/umb-sub-views.less
View File

@@ -8,7 +8,6 @@
padding-left: 0;
padding-right: 0;
&:focus {
outline: none;
text-decoration: none;
}
}

36
src/Umbraco.Web.UI.Client/src/less/components/umb-table.less
View File

@@ -47,6 +47,8 @@ input.umb-table__input {
.umb-table-head {
font-size: 14px;
font-weight: bold;
color: @ui-disabled-type;
}
.umb-table-head__link {
@@ -68,10 +70,12 @@ input.umb-table__input {
.umb-table-head__link.sortable {
cursor: pointer;
color: @ui-action-discreet-type;
&:hover {
text-decoration: none;
color: @black;
color: @ui-action-discreet-type-hover;
}
outline-offset: 1px;
}
.umb-table-thead__icon {
@@ -129,6 +133,9 @@ input.umb-table__input {
&::before {
opacity:.66;
}
.umb-table-body__checkicon {
color: @ui-selected-border;
}
}
}
@@ -141,21 +148,19 @@ input.umb-table__input {
}
.umb-table-body__link {
position: relative;
color: @ui-option-type;
font-size: 14px;
font-weight: bold;
text-decoration: none;
&:hover, &:focus {
&:hover {
color: @ui-option-type-hover;
text-decoration: underline;
outline: none;
}
}
.umb-table-body__icon,
.umb-table-body__icon[class^="icon-"],
.umb-table-body__icon[class*=" icon-"] {
.umb-table-body__icon {
margin: 0 auto;
font-size: 20px;
line-height: 20px;
@@ -164,13 +169,11 @@ input.umb-table__input {
text-decoration: none;
}
.umb-table-body__checkicon,
.umb-table-body__checkicon[class^="icon-"],
.umb-table-body__checkicon[class*=" icon-"] {
.umb-table-body__checkicon {
display: none;
font-size: 18px;
line-height: 20px;
color: @green;
color: @ui-selected-border;
}
.umb-table-body .umb-table__name {
@@ -179,7 +182,8 @@ input.umb-table__input {
font-weight: bold;
a {
color: @ui-option-type;
&:hover, &:focus {
outline-offset: 1px;
&:hover {
color: @ui-option-type-hover;
text-decoration: underline;
}
@@ -249,8 +253,8 @@ input.umb-table__input {
flex-flow: row nowrap;
flex: 1 1 5%;
position: relative;
margin: auto 14px;
padding: 6px 2px;
margin: auto 0;
padding: 6px 16px;
text-align: left;
overflow:hidden;
}
@@ -268,8 +272,8 @@ input.umb-table__input {
.umb-table-cell:first-of-type:not(.not-fixed) {
flex: 0 0 25px;
margin: 0 0 0 15px;
padding: 15px 0;
margin: 0;
padding: 15px 0 15px 15px;
}
.umb-table-cell--auto-width {

1
src/Umbraco.Web.UI.Client/src/less/mixins.less
View File

@@ -30,7 +30,6 @@
outline: thin dotted @gray-3;
// Webkit
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
// Center-align a block level element

34
src/Umbraco.Web.UI.Client/src/less/navs.less
View File

@@ -236,6 +236,7 @@
position: relative;
padding: 8px 20px;
color: @ui-option-type;
text-decoration: none;
}
.dropdown-menu > li > button {
@@ -300,8 +301,7 @@
// Active:hover/:focus dropdown links
// -------------------------
.nav > .dropdown.active > a:hover,
.nav > .dropdown.active > a:focus {
.nav > .dropdown.active > a:hover {
cursor: pointer;
}
@@ -309,24 +309,21 @@
// -------------------------
.nav-tabs .open .dropdown-toggle,
.nav-pills .open .dropdown-toggle,
.nav > li.dropdown.open.active > a:hover,
.nav > li.dropdown.open.active > a:focus {
.nav > li.dropdown.open.active > a:hover {
/*color: @white;*/
background-color: @gray-8;
border-color: @gray-8;
}
.nav li.dropdown.open .caret,
.nav li.dropdown.open.active .caret,
.nav li.dropdown.open a:hover .caret,
.nav li.dropdown.open a:focus .caret {
.nav li.dropdown.open a:hover .caret {
border-top-color: @white;
border-bottom-color: @white;
.opacity(100);
}
// Dropdowns in stacked tabs
.tabs-stacked .open > a:hover,
.tabs-stacked .open > a:focus {
.tabs-stacked .open > a:hover {
border-color: @gray-8;
}
@@ -377,15 +374,13 @@
}
.tabs-below > .nav-tabs > li > a {
.border-radius(0 0 4px 4px);
&:hover,
&:focus {
&:hover {
border-bottom-color: transparent;
border-top-color: @gray-8;
}
}
.tabs-below > .nav-tabs > .active > a,
.tabs-below > .nav-tabs > .active > a:hover,
.tabs-below > .nav-tabs > .active > a:focus {
.tabs-below > .nav-tabs > .active > a:hover {
border-color: transparent @gray-8 @gray-8 @gray-8;
}
@@ -414,13 +409,11 @@
margin-right: -1px;
.border-radius(4px 0 0 4px);
}
.tabs-left > .nav-tabs > li > a:hover,
.tabs-left > .nav-tabs > li > a:focus {
.tabs-left > .nav-tabs > li > a:hover {
border-color: @gray-10 @gray-8 @gray-10 @gray-10;
}
.tabs-left > .nav-tabs .active > a,
.tabs-left > .nav-tabs .active > a:hover,
.tabs-left > .nav-tabs .active > a:focus {
.tabs-left > .nav-tabs .active > a:hover {
border-color: @gray-8 transparent @gray-8 @gray-8;
*border-right-color: @white;
}
@@ -435,13 +428,11 @@
margin-left: -1px;
.border-radius(0 4px 4px 0);
}
.tabs-right > .nav-tabs > li > a:hover,
.tabs-right > .nav-tabs > li > a:focus {
.tabs-right > .nav-tabs > li > a:hover {
border-color: @gray-10 @gray-10 @gray-10 @gray-8;
}
.tabs-right > .nav-tabs .active > a,
.tabs-right > .nav-tabs .active > a:hover,
.tabs-right > .nav-tabs .active > a:focus {
.tabs-right > .nav-tabs .active > a:hover {
border-color: @gray-8 @gray-8 @gray-8 transparent;
*border-left-color: @white;
}
@@ -456,8 +447,7 @@
color: @gray-8;
}
// Nuke hover/focus effects
.nav > .disabled > a:hover,
.nav > .disabled > a:focus {
.nav > .disabled > a:hover {
text-decoration: none;
background-color: transparent;
cursor: default;

5
src/Umbraco.Web.UI.Client/src/less/variables.less
View File

@@ -140,6 +140,9 @@
@ui-option-disabled-type-hover: @gray-5;
@ui-option-disabled-hover: @sand-7;
@ui-disabled-type: @gray-6;
@ui-disabled-border: @gray-6;
//@ui-active: #346ab3;
@ui-active: @pinkLight;
@ui-active-blur: @brownLight;
@@ -258,7 +261,7 @@
// Buttons
// -------------------------
@btnBackground: @gray-9;
@btnBackgroundHighlight: @gray-9;
@btnBackgroundHighlight: @gray-10;
@btnBorder: @gray-9;
@btnPrimaryBackground: @ui-btn-positive;

21
src/Umbraco.Web.UI.Client/src/views/components/buttons/umb-button.html
View File

@@ -7,7 +7,12 @@
<div ng-if="vm.innerState !== 'init'" class="umb-button__overlay"></div>
</div>
<a ng-if="vm.type === 'link'" ng-href="{{vm.href}}" class="btn umb-button__button {{vm.style}} umb-button--{{vm.size}} umb-outline umb-outline--thin" ng-click="vm.clickButton($event)" hotkey="{{vm.shortcut}}" hotkey-when-hidden="{{vm.shortcutWhenHidden}}">
<a ng-if="vm.type === 'link'"
ng-href="{{vm.href}}"
class="btn umb-button__button {{vm.style}} umb-button--{{vm.size}} umb-outline"
ng-click="vm.clickButton($event)"
hotkey="{{vm.shortcut}}"
hotkey-when-hidden="{{vm.shortcutWhenHidden}}">
<span class="umb-button__content" ng-class="{'-hidden': vm.innerState !== 'init'}">
<i ng-if="vm.icon" class="{{vm.icon}} umb-button__icon" aria-hidden="true"></i>
{{vm.buttonLabel}}
@@ -18,7 +23,7 @@
<button
ng-if="vm.type === 'button'"
type="button"
class="btn umb-button__button {{vm.style}} umb-button--{{vm.size}} umb-outline umb-outline--thin"
class="btn umb-button__button {{vm.style}} umb-button--{{vm.size}} umb-outline"
ng-click="vm.clickButton($event)"
hotkey="{{vm.shortcut}}"
hotkey-when-hidden="{{vm.shortcutWhenHidden}}"
@@ -34,12 +39,20 @@
</span>
</button>
<button ng-if="vm.type === 'submit'" type="submit" class="btn umb-button__button {{vm.style}} umb-button--{{vm.size}} umb-outline" ng-class="{'umb-outline--thin':vm.style !== 'btn-success'}" hotkey="{{vm.shortcut}}" hotkey-when-hidden="{{vm.shortcutWhenHidden}}" ng-disabled="vm.disabled" umb-auto-focus="{{vm.autoFocus && !vm.disabled ? 'true' : 'false'}}">
<button
ng-if="vm.type === 'submit'"
type="submit"
class="btn umb-button__button {{vm.style}} umb-button--{{vm.size}} umb-outline"
hotkey="{{vm.shortcut}}"
hotkey-when-hidden="{{vm.shortcutWhenHidden}}"
ng-disabled="vm.disabled"
umb-auto-focus="{{vm.autoFocus && !vm.disabled ? 'true' : 'false'}}">
<span class="umb-button__content" ng-class="{'-hidden': vm.innerState !== 'init'}">
<i ng-if="vm.icon" class="{{vm.icon}} umb-button__icon" aria-hidden="true"></i>
{{vm.buttonLabel}}
<span ng-if="vm.showCaret" class="umb-button__caret caret" aria-hidden="true"></span>
</span>
</button>
</button
</div>

2
src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-navigation-item.html
View File

@@ -12,7 +12,7 @@
<ul class="dropdown-menu umb-sub-views-nav-item__anchor_dropdown" ng-if="vm.item.anchors && vm.item.anchors.length > 1">
<li ng-repeat="anchor in vm.item.anchors" ng-class="{'is-active': vm.item.active && anchor.active}">
<a href="#group-{{anchor.id}}" ng-click="vm.anchorClicked(anchor, $event)" prevent-default class="umb-outline umb-outline--thin">
<a href="#group-{{anchor.id}}" ng-click="vm.anchorClicked(anchor, $event)" prevent-default>
<span class="sr-only"><localize key="visuallyHiddenTexts_jumpTo">Jump to</localize></span> {{anchor.label}} <span class="sr-only"><localize key="visuallyHiddenTexts_group"> group</localize></span>
</a>
</li>

2
src/Umbraco.Web.UI.Client/src/views/components/tree/umb-tree-item.html
View File

@@ -11,7 +11,7 @@
<i class="icon umb-tree-icon sprTree" ng-class="::node.cssClass" title="{{::node.title}}" ng-click="select(node, $event)" ng-style="::node.style" tabindex="-1"></i>
<span class="umb-tree-item__annotation"></span>
<a class="umb-tree-item__label umb-outline" ng-href="#/{{::node.routePath}}" ng-click="select(node, $event)" title="{{::node.title}}">{{node.name}}</a>
<a class="umb-tree-item__label" ng-href="#/{{::node.routePath}}" ng-click="select(node, $event)" title="{{::node.title}}">{{node.name}}</a>
<!-- NOTE: These are the 'option' elipses -->
<button data-element="tree-item-options" class="umb-options btn-reset sr-only sr-only--focusable sr-only--hoverable" ng-click="options(node, $event)" ng-if="::node.menuUrl" aria-label="{{optionsText}} {{node.name}}"><i></i><i></i><i></i></button>

2
src/Umbraco.Web.UI.Client/src/views/components/umb-checkmark.html
View File

@@ -1 +1 @@
<i class="icon-check umb-checkmark umb-checkmark--{{size}}" ng-class="{'umb-checkmark--checked': checked, 'cursor-auto': readonly}"></i>
<i class="icon-check umb-checkmark umb-checkmark--{{size}} umb-outline" ng-class="{'umb-checkmark--checked': checked, 'cursor-auto': readonly}"></i>

8
src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/listview.html
View File

@@ -14,14 +14,14 @@
<!-- Renders when it's only possible to create one specific document type for, which no blueprint exists-->
<div class="btn-group" ng-show="createAllowedButtonSingle">
<button type="button" class="btn btn-outline" ng-click="createBlank(entityType,listViewAllowedTypes[0].alias)" prevent-default>
<button type="button" class="btn btn-outline umb-outline" ng-click="createBlank(entityType,listViewAllowedTypes[0].alias)" prevent-default>
<localize key="actions_create">Create</localize> {{listViewAllowedTypes[0].name}}
</button>
</div>
<!-- Renders when it's only possible to create one specific document type for which a blueprint exits-->
<div class="btn-group" ng-show="createAllowedButtonSingleWithBlueprints" deep-blur="leaveDropdown()">
<button type="button" class="btn btn-outline dropdown-toggle" aria-expanded="{{page.createDropdownOpen}}" data-toggle="dropdown" ng-click="toggleDropdown()" prevent-default>
<button type="button" class="btn btn-outline umb-outline dropdown-toggle" aria-expanded="{{page.createDropdownOpen}}" data-toggle="dropdown" ng-click="toggleDropdown()" prevent-default>
<span>
<localize key="actions_create">Create</localize> {{listViewAllowedTypes[0].name}}
</span>
@@ -46,11 +46,11 @@
<!-- Renders when it's possible to create multiple document types and blueprints for one or more of the document types-->
<div class="btn-group" ng-show="createAllowedButtonMultiWithBlueprints" deep-blur="leaveDropdown()">
<button type="button" class="btn btn-outline dropdown-toggle" aria-expanded="{{page.createDropdownOpen === undefined ? false : page.createDropdownOpen}}" data-toggle="dropdown" ng-click="toggleDropdown()">
<button type="button" class="btn btn-outline umb-outline dropdown-toggle" aria-expanded="{{page.createDropdownOpen === undefined ? false : page.createDropdownOpen}}" data-toggle="dropdown" ng-click="toggleDropdown()">
<localize key="actions_create">Create</localize>
<span class="caret" aria-hidden="true"></span>
</button>
<umb-dropdown ng-if="page.createDropdownOpen" on-close="page.createDropdownOpen = false">
<umb-dropdown-item ng-repeat="contentType in listViewAllowedTypes track by contentType.key | orderBy:'name':false">
<button type="button" ng-click="createBlank(entityType,contentType.alias)" prevent-default>