Skip to content
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

Accessibility fixes | utility fix #135

Merged
merged 5 commits into from
Jul 12, 2024
Merged

Accessibility fixes | utility fix #135

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
4ae6f2a
Accessibility fixes | utility fix
Jun 17, 2024
86eea2a
modifying render order for CC
Jun 17, 2024
fc638e5
change cc rendering order
Jun 25, 2024
cbade96
rebuilt files after conflicts solved and updated README
Jul 12, 2024
c4d65da
rolled back HTML change
Jul 12, 2024
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
80 changes: 49 additions & 31 deletions build/cookieconsent.js
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion build/cookieconsent.min.js
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion docs/assets/js/cookieconsent.min.js
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion docs_src/src/assets/js/cookieconsent.min.js
View file
Open in desktop

Large diffs are not rendered by default.

23 changes: 13 additions & 10 deletions readme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -88,20 +88,21 @@ The script is being controlled mainly by a configuration object which is passed
#cconsent-bar .ccb__left { align-self:center; text-align:left; margin: 15px 0;}
#cconsent-bar .ccb__right { align-self:center; white-space: nowrap;}
#cconsent-bar .ccb__right > div {display:inline-block; color:#FFF;}
#cconsent-bar button { line-height:normal; font-size:14px; border:0; padding:10px 10px; color: #2b7abb; background-color: #fff;}
#cconsent-bar button { line-height:normal; font-size:14px; border:0; padding:10px 10px; color: #2b7abb;}
#cconsent-bar button.consent-give { line-height:normal; font-size:14px; border:none; padding:10px 10px; color: #2b7abb; background-color: #fff;}
#cconsent-bar button.consent-decline { line-height:normal; font-size:14px; border:none; padding:10px 10px; color: #fff; background-color: #2b7abb; margin-right: 10px; border: 1px solid #fff;}
#cconsent-bar button.consent-decline { line-height:normal; font-size:14px; border:none; padding:10px 10px; color: #fff; background-color: #2b7abb; margin-right: 10px; border: 1px solid #fff}
#cconsent-bar button.ccb__edit { appearance:none; margin-right:15px; border:0; padding:0; text-decoration:underline; color: #fff; background:none; }
#cconsent-bar a:hover, #cconsent-bar button:hover { cursor:pointer; }
#cconsent-modal, #cconsent-init-modal { display:none; font-size:14px; line-height:18px; color:#666; width: 100vw; height: 100vh; position:fixed; left:0; top:0; right:0; bottom:0; font-family:inherit; font-size:14px; background-color:rgba(0,0,0,0.6); z-index:9999; align-items:center; justify-content:center;}
#cconsent-bar button:focus-visible {box-shadow: 0 0 0 2px rgb(40 168 52 / 75%);}
#cconsent-modal, #cconsent-init-modal { display:none; font-size:14px; line-height:18px; color:#666; width: 100vw; height: 100vh; position:fixed; left:0; top:0; right:0; bottom:0; font-family:sans-serif; font-size:14px; background-color:rgba(0,0,0,0.6); z-index:9999; align-items:center; justify-content:center;}
@media (max-width: 600px) { #cconsent-modal, #cconsent-init-modal { height: 100% } }
#cconsent-modal button, #cconsent-init-modal button { border: 0 }
#cconsent-modal h2, #cconsent-init-modal h2, #cconsent-modal h3, #cconsent-init-modal h3 {color:#333; margin-top:0}
#cconsent-modal strong, #cconsent-init-modal strong {color:#333; margin-top:0}
#cconsent-modal.ccm--visible, #cconsent-init-modal.ccm--visible {display:flex}
#cconsent-modal .ccm__content, #cconsent-init-modal .ccm__content { max-width:600px; max-height:600px; overflow-Y:auto; background-color:#EFEFEF; display:flex; flex-direction:column; justify-content:space-between; }
@media (max-width: 600px) { #cconsent-modal .ccm__content, #cconsent-init-modal .ccm__content { max-width:100vw; height:100%; max-height:initial; }}
#cconsent-modal .ccm__content > .ccm__content__heading, #cconsent-init-modal .ccm__content > .ccm__content__heading { border-bottom:1px solid #D8D8D8; padding:35px 35px 20px; background-color:#EFEFEF; position:relative; }
#cconsent-modal .ccm__content > .ccm__content__heading h2, #cconsent-init-modal .ccm__content > .ccm__content__heading h2 { font-size:21px; font-weight:600; color:#333; margin:0 }
#cconsent-modal .ccm__content > .ccm__content__heading strong, #cconsent-init-modal .ccm__content > .ccm__content__heading strong { font-size:21px; font-weight:600; color:#333; margin:0 }
#cconsent-modal .ccm__content > .ccm__content__heading p, #cconsent-init-modal .ccm__content > .ccm__content__heading p { margin-top:1rem; margin-bottom:1rem; }
#cconsent-modal .ccm__content > .ccm__content__heading .ccm__cheading__close, #cconsent-init-modal .ccm__content > .ccm__content__heading .ccm__cheading__close { appearance:none; padding:0; border:0; font-weight:600; color:#888; cursor:pointer; font-size:26px; position:absolute; right:15px; top:15px; width:26px; height:26px; background:none; text-align:center; }
#cconsent-modal .ccm__content > .ccm__content__heading .ccm__cheading__close:focus-visible, #cconsent-init-modal .ccm__content > .ccm__content__heading .ccm__cheading__close:focus-visible { box-shadow: 0 0 0 0.25rem rgb(40 168 52 / 75%); }
Expand All @@ -117,31 +118,33 @@ The script is being controlled mainly by a configuration object which is passed
#cconsent-modal .ccm__content > .ccm__content__body .ccm__tabgroup .ccm__tab-head .ccm__tab-head__icon-wedge > svg { pointer-events: none; }
#cconsent-modal .ccm__content > .ccm__content__body .ccm__tabgroup.ccm__tabgroup--open .ccm__tab-head .ccm__tab-head__icon-wedge { transform:translateY(-50%) rotate(-180deg) }
#cconsent-modal .ccm__tab-trigger { appearance: none; background: none; display: flex; flex-direction: row; width: 100%; padding:17px 35px 17px 56px; color:#333; font-weight:600; }
#cconsent-modal .ccm__tab-trigger:focus-visible {box-shadow: 0 0 0 2px rgb(40 168 52 / 75%);}
#cconsent-modal .ccm__content > .ccm__content__body .ccm__tab-content {padding:0; margin:0}
#cconsent-modal .ccm__content > .ccm__content__body .ccm__tabgroup .ccm__tab-content { max-height: 0; overflow: hidden; opacity: 0; transition: all .5s ease-out; }
#cconsent-modal .ccm__content > .ccm__content__body .ccm__tabgroup .ccm__tab-content { overflow: hidden; display: none; transition: all .5s ease-out; }
#cconsent-modal .ccm__content > .ccm__content__body .ccm__tabgroup .ccm__tab-content__inner { display: flex; flex-direction: row; padding:25px 35px; }
#cconsent-modal .ccm__content > .ccm__content__body .ccm__tabgroup.ccm__tabgroup--open .ccm__tab-head { background-color:#f9f9f9 }
#cconsent-modal .ccm__content > .ccm__content__body .ccm__tabgroup.ccm__tabgroup--open .ccm__tab-content { max-height: 900px; opacity: 1; }
#cconsent-modal .ccm__content > .ccm__content__body .ccm__tabgroup.ccm__tabgroup--open .ccm__tab-content { max-height: 900px; display: block; }
#cconsent-modal .ccm__content > .ccm__content__body .ccm__tab-content .ccm__tab-content__choose {order:1;}
@media (max-width: 600px) { #cconsent-modal .ccm__content > .ccm__content__body .ccm__tabgroup.ccm__tabgroup--open .ccm__tab-content {flex-direction:column} }
@media (max-width: 600px) { #cconsent-modal .ccm__content > .ccm__content__body .ccm__tab-content .ccm__tab-content__choose { margin-bottom:20px; } }
#cconsent-modal .ccm__content > .ccm__content__body .ccm__tab-content .ccm__tab-content__choose .ccm__switch-component {display:flex; margin-right:35px; align-items:center;}
#cconsent-modal .ccm__content > .ccm__content__body .ccm__tab-content .ccm__tab-content__choose .ccm__switch__status {font-weight:600;}
#cconsent-modal .ccm__content > .ccm__content__body .ccm__tab-content .ccm__tab-content__choose .ccm__switch-group {background:none; width:40px; height:20px; margin:0 10px; position:relative;}
#cconsent-modal .ccm__content > .ccm__content__body .ccm__tab-content .ccm__tab-content__choose .ccm__switch__slider {position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; border-radius:10px; transition: .4s; pointer-events: none;}
#cconsent-modal .ccm__content > .ccm__content__body .ccm__tab-content .ccm__tab-content__choose .ccm__switch__slider:before {position: absolute; content: ""; height: 12px; width: 12px; left: 4px; bottom: 4px; background-color: white; border-radius:50%; .4s; transition: .4s;}
#cconsent-modal .ccm__content > .ccm__content__body .ccm__tab-content .ccm__tab-content__choose .ccm__switch__slider:before {position: absolute; content: ""; height: 12px; width: 12px; left: 4px; bottom: 4px; background-color: white; border-radius:50%; transition: .4s;}
#cconsent-modal .ccm__content > .ccm__content__body .ccm__tab-content .ccm__tab-content__choose .ccm__switch-group[aria-checked="true"] .ccm__switch__slider {background-color: #28A834;}
#cconsent-modal .ccm__content > .ccm__content__body .ccm__tab-content .ccm__tab-content__choose .ccm__switch-group:focus-visible {box-shadow: 0 0 0 2px rgb(40 168 52 / 75%);}
#cconsent-modal .ccm__content > .ccm__content__body .ccm__tab-content .ccm__tab-content__choose .ccm__switch-group[aria-checked="true"] .ccm__switch__slider:before {transform: translateX(20px);}
#cconsent-modal .ccm__content > .ccm__content__body .ccm__tab-content .ccm__tab-content__choose .ccm__switch-group[aria-checked="true"] .ccm__switch__slider:before {-webkit-transform: translateX(20px); -ms-transform: translateX(20px); transform: translateX(20px);}
#cconsent-modal .ccm__content > .ccm__content__body .ccm__tab-content .ccm__tab-content__desc {order:2;}
#cconsent-modal .ccm__content > .ccm__content__body .ccm__tab-content h3 {font-size:18px; margin-bottom:10px; line-height:1;}
#cconsent-modal .ccm__content > .ccm__content__body .ccm__tab-content strong {font-size:18px; margin-bottom:10px; line-height:1;}
#cconsent-modal .ccm__content > .ccm__content__body .ccm__tab-content p {color:#444; margin-bottom:0}
#cconsent-modal .ccm__content > .ccm__content__body .ccm__tab-content .ccm__list:not(:empty) {margin-top:30px;}
#cconsent-modal .ccm__content > .ccm__content__body .ccm__tab-content .ccm__list .ccm__list__title {color:#333; font-weight:600;}
#cconsent-modal .ccm__content > .ccm__content__body .ccm__tab-content .ccm__list ul { margin:15px 0; padding-left:15px }
#cconsent-modal .ccm__footer, #cconsent-init-modal .ccm__footer { padding:35px; background-color:#EFEFEF; text-align:center; display: flex; align-items:center; justify-content:flex-end; }
#cconsent-modal .ccm__footer button, #cconsent-init-modal .ccm__footer button { line-height:normal; font-size:14px; transition: background-color .5s ease-out; background-color: #1e6ef4; color: #fff; border:none; padding:13px; min-width:110px; border-radius: 2px; cursor:pointer; height: 100%; }
#cconsent-modal .ccm__footer button:hover, #cconsent-init-modal .ccm__footer button:hover { background-color: #181616; }
#cconsent-modal .ccm__footer button:focus-within, #cconsent-init-modal .ccm__footer button:focus-within { box-shadow: 0 0 0 0.25rem rgb(40 168 52 / 75%); }
#cconsent-modal .ccm__footer button + button, #cconsent-init-modal .ccm__footer button + button { margin-left: 10px; }`,
language: {
// Current language.
Expand Down
Loading