Skip to content

Commit

Permalink
Remove bullets from slider controls
Browse files Browse the repository at this point in the history
  • Loading branch information
@NicolaSaunders
NicolaSaunders committed Oct 31, 2024
1 parent f0d0a79 commit 045c873
Show file tree
Hide file tree
Showing 9 changed files with 82 additions and 152 deletions.
2 changes: 1 addition & 1 deletion assets-src/js/slider.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,7 @@ let contentSlider = (function () {
function createControls() {

let controls = document.createElement('ul');
controls.setAttribute('class', 'slider-controls');
controls.setAttribute('class', 'clean-list slider-controls');
controls.setAttribute('aria-label', controlsDescription);
controls.innerHTML = '<li><button class="button button--ghost js-previous with-icon--larger" aria-label="' + previousSlide + '" style="padding:0.4375rem;"><svg xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 320 512" class="icon icon--larger" focusable="false" aria-hidden="true" width="1em" height="1em"><path class="chevron-left" d="M34.52 239.03L228.87 44.69c9.37-9.37 24.57-9.37 33.94 0l22.67 22.67c9.36 9.36 9.37 24.52.04 33.9L131.49 256l154.02 154.75c9.34 9.38 9.32 24.54-.04 33.9l-22.67 22.67c-9.37 9.37-24.57 9.37-33.94 0L34.52 272.97c-9.37-9.37-9.37-24.57 0-33.94z"/><path class="chevron-right" d="M285.476 272.971L91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z"/></svg></button></li>'
+ '<li style="margin-top:0;margin-inline-start:0.25rem;"><button class="button button--ghost js-next with-icon--larger" aria-label="' + nextSlide + '" style="padding:0.4375rem;"><svg xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 320 512" class="icon icon--larger" focusable="false" aria-hidden="true" width="1em" height="1em"><path class="chevron-left" d="M34.52 239.03L228.87 44.69c9.37-9.37 24.57-9.37 33.94 0l22.67 22.67c9.36 9.36 9.37 24.52.04 33.9L131.49 256l154.02 154.75c9.34 9.38 9.32 24.54-.04 33.9l-22.67 22.67c-9.37 9.37-24.57 9.37-33.94 0L34.52 272.97c-9.37-9.37-9.37-24.57 0-33.94z"/><path class="chevron-right" d="M285.476 272.971L91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z"/></svg></button></li>';
Expand Down
2 changes: 1 addition & 1 deletion public/dist/assets/js/slider.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -332,7 +332,7 @@ let contentSlider = function () {
*/
function createControls() {
let controls = document.createElement('ul');
controls.setAttribute('class', 'slider-controls');
controls.setAttribute('class', 'clean-list slider-controls');
controls.setAttribute('aria-label', controlsDescription);
controls.innerHTML = '<li><button class="button button--ghost js-previous with-icon--larger" aria-label="' + previousSlide + '" style="padding:0.4375rem;"><svg xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 320 512" class="icon icon--larger" focusable="false" aria-hidden="true" width="1em" height="1em"><path class="chevron-left" d="M34.52 239.03L228.87 44.69c9.37-9.37 24.57-9.37 33.94 0l22.67 22.67c9.36 9.36 9.37 24.52.04 33.9L131.49 256l154.02 154.75c9.34 9.38 9.32 24.54-.04 33.9l-22.67 22.67c-9.37 9.37-24.57 9.37-33.94 0L34.52 272.97c-9.37-9.37-9.37-24.57 0-33.94z"/><path class="chevron-right" d="M285.476 272.971L91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z"/></svg></button></li>' + '<li style="margin-top:0;margin-inline-start:0.25rem;"><button class="button button--ghost js-next with-icon--larger" aria-label="' + nextSlide + '" style="padding:0.4375rem;"><svg xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 320 512" class="icon icon--larger" focusable="false" aria-hidden="true" width="1em" height="1em"><path class="chevron-left" d="M34.52 239.03L228.87 44.69c9.37-9.37 24.57-9.37 33.94 0l22.67 22.67c9.36 9.36 9.37 24.52.04 33.9L131.49 256l154.02 154.75c9.34 9.38 9.32 24.54-.04 33.9l-22.67 22.67c-9.37 9.37-24.57 9.37-33.94 0L34.52 272.97c-9.37-9.37-9.37-24.57 0-33.94z"/><path class="chevron-right" d="M285.476 272.971L91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z"/></svg></button></li>';
controls.style.display = 'inline-flex';
Expand Down
2 changes: 1 addition & 1 deletion public/dist/assets/js/slider.min.js
View file

Large diffs are not rendered by default.

63 changes: 21 additions & 42 deletions public/dist/assets/styles/advanced.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -158,8 +158,7 @@ article {
[data-trigger=account-menu] .sr-only, .visuallyhidden:not(:focus):not(:active) {
border: 0;
clip: rect(0 0 0 0);
-webkit-clip-path: inset(100%);
clip-path: inset(100%);
clip-path: inset(100%);
height: 1px;
overflow: hidden;
padding: 0;
Expand Down Expand Up @@ -226,8 +225,7 @@ br {
}
@media screen and (min-width: 70em) {
[data-trigger=account-menu] {
-webkit-margin-start: auto;
margin-inline-start: auto;
margin-inline-start: auto;
padding: 0.5rem 0.1875rem 0.3125rem 0.1875rem;
}
[data-trigger=account-menu]:hover::before {
Expand All @@ -254,8 +252,7 @@ br {
[data-trigger=account-menu] .sr-only {
border: initial;
clip: auto;
-webkit-clip-path: none;
clip-path: none;
clip-path: none;
height: auto;
margin: initial;
overflow: initial;
Expand All @@ -267,8 +264,7 @@ br {
}
@media screen and (min-width: 70em) {
[data-trigger=account-menu] .avatar {
-webkit-margin-start: 0.5rem;
margin-inline-start: 0.5rem;
margin-inline-start: 0.5rem;
}
}

Expand Down Expand Up @@ -449,16 +445,13 @@ br {
}
}
.global-nav__inner [data-trigger=sub-nav]::after {
-webkit-margin-start: auto !important;
margin-inline-start: auto !important;
margin-inline-start: auto !important;
transform: rotate(-45deg);
}
@media screen and (min-width: 70em) {
.global-nav__inner [data-trigger=sub-nav]::after {
-webkit-margin-before: -0.1875rem;
margin-block-start: -0.1875rem;
-webkit-margin-start: 0.5rem !important;
margin-inline-start: 0.5rem !important;
margin-block-start: -0.1875rem;
margin-inline-start: 0.5rem !important;
transform: rotate(45deg);
}
}
Expand All @@ -472,8 +465,7 @@ br {
}
@media screen and (min-width: 70em) {
.global-nav__inner [data-trigger=sub-nav][aria-expanded=true]::after {
-webkit-margin-before: 0;
margin-block-start: 0;
margin-block-start: 0;
scale: -1;
}
}
Expand All @@ -483,8 +475,7 @@ br {
}
@media screen and (min-width: 70em) {
[dir=rtl] .global-nav__inner [data-trigger=sub-nav]::after {
-webkit-margin-start: 0.25rem;
margin-inline-start: 0.25rem;
margin-inline-start: 0.25rem;
transform: rotate(45deg);
}
}
Expand Down Expand Up @@ -600,10 +591,8 @@ br {
content: "";
inline-size: 1rem;
flex: 0 0 auto;
-webkit-margin-end: 0.75rem;
margin-inline-end: 0.75rem;
-webkit-margin-start: 0.375rem;
margin-inline-start: 0.375rem;
margin-inline-end: 0.75rem;
margin-inline-start: 0.375rem;
transform: rotate(135deg);
}

Expand Down Expand Up @@ -658,10 +647,8 @@ br {
content: "";
flex: 0 0 auto;
inline-size: 1rem;
-webkit-margin-before: 0.375rem;
margin-block-start: 0.375rem;
-webkit-margin-end: 1rem;
margin-inline-end: 1rem;
margin-block-start: 0.375rem;
margin-inline-end: 1rem;
transform: rotate(-45deg);
}
}
Expand Down Expand Up @@ -715,10 +702,8 @@ br {
border-width: 0 0.25rem 0.25rem 0;
content: "";
inline-size: 0.875rem;
-webkit-margin-before: 0.25rem;
margin-block-start: 0.25rem;
-webkit-margin-end: 0.125rem;
margin-inline-end: 0.125rem;
margin-block-start: 0.25rem;
margin-inline-end: 0.125rem;
transform: rotate(45deg);
}
.js .component--collapsibles [data-heading=collapsibles] button:hover {
Expand All @@ -733,8 +718,7 @@ br {
text-decoration: none;
}
.js .component--collapsibles [data-heading=collapsibles] button[aria-expanded=true]::after {
-webkit-margin-before: 0.625rem;
margin-block-start: 0.625rem;
margin-block-start: 0.625rem;
scale: -1;
}
.js .component--collapsibles [data-heading=collapsibles] + *[aria-hidden=true] {
Expand Down Expand Up @@ -882,12 +866,9 @@ br {
border-width: 0 0.125rem 0.125rem 0;
content: "";
inline-size: 0.4375rem;
-webkit-margin-before: -0.1875rem;
margin-block-start: -0.1875rem;
-webkit-margin-end: 0.1875rem;
margin-inline-end: 0.1875rem;
-webkit-margin-start: 0.75rem;
margin-inline-start: 0.75rem;
margin-block-start: -0.1875rem;
margin-inline-end: 0.1875rem;
margin-inline-start: 0.75rem;
transform: rotate(45deg);
}
[data-toggle=true]:hover {
Expand All @@ -904,8 +885,7 @@ br {
}

[data-toggle=true][aria-expanded=true]::after {
-webkit-margin-before: 0.25rem;
margin-block-start: 0.25rem;
margin-block-start: 0.25rem;
scale: -1;
}
[data-toggle=true][aria-expanded=true] + * {
Expand Down Expand Up @@ -937,8 +917,7 @@ br {
}

#js-cancel-reply {
-webkit-margin-start: 0.625rem;
margin-inline-start: 0.625rem;
margin-inline-start: 0.625rem;
}

/*------------------------------------*\
Expand Down
2 changes: 1 addition & 1 deletion public/dist/assets/styles/advanced.min.css
View file

Large diffs are not rendered by default.

Loading

0 comments on commit 045c873

Please sign in to comment.