Skip to content

Commit

Permalink
Merge pull request #8648 from marcellamaki/focus-and-keyboard-updates
Browse files Browse the repository at this point in the history
Focus and keyboard updates
  • Loading branch information
indirectlylit authored Nov 10, 2021
2 parents ac67e1c + 5c1ba99 commit dc7f5f6
Showing 4 changed files with 46 additions and 38 deletions.
8 changes: 7 additions & 1 deletion kolibri/core/assets/src/views/KSelect/KeenUiSelect.vue
Original file line number Diff line number Diff line change
@@ -29,7 +29,7 @@
<div
ref="label"
class="ui-select-label"

:class="$computedClass({ ':focus': $coreOutline })"
:tabindex="disabled ? null : '0'"

@click="toggleDropdown"
@@ -870,6 +870,12 @@
}
}
&.is-active {
.ui-select-display {
border-bottom-width: $ui-input-border-width--active;
}
}
&.has-floating-label {
.ui-select-label-text {
// Behaves like a block, but width is the width of its content.
Original file line number Diff line number Diff line change
@@ -1,16 +1,14 @@
<template>

<div
class="card"
:class="[
{ 'mobile-card': isMobile },
$computedClass({ ':focus': $coreOutline })
]"
:style="{ backgroundColor: $themeTokens.surface }"
>
<div class="card drop-shadow">
<router-link
:to="link"
class="card-link"
class="card card-link"
:class="[
{ 'mobile-card': isMobile },
$computedClass({ ':focus': $coreOutline })
]"
:style="{ backgroundColor: $themeTokens.surface }"
>
<div class="header-bar" :style="headerStyles">
<div v-if="!content.is_leaf">
@@ -177,18 +175,20 @@
$margin: 16px;
$margin-thin: 8px;
.card {
.drop-shadow {
@extend %dropshadow-1dp;
&:hover {
@extend %dropshadow-8dp;
}
}
.card {
position: relative;
display: inline-block;
width: 100%;
vertical-align: top;
border-radius: 8px;
transition: box-shadow $core-time ease;
&:hover {
@extend %dropshadow-8dp;
}
&:focus {
outline-width: 4px;
outline-offset: 6px;
Original file line number Diff line number Diff line change
@@ -1,15 +1,14 @@
<template>

<div
class="card"
:class="[
{ 'mobile-card': isMobile },
$computedClass({ ':focus': $coreOutline })
]"
:style="{ backgroundColor: $themeTokens.surface }"
>
<div class="card drop-shadow">
<router-link
:to="link"
class="card"
:class="[
{ 'mobile-card': isMobile },
$computedClass({ ':focus': $coreOutline })
]"
:style="{ backgroundColor: $themeTokens.surface }"
>
<div
v-if="!isMobile"
@@ -201,9 +200,13 @@
$margin: 24px;
.card {
.drop-shadow {
@extend %dropshadow-1dp;
&:hover {
@extend %dropshadow-4dp;
}
}
.card {
position: relative;
display: inline-block;
width: 100%;
@@ -212,9 +215,7 @@
vertical-align: top;
border-radius: 8px;
transition: box-shadow $core-time ease;
&:hover {
@extend %dropshadow-8dp;
}
&:focus {
outline-width: 4px;
outline-offset: 6px;
23 changes: 12 additions & 11 deletions kolibri/plugins/learn/assets/src/views/HybridLearningLessonCard.vue
Original file line number Diff line number Diff line change
@@ -1,15 +1,14 @@
<template>

<div
:class="[
{ 'mobile-card': isMobile },
$computedClass({ ':focus': $coreOutline })
]"
:style="{ backgroundColor: $themeTokens.surface }"
>
<div class="card drop-shadow">
<router-link
:to="link"
class="card card-content"
:class="[
{ 'mobile-card': isMobile },
$computedClass({ ':focus': $coreOutline })
]"
:style="{ backgroundColor: $themeTokens.surface }"
>
<div class="thumbnail">
<CardThumbnail
@@ -94,19 +93,21 @@
$margin: 24px;
.card {
.drop-shadow {
@extend %dropshadow-1dp;
&:hover {
@extend %dropshadow-4dp;
}
}
.card {
position: relative;
display: inline-block;
width: 100%;
height: 156px;
vertical-align: top;
border-radius: 8px;
transition: box-shadow $core-time ease;
&:hover {
@extend %dropshadow-4dp;
}
&:focus {
outline-width: 4px;
outline-offset: 6px;

0 comments on commit dc7f5f6

Please sign in to comment.