Skip to content

feat: increase focus visible thickness #158

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Jun 3, 2025
Merged

feat: increase focus visible thickness #158

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
fd45a48
feat: increase focus visible thickness
arbirali May 15, 2025
9c91deb
feat: Missing clear focus indicators on multiple page elements.
arbirali May 19, 2025
6eab174
fix: instructor navbar fixes for the dark mode
arbirali May 20, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 11 additions & 8 deletions tutorindigo/templates/indigo/lms/static/sass/home/_home.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@ section.home {
#main .home.style-logout {
header {
background: none;
overflow: visible;
.outer-wrapper {
.title {
width: 100%;
Expand Down Expand Up @@ -73,13 +74,9 @@ section.home {
.course-search {
padding: 0;
.search-field-wrapper {
&:after {
clear: both;
content: "";
display: block;
}
.button-holder {
float: right;
display: flex;

.button-holder {
button {
position: static;
margin: 0 0 0 16px;
Expand All @@ -105,7 +102,7 @@ section.home {
}
}
.input-holder {
overflow: hidden;
flex-grow: 1;
border-radius: 6px;
background: $primary-light;
padding: 0 0 0 33px;
Expand All @@ -127,6 +124,12 @@ section.home {
font-size: 14px;
line-height: 20px;
padding: 9px 10px;

&:focus,
&:focus-visible {
outline: revert;
outline-width: 2px;
}
}
}
}
Expand Down
61 changes: 43 additions & 18 deletions tutorindigo/templates/indigo/lms/static/sass/partials/lms/theme/_extras.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,13 +26,30 @@ input:-webkit-autofill:active{
transition: background-color 5000s ease-in-out 0s;
box-shadow: none;
}

.register-btn,
.sign-in-btn,
.search-button,
.learn-more {
&:focus,
&:focus-visible {
outline-offset: 3px;
}
}


.page-content-container {
max-width: 1600px;
margin: 0 auto;
padding: 0 15px;
border: none;
}

:focus,
:focus-visible {
outline-width: 2px;
}

%btn-pl-default-base {
border-radius: 0;
}
Expand Down Expand Up @@ -414,33 +431,30 @@ body.view-instructordash {
background: $primary;
color: white;
margin: 0 0 10px;
outline-offset: 3px;
}
.instructor-nav {
overflow: hidden;
width: 100%;
white-space: nowrap;
overflow-x: auto;
border: 1px solid #E5E7EB;
border-radius: 6px;
padding: 0 !important;
letter-spacing: -.32em;
display: flex;
border: 0;
padding: 5px;

li {
letter-spacing: normal;
&:first-child {
button {
border: none;
}
}
margin-right: -1px;

button {
border: none !important;
border-radius: 0 !important;
border-left: 1px solid #E5E7EB !important;
border-radius: 0;
border: 1px solid #E5E7EB !important;
font-size: 14px;
line-height: 20px;
font-weight: 500;
padding: 9px 17px;
color: #374151;
text-decoration: none !important;
outline-offset: 3px;
&.active-section {
background: $primary !important;
color: white !important;
Expand All @@ -449,7 +463,21 @@ body.view-instructordash {
color: $dark;
}
&:focus {
box-shadow: inset 0 0 0 2px $primary !important;
position: relative;
z-index: 1;
}
}

&:first-of-type {
button {
border: none;
border-radius: 6px 0 0 6px;
}
}

&:last-of-type {
button {
border-radius: 0 6px 6px 0;
}
}
}
Expand Down Expand Up @@ -877,17 +905,14 @@ body.indigo-dark-theme {
box-shadow: none !important;
}
.instructor-nav {
border: 1px solid #E5E7EB;

li {
&:first-child {
button {
border: none;
}
}
button {
border: none !important;
border-radius: 0 !important;
border-left: 1px solid #E5E7EB !important;
color: $text-color-primary;
&.active-section {
background: $primary-d !important;
Expand Down
10 changes: 5 additions & 5 deletions tutorindigo/templates/indigo/lms/templates/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,17 +25,17 @@
<form method="get" action="/courses">
<!-- UPDATE IN INDIGO2.1 - Change the structure for search bar -->
<div class="search-field-wrapper">
<div class="button-holder">
<button class="search-button" type="submit">
${_("Search")}
</button>
</div>
<label class="input-holder"><span class="sr">${_("Search for a course")}</span>
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
<path fill-rule="evenodd" clip-rule="evenodd" d="M8 4C5.79086 4 4 5.79086 4 8C4 10.2091 5.79086 12 8 12C10.2091 12 12 10.2091 12 8C12 5.79086 10.2091 4 8 4ZM2 8C2 4.68629 4.68629 2 8 2C11.3137 2 14 4.68629 14 8C14 9.29583 13.5892 10.4957 12.8907 11.4765L17.7071 16.2929C18.0976 16.6834 18.0976 17.3166 17.7071 17.7071C17.3166 18.0976 16.6834 18.0976 16.2929 17.7071L11.4765 12.8907C10.4957 13.5892 9.29583 14 8 14C4.68629 14 2 11.3137 2 8Z" fill="#9CA3AF"></path>
</svg>
<input class="search-input" name="search_query" type="text" placeholder="${_("Search for a course")}"></input>
</label>
<div class="button-holder">
<button class="search-button" type="submit">
${_("Search")}
</button>
</div>
</div>
</form>
</div>
Expand Down