Skip to content

Commit

Permalink
(#412) Fixups for Playwright screenshots
Browse files Browse the repository at this point in the history 
These styles have been updated to ensure that
Playwright screenshots were consistent.
  • Loading branch information
@st3phhays
st3phhays committed Sep 3, 2024
1 parent 436877b commit 3d536df
Show file tree
Hide file tree
Showing 12 changed files with 211 additions and 117 deletions.
3 changes: 2 additions & 1 deletion .eslintrc.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,8 @@ module.exports = {
project: 'playwright/tsconfig.json'
},
rules: {
'playwright/no-conditional-in-test': 0
'playwright/no-conditional-in-test': 0,
'playwright/expect-expect': 0
}
},
{
Expand Down
68 changes: 45 additions & 23 deletions dist/css/boxstarter.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51467,8 +51467,19 @@ main {
background: rgba(1, 154, 74, 0.1);
}

.chocolatey-ccm {
/* stylelint-disable selector-class-pattern */
}
.chocolatey-ccm main #appSidebar {
max-width: 300px;
/* stylelint-disable-next-line selector-id-pattern */
/* stylelint-disable-next-line selector-id-pattern */
}
.chocolatey-ccm main #appSidebar[data-icon-menu=false] #appSidebar_offcanvas {
--bs-offcanvas-width: 300px;
}
.chocolatey-ccm main #appSidebar[data-icon-menu=true] #appSidebar_offcanvas {
--bs-offcanvas-width: 50px;
}
.chocolatey-ccm main #appSidebar.disabled li:not(.active-parent):hover::before {
background: none !important;
Expand Down Expand Up @@ -51511,6 +51522,9 @@ main {
.chocolatey-ccm .card {
overflow: visible !important;
}
.chocolatey-ccm .actionButton-cell {
width: 129px;
}

@media (min-width: 992px) {
.chocolatey-ccm main #appSidebar {
Expand Down Expand Up @@ -56675,6 +56689,10 @@ pre > code.diff-highlight .token.inserted:not(.prefix) {
.form-check .form-check-input.is-invalid {
border-color: var(--bs-danger);
}
.form-check .form-text,
.form-check .invalid-feedback {
margin-top: 0;
}

.form-switch.form-switch-active .form-check-input, .form-switch.form-switch-expired .form-check-input, .form-switch.form-switch-deactivated .form-check-input, .form-switch.form-switch-latest .form-check-input {
width: 3rem;
Expand Down Expand Up @@ -58885,6 +58903,10 @@ table.table.dataTable tr {
opacity: 1;
}

.tab-content > .active:focus-visible {
outline: 1px solid var(--bs-body-color);
}

body:not(.boxstarter-org) code:not([class*=language-]) {
padding: 0.125rem 0.375rem;
background: var(--bs-secondary-bg);
Expand Down Expand Up @@ -59060,19 +59082,19 @@ html:not(.chocolatey-ccm) body:not(.boxstarter-org) .btn-link:focus {
.playwright .playwright-arrow-bottom-tilt-left,
.playwright .playwright-arrow-end-left,
.playwright .playwright-arrow-start-right {
z-index: 99999;
position: relative;
z-index: 99999;
}
.playwright .playwright-box:after {
content: "";
border: 3px solid #f4516c;
left: 50%;
top: 50%;
.playwright .playwright-box::after {
position: absolute;
top: 50%;
left: 50%;
width: 100%;
height: 100%;
padding: 10px;
content: "";
border: 3px solid #f4516c;
transform: translate(-50%, -50%);
height: 100%;
width: 100%;
}
.playwright .playwright-arrow-top,
.playwright .playwright-arrow-bottom,
Expand All @@ -59083,46 +59105,46 @@ html:not(.chocolatey-ccm) body:not(.boxstarter-org) .btn-link:focus {
--playwright-arrow-width: 100px;
--playwright-arrow-height: 24px;
}
.playwright .playwright-arrow-top:before,
.playwright .playwright-arrow-bottom:before,
.playwright .playwright-arrow-bottom-tilt-right:before,
.playwright .playwright-arrow-bottom-tilt-left:before,
.playwright .playwright-arrow-end-left:before,
.playwright .playwright-arrow-start-right:before {
content: "";
.playwright .playwright-arrow-top::before,
.playwright .playwright-arrow-bottom::before,
.playwright .playwright-arrow-bottom-tilt-right::before,
.playwright .playwright-arrow-bottom-tilt-left::before,
.playwright .playwright-arrow-end-left::before,
.playwright .playwright-arrow-start-right::before {
position: absolute;
z-index: 999999;
display: block;
width: 100px;
height: 24px;
content: "";
background: url("../Common/Images/playwright/arrow-left.svg") no-repeat center center;
position: absolute;
z-index: 999999;
}
.playwright .playwright-arrow-top:before {
.playwright .playwright-arrow-top::before {
top: calc(-50px - 1rem);
left: 50%;
transform: translateX(-50%) rotate(-90deg);
}
.playwright .playwright-arrow-bottom:before {
.playwright .playwright-arrow-bottom::before {
bottom: calc(-50px - 1rem);
left: 50%;
transform: translateX(-50%) rotate(90deg);
}
.playwright .playwright-arrow-bottom-tilt-right:before {
.playwright .playwright-arrow-bottom-tilt-right::before {
bottom: calc(-50px - 0.25rem);
left: 20%;
transform: translateX(-50%) rotate(135deg);
}
.playwright .playwright-arrow-bottom-tilt-left:before {
.playwright .playwright-arrow-bottom-tilt-left::before {
bottom: calc(-50px - 0.25rem);
left: 80%;
transform: translateX(-50%) rotate(45deg);
}
.playwright .playwright-arrow-end-left:before {
.playwright .playwright-arrow-end-left::before {
top: 50%;
left: 100%;
transform: translate(10%, -50%);
}
.playwright .playwright-arrow-start-right:before {
.playwright .playwright-arrow-start-right::before {
top: 50%;
right: 100%;
transform: translate(-10%, -50%) rotate(180deg);
Expand Down
4 changes: 2 additions & 2 deletions dist/css/boxstarter.min.css
View file

Large diffs are not rendered by default.

68 changes: 45 additions & 23 deletions dist/css/chocolatey.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55350,8 +55350,19 @@ main {
background: rgba(92, 159, 216, 0.1);
}

.chocolatey-ccm {
/* stylelint-disable selector-class-pattern */
}
.chocolatey-ccm main #appSidebar {
max-width: 300px;
/* stylelint-disable-next-line selector-id-pattern */
/* stylelint-disable-next-line selector-id-pattern */
}
.chocolatey-ccm main #appSidebar[data-icon-menu=false] #appSidebar_offcanvas {
--bs-offcanvas-width: 300px;
}
.chocolatey-ccm main #appSidebar[data-icon-menu=true] #appSidebar_offcanvas {
--bs-offcanvas-width: 50px;
}
.chocolatey-ccm main #appSidebar.disabled li:not(.active-parent):hover::before {
background: none !important;
Expand Down Expand Up @@ -55394,6 +55405,9 @@ main {
.chocolatey-ccm .card {
overflow: visible !important;
}
.chocolatey-ccm .actionButton-cell {
width: 129px;
}

@media (min-width: 992px) {
.chocolatey-ccm main #appSidebar {
Expand Down Expand Up @@ -60558,6 +60572,10 @@ pre > code.diff-highlight .token.inserted:not(.prefix) {
.form-check .form-check-input.is-invalid {
border-color: var(--bs-danger);
}
.form-check .form-text,
.form-check .invalid-feedback {
margin-top: 0;
}

.form-switch.form-switch-active .form-check-input, .form-switch.form-switch-expired .form-check-input, .form-switch.form-switch-deactivated .form-check-input, .form-switch.form-switch-latest .form-check-input {
width: 3rem;
Expand Down Expand Up @@ -62768,6 +62786,10 @@ table.table.dataTable tr {
opacity: 1;
}

.tab-content > .active:focus-visible {
outline: 1px solid var(--bs-body-color);
}

body:not(.boxstarter-org) code:not([class*=language-]) {
padding: 0.125rem 0.375rem;
background: var(--bs-secondary-bg);
Expand Down Expand Up @@ -62943,19 +62965,19 @@ html:not(.chocolatey-ccm) body:not(.boxstarter-org) .btn-link:focus {
.playwright .playwright-arrow-bottom-tilt-left,
.playwright .playwright-arrow-end-left,
.playwright .playwright-arrow-start-right {
z-index: 99999;
position: relative;
z-index: 99999;
}
.playwright .playwright-box:after {
content: "";
border: 3px solid #f4516c;
left: 50%;
top: 50%;
.playwright .playwright-box::after {
position: absolute;
top: 50%;
left: 50%;
width: 100%;
height: 100%;
padding: 10px;
content: "";
border: 3px solid #f4516c;
transform: translate(-50%, -50%);
height: 100%;
width: 100%;
}
.playwright .playwright-arrow-top,
.playwright .playwright-arrow-bottom,
Expand All @@ -62966,46 +62988,46 @@ html:not(.chocolatey-ccm) body:not(.boxstarter-org) .btn-link:focus {
--playwright-arrow-width: 100px;
--playwright-arrow-height: 24px;
}
.playwright .playwright-arrow-top:before,
.playwright .playwright-arrow-bottom:before,
.playwright .playwright-arrow-bottom-tilt-right:before,
.playwright .playwright-arrow-bottom-tilt-left:before,
.playwright .playwright-arrow-end-left:before,
.playwright .playwright-arrow-start-right:before {
content: "";
.playwright .playwright-arrow-top::before,
.playwright .playwright-arrow-bottom::before,
.playwright .playwright-arrow-bottom-tilt-right::before,
.playwright .playwright-arrow-bottom-tilt-left::before,
.playwright .playwright-arrow-end-left::before,
.playwright .playwright-arrow-start-right::before {
position: absolute;
z-index: 999999;
display: block;
width: 100px;
height: 24px;
content: "";
background: url("../Common/Images/playwright/arrow-left.svg") no-repeat center center;
position: absolute;
z-index: 999999;
}
.playwright .playwright-arrow-top:before {
.playwright .playwright-arrow-top::before {
top: calc(-50px - 1rem);
left: 50%;
transform: translateX(-50%) rotate(-90deg);
}
.playwright .playwright-arrow-bottom:before {
.playwright .playwright-arrow-bottom::before {
bottom: calc(-50px - 1rem);
left: 50%;
transform: translateX(-50%) rotate(90deg);
}
.playwright .playwright-arrow-bottom-tilt-right:before {
.playwright .playwright-arrow-bottom-tilt-right::before {
bottom: calc(-50px - 0.25rem);
left: 20%;
transform: translateX(-50%) rotate(135deg);
}
.playwright .playwright-arrow-bottom-tilt-left:before {
.playwright .playwright-arrow-bottom-tilt-left::before {
bottom: calc(-50px - 0.25rem);
left: 80%;
transform: translateX(-50%) rotate(45deg);
}
.playwright .playwright-arrow-end-left:before {
.playwright .playwright-arrow-end-left::before {
top: 50%;
left: 100%;
transform: translate(10%, -50%);
}
.playwright .playwright-arrow-start-right:before {
.playwright .playwright-arrow-start-right::before {
top: 50%;
right: 100%;
transform: translate(-10%, -50%) rotate(180deg);
Expand Down
4 changes: 2 additions & 2 deletions dist/css/chocolatey.min.css
View file

Large diffs are not rendered by default.

Loading

0 comments on commit 3d536df

Please sign in to comment.