Skip to content

Commit

Permalink
fix(with-without): numerous fixes
Browse files Browse the repository at this point in the history
  • Loading branch information
@glassdimly
glassdimly committed Sep 9, 2019
1 parent 0abb401 commit b360340
Show file tree
Hide file tree
Showing 5 changed files with 132 additions and 44 deletions.
44 changes: 41 additions & 3 deletions .../pages/pattern-lab/_patterns/04-pages/99999-bolt-dev-sandbox/with-without-playground.twig
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,41 @@
<bolt-animate group="initial" out="fade-out" out-duration="6000">
<div class="c-pega-wwo__modal-bg"></div>
</bolt-animate>


<button style="position:absolute; z-index:99999999; top: 50vh; left: 46vw" onclick="function(e){
document.querySelector('.c-pega-wwo__modal-bg--wrapper').triggerAnimOut();
}">
fade out modal
</button>

<bolt-animate class="c-pega-wwo__modal-bg--wrapper" group="initial" out="fade-out" out-duration="1500">
<div is="shadow-root">
<div class="c-pega-wwo__modal-bg"></div>
</div>
</bolt-animate>

<bolt-animate group="initial" in="fade-in-slide-up" in-order="5" in-duration="300">
<div is="shadow-root">
<ul class="bolt-toggle">
<li class="bolt-toggle__item">
<input class="bolt-toggle__input c-pega-www__toggle-input reset" type="radio" name="c-pega-www__toggle-input" id="wo" checked>
<label class="bolt-toggle__label" for="radio1">Without Pega</label>
</li>
<li class="bolt-toggle__item">
<input class="bolt-toggle__input c-pega-www__toggle-input reset" type="radio" name="c-pega-www__toggle-input" id="w">
<label class="bolt-toggle__label" for="radio2">With Pega</label>
<div aria-hidden="true" class="bolt-toggle__toggle"><span class="bolt-toggle__marker"></span></div>
</li>
</ul>
</div>
</bolt-animate>
<button onclick="function(e){
document.querySelector('.block-test .c-pega-wwo__region-blocks-line-wrapper').triggerAnimOut();
document.querySelector('.block-test .c-pega-wwo__sm-circle-mobile--wrapper').triggerAnimIn();
}">
Trigger line/circle in
</button>
<button onclick="function(e){
document.querySelector('.block-test .c-pega-wwo__region-blocks-line-wrapper').triggerAnimOut();
document.querySelector('.block-test .c-pega-wwo__sm-circle-mobile--wrapper').triggerAnimIn();
}">
Trigger line/circle in
</button>
2 changes: 2 additions & 0 deletions packages/components/bolt-with-without/js/with-without.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,8 @@ import {
handleActiveRegionChangeRequest,
} from './handleActiveRegionChange';

document.querySelectorAll('bolt-animate').forEach(el => {});

