From c00bb20e9c0e9bf91f6a0728d70a20ea08ba9866 Mon Sep 17 00:00:00 2001 From: Salem Ghoweri Date: Sun, 14 Oct 2018 07:33:10 -0400 Subject: [PATCH 01/13] refactor: porting in latest bug fixes and UI updates relating to overall PL layout, cross browser fixes and scrolling improvements. add prettier and prettier-quick dev-dependencies to always run, even when not globally available --- package.json | 4 +- .../uikit-workshop/src/css/prism-okaidia.css | 191 +++++++++--------- packages/uikit-workshop/src/favicon.ico | Bin 0 -> 32988 bytes packages/uikit-workshop/src/html/index.html | 5 +- .../src/html/partials/base-template.html | 0 .../src/html/partials/modal.html | 4 +- .../src/sass/scss/01-abstracts/_mixins.scss | 5 +- .../src/sass/scss/02-base/_body.scss | 8 +- .../src/sass/scss/03-vendor/_prism.scss | 1 + .../src/sass/scss/04-components/_header.scss | 5 + .../sass/scss/04-components/_navigation.scss | 24 ++- .../scss/04-components/_pattern-info.scss | 36 ++-- .../src/sass/scss/04-components/_tabs.scss | 52 +++-- .../sass/scss/04-components/_viewport.scss | 30 ++- .../src/sass/scss/05-themes/_light-theme.scss | 21 +- .../sass/scss/05-themes/_sidebar-theme.scss | 4 +- .../scripts/components/pl-layout/pl-layout.js | 10 +- .../components/pl-layout/pl-layout.scss | 10 +- .../components/pl-search/pl-search.scss | 12 +- .../src/scripts/patternlab-pattern.js | 2 + 20 files changed, 256 insertions(+), 168 deletions(-) mode change 100644 => 100755 packages/uikit-workshop/src/css/prism-okaidia.css create mode 100644 packages/uikit-workshop/src/favicon.ico mode change 100644 => 100755 packages/uikit-workshop/src/html/partials/base-template.html diff --git a/package.json b/package.json index 54127ff3a..ee9904831 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,8 @@ { "devDependencies": { - "lerna": "3.2.1" + "lerna": "3.2.1", + "prettier": "^1.14.3", + "pretty-quick": "^1.8.0" }, "private": true, "scripts": { diff --git a/packages/uikit-workshop/src/css/prism-okaidia.css b/packages/uikit-workshop/src/css/prism-okaidia.css old mode 100644 new mode 100755 index eb4402550..75b13e0f4 --- a/packages/uikit-workshop/src/css/prism-okaidia.css +++ b/packages/uikit-workshop/src/css/prism-okaidia.css @@ -5,78 +5,82 @@ * @author Lea Verou */ -code[class*="language-"], -pre[class*="language-"] { - color: black; - text-shadow: 0 1px white; - font-family: Consolas, Monaco, 'Andale Mono', monospace; - direction: ltr; - text-align: left; - white-space: pre; - word-spacing: normal; - word-break: normal; - line-height: 1.5; - - -moz-tab-size: 4; - -o-tab-size: 4; - tab-size: 4; - - -webkit-hyphens: none; - -moz-hyphens: none; - -ms-hyphens: none; - hyphens: none; -} - -pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection, -code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection { - text-shadow: none; - background: #b3d4fc; -} - -pre[class*="language-"]::selection, pre[class*="language-"] ::selection, -code[class*="language-"]::selection, code[class*="language-"] ::selection { - text-shadow: none; - background: #b3d4fc; +code[class*='language-'], +pre[class*='language-'] { + color: black; + text-shadow: 0 1px white; + font-family: Consolas, Monaco, 'Andale Mono', monospace; + direction: ltr; + text-align: left; + white-space: pre; + word-spacing: normal; + word-break: normal; + line-height: 1.5; + + -moz-tab-size: 4; + -o-tab-size: 4; + tab-size: 4; + + -webkit-hyphens: none; + -moz-hyphens: none; + -ms-hyphens: none; + hyphens: none; +} + +pre[class*='language-']::-moz-selection, +pre[class*='language-'] ::-moz-selection, +code[class*='language-']::-moz-selection, +code[class*='language-'] ::-moz-selection { + text-shadow: none; + background: #b3d4fc; +} + +pre[class*='language-']::selection, +pre[class*='language-'] ::selection, +code[class*='language-']::selection, +code[class*='language-'] ::selection { + text-shadow: none; + background: #b3d4fc; } @media print { - code[class*="language-"], - pre[class*="language-"] { - text-shadow: none; - } + code[class*='language-'], + pre[class*='language-'] { + text-shadow: none; + } } /* Code blocks */ -pre[class*="language-"] { - padding: 1em; - margin: .5em 0; - overflow: auto; +pre[class*='language-'] { + padding: 1em; + margin: 0.5em 0; + overflow: auto; } -:not(pre) > code[class*="language-"], -pre[class*="language-"] { - background: #f5f2f0; +:not(pre) > code[class*='language-'], +pre[class*='language-'] { + background: #f5f2f0; } /* Inline code */ -:not(pre) > code[class*="language-"] { - padding: .1em; - border-radius: .3em; +:not(pre) > code[class*='language-'] { + padding: 0.1em; + border-radius: 0.3em; } .token.comment, .token.prolog, .token.doctype, .token.cdata { - color: slategray; + color: slategray; } .token.punctuation { - color: #999; + color: #999; } .namespace { - opacity: .7; + opacity: 0.7; } .token.property, @@ -86,7 +90,7 @@ pre[class*="language-"] { .token.constant, .token.symbol, .token.deleted { - color: #905; + color: #905; } .token.selector, @@ -95,7 +99,7 @@ pre[class*="language-"] { .token.char, .token.builtin, .token.inserted { - color: #690; + color: #690; } .token.operator, @@ -103,78 +107,77 @@ pre[class*="language-"] { .token.url, .language-css .token.string, .style .token.string { - color: #a67f59; - background: hsla(0, 0%, 100%, .5); + color: #a67f59; + background: hsla(0, 0%, 100%, 0.5); } .token.atrule, .token.attr-value, .token.keyword { - color: #07a; + color: #07a; } .token.function { - color: #DD4A68; + color: #dd4a68; } .token.regex, .token.important, .token.variable { - color: #e90; + color: #e90; } .token.important, .token.bold { - font-weight: bold; + font-weight: bold; } .token.italic { - font-style: italic; + font-style: italic; } .token.entity { - cursor: help; + cursor: help; } pre.line-numbers { - position: relative; - padding-left: 3.8em; - counter-reset: linenumber; + position: relative; + padding-left: 3.8em; + counter-reset: linenumber; } pre.line-numbers > code { - position: relative; + position: relative; } .line-numbers .line-numbers-rows { - position: absolute; - pointer-events: none; - top: 0; - font-size: 100%; - left: -3.8em; - width: 3em; /* works for line-numbers below 1000 lines */ - letter-spacing: -1px; - border-right: 1px solid #999; - - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - -} - - .line-numbers-rows > span { - pointer-events: none; - display: block; - counter-increment: linenumber; - } - - .line-numbers-rows > span:before { - content: counter(linenumber); - color: #999; - display: block; - padding-right: 0.8em; - text-align: right; - } + position: absolute; + pointer-events: none; + top: 0; + font-size: 100%; + left: -3.8em; + width: 3em; /* works for line-numbers below 1000 lines */ + letter-spacing: -1px; + border-right: 1px solid #999; + + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} + +.line-numbers-rows > span { + pointer-events: none; + display: block; + counter-increment: linenumber; +} + +.line-numbers-rows > span:before { + content: counter(linenumber); + color: #999; + display: block; + padding-right: 0.8em; + text-align: right; +} .token a { - color: inherit; -} \ No newline at end of file + color: inherit; +} diff --git a/packages/uikit-workshop/src/favicon.ico b/packages/uikit-workshop/src/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..eee4aa78fdf0366fc7278096cdafb710d2dbb49c GIT binary patch literal 32988 zcmeI4d7Ks1mB$}%=>-rF*HI_aXpBUS+qg`-L^KTIhPYsm%(%u(!Vu%QfR1R|eKe>E z5tNUK$lCp0Z*(`^(9O~W0fE6dIvAaxQHcpkR1)K^@aFrgs{5#}uB!K5Z}E@!KA-BU zy7%0(-FweD_uN|@iS&!aBO^vcxR*tSa~~CnM9RvX_aTwUb(HPDzw=%iiOd`ui439K zf{#ZcD=&*ghSLVHNClV5za+mXd<+^mFtTrHY2-k2>0RYqu`daqJ;Da^9aLN#JEx>1 zerHKZVgb)<5{cNBqN3P4#l`UtxjyFlNbi)t!hIcZmB8N(?3mKh(y#OgBYlXZq$F~1 zadF~DMMd!?$nhTXrMq$cC6S1?(f-Eb;^MFMp%{6SLe`NbC9z8S?a$qiH%wO_fVUR> z=jP2^FE&8#GvTYHmt^+U2V-IddN`*S#mb6WMBUGH39bO*1-q8$YUvEIFM z`LaZ!-^woVxP$q+lJRmM_VM!4()cNi*{{NleEv|beRw~F@^bv&zW{eP@XNU8?K^1y zOmT7KknTy^xi$P9T2vH$ArINVfd8e;lWR&!O3FH8%wB@;N8gFdq1nXsS+2D0IHKst z>=bf?z|NJ$~}?#xM0-z`kcL6tFS3gyEv@L&nFMx!`ic)Yqqusi{fbP*+zo z51H3jRaL!OU0wNRDrMa_)YjH6sIE>Z&hVTAI^Kmb9dsni|s$4U5u?7S&sKy{ml5 zlIC*{JHTe`YB6?zG-xp}d5F(%d}lgTqYr~_Z|jZcK}&zyZUsPVvo1NRBD zr_{ZjYd(f?KB>OG_5<~4E;9S+MD3)9MT_b_VO~rL;@e$L9t{~1fwlm_%tOsqAD;O_J<(_>VboU6B09vXlDb-5BuqlS1HGt49uY!+W3c zXG59uugTUKetYBI*w`TaZ#6Vj9^mD{^S(cFD#z@bKcnteH$1+hDhQVH7B{Tlv*x_U zXK%>t#o5{_I?3sNe7MV4hla`2?1C*t#+QQSk6!PB?ew^C;llk=spOyJ&%M0%#=GVi z^xkL84eP{=s{osIRgg@K|E+*3_YzUQ1h`KEV7~x1G{(n2e_wG;SN&X9bR>U}%_m~h zjtG%!*MI?uqiy-)qXJ}4Gf%bwGgxpzKl-9k@^?j!uC|eXrTDK5-2ofiz~%t{+1G|50PItFm;Zo#SKvj1JfZ4gS%8OM_)gSo0c~$w4s6 zuLom~M2PK=O(v^8?`eOZO(%*6?5p;aF#gC*{4!WJD`yiS=D(Y(lb^855|4-B#}}Vt zc*(|dPu7d3#vJr74dV~le-b1cbK~b~Oa1-9Fo{qUy(7!rN ze&o6*NH*s7V~+gf<^B5~+hFM^hz2p=MVgC$3;FF>sOs_{-m=Mt{4)i^{J$f3j>Kk% z;jgVto`L<})z|Wip7dTlAnIRU2UIPqBDk#r{T@PW(3~h$oe6?*{$@b9vZ2 zlf&GHu@JIW3eWFjgTL9AHqf^HS_g*Dee(0)LjGNTeT%&0a5MXo%6+W%gLBG4_YW9{ zv1GDxO<%>pihWscJ~w;z?2@qlN5+a^nXDX0W?u-nhl63`FGD8->qnDZ=V-0}dOHr3 z-IuLF=a=~L;VO$VzeDydV^6qX@d2@OL*!R%c$OR9@0mWC+uFLcSM8we3^}$%e)K(M z<*`_VJ@{CsxK?sf{%sHZp7D6>%@7^bdf+>~(kDZilP}t~DLlt*>{zaMVhnQV&BR%$ zS5v7u2X-Rv6jW4HL@O&R4;VJ=D^-IB4@^^RUG#5856J!w`y7Ag#R1H$5cxkN7Cgb* z#{15C=m=thH+otJlAXEr7Wg~l?F{`nbLQ;De#vd*%GWRsx6hd~J3W2+&(f17O-v6T zeyF8`L?UYGK)Ei{&V9GfrTE)RM=znVkio?`_y)YZsJYPHxDa`*yl;Jd%`5b)ZypBQ zbGqt9&*a_Zj}#*qzkKn<7pD95i=>GM(LwBN!>i{mKk%!NF_11TE%MGA4+{HLIWhX8 zQnpGw<(nH4ymG0F7i-_Bx*?UC>w69sogB*^(R<3d2hAm|&omw{yl{-h!3M4lxo@`s z%#91eAL_ZfPg1Y0}8=rgGA-R05~<3#6FLVwtSlaW8m zd8>rAb`C}4Qz;+8UT`_{`U;+JCU%}m{5Y9$auq_K!o1nrrK^cAtd9zj|51&dAbGvz8e`~r%l!HCv+m;|!XVauIh^;4%>Xv5 zK6^tYZEbD0=hOdA+_<@=r6n|$HN48-)6Y7Wnu#6!pZhH??fdT(_Ty|tOFq8Ej!BZ$ zM!sC`#0olpnMM9Mel@Wb-!VQHoZW?i&e&M2-v3y6;2rDUciC2ZZ?gJ= zeCcEFZ_Pyqf46C+qJsz!mkwmrogZP6OYQ(Csi670ZDqJz>Il#z2#EUZ%#1DFkNkn zZ919pyCe^OJ@%pNx?rBHbZl%_+3&G-oU0rIKW%-ZhuE+1h2vnp+rFj86yP9YPM<~& zVJ5!mwVu=k__l)g7vMKJ`<`aKNAcNv53zI5!6VA4!1sGzeYowPw~qH6wBuXh1p9Zf zG0ykVJ<4NWBGb2HI-`xR;`^@X6y$plxn^+9wD0nN(Oc+eeIItRlVkbPjqkqHSzpl_ z4xuux5nMg^e*y+5PEfq0IES&WGY0qItFEWN&u8!HV953O4;mw&`6TlOdtv()_dL_H zQ~n8KaUIV$3>XjzJwucWlhEV)G}{llXc$_7cL#Pm_o>jyXMNo1|G+E z{{eoyZU3tA;g!+ny&rA)7Jheo@qrIs2HtP_!21>LDIU3`7dIb@=|=lCFlE#~?3G)% zOnp9gVu!CO?)TthjS)G_4-d4@^6taK!c9#L)>=^ev&t7~Jq%y(kw5&Qw=LuI8_1S92hY5I z9hg!Bhfdt*DL!Uw4>NVTBUc%?Ulk3l!M%AH^DbVNEo-Abd9S;@p7DXxjf}cO^AeTA z+i-Xz-nZ9ItQY62-2C(n8U4K8&UJ+E2Z#^tRcp^Em8$Hpr=zp(Mh7;1`wS$yzt-?2 z9+;;c{tpGTuM}+~V=i~)q}Z=}y{V~VuAh0_Zqu-GYi}SU<1;qHMgM*5_I^fo-J!oW zpM0?4PkBMwcKC)9Iu$Nj=)Cwa_|bRRj-9a11!Zy>4Gj(Zkz4+2SRTsI^WN15=%B;5 zE%f>L-L$O!J_GqznKJ6vx@E7ct2)}`e7yLxz5C@wq2oCd9Xns^Ef@V~-1Oo9NYSzP zaPr&x7Jb@Rx$!|~w4r6+t@8;Pd(Rx%0(|D1Npc;WL#}*BIiGCudh6}ET6K?`K6d8{ zH+^DKzPpZ3bB&2lm?vfKHjJUBeDd+)Lw%+>z&XMWJ_}k8xoCYVAKH0L#QxPypM9i} z8vnWWfzA|&U(QpkmydAcibf;<f{Fwr0ipri#Nu@a(5d&CzA{3tXQ!;YafWV za+A!L&*}OO=L*WpPZ-TUvz60g%roD1@3ldDv5PPEqvIXUKP%6NpJ`gYe3@nQy?t$T zt}zGw&)9Fv_)Tp0n5L%sjSCjc|8(Ze8R@gn9&Pd9jwhf!%GEFMW}PGI;3IV=UpdD` zix%zB+?I~jFSb9j_vo?zYm>?O8Q$3&9bxu}WkWP3>IzUIhdy(*P z5Z6TTJ%zrPF+LmFlYbB&{LfyT_`(LS-;l3tZf@R)JRQbHQBmaU(6`2c;RBuA@5PzV zJN9$6=(+pLp37C+=lYy+WPV<4XzQ*%!9S(^&b8#g$0gTaf8BO_+}eIq<8#?EYtLY1 zPEmt3LW+8CNX_rc)3lezJhAAUpIeK&BlX{Y=wADnp? zDet406?~2Kug;VC?Ol9`{$*c(>a|~a6AW*#2QlN}$jLd-*m>$F=#?uM6W+|fb~wda zC?CVsojd_C^>NtriHdU-!*b1m$NL$lmvv_!nfZSuy4QY@V-GssRnEnE=0r-lD1RwC zm)dc+mBY*6b#Q$S-`8H?E_sz%=uN|_jJDL zK2|!T51%%$q9b1b%s?+*y*q1}_YFKYVTs0rAFR8Kei-N2F-sPnb>63g58z$v#TN~3 z_|hIkr=R}6#kzItGV3P;ptHxceM#*do!w>Xbcf~?mmVA3b({;@n>AzwG2bTQr|s-* z{vKbu1YbA74X1UCOSi1)Gygwufb4`r`#pDVRj~-TUYGrq50($oT1__DjuUHY@uL}e z7;pT4C)4M#$8FwYV_kCnm*I){;sDlM+l5R1#qH}%T(WZI3dO<;OdIY|aQ#*^;Q4Ld z2QqJd?&xM0`I=)5EHT7m;@c0mp{00JaR@SG_R7GO`Tj|9E_9X)KjUB7$K{70WRyf0X=;85`Ke=o9sH?KGW{@YDk=JH7f zKjY?B`ec)XUweYq5BOp5|3xnN9sOutSwGoK7ycX$Fp5K}ELMTJmYk*3>LK%CzJDDD%^@FWBCH z1oxS{<%!AXT0dkM$oP1{=CAV_PPjEbS!ZQ(7CL)+)KQ1O#aZh#am;HV(zh}R@c&jc zxUgrtZ4T#j59B=LsdVw)&0Hg&pV8~84-Za&}SuP5GZ$6h>CQ&X9VrKq30YE`?n{?d9$dTnT^8}G&; z+iGYyHgHdOeb_T{{9^g?Hft_wKCW1y^+??mcN^s|6gL?f=<5G8SKKf@&qG+7-ErJ; z$GvaX6Y4Me<}+f&BfRj~z+ud{7hE(nuQ%{MRq=p)vE~nDm+?NsiCL_5PkH%C>A7>C z+St<4RKq$cV=ufkcppUDC)D4fV=kxvjbF=@s~)*!%f9P_E3ioO5I%KwVtWX!m%v}q zot*xlK@pulAzn^=Pxge19C7SB(iO~Qat=X^Doz^0RmPQPoTS+CyU?AFKH2+ITpD`} z+82Q;!4>!;Huxbr*+E-N&qnulUnJBAzu_9~hd})us5I#NDu zHSfDvnt)~;Qko`{fUvb+K%mev0Smhs1pOY53P%EmH;ZFPANF^Dm#% z-o8>Xh5A*$OJu8|%i1;ZAC4?PRs}i4BeB8nDu$3B6W@{@yc^rwXP1y8ID68hNzd)S z|GxZBh{%b~_jQVWKQcBRI)~5)vvhWy{@aM%y^Fkb$>zWsMK$ z6SG_TYA05V}^Mcwqdp^bE{Z;_4c@g%DgJU!}?j?p_0M4i2 z?UpdP!jKi}3K}SAprC<*1_~M|XrQ2hf(8m2C}^Odfr17K8YpO>pn-x03K}SAprC<* n1_~M|XrQ2hf(8m2C}^Odfr17K8YpO>pn-x03L5zGY2g0>D_A%) literal 0 HcmV?d00001 diff --git a/packages/uikit-workshop/src/html/index.html b/packages/uikit-workshop/src/html/index.html index b3289639b..2cca126e5 100644 --- a/packages/uikit-workshop/src/html/index.html +++ b/packages/uikit-workshop/src/html/index.html @@ -1,12 +1,11 @@ - + Pattern Lab - + - diff --git a/packages/uikit-workshop/src/html/partials/base-template.html b/packages/uikit-workshop/src/html/partials/base-template.html old mode 100644 new mode 100755 diff --git a/packages/uikit-workshop/src/html/partials/modal.html b/packages/uikit-workshop/src/html/partials/modal.html index 1832a2f6a..158ebf88d 100644 --- a/packages/uikit-workshop/src/html/partials/modal.html +++ b/packages/uikit-workshop/src/html/partials/modal.html @@ -2,6 +2,8 @@
+
+
+
-
diff --git a/packages/uikit-workshop/src/sass/scss/01-abstracts/_mixins.scss b/packages/uikit-workshop/src/sass/scss/01-abstracts/_mixins.scss index 56bab34df..c06101c06 100644 --- a/packages/uikit-workshop/src/sass/scss/01-abstracts/_mixins.scss +++ b/packages/uikit-workshop/src/sass/scss/01-abstracts/_mixins.scss @@ -101,9 +101,8 @@ */ &.pl-is-active { max-height: calc(100vh - #{$offset-top} - 1rem); - max-height: var( - calc(--pl-viewport-height - 1rem), - calc(100vh - #{$offset-top} - 1rem) + max-height: calc( + var(--pl-viewport-height, calc(100vh - #{$offset-top})) - 1rem ); /* [1] */ overflow: auto; -webkit-overflow-scrolling: touch; diff --git a/packages/uikit-workshop/src/sass/scss/02-base/_body.scss b/packages/uikit-workshop/src/sass/scss/02-base/_body.scss index 313929a72..90bc557f0 100644 --- a/packages/uikit-workshop/src/sass/scss/02-base/_body.scss +++ b/packages/uikit-workshop/src/sass/scss/02-base/_body.scss @@ -7,11 +7,13 @@ * 1) These exist indepenedent of any project-specific styles * 2) Styled as IDs to avoid collisions with user tag */ +.pl-c-html { + min-height: 100%; +} + .pl-c-body { margin: 0; padding: 0; -webkit-text-size-adjust: 100%; - display: flex; - flex-direction: column; - height: 100vh; + display: flex; // Required for IE 11 to display overall PL layout correctly } diff --git a/packages/uikit-workshop/src/sass/scss/03-vendor/_prism.scss b/packages/uikit-workshop/src/sass/scss/03-vendor/_prism.scss index faff9d862..6ab0ba455 100644 --- a/packages/uikit-workshop/src/sass/scss/03-vendor/_prism.scss +++ b/packages/uikit-workshop/src/sass/scss/03-vendor/_prism.scss @@ -16,6 +16,7 @@ pre[class*='language-'] { word-spacing: normal; word-break: normal; line-height: 1.5; + word-wrap: normal; // fixes issue in Safari where code blocks can't scroll due to the code breaking into multiple lines unexpectedly -moz-tab-size: 4; -o-tab-size: 4; diff --git a/packages/uikit-workshop/src/sass/scss/04-components/_header.scss b/packages/uikit-workshop/src/sass/scss/04-components/_header.scss index 6fdfb119f..529a049a6 100644 --- a/packages/uikit-workshop/src/sass/scss/04-components/_header.scss +++ b/packages/uikit-workshop/src/sass/scss/04-components/_header.scss @@ -20,6 +20,11 @@ color: $pl-color-gray-50; font-family: $pl-font; font-size: $pl-font-size-sm; + + @supports (padding: max(0px)) { + padding-left: env(safe-area-inset-left); + padding-right: env(safe-area-inset-right); + } } /** diff --git a/packages/uikit-workshop/src/sass/scss/04-components/_navigation.scss b/packages/uikit-workshop/src/sass/scss/04-components/_navigation.scss index 76357fcef..bed2643c5 100644 --- a/packages/uikit-workshop/src/sass/scss/04-components/_navigation.scss +++ b/packages/uikit-workshop/src/sass/scss/04-components/_navigation.scss @@ -9,8 +9,9 @@ */ .pl-c-nav { @include accordionPanel; - background-color: inherit; + background-color: inherit; // allows the nav's children inherit from the parent header position: absolute; + left: 0; // IE 11 layout broken top: 100%; width: 100%; display: flex; @@ -37,7 +38,9 @@ } .pl-c-body--theme-sidebar & { - box-shadow: none; + @media all and (min-width: $pl-bp-med) { + box-shadow: none; + } } // if nav was opened on smaller screen and screen is resized, it'll be cut off otherwise @@ -69,6 +72,7 @@ list-style: none; flex-shrink: 0; // helps prevent top-level nav items from occasionally wrapping to multiple lines order: 2; + background-color: inherit; // allows the nav's children inherit from the parent header @media all and (min-width: $pl-bp-med) { display: flex; /* 2 */ @@ -85,11 +89,17 @@ * Nav list item */ .pl-c-nav__item { + background-color: inherit; // allows the nav's children inherit from the parent header + transform: translateZ(0); // helps with more consistent rendering in Safari cursor: pointer; position: relative; display: flex; flex-direction: column; justify-content: center; // vertically align nav items + + .pl-c-body--theme-sidebar & { + display: block; + } } /** @@ -107,9 +117,15 @@ * Nav link */ .pl-c-nav__link { + @include linkStyle; display: flex; align-items: center; - @include linkStyle(); + margin: 0; // remove default button margin in Safari + + // makes link layout / size more consistent in the sidebar layout, especially when display: flex styles are removed for more consistent IE 11 rendering + .pl-c-body--theme-sidebar & { + width: 100%; + } } /** @@ -126,6 +142,7 @@ * Nav link */ .pl-c-nav__link--dropdown { + -webkit-appearance: none; // remove default button styling flex-grow: 1; // fill up extra space in parent nav item, if available /** * Dropdown caret after accordion handle @@ -171,6 +188,7 @@ * hang over the header */ .pl-c-nav__sublist { + background-color: inherit; // allows the nav's children inherit from the parent header @include listReset(); @media all and (min-width: $pl-bp-med) { diff --git a/packages/uikit-workshop/src/sass/scss/04-components/_pattern-info.scss b/packages/uikit-workshop/src/sass/scss/04-components/_pattern-info.scss index 644122d2d..75a9901c2 100644 --- a/packages/uikit-workshop/src/sass/scss/04-components/_pattern-info.scss +++ b/packages/uikit-workshop/src/sass/scss/04-components/_pattern-info.scss @@ -8,6 +8,8 @@ * code, annotations, and more. */ .pl-c-pattern-info { + flex-grow: 1; // fills space available when placed in the parent flex container + @media all and (min-width: $pl-bp-large) { display: flex; } @@ -17,8 +19,11 @@ */ .pl-c-pattern & { max-height: 20rem; + min-height: 18rem; overflow: scroll; @include hideScrollBar(); + display: flex; + -webkit-overflow-scrolling: touch; @media all and (min-width: $pl-bp-large) { max-height: none; @@ -30,14 +35,20 @@ /** * Pattern info inside modal */ - .pl-c-modal & { + .pl-c-drawer & { position: absolute; top: 0; - right: 0; + right: 0.8rem; bottom: 0; left: 0; overflow: scroll; @include hideScrollBar(); + -webkit-overflow-scrolling: touch; + flex-grow: 1; + + @supports (padding: env(safe-area-inset-right)) { + right: calc(env(safe-area-inset-right) + 0.8rem); + } @media all and (min-width: $pl-bp-large) { position: static; @@ -53,10 +64,7 @@ */ .pl-c-pattern-info__panel { padding: 1rem; - - @media all and (min-width: $pl-bp-med) { - padding-right: 2.3rem; - } + width: 100%; @media all and (min-width: $pl-bp-large) { flex: auto; @@ -64,15 +72,14 @@ top: 0; bottom: 0; left: 0; - right: 1.3rem; - padding-right: 0; + right: 0; } - .pl-c-modal & { - @media all and (min-width: $pl-bp-xl) { - right: 0; - padding-left: 2rem; - padding-right: 2.5rem; + .pl-c-drawer & { + padding-right: 1.3rem; + + @supports (padding: env(safe-area-inset-right)) { + padding-right: calc(env(safe-area-inset-right) + 1.3rem); } } } @@ -87,8 +94,9 @@ @media all and (min-width: $pl-bp-large) { left: 0; right: 50%; - overflow: scroll; + overflow: auto; @include hideScrollBar(); + -webkit-overflow-scrolling: touch; } @media all and (min-width: $pl-bp-xl) { diff --git a/packages/uikit-workshop/src/sass/scss/04-components/_tabs.scss b/packages/uikit-workshop/src/sass/scss/04-components/_tabs.scss index bf0c4ddee..fe943fbe2 100644 --- a/packages/uikit-workshop/src/sass/scss/04-components/_tabs.scss +++ b/packages/uikit-workshop/src/sass/scss/04-components/_tabs.scss @@ -17,23 +17,44 @@ display: flex; flex-direction: column; overflow: hidden; + flex-grow: 1; /** * Tabs inside a code panel */ + .pl-c-pattern-info__panel--code & { - @media all and (min-width: $pl-bp-large) { - position: absolute; - top: 1rem; - bottom: 1rem; - left: 1rem; - right: 1rem; - } + // @media all and (min-width: $pl-bp-large) { + position: absolute; + top: 1rem; + bottom: 1rem; + left: 1rem; + right: 1rem; + // } } - .pl-c-modal & { + .pl-c-drawer & { + // adjusts the absolutely positioned tabs container when nested inside the PL drawer + // @todo: refactor to eliminate the need for this + @media all and (min-width: $pl-bp-med) { + right: 1.5rem; + + @supports (padding: unquote('max(0px, env(safe-area-inset-right))')) { + right: unquote('max(1.5rem, env(safe-area-inset-right))'); + } + } + + @media all and (min-width: 848px) { + right: 2.3rem; + + @supports (padding: unquote('max(0px, env(safe-area-inset-right))')) { + right: unquote( + 'max(2.3rem, calc(env(safe-area-inset-right) + 1.4rem))' + ); + } + } + @media all and (min-width: $pl-bp-xl) { - right: 2.5rem; left: 2rem; } } @@ -89,16 +110,17 @@ * 1) Tab content contains the tab panels */ .pl-c-tabs__content { - flex: 1 0 auto; - overflow: scroll; - @include hideScrollBar(); + flex-grow: 1; + flex-shrink: 1; + flex-basis: 0; + overflow: hidden; + -webkit-overflow-scrolling: touch; height: 100%; - padding-top: 0.5rem; /** * Tab content inside modal */ - .pl-c-modal & { + .pl-c-drawer & { border: 0; } } @@ -111,9 +133,11 @@ .pl-c-tabs__panel { display: none; min-height: 12rem; + height: 100%; &.pl-is-active-tab { display: block; + display: flex; } /** diff --git a/packages/uikit-workshop/src/sass/scss/04-components/_viewport.scss b/packages/uikit-workshop/src/sass/scss/04-components/_viewport.scss index 2c62e4084..7a9480a51 100644 --- a/packages/uikit-workshop/src/sass/scss/04-components/_viewport.scss +++ b/packages/uikit-workshop/src/sass/scss/04-components/_viewport.scss @@ -15,8 +15,6 @@ .pl-c-viewport { display: flex; flex-direction: column; - flex-direction: column; - height: auto; width: 100%; position: relative; top: $offset-top; @@ -24,7 +22,6 @@ left: 0; right: 0; z-index: 0; - overflow: hidden; flex-grow: 1; transition: height 0.3s ease; @@ -60,19 +57,25 @@ * iframe and the manual resize handle */ .pl-c-viewport__iframe-wrapper { - height: 100%; + display: flex; + flex-direction: column; + max-width: 100vw; width: 100%; // bug fix for Safari and Firefox getting stuck calculating a width of 0px when the JS first kicks in position: relative; margin: 0 auto; flex: 1; -webkit-overflow-scrolling: touch; - overflow-y: auto; - overflow-x: hidden; &.hay-mode { transition: all 40s linear; } width: 100%; // bug fix for Safari and Firefox getting stuck calculating a width of 0px when the JS first kicks in + + .pl-c-body--theme-sidebar & { + @media all and (min-width: $pl-bp-med) { + max-width: calc(100vw - #{$pl-sidebar-width}); + } + } } /** @@ -80,8 +83,8 @@ * 1) this is the actual