// Set up the resize listener which helps with some of the abs. pos. stuff.
handleResize();
window.addEventListener('resize', handleResize);
Expand Down
1 change: 0 additions & 1 deletion packages/components/bolt-with-without/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,6 @@
"access": "public"
},
"dependencies": {
"@bolt/animations": "^0.0.0",
"@bolt/components-button": "^2.6.0-beta.1",
"@bolt/components-icon": "^2.6.0-beta.1",
"@bolt/components-link": "^2.6.0-beta.1",
Expand Down
117 changes: 83 additions & 34 deletions packages/components/bolt-with-without/with-without.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,12 +8,25 @@ $pega-wwo--block-bottom-margin: 2rem;
$pega-wwo--max-width: 100%;
$pega-wwo--desktop-ratio: 59.222%;
$pega-wwo--desktop-ratio-decimal: .59222;
$pega-wwo--sm-circle-size: 10px;
$pega-wwo--sm-circle-size--relative: 2%;
$pega-wwo--sm-circle-size--fixed: 10px;
$pega-wwo--sm-circle-outline-size: 3px;
$pega-wwo--dashed-circle-height: 48.05%;
$pega-wwo--content-max-mobile-width: 550px;
$bolt-medium-icon-half-size: 12px;
$pega-wwo--sm-circle-top-margin--mobile: $bolt-medium-icon-half-size - ($pega-wwo--sm-circle-size / 2);
$pega-wwo--sm-circle-top-margin--mobile: $bolt-medium-icon-half-size - ($pega-wwo--sm-circle-size--fixed / 2);

// Fix IE 11 opacity inheritance for non-static elements.
bolt-animate {
&[out^="fade"],
&[in^="fade"] {
> [is="shadow-root"] {
> * {
opacity: inherit;
}
}
}
}

.c-pega-wwo {
position: relative;
Expand Down Expand Up @@ -214,7 +227,11 @@ $pega-wwo--sm-circle-top-margin--mobile: $bolt-medium-icon-half-size - ($pega-ww
font-size: 28px;
font-weight: normal;

span {
@include bolt-mq($from: xxxlarge) {
padding-top: 11rem;
}

span {
display: block;
z-index: 12;
}
Expand Down Expand Up @@ -281,31 +298,32 @@ $pega-wwo--sm-circle-top-margin--mobile: $bolt-medium-icon-half-size - ($pega-ww
}
}

// Circles on self-drawing circle
&__sm-circle {
@include bolt-mq($from: large) {
display: block;
position: absolute;
width: $pega-wwo--sm-circle-size;
height: $pega-wwo--sm-circle-size;
width: $pega-wwo--sm-circle-size--relative;
height: $pega-wwo--sm-circle-size--relative;
border-radius: 50%;
background-color: bolt-color(white);
}

&-lit {
z-index: 1;
width: $pega-wwo--sm-circle-size;
height: $pega-wwo--sm-circle-size;
width: $pega-wwo--sm-circle-size--relative;
height: $pega-wwo--sm-circle-size--relative;
background-color: bolt-color(yellow, light);


&:before {
content: '';
opacity: .3;
position: absolute;
top: -10px;
left: -10px;
width: $pega-wwo--sm-circle-size + 20px;
height: $pega-wwo--sm-circle-size + 20px;
top: -75%;
left: -75%;
width: 250%;
height: 250%;
border-radius: 50%;
background-color: bolt-color(yellow, light);
@include bolt-animation--pulse($base: true, $duration: $bolt-duration--xslow, $active: true);
Expand All @@ -327,9 +345,9 @@ $pega-wwo--sm-circle-top-margin--mobile: $bolt-medium-icon-half-size - ($pega-ww
display: block;
position: relative;
top: $pega-wwo--sm-circle-top-margin--mobile;
left: (-$pega-wwo--sm-circle-size / 2) + 1px; // 1px is the outline size
width: $pega-wwo--sm-circle-size;
height: $pega-wwo--sm-circle-size;
left: (-$pega-wwo--sm-circle-size--fixed / 2) + 1px; // 1px is the outline size
width: $pega-wwo--sm-circle-size--fixed;
height: $pega-wwo--sm-circle-size--fixed;
margin-right: 2px;
border-radius: 50%;
background-color: bolt-color(white);
Expand All @@ -343,23 +361,23 @@ $pega-wwo--sm-circle-top-margin--mobile: $bolt-medium-icon-half-size - ($pega-ww
content: '';
opacity: .2;
position: absolute;
top: -$pega-wwo--sm-circle-size / 2;
left: -$pega-wwo--sm-circle-size / 2;
top: -$pega-wwo--sm-circle-size--fixed / 2;
left: -$pega-wwo--sm-circle-size--fixed / 2;
z-index: -1;
width: $pega-wwo--sm-circle-size + 10px;
height: $pega-wwo--sm-circle-size + 10px;
width: $pega-wwo--sm-circle-size--fixed + 10px;
height: $pega-wwo--sm-circle-size--fixed + 10px;
border-radius: 50%;
background-color: bolt-color(yellow, light);
@include bolt-animation--pulse($base: true, $duration: $bolt-duration--xslow, $active: true);
}
}

&.c-pega-wwo__sm-circle-outlined {
left: (-$pega-wwo--sm-circle-size / 2) - .5px;
left: (-$pega-wwo--sm-circle-size--fixed / 2) - .5px;
}

.c-pega-wwo__block-expanded & {
$pega-wwo--sm-circle-size-outlined: $pega-wwo--sm-circle-size + ($pega-wwo--sm-circle-outline-size * 2);
$pega-wwo--sm-circle-size-outlined: $pega-wwo--sm-circle-size--fixed + ($pega-wwo--sm-circle-outline-size * 2);
top: $pega-wwo--sm-circle-top-margin--mobile - $pega-wwo--sm-circle-outline-size;
left: (-$pega-wwo--sm-circle-size-outlined / 2) + .5px;
width: $pega-wwo--sm-circle-size-outlined;
Expand All @@ -373,10 +391,10 @@ $pega-wwo--sm-circle-top-margin--mobile: $bolt-medium-icon-half-size - ($pega-ww
background-color: bolt-color(yellow);

&:before {
top: -$pega-wwo--sm-circle-size / 2;
left: -$pega-wwo--sm-circle-size / 2;
width: $pega-wwo--sm-circle-size + 10px;
height: $pega-wwo--sm-circle-size + 10px;
top: -$pega-wwo--sm-circle-size--fixed / 2;
left: -$pega-wwo--sm-circle-size--fixed / 2;
width: $pega-wwo--sm-circle-size--fixed + 10px;
height: $pega-wwo--sm-circle-size--fixed + 10px;
}
}

Expand Down Expand Up @@ -458,7 +476,7 @@ $pega-wwo--sm-circle-top-margin--mobile: $bolt-medium-icon-half-size - ($pega-ww
}

@include bolt-mq($from: xxlarge) {
font-size: 13px;
font-size: 16px;
}
}

Expand Down Expand Up @@ -515,16 +533,30 @@ $pega-wwo--sm-circle-top-margin--mobile: $bolt-medium-icon-half-size - ($pega-ww
width: calc(#{$pega-wwo--block-width-basis} + 110px);
padding-top: 14.21%;
}

@include bolt-mq($from: xxlarge) {
left: 13%;
}

@include bolt-mq($from: xxxlarge) {
left: 16%;
}
}

&-block-frustration-wo {
@include bolt-mq($from: xlarge) {
top: 0;
left: 10%;
left: 9%;
width: calc(#{$pega-wwo--block-width-basis} + 110px);
padding-top: 33.75%;
}

@include bolt-mq($from: xxlarge) {
left: 11.5%;
}

}

&-block-business-wo {
@include bolt-mq($from: xlarge) {
top: 0;
Expand Down Expand Up @@ -565,7 +597,14 @@ $pega-wwo--sm-circle-top-margin--mobile: $bolt-medium-icon-half-size - ($pega-ww
left: 9%;
padding-top: 13%;
}

@include bolt-mq($from: xxlarge) {
width: calc(#{$pega-wwo--block-width-basis} + 130px);
top: 5%;
left: 11%;
}
}

&-block-signals-w {
.c-pega-wwo__block-title {
color: bolt-color(yellow);
Expand All @@ -591,6 +630,11 @@ $pega-wwo--sm-circle-top-margin--mobile: $bolt-medium-icon-half-size - ($pega-ww
left: 4.3%;
width: calc(#{$pega-wwo--block-width-basis} + 110px);
}

@include bolt-mq($from: xxxlarge) {
width: calc(#{$pega-wwo--block-width-basis} + 90px);
left: 7%;
}
}

&-block-respond-w {
Expand All @@ -602,8 +646,12 @@ $pega-wwo--sm-circle-top-margin--mobile: $bolt-medium-icon-half-size - ($pega-ww
padding-top: 41.75%;
}

@include bolt-mq($from: xxxlarge) {
left: 10%;
}

.c-pega-wwo__block-title {
color: bolt-color(yellow);
color: bolt-color(yellow);
}
}

Expand Down Expand Up @@ -684,7 +732,7 @@ $pega-wwo--sm-circle-top-margin--mobile: $bolt-medium-icon-half-size - ($pega-ww
top: $pega-wwo--sm-circle-top-margin--mobile;
left: 0;
width: 2px;
height: calc(calc(calc(100% + #{$pega-wwo--block-bottom-margin}) - #{$pega-wwo--sm-circle-top-margin--mobile}) + #{$pega-wwo--sm-circle-size / 2});
height: calc(((100% + #{$pega-wwo--block-bottom-margin}) - #{$pega-wwo--sm-circle-top-margin--mobile}) + #{$pega-wwo--sm-circle-size--fixed / 2});
--bolt-animate--slide-up-max-height: 80px;

@include bolt-mq(xlarge) {
Expand Down Expand Up @@ -742,21 +790,22 @@ $pega-wwo--sm-circle-top-margin--mobile: $bolt-medium-icon-half-size - ($pega-ww

@include bolt-mq($from: xlarge) {
position: absolute;
top: 0;
left: $pega-wwo--result-left-pos;
left: $pega-wwo--result-left-pos + 3%;
min-width: 350px;
max-width: 29%;
padding-top: 15%;
padding-top: 5%;
top: 50%;
transform: translateY(-50%);
padding-right: 0;
padding-left: 0;
}

@include bolt-mq($from: xlarge) {
padding-top: 18.5%;
@include bolt-mq($from: xxlarge) {
left: $pega-wwo--result-left-pos;
}

@include bolt-mq($from: xxxlarge) {
padding-top: 27%;
left: $pega-wwo--result-left-pos - 8%;
}
}
}
Expand Down
12 changes: 6 additions & 6 deletions yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -806,7 +806,7 @@
dependencies:
"@bolt/core" "^2.6.0-beta.1"

"@bolt/core@^2.5.2":
"@bolt/core@^2.5.2", "@bolt/core@^2.5.3":
version "2.5.6"
resolved "https://registry.npmjs.org/@bolt/core/-/core-2.5.6.tgz#0feae9be84ab25c79a121aa5d8c85c4ce78b4a6e"
integrity sha512-GXRlP2QBp9qQEA+UOkaihKEwna9UYsrP/HyvdOlJYrty6T16ngy7s2bINFA3os9sXDvcew4xVfDxr9ebZBXI/Q==
Expand Down Expand Up @@ -2752,11 +2752,6 @@ JSONStream@^1.0.4, JSONStream@^1.3.4, JSONStream@^1.3.5:
jsonparse "^1.2.0"
through ">=2.2.7 <3"

a-simple-switch@0.5.0:
version "0.5.0"
resolved "https://registry.yarnpkg.com/a-simple-switch/-/a-simple-switch-0.5.0.tgz#0d516e31279cb2d7cbf6333d8777a7ce143e4092"
integrity sha512-wQYgGg8hgPlbRaBq0djjCCLuSzgC/+jJ2mcOdaNHpg/YGH1IWv0uKUXLC6BaOQJDwr7YjmydDDl6aoOBkZaIEQ==

a-sync-waterfall@^1.0.0:
version "1.0.1"
resolved "https://registry.npmjs.org/a-sync-waterfall/-/a-sync-waterfall-1.0.1.tgz#75b6b6aa72598b497a125e7a2770f14f4c8a1fa7"
Expand Down Expand Up @@ -13890,6 +13885,11 @@ node-status-codes@^1.0.0:
resolved "https://registry.npmjs.org/node-status-codes/-/node-status-codes-1.0.0.tgz#5ae5541d024645d32a58fcddc9ceecea7ae3ac2f"
integrity sha1-WuVUHQJGRdMqWPzdyc7s6nrjrC8=

nodelist-foreach-polyfill@^1.2.0:
version "1.2.0"
resolved "https://registry.yarnpkg.com/nodelist-foreach-polyfill/-/nodelist-foreach-polyfill-1.2.0.tgz#92bca739959af68271734087e48474c2fef5152c"
integrity sha512-hPW0tSoi1gJ3diSOyjFYOsYLZjnxF04psobzKA5GGGCz3fKHnLODwgdyXQq2cddYlvmT3q+ZNEBrfBdMkYPLaA==

noop-logger@^0.1.1:
version "0.1.1"
resolved "https://registry.npmjs.org/noop-logger/-/noop-logger-0.1.1.tgz#94a2b1633c4f1317553007d8966fd0e841b6a4c2"
Expand Down

0 comments on commit b360340

Please sign in to comment.