From 5a8a7d22cef8e654c99162038defa12a0c62752f Mon Sep 17 00:00:00 2001 From: TJ Egan Date: Fri, 25 Aug 2023 12:23:10 -0400 Subject: [PATCH 1/9] refactor(styles): update styles to use CSS logical properties --- ...ogical-npm-2.1.0-3c4853dd7e-d8e0d2aea6.zip | Bin 0 -> 19967 bytes config/stylelint-config-carbon/package.json | 3 +- .../stylelint-config-carbon/plugins/scss.js | 5 +- .../scss/components/accordion/_accordion.scss | 70 ++++--- .../aspect-ratio/_aspect-ratio.scss | 10 +- .../components/breadcrumb/_breadcrumb.scss | 40 ++-- .../scss/components/button/_button.scss | 16 +- .../scss/components/button/_mixins.scss | 16 +- .../scss/components/checkbox/_checkbox.scss | 46 ++-- .../code-snippet/_code-snippet.scss | 88 ++++---- .../scss/components/code-snippet/_mixins.scss | 2 +- .../combo-button/_combo-button.scss | 2 +- .../contained-list/_contained-list.scss | 38 ++-- .../content-switcher/_content-switcher.scss | 42 ++-- .../components/data-table/_data-table.scss | 198 +++++++++--------- .../data-table/action/_data-table-action.scss | 146 ++++++------- .../expandable/_data-table-expandable.scss | 84 ++++---- .../skeleton/_data-table-skeleton.scss | 14 +- .../data-table/sort/_data-table-sort.scss | 60 +++--- .../components/date-picker/_date-picker.scss | 34 +-- .../components/date-picker/_flatpickr.scss | 76 +++---- .../scss/components/dropdown/_dropdown.scss | 50 ++--- .../file-uploader/_file-uploader.scss | 40 ++-- .../fluid-combo-box/_fluid-combo-box.scss | 6 +- .../fluid-date-picker/_fluid-date-picker.scss | 92 ++++---- .../fluid-list-box/_fluid-list-box.scss | 60 +++--- .../fluid-multiselect/_fluid-multiselect.scss | 2 +- .../_fluid-number-input.scss | 56 ++--- .../fluid-search/_fluid-search.scss | 32 +-- .../fluid-select/_fluid-select.scss | 30 +-- .../fluid-text-area/_fluid-text-area.scss | 34 +-- .../fluid-text-input/_fluid-text-input.scss | 48 ++--- .../fluid-time-picker/_fluid-time-picker.scss | 36 ++-- .../styles/scss/components/form/_form.scss | 14 +- .../inline-loading/_inline-loading.scss | 16 +- .../styles/scss/components/link/_link.scss | 2 +- .../scss/components/list-box/_list-box.scss | 102 ++++----- .../styles/scss/components/list/_list.scss | 12 +- .../scss/components/loading/_loading.scss | 16 +- .../styles/scss/components/menu/_menu.scss | 10 +- .../styles/scss/components/modal/_modal.scss | 100 ++++----- .../components/multiselect/_multiselect.scss | 16 +- .../_actionable-notification.scss | 42 ++-- .../notification/_inline-notification.scss | 28 +-- .../scss/components/notification/_mixins.scss | 6 +- .../notification/_toast-notification.scss | 22 +- .../number-input/_number-input.scss | 80 +++---- .../overflow-menu/_overflow-menu.scss | 88 ++++---- .../components/pagination-nav/_mixins.scss | 12 +- .../pagination-nav/_pagination-nav.scss | 18 +- .../components/pagination/_pagination.scss | 58 ++--- .../pagination/_unstable_pagination.scss | 42 ++-- .../scss/components/popover/_popover.scss | 106 +++++----- .../progress-bar/_progress-bar.scss | 14 +- .../_progress-indicator.scss | 52 ++--- .../radio-button/_radio-button.scss | 26 +-- .../scss/components/search/_search.scss | 64 +++--- .../scss/components/select/_select.scss | 36 ++-- .../skeleton-styles/_skeleton-styles.scss | 14 +- .../scss/components/slider/_slider.scss | 44 ++-- .../components/structured-list/_mixins.scss | 8 +- .../structured-list/_structured-list.scss | 24 +-- .../styles/scss/components/tabs/_tabs.scss | 86 ++++---- packages/styles/scss/components/tag/_tag.scss | 28 +-- .../scss/components/text-area/_text-area.scss | 24 +-- .../components/text-input/_text-input.scss | 58 ++--- .../styles/scss/components/tile/_tile.scss | 18 +- .../components/time-picker/_time-picker.scss | 20 +- .../scss/components/toggle/_toggle.scss | 42 ++-- .../scss/components/toggletip/_toggletip.scss | 2 +- .../scss/components/tooltip/_tooltip.scss | 2 +- .../scss/components/treeview/_treeview.scss | 44 ++-- .../components/ui-shell/content/_content.scss | 4 +- .../ui-shell/header-panel/_header-panel.scss | 12 +- .../components/ui-shell/header/_header.scss | 86 ++++---- .../ui-shell/side-nav/_side-nav.scss | 120 +++++------ .../ui-shell/switcher/_switcher.scss | 10 +- yarn.lock | 10 + 78 files changed, 1565 insertions(+), 1549 deletions(-) create mode 100644 .yarn/cache/stylelint-use-logical-npm-2.1.0-3c4853dd7e-d8e0d2aea6.zip diff --git a/.yarn/cache/stylelint-use-logical-npm-2.1.0-3c4853dd7e-d8e0d2aea6.zip b/.yarn/cache/stylelint-use-logical-npm-2.1.0-3c4853dd7e-d8e0d2aea6.zip new file mode 100644 index 0000000000000000000000000000000000000000..8fe63d138cab7009affad3bffc4e4833019668c4 GIT binary patch literal 19967 zcmeIaV~{Ohw(ecFxy#sP+qP}nwr$(CtzEWl+qP@h-QDN(>G%BKI1zn5+z&UR=ZaXF zD}X7FWov3~sBiV30zd!|f4`QPXEJ*@BmlrKVgLZDe@(#L#>m)> z#?ZoXN<%Vng9V94vIpqGIao=!V0k->Dcza<4qG8vT)~B%oh%V1G>B*wr5s?E%cbhO zdkfYNgkQm7Sw@+Lrhe}0spIZe$a5%tUcrci11r|I(|v?7`_PM6;&)<|i`IE)+RhC{ z`BIW_&-e6_aq_|AZM3RSEe2BBwegA<+l3{E4$gqL(Yi?1D1 zfk^5aUcoVb8AonSMv`b}7T^jpqE3qD+SYfe%1)rX!sTpVO$-}KHNxzT1HE%Ab1CrF)K6GD|bQJ-=vRQ{VX-pHW3t_H)|&_ zkcJG5>OZFq>+hJ^6!HpqBeL_J%&;MHY8y*HB|?F=U@L1|v2?Juv_|PV_2o>JHgX_= z`*Qj1S+zvm1sWu09hSuT!z_sbjQw`@To;zd6h@Ab)vY&ttW$G%TsqmbTp6(_F2Xod zJ%WL2Kj%-;1V(BTi;>-qmqWBIRb@w7;rMp7@VDJqa~nD1FQ$^L*_JDu{mg1oqD1a= zuT9|uj_9qs>cFGUydx2LJ}{zv28;{WmCqQhGaJq;tmyk)d&OdQlo(DLZ16tKkgR$_ zJ*KEU&aCfR8!b~q5-l;n9Izt5%dMfooj2T=Cn^dO1iP6lwfWbLz(FsTYVuN_ar-=) zX-fi^1AGNrG{y)VVRtL7RVdgQ+vtJGjns z4|}a2#t9b81E@MFyJyUq4{RL&Y^~ZY_u@cT%&cF#i-dr?vRB@MLn;9+) zyfgj1QBkJwwbEzlQ)_BYuzUoGGt!4sfzI5v5XQCi$*kqzgXj?m&K-PWrmpNU?()iR zT$vEF6x+n@uSe5VHr_;ryQ;0xX=gsZ(eJ+d7fL6hS@VR+9#AA17O640j~`q3X3}@{L<(0F&9Sej*$@QJYMN z7wM}mkdU3%6j4INEL)v!^+beVb6W#bV|PNMls+9>B;(G4Ngy_1OUF8l!`h0e4jd^# z>&95zQmojs*xzAVvrQR;R6HP!$j47;{tBKpAF1I*uzjc@mZ8{58Px*LbxU2ox}KD9 zqV-6k*fQp>s%18m5d`8H>reoxY9dae+NM{ifKVTwnQ~<_EF+tX@N52V$)P1 zc+^d*Sl=xw$=CtEP0P+JimsZ$Q{>16ym&_a^C&gsH}iwC2G<53m<@SA`*)~ZZO|aO z0f+T|2Eh0-0?bXA7bz6GEoa|SBbFpx{q`-;z0%ldYHZS$@YKbJ4)l{nyu>m_<})EjSlUQW(_OqtM=8cJLClLaeHQ!3woeJN88LR9Q4rS0EkM1(#UZ$ zg~*^GKo*7Ze@pVl~ggSMWBdHm>>}1L=3&HM03M;kS(Uk1#}}ABB*@Rk~g@cx|V$SZv?kA{5%ZT}C{EeLUSz&Q!${kaUbszR9b;yGy>SOL~ZTseSaU-vjbV^F(p>z%hHp zMG;X}B=`>Glell{DWbQ0X{k|O68L+2Pv;D@wGO(XUK$`qlF+@?YNK;`!>GcqGz;fU z@N*FFsI+c6l1o{I<|pq1-sK+wAAn-7ZoYx2>1=#)nbkqY#K#fSRi}=$UPFW(+&XYI zc@FZUm0lChqcw>lu{E5|rZ(zN&lWc#=S^QH#t{@&PX`h&qSDhj<$mW1rv6?b&H0QT zzCOXo-dQtr3%j1bCH#??(hYIN$?n6eZ}bRjkzv-=*p8u3>p^_+G?cpmysFIT|2yLC z!CiE8r}_Kar~}t_StT^Xure;US`?@5EM3Fl(D>9?eJ9T#*Bf)Q=F;jk zQS?nL__d+CVeim&>M0g}E2xEuiNxDL3O;UVLTO;B zN2~A`OSQ=K4KA;@^ttE4aW?MG1NaNRz)pBgckOlCCyVkXXW$Yz-6480ed{;ZIWA6W z3@@ATbBd%PK%;3#om@y|-Y<$@nR9cSKM(AtM|6(ipCb3t-HR=Ddb>X8epuJYrt!Q$ z@5m0e2XPbhgM-I*O3W3qRBxgWsps`=PJ;C*YQXi~-B@AfO&fyc{drgieUwx{<)mES z^>aHBrR9JTRrMWLT#qB)SR9zu^=?>i;2}=mH!^n^Ku_c?84dFaYx{Iux_%LT;mA ztkacWbD1l%r>j(K7e1m&#?_Lw1idZT{Nc`$GxI&B)SQZOXwnJ{z0>{scNR$EWwu1i znawBff5e3U2jd20al%i8EWD5X+n-k6X-}aozKl%)$+OneqTLYm`-9B z2)zncosQp6sb-@Aqh8tk(esa&Dk4zuBL&pTC39tlx?NA}pP#~%$DSpls(eEi9bIRr z8F(I7;3Pyx9&J-X&?20B&0E3@uG5y(+FufpUAVn^d-UBe+ijKY*FiUe$i^2d#M^3m z)H3ws%=wPrMGDX-b`0vESQ3h;6~WX;u0N|b@b`9qh=5x~xA2ho2q6P%@XR3yK8j#g zp9~(VvM(Dj2t}pfHDPE2%8&1V+DVeq%$wxnYBLvN_$Hko zLuj^^6aR)fh>0D8xu5J!3Z#z*qqzoP51&_HdJ>=R!?*$b7A|cH9^b7%j<8I!cKU<@ zGGRUhX_U;0bMVUJ$k$`oyBoE&O}RNG*J(pq4*=vM84`}co0}>%jiE~N3{yyb{50@& zgx0xZnt(c^KkV$peFK=~h9Rs^eT>S9uHm}lKDg&2zakz6RnTd#utz(2=!Wt8@`Pqw z+Q4eiO0aD3;!W2%C$1eTdZ-qycZ#d;Lh^?10Jq*4vt}o9ldp;glr_M_l{5g04XiosSnCm&xHYdU|prG#t5m0)Yal*!O`K-=@I_!X26SJR^vaQEs1(>}dZXIF`P6>-Js^iAPEDuID)Klup#HN!1 z9a0Uh_tFmgv7{jjI`J!1wV(s`@v6>A$Lbl4r}9qTS$HeT*-1|_PB_NSzmT07SgJX{ z%BmQDE0mZvwj*yng5pn*LXfyJVdD$4j^3Xyv0CPumWI2Xx}vkC?`U`@qV{f7G_(~EU;|=qGfp%O zf+Y>c0Qik~;=Ip3Qd(`tRtyGnh-g=S(&u;E`kF;?r((U`@x1uU{o-TG^b~Qn9dyq7 z>2mfCm^g2@y6>pG%r(>5>3}k?NHoAq9D>cl##%V_tSINH5CfUOn#o@o$0Wi2J?Gc< zVM$}}amr7wS)(Jr`xO#7^3Whf6FB;ozT+Pb1jBG-zAt>mI5LqA{SuUOgOu$$U92a? zn=RNkdU8FLQzosHej>GsK!ayA?Re{D+sAFA5e?$vo3QyRPs+oX@>4btOHiQz6>G3q zZSp2HW{rbTt>R|>8)Oar)(INB>kKCsY#I{lr#8CrDhBu-jP$aNDh7FyjPx_yQ+umb zMzgBaL71p895ummg$@L?NDhQffoPP8;_X$~73;VAsy3k@O7YD!^5s^X;-X@U9r8l_ zj^2QpkWdP^zgm1wofD|jR}iefEVJs1I$M*UkCyysJ)YUu`UW7+4R?YU12pUk5TNp~ zs*jg@O4Q>Qd%z1bs?Vi;$~h)%Ph2RmifF4RZZu=upRTSzdm6jMFVf98Dd(ug zgWaw~7qBzFEuBFe7R5ClpbZm@RpZ;ngx%@&QEw2>)tPdN*NTkdkj|78Fh{>;cp`7D zPi|V-q`x2!;yLi*U1^ygBA4(NLz~WB2Z$tBdLz}Pw z)AUaIk-mu^p0G5*0FK}6y}*bK;%$u^Il^=U2L{|Hn%LC=$GDfRE(Xxt-Efzs#O|>h z@F!Ic_*`WKAPT{_KbUP_p2M)80Dt&7O%#*N8AE^HMtcHa9l{0BxNgS8mh<6KnTFc+ zbBRD zI*EtO{(VzIB^sJ3?IiGp9v*4v)g&@og&q6Fk z_(zC20&Jd8Eh5+j6|1bbLeMhsxEd6Txq!gII{m=_Dy?~FVq`ljhW+9ngz4HMwrcm+ z;tg^9n_9cW#0T@dGbyI#Hpwm5Sxb!pBhvL{Z|al`39bNcyA?cPSVq3gCeZQG_d(dV z+4c&qx!F06p)Q~vw!Hu(?^mpF_ycmHvYl0t<`nZJ$-v9X)hVylJ(X)3WV04`Awi;q zH$p}r?44`?f#*ey?hVe~7+K}_- zkX2o1dRmwsT4s-?^EBFHg?RCaz%rZmT~ZA=Lq)Zz=)%gyrCcl7RH_M<&!0vzrHaEH z85+MTN2H^6JMG9u**c_ZC}4#q_+p)y88UR(Pcq7m3xE^7{auUfFWgN@2hfobc>cehk%b%CXRs-tL zP#|_MPmm+~yDj>e+t!$C8xX4J1YXLRh;@|mKYDMMO?*SPHKZ@ z0b_YrM(E8n!zToj1w=@mp3(hOnVo1krYURuk?rOnK1Q@t_(5vdQrUWy=$ExC-OZ_n z@{UjdfYt{N*Y}|xU>Ro>e;-Lwz@rYoJFNSdV&ml=_5glRHM$me7o@l4MNFZfR3O1ZOQY7yz%+~rm|fNp zyh*Lcia7C_EzmlMeIIP$BW8RWo*~8`Hpu@&a}|vclMq2k8r&>(P!NyymLIAj|6s~q zI(efDC-A(zg9N#Hb)5z>X^QP-z zl--MK*`g~?0*`q*G>)mMB~Q=mF^ykwfEJEc^$=1 z0m51m^S5xxa1vU_cg=H{i7|T{n^kSBN?Ds7g4pepwz6X}-R?!Q4M!!($2BGoewyg` zBT5vTi%&ZHwCfO$`fs7xvX%~Ny~Cqe5vj51w)^p~{IvKQk8#68afMh@a~~2WMgE`l zSDh_|K){vMm{pzwoG!&9*|$7pk+~6)D%ZrQ(2q+cg=lW(G|px{>8J37qL{U3Jaf3& zWClg+uO)3-KTmH}YH0T?Lo)b&8HUXPIN}}cI;+C=Oxayyl7=pevCv)Z4ac>5A_~8Y zM`qwz(v`TG=OAHh_hqO{WcZSrNOX?)RB`qCx3)rqBV@Nsl zFe(N20!9QxL(KqZ^O!I1HSg;syN#C$7@f<*pjcZJ2O_Xf5DWKUCtnQVlLK=xR z(^!;{`!$&LRn$X3GQa;ldq3jdpk^2IX>Ex9+u-+#FVcwY;fy{u-hFeIxo_mby7P{g-1TwG1~^_lYgyVZOpZEJ2q%;3Lps}0Fg zVIVl67=(>BT6o?)W2qT_?rQ{r9Dm6-(()PKf_`$v9E`NGgZLb04SAV?^Z1k6NV0oH z+(yf|qy@mLOjlCNZRQZM}1Z@!(S9qcPZnmb|{?|v3pVst{34Ld#UVk~l^*{$C z350+itYE;^^}U8`o(R;r6hBb^MW1IJfd$?K04#5rxEU-ltLp?eWeXrCDXhk}6`48# zzLTwp=yK?!n~L(LbF2+?FEFPHW8~V z1!ZgsB zba-zu&o=p0sQUq+)PVzX+{{pPJ0Aooa#+4B*

1@DY}E;nXKD*yo&((u%xnlOJw zTMZW`C5J2%qbxAnp#xs5GJ|&z3)wTR;%Y=fAXCVYK~7!B!7_9!I%9j!^0^R}hrr0b zLq*ruN$@+0oCDTo2v*_)?=4Y_2Xb#hFR#m`6D}zs!Y0#8Vd4~(qJuYS1ByK+%gZUx z>Tb>>lKmiJp|%88_I|Y9@RL&$>lG-hdu{iJ!7ycwBZHtYY~TZ<=I)%+&(|Bl#CT=NTQ_0_oRa(UGCQmK>244lY|URv zwI~6^MVxhIok2KtLa zX_jKmt*HY;M$>*}G6K(vGM0(u?ocNDLC~v#vuO5&`Tj{%@^&e9nE+;SvU!{XyGjsb z(2=JgS+JayeKH>1o*4|hMqhh`nW=Jz&k9E(zV1cXbRQm9+5cB@JFehtf@k_bg;EVz zFTAO8g~ZmdgedB>9o}FBx=5QsYkm6&F9lz3K5UH=3-=WAR8;#@@<|;sUwczYWN4axjwdM{q7b= z@Fjse0aLJ=;B%_$0=s-|lnEGl-?;v=LP|TIdyJk}nrWtV-ejt$b$CKqE6lmV`neF`d+*lsxrvH9&tAS3sB{dG|pMdJ9a`x_-*9*!I7Dc)Dd z<7?3)^kcV!L9Z^UiIqtvy|Mu(=7Q_`oAy=1{NhRU&G@A>wseKcOTywcYmOx?OwPpT z{TlNJ2Ou&Rh`b~ph@_vD_3E{QHP3Z|uR=$T+Ajuhzf!@NX$QxWnb-1GG!taEPYe38 zJ$O;0IR4-DT0Z~nwfx&_`M1~dZ?EOwUdz9|mVbLK|Mpt`?X~>B?zOnG9{YZg+J6fD z#vZ;S(A~&uaW8r~P6|L`IkW$Y!37C)lvCulAw5e_5g^b_iu*En zAoj_XxFL>BDl!==I0lN5H%PWWWBoz=o^Y8xo$^ z+$?KO06NHtHGH=gHy@mvYX3Per-?0Q;W>^CPT<&E*`Qe{J&RN$2XxavAP9}rfq@FL z4P_LO87->h7}9ag!sgEq`x&sCvQhs>fIDjlrv?5e1o zB^Zp|B4X*NwxYzuRa74EOn5X#ZmGGAct;Ym!(^JM3w8q~+pr|$t%jL^QndNHXd7tT zGXK3`JN4Mel+3Gp8%#^}Gxj$G%ml~%Ndm1F;qbX@pBY?jM+Y8%+&J*`t^ZN}*S9=N zG$M|HJ_}IS0qq z%|-*PJp1{)qp6StR3L#D6Q?2=7}KS!^vu@I`pmKtw>n7_e5E~9W7sP~W9sj>d}5&U zRhj^ink8mf`6$c5Ve)21_kR9h!Q|Gqbv|CT$9%6JPz<4)P(PP_8a4rYr`3#Eh-iw| z+l!3(EDnK@Ga~oIOrkpn!-@rS((8nzC)asq&H+U8@cBBAD+INj8m zuh9|!N`4jYT>6z6^B+6`*Tzrd7%dUPi~0!deDJ$&)8zf(xm|8jZ7e0S*tyV<3Sxnw=lO!a;*_sfzcv1+I{GL7s(K znh8yr=13q_QCmfG8W*T0>Q(Gt+b$uW_re9rX^#tSCzpeF3r=!vO95Zbmx|zm!mOAX z4zV~7UDNN^c!ry14eu#@8oc0Lo_lQRw&#{s{g}!y;0j`bO=criYxI6Wd-yDL0&_v= zxkZ6M?_~1uhL6{fRD!Qgh!*Y0+-pL0ovM26Yq=LQM3%iyV&feo?GS|W*7>RH+XSNf zWrowwH>FisHPFW)#K(2=Q-eLpBXI!R9Z}WLZWnXeSxd0-9d>Xz9|h7=*NNo!t~_d* zX2k_P2=%X2_9}@Z3xH2MmEwv;>nbNDefSstDmVQgN@uLfNP^z5k(FLql9cIk^c43w zT{^CM4>m)jyWg^J5j>yH3*{1oD_NRiP5Chh+a8(9H=(?I5@r1j>%W>yd1CvTM zhMVtn@TfRZhIq%8oUU@zD6~!{yBcNF`!rDK>%#Su2v6YTQ5=x*z~$>CAtEWl@!0Pm z>E=lQ}BQ6b$sK+)qE_8NKiQ`owmCPEKcM#w~bdD6Z%(h~KziEo!U72j{CimJZS z?$6$J6$gny;Bw67vw=)HKk%KiT#T5tE#(g|w351Eva z)~LT_o(>8hwiiDGc}=fq*Q;N<9^gca-(UCd-dU{M~5ep zH;>aOWNeivP8HWPn$uoqu+WnF8H55zoQ3kSH(+KyNnBdMa|X#O@vJ!09>;l_%RLBW zX{jf|dUO%L9Y)h&ZkC6l8Aae=I`5qjckVCDhesF94cee%j>!86Q@og=W5cizmhob* z;u_SAU9fhx7)AaZe%_|`KOEVvVvieKSde=K8Ra5wqdDHseVZ{P!(= zlD$z9a)$T-G72#cX{BHWQMJIB3dw6SJKa)aLb}#3h%*e?kwMdBz3d<-8(^wl_sY}OVjUaYCs50eE(C|4nhZpcYkEv<$ z0gxi>gYdALW*AwXOl&bu7|Xn40VeR4>L$EYRD=#JNyNunI<4u?I5~TFdMGb>>|I~$ zv~NsFzP!-z1SNSlYIM2n`QU#2Sf7oq+4<$Fi207KQrUwOVEIY!Sbz0!x-Cn7%%Ng< z*>O26cwYLIpDV%z=6b29$jKY+eKDf;R>JLxby5Dd~3In{o!-uW7jW=rAwfV!+ z%#P-_193+s$E88&&c^KHh$SnmH)%m7%I7NSwfd2H=0I)YsmG;2`}oQ=#p^jflKnX* z{PjVo@7P8x-fwT|r~1W%&DFP%h;2h_P-S@U@lZCq3)rKM^;n+^N4aR`Az3;%2y9cTstp&_cas3pr6mUN#FU zd(PQIZq7NzYEFTxP4HgDq)qW%+3C*Y z6**|TinDS9KI9Du2;h|c*0>4?(qtSgaH547%%ECdaZkap`BjQYoJI`{-6ZLR$ zLLlMmXn^&S+czabg{rHHvI#$W2n;Mmi5_ia#fs^qOayaPJSF_VO=j%3{E!p(Au_>o zhZDjIV&67{ad>cvBao6|Zo8MR-a+qb?kH>$yy>`j!qD8k{Sia(x#03CI0*gEIqor* z`*JaAB!qoK^dYoUb}T^&l6pCF9b-=+X2nI4ZayVo+V@=n?p`{yrK(MC*46#`55#^z zmE9qm8V!?5+AuaaeNNI=n!XZKWZsrFd!A;NV|hpL8JOv%n4Hq>vOYB^3eyItIYQ8) ztL5;fajaew8v8-+ve%z?U&Kn6y(H{`n?YrVC(|bE3XEYGS>NJ(4eitiVp(|Y1aYro z*@s*ka3rC1b2-8p_;kDxp4e=@cqm<1_U`wM3^U>_;YS#?SPhJ`mkfn9j?PHs70((8 z=?$)GVl11w z2^X2jW~4Mdpy-kHVQW)WMRccD)^U0raO6;%Ce-7xJUfu?)tq$jfF_X2jQoTx~i2Qt*YBIr9#aOSjRj5cr{XEqg z=VQnIm!tY235ANKME@!jTQ9OE52rMj9J*p{52gFtNOW>=)G0GhHBLLVUTu6#q?#DH zkrUt(;Xtk>s5GU9(t?`;<$c&?K#2kcp5>-^^;bYPXs-#47;N}+r0I9Wc#YhG1LUAa zvYsHC=n;i6OoQ-c)9nX%ivC?7+l@kVGv!mL6;50ycZ`5#t4Oo$tLfZzK6n5x?t2B3 zauPVmEUyJ@N~}_f{?>lruZCktPK?9JmSlSN74E~kUr87zTzi6d8K{a?8Y{y~q|5VplU&0t7UVTKRndGNT!R{K500nm6*d+z^~qYOWC+)9 z8gPuk08J8Hw014r)EbNBU8k%a$ut?u%^wQB75x&Cfp%Joq}=)Fe38L)jKRBH+Y?a0Npw40}X0sK;%mNG^lAhIrMc( zetF%9TWQP1Kx!aK)j=x1gjz5`NueaiMbE?*@-~B3_)(y@K7K2~Wa(QLx4)7=>x10J zw+^55qnd>!D*x$uF_S}udgDxfQmg_P+1>63*VNsz-JIzaDO@D=_L@7u7U~9?Tw}F_ zfA$gJH1Eo7!y3d6KAbZXqa1BFE%-t)QAUJx&U~h3pyx;I&3GC=dpYl$ z377Z4m^JLC^LpzQU1=|6djc^Bw(@cDTe|?A>+y@8vpfHFO?{a{tSAX{PHySl3D(ZH zKO^%Kv()#=d)~+w*!4ncBV&h;i(UHD5@W;JWnjcC9?%bwKGe7C^{Rn?27J3 z=n%AHr$??n99ejUI3jv8XMhjnR|X_44@U~SmZgT5MjT?`0dx3gI72JVLL7OG@!FG= z4`hLg0!a;o%N8?fGN0EM?l#T+W={(SAO*O*gH#%0!BH`#zGq_+%$KT}V6;kR*-r#a zscr{{lwU^NFNtnh;B=PcZ_8!kc0|JWWZSetG%6AgucjE z31XNrGNtAyG4o{)MTN3PCPv+7M6I=?p%wBAiOOQy7&nh3!<}s@ExZa3Fz(2swRvd@ z5rDcS5kq%Chiohln=-%IcC&YeNgS^EEQ!Pk*vr|Kq)&sPBF&i9bOLH-pyYjfg0Gax zR7=NW)?*j_ZAd3Jyu-n6ex33-u=Uph4nsMyE5l~@GmZXfeWcd#Z&c;-yUy?0X0Q#KtvrOV@< zJTf%+U%Qi72whK6*{UL=S9EEx=@bArxi(KZE_s=n8F`qpjy-%iO#(sc)*$$4JUkPo3a|D_ z#w;f)0smMX?D~dz8$uHKB`lRoL6bUSo$IDNQ%P~rM_-yq;0RGUzy`Ooy_r;L`|%wq zo%_tXF1^A{{`(k@;EA<0GnF-S$rs?iXZ5028K#5&bPUWR|I3Y_3c~zC(tnFIyVRy) zHdqk4AIMAA1snX0k4}_YHSuBP9%pm&GE2Y*n$5y3?FGZ3#Mds2fFB9ogS->q#KRMo z?`FS7b<)*FtFtb)Sb!)dg;8{b>P~)<(-hR^ipbG*Q%B(`_O&hv z7gZ6x+cd*4ssvH>X#Bo^H+7pxI&RRQu56D&To{kVBvw&5`Ur`{rh#RS)}dzX)5PIC zccRH`PZ{s649HkQ@^9sEIdmFzhzLZrgGB+$<6{o+kMFIZEN8$*gTa(;g*il3ciC(n zW*azDhO;dGdNKkfh)}cR%FdpWm0ApWB-^WTB(5RzqY>8Qk zsc2Tz#ZuQKP`53jZ_t|2)3w`^vj;5@P8=&?kXlko|Jkvgw}@q;d_9@KTx(Zv1*_2K z@zdzpCOYkajpPs@Xo~jn;=CxQ7nW6PP{QwNAa`t*p~2RuibAXH z|AZm|6neE`ZhUWP(YT7$!FpK}BX?p@(&;@2i{R!yg|M;hD+|fq=sSRzL4+YC?J5A$ zKghEPViUE@1>^eG=m4@DG2N9$ya#(AzJe*m&xYfIBi0+C<5Ik!<^~_yW>qV54x95( zx*nTO_MBKA#)YHG{iWT+?oKSM8E9cqWu1$3Az^?aKw~XHSvA2)6I`f7i(T9d`_7&) z7F9SBjdr^jytWCxY#-%3wo%cX&K-Zm4@yb&gu7`5C@82iRELG!VYqSj6bqfU81XfH zc%ZCQVyJo1)M^fJK{4P&QcH zTJpXzwO0iVwG?@3MW{NIa{5HWxV$KR4qbNVU=n!0o=Lnwb5#zY?3Y{huigh7^Lkq_ zpuP-xhT>$8u$VIMtvyXNOYKwnNz4JYN5MW+t59-eV9s--Q@+2Kz;9nk`ac~}8Tws* za%i}J6Ckv!yrwTRU&H1=Yp@nygIVwsAu=zhBBl+{06Y$%$oLCXE8%Qw{{+wW`)&L(8ZZgTn=neeZkq|UIxzCpyiX^ zfh-1`s$<6}IMaQCd1~O?gjwS_Eco70q_) zSdaJEJsy1z8@qcMEP6tlO3fSo(Fmo* zH{IjnJFMnGS4duc=_Uc-SQOJh?u=A}j5fRFzq_D?o)xaOQ3+po8goIUv_FQnvKpLh^8Q@qZj7Z_w2nW)CXw9_E;(GkN&SyrtE`>@?n8RNquQD>a?(BQfnE7oSs zeg=n{u;mSXZDZ~M{qf}!GjGW~LR(%`vc_qFC|mQAzmZhG^aVY#m$^d~ogMwEE&#Tp zP*}WCNeOM>a8=rE%d;X7FxMn55rKC|F=l-Hr-#fI%Stmbe#|{Rm;BR$b}gK;Ogt4n zXuRjYKg~=KkP2n~U=7s%w^)NeH7ZjYTd{wz2EHxdP&zba#)~Pmzj)j`(2J&cP|Vf| z`Pac$hAfEJO$a4{#BWBdKYMm29*qeS7<=AuecXn+DT+-bcn`VIgH5p1 zuh)ujWod>Fny8XY3jF9zQ!nkg6gc8N#&FeZjuNCDy5|xx5;;QsQ8u!3>JF^9_Jx-b z(%nUcsV>=gmS2~y`NNsUdftRnP{Y)tMJZbhkhN8MkBp>jB&sL4ebo6aUr~bhAI;sL z!#5)gY}Btt30C!ijYzq;7!Lqd#8bizE)ce6`P=OS&rG=FI6(vN+6|u^EuEQ+Q@VE>Km|gvx11|!TQ77j zwxmX9yYdxJk~VUnfTwc>9axn_+@v}w;~K7m@CTc*{TTReZaefZgvtva(#u+$ds-xA z@iy5Qlo_a&u@MsX zSc@myswTj}rTwnl%9bY!(6`aNIon;#+1gU{@LLEx5!P88<65JYADSj5*^M+C*Nuy~ zUE=C>t{6P@Z}h8FKfE}~s8?BwDvz)g(AmM0nzIDo2~7*HUcHo}LjvnzVc8&sDc}V` z(XxXGu|o0#{9sPD>fE{K*Z~>MG-S(UdSNn9hpVH5FxD?f(v9}>H2kJlURS7GnH$9) z%j1TJ75%6|vHsM>2@c9CUlU;if$DLKChI1C_Wq$0?8h>lgnP9kF#e$vsNm>UrB1~N zc-tJuvsZHwUYZ`v&8;@R8YZTO|GwB|?pb*tLf_bridxu(TY6Zh&NB%=wuNK=mOjP7 zeMHGAG*&;ysI+4<%nbNDoB+^}q=_t&Xa;XpJHb~^INknlaDsX#(tD|U11==2K%~s2 z+HQj>vT67Fr4I6R115h%I4GTb8ylNcvQh+dq=!Fnf`SN{!lKy1NwZP+ zc_SvAc%4xpyn3H9d~q7uH4t{vvcItjQbl$j3#ju!yDN+_lgIS37*(Q0%;dFj7Gq3I zqhr9H#iSB00;$YkO=A`N1;|W0gEvs*u}8whFGV4Uwtm|nj}Zyolp4jF^NJ_W8>d$e z@!z@Y*wmAdq}a?POSE8rsqe@g1fuXmW!hngMYAO4JP&c*nD8CLoNf+zeH{U&~xDS6U_* zls7^B1Sdbc?v6^GIcF=CKj28I0u-}&9`ugM^12Zx&rQrLLWGvv1EBV zWhfq*QIj8x73IqhXBB+M;O*=mEXda#yD0mv8|G(~=(+Q1JEkpM>BX8WKay0_$V%{r z>k>#f-rtV7&Cm%Rn2v=8czi&BoC+KVCjx0$ftC=@J%9Gf{NWQg5L$x$jZXj=`iD=T zHJ1Pkl9k{xuH%Q!-1K)ofo4SI-}wY^?$-awCm2bu@1B;;*I5{>6BWcHOvfv1x4IDBV&`+FaAyTv>l8?cjn)sw~m$UgL zGhg1yp1$d}avrlvZ1=(h+q3Yak1@Mjk_?gDV&kFVdcl6y6EVf5jD|%$M!mDB%gE#z z%>lz(qc)rI51+uwvz-~|k@1lwJ7au;OeVLrL>B8+cProI1<)ylb%88?c&1etJ*ps`px3!6-scW2WY=BuQ1gJ+dH~lVi@^fZO^o z#v@j1c_)Ru0D4=KYqG0A%3|2bFKz9FHnu;rj%d(P*$B5knH!e<-lG{e;{noqqE}E$ zfAl0>4iaS%J3I=J#hXQdA};iycJi&P`j_=Pja>`sul6c^GWfC$&`%n9AjhpHTZ7Cd z=CS2w+@dhVR*#mFuD+PxUC)b{>0@ma(z$rfzj9mKa+}*iS3`@xE2r=P78geBPcGC3 z!27}$I;mb=u^kdbVOf;*H>Qi1`f-s~TT?IDn>;z+x`VW>`biW|KUZp?a(F^2M=mse z&K%-rCEQGCUZ0TJ0=`rx9hqHKtXA(bsl9$2~p4a&RG z9I^lUc-|pZy!3KswduDZIqD zu;s&8;{^Ws2W~+JT_?nPQMPW#d$x5??i|BACbM(Xw$4^l9eP*R)BF9*6`<9YQ(jNO zx7Qlly=(P1uX;^sWV3Sq@hZh3dZj$Ll|{+%pCp}!`XX!DC}}QeD`-fN&ILcV>~1m2%0yGIt~Wm@kE5avu+fANYpwq0~2 zxe#6^zUyqBtoL$_Mk;BK%B)7>+QfPO&I_0d;;V@e1c}76ZU`d32LYub5Q=yCm8(khfgs1 zH$K7qKllV<|KJmB{^1im3S(TAt0jBlUdhutzOTbkK}z^5{OTWqMgCU*n&5x+kpJUf{zLh%42FLy^ZrTa z{R>n5{}LJgD*o4I_kW5r{=tR)3*!GZ?Z1^{|5g33<=y{O&&B;;sQ+iN_g~fjn$i5H zI@F)O{eNNZ|IBaxRr;?E)<314IsPT-|MIi`s{GftiGL~!{#mvE!leJ>hX1)Ga+08b UJT?FT$Uh%AU;uy(iNF2&KWRCp2LJ#7 literal 0 HcmV?d00001 diff --git a/config/stylelint-config-carbon/package.json b/config/stylelint-config-carbon/package.json index c4e7f6c13d58..51afcc004993 100644 --- a/config/stylelint-config-carbon/package.json +++ b/config/stylelint-config-carbon/package.json @@ -35,7 +35,8 @@ "stylelint-no-unsupported-browser-features": "^5.0.2", "stylelint-order": "^5.0.0", "stylelint-prettier": "^2.0.0", - "stylelint-scss": "^4.1.0" + "stylelint-scss": "^4.1.0", + "stylelint-use-logical": "^2.1.0" }, "devDependencies": { "prettier": "^2.8.8", diff --git a/config/stylelint-config-carbon/plugins/scss.js b/config/stylelint-config-carbon/plugins/scss.js index 9b84ce158e6c..b20ffef00326 100644 --- a/config/stylelint-config-carbon/plugins/scss.js +++ b/config/stylelint-config-carbon/plugins/scss.js @@ -10,7 +10,7 @@ const OFF = null; module.exports = { - plugins: ['stylelint-scss'], + plugins: ['stylelint-scss', 'stylelint-use-logical'], rules: { // @-else // Require or disallow a newline after the closing brace of @else statements. @@ -119,6 +119,9 @@ module.exports = { // Selector // Disallow redundant nesting selectors (&). 'scss/selector-no-redundant-nesting-selector': true, + + // CSS Logical properties + 'csstools/use-logical': true, }, overrides: [ { diff --git a/packages/styles/scss/components/accordion/_accordion.scss b/packages/styles/scss/components/accordion/_accordion.scss index e30588c64cec..95b014705c94 100644 --- a/packages/styles/scss/components/accordion/_accordion.scss +++ b/packages/styles/scss/components/accordion/_accordion.scss @@ -51,18 +51,18 @@ $content-padding: 0 0 0 $spacing-05 !default; @include component-reset.reset; - width: 100%; + inline-size: 100%; list-style: none; } .#{$prefix}--accordion__item { display: list-item; overflow: visible; - border-top: 1px solid $border-subtle; + border-block-start: 1px solid $border-subtle; transition: all $duration-fast-02 motion(standard, productive); &:last-child { - border-bottom: 1px solid $border-subtle; + border-block-end: 1px solid $border-subtle; } } @@ -71,24 +71,25 @@ $content-padding: 0 0 0 $spacing-05 !default; position: relative; display: flex; - width: 100%; - min-height: layout.size('height'); flex-direction: $flex-direction; align-items: center; justify-content: $justify-content; margin: 0; color: $text-primary; cursor: pointer; + inline-size: 100%; + min-block-size: layout.size('height'); + padding-inline-end: layout.density('padding-inline'); transition: background-color motion(standard, productive) $duration-fast-02; &:hover::before, &:focus::before { position: absolute; - top: -1px; - left: 0; - width: 100%; - height: calc(100% + 2px); + block-size: calc(100% + 2px); content: ''; + inline-size: 100%; + inset-block-start: -1px; + inset-inline-start: 0; } &:hover::before { @@ -122,25 +123,24 @@ $content-padding: 0 0 0 $spacing-05 !default; .#{$prefix}--accordion__item--disabled + .#{$prefix}--accordion__item { // v10 icon doesn't have 1:1 translation, keeping color same as enabled state // https://github.com/carbon-design-system/carbon/issues/10373#issuecomment-1021638147 - border-top: 1px solid $border-subtle; + border-block-start: 1px solid $border-subtle; } li.#{$prefix}--accordion__item--disabled:last-of-type { // v10 icon doesn't have 1:1 translation, keeping color same as enabled state // https://github.com/carbon-design-system/carbon/issues/10373#issuecomment-1021638147 - border-bottom: 1px solid $border-subtle; + border-block-end: 1px solid $border-subtle; } .#{$prefix}--accordion__arrow { @include focus-outline('reset'); - width: 1rem; - height: 1rem; - // Without flex basis and flex shrink being set here, our icon width can go - // <16px and cause the icon to render in the incorrect artboard size flex: 0 0 1rem; - margin: $arrow-margin; + block-size: 1rem; fill: $icon-primary; + inline-size: 1rem; + // Without flex basis and flex shrink being set here, our icon width can go + // <16px and cause the icon to render in the incorrect artboard size transform: rotate(-270deg) #{'/*rtl:ignore*/'}; transition: all $duration-fast-02 motion(standard, productive); } @@ -149,10 +149,10 @@ $content-padding: 0 0 0 $spacing-05 !default; @include type-style('body-01'); z-index: 1; - width: 100%; - padding-right: $spacing-05; margin: $title-margin; - text-align: left; + inline-size: 100%; + padding-inline-end: $spacing-05; + text-align: start; } .#{$prefix}--accordion__content { @@ -163,11 +163,11 @@ $content-padding: 0 0 0 $spacing-05 !default; // Custom breakpoints based on issue #4993 @include breakpoint-up(480px) { - padding-right: $spacing-09; + padding-inline-end: $spacing-09; } @include breakpoint-up(640px) { - padding-right: 25%; + padding-inline-end: 25%; } > p { @@ -186,11 +186,13 @@ $content-padding: 0 0 0 $spacing-05 !default; } .#{$prefix}--accordion--start .#{$prefix}--accordion__title { - margin-right: $spacing-05; + margin-inline-end: $spacing-05; } .#{$prefix}--accordion--start .#{$prefix}--accordion__content { - margin-left: calc(#{layout.density('padding-inline')} + #{$spacing-05}); + margin-inline-start: calc( + #{layout.density('padding-inline')} + #{$spacing-05} + ); } .#{$prefix}--accordion__item--collapsing .#{$prefix}--accordion__content, @@ -231,8 +233,8 @@ $content-padding: 0 0 0 $spacing-05 !default; .#{$prefix}--accordion__content { display: block; - padding-top: $spacing-03; - padding-bottom: $spacing-06; + padding-block: $spacing-03; + padding-block-end: $spacing-06; // Transition property for when the accordion opens transition: padding-top motion(entrance, productive) $duration-fast-02, padding-bottom motion(entrance, productive) $duration-fast-02; @@ -271,7 +273,7 @@ $content-padding: 0 0 0 $spacing-05 !default; .#{$prefix}--accordion--end.#{$prefix}--skeleton .#{$prefix}--accordion__arrow { - margin-left: $spacing-05; + margin-inline-start: $spacing-05; } .#{$prefix}--skeleton @@ -283,7 +285,7 @@ $content-padding: 0 0 0 $spacing-05 !default; } .#{$prefix}--accordion__title.#{$prefix}--skeleton__text { - margin-bottom: 0; + margin-block-end: 0; } // Windows HCM fix @@ -294,34 +296,34 @@ $content-padding: 0 0 0 $spacing-05 !default; } @mixin -content-visible { - height: 100%; + block-size: 100%; opacity: 1; visibility: inherit; } @mixin -content-hidden { - height: 0; + block-size: 0; opacity: 0; visibility: hidden; } // flush .#{$prefix}--accordion--flush .#{$prefix}--accordion__title { - margin-left: 0; + margin-inline-start: 0; } .#{$prefix}--accordion--flush .#{$prefix}--accordion__arrow { - margin-right: 0; + margin-inline-end: 0; } .#{$prefix}--accordion--flush .#{$prefix}--accordion__content { - padding-left: 0; + padding-inline-start: 0; } .#{$prefix}--accordion--flush:not(.#{$prefix}--skeleton) .#{$prefix}--accordion__heading:hover::before, .#{$prefix}--accordion--flush:not(.#{$prefix}--skeleton) .#{$prefix}--accordion__heading:focus::before { - left: -1rem; - width: calc(100% + 32px); + inline-size: calc(100% + 32px); + inset-inline-start: -1rem; } diff --git a/packages/styles/scss/components/aspect-ratio/_aspect-ratio.scss b/packages/styles/scss/components/aspect-ratio/_aspect-ratio.scss index 037b7e7e1776..e9b180225b57 100644 --- a/packages/styles/scss/components/aspect-ratio/_aspect-ratio.scss +++ b/packages/styles/scss/components/aspect-ratio/_aspect-ratio.scss @@ -45,11 +45,11 @@ $aspect-ratios: ( } .#{$prefix}--aspect-ratio::before { - width: 1px; - height: 0; - margin-left: -1px; + block-size: 0; content: ''; - float: left; + float: inline-start; + inline-size: 1px; + margin-inline-start: -1px; } .#{$prefix}--aspect-ratio::after { @@ -63,7 +63,7 @@ $aspect-ratios: ( $height: list.nth($aspect-ratio, 2); .#{$prefix}--aspect-ratio--#{$width}x#{$height}::before { - padding-top: math.percentage(math.div($height, $width)); + padding-block-start: math.percentage(math.div($height, $width)); } } } diff --git a/packages/styles/scss/components/breadcrumb/_breadcrumb.scss b/packages/styles/scss/components/breadcrumb/_breadcrumb.scss index e0ecb7238f35..c1ef8792b13a 100644 --- a/packages/styles/scss/components/breadcrumb/_breadcrumb.scss +++ b/packages/styles/scss/components/breadcrumb/_breadcrumb.scss @@ -34,7 +34,7 @@ position: relative; display: flex; align-items: center; - margin-right: $spacing-03; + margin-inline-end: $spacing-03; } .#{$prefix}--breadcrumb-item .#{$prefix}--link:visited { @@ -46,9 +46,9 @@ } .#{$prefix}--breadcrumb-item::after { - margin-left: $spacing-03; color: $text-primary; content: '/'; + margin-inline-start: $spacing-03; } .#{$prefix}--breadcrumb--no-trailing-slash @@ -58,7 +58,7 @@ .#{$prefix}--breadcrumb-item:last-child, .#{$prefix}--breadcrumb-item:last-child::after { - margin-right: 0; + margin-inline-end: 0; } .#{$prefix}--breadcrumb .#{$prefix}--link { @@ -79,8 +79,8 @@ // Overflow Menu overrides .#{$prefix}--breadcrumb-item .#{$prefix}--overflow-menu { position: relative; - width: convert.to-rem(20px); - height: convert.to-rem(18px); + block-size: convert.to-rem(18px); + inline-size: convert.to-rem(20px); &:focus { outline: 1px solid $focus; @@ -93,11 +93,11 @@ // Used to mimic link underline &::after { position: absolute; - bottom: 2px; - width: convert.to-rem(12px); - height: 1px; background: $link-primary-hover; + block-size: 1px; content: ''; + inline-size: convert.to-rem(12px); + inset-block-end: 2px; opacity: 0; transition: opacity $duration-fast-01 motion(standard, productive); @@ -135,29 +135,29 @@ $caret-size: convert.to-rem(7px); .#{$prefix}--breadcrumb-menu-options.#{$prefix}--overflow-menu-options::after { - top: -$caret-size; - left: $caret-size * 2; - width: 0; - height: 0; - border-right: $caret-size solid transparent; - border-bottom: $caret-size solid $field; - border-left: $caret-size solid transparent; margin: 0 auto; background: transparent; + block-size: 0; + border-block-end: $caret-size solid $field; + border-inline-end: $caret-size solid transparent; + border-inline-start: $caret-size solid transparent; + inline-size: 0; + inset-block-start: -$caret-size; + inset-inline-start: $caret-size * 2; } // Skeleton State .#{$prefix}--breadcrumb.#{$prefix}--skeleton .#{$prefix}--link { @include skeleton; - width: convert.to-rem(100px); - height: 1rem; + block-size: 1rem; + inline-size: convert.to-rem(100px); } .#{$prefix}--breadcrumb .#{$prefix}--overflow-menu.#{$prefix}--btn--icon-only { - min-height: 1.125rem; - padding-right: 0; - padding-left: 0; + min-block-size: 1.125rem; + padding-inline-end: 0; + padding-inline-start: 0; } } diff --git a/packages/styles/scss/components/button/_button.scss b/packages/styles/scss/components/button/_button.scss index abb614fe512a..caa2d8e976bf 100644 --- a/packages/styles/scss/components/button/_button.scss +++ b/packages/styles/scss/components/button/_button.scss @@ -119,7 +119,7 @@ .#{$prefix}--btn__icon { position: static; - margin-left: $spacing-03; + margin-inline-start: $spacing-03; } &:hover, @@ -149,8 +149,8 @@ } .#{$prefix}--btn--icon-only { - width: layout.size('height'); - height: layout.size('height'); + inline-size: layout.size('height'); + block-size: layout.size('height'); justify-content: center; padding: 0; // -1px to compensate for border width @@ -283,7 +283,7 @@ .#{$prefix}--btn__icon { position: static; - margin-left: $spacing-03; + margin-inline-start: $spacing-03; } &:hover, @@ -324,8 +324,8 @@ } .#{$prefix}--btn.#{$prefix}--btn--expressive .#{$prefix}--btn__icon { - width: convert.to-rem(20px); - height: convert.to-rem(20px); + inline-size: convert.to-rem(20px); + block-size: convert.to-rem(20px); } .#{$prefix}--btn-set .#{$prefix}--btn.#{$prefix}--btn--expressive { @@ -336,7 +336,7 @@ .#{$prefix}--btn.#{$prefix}--skeleton { @include skeleton; - width: convert.to-rem(150px); + inline-size: convert.to-rem(150px); } // button set styles @@ -349,7 +349,7 @@ } .#{$prefix}--btn-set .#{$prefix}--btn { - width: 100%; + inline-size: 100%; // 196px from design kit max-width: convert.to-rem(196px); diff --git a/packages/styles/scss/components/button/_mixins.scss b/packages/styles/scss/components/button/_mixins.scss index 01e4e396dad9..035797aaff41 100644 --- a/packages/styles/scss/components/button/_mixins.scss +++ b/packages/styles/scss/components/button/_mixins.scss @@ -46,9 +46,9 @@ $button-focus-color: custom-property.get-var('button-focus-color', $focus); position: relative; display: inline-flex; - width: max-content; + inline-size: max-content; max-width: convert.to-rem(320px); - min-height: layout.size('height'); + min-block-size: layout.size('height'); flex-shrink: 0; justify-content: space-between; // Fix to remove added margins on buttons in safari (see #5155) @@ -92,15 +92,15 @@ $button-focus-color: custom-property.get-var('button-focus-color', $focus); .#{$prefix}--btn__icon { position: absolute; // -1px to compensate for border width - top: min( + inset-block-start: min( calc( (layout.size('height') - convert.to-rem(16px)) / 2 - convert.to-rem(1px) ), var(--temp-padding-block-max) ); right: layout.density('padding-inline'); - width: convert.to-rem(16px); - height: convert.to-rem(16px); + inline-size: convert.to-rem(16px); + block-size: convert.to-rem(16px); flex-shrink: 0; margin-block-start: convert.to-rem(1px); } @@ -145,7 +145,7 @@ $button-focus-color: custom-property.get-var('button-focus-color', $focus); @mixin button-padding-large { align-items: baseline; - padding-top: $spacing-05; - padding-right: $spacing-10; - padding-left: $spacing-05; + padding-block-start: $spacing-05; + padding-inline-end: $spacing-10; + padding-inline-start: $spacing-05; } diff --git a/packages/styles/scss/components/checkbox/_checkbox.scss b/packages/styles/scss/components/checkbox/_checkbox.scss index fc323ca86b3c..d72d9ff92c96 100644 --- a/packages/styles/scss/components/checkbox/_checkbox.scss +++ b/packages/styles/scss/components/checkbox/_checkbox.scss @@ -47,8 +47,8 @@ .#{$prefix}--checkbox { @include visually-hidden; //even though its hidden, positioning is for native validation to be aligned to checkbox - top: 1.25rem; - left: 0.7rem; + inset-block-start: 1.25rem; + inset-inline-start: 0.7rem; } // The label corresponds to the content inside of the `label` tag. Since we're @@ -60,16 +60,16 @@ position: relative; display: flex; - min-height: convert.to-rem(24px); - padding-top: convert.to-rem(3px); - padding-left: convert.to-rem(20px); + min-block-size: convert.to-rem(24px); + padding-block-start: convert.to-rem(3px); + padding-inline-start: convert.to-rem(20px); cursor: pointer; user-select: none; } .#{$prefix}--checkbox-label-text { // Add extra spacing when label is present - padding-left: convert.to-rem(6px); + padding-inline-start: convert.to-rem(6px); } // Required because `$css--reset: true` cannot currently apply to this `::before` and `::after` @@ -85,14 +85,14 @@ // `top` since we don't want the checkbox to be centered vertically with the // text overflows. position: absolute; - top: convert.to-rem(2px); - left: 0; + inset-block-start: convert.to-rem(2px); + inset-inline-start: 0; // According to the spec, we'll want the bounding box for our checkbox to // be 16px. The border size will be what will be updated during the // different checkbox states. - width: convert.to-rem(16px); - height: convert.to-rem(16px); + inline-size: convert.to-rem(16px); + block-size: convert.to-rem(16px); border: 1px solid $icon-primary; // increase left margin for #6480 margin: convert.to-rem(2px) convert.to-rem(2px) convert.to-rem(2px) @@ -107,12 +107,12 @@ // Create the appearance of the check in the `after` pseudo-element .#{$prefix}--checkbox-label::after { position: absolute; - top: convert.to-rem(7.5px); - left: convert.to-rem(7px); - width: convert.to-rem(9px); - height: convert.to-rem(5px); - border-bottom: 1.5px solid $icon-inverse; - border-left: 1.5px solid $icon-inverse; + inset-block-start: convert.to-rem(7.5px); + inset-inline-start: convert.to-rem(7px); + inline-size: convert.to-rem(9px); + block-size: convert.to-rem(5px); + border-block-end: 1.5px solid $icon-inverse; + border-inline-start: 1.5px solid $icon-inverse; margin-top: convert.to-rem(-3px) #{'/*rtl:0rem*/'}; background: none; content: ''; @@ -141,10 +141,10 @@ // Indeterminate symbol .#{$prefix}--checkbox:indeterminate + .#{$prefix}--checkbox-label::after { - top: convert.to-rem(11px); - width: convert.to-rem(8px); - border-bottom: 2px solid $icon-inverse; - border-left: 0 solid $icon-inverse; + inset-block-start: convert.to-rem(11px); + inline-size: convert.to-rem(8px); + border-block-end: 2px solid $icon-inverse; + border-inline-start: 0 solid $icon-inverse; transform: scale(1) rotate(0deg); } @@ -268,7 +268,7 @@ overflow: visible; max-height: 100%; margin-top: 0; - margin-left: $spacing-03; + margin-inline-start: $spacing-03; } .#{$prefix}--checkbox-group--invalid @@ -332,8 +332,8 @@ .#{$prefix}--checkbox-label-text.#{$prefix}--skeleton { @include skeleton; - width: convert.to-rem(100px); - height: $spacing-05; + inline-size: convert.to-rem(100px); + block-size: $spacing-05; // Add extra spacing when label is present margin: convert.to-rem(1px) 0 0 convert.to-rem(6px); diff --git a/packages/styles/scss/components/code-snippet/_code-snippet.scss b/packages/styles/scss/components/code-snippet/_code-snippet.scss index ebe18d47010c..a4f13748da20 100644 --- a/packages/styles/scss/components/code-snippet/_code-snippet.scss +++ b/packages/styles/scss/components/code-snippet/_code-snippet.scss @@ -149,9 +149,9 @@ $copy-btn-feedback: $background-inverse !default; @include bx--snippet; display: flex; - height: $spacing-08; + block-size: $spacing-08; align-items: center; - padding-right: $spacing-08; + padding-inline-end: $spacing-08; } .#{$prefix}--snippet--single.#{$prefix}--snippet--no-copy { @@ -165,9 +165,9 @@ $copy-btn-feedback: $background-inverse !default; .#{$prefix}--snippet--single .#{$prefix}--snippet-container { position: relative; display: flex; - height: 100%; + block-size: 100%; align-items: center; - padding-left: $spacing-05; + padding-inline-start: $spacing-05; overflow-x: auto; &:focus { @@ -178,7 +178,7 @@ $copy-btn-feedback: $background-inverse !default; .#{$prefix}--snippet--single pre { @include type-style('code-01'); - padding-right: $spacing-03; + padding-inline-end: $spacing-03; } // Preserve whitespace, but don't allow wrapping for inline and single @@ -198,7 +198,7 @@ $copy-btn-feedback: $background-inverse !default; //collapsed snippet container .#{$prefix}--snippet--multi .#{$prefix}--snippet-container { position: relative; - min-height: 100%; + min-block-size: 100%; max-height: 100%; order: 1; overflow-y: auto; @@ -225,7 +225,7 @@ $copy-btn-feedback: $background-inverse !default; // collapsed pre .#{$prefix}--snippet--multi .#{$prefix}--snippet-container pre { - padding-right: $spacing-08; + padding-inline-end: $spacing-08; padding-bottom: convert.to-rem(24px); overflow-x: auto; } @@ -233,7 +233,7 @@ $copy-btn-feedback: $background-inverse !default; .#{$prefix}--snippet--multi.#{$prefix}--snippet--no-copy .#{$prefix}--snippet-container pre { - padding-right: 0; + padding-inline-end: 0; } // expanded pre @@ -247,10 +247,10 @@ $copy-btn-feedback: $background-inverse !default; .#{$prefix}--snippet-container pre::after { position: absolute; - top: 0; + inset-block-start: 0; right: 0; - width: convert.to-rem(16px); - height: 100%; + inline-size: convert.to-rem(16px); + block-size: 100%; background-image: linear-gradient(to right, transparent, $layer); content: ''; } @@ -261,8 +261,8 @@ $copy-btn-feedback: $background-inverse !default; //Copy Button .#{$prefix}--snippet__icon { - width: convert.to-rem(16px); - height: convert.to-rem(16px); + inline-size: convert.to-rem(16px); + block-size: convert.to-rem(16px); fill: $icon-primary; transition: all $duration-fast-01 motion(standard, productive); } @@ -296,7 +296,7 @@ $copy-btn-feedback: $background-inverse !default; @include font-family('sans'); position: absolute; - top: 0; + inset-block-start: 0; right: 0; } @@ -304,10 +304,10 @@ $copy-btn-feedback: $background-inverse !default; // TLDR: Copy/CopyButton now uses IconButton, which uses Carbon buttons under the hood // v10 Copy just used native html button so it didn't have extra carbon styles that needed overriding .#{$prefix}--snippet--inline.#{$prefix}--btn { - width: initial; - height: 1.25rem; - min-height: 1.25rem; - padding-inline: 0; + inline-size: initial; + block-size: 1.25rem; + min-block-size: 1.25rem; + padding-inline-end: 0; } .#{$prefix}--snippet--inline.#{$prefix}--btn.#{$prefix}--btn--primary:hover { @@ -317,7 +317,7 @@ $copy-btn-feedback: $background-inverse !default; // override multi copy btn styles .#{$prefix}--snippet.#{$prefix}--snippet--multi .#{$prefix}--popover-container { - top: 0.5rem; + inset-block-start: 0.5rem; right: 0.5rem; } @@ -333,9 +333,9 @@ $copy-btn-feedback: $background-inverse !default; position: absolute; z-index: 10; right: 0; - bottom: 0; + inset-block-end: 0; display: inline-flex; - height: convert.to-rem(32px); + block-size: convert.to-rem(32px); align-items: center; padding: $spacing-03 $spacing-05; @@ -346,7 +346,7 @@ $copy-btn-feedback: $background-inverse !default; .#{$prefix}--snippet-btn--expand .#{$prefix}--snippet-btn--text { position: relative; - top: convert.to-rem(-1px); + inset-block-start: convert.to-rem(-1px); } .#{$prefix}--snippet-btn--expand--hide.#{$prefix}--snippet-btn--expand { @@ -354,7 +354,7 @@ $copy-btn-feedback: $background-inverse !default; } .#{$prefix}--snippet-btn--expand .#{$prefix}--icon-chevron--down { - margin-left: $spacing-03; + margin-inline-start: $spacing-03; fill: $icon-primary; transform: rotate(0deg); transition: $duration-moderate-01 motion(standard, productive); @@ -416,22 +416,22 @@ $copy-btn-feedback: $background-inverse !default; // Skeleton State .#{$prefix}--snippet.#{$prefix}--skeleton .#{$prefix}--snippet-container { - width: 100%; - height: 100%; + inline-size: 100%; + block-size: 100%; } .#{$prefix}--snippet-button .#{$prefix}--btn--copy__feedback { // (The height of button) + (The height of the tooltip's triangle) + 4px - top: convert.to-rem(50.8px); + inset-block-start: convert.to-rem(50.8px); right: auto; - left: 50%; + inset-inline-start: 50%; &::before { - top: 0; + inset-block-start: 0; } &::after { - top: convert.to-rem(-4px); + inset-block-start: convert.to-rem(-4px); } } @@ -439,42 +439,42 @@ $copy-btn-feedback: $background-inverse !default; .#{$prefix}--snippet-button .#{$prefix}--btn--copy__feedback { // (The height of button) + (The height of the tooltip's triangle) + 4px - top: convert.to-rem(42.8px); + inset-block-start: convert.to-rem(42.8px); } .#{$prefix}--snippet--inline .#{$prefix}--btn--copy__feedback { // TODO: use updated global tooltip mixins under the hood // since all of the positioning values for the copy button tooltip are arbitrary hard coded rem values, we need this arbitrary 4px offset to keep the proper tooltip spacing according to the spec - top: calc(100% - #{convert.to-rem(4px)}); + inset-block-start: calc(100% - #{convert.to-rem(4px)}); right: auto; - left: 50%; + inset-inline-start: 50%; } // Overflow Indicator .#{$prefix}--snippet__overflow-indicator--left, .#{$prefix}--snippet__overflow-indicator--right { z-index: 1; - width: $spacing-05; + inline-size: $spacing-05; flex: 1 0 auto; } .#{$prefix}--snippet__overflow-indicator--left { order: 0; - margin-right: -$spacing-05; + margin-inline-end: -$spacing-05; background-image: linear-gradient(to left, transparent, $layer); } .#{$prefix}--snippet__overflow-indicator--right { order: 2; - margin-left: -$spacing-05; + margin-inline-start: -$spacing-05; background-image: linear-gradient(to right, transparent, $layer); } .#{$prefix}--snippet--single .#{$prefix}--snippet__overflow-indicator--right, .#{$prefix}--snippet--single .#{$prefix}--snippet__overflow-indicator--left { position: absolute; - width: $spacing-07; - height: calc(100% - #{$spacing-02}); + inline-size: $spacing-07; + block-size: calc(100% - #{$spacing-02}); } .#{$prefix}--snippet--single .#{$prefix}--snippet__overflow-indicator--right { @@ -495,7 +495,7 @@ $copy-btn-feedback: $background-inverse !default; .#{$prefix}--snippet--single .#{$prefix}--snippet-container:focus + .#{$prefix}--snippet__overflow-indicator--left { - left: convert.to-rem(2px); + inset-inline-start: convert.to-rem(2px); } .#{$prefix}--snippet--light .#{$prefix}--snippet__overflow-indicator--left { @@ -522,19 +522,19 @@ $copy-btn-feedback: $background-inverse !default; } .#{$prefix}--snippet--multi.#{$prefix}--skeleton { - height: convert.to-rem(98px); + block-size: convert.to-rem(98px); } .#{$prefix}--snippet--single.#{$prefix}--skeleton { - height: convert.to-rem(56px); + block-size: convert.to-rem(56px); } .#{$prefix}--snippet.#{$prefix}--skeleton span { @include skeleton; display: block; - width: 100%; - height: 1rem; + inline-size: 100%; + block-size: 1rem; margin-top: 0.5rem; &:first-child { @@ -542,11 +542,11 @@ $copy-btn-feedback: $background-inverse !default; } &:nth-child(2) { - width: 85%; + inline-size: 85%; } &:nth-child(3) { - width: 95%; + inline-size: 95%; } } diff --git a/packages/styles/scss/components/code-snippet/_mixins.scss b/packages/styles/scss/components/code-snippet/_mixins.scss index ec98cf8acb2c..c427a4d29bdb 100644 --- a/packages/styles/scss/components/code-snippet/_mixins.scss +++ b/packages/styles/scss/components/code-snippet/_mixins.scss @@ -16,7 +16,7 @@ @include type-style('code-01'); position: relative; - width: 100%; + inline-size: 100%; max-width: convert.to-rem(768px); background-color: $layer; } diff --git a/packages/styles/scss/components/combo-button/_combo-button.scss b/packages/styles/scss/components/combo-button/_combo-button.scss index 35f73a4b0a3d..20a02ce0ac78 100644 --- a/packages/styles/scss/components/combo-button/_combo-button.scss +++ b/packages/styles/scss/components/combo-button/_combo-button.scss @@ -34,7 +34,7 @@ } .#{$prefix}--combo-button__primary-action .#{$prefix}--btn { - width: 100%; + inline-size: 100%; } .#{$prefix}--combo-button__trigger svg { diff --git a/packages/styles/scss/components/contained-list/_contained-list.scss b/packages/styles/scss/components/contained-list/_contained-list.scss index 90fd8c790e53..1132036cfb80 100644 --- a/packages/styles/scss/components/contained-list/_contained-list.scss +++ b/packages/styles/scss/components/contained-list/_contained-list.scss @@ -36,20 +36,20 @@ .#{$prefix}--contained-list__header { position: sticky; z-index: 1; - top: 0; + inset-block-start: 0; display: flex; align-items: center; - padding-inline: layout.density('padding-inline'); + padding-inline-end: layout.density('padding-inline'); } .#{$prefix}--contained-list__label { - width: 100%; + inline-size: 100%; } .#{$prefix}--contained-list .#{$prefix}--search { position: sticky; z-index: 1; - top: layout.size('height'); + inset-block-start: layout.size('height'); &.#{$prefix}--search--expandable .#{$prefix}--search-input { background-color: $field; @@ -57,7 +57,7 @@ } .#{$prefix}--contained-list .#{$prefix}--search .#{$prefix}--search-input { - border-bottom: 1px solid $border-subtle; + border-block-end: 1px solid $border-subtle; background-color: $background; } @@ -68,7 +68,7 @@ } .#{$prefix}--contained-list .#{$prefix}--search .#{$prefix}--search-close { - border-right: 2px solid transparent; + border-inline-end: 2px solid transparent; outline: none; &:focus { @@ -80,7 +80,7 @@ .#{$prefix}--search .#{$prefix}--search-input ~ .#{$prefix}--search-close:hover { - border-bottom: 1px solid transparent; + border-block-end: 1px solid transparent; } .#{$prefix}--contained-list @@ -88,7 +88,7 @@ .#{$prefix}--search-input:focus ~ .#{$prefix}--search-close:hover { border: 2px solid $focus; - border-left: 0; + border-inline-start: 0; outline: none; } @@ -101,8 +101,8 @@ .#{$prefix}--contained-list--on-page .#{$prefix}--contained-list__header { @include type-style('heading-compact-01'); - height: layout.size('height'); - border-bottom: 1px solid $border-subtle; + block-size: layout.size('height'); + border-block-end: 1px solid $border-subtle; background-color: $background; color: $text-primary; } @@ -124,7 +124,7 @@ .#{$prefix}--contained-list--disclosed .#{$prefix}--contained-list__header { @include type-style('label-01'); - height: $spacing-07; + block-size: $spacing-07; background-color: $layer; color: $text-secondary; } @@ -167,7 +167,7 @@ @include type-style('body-01'); - min-height: layout.size('height'); + min-block-size: layout.size('height'); padding: calc(calc((#{layout.size('height')} - var(--temp-1lh)) / 2)) layout.density('padding-inline'); color: $text-primary; @@ -176,9 +176,9 @@ .#{$prefix}--contained-list-item:not(:last-of-type)::before { position: absolute; right: 0; - bottom: 0; - left: 0; - height: 1px; + inset-block-end: 0; + inset-inline-start: 0; + block-size: 1px; background-color: $border-subtle; content: ''; } @@ -186,7 +186,7 @@ .#{$prefix}--contained-list--inset-rulers .#{$prefix}--contained-list-item:not(:last-of-type)::before { right: layout.density('padding-inline'); - left: layout.density('padding-inline'); + inset-inline-start: layout.density('padding-inline'); } .#{$prefix}--contained-list-item--clickable @@ -227,9 +227,9 @@ .#{$prefix}--contained-list__action, .#{$prefix}--contained-list-item__action { position: absolute; - top: 0; + inset-block-start: 0; right: 0; - left: 0; + inset-inline-start: 0; display: flex; justify-content: flex-end; pointer-events: none; @@ -249,6 +249,6 @@ .#{$prefix}--contained-list-item__icon { display: inline-flex; - padding-top: $spacing-01; + padding-block-start: $spacing-01; } } diff --git a/packages/styles/scss/components/content-switcher/_content-switcher.scss b/packages/styles/scss/components/content-switcher/_content-switcher.scss index 38b7f6e36e96..edca2fd42752 100644 --- a/packages/styles/scss/components/content-switcher/_content-switcher.scss +++ b/packages/styles/scss/components/content-switcher/_content-switcher.scss @@ -22,8 +22,8 @@ @include layout.use('density', $default: 'normal'); display: flex; - width: 100%; - height: layout.size('height'); + inline-size: 100%; + block-size: layout.size('height'); justify-content: space-evenly; } @@ -38,7 +38,7 @@ overflow: hidden; border: none; border-top: convert.to-rem(1px) solid $border-inverse; - border-bottom: convert.to-rem(1px) solid $border-inverse; + border-block-end: convert.to-rem(1px) solid $border-inverse; margin: 0; background-color: transparent; color: $text-secondary; @@ -49,11 +49,11 @@ &::after { position: absolute; - top: 0; - left: 0; + inset-block-start: 0; + inset-inline-start: 0; display: block; - width: 100%; - height: 100%; + inline-size: 100%; + block-size: 100%; background-color: $layer-selected-inverse; content: ''; transform: scaleY(0); @@ -109,14 +109,14 @@ .#{$prefix}--content-switcher:not(.#{$prefix}--content-switcher--icon-only) .#{$prefix}--content-switcher-btn { - width: 100%; + inline-size: 100%; align-items: center; padding: $spacing-03 layout.density('padding-inline'); } .#{$prefix}--content-switcher:not(.#{$prefix}--content-switcher--icon-only) .#{$prefix}--content-switcher-btn:first-child { - border-left: convert.to-rem(1px) solid $border-inverse; + border-inline-start: convert.to-rem(1px) solid $border-inverse; border-bottom-left-radius: convert.to-rem(4px); border-top-left-radius: convert.to-rem(4px); @@ -128,7 +128,7 @@ .#{$prefix}--content-switcher:not(.#{$prefix}--content-switcher--icon-only) .#{$prefix}--content-switcher-btn:last-child { - border-right: convert.to-rem(1px) solid $border-inverse; + border-inline-end: convert.to-rem(1px) solid $border-inverse; border-bottom-right-radius: convert.to-rem(4px); border-top-right-radius: convert.to-rem(4px); @@ -150,10 +150,10 @@ .#{$prefix}--content-switcher-btn::before { position: absolute; z-index: 2; - left: 0; + inset-inline-start: 0; display: block; - width: convert.to-rem(1px); - height: convert.to-rem(16px); + inline-size: convert.to-rem(1px); + block-size: convert.to-rem(16px); background-color: $border-subtle; content: ''; } @@ -194,7 +194,7 @@ } .#{$prefix}--content-switcher__icon + span { - margin-left: $spacing-03; + margin-inline-start: $spacing-03; } .#{$prefix}--content-switcher__label { @@ -244,7 +244,7 @@ .#{$prefix}--content-switcher--icon-only .#{$prefix}--content-switcher-popover__wrapper:first-child .#{$prefix}--content-switcher-btn { - border-left: convert.to-rem(1px) solid $border-inverse; + border-inline-start: convert.to-rem(1px) solid $border-inverse; border-bottom-left-radius: convert.to-rem(4px); border-top-left-radius: convert.to-rem(4px); } @@ -261,7 +261,7 @@ .#{$prefix}--content-switcher--icon-only .#{$prefix}--content-switcher-popover__wrapper:last-child .#{$prefix}--content-switcher-btn { - border-right: convert.to-rem(1px) solid $border-inverse; + border-inline-end: convert.to-rem(1px) solid $border-inverse; border-bottom-right-radius: convert.to-rem(4px); border-top-right-radius: convert.to-rem(4px); } @@ -277,13 +277,13 @@ .#{$prefix}--content-switcher--lg .#{$prefix}--content-switcher-btn { // accounts for the larger icon sizes to keep the switcher at 48px - padding-right: convert.to-rem(14px); - padding-left: convert.to-rem(14px); + padding-inline-end: convert.to-rem(14px); + padding-inline-start: convert.to-rem(14px); } .#{$prefix}--content-switcher--lg .#{$prefix}--content-switcher-btn svg { - width: 20px; - height: 20px; + inline-size: 20px; + block-size: 20px; } .#{$prefix}--content-switcher--icon-only @@ -301,7 +301,7 @@ .#{$prefix}--content-switcher--icon-only.#{$prefix}--content-switcher--sm .#{$prefix}--btn--sm { - height: 2rem; + block-size: 2rem; } // Subtle border overrides diff --git a/packages/styles/scss/components/data-table/_data-table.scss b/packages/styles/scss/components/data-table/_data-table.scss index cfc7c76ff9db..8fe29dba585b 100644 --- a/packages/styles/scss/components/data-table/_data-table.scss +++ b/packages/styles/scss/components/data-table/_data-table.scss @@ -31,7 +31,7 @@ .#{$prefix}--data-table-container { position: relative; // Allow space for focus styles - padding-top: $spacing-01; + padding-block-start: $spacing-01; } .#{$prefix}--data-table-content { @@ -71,7 +71,7 @@ // Data table //---------------------------------------------------------------------------- .#{$prefix}--data-table { - width: 100%; + inline-size: 100%; border-collapse: collapse; border-spacing: 0; } @@ -85,13 +85,13 @@ .#{$prefix}--data-table tbody { @include type-style('body-compact-01'); - width: 100%; + inline-size: 100%; background-color: $layer; } .#{$prefix}--data-table tr { - width: 100%; - height: $spacing-09; + inline-size: 100%; + block-size: $spacing-09; border: none; } @@ -108,7 +108,7 @@ .#{$prefix}--data-table tbody tr:hover td, .#{$prefix}--data-table tbody tr:hover th { border-top: 1px solid $layer-hover; - border-bottom: 1px solid $layer-hover; + border-block-end: 1px solid $layer-hover; background: $layer-hover; color: $text-primary; } @@ -130,15 +130,15 @@ &.#{$prefix}--data-table--lg tr:not([data-child-row]) td:not(.#{$prefix}--table-expand) { - padding-top: $spacing-05; + padding-block-start: $spacing-05; padding-bottom: $spacing-05; &.#{$prefix}--table-column-menu { - padding-top: $spacing-03; + padding-block-start: $spacing-03; } &.#{$prefix}--table-column-checkbox:not(.#{$prefix}--table-column-radio) { - padding-top: convert.to-rem(13px); + padding-block-start: convert.to-rem(13px); } } @@ -150,15 +150,15 @@ .#{$prefix}--data-table.#{$prefix}--data-table--top-aligned-header { &.#{$prefix}--data-table--lg th:not(.#{$prefix}--table-expand):not(.#{$prefix}--table-sort__header) { - padding-top: $spacing-05; + padding-block-start: $spacing-05; padding-bottom: $spacing-05; &.#{$prefix}--table-column-menu { - padding-top: $spacing-03; + padding-block-start: $spacing-03; } &.#{$prefix}--table-column-checkbox { - padding-top: convert.to-rem(13px); + padding-block-start: convert.to-rem(13px); } } @@ -178,8 +178,8 @@ } .#{$prefix}--data-table th { - padding-right: $spacing-05; - padding-left: $spacing-05; + padding-inline-end: $spacing-05; + padding-inline-start: $spacing-05; background-color: $layer-accent; color: $text-primary; } @@ -187,7 +187,7 @@ .#{$prefix}--data-table th:last-of-type { // Do not use `position: relative`, as its behavior is undefined for many table elements: https://www.w3.org/TR/CSS21/visuren.html#propdef-position position: static; - width: auto; + inline-size: auto; } .#{$prefix}--data-table .#{$prefix}--table-header-label { @@ -196,15 +196,15 @@ .#{$prefix}--data-table td, .#{$prefix}--data-table tbody th { - padding-right: $spacing-05; - padding-left: $spacing-05; + padding-inline-end: $spacing-05; + padding-inline-start: $spacing-05; border-top: 1px solid $layer; - border-bottom: 1px solid $border-subtle; + border-block-end: 1px solid $border-subtle; background: $layer; color: $text-secondary; + td:first-of-type { - padding-left: $spacing-04; + padding-inline-start: $spacing-04; } } @@ -286,8 +286,8 @@ svg { position: relative; // Used to center svg without setting display flex //display block needed for overflow text truncation - top: convert.to-rem(3px); - margin-right: $spacing-03; + inset-block-start: convert.to-rem(3px); + margin-inline-end: $spacing-03; } .#{$prefix}--data-table .#{$prefix}--overflow-menu, @@ -311,21 +311,21 @@ .#{$prefix}--data-table--xs td.#{$prefix}--table-column-menu, .#{$prefix}--data-table--sm td.#{$prefix}--table-column-menu { - height: convert.to-rem(24px); - padding-top: 0; + block-size: convert.to-rem(24px); + padding-block-start: 0; padding-bottom: 0; } .#{$prefix}--data-table--sm td.#{$prefix}--table-column-menu { - height: convert.to-rem(32px); + block-size: convert.to-rem(32px); } .#{$prefix}--data-table--md td.#{$prefix}--table-column-menu { - height: convert.to-rem(40px); + block-size: convert.to-rem(40px); } .#{$prefix}--data-table--xl .#{$prefix}--table-column-menu { - padding-top: $spacing-03; + padding-block-start: $spacing-03; } //---------------------------------------------------------------------------- @@ -336,7 +336,7 @@ tbody tr:not(.#{$prefix}--parent-row):nth-child(odd) td { - border-bottom: 1px solid $layer; + border-block-end: 1px solid $layer; } .#{$prefix}--data-table--zebra @@ -344,7 +344,7 @@ tr:not(.#{$prefix}--parent-row):nth-child(even) td { border-top: 1px solid $layer-accent; - border-bottom: 1px solid $layer-accent; + border-block-end: 1px solid $layer-accent; background-color: $layer-accent; } @@ -353,7 +353,7 @@ tr:not(.#{$prefix}--parent-row):hover td { border-top: 1px solid $layer-hover; - border-bottom: 1px solid $layer-hover; + border-block-end: 1px solid $layer-hover; background-color: $layer-hover; } @@ -361,13 +361,13 @@ // Select //---------------------------------------------------------------------------- .#{$prefix}--table-column-checkbox .#{$prefix}--checkbox-label { - padding-left: 0; + padding-inline-start: 0; } .#{$prefix}--data-table th.#{$prefix}--table-column-checkbox { // Do not use `position: relative`, as its behavior is undefined for many table elements: https://www.w3.org/TR/CSS21/visuren.html#propdef-position position: static; - width: convert.to-rem(32px); + inline-size: convert.to-rem(32px); background: $layer-accent; transition: background-color $duration-fast-01 motion(entrance, productive); } @@ -383,62 +383,62 @@ .#{$prefix}--data-table tbody td.#{$prefix}--table-column-checkbox { min-width: 2.5rem; // spacing between checkbox / chevron and next cell should be 8px / 0.5rem - padding-right: convert.to-rem(4px); - padding-left: 1rem; + padding-inline-end: convert.to-rem(4px); + padding-inline-start: 1rem; } .#{$prefix}--data-table thead th.#{$prefix}--table-expand, .#{$prefix}--data-table tbody td.#{$prefix}--table-expand { - width: convert.to-rem(32px); - height: convert.to-rem(32px); + inline-size: convert.to-rem(32px); + block-size: convert.to-rem(32px); } .#{$prefix}--data-table--xs thead th.#{$prefix}--table-expand, .#{$prefix}--data-table--xs tbody td.#{$prefix}--table-expand { - width: convert.to-rem(24px); - height: convert.to-rem(24px); + inline-size: convert.to-rem(24px); + block-size: convert.to-rem(24px); padding: 0 0 0 0.5rem; } .#{$prefix}--data-table--sm thead th.#{$prefix}--table-expand, .#{$prefix}--data-table--sm tbody td.#{$prefix}--table-expand { - width: convert.to-rem(32px); - height: convert.to-rem(32px); + inline-size: convert.to-rem(32px); + block-size: convert.to-rem(32px); padding: 0; - padding-left: 0.5rem; + padding-inline-start: 0.5rem; } .#{$prefix}--data-table--md thead th.#{$prefix}--table-expand, .#{$prefix}--data-table--md tbody td.#{$prefix}--table-expand { - width: convert.to-rem(40px); - height: convert.to-rem(40px); + inline-size: convert.to-rem(40px); + block-size: convert.to-rem(40px); padding: convert.to-rem(4px) 0 convert.to-rem(4px) convert.to-rem(8px); } .#{$prefix}--data-table--xl thead th.#{$prefix}--table-expand, .#{$prefix}--data-table--xl tbody td.#{$prefix}--table-expand { - height: convert.to-rem(64px); - padding-top: convert.to-rem(10px); + block-size: convert.to-rem(64px); + padding-block-start: convert.to-rem(10px); padding-bottom: convert.to-rem(22px); } .#{$prefix}--data-table--xl .#{$prefix}--table-column-checkbox { - padding-top: convert.to-rem(13px); + padding-block-start: convert.to-rem(13px); } .#{$prefix}--data-table--xl .#{$prefix}--table-column-radio { - padding-top: $spacing-05; + padding-block-start: $spacing-05; } //---------------------------------------------------------------------------- // Radio //---------------------------------------------------------------------------- .#{$prefix}--table-column-radio { - width: 48px; + inline-size: 48px; } .#{$prefix}--table-column-radio .#{$prefix}--radio-button__appearance { - margin-right: convert.to-rem(-2px); + margin-inline-end: convert.to-rem(-2px); } // default selected row + zebra select - even child @@ -449,7 +449,7 @@ tr.#{$prefix}--data-table--selected td { border-top: 1px solid $layer-selected; // Bottom border acts as separator from other rows - border-bottom: 1px solid $layer-active; + border-block-end: 1px solid $layer-active; background-color: $layer-selected; color: $text-primary; } @@ -476,7 +476,7 @@ tr.#{$prefix}--data-table--selected:last-of-type td { // Doesn't need separators border-top: 1px solid $layer-selected; - border-bottom: 1px solid $layer-selected; + border-block-end: 1px solid $layer-selected; } // zebra select - odd child @@ -484,14 +484,14 @@ tbody tr:nth-child(even).#{$prefix}--data-table--selected td { - border-bottom: 1px solid $layer-active; + border-block-end: 1px solid $layer-active; } .#{$prefix}--data-table--zebra tbody tr:nth-child(even).#{$prefix}--data-table--selected:hover td { - border-bottom: 1px solid $data-table-column-hover; + border-block-end: 1px solid $data-table-column-hover; } // hover + zebra select - even child @@ -501,7 +501,7 @@ td, .#{$prefix}--data-table tbody .#{$prefix}--data-table--selected:hover td { border-top: 1px solid $data-table-column-hover; - border-bottom: 1px solid $data-table-column-hover; + border-block-end: 1px solid $data-table-column-hover; background: $data-table-column-hover; color: $text-primary; } @@ -519,23 +519,23 @@ .#{$prefix}--data-table--xs thead tr, .#{$prefix}--data-table--xs tbody tr, .#{$prefix}--data-table--xs tbody tr th { - height: convert.to-rem(24px); + block-size: convert.to-rem(24px); } .#{$prefix}--data-table--xs .#{$prefix}--table-header-label { - padding-top: convert.to-rem(2px); + padding-block-start: convert.to-rem(2px); padding-bottom: convert.to-rem(2px); } .#{$prefix}--data-table--xs td, .#{$prefix}--data-table--xs tbody tr th { - padding-top: convert.to-rem(2px); + padding-block-start: convert.to-rem(2px); padding-bottom: convert.to-rem(2px); } .#{$prefix}--data-table--xs .#{$prefix}--overflow-menu { - width: convert.to-rem(32px); - height: calc(100% + 1px); + inline-size: convert.to-rem(32px); + block-size: calc(100% + 1px); } .#{$prefix}--data-table.#{$prefix}--data-table--xs:not( @@ -546,16 +546,16 @@ .#{$prefix}--data-table--top-aligned-header ) th.#{$prefix}--table-column-checkbox { - padding-top: 0; + padding-block-start: 0; padding-bottom: 0; } .#{$prefix}--data-table.#{$prefix}--data-table--xs .#{$prefix}--table-column-checkbox .#{$prefix}--checkbox-label { - height: convert.to-rem(23px); + block-size: convert.to-rem(23px); // 24px row - 1px border - min-height: convert.to-rem(23px); + min-block-size: convert.to-rem(23px); } //---------------------------------------------------------------------------- @@ -564,11 +564,11 @@ .#{$prefix}--data-table--sm thead tr, .#{$prefix}--data-table--sm tbody tr, .#{$prefix}--data-table--sm tbody tr th { - height: convert.to-rem(32px); + block-size: convert.to-rem(32px); } .#{$prefix}--data-table--sm .#{$prefix}--table-header-label { - padding-top: convert.to-rem(7px); + padding-block-start: convert.to-rem(7px); padding-bottom: convert.to-rem(7px); } @@ -576,7 +576,7 @@ .#{$prefix}--data-table--sm tbody tr th, .#{$prefix}--data-table--sm.#{$prefix}--data-table--top-aligned-header th.#{$prefix}--table-column-checkbox { - padding-top: convert.to-rem(7px); + padding-block-start: convert.to-rem(7px); padding-bottom: convert.to-rem(6px); } @@ -588,12 +588,12 @@ .#{$prefix}--data-table--top-aligned-header ) th.#{$prefix}--table-column-checkbox { - padding-top: convert.to-rem(3px); + padding-block-start: convert.to-rem(3px); padding-bottom: convert.to-rem(3px); } .#{$prefix}--data-table--sm .#{$prefix}--overflow-menu { - height: calc(100% + 1px); + block-size: calc(100% + 1px); } //---------------------------------------------------------------------------- @@ -602,19 +602,19 @@ .#{$prefix}--data-table--md thead tr, .#{$prefix}--data-table--md tbody tr, .#{$prefix}--data-table--md tbody tr th { - height: convert.to-rem(40px); + block-size: convert.to-rem(40px); } .#{$prefix}--data-table--md .#{$prefix}--table-header-label, .#{$prefix}--data-table--md.#{$prefix}--data-table--top-aligned-header th.#{$prefix}--table-column-checkbox { - padding-top: convert.to-rem(7px); + padding-block-start: convert.to-rem(7px); padding-bottom: convert.to-rem(7px); } .#{$prefix}--data-table--md td, .#{$prefix}--data-table--md tbody tr th { - padding-top: convert.to-rem(7px); + padding-block-start: convert.to-rem(7px); padding-bottom: convert.to-rem(6px); } @@ -626,12 +626,12 @@ .#{$prefix}--data-table--top-aligned-header ) th.#{$prefix}--table-column-checkbox { - padding-top: convert.to-rem(3px); + padding-block-start: convert.to-rem(3px); padding-bottom: convert.to-rem(3px); } .#{$prefix}--data-table--md .#{$prefix}--table-column-menu { - padding-top: convert.to-rem(3px); + padding-block-start: convert.to-rem(3px); padding-bottom: convert.to-rem(3px); } @@ -641,17 +641,17 @@ .#{$prefix}--data-table--xl thead tr, .#{$prefix}--data-table--xl tbody tr, .#{$prefix}--data-table--xl tbody tr th { - height: convert.to-rem(64px); + block-size: convert.to-rem(64px); } .#{$prefix}--data-table--xl .#{$prefix}--table-header-label { - padding-top: $spacing-05; + padding-block-start: $spacing-05; padding-bottom: $spacing-05; } .#{$prefix}--data-table--xl td, .#{$prefix}--data-table--xl tbody tr th { - padding-top: $spacing-05; + padding-block-start: $spacing-05; padding-bottom: $spacing-05; } @@ -668,11 +668,11 @@ // Static //---------------------------------------------------------------------------- .#{$prefix}--data-table--static { - width: auto; + inline-size: auto; } .#{$prefix}--data-table-container--static { - width: fit-content; + inline-size: fit-content; } // ------------- @@ -698,16 +698,16 @@ thead { position: sticky; z-index: 1; - top: 0; + inset-block-start: 0; overflow: scroll; - width: 100%; + inline-size: 100%; // Hides ie scrollbar -ms-overflow-style: none; will-change: transform; } thead tr th { - border-bottom: 1px solid $layer-active; + border-block-end: 1px solid $layer-active; } tbody { @@ -719,12 +719,12 @@ } tr.#{$prefix}--parent-row.#{$prefix}--expandable-row { - height: auto; - min-height: 3rem; + block-size: auto; + min-block-size: 3rem; } tr.#{$prefix}--expandable-row:not(.#{$prefix}--parent-row) { - height: auto; + block-size: auto; } .#{$prefix}--table-expand { @@ -736,7 +736,7 @@ } .#{$prefix}--parent-row { - min-height: 3rem; + min-block-size: 3rem; } &:not(.#{$prefix}--data-table--xs):not(.#{$prefix}--data-table--xl):not( @@ -745,7 +745,7 @@ td:not(.#{$prefix}--table-column-menu):not( .#{$prefix}--table-column-checkbox ) { - padding-top: convert.to-rem(14px); + padding-block-start: convert.to-rem(14px); } // Taken from L125 _data-table-expandable @@ -767,7 +767,7 @@ // Selectable fix thead th.#{$prefix}--table-column-checkbox, tbody tr td.#{$prefix}--table-column-checkbox { - width: convert.to-rem(36px); + inline-size: convert.to-rem(36px); min-width: convert.to-rem(36px); align-items: center; } @@ -788,9 +788,9 @@ } td.#{$prefix}--table-column-menu { - height: auto; + block-size: auto; align-items: center; - padding-top: 0; + padding-block-start: 0; } //hides webkit scrollbar @@ -808,7 +808,7 @@ } tbody tr:last-of-type { - border-bottom: 0; + border-block-end: 0; } th:not(.#{$prefix}--table-column-checkbox):not( @@ -817,35 +817,35 @@ td:not(.#{$prefix}--table-column-checkbox):not( .#{$prefix}--table-column-menu ):not(.#{$prefix}--table-expand):not(.#{$prefix}--table-column-icon) { - width: 100%; + inline-size: 100%; min-width: 0; } &.#{$prefix}--data-table--xs tr:not(.#{$prefix}--expandable-row), &.#{$prefix}--data-table--sm tr:not(.#{$prefix}--expandable-row), &.#{$prefix}--data-table--xl tr:not(.#{$prefix}--expandable-row) { - height: auto; + block-size: auto; } &.#{$prefix}--data-table--xs tr:not(.#{$prefix}--expandable-row) { - min-height: convert.to-rem(24px); + min-block-size: convert.to-rem(24px); } &.#{$prefix}--data-table--sm tr:not(.#{$prefix}--expandable-row) { - min-height: convert.to-rem(32px); + min-block-size: convert.to-rem(32px); } &.#{$prefix}--data-table--xl tr:not(.#{$prefix}--expandable-row) { - min-height: convert.to-rem(64px); + min-block-size: convert.to-rem(64px); } // Expansion overrides &.#{$prefix}--data-table--xs tr td.#{$prefix}--table-expand { - padding-top: convert.to-rem(4px); + padding-block-start: convert.to-rem(4px); } &.#{$prefix}--data-table--sm tr td.#{$prefix}--table-expand { - padding-top: convert.to-rem(8px); + padding-block-start: convert.to-rem(8px); } .#{$prefix}--table-header-label { @@ -853,23 +853,23 @@ max-width: calc(100% - 10px); // Needed to reduce 1px jump when toggling between variations - padding-top: convert.to-rem(15px); + padding-block-start: convert.to-rem(15px); padding-bottom: 1rem; overflow-y: hidden; } &.#{$prefix}--data-table--xs th .#{$prefix}--table-header-label { - padding-top: convert.to-rem(3px); + padding-block-start: convert.to-rem(3px); padding-bottom: 0; } &.#{$prefix}--data-table--sm th .#{$prefix}--table-header-label { - padding-top: convert.to-rem(8px); + padding-block-start: convert.to-rem(8px); padding-bottom: 0; } &.#{$prefix}--data-table--xl th .#{$prefix}--table-header-label { - padding-top: 1rem; + padding-block-start: 1rem; } &.#{$prefix}--data-table--xl th.#{$prefix}--table-expand { diff --git a/packages/styles/scss/components/data-table/action/_data-table-action.scss b/packages/styles/scss/components/data-table/action/_data-table-action.scss index 3be4eb510ce8..40f7f01483a5 100644 --- a/packages/styles/scss/components/data-table/action/_data-table-action.scss +++ b/packages/styles/scss/components/data-table/action/_data-table-action.scss @@ -29,15 +29,15 @@ position: relative; z-index: 1; display: flex; - width: 100%; - min-height: $spacing-09; + inline-size: 100%; + min-block-size: $spacing-09; background-color: $layer; } .#{$prefix}--toolbar-content { display: flex; - width: 100%; - height: $spacing-09; + inline-size: 100%; + block-size: $spacing-09; justify-content: flex-end; transform: translate3d(0, 0, 0); transition: transform $duration-fast-02 motion(standard, productive), @@ -49,15 +49,15 @@ } .#{$prefix}--toolbar-content .#{$prefix}--search .#{$prefix}--search-input { - height: 3rem; + block-size: 3rem; padding: 0 3rem; // For toolbar animation with (esp.) persistent search box background-color: transparent; } .#{$prefix}--toolbar-content .#{$prefix}--overflow-menu { - width: 3rem; - height: 3rem; + inline-size: 3rem; + block-size: 3rem; } //------------------------------------------------- @@ -75,8 +75,8 @@ //------------------------------------------------- .#{$prefix}--toolbar-search-container-expandable { position: relative; - width: $spacing-09; - height: $spacing-09; + inline-size: $spacing-09; + block-size: $spacing-09; box-shadow: none; cursor: pointer; transition: width $transition-expansion $standard-easing, @@ -88,11 +88,11 @@ } .#{$prefix}--search.#{$prefix}--toolbar-search-container-expandable { - width: 3rem; + inline-size: 3rem; } .#{$prefix}--toolbar-search-container-expandable .#{$prefix}--search-input { - height: 100%; + block-size: 100%; cursor: pointer; opacity: 0; } @@ -115,12 +115,12 @@ .#{$prefix}--toolbar-search-container-expandable.#{$prefix}--search .#{$prefix}--search-close { - width: $spacing-09; - height: $spacing-09; + inline-size: $spacing-09; + block-size: $spacing-09; &::before { - top: convert.to-rem(2px); - height: calc(100% - #{convert.to-rem(4px)}); + inset-block-start: convert.to-rem(2px); + block-size: calc(100% - #{convert.to-rem(4px)}); background-color: $field-hover; } } @@ -137,14 +137,14 @@ .#{$prefix}--table-toolbar .#{$prefix}--search--lg .#{$prefix}--search-magnifier-icon { - left: 0; + inset-inline-start: 0; } // lg persistent icon spacing .#{$prefix}--table-toolbar:not(.#{$prefix}--table-toolbar--sm) .#{$prefix}--toolbar-search-container-persistent.#{$prefix}--search--lg .#{$prefix}--search-magnifier-icon { - left: 1rem; + inset-inline-start: 1rem; } // sm expandable icon spacing @@ -153,26 +153,26 @@ .#{$prefix}--toolbar-search-container-active ):not(.#{$prefix}--toolbar-search-container-persistent) .#{$prefix}--search-magnifier-icon { - left: 0; + inset-inline-start: 0; } .#{$prefix}--table-toolbar.#{$prefix}--table-toolbar--sm .#{$prefix}--search--sm.#{$prefix}--toolbar-search-container-active .#{$prefix}--search-magnifier-icon { - left: 0.5rem; + inset-inline-start: 0.5rem; } // sm persistent icon spacing .#{$prefix}--table-toolbar .#{$prefix}--toolbar-search-container-persistent.#{$prefix}--search--sm .#{$prefix}--search-magnifier-icon { - left: 0.5rem; + inset-inline-start: 0.5rem; } .#{$prefix}--toolbar-search-container-expandable .#{$prefix}--search-magnifier-icon { - width: $spacing-09; - height: $spacing-09; + inline-size: $spacing-09; + block-size: $spacing-09; padding: $spacing-05; } @@ -199,7 +199,7 @@ //------------------------------------------------- .#{$prefix}--toolbar-search-container-active.#{$prefix}--search { - width: 100%; + inline-size: 100%; } .#{$prefix}--toolbar-search-container-active .#{$prefix}--search-input { @@ -250,8 +250,8 @@ @include button-reset.reset; display: flex; - width: $spacing-09; - height: $spacing-09; + inline-size: $spacing-09; + block-size: $spacing-09; padding: $spacing-05; cursor: pointer; transition: background $duration-fast-02 motion(entrance, productive); @@ -262,8 +262,8 @@ @include button-reset.reset; display: flex; - width: $spacing-09; - height: $spacing-09; + inline-size: $spacing-09; + block-size: $spacing-09; cursor: pointer; transition: background $duration-fast-02 motion(entrance, productive); } @@ -302,16 +302,16 @@ } .#{$prefix}--overflow-menu--data-table { - height: $spacing-09; + block-size: $spacing-09; } //------------------------------------------------- //TOOLBAR BUTTON ICONS //------------------------------------------------- .#{$prefix}--toolbar-action__icon { - width: auto; + inline-size: auto; max-width: $spacing-05; - height: $spacing-05; + block-size: $spacing-05; fill: $icon-primary; } @@ -320,15 +320,15 @@ //------------------------------------------------- .#{$prefix}--toolbar-search-container-persistent { position: relative; - width: 100%; - height: $spacing-09; + inline-size: 100%; + block-size: $spacing-09; opacity: 1; } .#{$prefix}--toolbar-search-container-persistent + .#{$prefix}--toolbar-content { position: relative; - width: auto; + inline-size: auto; } .#{$prefix}--toolbar-search-container-persistent .#{$prefix}--search { @@ -337,11 +337,11 @@ .#{$prefix}--toolbar-search-container-persistent .#{$prefix}--search-magnifier-icon { - left: $spacing-05; + inset-inline-start: $spacing-05; } .#{$prefix}--toolbar-search-container-persistent .#{$prefix}--search-input { - height: $spacing-09; + block-size: $spacing-09; padding: 0 $spacing-09; border: none; } @@ -364,8 +364,8 @@ } .#{$prefix}--toolbar-search-container-persistent .#{$prefix}--search-close { - width: $spacing-09; - height: $spacing-09; + inline-size: $spacing-09; + block-size: $spacing-09; } .#{$prefix}--batch-actions--active ~ .#{$prefix}--toolbar-search-container, @@ -382,8 +382,8 @@ .#{$prefix}--batch-actions { position: absolute; right: 0; - bottom: 0; - left: 0; + inset-block-end: 0; + inset-inline-start: 0; display: flex; align-items: center; justify-content: space-between; @@ -417,8 +417,8 @@ } .#{$prefix}--action-list .#{$prefix}--btn { - padding-right: $spacing-05; - padding-left: $spacing-05; + padding-inline-end: $spacing-05; + padding-inline-start: $spacing-05; color: $text-on-color; white-space: nowrap; } @@ -432,7 +432,7 @@ .#{$prefix}--action-list .#{$prefix}--btn .#{$prefix}--btn__icon { position: static; - margin-left: $spacing-03; + margin-inline-start: $spacing-03; fill: $icon-on-color; } @@ -471,11 +471,11 @@ .#{$prefix}--btn--primary.#{$prefix}--batch-summary__cancel::before { position: absolute; //visually 16px spacing is 1px too low - top: convert.to-rem(15px); - left: 0; + inset-block-start: convert.to-rem(15px); + inset-inline-start: 0; display: block; - width: convert.to-rem(1px); - height: $spacing-05; + inline-size: convert.to-rem(1px); + block-size: $spacing-05; border: none; background-color: $text-on-color; content: ''; @@ -492,9 +492,9 @@ .#{$prefix}--batch-summary { position: sticky; z-index: 100000; - left: 0; + inset-inline-start: 0; display: flex; - min-height: 3rem; + min-block-size: 3rem; align-items: center; padding: 0 $spacing-05; background-color: $background-brand; @@ -511,7 +511,7 @@ } .#{$prefix}--batch-summary__divider { - padding-left: $spacing-03; + padding-inline-start: $spacing-03; } //------------------------------------------------- @@ -519,41 +519,41 @@ //------------------------------------------------- .#{$prefix}--table-toolbar--sm { - height: convert.to-rem(32px); - min-height: convert.to-rem(32px); + block-size: convert.to-rem(32px); + min-block-size: convert.to-rem(32px); .#{$prefix}--toolbar-search-container-expandable, .#{$prefix}--toolbar-search-container-persistent { - height: convert.to-rem(32px); + block-size: convert.to-rem(32px); } .#{$prefix}--toolbar-search-container-expandable .#{$prefix}--search-input, .#{$prefix}--toolbar-search-container-persistent .#{$prefix}--search-input { - height: convert.to-rem(32px); + block-size: convert.to-rem(32px); } .#{$prefix}--toolbar-search-container-expandable .#{$prefix}--search-close, .#{$prefix}--toolbar-search-container-persistent .#{$prefix}--search-close { - width: convert.to-rem(32px); - height: convert.to-rem(32px); + inline-size: convert.to-rem(32px); + block-size: convert.to-rem(32px); } .#{$prefix}--toolbar-search-container-expandable .#{$prefix}--search-magnifier-icon, .#{$prefix}--toolbar-search-container-persistent .#{$prefix}--search-magnifier-icon { - width: convert.to-rem(32px); - height: convert.to-rem(32px); + inline-size: convert.to-rem(32px); + block-size: convert.to-rem(32px); padding: $spacing-03; } .#{$prefix}--toolbar-action.#{$prefix}--toolbar-search-container-persistent { - width: 100%; + inline-size: 100%; } //hidden .#{$prefix}--toolbar-search-container-expandable { - width: convert.to-rem(32px); + inline-size: convert.to-rem(32px); } .#{$prefix}--toolbar-search-container-expandable @@ -598,19 +598,19 @@ } .#{$prefix}--overflow-menu.#{$prefix}--toolbar-action { - width: convert.to-rem(32px); + inline-size: convert.to-rem(32px); //:after element is 2rem but w/o this trigger button is for some reason 28px min-width: convert.to-rem(32px); - height: convert.to-rem(32px); + block-size: convert.to-rem(32px); } .#{$prefix}--toolbar-content { - height: convert.to-rem(32px); + block-size: convert.to-rem(32px); } .#{$prefix}--toolbar-content .#{$prefix}--overflow-menu { - width: 2rem; - height: 2rem; + inline-size: 2rem; + block-size: 2rem; } } @@ -625,35 +625,35 @@ .#{$prefix}--table-toolbar--sm .#{$prefix}--batch-actions .#{$prefix}--action-list { - height: convert.to-rem(32px); + block-size: convert.to-rem(32px); } .#{$prefix}--table-toolbar--sm .#{$prefix}--toolbar-action { - width: convert.to-rem(32px); - height: convert.to-rem(32px); + inline-size: convert.to-rem(32px); + block-size: convert.to-rem(32px); padding: $spacing-03 0; } .#{$prefix}--table-toolbar--sm .#{$prefix}--btn--primary { - height: convert.to-rem(32px); - min-height: auto; - padding-top: 0.375rem; + block-size: convert.to-rem(32px); + min-block-size: auto; + padding-block-start: 0.375rem; padding-bottom: 0.375rem; } .#{$prefix}--table-toolbar--sm .#{$prefix}--btn--primary.#{$prefix}--batch-summary__cancel::before { - top: convert.to-rem(8px); + inset-block-start: convert.to-rem(8px); } .#{$prefix}--table-toolbar--sm .#{$prefix}--toolbar-action ~ .#{$prefix}--btn { overflow: hidden; - height: convert.to-rem(32px); + block-size: convert.to-rem(32px); } .#{$prefix}--table-toolbar--sm .#{$prefix}--batch-summary { - min-height: 2rem; + min-block-size: 2rem; } } diff --git a/packages/styles/scss/components/data-table/expandable/_data-table-expandable.scss b/packages/styles/scss/components/data-table/expandable/_data-table-expandable.scss index 2af188f4fbfa..42e47c8ed410 100644 --- a/packages/styles/scss/components/data-table/expandable/_data-table-expandable.scss +++ b/packages/styles/scss/components/data-table/expandable/_data-table-expandable.scss @@ -32,7 +32,7 @@ //---------------------------------------------------------------------------- // default styles .#{$prefix}--expandable-row--hidden td { - width: auto; + inline-size: auto; padding: $spacing-05; border-top: 0; } @@ -40,14 +40,14 @@ //child row hidden tr.#{$prefix}--parent-row:not(.#{$prefix}--expandable-row) + tr[data-child-row] { - height: 0; + block-size: 0; transition: height $duration-moderate-01 motion(standard, productive); } tr.#{$prefix}--parent-row:not(.#{$prefix}--expandable-row) + tr[data-child-row] td { - padding-top: 0; + padding-block-start: 0; padding-bottom: 0; border: 0; background-color: $layer-hover; @@ -69,8 +69,8 @@ } tr.#{$prefix}--parent-row.#{$prefix}--expandable-row + tr[data-child-row] td { - padding-left: 3.5rem; - border-bottom: 1px solid $border-subtle; + padding-inline-start: 3.5rem; + border-block-end: 1px solid $border-subtle; transition: padding-bottom $duration-fast-02 motion(standard, productive), transform $duration-fast-02 motion(standard, productive), background-color $duration-fast-02 motion(standard, productive); @@ -86,7 +86,7 @@ // bottom border overrides .#{$prefix}--parent-row.#{$prefix}--expandable-row > td, .#{$prefix}--parent-row.#{$prefix}--expandable-row + tr[data-child-row] > td { - border-bottom: 1px solid $border-subtle; + border-block-end: 1px solid $border-subtle; box-shadow: 0 1px $border-subtle; } @@ -115,34 +115,34 @@ tr.#{$prefix}--parent-row:not(.#{$prefix}--expandable-row):first-of-type:hover td { border-top: 1px solid $border-subtle; - border-bottom: 1px solid $border-subtle; + border-block-end: 1px solid $border-subtle; } // hovering on expanded parent tr.#{$prefix}--parent-row.#{$prefix}--expandable-row:hover td { border-top: 1px solid $border-subtle; - border-bottom: 1px solid $border-subtle; + border-block-end: 1px solid $border-subtle; background-color: $layer-hover; color: $text-primary; } tr.#{$prefix}--parent-row.#{$prefix}--expandable-row:hover td:first-of-type { // First td doesn't have a visible border - border-bottom: 1px solid $layer-hover; + border-block-end: 1px solid $layer-hover; } // Child row when hovering on expanded parent tr.#{$prefix}--parent-row.#{$prefix}--expandable-row:hover + tr[data-child-row] td { - border-bottom: 1px solid $border-subtle; + border-block-end: 1px solid $border-subtle; background-color: $layer-hover; color: $text-primary; } //hovering on expanded child row tr.#{$prefix}--expandable-row--hover + tr[data-child-row] td { - border-bottom: 1px solid $border-subtle; + border-block-end: 1px solid $border-subtle; } //hovering on expanded child row (class added to parent) @@ -152,7 +152,7 @@ tr.#{$prefix}--expandable-row--hover td { border-top: 1px solid $border-subtle; - border-bottom: 1px solid $border-subtle; + border-block-end: 1px solid $border-subtle; background-color: $layer-hover; color: $text-primary; } @@ -160,14 +160,14 @@ tr.#{$prefix}--parent-row.#{$prefix}--expandable-row.#{$prefix}--expandable-row--hover td:first-of-type { // First parent td doesn't have visible bottom border - border-bottom: 1px solid transparent; + border-block-end: 1px solid transparent; } //---------------------------------------------------------------------------- // Expand icon column //---------------------------------------------------------------------------- .#{$prefix}--data-table td.#{$prefix}--table-expand { - border-bottom: 1px solid $border-subtle; + border-block-end: 1px solid $border-subtle; } .#{$prefix}--data-table @@ -176,8 +176,8 @@ .#{$prefix}--data-table td.#{$prefix}--table-expand + .#{$prefix}--table-column-checkbox { - padding-right: convert.to-rem(6px); - padding-left: convert.to-rem(6px); + padding-inline-end: convert.to-rem(6px); + padding-inline-start: convert.to-rem(6px); } .#{$prefix}--data-table @@ -188,18 +188,18 @@ td.#{$prefix}--table-expand + .#{$prefix}--table-column-checkbox + td { - padding-left: convert.to-rem(8px); + padding-inline-start: convert.to-rem(8px); } .#{$prefix}--data-table td.#{$prefix}--table-expand, .#{$prefix}--data-table th.#{$prefix}--table-expand { padding: 0.5rem; - padding-right: 0; + padding-inline-end: 0; } .#{$prefix}--data-table td.#{$prefix}--table-expand[data-previous-value='collapsed'] { - border-bottom: 1px solid transparent; + border-block-end: 1px solid transparent; } .#{$prefix}--table-expand[data-previous-value='collapsed'] @@ -212,9 +212,9 @@ @include button-reset.reset('false'); display: inline-flex; - width: 100%; + inline-size: 100%; // Account for the border in `.bx--table-expand` - height: calc(100% + 1px); + block-size: calc(100% + 1px); align-items: center; justify-content: center; padding: 0 $spacing-03; @@ -227,9 +227,9 @@ .#{$prefix}--data-table--top-aligned-header th .#{$prefix}--table-expand__button { - height: convert.to-rem(32px); + block-size: convert.to-rem(32px); align-items: start; - padding-top: $spacing-03; + padding-block-start: $spacing-03; } .#{$prefix}--data-table--top-aligned-body.#{$prefix}--data-table--xs @@ -238,8 +238,8 @@ .#{$prefix}--data-table--top-aligned-header.#{$prefix}--data-table--xs th .#{$prefix}--table-expand__button { - height: convert.to-rem(24px); - padding-top: $spacing-02; + block-size: convert.to-rem(24px); + padding-block-start: $spacing-02; } .#{$prefix}--data-table--top-aligned-body.#{$prefix}--data-table--md @@ -248,7 +248,7 @@ .#{$prefix}--data-table--top-aligned-header.#{$prefix}--data-table--md th .#{$prefix}--table-expand__button { - padding-top: $spacing-03; + padding-block-start: $spacing-03; margin-top: -$spacing-02; } @@ -264,7 +264,7 @@ } .#{$prefix}--data-table--xl .#{$prefix}--table-expand__button { - width: convert.to-rem(32px); + inline-size: convert.to-rem(32px); } // fix expanded parent separating border length @@ -272,10 +272,10 @@ td.#{$prefix}--table-expand + td::after { position: absolute; - bottom: convert.to-rem(-1px); - left: 0; - width: convert.to-rem(8px); - height: convert.to-rem(1px); + inset-block-end: convert.to-rem(-1px); + inset-inline-start: 0; + inline-size: convert.to-rem(8px); + block-size: convert.to-rem(1px); background: $layer-accent; content: ''; } @@ -300,13 +300,13 @@ //---------------------------------------------------------------------------- .#{$prefix}--data-table--zebra tbody tr[data-parent-row]:nth-child(4n + 3) td, .#{$prefix}--data-table--zebra tbody tr[data-child-row]:nth-child(4n + 4) td { - border-bottom: 1px solid $layer; + border-block-end: 1px solid $layer; } .#{$prefix}--data-table--zebra tbody tr[data-parent-row]:nth-child(4n + 1) td, .#{$prefix}--data-table--zebra tbody tr[data-child-row]:nth-child(4n + 2) td { border-top: 1px solid $layer-accent; - border-bottom: 1px solid $layer-accent; + border-block-end: 1px solid $layer-accent; background-color: $layer-accent; } @@ -328,7 +328,7 @@ td, .#{$prefix}--data-table--zebra tbody tr[data-child-row]:hover td { border-top: 1px solid $layer-hover; - border-bottom: 1px solid $layer-hover; + border-block-end: 1px solid $layer-hover; background-color: $layer-hover; } @@ -336,7 +336,7 @@ tr.#{$prefix}--parent-row.#{$prefix}--expandable-row.#{$prefix}--expandable-row--hover td { border-top: 1px solid $layer-hover; - border-bottom: 1px solid $layer-hover; + border-block-end: 1px solid $layer-hover; background: $layer-hover; } @@ -346,20 +346,20 @@ // Parent collapsed tr.#{$prefix}--parent-row.#{$prefix}--data-table--selected:first-of-type td { border-top: 1px solid $layer-active; - border-bottom: 1px solid $border-subtle; + border-block-end: 1px solid $border-subtle; background: $layer-selected; box-shadow: 0 1px $layer-active; } tr.#{$prefix}--parent-row.#{$prefix}--data-table--selected td { - border-bottom: 1px solid transparent; + border-block-end: 1px solid transparent; background: $layer-selected; box-shadow: 0 1px $layer-active; color: $text-primary; } tr.#{$prefix}--parent-row.#{$prefix}--data-table--selected:last-of-type td { - border-bottom: 1px solid transparent; + border-block-end: 1px solid transparent; background: $layer-selected; box-shadow: 0 1px $border-subtle; } @@ -370,7 +370,7 @@ ):hover td { border-top: 1px solid $layer-selected-hover; - border-bottom: 1px solid $border-subtle; + border-block-end: 1px solid $border-subtle; background: $layer-selected-hover; box-shadow: 0 1px $layer-selected-hover; } @@ -380,7 +380,7 @@ td, tr.#{$prefix}--parent-row.#{$prefix}--data-table--selected.#{$prefix}--expandable-row td:first-of-type { - border-bottom: 1px solid transparent; + border-block-end: 1px solid transparent; // No visible border when expanded box-shadow: 0 1px $layer-selected; } @@ -395,7 +395,7 @@ tr.#{$prefix}--parent-row.#{$prefix}--data-table--selected.#{$prefix}--expandable-row--hover td:first-of-type { border-top: 1px solid $layer-selected-hover; - border-bottom: 1px solid transparent; + border-block-end: 1px solid transparent; background: $layer-selected-hover; box-shadow: 0 1px $layer-selected-hover; } @@ -405,7 +405,7 @@ + tr[data-child-row] td { border-top: 1px solid $layer-active; - border-bottom: 1px solid $border-subtle; + border-block-end: 1px solid $border-subtle; background-color: $layer-hover; box-shadow: 0 1px $layer-active; color: $text-primary; diff --git a/packages/styles/scss/components/data-table/skeleton/_data-table-skeleton.scss b/packages/styles/scss/components/data-table/skeleton/_data-table-skeleton.scss index 66d698018fd8..578ecd04ba6f 100644 --- a/packages/styles/scss/components/data-table/skeleton/_data-table-skeleton.scss +++ b/packages/styles/scss/components/data-table/skeleton/_data-table-skeleton.scss @@ -16,7 +16,7 @@ /// @group data-table @mixin data-table-skeleton { .#{$prefix}--data-table.#{$prefix}--skeleton th { - padding-left: 1rem; + padding-inline-start: 1rem; vertical-align: middle; } @@ -26,8 +26,8 @@ display: block; - width: convert.to-rem(64px); - height: convert.to-rem(16px); + inline-size: convert.to-rem(64px); + block-size: convert.to-rem(16px); } .#{$prefix}--data-table.#{$prefix}--skeleton tr:hover td { @@ -56,16 +56,16 @@ .#{$prefix}--data-table-header__title { @include skeleton; - width: convert.to-rem(120px); - height: convert.to-rem(24px); + inline-size: convert.to-rem(120px); + block-size: convert.to-rem(24px); } .#{$prefix}--data-table-container.#{$prefix}--skeleton .#{$prefix}--data-table-header__description { @include skeleton; - width: convert.to-rem(160px); - height: convert.to-rem(16px); + inline-size: convert.to-rem(160px); + block-size: convert.to-rem(16px); margin-top: $spacing-03; } diff --git a/packages/styles/scss/components/data-table/sort/_data-table-sort.scss b/packages/styles/scss/components/data-table/sort/_data-table-sort.scss index 7ca49de7ab88..b5ce560249af 100644 --- a/packages/styles/scss/components/data-table/sort/_data-table-sort.scss +++ b/packages/styles/scss/components/data-table/sort/_data-table-sort.scss @@ -23,10 +23,10 @@ // ------------------------------------- .#{$prefix}--data-table--sort th, .#{$prefix}--data-table th[aria-sort] { - height: $spacing-09; + block-size: $spacing-09; padding: 0; border-top: none; - border-bottom: none; + border-block-end: none; } // hidden sort description @@ -41,11 +41,11 @@ @include button-reset.reset(false); display: flex; - width: 100%; - min-height: 100%; + inline-size: 100%; + min-block-size: 100%; align-items: center; justify-content: space-between; - padding-left: $spacing-05; + padding-inline-start: $spacing-05; background-color: $layer-accent; color: $text-primary; font: inherit; @@ -73,8 +73,8 @@ .#{$prefix}--data-table.#{$prefix}--data-table--sort th > .#{$prefix}--table-header-label { - padding-right: $spacing-05; - padding-left: $spacing-05; + padding-inline-end: $spacing-05; + padding-inline-start: $spacing-05; line-height: 1; } @@ -83,9 +83,9 @@ // ------------------------------------- th .#{$prefix}--table-sort__flex { display: flex; - width: 100%; - height: 100%; - min-height: 3rem; + inline-size: 100%; + block-size: 100%; + min-block-size: 3rem; align-items: center; justify-content: space-between; } @@ -96,7 +96,7 @@ .#{$prefix}--data-table.#{$prefix}--data-table--top-aligned-header.#{$prefix}--data-table--lg th.#{$prefix}--table-sort__header { - padding-top: $spacing-05; + padding-block-start: $spacing-05; } .#{$prefix}--data-table.#{$prefix}--data-table--top-aligned-header.#{$prefix}--data-table--sm @@ -107,19 +107,19 @@ th.#{$prefix}--table-sort__header .#{$prefix}--table-sort__flex .#{$prefix}--table-header-label { - padding-top: 0; + padding-block-start: 0; padding-bottom: 0; } .#{$prefix}--data-table.#{$prefix}--data-table--top-aligned-header.#{$prefix}--data-table--sm th.#{$prefix}--table-sort__header { - padding-top: convert.to-rem(7px); + padding-block-start: convert.to-rem(7px); padding-bottom: convert.to-rem(7px); } .#{$prefix}--data-table.#{$prefix}--data-table--top-aligned-header.#{$prefix}--data-table--xs th.#{$prefix}--table-sort__header { - padding-top: convert.to-rem(2px); + padding-block-start: convert.to-rem(2px); padding-bottom: convert.to-rem(2px); } @@ -132,32 +132,32 @@ https://github.com/philipwalton/flexbugs/issues/231 */ @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) { - height: 2.99rem; + block-size: 2.99rem; } } .#{$prefix}--data-table--xs.#{$prefix}--data-table--sort th .#{$prefix}--table-sort__flex { - min-height: 1.5rem; + min-block-size: 1.5rem; } .#{$prefix}--data-table--sm.#{$prefix}--data-table--sort th .#{$prefix}--table-sort__flex { - min-height: 2rem; + min-block-size: 2rem; } .#{$prefix}--data-table--md.#{$prefix}--data-table--sort th .#{$prefix}--table-sort__flex { - min-height: 2.5rem; + min-block-size: 2.5rem; } .#{$prefix}--data-table--xl.#{$prefix}--data-table--sort th .#{$prefix}--table-sort__flex { - min-height: 4rem; + min-block-size: 4rem; align-items: flex-start; } @@ -174,10 +174,10 @@ } .#{$prefix}--table-sort__icon-unsorted { - width: convert.to-rem(20px); + inline-size: convert.to-rem(20px); min-width: $spacing-05; - margin-right: $spacing-03; - margin-left: $spacing-03; + margin-inline-end: $spacing-03; + margin-inline-start: $spacing-03; fill: $icon-primary; opacity: 0; } @@ -203,10 +203,10 @@ } .#{$prefix}--table-sort__icon { - width: convert.to-rem(20px); + inline-size: convert.to-rem(20px); min-width: $spacing-05; - margin-right: $spacing-03; - margin-left: $spacing-03; + margin-inline-end: $spacing-03; + margin-inline-start: $spacing-03; fill: $icon-primary; opacity: 1; transform: rotate(0); @@ -218,29 +218,29 @@ //---------------------------------------------------------------------------- // Sortable compact .#{$prefix}--data-table--xs.#{$prefix}--data-table--sort th { - height: convert.to-rem(24px); + block-size: convert.to-rem(24px); } // Sortable Short .#{$prefix}--data-table--sm.#{$prefix}--data-table--sort th { - height: convert.to-rem(32px); + block-size: convert.to-rem(32px); } // Sortable Medium .#{$prefix}--data-table--md.#{$prefix}--data-table--sort th { - height: convert.to-rem(40px); + block-size: convert.to-rem(40px); } // Sortable Tall .#{$prefix}--data-table--xl.#{$prefix}--data-table--sort th { - height: convert.to-rem(64px); + block-size: convert.to-rem(64px); } .#{$prefix}--data-table--xl.#{$prefix}--data-table--sort th .#{$prefix}--table-sort { display: inline-block; - height: convert.to-rem(64px); + block-size: convert.to-rem(64px); } .#{$prefix}--data-table--xl .#{$prefix}--table-sort__icon-unsorted, diff --git a/packages/styles/scss/components/date-picker/_date-picker.scss b/packages/styles/scss/components/date-picker/_date-picker.scss index 771a60ffd205..f86071cc3d0f 100644 --- a/packages/styles/scss/components/date-picker/_date-picker.scss +++ b/packages/styles/scss/components/date-picker/_date-picker.scss @@ -59,7 +59,7 @@ .#{$prefix}--date-picker.#{$prefix}--date-picker--simple .#{$prefix}--date-picker__input, .#{$prefix}--date-picker.#{$prefix}--date-picker--simple .#{$prefix}--label { - width: convert.to-rem(120px); + inline-size: convert.to-rem(120px); } .#{$prefix}--date-picker.#{$prefix}--date-picker--simple @@ -68,19 +68,19 @@ .#{$prefix}--date-picker-input__wrapper--warn { .#{$prefix}--date-picker__input, ~ .#{$prefix}--form-requirement { - width: convert.to-rem(152px); + inline-size: convert.to-rem(152px); } } .#{$prefix}--date-picker.#{$prefix}--date-picker--simple.#{$prefix}--date-picker--short { .#{$prefix}--date-picker__input { - width: 5.7rem; + inline-size: 5.7rem; } } .#{$prefix}--date-picker.#{$prefix}--date-picker--single .#{$prefix}--date-picker__input { - width: convert.to-rem(288px); + inline-size: convert.to-rem(288px); } .#{$prefix}--date-picker @@ -95,10 +95,10 @@ position: relative; display: block; - height: convert.to-rem(40px); + block-size: convert.to-rem(40px); padding: 0 $spacing-05; border: none; - border-bottom: 1px solid $border-strong; + border-block-end: 1px solid $border-strong; background-color: $field; color: $text-primary; transition: $duration-fast-01 motion(standard, productive) all; @@ -109,7 +109,7 @@ } &:disabled { - border-bottom: 1px solid transparent; + border-block-end: 1px solid transparent; background-color: $field; color: $text-disabled; cursor: not-allowed; @@ -120,7 +120,7 @@ } &:disabled:hover { - border-bottom: 1px solid transparent; + border-block-end: 1px solid transparent; } &::placeholder { @@ -130,18 +130,18 @@ // Size variant styles .#{$prefix}--date-picker__input--lg { - height: convert.to-rem(48px); + block-size: convert.to-rem(48px); } .#{$prefix}--date-picker__input--sm { - height: convert.to-rem(32px); + block-size: convert.to-rem(32px); } .#{$prefix}--date-picker__icon { position: absolute; z-index: 1; // vertically center icon within parent container on IE11 - top: 50%; + inset-block-start: 50%; right: 1rem; fill: $icon-primary; pointer-events: none; @@ -168,7 +168,7 @@ } .#{$prefix}--date-picker__icon ~ .#{$prefix}--date-picker__input { - padding-right: $spacing-09; + padding-inline-end: $spacing-09; } .#{$prefix}--date-picker__input:disabled ~ .#{$prefix}--date-picker__icon { @@ -178,12 +178,12 @@ .#{$prefix}--date-picker--range > .#{$prefix}--date-picker-container:first-child { - margin-right: convert.to-rem(1px); + margin-inline-end: convert.to-rem(1px); } .#{$prefix}--date-picker--range .#{$prefix}--date-picker-container, .#{$prefix}--date-picker--range .#{$prefix}--date-picker__input { - width: convert.to-rem(143.5px); + inline-size: convert.to-rem(143.5px); } // Skeleton State @@ -191,7 +191,7 @@ .#{$prefix}--date-picker__input.#{$prefix}--skeleton { @include skeleton; - width: 100%; + inline-size: 100%; &::placeholder { color: transparent; @@ -201,8 +201,8 @@ .#{$prefix}--date-picker.#{$prefix}--skeleton .#{$prefix}--label { @include skeleton; - width: convert.to-rem(75px); - height: convert.to-rem(14px); + inline-size: convert.to-rem(75px); + block-size: convert.to-rem(14px); } // Windows HCM fix diff --git a/packages/styles/scss/components/date-picker/_flatpickr.scss b/packages/styles/scss/components/date-picker/_flatpickr.scss index 7096b50ff599..a652ceb5aedf 100644 --- a/packages/styles/scss/components/date-picker/_flatpickr.scss +++ b/packages/styles/scss/components/date-picker/_flatpickr.scss @@ -92,7 +92,7 @@ .flatpickr-calendar { position: absolute; overflow: hidden; - width: convert.to-rem(315px); + inline-size: convert.to-rem(315px); max-height: 0; box-sizing: border-box; padding: 0; @@ -121,8 +121,8 @@ z-index: 99999; display: flex; overflow: hidden; - width: convert.to-rem(288px); - height: convert.to-rem(336px); + inline-size: convert.to-rem(288px); + block-size: convert.to-rem(336px); flex-direction: column; align-items: center; justify-content: center; @@ -146,13 +146,13 @@ .flatpickr-calendar.inline { position: relative; - top: convert.to-rem(2px); + inset-block-start: convert.to-rem(2px); display: block; } .flatpickr-calendar.static { position: absolute; - top: calc(100% + 2px); + inset-block-start: calc(100% + 2px); } .flatpickr-calendar.static.open { @@ -161,12 +161,12 @@ } .flatpickr-calendar.hasWeeks { - width: auto; + inline-size: auto; } .dayContainer { display: flex; - height: convert.to-rem(246px); + block-size: convert.to-rem(246px); flex-wrap: wrap; justify-content: space-around; padding: 0; @@ -175,22 +175,22 @@ .flatpickr-calendar .hasWeeks .dayContainer, .flatpickr-calendar .hasTime .dayContainer { - border-bottom: 0; + border-block-end: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .flatpickr-calendar .hasWeeks .dayContainer { - border-left: 0; + border-inline-start: 0; } .flatpickr-calendar.showTimeInput.hasTime .flatpickr-time { - height: convert.to-rem(40px); + block-size: convert.to-rem(40px); border-top: 1px solid #e6e6e6; } .flatpickr-calendar.noCalendar.hasTime .flatpickr-time { - height: auto; + block-size: auto; } .flatpickr-calendar:focus { @@ -199,7 +199,7 @@ .flatpickr-months { display: flex; - width: 100%; + inline-size: 100%; justify-content: space-between; } @@ -207,7 +207,7 @@ @include type-style('heading-compact-01'); display: flex; - height: convert.to-rem(40px); + block-size: convert.to-rem(40px); align-items: center; background-color: transparent; color: $text-primary; @@ -219,8 +219,8 @@ .flatpickr-next-month { z-index: 3; display: flex; - width: convert.to-rem(40px); - height: convert.to-rem(40px); + inline-size: convert.to-rem(40px); + block-size: convert.to-rem(40px); align-items: center; justify-content: center; padding: 0; @@ -258,15 +258,15 @@ @include type-style('heading-compact-01'); display: flex; - height: convert.to-rem(28px); + block-size: convert.to-rem(28px); align-items: center; justify-content: center; text-align: center; } .flatpickr-current-month .cur-month { - margin-right: $spacing-02; - margin-left: $spacing-02; + margin-inline-end: $spacing-02; + margin-inline-start: $spacing-02; &:hover { background-color: $layer-hover; @@ -275,7 +275,7 @@ .numInputWrapper { position: relative; - width: convert.to-rem(60px); + inline-size: convert.to-rem(60px); &:hover { background-color: $background-hover; @@ -284,7 +284,7 @@ .numInputWrapper .numInput { display: inline-block; - width: 100%; + inline-size: 100%; padding: $spacing-02; border: none; margin: 0; @@ -317,16 +317,16 @@ } .numInputWrapper .arrowUp { - top: convert.to-rem(4px); - border-bottom: 0; + inset-block-start: convert.to-rem(4px); + border-block-end: 0; &::after { - border-bottom: convert.to-rem(4px) solid $icon-primary; + border-block-end: convert.to-rem(4px) solid $icon-primary; } } .numInputWrapper .arrowDown { - top: convert.to-rem(11px); + inset-block-start: convert.to-rem(11px); &::after { border-top: convert.to-rem(4px) solid $icon-primary; @@ -336,9 +336,9 @@ .numInputWrapper .arrowUp, .numInputWrapper .arrowDown { position: absolute; - left: 2.6rem; - width: convert.to-rem(12px); - height: 50%; + inset-inline-start: 2.6rem; + inline-size: convert.to-rem(12px); + block-size: 50%; padding: 0 convert.to-rem(4px) 0 convert.to-rem(2px); border: none; cursor: pointer; @@ -347,10 +347,10 @@ &::after { position: absolute; - top: 33%; + inset-block-start: 33%; display: block; - border-right: convert.to-rem(4px) solid transparent; - border-left: convert.to-rem(4px) solid transparent; + border-inline-end: convert.to-rem(4px) solid transparent; + border-inline-start: convert.to-rem(4px) solid transparent; content: ''; } @@ -385,13 +385,13 @@ .flatpickr-weekdays { display: flex; - height: convert.to-rem(40px); + block-size: convert.to-rem(40px); align-items: center; } .flatpickr-weekdaycontainer { display: flex; - width: 100%; + inline-size: 100%; } .flatpickr-weekday { @@ -436,8 +436,8 @@ @include type-style('body-compact-01'); display: flex; - width: convert.to-rem(40px); - height: convert.to-rem(40px); + inline-size: convert.to-rem(40px); + block-size: convert.to-rem(40px); align-items: center; justify-content: center; color: $text-primary; @@ -467,11 +467,11 @@ &::after { position: absolute; - bottom: convert.to-rem(7px); - left: 50%; + inset-block-end: convert.to-rem(7px); + inset-inline-start: 50%; display: block; - width: convert.to-rem(4px); - height: convert.to-rem(4px); + inline-size: convert.to-rem(4px); + block-size: convert.to-rem(4px); background-color: $link-primary; content: ''; transform: translateX(-50%); diff --git a/packages/styles/scss/components/dropdown/_dropdown.scss b/packages/styles/scss/components/dropdown/_dropdown.scss index 29a136166e42..244751266eb5 100644 --- a/packages/styles/scss/components/dropdown/_dropdown.scss +++ b/packages/styles/scss/components/dropdown/_dropdown.scss @@ -50,10 +50,10 @@ position: relative; display: block; - width: 100%; - height: convert.to-rem(40px); + inline-size: 100%; + block-size: convert.to-rem(40px); border: none; - border-bottom: 1px solid $border-strong; + border-block-end: 1px solid $border-strong; background-color: $field; color: $text-primary; cursor: pointer; @@ -72,21 +72,21 @@ } .#{$prefix}--dropdown--lg { - height: convert.to-rem(48px); + block-size: convert.to-rem(48px); max-height: convert.to-rem(48px); } .#{$prefix}--dropdown--lg .#{$prefix}--dropdown__arrow { - top: convert.to-rem(16px); + inset-block-start: convert.to-rem(16px); } .#{$prefix}--dropdown--sm { - height: convert.to-rem(32px); + block-size: convert.to-rem(32px); max-height: convert.to-rem(32px); } .#{$prefix}--dropdown--sm .#{$prefix}--dropdown__arrow { - top: convert.to-rem(8px); + inset-block-start: convert.to-rem(8px); } .#{$prefix}--dropdown--open { @@ -97,7 +97,7 @@ @include focus-outline('invalid'); .#{$prefix}--dropdown-text { - padding-right: convert.to-rem(56px); + padding-inline-end: convert.to-rem(56px); } + .#{$prefix}--form-requirement { @@ -109,7 +109,7 @@ .#{$prefix}--dropdown__invalid-icon { position: absolute; - top: 50%; + inset-block-start: 50%; right: $spacing-08; fill: $support-error; transform: translateY(-50%); @@ -140,12 +140,12 @@ } .#{$prefix}--dropdown--up .#{$prefix}--dropdown-list { - bottom: 2rem; + inset-block-end: 2rem; } .#{$prefix}--dropdown__arrow { position: absolute; - top: convert.to-rem(13px); + inset-block-start: convert.to-rem(13px); right: 1rem; fill: $icon-primary; pointer-events: none; @@ -154,7 +154,7 @@ } button.#{$prefix}--dropdown-text { - width: 100%; + inline-size: 100%; border: none; // button-reset mixin contradicts with bx--dropdown-text styles background: none; @@ -172,10 +172,10 @@ display: block; overflow: hidden; // Account for the border in `.bx--dropdown` - height: calc(100% + 1px); + block-size: calc(100% + 1px); // 2rem + SVG width - padding-right: convert.to-rem(42px); - padding-left: $spacing-05; + padding-inline-end: convert.to-rem(42px); + padding-inline-start: $spacing-05; text-overflow: ellipsis; white-space: nowrap; } @@ -189,7 +189,7 @@ position: absolute; z-index: z('dropdown'); display: flex; - width: 100%; + inline-size: 100%; max-height: 0; flex-direction: column; background-color: $layer; @@ -236,7 +236,7 @@ } .#{$prefix}--dropdown-item:last-of-type .#{$prefix}--dropdown-link { - border-bottom: none; + border-block-end: none; } .#{$prefix}--dropdown-link { @@ -244,7 +244,7 @@ display: block; overflow: hidden; - height: convert.to-rem(40px); + block-size: convert.to-rem(40px); padding: convert.to-rem(11px) 0; border: 1px solid transparent; border-top-color: $border-subtle; @@ -268,8 +268,8 @@ } .#{$prefix}--dropdown--sm .#{$prefix}--dropdown-link { - height: convert.to-rem(32px); - padding-top: convert.to-rem(7px); + block-size: convert.to-rem(32px); + padding-block-start: convert.to-rem(7px); padding-bottom: convert.to-rem(7px); } @@ -364,13 +364,13 @@ } .#{$prefix}--dropdown--auto-width { - width: auto; + inline-size: auto; max-width: convert.to-rem(400px); } .#{$prefix}--dropdown--inline { display: inline-block; - width: auto; + inline-size: auto; border-bottom-color: transparent; background-color: transparent; justify-self: start; @@ -385,7 +385,7 @@ } .#{$prefix}--dropdown__arrow { - top: convert.to-rem(8px); + inset-block-start: convert.to-rem(8px); right: convert.to-rem(8px); } } @@ -397,7 +397,7 @@ .#{$prefix}--dropdown--inline .#{$prefix}--dropdown-text { display: inline-block; overflow: visible; - height: convert.to-rem(32px); + block-size: convert.to-rem(32px); padding: convert.to-rem(7px) $spacing-07 convert.to-rem(7px) $spacing-04; color: $text-primary; } @@ -419,7 +419,7 @@ .#{$prefix}--dropdown--inline.#{$prefix}--dropdown--invalid .#{$prefix}--dropdown-text { - padding-right: convert.to-rem(56px); + padding-inline-end: convert.to-rem(56px); } .#{$prefix}--dropdown--inline.#{$prefix}--dropdown--open:focus diff --git a/packages/styles/scss/components/file-uploader/_file-uploader.scss b/packages/styles/scss/components/file-uploader/_file-uploader.scss index d366f9920198..8de1057855bb 100644 --- a/packages/styles/scss/components/file-uploader/_file-uploader.scss +++ b/packages/styles/scss/components/file-uploader/_file-uploader.scss @@ -26,11 +26,11 @@ /// @group file-uploader @mixin file-uploader { .#{$prefix}--file { - width: 100%; + inline-size: 100%; } .#{$prefix}--file--invalid { - margin-right: $spacing-03; + margin-inline-end: $spacing-03; fill: $support-error; } @@ -56,13 +56,13 @@ // TODO: deprecate this block .#{$prefix}--file-btn { display: inline-flex; - padding-right: convert.to-rem(64px); + padding-inline-end: convert.to-rem(64px); margin: 0; } .#{$prefix}--file-browse-btn { display: inline-block; - width: 100%; + inline-size: 100%; max-width: convert.to-rem(320px); color: $link-primary; @@ -118,7 +118,7 @@ } .#{$prefix}--file-container--drop { - width: 100%; + inline-size: 100%; } // For backwards compatibility @@ -138,7 +138,7 @@ .#{$prefix}--file__selected-file { display: grid; max-width: convert.to-rem(320px); - min-height: $spacing-09; + min-block-size: $spacing-09; align-items: center; margin-bottom: $spacing-03; background-color: $layer; @@ -160,26 +160,26 @@ .#{$prefix}--inline-loading__animation .#{$prefix}--loading { // Vanilla markup has `.bx--inline-loading__animation` which is used for `margin-right` adjustment - margin-right: 0; + margin-inline-end: 0; } .#{$prefix}--file-filename { @include type-style('body-compact-01'); overflow: hidden; - margin-left: $spacing-05; + margin-inline-start: $spacing-05; text-overflow: ellipsis; white-space: nowrap; } } .#{$prefix}--file__selected-file--md { - min-height: convert.to-rem(40px); + min-block-size: convert.to-rem(40px); gap: $spacing-03 $spacing-05; } .#{$prefix}--file__selected-file--sm { - min-height: convert.to-rem(32px); + min-block-size: convert.to-rem(32px); gap: $spacing-02 $spacing-05; } @@ -208,18 +208,18 @@ } .#{$prefix}--file__selected-file--invalid .#{$prefix}--form-requirement { - padding-top: $spacing-05; + padding-block-start: $spacing-05; border-top: 1px solid $border-subtle; } .#{$prefix}--file__selected-file--invalid.#{$prefix}--file__selected-file--sm .#{$prefix}--form-requirement { - padding-top: convert.to-rem(7px); + padding-block-start: convert.to-rem(7px); } .#{$prefix}--file__selected-file--invalid.#{$prefix}--file__selected-file--md .#{$prefix}--form-requirement { - padding-top: convert.to-rem(11px); + padding-block-start: convert.to-rem(11px); } .#{$prefix}--file__selected-file--invalid @@ -265,7 +265,7 @@ min-width: 1.5rem; align-items: center; justify-content: center; - padding-right: $spacing-05; + padding-inline-end: $spacing-05; .#{$prefix}--loading__svg { stroke: $icon-primary; @@ -287,15 +287,15 @@ } .#{$prefix}--file__state-container .#{$prefix}--file-invalid { - width: $spacing-05; - height: $spacing-05; + inline-size: $spacing-05; + block-size: $spacing-05; fill: $support-error; } .#{$prefix}--file__state-container .#{$prefix}--file-close { display: flex; - width: $spacing-06; - height: $spacing-06; + inline-size: $spacing-06; + block-size: $spacing-06; align-items: center; justify-content: center; padding: 0; @@ -314,7 +314,7 @@ } .#{$prefix}--file__state-container .#{$prefix}--inline-loading__animation { - margin-right: -$spacing-03; + margin-inline-end: -$spacing-03; } .#{$prefix}--file__drop-container { @@ -322,7 +322,7 @@ display: flex; overflow: hidden; - height: convert.to-rem(96px); + block-size: convert.to-rem(96px); align-items: flex-start; justify-content: space-between; padding: $spacing-05; diff --git a/packages/styles/scss/components/fluid-combo-box/_fluid-combo-box.scss b/packages/styles/scss/components/fluid-combo-box/_fluid-combo-box.scss index 558744a9cc2c..0a7b31b08bdb 100644 --- a/packages/styles/scss/components/fluid-combo-box/_fluid-combo-box.scss +++ b/packages/styles/scss/components/fluid-combo-box/_fluid-combo-box.scss @@ -45,15 +45,15 @@ .#{$prefix}--list-box__wrapper--fluid .#{$prefix}--combo-box .#{$prefix}--list-box__selection { - top: auto; - bottom: convert.to-rem(10px); + inset-block-start: auto; + inset-block-end: convert.to-rem(10px); transform: none; } .#{$prefix}--list-box__wrapper--fluid .#{$prefix}--combo-box .#{$prefix}--list-box__menu-icon { - bottom: convert.to-rem(14px); + inset-block-end: convert.to-rem(14px); } .#{$prefix}--list-box__wrapper--fluid diff --git a/packages/styles/scss/components/fluid-date-picker/_fluid-date-picker.scss b/packages/styles/scss/components/fluid-date-picker/_fluid-date-picker.scss index 6dddaabf6560..6e0655c1371c 100644 --- a/packages/styles/scss/components/fluid-date-picker/_fluid-date-picker.scss +++ b/packages/styles/scss/components/fluid-date-picker/_fluid-date-picker.scss @@ -24,8 +24,8 @@ .#{$prefix}--date-picker--fluid .#{$prefix}--date-picker { position: relative; - width: 100%; - height: 100%; + inline-size: 100%; + block-size: 100%; transition: background-color $duration-fast-01 motion(standard, productive), outline $duration-fast-01 motion(standard, productive); } @@ -33,11 +33,11 @@ .#{$prefix}--date-picker--fluid .#{$prefix}--label { position: absolute; z-index: 1; - top: convert.to-rem(13px); - left: $spacing-05; + inset-block-start: convert.to-rem(13px); + inset-inline-start: $spacing-05; display: flex; - width: calc(100% - 2rem); - height: convert.to-rem(16px); + inline-size: calc(100% - 2rem); + block-size: convert.to-rem(16px); align-items: center; margin: 0; } @@ -64,9 +64,9 @@ .#{$prefix}--date-picker-input__wrapper .#{$prefix}--date-picker__input { min-width: convert.to-rem(144px); - min-height: convert.to-rem(64px); + min-block-size: convert.to-rem(64px); padding: convert.to-rem(32px) $spacing-05 convert.to-rem(13px); - border-bottom: none; + border-block-end: none; background: transparent; } @@ -85,22 +85,22 @@ .#{$prefix}--date-picker--fluid .#{$prefix}--date-picker--simple .#{$prefix}--date-picker--fluid--warn { - border-bottom: 1px solid $border-strong; + border-block-end: 1px solid $border-strong; } // Single, Range .#{$prefix}--date-picker--fluid .#{$prefix}--date-picker__icon { - top: convert.to-rem(43px); + inset-block-start: convert.to-rem(43px); } .#{$prefix}--date-picker--fluid .#{$prefix}--date-picker--single .#{$prefix}--date-picker__input { - width: 100%; + inline-size: 100%; } .#{$prefix}--date-picker--fluid .#{$prefix}--date-picker--single { - border-bottom: none; + border-block-end: none; } .#{$prefix}--date-picker--fluid @@ -109,7 +109,7 @@ .#{$prefix}--date-picker__input--invalid ), .#{$prefix}--date-picker--single .#{$prefix}--date-picker--fluid--warn { - border-bottom: 1px solid $border-strong; + border-block-end: 1px solid $border-strong; } // Range @@ -120,7 +120,7 @@ .#{$prefix}--date-picker-container:not( .#{$prefix}--date-picker--fluid--invalid ) { - border-bottom: 1px solid $border-strong; + border-block-end: 1px solid $border-strong; } .#{$prefix}--date-picker--fluid @@ -129,22 +129,22 @@ .#{$prefix}--date-picker--fluid .#{$prefix}--date-picker--range .#{$prefix}--date-picker-container { - width: 100%; + inline-size: 100%; min-width: convert.to-rem(144px); - min-height: convert.to-rem(63px); + min-block-size: convert.to-rem(63px); } .#{$prefix}--date-picker--fluid .#{$prefix}--date-picker--range > .#{$prefix}--date-picker-container:first-child { - margin-right: 0; + margin-inline-end: 0; } .#{$prefix}--date-picker--fluid .#{$prefix}--date-picker--range > .#{$prefix}--date-picker-container:last-child .#{$prefix}--date-picker__input { - border-left: 1px solid $border-strong; + border-inline-start: 1px solid $border-strong; } // Invalid @@ -168,7 +168,7 @@ .#{$prefix}--date-picker-container.#{$prefix}--date-picker--fluid--invalid + .#{$prefix}--date-picker-container .#{$prefix}--date-picker__input { - border-left: none; + border-inline-start: none; } .#{$prefix}--date-picker-container.#{$prefix}--date-picker--fluid--invalid @@ -191,7 +191,7 @@ .#{$prefix}--date-picker--fluid.#{$prefix}--date-picker--fluid--warn .#{$prefix}--date-picker--range .#{$prefix}--date-picker-container { - border-bottom: 1px solid transparent; + border-block-end: 1px solid transparent; } .#{$prefix}--date-picker--fluid.#{$prefix}--date-picker--fluid--invalid @@ -209,7 +209,7 @@ .#{$prefix}--date-picker--fluid .#{$prefix}--date-picker--fluid--warn.#{$prefix}--date-picker-container:last-child .#{$prefix}--date-picker__input { - border-left: 1px solid transparent; + border-inline-start: 1px solid transparent; } .#{$prefix}--date-picker--fluid.#{$prefix}--date-picker--fluid--invalid @@ -225,25 +225,25 @@ .#{$prefix}--date-picker--range .#{$prefix}--date-picker--fluid--warn.#{$prefix}--date-picker-container:last-child::after { position: absolute; - top: convert.to-rem(8px); + inset-block-start: convert.to-rem(8px); right: 0; display: block; - width: 1px; - height: calc(100% - 1rem); + inline-size: 1px; + block-size: calc(100% - 1rem); background: $border-strong; content: ''; } .#{$prefix}--date-picker--fluid .#{$prefix}--date-picker--fluid--warn.#{$prefix}--date-picker-container:last-child::after { - left: 0; + inset-inline-start: 0; } .#{$prefix}--date-picker--fluid .#{$prefix}--date-picker__divider { - width: calc(100% - 2rem); + inline-size: calc(100% - 2rem); border-style: solid; border-color: $border-subtle; - border-bottom: none; + border-block-end: none; margin: 0 1rem; } @@ -251,7 +251,7 @@ .#{$prefix}--date-picker__icon--invalid, .#{$prefix}--date-picker-container.#{$prefix}--date-picker--fluid--warn .#{$prefix}--date-picker__icon--warn { - top: convert.to-rem(80px); + inset-block-start: convert.to-rem(80px); } .#{$prefix}--date-picker--fluid @@ -302,28 +302,28 @@ .#{$prefix}--date-picker--fluid.#{$prefix}--date-picker--fluid--warn .#{$prefix}--date-picker--range + .#{$prefix}--date-picker__icon { - top: convert.to-rem(80px); + inset-block-start: convert.to-rem(80px); } // Skeleton .#{$prefix}--date-picker--fluid__skeleton { - height: convert.to-rem(64px); - border-bottom: 1px solid $skeleton-element; + block-size: convert.to-rem(64px); + border-block-end: 1px solid $skeleton-element; background: $skeleton-background; } .#{$prefix}--date-picker--fluid__skeleton--container { position: relative; - width: 100%; - height: 100%; + inline-size: 100%; + block-size: 100%; } .#{$prefix}--date-picker--fluid__skeleton .#{$prefix}--skeleton { position: absolute; - top: $spacing-05; - left: $spacing-05; - width: 25%; - height: convert.to-rem(8px); + inset-block-start: $spacing-05; + inset-inline-start: $spacing-05; + inline-size: 25%; + block-size: convert.to-rem(8px); } .#{$prefix}--date-picker--fluid__skeleton .#{$prefix}--label { @@ -332,17 +332,17 @@ .#{$prefix}--date-picker--fluid__skeleton .#{$prefix}--text-input { position: absolute; - top: convert.to-rem(36px); - left: $spacing-05; - width: 50%; - height: convert.to-rem(8px); + inset-block-start: convert.to-rem(36px); + inset-inline-start: $spacing-05; + inline-size: 50%; + block-size: convert.to-rem(8px); padding: 0; } .#{$prefix}--date-picker--fluid__skeleton--container .#{$prefix}--date-picker__icon { - top: auto; - bottom: $spacing-03; + inset-block-start: auto; + inset-block-end: $spacing-03; } // Range skeleton @@ -354,19 +354,19 @@ .#{$prefix}--date-picker--fluid__skeleton--range .#{$prefix}--date-picker--fluid__skeleton--container { display: flex; - width: 50%; + inline-size: 50%; flex-direction: column; } .#{$prefix}--date-picker--fluid__skeleton--range .#{$prefix}--date-picker--fluid__skeleton--container:first-of-type { - border-right: 1px solid $skeleton-element; + border-inline-end: 1px solid $skeleton-element; } .#{$prefix}--date-picker--fluid__skeleton--range .#{$prefix}--date-picker--fluid__skeleton--container .#{$prefix}--date-picker__icon { - bottom: $spacing-03; + inset-block-end: $spacing-03; } // Readonly diff --git a/packages/styles/scss/components/fluid-list-box/_fluid-list-box.scss b/packages/styles/scss/components/fluid-list-box/_fluid-list-box.scss index 93ddc0cdd376..680e3417f4f5 100644 --- a/packages/styles/scss/components/fluid-list-box/_fluid-list-box.scss +++ b/packages/styles/scss/components/fluid-list-box/_fluid-list-box.scss @@ -19,25 +19,25 @@ @mixin fluid-list-box { .#{$prefix}--list-box__wrapper--fluid.#{$prefix}--list-box__wrapper { position: relative; - height: 100%; + block-size: 100%; background: $field; transition: background-color $duration-fast-01 motion(standard, productive), outline $duration-fast-01 motion(standard, productive); } .#{$prefix}--list-box__wrapper--fluid .#{$prefix}--list-box { - min-height: convert.to-rem(64px); + min-block-size: convert.to-rem(64px); padding: 0; } .#{$prefix}--list-box__wrapper--fluid .#{$prefix}--label { position: absolute; z-index: 1; - top: convert.to-rem(13px); - left: $spacing-05; + inset-block-start: convert.to-rem(13px); + inset-inline-start: $spacing-05; display: flex; - width: calc(100% - 2rem); - height: convert.to-rem(16px); + inline-size: calc(100% - 2rem); + block-size: convert.to-rem(16px); align-items: center; margin: 0; } @@ -61,28 +61,28 @@ } .#{$prefix}--list-box__wrapper--fluid .#{$prefix}--list-box__field { - padding-top: convert.to-rem(33px); + padding-block-start: convert.to-rem(33px); padding-bottom: convert.to-rem(13px); - padding-left: $spacing-05; + padding-inline-start: $spacing-05; } .#{$prefix}--list-box__wrapper--fluid .#{$prefix}--list-box__menu-icon { - width: 1rem; - height: 1rem; + inline-size: 1rem; + block-size: 1rem; } .#{$prefix}--list-box__wrapper--fluid:not( .#{$prefix}--list-box__wrapper--fluid--condensed ) .#{$prefix}--list-box__menu-item { - height: $spacing-10; + block-size: $spacing-10; } .#{$prefix}--list-box__wrapper--fluid:not( .#{$prefix}--list-box__wrapper--fluid--condensed ) .#{$prefix}--list-box__menu-item__selected-icon { - top: convert.to-rem(20px); + inset-block-start: convert.to-rem(20px); } // Disabled styles @@ -122,7 +122,7 @@ .#{$prefix}--list-box__wrapper--fluid :not(.#{$prefix}--list-box--up) .#{$prefix}--list-box__menu { - top: calc(100% + convert.to-rem(3px)); + inset-block-start: calc(100% + convert.to-rem(3px)); } // Invalid / Warning styles @@ -146,7 +146,7 @@ .#{$prefix}--list-box__wrapper--fluid .#{$prefix}--combo-box.#{$prefix}--list-box--warning .#{$prefix}--text-input { - border-bottom: 1px solid transparent; + border-block-end: 1px solid transparent; } .#{$prefix}--list-box__wrapper--fluid.#{$prefix}--list-box__wrapper--fluid--invalid @@ -167,7 +167,7 @@ .#{$prefix}--list-box__wrapper--fluid.#{$prefix}--list-box__wrapper--fluid--invalid .#{$prefix}--list-box, .#{$prefix}--list-box__wrapper--fluid .#{$prefix}--list-box--warning { - border-bottom: 1px solid transparent; + border-block-end: 1px solid transparent; } .#{$prefix}--list-box__wrapper--fluid.#{$prefix}--list-box__wrapper--fluid--invalid @@ -182,7 +182,7 @@ .#{$prefix}--list-box__wrapper--fluid .#{$prefix}--list-box--warning ~ .#{$prefix}--form-requirement { - border-bottom: 1px solid $border-strong; + border-block-end: 1px solid $border-strong; } .#{$prefix}--list-box__wrapper--fluid.#{$prefix}--list-box__wrapper--fluid--invalid @@ -190,7 +190,7 @@ .#{$prefix}--list-box__wrapper--fluid .#{$prefix}--list-box--warning .#{$prefix}--list-box__invalid-icon { - top: convert.to-rem(81px); + inset-block-start: convert.to-rem(81px); right: $spacing-05; pointer-events: none; } @@ -198,13 +198,13 @@ .#{$prefix}--list-box__wrapper--fluid.#{$prefix}--list-box__wrapper--fluid--invalid .#{$prefix}--list-box[data-invalid]:not(.#{$prefix}--combo-box) .#{$prefix}--list-box__field { - padding-right: $spacing-09; + padding-inline-end: $spacing-09; } .#{$prefix}--list-box__wrapper--fluid.#{$prefix}--list-box__wrapper--fluid--invalid .#{$prefix}--list-box[data-invalid].#{$prefix}--combo-box .#{$prefix}--text-input { - padding-right: $spacing-10; + padding-inline-end: $spacing-10; } // Error + Warning divider @@ -221,7 +221,7 @@ ~ .#{$prefix}--list-box__divider { display: block; border: none; - border-bottom: 1px solid $border-subtle; + border-block-end: 1px solid $border-subtle; margin: 0 1rem; } @@ -238,12 +238,12 @@ .#{$prefix}--list-box__wrapper--fluid .#{$prefix}--list-box--up .#{$prefix}--list-box__menu { - bottom: $spacing-10; + inset-block-end: $spacing-10; } // Skeleton styles .#{$prefix}--list-box__wrapper--fluid .#{$prefix}--skeleton { - border-bottom: 1px solid $skeleton-element; + border-block-end: 1px solid $skeleton-element; background: $skeleton-background; } @@ -251,10 +251,10 @@ .#{$prefix}--skeleton .#{$prefix}--list-box__field { position: absolute; - top: convert.to-rem(36px); - left: $spacing-05; - width: 50%; - height: convert.to-rem(8px); + inset-block-start: convert.to-rem(36px); + inset-inline-start: $spacing-05; + inline-size: 50%; + block-size: convert.to-rem(8px); padding: 0; } @@ -262,10 +262,10 @@ .#{$prefix}--skeleton .#{$prefix}--list-box__label { position: absolute; - top: $spacing-05; - left: $spacing-05; - width: 25%; - height: convert.to-rem(8px); + inset-block-start: $spacing-05; + inset-inline-start: $spacing-05; + inline-size: 25%; + block-size: convert.to-rem(8px); } .#{$prefix}--list-box__wrapper--fluid diff --git a/packages/styles/scss/components/fluid-multiselect/_fluid-multiselect.scss b/packages/styles/scss/components/fluid-multiselect/_fluid-multiselect.scss index 88541222c2fd..4dec9ede7c2b 100644 --- a/packages/styles/scss/components/fluid-multiselect/_fluid-multiselect.scss +++ b/packages/styles/scss/components/fluid-multiselect/_fluid-multiselect.scss @@ -41,7 +41,7 @@ .#{$prefix}--multi-select--filterable .#{$prefix}--list-box__field .#{$prefix}--text-input { - border-bottom: 1px solid transparent; + border-block-end: 1px solid transparent; } .#{$prefix}--list-box__wrapper--fluid diff --git a/packages/styles/scss/components/fluid-number-input/_fluid-number-input.scss b/packages/styles/scss/components/fluid-number-input/_fluid-number-input.scss index e508859b2047..5c741d9b0824 100644 --- a/packages/styles/scss/components/fluid-number-input/_fluid-number-input.scss +++ b/packages/styles/scss/components/fluid-number-input/_fluid-number-input.scss @@ -19,18 +19,18 @@ @mixin fluid-number-input { .#{$prefix}--number-input--fluid { position: relative; - height: 100%; + block-size: 100%; background: $field; } .#{$prefix}--number-input--fluid .#{$prefix}--label { position: absolute; z-index: 1; - top: convert.to-rem(13px); - left: $spacing-05; + inset-block-start: convert.to-rem(13px); + inset-inline-start: $spacing-05; display: flex; - width: calc(100% - 2rem); - height: convert.to-rem(16px); + inline-size: calc(100% - 2rem); + block-size: convert.to-rem(16px); align-items: center; margin: 0; } @@ -58,7 +58,7 @@ } .#{$prefix}--number-input--fluid input[type='number'] { - min-height: convert.to-rem(64px); + min-block-size: convert.to-rem(64px); padding: convert.to-rem(32px) convert.to-rem(80px) convert.to-rem(13px) $spacing-05; background: transparent; @@ -66,8 +66,8 @@ } .#{$prefix}--number-input--fluid .#{$prefix}--number__controls { - top: convert.to-rem(23px); - height: convert.to-rem(40px); + inset-block-start: convert.to-rem(23px); + block-size: convert.to-rem(40px); transform: translate(0); } @@ -76,7 +76,7 @@ input[type='number']:focus ~ .#{$prefix}--number__controls .#{$prefix}--number__control-btn { - border-bottom: 1px solid transparent; + border-block-end: 1px solid transparent; } .#{$prefix}--number-input--fluid.#{$prefix}--number-input--fluid--focus @@ -108,11 +108,11 @@ input[type='number']:focus ~ .#{$prefix}--number__controls .#{$prefix}--number__control-btn:hover::before { - top: auto; - bottom: 0; - left: 0; - width: 100%; - height: 1px; + inset-block-start: auto; + inset-block-end: 0; + inset-inline-start: 0; + inline-size: 100%; + block-size: 1px; background: $focus; } // End weirdness @@ -126,7 +126,7 @@ input[type='number']:focus ~ .#{$prefix}--number__controls .#{$prefix}--number__control-btn:hover { - border-bottom: 1px solid $focus; + border-block-end: 1px solid $focus; outline: none; } @@ -134,8 +134,8 @@ input[type='number'] ~ .#{$prefix}--number__controls .#{$prefix}--number__control-btn::after { - top: 0; - height: calc(100% - convert.to-rem(1px)); + inset-block-start: 0; + block-size: calc(100% - convert.to-rem(1px)); } .#{$prefix}--number-input--fluid.#{$prefix}--number-input--fluid--focus @@ -149,14 +149,14 @@ input[type='number'] ~ .#{$prefix}--number__controls .#{$prefix}--number__control-btn.up-icon::after { - height: calc(100%); + block-size: calc(100%); } .#{$prefix}--number-input--fluid.#{$prefix}--number-input--fluid--focus input[type='number'] ~ .#{$prefix}--number__controls .#{$prefix}--number__control-btn.up-icon:hover::after { - height: calc(100%); + block-size: calc(100%); background-color: $focus; } @@ -178,7 +178,7 @@ } .#{$prefix}--number-input--fluid .#{$prefix}--number__invalid { - top: convert.to-rem(73px); + inset-block-start: convert.to-rem(73px); right: $spacing-05; pointer-events: none; } @@ -192,7 +192,7 @@ .#{$prefix}--number-input--fluid .#{$prefix}--number__input-wrapper--warning input[type='number'] { - border-bottom: 1px solid transparent; + border-block-end: 1px solid transparent; } .#{$prefix}--number-input--fluid @@ -207,12 +207,12 @@ .#{$prefix}--number__input-wrapper--warning + .#{$prefix}--number-input__divider { position: absolute; - top: convert.to-rem(63px); + inset-block-start: convert.to-rem(63px); display: block; - width: calc(100% - 2rem); - height: convert.to-rem(1px); + inline-size: calc(100% - 2rem); + block-size: convert.to-rem(1px); border: none; - border-bottom: 1px solid $border-subtle; + border-block-end: 1px solid $border-subtle; margin: 0 1rem; } @@ -231,7 +231,7 @@ .#{$prefix}--number-input--fluid--invalid .#{$prefix}--number[data-invalid] input[type='number'] { - border-bottom: 1px solid transparent; + border-block-end: 1px solid transparent; } .#{$prefix}--number-input--fluid--invalid @@ -260,7 +260,7 @@ input[type='number'] ~ .#{$prefix}--number__controls .#{$prefix}--number__control-btn { - border-bottom: none; + border-block-end: none; } .#{$prefix}--number-input--fluid--invalid @@ -282,7 +282,7 @@ .#{$prefix}--number-input--fluid--invalid ) .#{$prefix}--number { - border-bottom: 1px solid $border-subtle; + border-block-end: 1px solid $border-subtle; } .#{$prefix}--number-input--fluid--disabled.#{$prefix}--number-input--fluid--invalid diff --git a/packages/styles/scss/components/fluid-search/_fluid-search.scss b/packages/styles/scss/components/fluid-search/_fluid-search.scss index 3db9c8feb716..282a13f52714 100644 --- a/packages/styles/scss/components/fluid-search/_fluid-search.scss +++ b/packages/styles/scss/components/fluid-search/_fluid-search.scss @@ -18,18 +18,18 @@ @mixin fluid-search { .#{$prefix}--search--fluid { - height: convert.to-rem(64px); + block-size: convert.to-rem(64px); } .#{$prefix}--search--fluid .#{$prefix}--label { position: absolute; z-index: 1; - top: convert.to-rem(13px); - left: $spacing-05; + inset-block-start: convert.to-rem(13px); + inset-inline-start: $spacing-05; display: flex; overflow: initial; - width: calc(100% - 2rem); - height: convert.to-rem(16px); + inline-size: calc(100% - 2rem); + block-size: convert.to-rem(16px); align-items: center; margin: 0; clip: initial; @@ -53,7 +53,7 @@ } .#{$prefix}--search--fluid .#{$prefix}--search-input { - height: 100%; + block-size: 100%; padding: convert.to-rem(32px) convert.to-rem(88px) convert.to-rem(13px) $spacing-05; } @@ -64,8 +64,8 @@ } .#{$prefix}--search--fluid .#{$prefix}--search-close { - width: convert.to-rem(40px); - height: convert.to-rem(40px); + inline-size: convert.to-rem(40px); + block-size: convert.to-rem(40px); border: none; inset: auto convert.to-rem(48px) 0 auto; transition: background-color $duration-fast-01 motion(standard, productive); @@ -74,8 +74,8 @@ .#{$prefix}--search--fluid .#{$prefix}--search-close::before { position: absolute; display: block; - width: convert.to-rem(1px); - height: 1rem; + inline-size: convert.to-rem(1px); + block-size: 1rem; background: $border-subtle; content: ''; inset: auto convert.to-rem(-1px) convert.to-rem(14px) auto; @@ -89,11 +89,11 @@ .#{$prefix}--search--fluid .#{$prefix}--search-close::after { position: absolute; - bottom: 0; - left: 0; + inset-block-end: 0; + inset-inline-start: 0; display: block; - width: 100%; - height: convert.to-rem(2px); + inline-size: 100%; + block-size: convert.to-rem(2px); content: ''; } @@ -106,7 +106,7 @@ .#{$prefix}--search--fluid .#{$prefix}--search-input:not(:focus) ~ .#{$prefix}--search-close:not([disabled])::after { - height: convert.to-rem(1px); + block-size: convert.to-rem(1px); background: $border-strong; } @@ -128,6 +128,6 @@ .#{$prefix}--search--fluid.#{$prefix}--search--disabled .#{$prefix}--search-input[disabled] { - border-bottom: 1px solid $border-subtle; + border-block-end: 1px solid $border-subtle; } } diff --git a/packages/styles/scss/components/fluid-select/_fluid-select.scss b/packages/styles/scss/components/fluid-select/_fluid-select.scss index 667879cfa0fa..60d2ea094e85 100644 --- a/packages/styles/scss/components/fluid-select/_fluid-select.scss +++ b/packages/styles/scss/components/fluid-select/_fluid-select.scss @@ -19,7 +19,7 @@ @mixin fluid-select { .#{$prefix}--select--fluid .#{$prefix}--select { position: relative; - height: 100%; + block-size: 100%; background: $field; transition: background-color $duration-fast-01 motion(standard, productive), outline $duration-fast-01 motion(standard, productive); @@ -28,11 +28,11 @@ .#{$prefix}--select--fluid .#{$prefix}--label { position: absolute; z-index: 1; - top: convert.to-rem(13px); - left: $spacing-05; + inset-block-start: convert.to-rem(13px); + inset-inline-start: $spacing-05; display: flex; - width: calc(100% - 2rem); - height: convert.to-rem(16px); + inline-size: calc(100% - 2rem); + block-size: convert.to-rem(16px); align-items: center; margin: 0; } @@ -54,7 +54,7 @@ } .#{$prefix}--select--fluid .#{$prefix}--select-input { - min-height: convert.to-rem(64px); + min-block-size: convert.to-rem(64px); padding: convert.to-rem(32px) convert.to-rem(32px) convert.to-rem(13px) $spacing-05; outline: none; @@ -62,8 +62,8 @@ } .#{$prefix}--select--fluid .#{$prefix}--select__arrow { - top: $spacing-07; - height: 1rem; + inset-block-start: $spacing-07; + block-size: 1rem; } .#{$prefix}--select--fluid .#{$prefix}--select__divider { @@ -85,9 +85,9 @@ .#{$prefix}--select--warning .#{$prefix}--select__divider { display: block; - width: calc(100% - 2rem); + inline-size: calc(100% - 2rem); border: none; - border-bottom: 1px solid $border-subtle; + border-block-end: 1px solid $border-subtle; margin: 0 1rem; } @@ -97,12 +97,12 @@ .#{$prefix}--select--fluid .#{$prefix}--select--warning .#{$prefix}--select-input { - padding-right: convert.to-rem(32px); - border-bottom: 1px solid transparent; + padding-inline-end: convert.to-rem(32px); + border-block-end: 1px solid transparent; } .#{$prefix}--select--fluid .#{$prefix}--select--warning { - border-bottom: 1px solid $border-strong; + border-block-end: 1px solid $border-strong; } .#{$prefix}--select--fluid .#{$prefix}--select-input__wrapper { @@ -156,7 +156,7 @@ .#{$prefix}--select--fluid .#{$prefix}--select--warning .#{$prefix}--select__invalid-icon { - top: convert.to-rem(73px); + inset-block-start: convert.to-rem(73px); right: $spacing-05; pointer-events: none; } @@ -173,7 +173,7 @@ .#{$prefix}--select-input, .#{$prefix}--select--fluid .#{$prefix}--select--fluid--focus.#{$prefix}--select--warning { - border-bottom: 1px solid transparent; + border-block-end: 1px solid transparent; } // Disabled state diff --git a/packages/styles/scss/components/fluid-text-area/_fluid-text-area.scss b/packages/styles/scss/components/fluid-text-area/_fluid-text-area.scss index 1e9d09b2878a..16d7c4d3cc69 100644 --- a/packages/styles/scss/components/fluid-text-area/_fluid-text-area.scss +++ b/packages/styles/scss/components/fluid-text-area/_fluid-text-area.scss @@ -18,7 +18,7 @@ @mixin fluid-text-area { .#{$prefix}--text-area--fluid .#{$prefix}--text-area__wrapper { position: relative; - height: 100%; + block-size: 100%; flex-direction: column; background: $field; } @@ -31,17 +31,17 @@ .#{$prefix}--text-area--fluid .#{$prefix}--text-area__label-wrapper { position: relative; - height: 100%; + block-size: 100%; } .#{$prefix}--text-area--fluid .#{$prefix}--label { position: absolute; z-index: 1; - top: convert.to-rem(13px); - left: $spacing-05; + inset-block-start: convert.to-rem(13px); + inset-inline-start: $spacing-05; display: flex; - width: calc(100% - 2rem); - height: convert.to-rem(16px); + inline-size: calc(100% - 2rem); + block-size: convert.to-rem(16px); align-items: center; margin: 0; } @@ -71,7 +71,7 @@ } .#{$prefix}--text-area--fluid .#{$prefix}--text-area { - min-height: convert.to-rem(64px); + min-block-size: convert.to-rem(64px); padding: 0 $spacing-05 convert.to-rem(13px); margin-top: 2rem; outline: none; @@ -84,7 +84,7 @@ // invalid .#{$prefix}--text-area--fluid .#{$prefix}--text-area--invalid, .#{$prefix}--text-area--fluid .#{$prefix}--text-area:focus { - border-bottom: 1px solid transparent; + border-block-end: 1px solid transparent; } .#{$prefix}--text-area__divider, @@ -112,7 +112,7 @@ display: block; border-style: solid; border-color: $border-subtle; - border-bottom: none; + border-block-end: none; margin: 0 1rem; } @@ -135,19 +135,19 @@ .#{$prefix}--text-area--fluid .#{$prefix}--text-area__wrapper--warn .#{$prefix}--form-requirement.#{$prefix}--form-requirement { - border-bottom: 1px solid $border-strong; + border-block-end: 1px solid $border-strong; color: $text-primary; } .#{$prefix}--text-area--fluid .#{$prefix}--text-area__wrapper[data-invalid] .#{$prefix}--form-requirement.#{$prefix}--form-requirement { - border-bottom: none; + border-block-end: none; color: $text-error; } .#{$prefix}--text-area--fluid .#{$prefix}--text-area--warn { - border-bottom: none; + border-block-end: none; } .#{$prefix}--modal @@ -159,7 +159,7 @@ } .#{$prefix}--text-area--fluid .#{$prefix}--text-area__invalid-icon { - top: 0.5rem; + inset-block-start: 0.5rem; } //invalid outline @@ -197,14 +197,14 @@ // Skeleton .#{$prefix}--text-area--fluid__skeleton { padding: $spacing-05; - border-bottom: 1px solid $skeleton-element; + border-block-end: 1px solid $skeleton-element; background: $skeleton-background; } .#{$prefix}--text-area--fluid__skeleton .#{$prefix}--skeleton, .#{$prefix}--text-area--fluid__skeleton .#{$prefix}--text-area.#{$prefix}--skeleton::before { - height: 0.5rem; + block-size: 0.5rem; } .#{$prefix}--text-area--fluid__skeleton .#{$prefix}--label { @@ -213,7 +213,7 @@ .#{$prefix}--text-area--fluid__skeleton .#{$prefix}--text-area.#{$prefix}--skeleton { - width: 80%; - height: 4rem; + inline-size: 80%; + block-size: 4rem; } } diff --git a/packages/styles/scss/components/fluid-text-input/_fluid-text-input.scss b/packages/styles/scss/components/fluid-text-input/_fluid-text-input.scss index a9be04601a1a..2419a9345c1f 100644 --- a/packages/styles/scss/components/fluid-text-input/_fluid-text-input.scss +++ b/packages/styles/scss/components/fluid-text-input/_fluid-text-input.scss @@ -19,7 +19,7 @@ @mixin fluid-text-input { .#{$prefix}--text-input--fluid.#{$prefix}--text-input-wrapper { position: relative; - height: 100%; + block-size: 100%; background: $field; transition: background-color $duration-fast-01 motion(standard, productive), outline $duration-fast-01 motion(standard, productive); @@ -28,11 +28,11 @@ .#{$prefix}--text-input--fluid .#{$prefix}--label { position: absolute; z-index: 1; - top: convert.to-rem(13px); - left: $spacing-05; + inset-block-start: convert.to-rem(13px); + inset-inline-start: $spacing-05; display: flex; - width: calc(100% - 2rem); - height: convert.to-rem(16px); + inline-size: calc(100% - 2rem); + block-size: convert.to-rem(16px); align-items: center; margin: 0; } @@ -60,7 +60,7 @@ } .#{$prefix}--text-input--fluid .#{$prefix}--text-input { - min-height: convert.to-rem(64px); + min-block-size: convert.to-rem(64px); padding: convert.to-rem(32px) $spacing-05 convert.to-rem(13px); } @@ -87,7 +87,7 @@ .#{$prefix}--text-input--fluid .#{$prefix}--text-input--invalid, .#{$prefix}--text-input--fluid .#{$prefix}--text-input--warning { - border-bottom: none; + border-block-end: none; } .#{$prefix}--text-input--fluid @@ -99,12 +99,12 @@ display: block; border-style: solid; border-color: $border-subtle; - border-bottom: none; + border-block-end: none; margin: 0 1rem; } .#{$prefix}--text-input--fluid .#{$prefix}--text-input__invalid-icon { - top: convert.to-rem(80px); + inset-block-start: convert.to-rem(80px); } .#{$prefix}--text-input--fluid @@ -118,7 +118,7 @@ .#{$prefix}--text-input--fluid .#{$prefix}--text-input__field-wrapper--warning { - border-bottom: 1px solid $border-strong; + border-block-end: 1px solid $border-strong; } .#{$prefix}--text-input--fluid @@ -145,7 +145,7 @@ // Password Input .#{$prefix}--text-input--fluid .#{$prefix}--text-input.#{$prefix}--password-input { - padding-right: $spacing-08; + padding-inline-end: $spacing-08; } .#{$prefix}--text-input--fluid.#{$prefix}--password-input-wrapper @@ -155,34 +155,34 @@ .#{$prefix}--text-input--fluid .#{$prefix}--btn.#{$prefix}--text-input--password__visibility__toggle.#{$prefix}--tooltip__trigger { - top: convert.to-rem(26px); + inset-block-start: convert.to-rem(26px); right: $spacing-03; - width: convert.to-rem(32px); - height: convert.to-rem(32px); + inline-size: convert.to-rem(32px); + block-size: convert.to-rem(32px); } // Skeleton .#{$prefix}--text-input--fluid__skeleton { position: relative; - height: convert.to-rem(64px); - border-bottom: 1px solid $skeleton-element; + block-size: convert.to-rem(64px); + border-block-end: 1px solid $skeleton-element; background: $skeleton-background; } .#{$prefix}--text-input--fluid__skeleton .#{$prefix}--skeleton { position: absolute; - top: $spacing-05; - left: $spacing-05; - width: 25%; - height: convert.to-rem(8px); + inset-block-start: $spacing-05; + inset-inline-start: $spacing-05; + inline-size: 25%; + block-size: convert.to-rem(8px); } .#{$prefix}--text-input--fluid__skeleton .#{$prefix}--label { position: absolute; - top: convert.to-rem(36px); - left: $spacing-05; - width: 50%; - height: convert.to-rem(8px); + inset-block-start: convert.to-rem(36px); + inset-inline-start: $spacing-05; + inline-size: 50%; + block-size: convert.to-rem(8px); padding: 0; } } diff --git a/packages/styles/scss/components/fluid-time-picker/_fluid-time-picker.scss b/packages/styles/scss/components/fluid-time-picker/_fluid-time-picker.scss index a92d17fecd7b..bde4a78e8a7f 100644 --- a/packages/styles/scss/components/fluid-time-picker/_fluid-time-picker.scss +++ b/packages/styles/scss/components/fluid-time-picker/_fluid-time-picker.scss @@ -46,8 +46,8 @@ .#{$prefix}--select-input__wrapper::before { position: absolute; display: block; - width: 1px; - height: calc(100% - 1px); + inline-size: 1px; + block-size: calc(100% - 1px); background-color: $border-strong; content: ''; opacity: 1; @@ -61,7 +61,7 @@ .#{$prefix}--time-picker--fluid__wrapper .#{$prefix}--select-input__wrapper::before { - left: 0; + inset-inline-start: 0; } .#{$prefix}--time-picker--fluid:not(.#{$prefix}--time-picker--fluid--disabled) @@ -108,12 +108,12 @@ } .#{$prefix}--time-picker--fluid--invalid .#{$prefix}--select-input { - padding-top: convert.to-rem(30px); + padding-block-start: convert.to-rem(30px); border-top: 2px solid transparent; } .#{$prefix}--select--fluid:last-of-type .#{$prefix}--select-input { - border-right: 2px solid transparent; + border-inline-end: 2px solid transparent; } .#{$prefix}--time-picker--fluid--invalid @@ -128,7 +128,7 @@ .#{$prefix}--time-picker--fluid--invalid .#{$prefix}--select--fluid:last-of-type .#{$prefix}--select-input:hover { - border-right: 2px solid $support-error; + border-inline-end: 2px solid $support-error; } .#{$prefix}--time-picker--fluid--warning { @@ -142,7 +142,7 @@ .#{$prefix}--time-picker--fluid--invalid .#{$prefix}--time-picker__icon, .#{$prefix}--time-picker--fluid--warning .#{$prefix}--time-picker__icon { position: absolute; - top: convert.to-rem(72px); + inset-block-start: convert.to-rem(72px); right: $spacing-05; display: block; } @@ -188,48 +188,48 @@ .#{$prefix}--time-picker--fluid__wrapper > *:last-child .#{$prefix}--select-input__wrapper::before { - top: 8px; - height: calc(100% - 1rem); + inset-block-start: 8px; + block-size: calc(100% - 1rem); } .#{$prefix}--time-picker--fluid--invalid .#{$prefix}--text-input, .#{$prefix}--time-picker--fluid--warning .#{$prefix}--text-input, .#{$prefix}--time-picker--fluid--invalid .#{$prefix}--select-input, .#{$prefix}--time-picker--fluid--warning .#{$prefix}--select-input { - border-bottom: 1px solid transparent; + border-block-end: 1px solid transparent; } .#{$prefix}--time-picker--fluid.#{$prefix}--time-picker--fluid--invalid .#{$prefix}--time-picker__divider, .#{$prefix}--time-picker--fluid.#{$prefix}--time-picker--fluid--warning .#{$prefix}--time-picker__divider { - width: calc(100% - 2rem); + inline-size: calc(100% - 2rem); border-style: solid; border-color: $border-subtle; - border-bottom: none; + border-block-end: none; margin: 0 1rem; } // Skeleton styles .#{$prefix}--time-picker--fluid--skeleton { display: flex; - width: 100%; - height: convert.to-rem(64px); + inline-size: 100%; + block-size: convert.to-rem(64px); } .#{$prefix}--time-picker--fluid--skeleton > * { - width: auto; - height: 100%; + inline-size: auto; + block-size: 100%; } .#{$prefix}--time-picker--fluid--skeleton > *:nth-child(1), .#{$prefix}--time-picker--fluid--skeleton > *:nth-child(2) { - width: 25%; + inline-size: 25%; } .#{$prefix}--time-picker--fluid--skeleton > *:last-child, .#{$prefix}--time-picker--fluid--skeleton.#{$prefix}--time-picker--equal-width > *:first-child { - width: 50%; + inline-size: 50%; } } diff --git a/packages/styles/scss/components/form/_form.scss b/packages/styles/scss/components/form/_form.scss index 383e88fd905a..74b8c34a6eeb 100644 --- a/packages/styles/scss/components/form/_form.scss +++ b/packages/styles/scss/components/form/_form.scss @@ -71,8 +71,8 @@ $input-label-weight: 400 !default; .#{$prefix}--label + .#{$prefix}--tooltip { position: relative; - top: 0.2rem; - left: 0.5rem; + inset-block-start: 0.2rem; + inset-inline-start: 0.5rem; } .#{$prefix}--label + .#{$prefix}--tooltip .#{$prefix}--tooltip__trigger { @@ -103,16 +103,16 @@ $input-label-weight: 400 !default; } .#{$prefix}--label + .#{$prefix}--toggletip { - top: 0.2rem; - left: 0.5rem; + inset-block-start: 0.2rem; + inset-inline-start: 0.5rem; } // Skeleton State .#{$prefix}--label.#{$prefix}--skeleton { @include skeleton; - width: convert.to-rem(75px); - height: convert.to-rem(14px); + inline-size: convert.to-rem(75px); + block-size: convert.to-rem(14px); } input[type='number'] { @@ -215,7 +215,7 @@ $input-label-weight: 400 !default; z-index: 0; // Added to prevent error text from displaying under helper text in Safari (#6392) - width: 100%; + inline-size: 100%; margin-top: $spacing-02; color: $text-secondary; opacity: 1; diff --git a/packages/styles/scss/components/inline-loading/_inline-loading.scss b/packages/styles/scss/components/inline-loading/_inline-loading.scss index 03d6e56c0fd4..4ca5734a1f32 100644 --- a/packages/styles/scss/components/inline-loading/_inline-loading.scss +++ b/packages/styles/scss/components/inline-loading/_inline-loading.scss @@ -24,8 +24,8 @@ $-loading-gap-small: 110; @mixin inline-loading { .#{$prefix}--inline-loading { display: flex; - width: 100%; - min-height: 2rem; + inline-size: 100%; + min-block-size: 2rem; align-items: center; } @@ -40,7 +40,7 @@ $-loading-gap-small: 110; display: flex; align-items: center; justify-content: center; - margin-right: $spacing-03; + margin-inline-end: $spacing-03; } .#{$prefix}--inline-loading__checkmark-container { @@ -49,8 +49,8 @@ $-loading-gap-small: 110; // For deprecated older markup &.#{$prefix}--inline-loading__svg { position: absolute; - top: 0.75rem; - width: 0.75rem; + inset-block-start: 0.75rem; + inline-size: 0.75rem; } &[hidden] { @@ -71,8 +71,8 @@ $-loading-gap-small: 110; } .#{$prefix}--inline-loading--error { - width: convert.to-rem(16px); - height: convert.to-rem(16px); + inline-size: convert.to-rem(16px); + block-size: convert.to-rem(16px); fill: $support-error; &[hidden] { @@ -87,7 +87,7 @@ $-loading-gap-small: 110; @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) { .#{$prefix}--inline-loading__checkmark-container { - top: 1px; + inset-block-start: 1px; right: 0.5rem; } diff --git a/packages/styles/scss/components/link/_link.scss b/packages/styles/scss/components/link/_link.scss index bfe79f5a33f5..f44f8e5c2b8a 100644 --- a/packages/styles/scss/components/link/_link.scss +++ b/packages/styles/scss/components/link/_link.scss @@ -111,6 +111,6 @@ $link-focus-text-color: custom-property.get-var( .#{$prefix}--link__icon { display: inline-flex; align-self: center; - margin-left: $spacing-03; + margin-inline-start: $spacing-03; } } diff --git a/packages/styles/scss/components/list-box/_list-box.scss b/packages/styles/scss/components/list-box/_list-box.scss index 8d092a458aac..39e963e8a90e 100644 --- a/packages/styles/scss/components/list-box/_list-box.scss +++ b/packages/styles/scss/components/list-box/_list-box.scss @@ -79,11 +79,11 @@ $list-box-menu-width: convert.to-rem(300px); @include reset; position: relative; - width: $list-box-width; - height: convert.to-rem(40px); + inline-size: $list-box-width; + block-size: convert.to-rem(40px); max-height: convert.to-rem(40px); border: none; - border-bottom: 1px solid $border-strong; + border-block-end: 1px solid $border-strong; background-color: $field; color: $text-primary; cursor: pointer; @@ -95,12 +95,12 @@ $list-box-menu-width: convert.to-rem(300px); } .#{$prefix}--list-box--lg { - height: convert.to-rem(48px); + block-size: convert.to-rem(48px); max-height: convert.to-rem(48px); } .#{$prefix}--list-box--sm { - height: convert.to-rem(32px); + block-size: convert.to-rem(32px); max-height: convert.to-rem(32px); } @@ -127,13 +127,13 @@ $list-box-menu-width: convert.to-rem(300px); .#{$prefix}--list-box .#{$prefix}--text-input { min-width: 0; - height: 100%; + block-size: 100%; } // invalid states .#{$prefix}--list-box__invalid-icon { position: absolute; - top: 50%; + inset-block-start: 50%; right: $spacing-08; fill: $support-error; transform: translateY(-50%); @@ -151,15 +151,15 @@ $list-box-menu-width: convert.to-rem(300px); .#{$prefix}--list-box[data-invalid] .#{$prefix}--list-box__field, .#{$prefix}--list-box.#{$prefix}--list-box--warning .#{$prefix}--list-box__field { - padding-right: $spacing-10; - border-bottom: 0; + padding-inline-end: $spacing-10; + border-block-end: 0; } .#{$prefix}--list-box[data-invalid].#{$prefix}--list-box--inline .#{$prefix}--list-box__field, .#{$prefix}--list-box.#{$prefix}--list-box--warning.#{$prefix}--list-box--inline .#{$prefix}--list-box__field { - padding-right: convert.to-rem(56px); + padding-inline-end: convert.to-rem(56px); } // V11: Possibly deprecate @@ -235,12 +235,12 @@ $list-box-menu-width: convert.to-rem(300px); // disabled && invalid .#{$prefix}--list-box--disabled.#{$prefix}--list-box[data-invalid] .#{$prefix}--list-box__field { - padding-right: $spacing-09; + padding-inline-end: $spacing-09; } .#{$prefix}--list-box--disabled.#{$prefix}--list-box[data-invalid].#{$prefix}--list-box--inline .#{$prefix}--list-box__field { - padding-right: $spacing-07; + padding-inline-end: $spacing-07; } // Inline variant for a `list-box` @@ -287,7 +287,7 @@ $list-box-menu-width: convert.to-rem(300px); } .#{$prefix}--list-box--inline .#{$prefix}--list-box__field { - height: 100%; + block-size: 100%; } .#{$prefix}--dropdown--inline .#{$prefix}--list-box__field { @@ -307,7 +307,7 @@ $list-box-menu-width: convert.to-rem(300px); display: inline-flex; overflow: hidden; // Account for the border in `.bx--list-box` - height: calc(100% + 1px); + block-size: calc(100% + 1px); align-items: center; padding: 0 $spacing-09 0 $spacing-05; cursor: pointer; @@ -328,7 +328,7 @@ $list-box-menu-width: convert.to-rem(300px); // populated input field .#{$prefix}--list-box__field .#{$prefix}--text-input { - padding-right: convert.to-rem(72px); + padding-inline-end: convert.to-rem(72px); } // invalid && populated input field @@ -339,7 +339,7 @@ $list-box-menu-width: convert.to-rem(300px); .#{$prefix}--list-box__field .#{$prefix}--text-input { // to account for clear input button outline - padding-right: convert.to-rem(98px); + padding-inline-end: convert.to-rem(98px); } .#{$prefix}--list-box[data-invalid] @@ -356,7 +356,7 @@ $list-box-menu-width: convert.to-rem(300px); // empty input field .#{$prefix}--list-box__field .#{$prefix}--text-input--empty { - padding-right: $spacing-09; + padding-inline-end: $spacing-09; } // invalid && empty input field @@ -366,7 +366,7 @@ $list-box-menu-width: convert.to-rem(300px); .#{$prefix}--list-box--warning .#{$prefix}--list-box__field .#{$prefix}--text-input--empty { - padding-right: carbon--mini-units(9); + padding-inline-end: carbon--mini-units(9); } .#{$prefix}--list-box[data-invalid] @@ -399,8 +399,8 @@ $list-box-menu-width: convert.to-rem(300px); position: absolute; right: $spacing-05; display: flex; - width: convert.to-rem(24px); - height: convert.to-rem(24px); + inline-size: convert.to-rem(24px); + block-size: convert.to-rem(24px); align-items: center; justify-content: center; cursor: pointer; @@ -413,7 +413,7 @@ $list-box-menu-width: convert.to-rem(300px); } .#{$prefix}--list-box__menu-icon--open { - width: convert.to-rem(24px); + inline-size: convert.to-rem(24px); justify-content: center; transform: rotate(180deg); } @@ -423,12 +423,12 @@ $list-box-menu-width: convert.to-rem(300px); @include button-reset.reset($width: false); position: absolute; - top: 50%; + inset-block-start: 50%; /* to preserve .5rem space between icons according to spec top/transform used to center the combobox clear selection icon in IE11 */ right: convert.to-rem(36px); display: flex; - width: convert.to-rem(24px); - height: convert.to-rem(24px); + inline-size: convert.to-rem(24px); + block-size: convert.to-rem(24px); align-items: center; justify-content: center; cursor: pointer; @@ -458,16 +458,16 @@ $list-box-menu-width: convert.to-rem(300px); @include type-style('label-01'); position: static; - top: auto; + inset-block-start: auto; display: flex; - width: auto; - height: convert.to-rem(24px); + inline-size: auto; + block-size: convert.to-rem(24px); align-items: center; justify-content: space-between; padding: convert.to-rem(8px); // Align with hover circle of X button - padding-right: convert.to-rem(2px); - margin-right: convert.to-rem(10px); + padding-inline-end: convert.to-rem(2px); + margin-inline-end: convert.to-rem(10px); background-color: $background-inverse; border-radius: convert.to-rem(12px); color: $text-inverse; @@ -476,10 +476,10 @@ $list-box-menu-width: convert.to-rem(300px); } .#{$prefix}--list-box__selection--multi > svg { - width: convert.to-rem(20px); - height: convert.to-rem(20px); + inline-size: convert.to-rem(20px); + block-size: convert.to-rem(20px); padding: convert.to-rem(2px); - margin-left: convert.to-rem(4px); + margin-inline-start: convert.to-rem(4px); fill: $icon-inverse; &:hover { @@ -511,9 +511,9 @@ $list-box-menu-width: convert.to-rem(300px); position: absolute; z-index: z('dropdown'); right: 0; - left: 0; + inset-inline-start: 0; display: none; - width: $list-box-width; + inline-size: $list-box-width; background-color: $layer; overflow-y: auto; transition: max-height $duration-fast-02 motion(standard, productive); @@ -555,7 +555,7 @@ $list-box-menu-width: convert.to-rem(300px); @include type-style('body-compact-01'); position: relative; - height: convert.to-rem(40px); + block-size: convert.to-rem(40px); color: $text-secondary; cursor: pointer; transition: background $duration-fast-01 motion(standard, productive); @@ -576,11 +576,11 @@ $list-box-menu-width: convert.to-rem(300px); } .#{$prefix}--list-box--sm .#{$prefix}--list-box__menu-item { - height: convert.to-rem(32px); + block-size: convert.to-rem(32px); } .#{$prefix}--list-box--lg .#{$prefix}--list-box__menu-item { - height: convert.to-rem(48px); + block-size: convert.to-rem(48px); } .#{$prefix}--list-box--disabled .#{$prefix}--list-box__menu-item:hover { @@ -656,12 +656,12 @@ $list-box-menu-width: convert.to-rem(300px); display: block; overflow: hidden; - height: convert.to-rem(40px); + block-size: convert.to-rem(40px); padding: convert.to-rem(11px) 0; - padding-right: $spacing-06; + padding-inline-end: $spacing-06; border-top: 1px solid transparent; border-top-color: $border-subtle-01; - border-bottom: 1px solid transparent; + border-block-end: 1px solid transparent; margin: 0 $spacing-05; color: $text-secondary; font-weight: normal; @@ -687,14 +687,14 @@ $list-box-menu-width: convert.to-rem(300px); } .#{$prefix}--list-box--sm .#{$prefix}--list-box__menu-item__option { - height: convert.to-rem(32px); - padding-top: convert.to-rem(7px); + block-size: convert.to-rem(32px); + padding-block-start: convert.to-rem(7px); padding-bottom: convert.to-rem(7px); } .#{$prefix}--list-box--lg .#{$prefix}--list-box__menu-item__option { - height: convert.to-rem(48px); - padding-top: convert.to-rem(15px); + block-size: convert.to-rem(48px); + padding-block-start: convert.to-rem(15px); padding-bottom: convert.to-rem(15px); } @@ -766,8 +766,8 @@ $list-box-menu-width: convert.to-rem(300px); margin: 0 $spacing-03; &:focus { - padding-right: $spacing-03; - padding-left: $spacing-03; + padding-inline-end: $spacing-03; + padding-inline-start: $spacing-03; margin: 0; } } @@ -822,7 +822,7 @@ $list-box-menu-width: convert.to-rem(300px); .#{$prefix}--list-box__menu-item__selected-icon { position: absolute; - top: 50%; + inset-block-start: 50%; right: convert.to-rem(16px); display: none; fill: $icon-primary; @@ -840,7 +840,7 @@ $list-box-menu-width: convert.to-rem(300px); } .#{$prefix}--list-box__menu-item .#{$prefix}--checkbox-label { - width: 100%; + inline-size: 100%; } .#{$prefix}--list-box__menu-item .#{$prefix}--checkbox-label-text { @@ -851,7 +851,7 @@ $list-box-menu-width: convert.to-rem(300px); // Dropdown top orientation modifiers .#{$prefix}--list-box--up .#{$prefix}--list-box__menu { - bottom: 2.5rem; + inset-block-end: 2.5rem; } .#{$prefix}--list-box--up.#{$prefix}--dropdown--sm @@ -861,7 +861,7 @@ $list-box-menu-width: convert.to-rem(300px); .#{$prefix}--list-box--up .#{$prefix}--list-box--sm .#{$prefix}--list-box__menu { - bottom: 2rem; + inset-block-end: 2rem; } .#{$prefix}--list-box--up.#{$prefix}--dropdown--lg @@ -871,7 +871,7 @@ $list-box-menu-width: convert.to-rem(300px); .#{$prefix}--list-box--up .#{$prefix}--list-box--lg .#{$prefix}--list-box__menu { - bottom: 3rem; + inset-block-end: 3rem; } // Tweaks for descendants diff --git a/packages/styles/scss/components/list/_list.scss b/packages/styles/scss/components/list/_list.scss index 57e5e6972211..780a0faa2f02 100644 --- a/packages/styles/scss/components/list/_list.scss +++ b/packages/styles/scss/components/list/_list.scss @@ -31,7 +31,7 @@ } .#{$prefix}--list--unordered:not(.#{$prefix}--list--nested) { - margin-left: $spacing-05; + margin-inline-start: $spacing-05; } .#{$prefix}--list--expressive, @@ -48,11 +48,11 @@ } .#{$prefix}--list--nested { - margin-left: convert.to-rem(32px); + margin-inline-start: convert.to-rem(32px); } .#{$prefix}--list--nested .#{$prefix}--list__item { - padding-left: $spacing-02; + padding-inline-start: $spacing-02; } .#{$prefix}--list--ordered:not(.#{$prefix}--list--nested) { @@ -67,7 +67,7 @@ .#{$prefix}--list--ordered:not(.#{$prefix}--list--nested) > .#{$prefix}--list__item::before { position: absolute; - left: convert.to-rem(-24px); + inset-inline-start: convert.to-rem(-24px); content: counter(item) '.'; counter-increment: item; } @@ -82,7 +82,7 @@ &::before { position: absolute; - left: calc(-1 * #{$spacing-05}); + inset-inline-start: calc(-1 * #{$spacing-05}); // – en dash content: '\002013'; } @@ -91,7 +91,7 @@ .#{$prefix}--list--unordered.#{$prefix}--list--nested > .#{$prefix}--list__item::before { // offset to account for smaller ▪ vs – - left: calc(-1 * #{$spacing-04}); + inset-inline-start: calc(-1 * #{$spacing-04}); // ▪ square content: '\0025AA'; } diff --git a/packages/styles/scss/components/loading/_loading.scss b/packages/styles/scss/components/loading/_loading.scss index f810cce446da..1cb5e2e6bbf7 100644 --- a/packages/styles/scss/components/loading/_loading.scss +++ b/packages/styles/scss/components/loading/_loading.scss @@ -25,8 +25,8 @@ @include component-reset.reset; @include animation.spin; - width: $loading-size; - height: $loading-size; + inline-size: $loading-size; + block-size: $loading-size; } // Animation (Spin by default) @@ -54,8 +54,8 @@ } .#{$prefix}--loading--small { - width: convert.to-rem(16px); - height: convert.to-rem(16px); + inline-size: convert.to-rem(16px); + block-size: convert.to-rem(16px); circle { stroke-width: 16; @@ -84,11 +84,11 @@ .#{$prefix}--loading-overlay { position: fixed; z-index: z('overlay'); - top: 0; - left: 0; + inset-block-start: 0; + inset-inline-start: 0; display: flex; - width: 100%; - height: 100%; + inline-size: 100%; + block-size: 100%; align-items: center; justify-content: center; background-color: $overlay; diff --git a/packages/styles/scss/components/menu/_menu.scss b/packages/styles/scss/components/menu/_menu.scss index 6b0939257b05..97a3f0822e65 100644 --- a/packages/styles/scss/components/menu/_menu.scss +++ b/packages/styles/scss/components/menu/_menu.scss @@ -64,13 +64,13 @@ @include type-style('body-short-01'); display: grid; - height: 2rem; + block-size: 2rem; align-items: center; color: $text-primary; column-gap: $spacing-03; cursor: pointer; grid-template-columns: 1fr max-content; - padding-inline: $spacing-05; + padding-inline-end: $spacing-05; transition: background-color $duration-fast-01 motion(standard, productive); &:focus { @@ -91,7 +91,7 @@ @each $size, $value in $supported-sizes { .#{$prefix}--menu--#{$size} .#{$prefix}--menu-item { - height: $value; + block-size: $value; } } @@ -151,8 +151,8 @@ .#{$prefix}--menu-item-divider { display: block; - width: 100%; - height: convert.to-rem(1px); + inline-size: 100%; + block-size: convert.to-rem(1px); background-color: $border-subtle; margin-block: $spacing-02; } diff --git a/packages/styles/scss/components/modal/_modal.scss b/packages/styles/scss/components/modal/_modal.scss index 4d9d47b16b81..ab3959c29158 100644 --- a/packages/styles/scss/components/modal/_modal.scss +++ b/packages/styles/scss/components/modal/_modal.scss @@ -25,11 +25,11 @@ .#{$prefix}--modal { position: fixed; z-index: z('modal'); - top: 0; - left: 0; + inset-block-start: 0; + inset-inline-start: 0; display: flex; - width: 100vw; - height: 100vh; + inline-size: 100vw; + block-size: 100vh; align-items: center; justify-content: center; background-color: $overlay; @@ -140,7 +140,7 @@ .#{$prefix}--number__control-btn:focus::before, .#{$prefix}--number-input--fluid .#{$prefix}--number__control-btn:focus::after { - border-left: 2px solid $focus; + border-inline-start: 2px solid $focus; } } @@ -154,11 +154,11 @@ // ----------------------------- .#{$prefix}--modal-container { position: fixed; - top: 0; + inset-block-start: 0; display: grid; overflow: hidden; - width: 100%; - height: 100%; + inline-size: 100%; + block-size: 100%; max-height: 100%; background-color: $layer; grid-template-columns: 100%; @@ -172,18 +172,18 @@ @include breakpoint(md) { position: static; - width: 84%; - height: auto; + inline-size: 84%; + block-size: auto; max-height: 90%; } @include breakpoint(lg) { - width: 60%; + inline-size: 60%; max-height: 84%; } @include breakpoint(xlg) { - width: 48%; + inline-size: 48%; } .#{$prefix}--modal-container-body { @@ -199,10 +199,10 @@ position: relative; // Required to accommodate focus outline's negative offset: - padding-top: $spacing-03; + padding-block-start: $spacing-03; // anything besides text/p spans full width, with just 16px padding - padding-right: $spacing-05; - padding-left: $spacing-05; + padding-inline-end: $spacing-05; + padding-inline-start: $spacing-05; margin-bottom: $spacing-09; color: $text-primary; font-weight: 400; @@ -217,8 +217,8 @@ // fluid form in modal .#{$prefix}--modal-content .#{$prefix}--form--fluid { - margin-right: -$spacing-05; - margin-left: -$spacing-05; + margin-inline-end: -$spacing-05; + margin-inline-start: -$spacing-05; } //TO-DO: remove .#{$prefix}--modal-content__regular-content in v11 since hasForm has been deprecated @@ -227,22 +227,22 @@ .#{$prefix}--modal-content__regular-content { @include type-style('body-01'); // padding should take into account the left and right padding of modal container - padding-right: calc(20% - $spacing-07); + padding-inline-end: calc(20% - $spacing-07); } //TO-DO: remove .#{$prefix}--modal-content--with-form in v11 since hasForm has been deprecated\ // anything besides text/p spans full width, with just 16px padding .#{$prefix}--modal-content--with-form { - padding-right: $spacing-05; + padding-inline-end: $spacing-05; } // ----------------------------- // Modal header // ----------------------------- .#{$prefix}--modal-header { - padding-top: $spacing-05; - padding-right: $spacing-09; - padding-left: $spacing-05; + padding-block-start: $spacing-05; + padding-inline-end: $spacing-09; + padding-inline-start: $spacing-05; margin-bottom: $spacing-03; grid-column: 1/-1; grid-row: 1/1; @@ -261,7 +261,7 @@ @include type-style('heading-03'); // padding should take into account the left and right padding of modal container - padding-right: calc(20% - $spacing-09); + padding-inline-end: calc(20% - $spacing-09); color: $text-primary; } @@ -271,25 +271,25 @@ .#{$prefix}--modal-container--xs { //text always spans full width in xs modals .#{$prefix}--modal-content__regular-content { - padding-right: $spacing-05; + padding-inline-end: $spacing-05; } .#{$prefix}--modal-content > p { //.#{$prefix}--modal-content already has 16px padding so this doesn't need any - padding-right: 0; + padding-inline-end: 0; } @include breakpoint(md) { - width: 48%; + inline-size: 48%; } @include breakpoint(lg) { - width: 32%; + inline-size: 32%; max-height: 48%; } @include breakpoint(xlg) { - width: 24%; + inline-size: 24%; } } @@ -299,30 +299,30 @@ .#{$prefix}--modal-container--sm { //text spans full width in sm modals below 1056 .#{$prefix}--modal-content__regular-content { - padding-right: $spacing-05; + padding-inline-end: $spacing-05; } .#{$prefix}--modal-content > p { //.#{$prefix}--modal-content already has 16px padding so this doesn't need any - padding-right: 0; + padding-inline-end: 0; } @include breakpoint(md) { - width: 60%; + inline-size: 60%; } @include breakpoint(lg) { - width: 42%; + inline-size: 42%; max-height: 72%; .#{$prefix}--modal-content > p, .#{$prefix}--modal-content__regular-content { - padding-right: 20%; + padding-inline-end: 20%; } } @include breakpoint(xlg) { - width: 36%; + inline-size: 36%; } } @@ -331,16 +331,16 @@ // ----------------------------- .#{$prefix}--modal-container--lg { @include breakpoint(md) { - width: 96%; + inline-size: 96%; } @include breakpoint(lg) { - width: 84%; + inline-size: 84%; max-height: 96%; } @include breakpoint(xlg) { - width: 72%; + inline-size: 72%; } } @@ -354,10 +354,10 @@ .#{$prefix}--modal-content--overflow-indicator { position: absolute; - bottom: $spacing-09; - left: 0; - width: 100%; - height: convert.to-rem(32px); + inset-block-end: $spacing-09; + inset-inline-start: 0; + inline-size: 100%; + block-size: convert.to-rem(32px); background-image: linear-gradient(to bottom, transparent, $layer); content: ''; grid-column: 1/-1; @@ -378,7 +378,7 @@ .#{$prefix}--modal-content:focus ~ .#{$prefix}--modal-content--overflow-indicator { - width: calc(100% - 4px); + inline-size: calc(100% - 4px); margin: 0 2px 2px; } @@ -397,7 +397,7 @@ // ----------------------------- .#{$prefix}--modal-footer { display: flex; - height: convert.to-rem(64px); + block-size: convert.to-rem(64px); justify-content: flex-end; margin-top: auto; grid-column: 1/-1; @@ -406,10 +406,10 @@ .#{$prefix}--modal-footer .#{$prefix}--btn { max-width: none; - height: convert.to-rem(64px); + block-size: convert.to-rem(64px); flex: 0 1 50%; align-items: baseline; - padding-top: calc($spacing-05 - convert.to-rem(2px)); + padding-block-start: calc($spacing-05 - convert.to-rem(2px)); padding-bottom: $spacing-07; margin: 0; } @@ -425,11 +425,11 @@ .#{$prefix}--modal-close { position: absolute; z-index: 2; - top: 0; + inset-block-start: 0; right: 0; overflow: hidden; - width: 3rem; - height: 3rem; + inline-size: 3rem; + block-size: 3rem; padding: convert.to-rem(12px); border: 2px solid transparent; background-color: transparent; @@ -451,8 +451,8 @@ } .#{$prefix}--modal-close__icon { - width: convert.to-rem(20px); - height: convert.to-rem(20px); + inline-size: convert.to-rem(20px); + block-size: convert.to-rem(20px); fill: $icon-primary; } diff --git a/packages/styles/scss/components/multiselect/_multiselect.scss b/packages/styles/scss/components/multiselect/_multiselect.scss index 84f8249bfa06..27674963dd16 100644 --- a/packages/styles/scss/components/multiselect/_multiselect.scss +++ b/packages/styles/scss/components/multiselect/_multiselect.scss @@ -20,8 +20,8 @@ @mixin multiselect { .#{$prefix}--multi-select .#{$prefix}--list-box__field--wrapper { display: inline-flex; - width: 100%; - height: calc(100% + 1px); + inline-size: 100%; + block-size: calc(100% + 1px); align-items: center; } @@ -46,8 +46,8 @@ .#{$prefix}--list-box__menu-item__option .#{$prefix}--checkbox-wrapper { display: flex; - width: 100%; - height: 100%; + inline-size: 100%; + block-size: 100%; align-items: center; } @@ -56,8 +56,8 @@ .#{$prefix}--checkbox-label { display: inline-block; overflow: hidden; - width: 100%; - padding-left: convert.to-rem(28px); + inline-size: 100%; + padding-inline-start: convert.to-rem(28px); text-overflow: ellipsis; white-space: nowrap; } @@ -97,7 +97,7 @@ .#{$prefix}--text-input, .#{$prefix}--multi-select.#{$prefix}--multi-select--selected .#{$prefix}--list-box__field { - padding-left: 0; + padding-inline-start: 0; } .#{$prefix}--multi-select--filterable.#{$prefix}--list-box--disabled:hover:not( @@ -115,7 +115,7 @@ .#{$prefix}--multi-select--filterable.#{$prefix}--multi-select--inline, .#{$prefix}--multi-select--filterable.#{$prefix}--multi-select--inline .#{$prefix}--text-input { - border-bottom: 0; + border-block-end: 0; background-color: transparent; } diff --git a/packages/styles/scss/components/notification/_actionable-notification.scss b/packages/styles/scss/components/notification/_actionable-notification.scss index 6a9baa731154..18f176b613a8 100644 --- a/packages/styles/scss/components/notification/_actionable-notification.scss +++ b/packages/styles/scss/components/notification/_actionable-notification.scss @@ -31,11 +31,11 @@ position: relative; display: flex; - width: 100%; + inline-size: 100%; min-width: convert.to-rem(288px); max-width: convert.to-rem(288px); - height: auto; - min-height: convert.to-rem(48px); + block-size: auto; + min-block-size: convert.to-rem(48px); flex-wrap: wrap; color: $text-inverse; @@ -93,10 +93,10 @@ .#{$prefix}--actionable-notification--toast )::before { position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; + inset-block-start: 0; + inset-inline-start: 0; + inline-size: 100%; + block-size: 100%; box-sizing: border-box; border-width: 1px 1px 1px 0; border-style: solid; @@ -209,13 +209,13 @@ .#{$prefix}--actionable-notification .#{$prefix}--inline-notification__icon { flex-shrink: 0; margin-top: convert.to-rem(14px); - margin-right: $spacing-05; + margin-inline-end: $spacing-05; } .#{$prefix}--actionable-notification .#{$prefix}--toast-notification__icon { flex-shrink: 0; margin-top: $spacing-05; - margin-right: $spacing-05; + margin-inline-end: $spacing-05; } .#{$prefix}--actionable-notification__text-wrapper { @@ -245,14 +245,14 @@ .#{$prefix}--actionable-notification__title { @include type-style('heading-compact-01'); - margin-right: $spacing-02; + margin-inline-end: $spacing-02; font-weight: 600; word-break: break-word; } .#{$prefix}--actionable-notification--toast .#{$prefix}--actionable-notification__title { - margin-right: 0; + margin-inline-end: 0; } .#{$prefix}--actionable-notification__subtitle { @@ -269,9 +269,9 @@ } /* Ghost action button when inline */ .#{$prefix}--actionable-notification__action-button.#{$prefix}--btn--ghost { - height: convert.to-rem(32px); + block-size: convert.to-rem(32px); margin-bottom: $spacing-03; - margin-left: $spacing-08; + margin-inline-start: $spacing-08; @include breakpoint(md) { margin: $spacing-03 0; @@ -311,19 +311,19 @@ .#{$prefix}--actionable-notification--hide-close-button .#{$prefix}--actionable-notification__action-button.#{$prefix}--btn--ghost { - margin-right: $spacing-03; + margin-inline-end: $spacing-03; } /* Tertiary action button when not inline (toast) */ .#{$prefix}--actionable-notification__action-button.#{$prefix}--btn--tertiary { - padding-right: $spacing-05; - padding-left: $spacing-05; + padding-inline-end: $spacing-05; + padding-inline-start: $spacing-05; margin-bottom: $spacing-05; // Button should be left aligned with text. // 20px is the width of the notification icon // 2px is the width of the left border that should be negated - margin-left: calc( + margin-inline-start: calc( #{$spacing-07} + #{convert.to-rem(20px)} - #{convert.to-rem(2px)} ); } @@ -407,20 +407,20 @@ .#{$prefix}--actionable-notification--hide-close-button .#{$prefix}--actionable-notification__action-button.#{$prefix}--btn--tertiary { - margin-right: $spacing-03; + margin-inline-end: $spacing-03; } .#{$prefix}--actionable-notification__close-button { @include focus-outline('reset'); position: absolute; - top: 0; + inset-block-start: 0; right: 0; display: flex; - width: convert.to-rem(48px); + inline-size: convert.to-rem(48px); min-width: convert.to-rem(48px); max-width: convert.to-rem(48px); - height: convert.to-rem(48px); + block-size: convert.to-rem(48px); flex-direction: column; align-items: center; justify-content: center; diff --git a/packages/styles/scss/components/notification/_inline-notification.scss b/packages/styles/scss/components/notification/_inline-notification.scss index e10ff6d68437..c23b9862067a 100644 --- a/packages/styles/scss/components/notification/_inline-notification.scss +++ b/packages/styles/scss/components/notification/_inline-notification.scss @@ -28,11 +28,11 @@ position: relative; display: flex; - width: 100%; + inline-size: 100%; min-width: convert.to-rem(288px); max-width: convert.to-rem(288px); - height: auto; - min-height: convert.to-rem(48px); + block-size: auto; + min-block-size: convert.to-rem(48px); flex-wrap: wrap; color: $text-inverse; @@ -80,10 +80,10 @@ &::before { position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; + inset-block-start: 0; + inset-inline-start: 0; + inline-size: 100%; + block-size: 100%; box-sizing: border-box; border-width: 1px 1px 1px 0; border-style: solid; @@ -192,7 +192,7 @@ .#{$prefix}--inline-notification__icon { flex-shrink: 0; margin-top: convert.to-rem(14px); - margin-right: $spacing-05; + margin-inline-end: $spacing-05; } .#{$prefix}--inline-notification__text-wrapper { @@ -214,9 +214,9 @@ } .#{$prefix}--inline-notification__action-button.#{$prefix}--btn--ghost { - height: convert.to-rem(32px); + block-size: convert.to-rem(32px); margin-bottom: $spacing-03; - margin-left: $spacing-08; + margin-inline-start: $spacing-08; @include breakpoint(md) { margin: $spacing-03 0; @@ -256,20 +256,20 @@ .#{$prefix}--inline-notification--hide-close-button .#{$prefix}--inline-notification__action-button.#{$prefix}--btn--ghost { - margin-right: $spacing-03; + margin-inline-end: $spacing-03; } .#{$prefix}--inline-notification__close-button { @include focus-outline('reset'); position: absolute; - top: 0; + inset-block-start: 0; right: 0; display: flex; - width: convert.to-rem(48px); + inline-size: convert.to-rem(48px); min-width: convert.to-rem(48px); max-width: convert.to-rem(48px); - height: convert.to-rem(48px); + block-size: convert.to-rem(48px); flex-direction: column; align-items: center; justify-content: center; diff --git a/packages/styles/scss/components/notification/_mixins.scss b/packages/styles/scss/components/notification/_mixins.scss index 5b4c6bffd044..dab3504a4c00 100644 --- a/packages/styles/scss/components/notification/_mixins.scss +++ b/packages/styles/scss/components/notification/_mixins.scss @@ -11,7 +11,7 @@ /// @group notification @mixin inline-notification--color($color) { border: 1px solid $color; - border-left: 6px solid $color; + border-inline-start: 6px solid $color; .#{$prefix}--inline-notification__icon { fill: $color; @@ -25,13 +25,13 @@ /// @access private /// @group notification @mixin notification--color($color) { - border-left: 6px solid $color; + border-inline-start: 6px solid $color; } /// @access private /// @group notification @mixin notification--experimental($color, $background-color) { - border-left: 3px solid $color; + border-inline-start: 3px solid $color; background: $background-color; .#{$prefix}--inline-notification__icon, diff --git a/packages/styles/scss/components/notification/_toast-notification.scss b/packages/styles/scss/components/notification/_toast-notification.scss index d639f2eaebd7..a6aaaf781beb 100644 --- a/packages/styles/scss/components/notification/_toast-notification.scss +++ b/packages/styles/scss/components/notification/_toast-notification.scss @@ -29,15 +29,15 @@ @include reset; display: flex; - width: convert.to-rem(288px); - height: auto; - padding-left: convert.to-rem(13px); + inline-size: convert.to-rem(288px); + block-size: auto; + padding-inline-start: convert.to-rem(13px); box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.2); color: $text-inverse; @include breakpoint(max) { - width: convert.to-rem(352px); + inline-size: convert.to-rem(352px); } } @@ -142,27 +142,27 @@ .#{$prefix}--toast-notification__icon { flex-shrink: 0; margin-top: $spacing-05; - margin-right: $spacing-05; + margin-inline-end: $spacing-05; } .#{$prefix}--toast-notification__details { - margin-right: $spacing-05; + margin-inline-end: $spacing-05; } .#{$prefix}--toast-notification__close-button { @include focus-outline('reset'); display: flex; - width: convert.to-rem(48px); + inline-size: convert.to-rem(48px); min-width: convert.to-rem(48px); - height: convert.to-rem(48px); - min-height: convert.to-rem(48px); + block-size: convert.to-rem(48px); + min-block-size: convert.to-rem(48px); flex-direction: column; align-items: center; justify-content: center; padding: 0; border: none; - margin-left: auto; + margin-inline-start: auto; background-color: transparent; cursor: pointer; transition: outline $transition-base, background-color $transition-base; @@ -213,7 +213,7 @@ .#{$prefix}--toast-notification__caption { @include type-style('body-compact-01'); - padding-top: $spacing-03; + padding-block-start: $spacing-03; margin-bottom: $spacing-05; color: $text-inverse; } diff --git a/packages/styles/scss/components/number-input/_number-input.scss b/packages/styles/scss/components/number-input/_number-input.scss index 964f164093cf..670ada8bef66 100644 --- a/packages/styles/scss/components/number-input/_number-input.scss +++ b/packages/styles/scss/components/number-input/_number-input.scss @@ -28,14 +28,14 @@ position: relative; display: flex; - width: 100%; + inline-size: 100%; flex-direction: column; } .#{$prefix}--number .#{$prefix}--number__input-wrapper--warning input[type='number'] { - padding-right: convert.to-rem(128px); + padding-inline-end: convert.to-rem(128px); } .#{$prefix}--number input[type='number'] { @@ -43,14 +43,14 @@ @include focus-outline('reset'); display: inline-flex; - width: 100%; + inline-size: 100%; min-width: 9.375rem; - height: convert.to-rem(40px); + block-size: convert.to-rem(40px); box-sizing: border-box; - padding-right: convert.to-rem(96px); - padding-left: $spacing-05; + padding-inline-end: convert.to-rem(96px); + padding-inline-start: $spacing-05; border: 0; - border-bottom: convert.to-rem(1px) solid $border-strong; + border-block-end: convert.to-rem(1px) solid $border-strong; // Firefox: Hide spinner (up and down buttons) -moz-appearance: textfield; @@ -87,35 +87,35 @@ } &[data-invalid] { - padding-right: convert.to-rem(128px); + padding-inline-end: convert.to-rem(128px); } } .#{$prefix}--number--lg.#{$prefix}--number { input[type='number'] { - padding-right: convert.to-rem(112px); + padding-inline-end: convert.to-rem(112px); &[data-invalid] { - padding-right: convert.to-rem(144px); + padding-inline-end: convert.to-rem(144px); } } .#{$prefix}--number__input-wrapper--warning input[type='number'] { - padding-right: convert.to-rem(144px); + padding-inline-end: convert.to-rem(144px); } } .#{$prefix}--number--sm.#{$prefix}--number { input[type='number'] { - padding-right: convert.to-rem(80px); + padding-inline-end: convert.to-rem(80px); &[data-invalid] { - padding-right: convert.to-rem(112px); + padding-inline-end: convert.to-rem(112px); } } .#{$prefix}--number__input-wrapper--warning input[type='number'] { - padding-right: convert.to-rem(112px); + padding-inline-end: convert.to-rem(112px); } } @@ -137,11 +137,11 @@ position: absolute; // vertically center controls within parent container on IE11 - top: 50%; + inset-block-start: 50%; right: 0; display: flex; - width: convert.to-rem(80px); - height: 100%; + inline-size: convert.to-rem(80px); + block-size: 100%; flex-direction: row; align-items: center; justify-content: center; @@ -153,26 +153,26 @@ position: relative; display: inline-flex; - height: 100%; + block-size: 100%; align-items: center; justify-content: center; - border-bottom: convert.to-rem(1px) solid $border-strong; + border-block-end: convert.to-rem(1px) solid $border-strong; color: $icon-primary; &::before, &::after { position: absolute; - top: convert.to-rem(2px); + inset-block-start: convert.to-rem(2px); display: block; - width: convert.to-rem(2px); - // height: calc(100% - 4px) is calculated differently in Safari - height: convert.to-rem(36px); + inline-size: convert.to-rem(2px); + // block-size: calc(100% - 4px) is calculated differently in Safari + block-size: convert.to-rem(36px); background-color: $field; content: ''; } &::before { - left: 0; + inset-inline-start: 0; } &::after { @@ -280,8 +280,8 @@ .#{$prefix}--number__rule-divider { position: absolute; z-index: z('overlay'); - width: convert.to-rem(1px); - height: convert.to-rem(16px); + inline-size: convert.to-rem(1px); + block-size: convert.to-rem(16px); background-color: $border-subtle; &:first-of-type { @@ -292,7 +292,7 @@ // rule divider styles .#{$prefix}--number__controls .#{$prefix}--number__rule-divider:first-of-type { - left: 0; + inset-inline-start: 0; background-color: transparent; } @@ -414,38 +414,38 @@ // Size Variant styles .#{$prefix}--number--lg input[type='number'] { - height: convert.to-rem(48px); + block-size: convert.to-rem(48px); } .#{$prefix}--number--lg .#{$prefix}--number__controls { - width: convert.to-rem(96px); + inline-size: convert.to-rem(96px); } .#{$prefix}--number--lg .#{$prefix}--number__control-btn { - width: convert.to-rem(48px); + inline-size: convert.to-rem(48px); &::before, &::after { - // height: calc(100% - 4px) is calculated differently in Safari - height: convert.to-rem(44px); + // block-size: calc(100% - 4px) is calculated differently in Safari + block-size: convert.to-rem(44px); } } .#{$prefix}--number--sm input[type='number'] { - height: convert.to-rem(32px); + block-size: convert.to-rem(32px); } .#{$prefix}--number--sm .#{$prefix}--number__controls { - width: convert.to-rem(64px); + inline-size: convert.to-rem(64px); } .#{$prefix}--number--sm .#{$prefix}--number__control-btn { - width: convert.to-rem(32px); + inline-size: convert.to-rem(32px); &::before, &::after { - // height: calc(100% - 4px) is calculated differently in Safari - height: convert.to-rem(28px); + // block-size: calc(100% - 4px) is calculated differently in Safari + block-size: convert.to-rem(28px); } } @@ -458,7 +458,7 @@ // No steppers .#{$prefix}--number--nosteppers input[type='number'] { - padding-right: convert.to-rem(48px); + padding-inline-end: convert.to-rem(48px); } .#{$prefix}--number--nosteppers .#{$prefix}--number__invalid { @@ -508,8 +508,8 @@ .#{$prefix}--number.#{$prefix}--skeleton { @include skeleton; - width: 100%; - height: 2.5rem; + inline-size: 100%; + block-size: 2.5rem; input[type='number'] { display: none; diff --git a/packages/styles/scss/components/overflow-menu/_overflow-menu.scss b/packages/styles/scss/components/overflow-menu/_overflow-menu.scss index 3f5c84710d06..b01124b897f2 100644 --- a/packages/styles/scss/components/overflow-menu/_overflow-menu.scss +++ b/packages/styles/scss/components/overflow-menu/_overflow-menu.scss @@ -33,9 +33,9 @@ position: relative; display: flex; - width: convert.to-rem(40px); - height: convert.to-rem(40px); - min-height: convert.to-rem(40px); + inline-size: convert.to-rem(40px); + block-size: convert.to-rem(40px); + min-block-size: convert.to-rem(40px); align-items: center; justify-content: center; cursor: pointer; @@ -56,13 +56,13 @@ } .#{$prefix}--overflow-menu--sm { - width: convert.to-rem(32px); - height: convert.to-rem(32px); + inline-size: convert.to-rem(32px); + block-size: convert.to-rem(32px); } .#{$prefix}--overflow-menu--lg { - width: convert.to-rem(48px); - height: convert.to-rem(48px); + inline-size: convert.to-rem(48px); + block-size: convert.to-rem(48px); } // Overwrite Icon Tooltip focus styles @@ -90,8 +90,8 @@ } .#{$prefix}--overflow-menu__icon { - width: convert.to-rem(16px); - height: convert.to-rem(16px); + inline-size: convert.to-rem(16px); + block-size: convert.to-rem(16px); fill: $icon-primary; } @@ -105,10 +105,10 @@ position: absolute; z-index: z('floating'); - top: 32px; - left: 0; + inset-block-start: 32px; + inset-inline-start: 0; display: none; - width: convert.to-rem(160px); + inline-size: convert.to-rem(160px); flex-direction: column; align-items: flex-start; background-color: $layer; @@ -147,67 +147,67 @@ .#{$prefix}--overflow-menu-options[data-floating-menu-direction='bottom']:not( .#{$prefix}--breadcrumb-menu-options )::after { - top: convert.to-rem(-3px); - left: 0; - width: convert.to-rem(40px); - height: convert.to-rem(3px); + inset-block-start: convert.to-rem(-3px); + inset-inline-start: 0; + inline-size: convert.to-rem(40px); + block-size: convert.to-rem(3px); } .#{$prefix}--overflow-menu-options[data-floating-menu-direction='top']::after { - bottom: convert.to-rem(-8px); - left: 0; - width: convert.to-rem(40px); - height: convert.to-rem(8px); + inset-block-end: convert.to-rem(-8px); + inset-inline-start: 0; + inline-size: convert.to-rem(40px); + block-size: convert.to-rem(8px); } .#{$prefix}--overflow-menu-options[data-floating-menu-direction='left']::after { - top: 0; + inset-block-start: 0; right: convert.to-rem(-6px); - width: convert.to-rem(6px); - height: convert.to-rem(40px); + inline-size: convert.to-rem(6px); + block-size: convert.to-rem(40px); } .#{$prefix}--overflow-menu-options[data-floating-menu-direction='right']::after { - top: 0; - left: convert.to-rem(-6px); - width: convert.to-rem(6px); - height: convert.to-rem(40px); + inset-block-start: 0; + inset-inline-start: convert.to-rem(-6px); + inline-size: convert.to-rem(6px); + block-size: convert.to-rem(40px); } .#{$prefix}--overflow-menu-options--sm.#{$prefix}--overflow-menu-options { &[data-floating-menu-direction='bottom']::after, &[data-floating-menu-direction='top']::after { - width: convert.to-rem(32px); + inline-size: convert.to-rem(32px); } &[data-floating-menu-direction='left']::after, &[data-floating-menu-direction='right']::after { - height: convert.to-rem(32px); + block-size: convert.to-rem(32px); } } .#{$prefix}--overflow-menu-options--lg.#{$prefix}--overflow-menu-options { &[data-floating-menu-direction='bottom']::after, &[data-floating-menu-direction='top']::after { - width: convert.to-rem(48px); + inline-size: convert.to-rem(48px); } &[data-floating-menu-direction='left']::after, &[data-floating-menu-direction='right']::after { - height: convert.to-rem(48px); + block-size: convert.to-rem(48px); } } .#{$prefix}--overflow-menu--flip.#{$prefix}--overflow-menu-options[data-floating-menu-direction='top']::after, .#{$prefix}--overflow-menu--flip.#{$prefix}--overflow-menu-options[data-floating-menu-direction='bottom']::after { right: 0; - left: auto; + inset-inline-start: auto; } .#{$prefix}--overflow-menu--flip.#{$prefix}--overflow-menu-options[data-floating-menu-direction='left']::after, .#{$prefix}--overflow-menu--flip.#{$prefix}--overflow-menu-options[data-floating-menu-direction='right']::after { - top: auto; - bottom: 0; + inset-block-start: auto; + inset-block-end: 0; } .#{$prefix}--overflow-menu-options--open { @@ -215,15 +215,15 @@ } .#{$prefix}--overflow-menu-options__content { - width: 100%; + inline-size: 100%; } .#{$prefix}--overflow-menu-options__option { @include component-reset.reset; display: flex; - width: 100%; - height: convert.to-rem(40px); + inline-size: 100%; + block-size: convert.to-rem(40px); align-items: center; padding: 0; background-color: transparent; @@ -232,12 +232,12 @@ .#{$prefix}--overflow-menu-options--sm .#{$prefix}--overflow-menu-options__option { - height: convert.to-rem(32px); + block-size: convert.to-rem(32px); } .#{$prefix}--overflow-menu-options--lg .#{$prefix}--overflow-menu-options__option { - height: convert.to-rem(48px); + block-size: convert.to-rem(48px); } .#{$prefix}--overflow-menu--divider { @@ -250,7 +250,7 @@ a.#{$prefix}--overflow-menu-options__btn::before { display: inline-block; - height: 100%; + block-size: 100%; content: ''; vertical-align: middle; } @@ -260,9 +260,9 @@ @include focus-outline('reset'); display: inline-flex; - width: 100%; + inline-size: 100%; max-width: 11.25rem; - height: 100%; + block-size: 100%; align-items: center; padding: 0 $spacing-05; border: none; @@ -345,10 +345,10 @@ } .#{$prefix}--overflow-menu--flip { - left: -140px; + inset-inline-start: -140px; &::before { - left: 145px; + inset-inline-start: 145px; } } diff --git a/packages/styles/scss/components/pagination-nav/_mixins.scss b/packages/styles/scss/components/pagination-nav/_mixins.scss index 01aac3f64f32..cc01d2a88f9c 100644 --- a/packages/styles/scss/components/pagination-nav/_mixins.scss +++ b/packages/styles/scss/components/pagination-nav/_mixins.scss @@ -17,11 +17,11 @@ &:not(.#{$prefix}--pagination-nav__page--direction) { &::after { position: absolute; - bottom: 0; - left: 50%; + inset-block-end: 0; + inset-inline-start: 50%; display: block; - width: 0; - height: $spacing-02; + inline-size: 0; + block-size: $spacing-02; background-color: $border-interactive; content: ''; opacity: 0; @@ -35,8 +35,8 @@ .#{$prefix}--pagination-nav__page--active + &::after, &.#{$prefix}--pagination-nav__page--active::after { - left: calc(50% - #{$spacing-05 * 0.5}); - width: $spacing-05; + inset-inline-start: calc(50% - #{$spacing-05 * 0.5}); + inline-size: $spacing-05; opacity: 1; } } diff --git a/packages/styles/scss/components/pagination-nav/_pagination-nav.scss b/packages/styles/scss/components/pagination-nav/_pagination-nav.scss index 9a2f8f56c7d2..93a1e6b7e61b 100644 --- a/packages/styles/scss/components/pagination-nav/_pagination-nav.scss +++ b/packages/styles/scss/components/pagination-nav/_pagination-nav.scss @@ -61,11 +61,11 @@ padding: $item-padding; &:first-child { - padding-left: 0; + padding-inline-start: 0; } &:last-child { - padding-right: 0; + padding-inline-end: 0; } } @@ -121,8 +121,8 @@ .#{$prefix}--pagination-nav__page--direction { display: flex; - width: $button-direction-size; - height: $button-direction-size; + inline-size: $button-direction-size; + block-size: $button-direction-size; align-items: center; justify-content: center; line-height: 0; @@ -144,9 +144,9 @@ .#{$prefix}--pagination-nav__select-icon-wrapper { position: absolute; - top: 0; - width: 100%; - height: 100%; + inset-block-start: 0; + inline-size: 100%; + block-size: 100%; pointer-events: none; @include pseudo-underline(); @@ -160,8 +160,8 @@ .#{$prefix}--pagination-nav__select-icon { position: absolute; - top: calc(50% - #{$select-icon-top-position * 0.5}); - left: calc(50% - #{$select-icon-top-position * 0.5}); + inset-block-start: calc(50% - #{$select-icon-top-position * 0.5}); + inset-inline-start: calc(50% - #{$select-icon-top-position * 0.5}); pointer-events: none; } diff --git a/packages/styles/scss/components/pagination/_pagination.scss b/packages/styles/scss/components/pagination/_pagination.scss index 65ba3756a22a..998b845c1d97 100644 --- a/packages/styles/scss/components/pagination/_pagination.scss +++ b/packages/styles/scss/components/pagination/_pagination.scss @@ -32,8 +32,8 @@ @include type-style('body-compact-01'); display: flex; - width: calc(100% - 1px); - min-height: convert.to-rem(40px); + inline-size: calc(100% - 1px); + min-block-size: convert.to-rem(40px); align-items: center; justify-content: space-between; border-top: 1px solid $border-subtle; @@ -66,29 +66,29 @@ } .#{$prefix}--pagination--sm { - min-height: convert.to-rem(32px); + min-block-size: convert.to-rem(32px); } .#{$prefix}--pagination--lg { - min-height: convert.to-rem(48px); + min-block-size: convert.to-rem(48px); } .#{$prefix}--pagination .#{$prefix}--select { - height: 100%; + block-size: 100%; align-items: center; } .#{$prefix}--pagination .#{$prefix}--select-input--inline__wrapper { display: flex; - height: 100%; + block-size: 100%; } .#{$prefix}--pagination .#{$prefix}--select-input { @include type-style('body-compact-01'); - width: auto; + inline-size: auto; min-width: auto; - height: 100%; + block-size: 100%; line-height: convert.to-rem(40px); } @@ -126,30 +126,30 @@ } .#{$prefix}--pagination .#{$prefix}--select__arrow { - top: 50%; + inset-block-start: 50%; transform: translate(-0.5rem, -50%); } .#{$prefix}--pagination .#{$prefix}--select__item-count .#{$prefix}--select-input { - border-right: 1px solid $border-subtle; + border-inline-end: 1px solid $border-subtle; } .#{$prefix}--pagination__right { - border-left: 1px solid $border-subtle; + border-inline-start: 1px solid $border-subtle; } .#{$prefix}--pagination__left, .#{$prefix}--pagination__right { display: flex; - height: 100%; + block-size: 100%; align-items: center; } .#{$prefix}--pagination__left > .#{$prefix}--form-item, .#{$prefix}--pagination__right > .#{$prefix}--form-item { - height: 100%; + block-size: 100%; } .#{$prefix}--pagination__left .#{$prefix}--pagination__text, @@ -158,18 +158,18 @@ } .#{$prefix}--pagination__left .#{$prefix}--pagination__text { - margin-right: convert.to-rem(1px); + margin-inline-end: convert.to-rem(1px); } .#{$prefix}--pagination__right .#{$prefix}--pagination__text { - margin-right: 1rem; - margin-left: convert.to-rem(1px); + margin-inline-end: 1rem; + margin-inline-start: convert.to-rem(1px); } .#{$prefix}--pagination__right .#{$prefix}--pagination__text.#{$prefix}--pagination__page-text { - margin-right: convert.to-rem(1px); - margin-left: 1rem; + margin-inline-end: convert.to-rem(1px); + margin-inline-start: 1rem; } .#{$prefix}--pagination__right .#{$prefix}--pagination__text:empty { @@ -191,7 +191,7 @@ } span.#{$prefix}--pagination__text { - margin-left: $spacing-05; + margin-inline-start: $spacing-05; color: $text-primary; } @@ -204,13 +204,13 @@ @include component-reset.reset; display: flex; - width: convert.to-rem(40px); - height: convert.to-rem(40px); - min-height: convert.to-rem(32px); + inline-size: convert.to-rem(40px); + block-size: convert.to-rem(40px); + min-block-size: convert.to-rem(32px); align-items: center; justify-content: center; border: none; - border-left: 1px solid $border-subtle; + border-inline-start: 1px solid $border-subtle; margin: 0; background: none; cursor: pointer; @@ -227,22 +227,22 @@ .#{$prefix}--pagination--sm .#{$prefix}--pagination__button, .#{$prefix}--pagination--sm .#{$prefix}--btn--ghost.#{$prefix}--pagination__button { - width: convert.to-rem(32px); - height: convert.to-rem(32px); + inline-size: convert.to-rem(32px); + block-size: convert.to-rem(32px); } .#{$prefix}--pagination--lg .#{$prefix}--pagination__button, .#{$prefix}--pagination--lg .#{$prefix}--btn--ghost.#{$prefix}--pagination__button { - width: convert.to-rem(48px); - height: convert.to-rem(48px); + inline-size: convert.to-rem(48px); + block-size: convert.to-rem(48px); } .#{$prefix}--pagination__button:focus, .#{$prefix}--btn--ghost:focus.#{$prefix}--pagination__button { @include focus-outline('outline'); - border-left: 0; + border-inline-start: 0; } .#{$prefix}--pagination__button:hover, @@ -268,7 +268,7 @@ // Skeleton state .#{$prefix}--pagination.#{$prefix}--skeleton .#{$prefix}--skeleton__text { - margin-right: 1rem; + margin-inline-end: 1rem; margin-bottom: 0; } diff --git a/packages/styles/scss/components/pagination/_unstable_pagination.scss b/packages/styles/scss/components/pagination/_unstable_pagination.scss index 5359c8b57fbc..ee22d4c3e23f 100644 --- a/packages/styles/scss/components/pagination/_unstable_pagination.scss +++ b/packages/styles/scss/components/pagination/_unstable_pagination.scss @@ -25,12 +25,12 @@ @include type-style('body-compact-01'); display: flex; - width: 100%; - min-height: convert.to-rem(40px); + inline-size: 100%; + min-block-size: convert.to-rem(40px); align-items: center; justify-content: space-between; border-top: 1px solid $border-subtle; - border-bottom: 1px solid transparent; + border-block-end: 1px solid transparent; background-color: $layer; } @@ -46,7 +46,7 @@ .#{$prefix}--unstable-pagination__left, .#{$prefix}--unstable-pagination__right { display: flex; - height: 100%; + block-size: 100%; align-items: center; } @@ -56,31 +56,31 @@ .#{$prefix}--unstable-pagination__left > .#{$prefix}--form-item, .#{$prefix}--unstable-pagination__right > .#{$prefix}--form-item { - height: 100%; + block-size: 100%; } .#{$prefix}--unstable-pagination__left .#{$prefix}--unstable-pagination__text { - margin-right: convert.to-rem(1px); + margin-inline-end: convert.to-rem(1px); } .#{$prefix}--unstable-pagination__right .#{$prefix}--unstable-pagination__text { - margin-right: $spacing-05; - margin-left: convert.to-rem(1px); + margin-inline-end: $spacing-05; + margin-inline-start: convert.to-rem(1px); } .#{$prefix}--unstable-pagination__button { @include component-reset.reset; display: flex; - width: convert.to-rem(40px); - height: convert.to-rem(40px); - min-height: convert.to-rem(32px); + inline-size: convert.to-rem(40px); + block-size: convert.to-rem(40px); + min-block-size: convert.to-rem(32px); align-items: center; justify-content: center; border: none; - border-left: 1px solid $border-subtle; + border-inline-start: 1px solid $border-subtle; margin: 0; background: none; color: $icon-primary; @@ -92,8 +92,8 @@ // Unset height/width set by icon-only button: .#{$prefix}--unstable-pagination__button .#{$prefix}--btn__icon { - width: initial; - height: initial; + inline-size: initial; + block-size: initial; } .#{$prefix}--unstable-pagination__button.#{$prefix}--btn--icon-only.#{$prefix}--tooltip__trigger:focus { @@ -124,7 +124,7 @@ .#{$prefix}--unstable-pagination__page-selector, .#{$prefix}--unstable-pagination__page-sizer { - height: 100%; + block-size: 100%; align-items: center; } @@ -133,16 +133,16 @@ .#{$prefix}--unstable-pagination__page-sizer .#{$prefix}--select-input--inline__wrapper { display: flex; - height: 100%; + block-size: 100%; } .#{$prefix}--unstable-pagination__page-selector .#{$prefix}--select-input, .#{$prefix}--unstable-pagination__page-sizer .#{$prefix}--select-input { @include type-style('body-short-01'); - width: auto; + inline-size: auto; min-width: auto; - height: 100%; + block-size: 100%; padding: 0 2.25rem 0 $spacing-05; line-height: convert.to-rem(40px); } @@ -155,7 +155,7 @@ .#{$prefix}--unstable-pagination__page-selector .#{$prefix}--select__arrow, .#{$prefix}--unstable-pagination__page-sizer .#{$prefix}--select__arrow { - top: 50%; + inset-block-start: 50%; transform: translateY(-50%); @include breakpoint('md') { @@ -164,10 +164,10 @@ } .#{$prefix}--unstable-pagination__page-selector { - border-left: 1px solid $border-subtle; + border-inline-start: 1px solid $border-subtle; } .#{$prefix}--unstable-pagination__page-sizer { - border-right: 1px solid $border-subtle; + border-inline-end: 1px solid $border-subtle; } } diff --git a/packages/styles/scss/components/popover/_popover.scss b/packages/styles/scss/components/popover/_popover.scss index 3d45042ac930..2c36e54a4375 100644 --- a/packages/styles/scss/components/popover/_popover.scss +++ b/packages/styles/scss/components/popover/_popover.scss @@ -130,7 +130,7 @@ $popover-caret-height: custom-property.get-var( position: absolute; z-index: z('floating'); display: none; - width: max-content; + inline-size: max-content; max-width: convert.to-rem(368px); background-color: $popover-background-color; border-radius: $popover-border-radius; @@ -192,16 +192,16 @@ $popover-caret-height: custom-property.get-var( .#{$prefix}--popover--bottom > .#{$prefix}--popover > .#{$prefix}--popover-content { - bottom: 0; - left: 50%; + inset-block-end: 0; + inset-inline-start: 50%; transform: translate(-50%, calc(100% + $popover-offset)); } .#{$prefix}--popover--bottom-left > .#{$prefix}--popover > .#{$prefix}--popover-content { - bottom: 0; - left: 0; + inset-block-end: 0; + inset-inline-start: 0; transform: translate( calc(-1 * $popover-offset), calc(100% + $popover-offset) @@ -212,7 +212,7 @@ $popover-caret-height: custom-property.get-var( > .#{$prefix}--popover > .#{$prefix}--popover-content { right: 0; - bottom: 0; + inset-block-end: 0; transform: translate($popover-offset, calc(100% + $popover-offset)); } @@ -226,10 +226,10 @@ $popover-caret-height: custom-property.get-var( .#{$prefix}--popover--bottom-right > .#{$prefix}--popover > .#{$prefix}--popover-content::before { - top: 0; + inset-block-start: 0; right: 0; - left: 0; - height: $popover-offset; + inset-inline-start: 0; + block-size: $popover-offset; transform: translateY(-100%); } @@ -243,10 +243,10 @@ $popover-caret-height: custom-property.get-var( .#{$prefix}--popover--bottom-right > .#{$prefix}--popover > .#{$prefix}--popover-caret { - bottom: 0; - left: 50%; - width: $popover-caret-width; - height: $popover-caret-height; + inset-block-end: 0; + inset-inline-start: 50%; + inline-size: $popover-caret-width; + block-size: $popover-caret-height; clip-path: polygon(0% 100%, 50% 0%, 100% 100%); transform: translate(-50%, $popover-offset); } @@ -259,16 +259,16 @@ $popover-caret-height: custom-property.get-var( .#{$prefix}--popover--top > .#{$prefix}--popover > .#{$prefix}--popover-content { - top: 0; - left: 50%; + inset-block-start: 0; + inset-inline-start: 50%; transform: translate(-50%, calc(-100% - $popover-offset)); } .#{$prefix}--popover--top-left > .#{$prefix}--popover > .#{$prefix}--popover-content { - top: 0; - left: 0; + inset-block-start: 0; + inset-inline-start: 0; transform: translate( calc(-1 * $popover-offset), calc(-100% - $popover-offset) @@ -278,7 +278,7 @@ $popover-caret-height: custom-property.get-var( .#{$prefix}--popover--top-right > .#{$prefix}--popover > .#{$prefix}--popover-content { - top: 0; + inset-block-start: 0; right: 0; transform: translate($popover-offset, calc(-100% - $popover-offset)); } @@ -294,9 +294,9 @@ $popover-caret-height: custom-property.get-var( > .#{$prefix}--popover > .#{$prefix}--popover-content::before { right: 0; - bottom: 0; - left: 0; - height: $popover-offset; + inset-block-end: 0; + inset-inline-start: 0; + block-size: $popover-offset; transform: translateY(100%); } @@ -308,10 +308,10 @@ $popover-caret-height: custom-property.get-var( .#{$prefix}--popover--top-right > .#{$prefix}--popover > .#{$prefix}--popover-caret { - top: 0; - left: 50%; - width: $popover-caret-width; - height: $popover-caret-height; + inset-block-start: 0; + inset-inline-start: 50%; + inline-size: $popover-caret-width; + block-size: $popover-caret-height; clip-path: polygon(0% 0%, 50% 100%, 100% 0%); transform: translate(-50%, calc(-1 * $popover-offset)); } @@ -324,8 +324,8 @@ $popover-caret-height: custom-property.get-var( .#{$prefix}--popover--right > .#{$prefix}--popover > .#{$prefix}--popover-content { - top: 50%; - left: 100%; + inset-block-start: 50%; + inset-inline-start: 100%; // Add in 0.1px to prevent rounding errors where the content is // moved farther than the caret transform: translate($popover-offset, -50%); @@ -334,8 +334,8 @@ $popover-caret-height: custom-property.get-var( .#{$prefix}--popover--right-top > .#{$prefix}--popover > .#{$prefix}--popover-content { - top: 50%; - left: 100%; + inset-block-start: 50%; + inset-inline-start: 100%; transform: translate( $popover-offset, calc(0.5 * $popover-offset * -1 - 16px) @@ -345,8 +345,8 @@ $popover-caret-height: custom-property.get-var( .#{$prefix}--popover--right-bottom > .#{$prefix}--popover > .#{$prefix}--popover-content { - bottom: 50%; - left: 100%; + inset-block-end: 50%; + inset-inline-start: 100%; transform: translate($popover-offset, calc(0.5 * $popover-offset + 16px)); } @@ -360,10 +360,10 @@ $popover-caret-height: custom-property.get-var( .#{$prefix}--popover--right-bottom > .#{$prefix}--popover > .#{$prefix}--popover-content::before { - top: 0; - bottom: 0; - left: 0; - width: $popover-offset; + inset-block-start: 0; + inset-block-end: 0; + inset-inline-start: 0; + inline-size: $popover-offset; transform: translateX(-100%); } @@ -377,10 +377,10 @@ $popover-caret-height: custom-property.get-var( .#{$prefix}--popover--right-bottom > .#{$prefix}--popover > .#{$prefix}--popover-caret { - top: 50%; - left: 100%; - width: $popover-caret-height; - height: $popover-caret-width; + inset-block-start: 50%; + inset-inline-start: 100%; + inline-size: $popover-caret-height; + block-size: $popover-caret-width; clip-path: polygon(0% 50%, 100% 0%, 100% 100%); transform: translate(calc($popover-offset - 100%), -50%); } @@ -393,7 +393,7 @@ $popover-caret-height: custom-property.get-var( .#{$prefix}--popover--left > .#{$prefix}--popover > .#{$prefix}--popover-content { - top: 50%; + inset-block-start: 50%; right: 100%; // Add in 0.1px to prevent rounding errors where the content is // moved farther than the caret @@ -403,7 +403,7 @@ $popover-caret-height: custom-property.get-var( .#{$prefix}--popover--left-top > .#{$prefix}--popover > .#{$prefix}--popover-content { - top: -50%; + inset-block-start: -50%; right: 100%; // Add in 0.1px to prevent rounding errors where the content is // moved farther than the caret @@ -417,7 +417,7 @@ $popover-caret-height: custom-property.get-var( > .#{$prefix}--popover > .#{$prefix}--popover-content { right: 100%; - bottom: -50%; + inset-block-end: -50%; // Add in 0.1px to prevent rounding errors where the content is // moved farther than the caret transform: translate( @@ -436,10 +436,10 @@ $popover-caret-height: custom-property.get-var( .#{$prefix}--popover--left-bottom > .#{$prefix}--popover > .#{$prefix}--popover-content::before { - top: 0; + inset-block-start: 0; right: 0; - bottom: 0; - width: $popover-offset; + inset-block-end: 0; + inline-size: $popover-offset; transform: translateX(100%); } @@ -453,10 +453,10 @@ $popover-caret-height: custom-property.get-var( .#{$prefix}--popover--left-bottom > .#{$prefix}--popover > .#{$prefix}--popover-caret { - top: 50%; + inset-block-start: 50%; right: 100%; - width: $popover-caret-height; - height: $popover-caret-width; + inline-size: $popover-caret-height; + block-size: $popover-caret-width; clip-path: polygon(0% 0%, 100% 50%, 0% 100%); transform: translate(calc(-1 * $popover-offset + 100%), -50%); } @@ -479,8 +479,8 @@ $popover-caret-height: custom-property.get-var( position: relative; display: inline-flex; - width: convert.to-rem(32px); - height: convert.to-rem(32px); + inline-size: convert.to-rem(32px); + block-size: convert.to-rem(32px); align-items: center; justify-content: center; @@ -503,9 +503,9 @@ $popover-caret-height: custom-property.get-var( .#{$prefix}--popover--tab-tip__button:not(:focus)::after { position: absolute; z-index: z('floating') + 1; - bottom: 0; - width: 100%; - height: 2px; + inset-block-end: 0; + inline-size: 100%; + block-size: 2px; background: theme.$layer; content: ''; } diff --git a/packages/styles/scss/components/progress-bar/_progress-bar.scss b/packages/styles/scss/components/progress-bar/_progress-bar.scss index 8371b6669bae..1bbc0653d179 100644 --- a/packages/styles/scss/components/progress-bar/_progress-bar.scss +++ b/packages/styles/scss/components/progress-bar/_progress-bar.scss @@ -41,24 +41,24 @@ .#{$prefix}--progress-bar__track { position: relative; - width: 100%; + inline-size: 100%; min-width: convert.to-rem(48px); - height: convert.to-rem(8px); + block-size: convert.to-rem(8px); background-color: $layer; } .#{$prefix}--progress-bar--big .#{$prefix}--progress-bar__track { - height: convert.to-rem(8px); + block-size: convert.to-rem(8px); } .#{$prefix}--progress-bar--small .#{$prefix}--progress-bar__track { - height: convert.to-rem(4px); + block-size: convert.to-rem(4px); } .#{$prefix}--progress-bar__bar { display: block; - width: 100%; - height: 100%; + inline-size: 100%; + block-size: 100%; background-color: currentColor; color: $interactive; transform: scaleX(0); @@ -161,6 +161,6 @@ .#{$prefix}--progress-bar--indented .#{$prefix}--progress-bar__label, .#{$prefix}--progress-bar--indented .#{$prefix}--progress-bar__helper-text { - padding-inline: layout.density('padding-inline'); + padding-inline-end: layout.density('padding-inline'); } } diff --git a/packages/styles/scss/components/progress-indicator/_progress-indicator.scss b/packages/styles/scss/components/progress-indicator/_progress-indicator.scss index 2095b25654f0..509a97a600fb 100644 --- a/packages/styles/scss/components/progress-indicator/_progress-indicator.scss +++ b/packages/styles/scss/components/progress-indicator/_progress-indicator.scss @@ -39,7 +39,7 @@ $progress-indicator-bar-width: 1px inset transparent !default; position: relative; display: inline-flex; overflow: visible; - width: convert.to-rem(128px); + inline-size: convert.to-rem(128px); min-width: 7rem; flex-direction: row; @@ -55,22 +55,22 @@ $progress-indicator-bar-width: 1px inset transparent !default; .#{$prefix}--progress-line { position: absolute; - left: 0; - width: convert.to-rem(128px); - height: 2px; + inset-inline-start: 0; + inline-size: convert.to-rem(128px); + block-size: 2px; border: $progress-indicator-bar-width; } .#{$prefix}--progress--space-equal .#{$prefix}--progress-line { - width: 100%; + inline-size: 100%; min-width: convert.to-rem(128px); } .#{$prefix}--progress-step svg { position: relative; z-index: 1; - width: $spacing-05; - height: $spacing-05; + inline-size: $spacing-05; + block-size: $spacing-05; flex-shrink: 0; margin: convert.to-rem(10px) $spacing-03 0 0; border-radius: 50%; @@ -108,7 +108,7 @@ $progress-indicator-bar-width: 1px inset transparent !default; .#{$prefix}--progress--space-equal .#{$prefix}--progress-label { max-width: 100%; - margin-right: 0.75rem; + margin-inline-end: 0.75rem; } .#{$prefix}--progress-step-button:not( @@ -134,7 +134,7 @@ $progress-indicator-bar-width: 1px inset transparent !default; } .#{$prefix}--progress-step .#{$prefix}--tooltip .#{$prefix}--tooltip__caret { - margin-left: convert.to-rem(10px); + margin-inline-start: convert.to-rem(10px); } .#{$prefix}--tooltip__text { @@ -148,13 +148,13 @@ $progress-indicator-bar-width: 1px inset transparent !default; @include type-style('body-01'); display: block; - width: convert.to-rem(125px); + inline-size: convert.to-rem(125px); min-width: convert.to-rem(115px); - min-height: $spacing-06; + min-block-size: $spacing-06; padding: $spacing-03 $spacing-05; margin-top: convert.to-rem(40px); - margin-left: convert.to-rem(22px); + margin-inline-start: convert.to-rem(22px); color: $text-inverse; visibility: hidden; } @@ -163,8 +163,8 @@ $progress-indicator-bar-width: 1px inset transparent !default; .#{$prefix}--progress-step .#{$prefix}--tooltip_multi { @include type-style('body-01'); - width: convert.to-rem(150px); - height: auto; + inline-size: convert.to-rem(150px); + block-size: auto; color: $text-inverse; } @@ -173,9 +173,9 @@ $progress-indicator-bar-width: 1px inset transparent !default; @include type-style('label-01'); position: absolute; - left: 0; + inset-inline-start: 0; margin-top: convert.to-rem(28px); - margin-left: $spacing-06; + margin-inline-start: $spacing-06; color: $text-secondary; text-align: start; } @@ -270,8 +270,8 @@ $progress-indicator-bar-width: 1px inset transparent !default; .#{$prefix}--progress.#{$prefix}--skeleton .#{$prefix}--progress-label { @include skeleton; - width: convert.to-rem(40px); - height: convert.to-rem(14px); + inline-size: convert.to-rem(40px); + block-size: convert.to-rem(14px); margin-top: 0.625rem; } @@ -295,9 +295,9 @@ $progress-indicator-bar-width: 1px inset transparent !default; .#{$prefix}--progress--vertical .#{$prefix}--progress-step, .#{$prefix}--progress--vertical .#{$prefix}--progress-step-button { - width: initial; + inline-size: initial; min-width: initial; - min-height: 3.625rem; + min-block-size: 3.625rem; align-content: flex-start; } @@ -310,7 +310,7 @@ $progress-indicator-bar-width: 1px inset transparent !default; .#{$prefix}--progress--vertical .#{$prefix}--progress-label { display: inline-block; - width: initial; + inline-size: initial; max-width: convert.to-rem(160px); margin: 0; vertical-align: top; @@ -325,15 +325,15 @@ $progress-indicator-bar-width: 1px inset transparent !default; .#{$prefix}--progress--vertical .#{$prefix}--progress-optional { position: static; - width: 100%; + inline-size: 100%; margin: auto 0; } .#{$prefix}--progress--vertical .#{$prefix}--progress-line { position: absolute; - top: 0; - left: 0; - width: 1px; - height: 100%; + inset-block-start: 0; + inset-inline-start: 0; + inline-size: 1px; + block-size: 100%; } } diff --git a/packages/styles/scss/components/radio-button/_radio-button.scss b/packages/styles/scss/components/radio-button/_radio-button.scss index a084f9c0137f..92281250e31c 100644 --- a/packages/styles/scss/components/radio-button/_radio-button.scss +++ b/packages/styles/scss/components/radio-button/_radio-button.scss @@ -54,7 +54,7 @@ $radio-border-width: 1px !default; } .#{$prefix}--radio-button__label { - margin-right: 0; + margin-inline-end: 0; line-height: 1.25; } @@ -74,15 +74,15 @@ $radio-border-width: 1px !default; display: flex; align-items: center; - margin-right: $spacing-05; + margin-inline-end: $spacing-05; cursor: pointer; } .#{$prefix}--radio-button__appearance { @include reset; - width: convert.to-rem(18px); - height: convert.to-rem(18px); + inline-size: convert.to-rem(18px); + block-size: convert.to-rem(18px); flex-shrink: 0; border: $radio-border-width solid $icon-primary; margin: convert.to-rem(1px) $spacing-03 convert.to-rem(2px) @@ -102,8 +102,8 @@ $radio-border-width: 1px !default; &::before { position: relative; display: inline-block; - width: 100%; - height: 100%; + inline-size: 100%; + block-size: 100%; background-color: $icon-primary; border-radius: 50%; content: ''; @@ -197,7 +197,7 @@ $radio-border-width: 1px !default; overflow: visible; max-height: 100%; margin-top: 0; - margin-left: $spacing-03; + margin-inline-start: $spacing-03; } .#{$prefix}--radio-button-group--invalid @@ -223,8 +223,8 @@ $radio-border-width: 1px !default; .#{$prefix}--radio-button__label.#{$prefix}--skeleton { @include skeleton; - width: convert.to-rem(100px); - height: convert.to-rem(18px); + inline-size: convert.to-rem(100px); + block-size: convert.to-rem(18px); } .#{$prefix}--radio-button__label.#{$prefix}--skeleton @@ -240,12 +240,12 @@ $radio-border-width: 1px !default; } .#{$prefix}--radio-button-wrapper:not(:last-of-type) { - margin-right: $spacing-05; + margin-inline-end: $spacing-05; } .#{$prefix}--radio-button-group--vertical .#{$prefix}--radio-button-wrapper:not(:last-of-type) { - margin-right: 0; + margin-inline-end: 0; margin-bottom: $spacing-03; } @@ -265,7 +265,7 @@ $radio-border-width: 1px !default; .#{$prefix}--radio-button__appearance, .#{$prefix}--radio-button-wrapper.#{$prefix}--radio-button-wrapper--label-left .#{$prefix}--radio-button__appearance { - margin-right: 0; - margin-left: $spacing-03; + margin-inline-end: 0; + margin-inline-start: $spacing-03; } } diff --git a/packages/styles/scss/components/search/_search.scss b/packages/styles/scss/components/search/_search.scss index 2d7880a95e9d..be3ae7126b8c 100644 --- a/packages/styles/scss/components/search/_search.scss +++ b/packages/styles/scss/components/search/_search.scss @@ -31,7 +31,7 @@ .#{$prefix}--search { position: relative; display: flex; - width: 100%; + inline-size: 100%; align-items: center; } @@ -44,11 +44,11 @@ @include type.type-style('body-compact-01'); @include focus-outline('reset'); - width: 100%; + inline-size: 100%; order: 1; padding: 0 $spacing-08; border: none; - border-bottom: 1px solid $border-strong; + border-block-end: 1px solid $border-strong; appearance: none; background-color: $field; color: $text-primary; @@ -70,7 +70,7 @@ } .#{$prefix}--search-input[disabled] { - border-bottom: 1px solid transparent; + border-block-end: 1px solid transparent; background-color: $field; color: $text-disabled; cursor: not-allowed; @@ -91,33 +91,33 @@ .#{$prefix}--search--sm .#{$prefix}--search-input, .#{$prefix}--search--sm.#{$prefix}--search--expandable.#{$prefix}--search--expanded .#{$prefix}--search-input { - height: convert.to-rem(32px); + block-size: convert.to-rem(32px); // 8px padding on either side of icon + 16px icon (32px) padding: 0 $spacing-07; } .#{$prefix}--search--sm .#{$prefix}--search-magnifier-icon { - left: convert.to-rem(8px); + inset-inline-start: convert.to-rem(8px); } // Medium styles .#{$prefix}--search--md .#{$prefix}--search-input, .#{$prefix}--search--md.#{$prefix}--search--expandable.#{$prefix}--search--expanded .#{$prefix}--search-input { - height: convert.to-rem(40px); + block-size: convert.to-rem(40px); // 12px padding on either side of icon + 16px icon (40px) padding: 0 $spacing-08; } .#{$prefix}--search--md .#{$prefix}--search-magnifier-icon { - left: convert.to-rem(12px); + inset-inline-start: convert.to-rem(12px); } // Large styles .#{$prefix}--search--lg .#{$prefix}--search-input, .#{$prefix}--search--lg.#{$prefix}--search--expandable.#{$prefix}--search--expanded .#{$prefix}--search-input { - height: convert.to-rem(48px); + block-size: convert.to-rem(48px); // 16px padding on either side of icon + 16px icon (48px) padding: 0 $spacing-09; } @@ -127,10 +127,10 @@ position: absolute; z-index: 2; - top: 50%; - left: $spacing-05; - width: convert.to-rem(16px); - height: convert.to-rem(16px); + inset-block-start: 50%; + inset-inline-start: $spacing-05; + inline-size: convert.to-rem(16px); + block-size: convert.to-rem(16px); fill: $icon-secondary; pointer-events: none; transform: translateY(-50%); @@ -141,16 +141,16 @@ @include focus-outline('reset'); position: absolute; - top: 0; + inset-block-start: 0; right: 0; &::before { position: absolute; - top: convert.to-rem(1px); - left: 0; + inset-block-start: convert.to-rem(1px); + inset-inline-start: 0; display: block; - width: 2px; - height: calc(100% - 2px); + inline-size: 2px; + block-size: calc(100% - 2px); background-color: $field; content: ''; transition: background-color $duration-fast-02 @@ -162,7 +162,7 @@ } &:hover { - border-bottom: 1px solid $border-strong; + border-block-end: 1px solid $border-strong; &::before { background-color: $field-hover; @@ -172,7 +172,7 @@ .#{$prefix}--search-button { flex-shrink: 0; - margin-left: $spacing-01; + margin-inline-start: $spacing-01; background-color: $field; svg { @@ -188,8 +188,8 @@ .#{$prefix}--search-close, .#{$prefix}--search-button { display: flex; - width: convert.to-rem(40px); - height: convert.to-rem(40px); + inline-size: convert.to-rem(40px); + block-size: convert.to-rem(40px); align-items: center; justify-content: center; border-width: 1px 0; @@ -256,8 +256,8 @@ ~ .#{$prefix}--search-button, &.#{$prefix}--search--expandable, &.#{$prefix}--search--expandable .#{$prefix}--search-magnifier { - width: convert.to-rem(32px); - height: convert.to-rem(32px); + inline-size: convert.to-rem(32px); + block-size: convert.to-rem(32px); } &.#{$prefix}--search--expandable .#{$prefix}--search-input::placeholder { @@ -271,8 +271,8 @@ ~ .#{$prefix}--search-button, &.#{$prefix}--search--expandable, &.#{$prefix}--search--expandable .#{$prefix}--search-magnifier { - width: convert.to-rem(40px); - height: convert.to-rem(40px); + inline-size: convert.to-rem(40px); + block-size: convert.to-rem(40px); } &.#{$prefix}--search--expandable .#{$prefix}--search-input::placeholder { @@ -286,8 +286,8 @@ ~ .#{$prefix}--search-button, &.#{$prefix}--search--expandable, &.#{$prefix}--search--expandable .#{$prefix}--search-magnifier { - width: convert.to-rem(48px); - height: convert.to-rem(48px); + inline-size: convert.to-rem(48px); + block-size: convert.to-rem(48px); } &.#{$prefix}--search--expandable .#{$prefix}--search-input::placeholder { @@ -305,7 +305,7 @@ .#{$prefix}--search--sm.#{$prefix}--skeleton .#{$prefix}--search-input { @include skeleton; - width: 100%; + inline-size: 100%; &::placeholder { color: transparent; @@ -317,11 +317,11 @@ } .#{$prefix}--search--expandable.#{$prefix}--search--expanded { - width: 100%; + inline-size: 100%; } .#{$prefix}--search--expandable .#{$prefix}--search-input { - width: 0; + inline-size: 0; padding: 0; transition: padding $duration-fast-01 motion(standard, productive), width 0s linear $duration-fast-01; @@ -337,7 +337,7 @@ .#{$prefix}--search--expandable.#{$prefix}--search--expanded .#{$prefix}--search-input { - width: 100%; + inline-size: 100%; transition: padding $duration-fast-01 motion(standard, productive); &::placeholder { diff --git a/packages/styles/scss/components/select/_select.scss b/packages/styles/scss/components/select/_select.scss index 7d01e1ad82be..be943246b961 100644 --- a/packages/styles/scss/components/select/_select.scss +++ b/packages/styles/scss/components/select/_select.scss @@ -27,7 +27,7 @@ position: relative; display: flex; - width: 100%; + inline-size: 100%; flex-direction: column; align-items: flex-start; } @@ -35,7 +35,7 @@ .#{$prefix}--select-input__wrapper { position: relative; display: flex; - width: 100%; + inline-size: 100%; align-items: center; } @@ -44,11 +44,11 @@ @include focus-outline('reset'); display: block; - width: 100%; - height: convert.to-rem(40px); + inline-size: 100%; + block-size: convert.to-rem(40px); padding: 0 $spacing-09 0 $spacing-05; border: none; - border-bottom: 1px solid $border-strong; + border-block-end: 1px solid $border-strong; appearance: none; background-color: $field; border-radius: 0; @@ -98,12 +98,12 @@ } .#{$prefix}--select-input--sm { - height: convert.to-rem(32px); + block-size: convert.to-rem(32px); max-height: convert.to-rem(32px); } .#{$prefix}--select-input--lg { - height: convert.to-rem(48px); + block-size: convert.to-rem(48px); max-height: convert.to-rem(48px); } @@ -114,7 +114,7 @@ .#{$prefix}--select-input__wrapper[data-invalid] .#{$prefix}--select-input, .#{$prefix}--select--warning .#{$prefix}--select-input { - padding-right: $spacing-10; + padding-inline-end: $spacing-10; } .#{$prefix}--select-input:disabled ~ .#{$prefix}--select__arrow { @@ -138,9 +138,9 @@ .#{$prefix}--select__arrow { position: absolute; - top: 0; + inset-block-start: 0; right: $spacing-05; - height: 100%; + block-size: 100%; fill: $icon-primary; pointer-events: none; @@ -201,7 +201,7 @@ .#{$prefix}--select--inline .#{$prefix}--form__helper-text { margin-bottom: 0; - margin-left: $spacing-03; + margin-inline-start: $spacing-03; } .#{$prefix}--select--inline .#{$prefix}--label { @@ -210,10 +210,10 @@ } .#{$prefix}--select--inline .#{$prefix}--select-input { - width: auto; - padding-right: $spacing-07; - padding-left: $spacing-03; - border-bottom: none; + inline-size: auto; + padding-inline-end: $spacing-07; + padding-inline-start: $spacing-03; + border-block-end: none; background-color: transparent; color: $text-primary; } @@ -235,7 +235,7 @@ .#{$prefix}--select--inline.#{$prefix}--select--invalid .#{$prefix}--select-input { - padding-right: convert.to-rem(56px); + padding-inline-end: convert.to-rem(56px); } .#{$prefix}--select--inline.#{$prefix}--select--invalid @@ -268,8 +268,8 @@ .#{$prefix}--select.#{$prefix}--skeleton { @include skeleton; - width: 100%; - height: 2.5rem; + inline-size: 100%; + block-size: 2.5rem; } .#{$prefix}--select.#{$prefix}--skeleton .#{$prefix}--select-input { diff --git a/packages/styles/scss/components/skeleton-styles/_skeleton-styles.scss b/packages/styles/scss/components/skeleton-styles/_skeleton-styles.scss index dda053d5bd1b..dfcb60e8d859 100644 --- a/packages/styles/scss/components/skeleton-styles/_skeleton-styles.scss +++ b/packages/styles/scss/components/skeleton-styles/_skeleton-styles.scss @@ -19,29 +19,29 @@ @include skeleton; display: inline-block; - width: convert.to-rem(16px); - height: convert.to-rem(16px); + inline-size: convert.to-rem(16px); + block-size: convert.to-rem(16px); } //skeleton placeholder .#{$prefix}--skeleton__placeholder { @include skeleton; - width: convert.to-rem(100px); + inline-size: convert.to-rem(100px); - height: convert.to-rem(100px); + block-size: convert.to-rem(100px); } //skeleton text .#{$prefix}--skeleton__text { @include skeleton; - width: 100%; - height: 1rem; + inline-size: 100%; + block-size: 1rem; margin-bottom: $spacing-03; } .#{$prefix}--skeleton__heading { - height: 1.5rem; + block-size: 1.5rem; } } diff --git a/packages/styles/scss/components/slider/_slider.scss b/packages/styles/scss/components/slider/_slider.scss index 566484875119..8079dfdc2cec 100644 --- a/packages/styles/scss/components/slider/_slider.scss +++ b/packages/styles/scss/components/slider/_slider.scss @@ -35,7 +35,7 @@ .#{$prefix}--slider { position: relative; - width: 100%; + inline-size: 100%; min-width: convert.to-rem(200px); max-width: convert.to-rem(640px); padding: $spacing-05 0; @@ -50,25 +50,25 @@ white-space: nowrap; &:last-of-type { - margin-right: $spacing-05; + margin-inline-end: $spacing-05; } } .#{$prefix}--slider__track { position: absolute; - width: 100%; - height: convert.to-rem(2px); + inline-size: 100%; + block-size: convert.to-rem(2px); background: $border-subtle; transform: translate(0%, -50%); } .#{$prefix}--slider__track:before { position: absolute; - top: convert.to-rem(-5px); - left: 50%; + inset-block-start: convert.to-rem(-5px); + inset-inline-start: 50%; display: inline-block; - width: convert.to-rem(2px); - height: convert.to-rem(4px); + inline-size: convert.to-rem(2px); + block-size: convert.to-rem(4px); background: $border-subtle; content: ''; transform: translate(-50%, 0); @@ -76,8 +76,8 @@ .#{$prefix}--slider__filled-track { position: absolute; - width: 100%; - height: convert.to-rem(2px); + inline-size: 100%; + block-size: convert.to-rem(2px); background: $layer-selected-inverse; pointer-events: none; transform: translate(0%, -50%); @@ -88,8 +88,8 @@ .#{$prefix}--slider__thumb { position: absolute; z-index: 3; - width: convert.to-rem(14px); - height: convert.to-rem(14px); + inline-size: convert.to-rem(14px); + block-size: convert.to-rem(14px); background: $layer-selected-inverse; border-radius: 50%; box-shadow: inset 0 0 0 1px transparent, inset 0 0 0 2px transparent; @@ -123,8 +123,8 @@ .#{$prefix}--slider-text-input, .#{$prefix}-slider-text-input { - width: convert.to-rem(64px); - height: convert.to-rem(40px); + inline-size: convert.to-rem(64px); + block-size: convert.to-rem(40px); -moz-appearance: textfield; appearance: textfield; @@ -145,14 +145,14 @@ // Invalid & warn state .#{$prefix}--slider-text-input.#{$prefix}--text-input--invalid, .#{$prefix}--slider-text-input--warn { - width: 6rem; - padding-right: $spacing-09; + inline-size: 6rem; + padding-inline-end: $spacing-09; } .#{$prefix}--slider__invalid-icon { position: absolute; // top/transform used to center invalid icon in IE11 - top: 50%; + inset-block-start: 50%; right: $spacing-05; fill: $support-error; transform: translateY(-50%); @@ -242,8 +242,8 @@ } .#{$prefix}--slider--readonly .#{$prefix}--slider__thumb { - width: 0; - height: 0; + inline-size: 0; + block-size: 0; } .#{$prefix}--slider--readonly ~ .#{$prefix}--slider-text-input { @@ -255,8 +255,8 @@ .#{$prefix}--slider__range-label { @include skeleton; - width: convert.to-rem(20px); - height: convert.to-rem(12px); + inline-size: convert.to-rem(20px); + block-size: convert.to-rem(12px); } .#{$prefix}--slider-container.#{$prefix}--skeleton @@ -267,7 +267,7 @@ .#{$prefix}--slider-container.#{$prefix}--skeleton .#{$prefix}--slider__thumb { - left: 50%; + inset-inline-start: 50%; cursor: default; pointer-events: none; } diff --git a/packages/styles/scss/components/structured-list/_mixins.scss b/packages/styles/scss/components/structured-list/_mixins.scss index 2f1b242e21bb..55a5bf475a33 100644 --- a/packages/styles/scss/components/structured-list/_mixins.scss +++ b/packages/styles/scss/components/structured-list/_mixins.scss @@ -32,13 +32,13 @@ $structured-list-text-transform: none !default; /// @group structured-list /// @param {Number} $padding [$structured-list-padding] @mixin padding--data-structured-list($padding: $structured-list-padding) { - padding-right: $padding * 0.5; - padding-left: $padding * 0.5; + padding-inline-end: $padding * 0.5; + padding-inline-start: $padding * 0.5; // Controls gutter sizes for check &:first-child { - padding-right: $padding * 0.5; - padding-left: $padding * 0.5; + padding-inline-end: $padding * 0.5; + padding-inline-start: $padding * 0.5; } } diff --git a/packages/styles/scss/components/structured-list/_structured-list.scss b/packages/styles/scss/components/structured-list/_structured-list.scss index a6b1b3db7ae6..4b3f3006a986 100644 --- a/packages/styles/scss/components/structured-list/_structured-list.scss +++ b/packages/styles/scss/components/structured-list/_structured-list.scss @@ -31,7 +31,7 @@ @include component-reset.reset; display: table; - width: 100%; + inline-size: 100%; background-color: transparent; border-collapse: collapse; @@ -49,7 +49,7 @@ .#{$prefix}--structured-list-td:first-of-type, .#{$prefix}--structured-list-row .#{$prefix}--structured-list-th:first-of-type { - padding-left: 1rem; + padding-inline-start: 1rem; // specs require 16px spacing between columns // 8px side padding between col creates 16 px, with exception of 1st col, which needs an override to be 16px } @@ -67,8 +67,8 @@ &.#{$prefix}--structured-list--flush .#{$prefix}--structured-list-row .#{$prefix}--structured-list-th:first-of-type { - padding-right: 1rem; - padding-left: 0; + padding-inline-end: 1rem; + padding-inline-start: 0; } } @@ -81,7 +81,7 @@ .#{$prefix}--structured-list-tbody .#{$prefix}--structured-list-row:last-child { - border-bottom: 1px solid $border-subtle; + border-block-end: 1px solid $border-subtle; } .#{$prefix}--structured-list-row--header-row { @@ -149,7 +149,7 @@ @include type-style('heading-compact-01'); display: table-cell; - height: convert.to-rem(40px); + block-size: convert.to-rem(40px); color: $text-primary; font-weight: 600; text-align: left; @@ -204,15 +204,15 @@ .#{$prefix}--structured-list.#{$prefix}--skeleton { .#{$prefix}--structured-list-th { &:first-child { - width: 8%; + inline-size: 8%; } &:nth-child(3n + 2) { - width: 30%; + inline-size: 30%; } &:nth-child(3n + 3) { - width: 15%; + inline-size: 15%; } } @@ -221,14 +221,14 @@ display: block; - width: 75%; - height: 1rem; + inline-size: 75%; + block-size: 1rem; } } .#{$prefix}--structured-list.#{$prefix}--structured-list--selection.#{$prefix}--skeleton .#{$prefix}--structured-list-th:first-child { - width: 5%; + inline-size: 5%; span { display: none; diff --git a/packages/styles/scss/components/tabs/_tabs.scss b/packages/styles/scss/components/tabs/_tabs.scss index f42e73f56ed3..ded43f3f1f11 100644 --- a/packages/styles/scss/components/tabs/_tabs.scss +++ b/packages/styles/scss/components/tabs/_tabs.scss @@ -54,9 +54,9 @@ position: relative; display: flex; - width: 100%; - height: auto; - min-height: layout.size('height'); + inline-size: 100%; + block-size: auto; + min-block-size: layout.size('height'); max-height: custom-property.get-var('layout-size-height-xl'); color: $text-primary; @@ -66,7 +66,7 @@ .#{$prefix}--tab--list { display: flex; - width: auto; + inline-size: auto; overflow-x: auto; scroll-behavior: smooth; scrollbar-width: none; @@ -90,7 +90,7 @@ @include button-reset.reset; display: flex; - width: $spacing-08; + inline-size: $spacing-08; flex-shrink: 0; align-items: center; justify-content: center; @@ -106,7 +106,7 @@ } &.#{$prefix}--tabs--contained .#{$prefix}--tab--overflow-nav-button { - width: $spacing-09; + inline-size: $spacing-09; margin: 0; background-color: $layer-accent; } @@ -117,17 +117,17 @@ .#{$prefix}--tab--overflow-nav-button--next { position: absolute; - top: 0; + inset-block-start: 0; right: 0; - bottom: 0; + inset-block-end: 0; } .#{$prefix}--tab--overflow-nav-button--next::before { position: absolute; z-index: 1; - left: -$spacing-03; - width: $spacing-03; - height: 100%; + inset-inline-start: -$spacing-03; + inline-size: $spacing-03; + block-size: 100%; background: linear-gradient( to right, rgba(255, 255, 255, 0), @@ -147,17 +147,17 @@ .#{$prefix}--tab--overflow-nav-button--previous { position: absolute; - top: 0; - bottom: 0; - left: 0; + inset-block-start: 0; + inset-block-end: 0; + inset-inline-start: 0; } .#{$prefix}--tab--overflow-nav-button--previous::before { position: absolute; z-index: 1; right: -$spacing-03; - width: $spacing-03; - height: 100%; + inline-size: $spacing-03; + block-size: 100%; background: linear-gradient(to left, rgba(255, 255, 255, 0), $background); content: ''; } @@ -254,7 +254,7 @@ &:not(.#{$prefix}--tabs--contained) .#{$prefix}--tabs__nav-item-label-wrapper { position: relative; - top: convert.to-rem(1px); + inset-block-start: convert.to-rem(1px); } //----------------------------- @@ -272,7 +272,7 @@ } .#{$prefix}--tabs__nav-item + .#{$prefix}--tabs__nav-item { - margin-left: convert.to-rem(1px); + margin-inline-start: convert.to-rem(1px); } &.#{$prefix}--tabs--contained .#{$prefix}--tabs__nav-item { @@ -282,7 +282,7 @@ &.#{$prefix}--tabs--contained .#{$prefix}--tabs__nav-item + .#{$prefix}--tabs__nav-item { - margin-left: 0; + margin-inline-start: 0; // Draws the border without affecting the inner-content box-shadow: convert.to-rem(-1px) 0 0 0 $border-strong; } @@ -306,8 +306,8 @@ } svg { - width: 24px; - height: 24px; + inline-size: 24px; + block-size: 24px; padding: $spacing-02; margin: -$spacing-02; } @@ -336,7 +336,7 @@ .#{$prefix}--tabs__nav-item--icon { display: flex; align-items: center; - padding-left: $spacing-03; + padding-inline-start: $spacing-03; .#{$prefix}--tabs__nav-item--close-icon { padding: $spacing-02; @@ -349,7 +349,7 @@ .#{$prefix}--tabs__nav-item--icon-left { display: flex; align-items: center; - padding-right: $spacing-03; + padding-inline-end: $spacing-03; margin-top: -2px; } @@ -366,9 +366,9 @@ @include type-style('body-compact-01'); overflow: hidden; - border-bottom: $tab-underline-color; + border-block-end: $tab-underline-color; color: $text-secondary; - padding-inline: layout.density('padding-inline'); + padding-inline-end: layout.density('padding-inline'); text-align: left; text-decoration: none; text-overflow: ellipsis; @@ -383,8 +383,8 @@ } &.#{$prefix}--tabs--contained .#{$prefix}--tabs__nav-link { - border-bottom: 0; - padding-inline: layout.density('padding-inline'); + border-block-end: 0; + padding-inline-end: layout.density('padding-inline'); } &.#{$prefix}--tabs--contained:not(.#{$prefix}--tabs--tall) @@ -396,7 +396,7 @@ &.#{$prefix}--tabs--contained .#{$prefix}--tabs__nav-item-secondary-label { @include type-style('label-01'); - min-height: convert.to-rem(16px); + min-block-size: convert.to-rem(16px); } //----------------------------- @@ -410,8 +410,8 @@ .#{$prefix}--tabs__nav-item--icon-only, &.#{$prefix}--tabs--contained .#{$prefix}--tabs__nav-item--icon-only { display: flex; - width: layout.size('height'); - height: layout.size('height'); + inline-size: layout.size('height'); + block-size: layout.size('height'); align-items: center; justify-content: center; padding: 0; @@ -428,7 +428,7 @@ .#{$prefix}--tabs__nav-item:not( .#{$prefix}--tabs__nav-item--selected ):not(.#{$prefix}--tabs__nav-item--disabled):hover { - border-bottom: $tab-underline-color-hover; + border-block-end: $tab-underline-color-hover; color: $text-primary; } @@ -446,7 +446,7 @@ // Item Selected //----------------------------- .#{$prefix}--tabs__nav-item--selected { - border-bottom: 2px solid $border-interactive; + border-block-end: 2px solid $border-interactive; transition: color $duration-fast-01 motion(standard, productive); } @@ -503,14 +503,14 @@ //----------------------------- .#{$prefix}--tabs__nav-item--disabled { - border-bottom: $tab-underline-disabled; + border-block-end: $tab-underline-disabled; background-color: transparent; color: $tab-text-disabled; outline: none; } .#{$prefix}--tabs__nav-item--disabled:hover { - border-bottom: $tab-underline-disabled; + border-block-end: $tab-underline-disabled; color: $tab-text-disabled; cursor: not-allowed; } @@ -524,7 +524,7 @@ .#{$prefix}--tabs__nav-item--disabled:focus, .#{$prefix}--tabs__nav-item--disabled:active { - border-bottom: $tab-underline-disabled; + border-block-end: $tab-underline-disabled; outline: none; pointer-events: none; } @@ -551,7 +551,7 @@ } &.#{$prefix}--tabs--contained .#{$prefix}--tabs__nav-item--disabled { - border-bottom: none; + border-block-end: none; color: $text-on-color-disabled; } } @@ -582,13 +582,13 @@ .#{$prefix}--skeleton.#{$prefix}--tabs:not(.#{$prefix}--tabs--contained) .#{$prefix}--tabs__nav-link { - border-bottom: 2px solid $skeleton-element; + border-block-end: 2px solid $skeleton-element; } .#{$prefix}--tabs.#{$prefix}--skeleton .#{$prefix}--tabs__nav-link { display: flex; - width: 10rem; - height: 100%; + inline-size: 10rem; + block-size: 100%; align-items: center; padding: 0 layout.density('padding-inline'); } @@ -597,8 +597,8 @@ @include skeleton; display: block; - width: 100%; - height: convert.to-rem(14px); + inline-size: 100%; + block-size: convert.to-rem(14px); } // Windows HCM fix @@ -622,7 +622,7 @@ .#{$prefix}--tabs.#{$prefix}--tabs--contained.#{$prefix}--tabs--full-width .#{$prefix}--tab--list { display: grid; - width: 100%; + inline-size: 100%; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); .#{$prefix}--tabs__nav-link { @@ -632,7 +632,7 @@ text-overflow: ellipsis; } .#{$prefix}--tabs__nav-item--icon { - margin-left: auto; + margin-inline-start: auto; } } } diff --git a/packages/styles/scss/components/tag/_tag.scss b/packages/styles/scss/components/tag/_tag.scss index 283f2ac8f720..e036093597d7 100644 --- a/packages/styles/scss/components/tag/_tag.scss +++ b/packages/styles/scss/components/tag/_tag.scss @@ -27,7 +27,7 @@ @include layout.redefine-tokens( ( size: ( - height: ( + block-size: ( xs: convert.to-rem(18px), sm: convert.to-rem(18px), md: convert.to-rem(24px), @@ -46,18 +46,18 @@ min-width: convert.to-rem(32px); // restricts size of contained elements max-width: 100%; - min-height: layout.size('height'); + min-block-size: layout.size('height'); align-items: center; justify-content: center; margin: $spacing-02; border-radius: convert.to-rem(15px); cursor: default; - padding-inline: $spacing-03; + padding-inline-end: $spacing-03; vertical-align: middle; word-break: break-word; &:not(:first-child) { - margin-left: 0; + margin-inline-start: 0; } } @@ -165,8 +165,8 @@ // tags used for filtering .#{$prefix}--tag--filter { - padding-top: 0; - padding-right: 0; + padding-block-start: 0; + padding-inline-end: 0; padding-bottom: 0; cursor: pointer; @@ -181,8 +181,8 @@ .#{$prefix}--tag__close-icon { display: flex; - width: layout.size('height'); - height: layout.size('height'); + inline-size: layout.size('height'); + block-size: layout.size('height'); flex-shrink: 0; align-items: center; justify-content: center; @@ -202,12 +202,12 @@ } .#{$prefix}--tag__custom-icon { - width: convert.to-rem(16px); - height: convert.to-rem(16px); + inline-size: convert.to-rem(16px); + block-size: convert.to-rem(16px); flex-shrink: 0; padding: 0; border: 0; - margin-right: $spacing-02; + margin-inline-end: $spacing-02; background-color: transparent; color: currentColor; outline: none; @@ -241,11 +241,11 @@ } .#{$prefix}--tag--sm.#{$prefix}--tag--filter { - padding-right: 0; + padding-inline-end: 0; } .#{$prefix}--tag--sm .#{$prefix}--tag__close-icon { - margin-left: convert.to-rem(5px); + margin-inline-start: convert.to-rem(5px); } // Skeleton state @@ -256,7 +256,7 @@ ); overflow: hidden; - width: convert.to-rem(60px); + inline-size: convert.to-rem(60px); // Safari specific bug (#7672) @media not all and (min-resolution: 0.001dpcm) { diff --git a/packages/styles/scss/components/text-area/_text-area.scss b/packages/styles/scss/components/text-area/_text-area.scss index 74f328ebb0f5..be104a15a09e 100644 --- a/packages/styles/scss/components/text-area/_text-area.scss +++ b/packages/styles/scss/components/text-area/_text-area.scss @@ -28,11 +28,11 @@ @include focus-outline('reset'); min-width: 10rem; - height: 100%; - min-height: convert.to-rem(40px); + block-size: 100%; + min-block-size: convert.to-rem(40px); padding: convert.to-rem(11px) $spacing-05; border: none; - border-bottom: 1px solid $border-strong; + border-block-end: 1px solid $border-strong; background-color: $field; color: $text-primary; font-family: inherit; @@ -57,18 +57,18 @@ } .#{$prefix}--text-area--invalid { - padding-right: $spacing-08; + padding-inline-end: $spacing-08; } .#{$prefix}--text-area__wrapper { position: relative; display: flex; - width: 100%; + inline-size: 100%; } .#{$prefix}--text-area__invalid-icon { position: absolute; - top: $spacing-04; + inset-block-start: $spacing-04; right: $spacing-05; fill: $support-error; } @@ -85,8 +85,8 @@ .#{$prefix}--text-area__counter-alert { position: absolute; overflow: hidden; - width: 1px; - height: 1px; + inline-size: 1px; + block-size: 1px; padding: 0; border: 0; margin: -1px; @@ -97,7 +97,7 @@ // Disabled //----------------------------- .#{$prefix}--text-area:disabled { - border-bottom: 1px solid transparent; + border-block-end: 1px solid transparent; background-color: $field; color: $text-disabled; cursor: not-allowed; @@ -126,8 +126,8 @@ .#{$prefix}--text-area.#{$prefix}--skeleton { @include skeleton; - width: 100%; - height: convert.to-rem(100px); + inline-size: 100%; + block-size: convert.to-rem(100px); &::placeholder { color: transparent; @@ -136,7 +136,7 @@ .#{$prefix}--text-area__label-wrapper { display: flex; - width: 100%; + inline-size: 100%; justify-content: space-between; } } diff --git a/packages/styles/scss/components/text-input/_text-input.scss b/packages/styles/scss/components/text-input/_text-input.scss index 33f02c0c1b52..2d03bdca2702 100644 --- a/packages/styles/scss/components/text-input/_text-input.scss +++ b/packages/styles/scss/components/text-input/_text-input.scss @@ -36,11 +36,11 @@ @include type-style('body-compact-01'); @include focus-outline('reset'); - width: 100%; - height: layout.size('height'); + inline-size: 100%; + block-size: layout.size('height'); padding: 0 layout.density('padding-inline'); border: none; - border-bottom: 1px solid $border-strong; + border-block-end: 1px solid $border-strong; background-color: $field; color: $text-primary; font-family: inherit; @@ -58,15 +58,15 @@ } .#{$prefix}--password-input { - padding-right: $spacing-08; + padding-inline-end: $spacing-08; } .#{$prefix}--text-input--sm.#{$prefix}--password-input { - padding-right: $spacing-07; + padding-inline-end: $spacing-07; } .#{$prefix}--text-input--lg.#{$prefix}--password-input { - padding-right: $spacing-09; + padding-inline-end: $spacing-09; } .#{$prefix}--text-input::placeholder { @@ -84,13 +84,13 @@ .#{$prefix}--text-input__field-wrapper { position: relative; display: flex; - width: 100%; + inline-size: 100%; } .#{$prefix}--text-input__invalid-icon { position: absolute; // top/transform used to center invalid icon in IE11 - top: 50%; + inset-block-start: 50%; right: $spacing-05; fill: $support-error; transform: translateY(-50%); @@ -117,9 +117,9 @@ position: absolute; right: 0; display: flex; - width: convert.to-rem(40px); - height: 100%; - min-height: auto; + inline-size: convert.to-rem(40px); + block-size: 100%; + min-block-size: auto; align-items: center; justify-content: center; padding: 0; @@ -131,12 +131,12 @@ .#{$prefix}--text-input--sm + .#{$prefix}--btn.#{$prefix}--text-input--password__visibility__toggle.#{$prefix}--tooltip__trigger { - width: convert.to-rem(32px); + inline-size: convert.to-rem(32px); } .#{$prefix}--text-input--lg + .#{$prefix}--btn.#{$prefix}--text-input--password__visibility__toggle.#{$prefix}--tooltip__trigger { - width: convert.to-rem(48px); + inline-size: convert.to-rem(48px); } .#{$prefix}--btn.#{$prefix}--text-input--password__visibility__toggle.#{$prefix}--tooltip__trigger @@ -165,11 +165,11 @@ .#{$prefix}--text-input--invalid, .#{$prefix}--text-input--warning { - padding-right: $spacing-08; + padding-inline-end: $spacing-08; } .#{$prefix}--text-input--invalid.#{$prefix}--password-input { - padding-right: convert.to-rem(64px); + padding-inline-end: convert.to-rem(64px); } .#{$prefix}--text-input--invalid @@ -199,8 +199,8 @@ .#{$prefix}--text-input__counter-alert { position: absolute; overflow: hidden; - width: 1px; - height: 1px; + inline-size: 1px; + block-size: 1px; padding: 0; border: 0; margin: -1px; @@ -213,7 +213,7 @@ .#{$prefix}--text-input:disabled { @include focus-outline('reset'); - border-bottom: 1px solid transparent; + border-block-end: 1px solid transparent; background-color: $field; color: $text-disabled; cursor: not-allowed; @@ -266,10 +266,10 @@ .#{$prefix}--form--fluid .#{$prefix}--label { position: absolute; z-index: 1; - top: convert.to-rem(13px); - left: $spacing-05; + inset-block-start: convert.to-rem(13px); + inset-inline-start: $spacing-05; display: flex; - height: convert.to-rem(16px); + block-size: convert.to-rem(16px); align-items: center; margin: 0; } @@ -279,7 +279,7 @@ } .#{$prefix}--form--fluid .#{$prefix}--text-input { - min-height: convert.to-rem(64px); + min-block-size: convert.to-rem(64px); padding: convert.to-rem(32px) $spacing-05 convert.to-rem(13px); } @@ -290,7 +290,7 @@ .#{$prefix}--form--fluid .#{$prefix}--text-input--invalid, .#{$prefix}--form--fluid .#{$prefix}--text-input--warning { - border-bottom: none; + border-block-end: none; } .#{$prefix}--form--fluid @@ -302,12 +302,12 @@ display: block; border-style: solid; border-color: $border-subtle; - border-bottom: none; + border-block-end: none; margin: 0 1rem; } .#{$prefix}--form--fluid .#{$prefix}--text-input__invalid-icon { - top: convert.to-rem(80px); + inset-block-start: convert.to-rem(80px); } .#{$prefix}--form--fluid @@ -320,7 +320,7 @@ } .#{$prefix}--form--fluid .#{$prefix}--text-input__field-wrapper--warning { - border-bottom: 1px solid $border-strong; + border-block-end: 1px solid $border-strong; } .#{$prefix}--form--fluid @@ -370,7 +370,7 @@ max-width: convert.to-rem(128px); flex: 2; flex-direction: column; - margin-right: convert.to-rem(24px); + margin-inline-end: convert.to-rem(24px); overflow-wrap: break-word; } @@ -380,7 +380,7 @@ .#{$prefix}--text-input__field-outer-wrapper { display: flex; - width: 100%; + inline-size: 100%; flex: 1 1 auto; flex-direction: column; align-items: flex-start; @@ -422,7 +422,7 @@ .#{$prefix}--text-input__label-wrapper { display: flex; - width: 100%; + inline-size: 100%; justify-content: space-between; .#{$prefix}--text-input__label-counter { diff --git a/packages/styles/scss/components/tile/_tile.scss b/packages/styles/scss/components/tile/_tile.scss index 28cb8d315666..9bd3c2e2e817 100644 --- a/packages/styles/scss/components/tile/_tile.scss +++ b/packages/styles/scss/components/tile/_tile.scss @@ -38,7 +38,7 @@ $-icon-container-size: calc(#{layout.density('padding-inline')} * 2 + 1rem); position: relative; display: block; min-width: 8rem; - min-height: 4rem; + min-block-size: 4rem; padding: layout.density('padding-inline'); background-color: $layer; outline: 2px solid transparent; @@ -157,7 +157,7 @@ $-icon-container-size: calc(#{layout.density('padding-inline')} * 2 + 1rem); .#{$prefix}--tile__checkmark { position: absolute; - height: 1rem; + block-size: 1rem; border: none; background: transparent; inset-block-start: layout.density('padding-inline'); @@ -182,8 +182,8 @@ $-icon-container-size: calc(#{layout.density('padding-inline')} * 2 + 1rem); .#{$prefix}--tile__chevron { position: absolute; display: flex; - width: $-icon-container-size; - height: $-icon-container-size; + inline-size: $-icon-container-size; + block-size: $-icon-container-size; align-items: center; justify-content: center; inset-block-end: 0; @@ -212,8 +212,8 @@ $-icon-container-size: calc(#{layout.density('padding-inline')} * 2 + 1rem); position: absolute; display: flex; - width: $-icon-container-size; - height: $-icon-container-size; + inline-size: $-icon-container-size; + block-size: $-icon-container-size; align-items: center; justify-content: center; inset-block-end: 0; @@ -233,7 +233,7 @@ $-icon-container-size: calc(#{layout.density('padding-inline')} * 2 + 1rem); .#{$prefix}--tile--expandable { position: relative; overflow: hidden; - width: 100%; + inline-size: 100%; border: 0; color: inherit; cursor: pointer; @@ -330,8 +330,8 @@ $-icon-container-size: calc(#{layout.density('padding-inline')} * 2 + 1rem); } .#{$prefix}--tile-content { - width: 100%; - height: 100%; + inline-size: 100%; + block-size: 100%; } .#{$prefix}--tile-input { diff --git a/packages/styles/scss/components/time-picker/_time-picker.scss b/packages/styles/scss/components/time-picker/_time-picker.scss index e752f65cfada..eda0b26ac522 100644 --- a/packages/styles/scss/components/time-picker/_time-picker.scss +++ b/packages/styles/scss/components/time-picker/_time-picker.scss @@ -38,10 +38,10 @@ .#{$prefix}--time-picker__error__icon { position: absolute; - top: 50%; + inset-block-start: 50%; right: 1rem; display: flex; - height: 100%; + block-size: 100%; place-items: center; // top/transform used to center invalid icon in IE11 transform: translateY(-50%); @@ -52,9 +52,9 @@ } .#{$prefix}--time-picker .#{$prefix}--select-input { - width: auto; + inline-size: auto; min-width: auto; - padding-right: convert.to-rem(48px); + padding-inline-end: convert.to-rem(48px); margin: 0; line-height: 1; } @@ -64,8 +64,8 @@ @include type-style('code-02'); display: flex; - width: 4.875rem; - height: convert.to-rem(40px); + inline-size: 4.875rem; + block-size: convert.to-rem(40px); align-items: center; transition: outline $duration-fast-01 motion(standard, productive), background-color $duration-fast-01 motion(standard, productive); @@ -76,7 +76,7 @@ } .#{$prefix}--time-picker__input-field-error { - width: 6.175rem; + inline-size: 6.175rem; } // V11: Possibly deprecate @@ -89,7 +89,7 @@ &:disabled, &:hover:disabled { - border-bottom: 1px solid transparent; + border-block-end: 1px solid transparent; background-color: transparent; color: $text-disabled; cursor: not-allowed; @@ -98,13 +98,13 @@ .#{$prefix}--time-picker--sm .#{$prefix}--select-input, .#{$prefix}--time-picker--sm .#{$prefix}--time-picker__input-field { - height: convert.to-rem(32px); + block-size: convert.to-rem(32px); max-height: convert.to-rem(32px); } .#{$prefix}--time-picker--lg .#{$prefix}--select-input, .#{$prefix}--time-picker--lg .#{$prefix}--time-picker__input-field { - height: convert.to-rem(48px); + block-size: convert.to-rem(48px); max-height: convert.to-rem(48px); } diff --git a/packages/styles/scss/components/toggle/_toggle.scss b/packages/styles/scss/components/toggle/_toggle.scss index b86c5791ff74..4784b889c830 100644 --- a/packages/styles/scss/components/toggle/_toggle.scss +++ b/packages/styles/scss/components/toggle/_toggle.scss @@ -51,18 +51,18 @@ .#{$prefix}--toggle__switch { position: relative; - width: convert.to-rem(48px); - height: convert.to-rem(24px); + inline-size: convert.to-rem(48px); + block-size: convert.to-rem(24px); background-color: $toggle-off; border-radius: convert.to-rem(12px); transition: background-color $duration-fast-01 motion(exit, productive); &::before { position: absolute; - top: convert.to-rem(3px); - left: convert.to-rem(3px); - width: convert.to-rem(18px); - height: convert.to-rem(18px); + inset-block-start: convert.to-rem(3px); + inset-inline-start: convert.to-rem(3px); + inline-size: convert.to-rem(18px); + block-size: convert.to-rem(18px); background-color: $icon-on-color; border-radius: 50%; content: ''; @@ -97,12 +97,12 @@ } .#{$prefix}--toggle__appearance--sm .#{$prefix}--toggle__switch { - width: convert.to-rem(32px); - height: convert.to-rem(16px); + inline-size: convert.to-rem(32px); + block-size: convert.to-rem(16px); &::before { - width: convert.to-rem(10px); - height: convert.to-rem(10px); + inline-size: convert.to-rem(10px); + block-size: convert.to-rem(10px); } } @@ -113,10 +113,10 @@ .#{$prefix}--toggle__check { position: absolute; - top: convert.to-rem(6px); + inset-block-start: convert.to-rem(6px); right: convert.to-rem(5px); - width: convert.to-rem(6px); - height: convert.to-rem(5px); + inline-size: convert.to-rem(6px); + block-size: convert.to-rem(5px); fill: $support-success; visibility: hidden; } @@ -162,14 +162,14 @@ background-color: transparent; &::before { - top: convert.to-rem(2px); - left: convert.to-rem(2px); + inset-block-start: convert.to-rem(2px); + inset-inline-start: convert.to-rem(2px); background-color: $text-primary; } } .#{$prefix}--toggle--readonly .#{$prefix}--toggle__check { - top: convert.to-rem(5px); + inset-block-start: convert.to-rem(5px); right: convert.to-rem(4px); fill: $background; } @@ -204,16 +204,16 @@ .#{$prefix}--toggle--skeleton .#{$prefix}--toggle__skeleton-circle { @include circular-skeleton; - width: convert.to-rem(18px); - height: convert.to-rem(18px); + inline-size: convert.to-rem(18px); + block-size: convert.to-rem(18px); border-radius: 50%; } .#{$prefix}--toggle--skeleton .#{$prefix}--toggle__skeleton-rectangle { @include skeleton; - width: convert.to-rem(24px); - height: convert.to-rem(8px); - margin-left: convert.to-rem(8px); + inline-size: convert.to-rem(24px); + block-size: convert.to-rem(8px); + margin-inline-start: convert.to-rem(8px); } } diff --git a/packages/styles/scss/components/toggletip/_toggletip.scss b/packages/styles/scss/components/toggletip/_toggletip.scss index 2ed0b2d4e392..768a74d8d5ea 100644 --- a/packages/styles/scss/components/toggletip/_toggletip.scss +++ b/packages/styles/scss/components/toggletip/_toggletip.scss @@ -19,7 +19,7 @@ .#{$prefix}--toggletip-label { @include type.type-style('body-01'); - margin-right: spacing.$spacing-03; + margin-inline-end: spacing.$spacing-03; color: theme.$text-secondary; } diff --git a/packages/styles/scss/components/tooltip/_tooltip.scss b/packages/styles/scss/components/tooltip/_tooltip.scss index 9e7e4e034138..6f2becfc2cfe 100644 --- a/packages/styles/scss/components/tooltip/_tooltip.scss +++ b/packages/styles/scss/components/tooltip/_tooltip.scss @@ -45,7 +45,7 @@ $tooltip-padding-inline: custom-property.get-var( .#{$prefix}--definition-term { @include button-reset.reset; - border-bottom: 1px dotted theme.$border-strong; + border-block-end: 1px dotted theme.$border-strong; border-radius: 0; color: theme.$text-primary; diff --git a/packages/styles/scss/components/treeview/_treeview.scss b/packages/styles/scss/components/treeview/_treeview.scss index 79a536a78eb0..7cd9c3144063 100644 --- a/packages/styles/scss/components/treeview/_treeview.scss +++ b/packages/styles/scss/components/treeview/_treeview.scss @@ -27,7 +27,7 @@ } .#{$prefix}--tree-node { - padding-left: $spacing-05; + padding-inline-start: $spacing-05; background-color: $layer-01; color: $text-secondary; @@ -47,7 +47,7 @@ } .#{$prefix}--tree-node--with-icon .#{$prefix}--tree-node { - margin-left: $spacing-03; + margin-inline-start: $spacing-03; } .#{$prefix}--tree-node:focus > .#{$prefix}--tree-node__label { @@ -88,7 +88,7 @@ @include type-style('body-compact-01'); display: flex; - min-height: convert.to-rem(32px); + min-block-size: convert.to-rem(32px); flex: 1; align-items: center; @@ -101,7 +101,7 @@ .#{$prefix}--tree-node:not(.#{$prefix}--tree-parent-node) .#{$prefix}--tree-node__label { // (min-height 32px - single line text height 18px) / 2 = 7px - padding-top: convert.to-rem(7px); + padding-block-start: convert.to-rem(7px); padding-bottom: convert.to-rem(7px); } @@ -117,16 +117,16 @@ .#{$prefix}--tree-leaf-node { display: flex; - padding-left: $spacing-08; + padding-inline-start: $spacing-08; } .#{$prefix}--tree-leaf-node.#{$prefix}--tree-node--with-icon { - padding-left: $spacing-07; + padding-inline-start: $spacing-07; } .#{$prefix}--tree-leaf-node.#{$prefix}--tree-node--with-icon .#{$prefix}--tree-leaf-node { - padding-left: $spacing-06; + padding-inline-start: $spacing-06; } .#{$prefix}--tree-node__label__details { @@ -135,20 +135,20 @@ } .#{$prefix}--tree-node--with-icon .#{$prefix}--tree-parent-node__toggle { - margin-right: 0; + margin-inline-end: 0; } .#{$prefix}--tree-parent-node__toggle { display: flex; - width: convert.to-rem(24px); - height: convert.to-rem(24px); + inline-size: convert.to-rem(24px); + block-size: convert.to-rem(24px); align-items: center; align-self: flex-start; - padding-left: $spacing-02; + padding-inline-start: $spacing-02; border: 0; margin-top: $spacing-02; - margin-right: $spacing-02; - margin-left: -$spacing-02; + margin-inline-end: $spacing-02; + margin-inline-start: -$spacing-02; &:hover { cursor: pointer; @@ -171,18 +171,18 @@ .#{$prefix}--tree-node__icon { min-width: 1rem; - min-height: 1rem; + min-block-size: 1rem; align-self: flex-start; margin-top: convert.to-rem(1px); - margin-right: $spacing-03; - margin-left: $spacing-03; + margin-inline-end: $spacing-03; + margin-inline-start: $spacing-03; fill: $icon-secondary; } .#{$prefix}--tree-parent-node__toggle + .#{$prefix}--tree-node__label__details .#{$prefix}--tree-node__icon { - margin-left: $spacing-02; + margin-inline-start: $spacing-02; } .#{$prefix}--tree-node--selected > .#{$prefix}--tree-node__label { @@ -208,10 +208,10 @@ &::before { position: absolute; - top: 0; - left: 0; - width: convert.to-rem(4px); - height: 100%; + inset-block-start: 0; + inset-inline-start: 0; + inline-size: convert.to-rem(4px); + block-size: 100%; background-color: $interactive; content: ''; } @@ -219,7 +219,7 @@ // xs size variant .#{$prefix}--tree--xs .#{$prefix}--tree-node__label { - min-height: convert.to-rem(24px); + min-block-size: convert.to-rem(24px); } .#{$prefix}--tree--xs diff --git a/packages/styles/scss/components/ui-shell/content/_content.scss b/packages/styles/scss/components/ui-shell/content/_content.scss index 63007f787ef9..7c7d97b072c9 100644 --- a/packages/styles/scss/components/ui-shell/content/_content.scss +++ b/packages/styles/scss/components/ui-shell/content/_content.scss @@ -24,10 +24,10 @@ } .#{$prefix}--side-nav ~ .#{$prefix}--content { - margin-left: mini-units(6); + margin-inline-start: mini-units(6); } .#{$prefix}--side-nav.#{$prefix}--side-nav--expanded ~ .#{$prefix}--content { - margin-left: mini-units(32); + margin-inline-start: mini-units(32); } } diff --git a/packages/styles/scss/components/ui-shell/header-panel/_header-panel.scss b/packages/styles/scss/components/ui-shell/header-panel/_header-panel.scss index c2ce0de072b1..384c72aa65bb 100644 --- a/packages/styles/scss/components/ui-shell/header-panel/_header-panel.scss +++ b/packages/styles/scss/components/ui-shell/header-panel/_header-panel.scss @@ -22,11 +22,11 @@ .#{$prefix}--header-panel { position: fixed; z-index: z('header'); - top: mini-units(6); + inset-block-start: mini-units(6); right: 0; - bottom: 0; + inset-block-end: 0; overflow: hidden; - width: 0; + inline-size: 0; border: none; background-color: $layer; color: $text-secondary; @@ -35,8 +35,8 @@ } .#{$prefix}--header-panel--expanded { - width: mini-units(32); - border-right: 1px solid $border-subtle; - border-left: 1px solid $border-subtle; + inline-size: mini-units(32); + border-inline-end: 1px solid $border-subtle; + border-inline-start: 1px solid $border-subtle; } } diff --git a/packages/styles/scss/components/ui-shell/header/_header.scss b/packages/styles/scss/components/ui-shell/header/_header.scss index 3b6bbcb9c3d8..1b457fc42c72 100644 --- a/packages/styles/scss/components/ui-shell/header/_header.scss +++ b/packages/styles/scss/components/ui-shell/header/_header.scss @@ -29,13 +29,13 @@ position: fixed; z-index: z('header'); - top: 0; + inset-block-start: 0; right: 0; - left: 0; + inset-inline-start: 0; display: flex; - height: mini-units(6); + block-size: mini-units(6); align-items: center; - border-bottom: 1px solid $border-subtle; + border-block-end: 1px solid $border-subtle; background-color: $background; } @@ -43,8 +43,8 @@ @include button-reset.reset(); display: inline-flex; - width: mini-units(6); - height: mini-units(6); + inline-size: mini-units(6); + block-size: mini-units(6); border: convert.to-rem(1px) solid transparent; transition: background-color $duration-fast-02, border-color $duration-fast-02; @@ -78,9 +78,9 @@ } .#{$prefix}--header__action--active { - border-right: 1px solid $border-subtle; - border-bottom: 1px solid transparent; - border-left: 1px solid $border-subtle; + border-inline-end: 1px solid $border-subtle; + border-block-end: 1px solid transparent; + border-inline-start: 1px solid $border-subtle; background: $layer; } @@ -143,7 +143,7 @@ @include type-style('body-compact-01'); display: flex; - height: 100%; + block-size: 100%; align-items: center; padding: 0 mini-units(4) 0 mini-units(2); border: convert.to-rem(2px) solid transparent; @@ -175,7 +175,7 @@ .#{$prefix}--header__menu-toggle:not(.#{$prefix}--header__menu-toggle__hidden) ~ .#{$prefix}--header__name { - padding-left: convert.to-rem(8px); + padding-inline-start: convert.to-rem(8px); } //-------------------------------------------------------------------------- @@ -184,8 +184,8 @@ .#{$prefix}--header__nav { position: relative; display: none; - height: 100%; - padding-left: mini-units(2); + block-size: 100%; + padding-inline-start: mini-units(2); @include breakpoint('lg') { display: block; @@ -194,11 +194,11 @@ // header nav divider &::before { position: absolute; - top: 50%; - left: 0; + inset-block-start: 50%; + inset-inline-start: 0; display: block; - width: convert.to-rem(1px); - height: convert.to-rem(24px); + inline-size: convert.to-rem(1px); + block-size: convert.to-rem(24px); background-color: $border-subtle; content: ''; transform: translateY(-50%); @@ -209,7 +209,7 @@ @include component-reset.reset; display: flex; - height: 100%; + block-size: 100%; padding: 0; margin: 0; list-style: none; @@ -219,7 +219,7 @@ position: relative; display: flex; // Used for links that are directly in the menubar to span the full height - height: 100%; + block-size: 100%; align-items: center; padding: 0 mini-units(2); // Used for focus styles @@ -269,10 +269,10 @@ a.#{$prefix}--header__menu-item[aria-current='page']::after, .#{$prefix}--header__menu-item--current::after { position: absolute; - bottom: -2px; - left: -2px; - width: calc(100% + 4px); - height: 3px; + inset-block-end: -2px; + inset-inline-start: -2px; + inline-size: calc(100% + 4px); + block-size: 3px; background-color: $border-interactive; content: ''; } @@ -285,20 +285,20 @@ .#{$prefix}--header__submenu .#{$prefix}--header__menu { a.#{$prefix}--header__menu-item[aria-current='page']::after, .#{$prefix}--header__menu-item--current::after { - top: -2px; - left: -2px; - width: 3px; - height: calc(100% + 4px); + inset-block-start: -2px; + inset-inline-start: -2px; + inline-size: 3px; + block-size: calc(100% + 4px); background-color: $border-interactive; } a.#{$prefix}--header__menu-item[aria-current='page']:focus::after, .#{$prefix}--header__menu-item--current:focus::after { - top: -2px; - left: -2px; + inset-block-start: -2px; + inset-inline-start: -2px; // extra, hidden width prevents flickering on focus change - width: 5px; - height: calc(100% + 4px); + inline-size: 5px; + block-size: calc(100% + 4px); background-color: $border-interactive; } } @@ -340,10 +340,10 @@ + .#{$prefix}--header__menu { position: absolute; z-index: #{z('header') + 1}; - bottom: 0; - left: 0; + inset-block-end: 0; + inset-inline-start: 0; display: flex; - width: mini-units(25); + inline-size: mini-units(25); flex-direction: column; background-color: $layer; box-shadow: 0 4px 8px 0 rgb(0 0 0 / 50%); @@ -382,11 +382,11 @@ } .#{$prefix}--header__menu .#{$prefix}--header__menu-item { - height: mini-units(6); + block-size: mini-units(6); } .#{$prefix}--header__menu-arrow { - margin-left: mini-units(1); + margin-inline-start: mini-units(1); fill: $icon-secondary; transition: transform $duration-fast-02, fill $duration-fast-02; } @@ -396,7 +396,7 @@ //-------------------------------------------------------------------------- .#{$prefix}--header__global { display: flex; - height: 100%; + block-size: 100%; flex: 1 1 0%; justify-content: flex-end; } @@ -407,8 +407,8 @@ .#{$prefix}--skip-to-content { position: absolute; overflow: hidden; - width: 1px; - height: 1px; + inline-size: 1px; + block-size: 1px; padding: 0; border: 0; margin: -1px; @@ -419,11 +419,11 @@ .#{$prefix}--skip-to-content:focus { z-index: 9999; - top: 0; - left: 0; + inset-block-start: 0; + inset-inline-start: 0; display: flex; - width: auto; - height: 3rem; + inline-size: auto; + block-size: 3rem; align-items: center; padding: 0 1rem; border: 4px solid $focus; diff --git a/packages/styles/scss/components/ui-shell/side-nav/_side-nav.scss b/packages/styles/scss/components/ui-shell/side-nav/_side-nav.scss index 968e9f884f18..4e3097782251 100644 --- a/packages/styles/scss/components/ui-shell/side-nav/_side-nav.scss +++ b/packages/styles/scss/components/ui-shell/side-nav/_side-nav.scss @@ -31,12 +31,12 @@ .#{$prefix}--side-nav { position: fixed; z-index: z('header'); - top: 0; - bottom: 0; - left: 0; + inset-block-start: 0; + inset-block-end: 0; + inset-inline-start: 0; // Useful to toggle this property to see what's going on when not expanded overflow: hidden; - width: mini-units(6); + inline-size: mini-units(6); max-width: mini-units(32); background-color: $background; color: $text-secondary; @@ -46,11 +46,11 @@ } .#{$prefix}--side-nav--ux { - top: $spacing-09; - width: mini-units(32); + inset-block-start: $spacing-09; + inline-size: mini-units(32); @include breakpoint-down('lg') { - width: 0; + inline-size: 0; } } @@ -63,23 +63,23 @@ // should have the same dimensions as when expanded on mouse over .#{$prefix}--side-nav--rail { - width: mini-units(6); + inline-size: mini-units(6); } .#{$prefix}--side-nav--hidden { - width: 0; + inline-size: 0; } .#{$prefix}--side-nav--expanded { - width: mini-units(32); + inline-size: mini-units(32); } .#{$prefix}--side-nav__overlay { position: fixed; - top: convert.to-rem(48px); - left: 0; - width: 0; - height: 0; + inset-block-start: convert.to-rem(48px); + inset-inline-start: 0; + inline-size: 0; + block-size: 0; background-color: transparent; opacity: 0; transition: opacity $transition-expansion $standard-easing, @@ -89,8 +89,8 @@ .#{$prefix}--side-nav__overlay-active { @include breakpoint-down('lg') { z-index: z('overlay'); - width: 100vw; - height: 100vh; + inline-size: 100vw; + block-size: 100vh; background-color: $overlay; opacity: 1; transition: opacity $transition-expansion $standard-easing, @@ -101,16 +101,16 @@ // When used alongside the header, we update the `top` positioning so that we // can fit both widgets on the same page without overlapping. .#{$prefix}--header ~ .#{$prefix}--side-nav { - top: mini-units(6); - height: calc(100% - 48px); + inset-block-start: mini-units(6); + block-size: calc(100% - 48px); } .#{$prefix}--side-nav--fixed { - width: mini-units(32); + inline-size: mini-units(32); } .#{$prefix}--side-nav--collapsed { - width: mini-units(32); + inline-size: mini-units(32); transform: translateX(mini-units(-32)); } @@ -143,13 +143,13 @@ .#{$prefix}--side-nav__item { overflow: hidden; - width: auto; - height: auto; + inline-size: auto; + block-size: auto; } .#{$prefix}--side-nav--ux .#{$prefix}--side-nav__item { - width: auto; - height: auto; + inline-size: auto; + block-size: auto; } .#{$prefix}--side-nav__item:not(.#{$prefix}--side-nav__item--active):hover @@ -180,14 +180,14 @@ } .#{$prefix}--side-nav__item--large { - height: mini-units(6); + block-size: mini-units(6); } //---------------------------------------------------------------------------- // Side-nav > Navigation > Divider //---------------------------------------------------------------------------- .#{$prefix}--side-nav__divider { - height: 1px; + block-size: 1px; margin: $spacing-03 $spacing-05; background-color: $border-subtle; list-style-type: none; @@ -202,7 +202,7 @@ @include focus-outline('reset'); display: flex; - height: mini-units(4); + block-size: mini-units(4); align-items: center; padding: 0 mini-units(2); @@ -234,8 +234,8 @@ } .#{$prefix}--side-nav__submenu-chevron > svg { - width: convert.to-rem(16px); - height: convert.to-rem(16px); + inline-size: convert.to-rem(16px); + block-size: convert.to-rem(16px); transition: transform $duration-fast-02; } @@ -246,7 +246,7 @@ } .#{$prefix}--side-nav__item--large .#{$prefix}--side-nav__submenu { - height: mini-units(6); + block-size: mini-units(6); } .#{$prefix}--side-nav__item--active .#{$prefix}--side-nav__submenu:hover { @@ -263,10 +263,10 @@ &::before { position: absolute; - top: 0; - bottom: 0; - left: 0; - width: 3px; + inset-block-start: 0; + inset-block-end: 0; + inset-inline-start: 0; + inline-size: 3px; background-color: $border-interactive; content: ''; } @@ -296,15 +296,15 @@ } .#{$prefix}--side-nav__menu a.#{$prefix}--side-nav__link { - height: mini-units(4); - min-height: mini-units(4); - padding-left: mini-units(4); + block-size: mini-units(4); + min-block-size: mini-units(4); + padding-inline-start: mini-units(4); font-weight: 400; } .#{$prefix}--side-nav__item.#{$prefix}--side-nav__item--icon a.#{$prefix}--side-nav__link { - padding-left: mini-units(9); + padding-inline-start: mini-units(9); } .#{$prefix}--side-nav__menu a.#{$prefix}--side-nav__link--current, .#{$prefix}--side-nav__menu a.#{$prefix}--side-nav__link[aria-current='page'], @@ -330,7 +330,7 @@ position: relative; display: flex; - min-height: mini-units(4); + min-block-size: mini-units(4); align-items: center; padding: 0 mini-units(2); text-decoration: none; @@ -339,7 +339,7 @@ } .#{$prefix}--side-nav__item--large a.#{$prefix}--side-nav__link { - height: mini-units(6); + block-size: mini-units(6); } a.#{$prefix}--side-nav__link > .#{$prefix}--side-nav__link-text, @@ -375,10 +375,10 @@ a.#{$prefix}--side-nav__link[aria-current='page']::before, a.#{$prefix}--side-nav__link--current::before { position: absolute; - top: 0; - bottom: 0; - left: 0; - width: 3px; + inset-block-start: 0; + inset-block-end: 0; + inset-inline-start: 0; + inline-size: 3px; background-color: $border-interactive; content: ''; } @@ -396,12 +396,12 @@ } .#{$prefix}--side-nav__icon:not(.#{$prefix}--side-nav__submenu-chevron) { - margin-right: mini-units(3); + margin-inline-end: mini-units(3); } .#{$prefix}--side-nav__icon > svg { - width: mini-units(2); - height: mini-units(2); + inline-size: mini-units(2); + block-size: mini-units(2); fill: $icon-secondary; } @@ -426,14 +426,14 @@ //---------------------------------------------------------------------------- .#{$prefix}--side-nav--fixed a.#{$prefix}--side-nav__link, .#{$prefix}--side-nav--fixed .#{$prefix}--side-nav__submenu { - padding-left: mini-units(2); + padding-inline-start: mini-units(2); } .#{$prefix}--side-nav--fixed .#{$prefix}--side-nav__item:not(.#{$prefix}--side-nav__item--icon) .#{$prefix}--side-nav__menu a.#{$prefix}--side-nav__link { - padding-left: mini-units(4); + padding-inline-start: mini-units(4); } //---------------------------------------------------------------------------- @@ -459,10 +459,10 @@ .#{$prefix}--side-nav__header-divider::after { position: absolute; - bottom: convert.to-rem(-16px); - left: convert.to-rem(16px); - width: calc(100% - 32px); - height: convert.to-rem(1px); + inset-block-end: convert.to-rem(-16px); + inset-inline-start: convert.to-rem(16px); + inline-size: calc(100% - 32px); + block-size: convert.to-rem(1px); background: $border-subtle; content: ''; } @@ -481,19 +481,19 @@ .#{$prefix}--side-nav .#{$prefix}--header__menu-title[aria-expanded='true'] + .#{$prefix}--header__menu { - bottom: inherit; - width: 100%; + inset-block-end: inherit; + inline-size: 100%; padding: 0; background-color: transparent; box-shadow: none; transform: none; li { - width: 100%; + inline-size: 100%; } a.#{$prefix}--header__menu-item { - padding-left: 4.25rem; + padding-inline-start: 4.25rem; font-weight: 400; } @@ -514,14 +514,14 @@ .#{$prefix}--side-nav .#{$prefix}--side-nav__header-navigation .#{$prefix}--header__menu-item--current::after { - width: 3px; - height: calc(100% + 4px); + inline-size: 3px; + block-size: calc(100% + 4px); } .#{$prefix}--side-nav .#{$prefix}--header__menu a.#{$prefix}--header__menu-item { - height: inherit; + block-size: inherit; } .#{$prefix}--side-nav diff --git a/packages/styles/scss/components/ui-shell/switcher/_switcher.scss b/packages/styles/scss/components/ui-shell/switcher/_switcher.scss index a2b43cc4bacd..4984265b060f 100644 --- a/packages/styles/scss/components/ui-shell/switcher/_switcher.scss +++ b/packages/styles/scss/components/ui-shell/switcher/_switcher.scss @@ -30,8 +30,8 @@ } .#{$prefix}--switcher__item { - width: 100%; - height: $spacing-07; + inline-size: 100%; + block-size: $spacing-07; } .#{$prefix}--switcher__item:nth-child(1) { @@ -40,8 +40,8 @@ .#{$prefix}--switcher__item--divider { display: block; - width: convert.to-rem(224px); - height: 1px; + inline-size: convert.to-rem(224px); + block-size: 1px; border: none; margin: $spacing-03 $spacing-05; background: $border-subtle; @@ -51,7 +51,7 @@ @include type-style('heading-compact-01'); display: block; - height: $spacing-07; + block-size: $spacing-07; padding: convert.to-rem(6px) $spacing-05; color: $text-secondary; text-decoration: none; diff --git a/yarn.lock b/yarn.lock index ff014cea2db8..aa6ac79e9a88 100644 --- a/yarn.lock +++ b/yarn.lock @@ -29585,6 +29585,7 @@ __metadata: stylelint-order: ^5.0.0 stylelint-prettier: ^2.0.0 stylelint-scss: ^4.1.0 + stylelint-use-logical: ^2.1.0 peerDependencies: stylelint: ^15.0.0 languageName: unknown @@ -29723,6 +29724,15 @@ __metadata: languageName: node linkType: hard +"stylelint-use-logical@npm:^2.1.0": + version: 2.1.0 + resolution: "stylelint-use-logical@npm:2.1.0" + peerDependencies: + stylelint: ">= 11 < 16" + checksum: d8e0d2aea6e417479c7d3759f8ffa189111adbc3558f17f26f15459b4d863d7b25dcdc7cbdba2a361eb3f0950c224f35554c0be58253fd00b8dbe5ad0ab09450 + languageName: node + linkType: hard + "stylelint@npm:^15.0.0": version: 15.10.1 resolution: "stylelint@npm:15.10.1" From eebe26d132a851fa9d8c4dc62c4de490e551a9f9 Mon Sep 17 00:00:00 2001 From: TJ Egan Date: Fri, 25 Aug 2023 13:21:43 -0400 Subject: [PATCH 2/9] fix(styles): change padding-inline-end to padding-inline --- .../styles/scss/components/code-snippet/_code-snippet.scss | 2 +- .../scss/components/contained-list/_contained-list.scss | 2 +- packages/styles/scss/components/menu/_menu.scss | 2 +- .../styles/scss/components/progress-bar/_progress-bar.scss | 2 +- packages/styles/scss/components/tabs/_tabs.scss | 4 ++-- packages/styles/scss/components/tag/_tag.scss | 2 +- 6 files changed, 7 insertions(+), 7 deletions(-) diff --git a/packages/styles/scss/components/code-snippet/_code-snippet.scss b/packages/styles/scss/components/code-snippet/_code-snippet.scss index a4f13748da20..10a57941015e 100644 --- a/packages/styles/scss/components/code-snippet/_code-snippet.scss +++ b/packages/styles/scss/components/code-snippet/_code-snippet.scss @@ -307,7 +307,7 @@ $copy-btn-feedback: $background-inverse !default; inline-size: initial; block-size: 1.25rem; min-block-size: 1.25rem; - padding-inline-end: 0; + padding-inline: 0; } .#{$prefix}--snippet--inline.#{$prefix}--btn.#{$prefix}--btn--primary:hover { diff --git a/packages/styles/scss/components/contained-list/_contained-list.scss b/packages/styles/scss/components/contained-list/_contained-list.scss index 1132036cfb80..6b5d130595b4 100644 --- a/packages/styles/scss/components/contained-list/_contained-list.scss +++ b/packages/styles/scss/components/contained-list/_contained-list.scss @@ -39,7 +39,7 @@ inset-block-start: 0; display: flex; align-items: center; - padding-inline-end: layout.density('padding-inline'); + padding-inline: layout.density('padding-inline'); } .#{$prefix}--contained-list__label { diff --git a/packages/styles/scss/components/menu/_menu.scss b/packages/styles/scss/components/menu/_menu.scss index 97a3f0822e65..76daae2af4e2 100644 --- a/packages/styles/scss/components/menu/_menu.scss +++ b/packages/styles/scss/components/menu/_menu.scss @@ -70,7 +70,7 @@ column-gap: $spacing-03; cursor: pointer; grid-template-columns: 1fr max-content; - padding-inline-end: $spacing-05; + padding-inline: $spacing-05; transition: background-color $duration-fast-01 motion(standard, productive); &:focus { diff --git a/packages/styles/scss/components/progress-bar/_progress-bar.scss b/packages/styles/scss/components/progress-bar/_progress-bar.scss index 1bbc0653d179..333b795d6b06 100644 --- a/packages/styles/scss/components/progress-bar/_progress-bar.scss +++ b/packages/styles/scss/components/progress-bar/_progress-bar.scss @@ -161,6 +161,6 @@ .#{$prefix}--progress-bar--indented .#{$prefix}--progress-bar__label, .#{$prefix}--progress-bar--indented .#{$prefix}--progress-bar__helper-text { - padding-inline-end: layout.density('padding-inline'); + padding-inline: layout.density('padding-inline'); } } diff --git a/packages/styles/scss/components/tabs/_tabs.scss b/packages/styles/scss/components/tabs/_tabs.scss index ded43f3f1f11..d9722f20ccfa 100644 --- a/packages/styles/scss/components/tabs/_tabs.scss +++ b/packages/styles/scss/components/tabs/_tabs.scss @@ -368,7 +368,7 @@ overflow: hidden; border-block-end: $tab-underline-color; color: $text-secondary; - padding-inline-end: layout.density('padding-inline'); + padding-inline: layout.density('padding-inline'); text-align: left; text-decoration: none; text-overflow: ellipsis; @@ -384,7 +384,7 @@ &.#{$prefix}--tabs--contained .#{$prefix}--tabs__nav-link { border-block-end: 0; - padding-inline-end: layout.density('padding-inline'); + padding-inline: layout.density('padding-inline'); } &.#{$prefix}--tabs--contained:not(.#{$prefix}--tabs--tall) diff --git a/packages/styles/scss/components/tag/_tag.scss b/packages/styles/scss/components/tag/_tag.scss index e036093597d7..ae569013fd4e 100644 --- a/packages/styles/scss/components/tag/_tag.scss +++ b/packages/styles/scss/components/tag/_tag.scss @@ -52,7 +52,7 @@ margin: $spacing-02; border-radius: convert.to-rem(15px); cursor: default; - padding-inline-end: $spacing-03; + padding-inline: $spacing-03; vertical-align: middle; word-break: break-word; From d4512f8fddda8381f6e7b798092bf96366f1e75d Mon Sep 17 00:00:00 2001 From: TJ Egan Date: Fri, 25 Aug 2023 14:28:46 -0400 Subject: [PATCH 3/9] fix(styles): run stylelint --fix on components --- .../scss/components/button/_button.scss | 12 +- .../scss/components/button/_mixins.scss | 16 +- .../scss/components/checkbox/_checkbox.scss | 52 +++--- .../code-snippet/_code-snippet.scss | 68 ++++---- .../scss/components/code-snippet/_mixins.scss | 4 +- .../scss/components/combo-box/_combo-box.scss | 4 +- .../combo-button/_combo-button.scss | 2 +- .../contained-list/_contained-list.scss | 31 ++-- .../content-switcher/_content-switcher.scss | 46 ++--- .../components/data-table/_data-table.scss | 141 +++++++-------- .../scss/components/data-table/_mixins.scss | 6 +- .../data-table/action/_data-table-action.scss | 82 ++++----- .../expandable/_data-table-expandable.scss | 80 ++++----- .../skeleton/_data-table-skeleton.scss | 10 +- .../data-table/sort/_data-table-sort.scss | 38 ++-- .../components/date-picker/_date-picker.scss | 15 +- .../components/date-picker/_flatpickr.scss | 72 ++++---- .../scss/components/dropdown/_dropdown.scss | 68 ++++---- .../file-uploader/_file-uploader.scss | 54 +++--- .../fluid-combo-box/_fluid-combo-box.scss | 4 +- .../fluid-date-picker/_fluid-date-picker.scss | 58 +++---- .../fluid-list-box/_fluid-list-box.scss | 34 ++-- .../fluid-multiselect/_fluid-multiselect.scss | 2 +- .../_fluid-number-input.scss | 38 ++-- .../fluid-search/_fluid-search.scss | 28 +-- .../fluid-select/_fluid-select.scss | 24 +-- .../fluid-text-area/_fluid-text-area.scss | 26 +-- .../fluid-text-input/_fluid-text-input.scss | 34 ++-- .../fluid-time-picker/_fluid-time-picker.scss | 26 +-- .../styles/scss/components/form/_form.scss | 17 +- .../inline-loading/_inline-loading.scss | 8 +- .../scss/components/list-box/_list-box.scss | 164 +++++++++--------- .../styles/scss/components/list/_list.scss | 8 +- .../scss/components/loading/_loading.scss | 13 +- .../components/menu-button/_menu-button.scss | 2 +- .../styles/scss/components/menu/_menu.scss | 12 +- .../styles/scss/components/modal/_modal.scss | 92 +++++----- .../components/multiselect/_multiselect.scss | 16 +- .../_actionable-notification.scss | 58 +++---- .../notification/_inline-notification.scss | 40 ++--- .../scss/components/notification/_mixins.scss | 2 +- .../notification/_toast-notification.scss | 26 ++- .../number-input/_number-input.scss | 94 +++++----- .../overflow-menu/_overflow-menu.scss | 56 +++--- .../components/pagination-nav/_mixins.scss | 10 +- .../pagination-nav/_pagination-nav.scss | 12 +- .../components/pagination/_pagination.scss | 34 ++-- .../pagination/_unstable_pagination.scss | 32 ++-- .../scss/components/popover/_popover.scss | 66 +++---- .../progress-bar/_progress-bar.scss | 17 +- .../_progress-indicator.scss | 67 +++---- .../radio-button/_radio-button.scss | 30 ++-- .../scss/components/search/_search.scss | 47 ++--- .../scss/components/select/_select.scss | 41 ++--- .../skeleton-styles/_skeleton-styles.scss | 12 +- .../scss/components/slider/_slider.scss | 44 ++--- .../structured-list/_structured-list.scss | 12 +- .../styles/scss/components/tabs/_tabs.scss | 58 +++---- packages/styles/scss/components/tag/_tag.scss | 28 +-- .../scss/components/text-area/_text-area.scss | 26 +-- .../components/text-input/_text-input.scss | 58 ++++--- .../styles/scss/components/tile/_tile.scss | 18 +- .../components/time-picker/_time-picker.scss | 24 +-- .../scss/components/toggle/_toggle.scss | 36 ++-- .../scss/components/toggletip/_toggletip.scss | 5 +- .../scss/components/tooltip/_tooltip.scss | 10 +- .../scss/components/treeview/_treeview.scss | 32 ++-- .../components/ui-shell/content/_content.scss | 2 +- .../ui-shell/header-panel/_header-panel.scss | 10 +- .../components/ui-shell/header/_header.scss | 80 ++++----- .../ui-shell/side-nav/_side-nav.scss | 80 ++++----- .../ui-shell/switcher/_switcher.scss | 10 +- 72 files changed, 1306 insertions(+), 1278 deletions(-) diff --git a/packages/styles/scss/components/button/_button.scss b/packages/styles/scss/components/button/_button.scss index caa2d8e976bf..c46d5e602ee9 100644 --- a/packages/styles/scss/components/button/_button.scss +++ b/packages/styles/scss/components/button/_button.scss @@ -149,10 +149,10 @@ } .#{$prefix}--btn--icon-only { - inline-size: layout.size('height'); - block-size: layout.size('height'); justify-content: center; padding: 0; + block-size: layout.size('height'); + inline-size: layout.size('height'); // -1px to compensate for border width padding-block-start: min( calc( @@ -162,8 +162,8 @@ ); > :first-child { - min-width: convert.to-rem(16px); margin-block-start: convert.to-rem(1px); + min-inline-size: convert.to-rem(16px); } .#{$prefix}--btn__icon { @@ -324,12 +324,12 @@ } .#{$prefix}--btn.#{$prefix}--btn--expressive .#{$prefix}--btn__icon { - inline-size: convert.to-rem(20px); block-size: convert.to-rem(20px); + inline-size: convert.to-rem(20px); } .#{$prefix}--btn-set .#{$prefix}--btn.#{$prefix}--btn--expressive { - max-width: convert.to-rem(320px); + max-inline-size: convert.to-rem(320px); } // Skeleton State @@ -351,7 +351,7 @@ .#{$prefix}--btn-set .#{$prefix}--btn { inline-size: 100%; // 196px from design kit - max-width: convert.to-rem(196px); + max-inline-size: convert.to-rem(196px); &:not(:focus) { box-shadow: convert.to-rem(-1px) 0 0 0 $button-separator; diff --git a/packages/styles/scss/components/button/_mixins.scss b/packages/styles/scss/components/button/_mixins.scss index 035797aaff41..5cc4b79b5cef 100644 --- a/packages/styles/scss/components/button/_mixins.scss +++ b/packages/styles/scss/components/button/_mixins.scss @@ -46,15 +46,15 @@ $button-focus-color: custom-property.get-var('button-focus-color', $focus); position: relative; display: inline-flex; - inline-size: max-content; - max-width: convert.to-rem(320px); - min-block-size: layout.size('height'); flex-shrink: 0; justify-content: space-between; // Fix to remove added margins on buttons in safari (see #5155) margin: 0; border-radius: $button-border-radius; cursor: pointer; + inline-size: max-content; + max-inline-size: convert.to-rem(320px); + min-block-size: layout.size('height'); outline: none; // -1px to compensate for border width padding-block: min( @@ -68,7 +68,7 @@ $button-focus-color: custom-property.get-var('button-focus-color', $focus); padding-inline-start: calc( layout.density('padding-inline') - convert.to-rem(1px) ); - text-align: left; + text-align: start; text-decoration: none; transition: background $duration-fast-01 motion(entrance, productive), box-shadow $duration-fast-01 motion(entrance, productive), @@ -91,6 +91,9 @@ $button-focus-color: custom-property.get-var('button-focus-color', $focus); .#{$prefix}--btn__icon { position: absolute; + flex-shrink: 0; + block-size: convert.to-rem(16px); + inline-size: convert.to-rem(16px); // -1px to compensate for border width inset-block-start: min( calc( @@ -98,10 +101,7 @@ $button-focus-color: custom-property.get-var('button-focus-color', $focus); ), var(--temp-padding-block-max) ); - right: layout.density('padding-inline'); - inline-size: convert.to-rem(16px); - block-size: convert.to-rem(16px); - flex-shrink: 0; + inset-inline-end: layout.density('padding-inline'); margin-block-start: convert.to-rem(1px); } } diff --git a/packages/styles/scss/components/checkbox/_checkbox.scss b/packages/styles/scss/components/checkbox/_checkbox.scss index d72d9ff92c96..401d1a1c8803 100644 --- a/packages/styles/scss/components/checkbox/_checkbox.scss +++ b/packages/styles/scss/components/checkbox/_checkbox.scss @@ -23,23 +23,23 @@ // Spacing between checkboxes .#{$prefix}--form-item.#{$prefix}--checkbox-wrapper { position: relative; - margin-bottom: $spacing-02; + margin-block-end: $spacing-02; } // Spacing above collection of checkboxes .#{$prefix}--form-item.#{$prefix}--checkbox-wrapper:first-of-type { - margin-top: convert.to-rem(3px); + margin-block-start: convert.to-rem(3px); } // Shift collection of checkboxes up if label is present // to account for the 2px top margin for the first checkbox .#{$prefix}--label + .#{$prefix}--form-item.#{$prefix}--checkbox-wrapper { - margin-top: -#{$spacing-01}; + margin-block-start: -#{$spacing-01}; } // Spacing below collection of checkboxes .#{$prefix}--form-item.#{$prefix}--checkbox-wrapper:last-of-type { - margin-bottom: convert.to-rem(3px); + margin-block-end: convert.to-rem(3px); } // Visually, we'll hide the checkbox input and create our own styled version @@ -60,10 +60,10 @@ position: relative; display: flex; + cursor: pointer; min-block-size: convert.to-rem(24px); padding-block-start: convert.to-rem(3px); padding-inline-start: convert.to-rem(20px); - cursor: pointer; user-select: none; } @@ -85,14 +85,6 @@ // `top` since we don't want the checkbox to be centered vertically with the // text overflows. position: absolute; - inset-block-start: convert.to-rem(2px); - inset-inline-start: 0; - - // According to the spec, we'll want the bounding box for our checkbox to - // be 16px. The border size will be what will be updated during the - // different checkbox states. - inline-size: convert.to-rem(16px); - block-size: convert.to-rem(16px); border: 1px solid $icon-primary; // increase left margin for #6480 margin: convert.to-rem(2px) convert.to-rem(2px) convert.to-rem(2px) @@ -100,22 +92,30 @@ // Checkboxes with a background color look visually off against a parent container. background-color: transparent; + block-size: convert.to-rem(16px); border-radius: 2px; content: ''; + + // According to the spec, we'll want the bounding box for our checkbox to + // be 16px. The border size will be what will be updated during the + // different checkbox states. + inline-size: convert.to-rem(16px); + inset-block-start: convert.to-rem(2px); + inset-inline-start: 0; } // Create the appearance of the check in the `after` pseudo-element .#{$prefix}--checkbox-label::after { position: absolute; - inset-block-start: convert.to-rem(7.5px); - inset-inline-start: convert.to-rem(7px); - inline-size: convert.to-rem(9px); + background: none; block-size: convert.to-rem(5px); border-block-end: 1.5px solid $icon-inverse; border-inline-start: 1.5px solid $icon-inverse; - margin-top: convert.to-rem(-3px) #{'/*rtl:0rem*/'}; - background: none; content: ''; + inline-size: convert.to-rem(9px); + inset-block-start: convert.to-rem(7.5px); + inset-inline-start: convert.to-rem(7px); + margin-block-start: convert.to-rem(-3px) #{'/*rtl:0rem*/'}; transform: scale(0) rotate(-45deg); transform-origin: bottom right #{'/*rtl:center*/'}; } @@ -141,10 +141,10 @@ // Indeterminate symbol .#{$prefix}--checkbox:indeterminate + .#{$prefix}--checkbox-label::after { - inset-block-start: convert.to-rem(11px); - inline-size: convert.to-rem(8px); border-block-end: 2px solid $icon-inverse; border-inline-start: 0 solid $icon-inverse; + inline-size: convert.to-rem(8px); + inset-block-start: convert.to-rem(11px); transform: scale(1) rotate(0deg); } @@ -224,7 +224,7 @@ .#{$prefix}--checkbox__validation-msg { display: none; align-items: flex-start; - margin-top: $spacing-02; + margin-block-start: $spacing-02; } .#{$prefix}--checkbox__invalid-icon { @@ -266,9 +266,9 @@ .#{$prefix}--form-requirement { display: block; overflow: visible; - max-height: 100%; - margin-top: 0; + margin-block-start: 0; margin-inline-start: $spacing-03; + max-block-size: 100%; } .#{$prefix}--checkbox-group--invalid @@ -332,11 +332,11 @@ .#{$prefix}--checkbox-label-text.#{$prefix}--skeleton { @include skeleton; - inline-size: convert.to-rem(100px); - block-size: $spacing-05; - // Add extra spacing when label is present margin: convert.to-rem(1px) 0 0 convert.to-rem(6px); + block-size: $spacing-05; + + inline-size: convert.to-rem(100px); } //----------------------------------------------- diff --git a/packages/styles/scss/components/code-snippet/_code-snippet.scss b/packages/styles/scss/components/code-snippet/_code-snippet.scss index 10a57941015e..55b30c294213 100644 --- a/packages/styles/scss/components/code-snippet/_code-snippet.scss +++ b/packages/styles/scss/components/code-snippet/_code-snippet.scss @@ -149,8 +149,8 @@ $copy-btn-feedback: $background-inverse !default; @include bx--snippet; display: flex; - block-size: $spacing-08; align-items: center; + block-size: $spacing-08; padding-inline-end: $spacing-08; } @@ -158,17 +158,17 @@ $copy-btn-feedback: $background-inverse !default; padding: 0; &::after { - right: $spacing-05; + inset-inline-end: $spacing-05; } } .#{$prefix}--snippet--single .#{$prefix}--snippet-container { position: relative; display: flex; - block-size: 100%; align-items: center; - padding-inline-start: $spacing-05; + block-size: 100%; overflow-x: auto; + padding-inline-start: $spacing-05; &:focus { @include focus-outline('outline'); @@ -198,9 +198,9 @@ $copy-btn-feedback: $background-inverse !default; //collapsed snippet container .#{$prefix}--snippet--multi .#{$prefix}--snippet-container { position: relative; - min-block-size: 100%; - max-height: 100%; order: 1; + max-block-size: 100%; + min-block-size: 100%; overflow-y: auto; transition: max-height $duration-moderate-01 motion(standard, productive); @@ -214,7 +214,7 @@ $copy-btn-feedback: $background-inverse !default; // expanded snippet container .#{$prefix}--snippet--multi.#{$prefix}--snippet--expand .#{$prefix}--snippet-container { - padding-bottom: $spacing-05; + padding-block-end: $spacing-05; transition: max-height $duration-moderate-01 motion(standard, productive); } @@ -225,9 +225,9 @@ $copy-btn-feedback: $background-inverse !default; // collapsed pre .#{$prefix}--snippet--multi .#{$prefix}--snippet-container pre { - padding-inline-end: $spacing-08; - padding-bottom: convert.to-rem(24px); overflow-x: auto; + padding-block-end: convert.to-rem(24px); + padding-inline-end: $spacing-08; } .#{$prefix}--snippet--multi.#{$prefix}--snippet--no-copy @@ -247,12 +247,12 @@ $copy-btn-feedback: $background-inverse !default; .#{$prefix}--snippet-container pre::after { position: absolute; - inset-block-start: 0; - right: 0; - inline-size: convert.to-rem(16px); - block-size: 100%; background-image: linear-gradient(to right, transparent, $layer); + block-size: 100%; content: ''; + inline-size: convert.to-rem(16px); + inset-block-start: 0; + inset-inline-end: 0; } .#{$prefix}--snippet--multi .#{$prefix}--snippet-container pre code { @@ -261,9 +261,9 @@ $copy-btn-feedback: $background-inverse !default; //Copy Button .#{$prefix}--snippet__icon { - inline-size: convert.to-rem(16px); block-size: convert.to-rem(16px); fill: $icon-primary; + inline-size: convert.to-rem(16px); transition: all $duration-fast-01 motion(standard, productive); } @@ -297,15 +297,15 @@ $copy-btn-feedback: $background-inverse !default; position: absolute; inset-block-start: 0; - right: 0; + inset-inline-end: 0; } // Overrides for codesnippet copy btn // TLDR: Copy/CopyButton now uses IconButton, which uses Carbon buttons under the hood // v10 Copy just used native html button so it didn't have extra carbon styles that needed overriding .#{$prefix}--snippet--inline.#{$prefix}--btn { - inline-size: initial; block-size: 1.25rem; + inline-size: initial; min-block-size: 1.25rem; padding-inline: 0; } @@ -318,7 +318,7 @@ $copy-btn-feedback: $background-inverse !default; .#{$prefix}--snippet.#{$prefix}--snippet--multi .#{$prefix}--popover-container { inset-block-start: 0.5rem; - right: 0.5rem; + inset-inline-end: 0.5rem; } .#{$prefix}--snippet--multi .#{$prefix}--copy-btn { @@ -332,16 +332,16 @@ $copy-btn-feedback: $background-inverse !default; position: absolute; z-index: 10; - right: 0; - inset-block-end: 0; display: inline-flex; - block-size: convert.to-rem(32px); align-items: center; padding: $spacing-03 $spacing-05; border: 0; background-color: $layer; + block-size: convert.to-rem(32px); color: $text-primary; + inset-block-end: 0; + inset-inline-end: 0; } .#{$prefix}--snippet-btn--expand .#{$prefix}--snippet-btn--text { @@ -354,8 +354,8 @@ $copy-btn-feedback: $background-inverse !default; } .#{$prefix}--snippet-btn--expand .#{$prefix}--icon-chevron--down { - margin-inline-start: $spacing-03; fill: $icon-primary; + margin-inline-start: $spacing-03; transform: rotate(0deg); transition: $duration-moderate-01 motion(standard, productive); } @@ -416,14 +416,14 @@ $copy-btn-feedback: $background-inverse !default; // Skeleton State .#{$prefix}--snippet.#{$prefix}--skeleton .#{$prefix}--snippet-container { - inline-size: 100%; block-size: 100%; + inline-size: 100%; } .#{$prefix}--snippet-button .#{$prefix}--btn--copy__feedback { // (The height of button) + (The height of the tooltip's triangle) + 4px inset-block-start: convert.to-rem(50.8px); - right: auto; + inset-inline-end: auto; inset-inline-start: 50%; &::before { @@ -446,7 +446,7 @@ $copy-btn-feedback: $background-inverse !default; // TODO: use updated global tooltip mixins under the hood // since all of the positioning values for the copy button tooltip are arbitrary hard coded rem values, we need this arbitrary 4px offset to keep the proper tooltip spacing according to the spec inset-block-start: calc(100% - #{convert.to-rem(4px)}); - right: auto; + inset-inline-end: auto; inset-inline-start: 50%; } @@ -454,42 +454,42 @@ $copy-btn-feedback: $background-inverse !default; .#{$prefix}--snippet__overflow-indicator--left, .#{$prefix}--snippet__overflow-indicator--right { z-index: 1; - inline-size: $spacing-05; flex: 1 0 auto; + inline-size: $spacing-05; } .#{$prefix}--snippet__overflow-indicator--left { order: 0; - margin-inline-end: -$spacing-05; background-image: linear-gradient(to left, transparent, $layer); + margin-inline-end: -$spacing-05; } .#{$prefix}--snippet__overflow-indicator--right { order: 2; - margin-inline-start: -$spacing-05; background-image: linear-gradient(to right, transparent, $layer); + margin-inline-start: -$spacing-05; } .#{$prefix}--snippet--single .#{$prefix}--snippet__overflow-indicator--right, .#{$prefix}--snippet--single .#{$prefix}--snippet__overflow-indicator--left { position: absolute; - inline-size: $spacing-07; block-size: calc(100% - #{$spacing-02}); + inline-size: $spacing-07; } .#{$prefix}--snippet--single .#{$prefix}--snippet__overflow-indicator--right { - right: $spacing-08; + inset-inline-end: $spacing-08; } .#{$prefix}--snippet--single.#{$prefix}--snippet--no-copy .#{$prefix}--snippet__overflow-indicator--right { - right: 0; + inset-inline-end: 0; } .#{$prefix}--snippet--single .#{$prefix}--snippet-container:focus ~ .#{$prefix}--snippet__overflow-indicator--right { - right: calc(#{$spacing-08} + #{convert.to-rem(2px)}); + inset-inline-end: calc(#{$spacing-08} + #{convert.to-rem(2px)}); } .#{$prefix}--snippet--single @@ -533,9 +533,9 @@ $copy-btn-feedback: $background-inverse !default; @include skeleton; display: block; - inline-size: 100%; block-size: 1rem; - margin-top: 0.5rem; + inline-size: 100%; + margin-block-start: 0.5rem; &:first-child { margin: 0; @@ -552,7 +552,7 @@ $copy-btn-feedback: $background-inverse !default; .#{$prefix}--snippet--single.#{$prefix}--skeleton .#{$prefix}--snippet-container { - padding-bottom: 0; + padding-block-end: 0; } // Windows HCM fix diff --git a/packages/styles/scss/components/code-snippet/_mixins.scss b/packages/styles/scss/components/code-snippet/_mixins.scss index c427a4d29bdb..fc3f77c1243b 100644 --- a/packages/styles/scss/components/code-snippet/_mixins.scss +++ b/packages/styles/scss/components/code-snippet/_mixins.scss @@ -16,7 +16,7 @@ @include type-style('code-01'); position: relative; - inline-size: 100%; - max-width: convert.to-rem(768px); background-color: $layer; + inline-size: 100%; + max-inline-size: convert.to-rem(768px); } diff --git a/packages/styles/scss/components/combo-box/_combo-box.scss b/packages/styles/scss/components/combo-box/_combo-box.scss index 3bf28cb775c0..9f246e9b552e 100644 --- a/packages/styles/scss/components/combo-box/_combo-box.scss +++ b/packages/styles/scss/components/combo-box/_combo-box.scss @@ -29,7 +29,7 @@ .#{$prefix}--combo-box.#{$prefix}--list-box--expanded .#{$prefix}--text-input { - border-bottom-color: $border-subtle; + border-block-end-color: $border-subtle; } .#{$prefix}--combo-box--input--focus.#{$prefix}--text-input { @@ -55,7 +55,7 @@ } .#{$prefix}--combo-box--readonly .#{$prefix}--text-input { - border-bottom-color: $border-subtle; + border-block-end-color: $border-subtle; } .#{$prefix}--combo-box--readonly .#{$prefix}--list-box__menu-icon, diff --git a/packages/styles/scss/components/combo-button/_combo-button.scss b/packages/styles/scss/components/combo-button/_combo-button.scss index 20a02ce0ac78..7e5396699b89 100644 --- a/packages/styles/scss/components/combo-button/_combo-button.scss +++ b/packages/styles/scss/components/combo-button/_combo-button.scss @@ -29,7 +29,7 @@ @each $size, $trigger in $triggerSizes { .#{$prefix}--combo-button__container--#{$size} .#{$prefix}--combo-button__primary-action { - min-width: 10rem - convert.to-rem(1px) - $trigger; + min-inline-size: 10rem - convert.to-rem(1px) - $trigger; } } diff --git a/packages/styles/scss/components/contained-list/_contained-list.scss b/packages/styles/scss/components/contained-list/_contained-list.scss index 6b5d130595b4..32be3c64c778 100644 --- a/packages/styles/scss/components/contained-list/_contained-list.scss +++ b/packages/styles/scss/components/contained-list/_contained-list.scss @@ -36,9 +36,9 @@ .#{$prefix}--contained-list__header { position: sticky; z-index: 1; - inset-block-start: 0; display: flex; align-items: center; + inset-block-start: 0; padding-inline: layout.density('padding-inline'); } @@ -57,8 +57,8 @@ } .#{$prefix}--contained-list .#{$prefix}--search .#{$prefix}--search-input { - border-block-end: 1px solid $border-subtle; background-color: $background; + border-block-end: 1px solid $border-subtle; } .#{$prefix}--contained-list @@ -101,9 +101,10 @@ .#{$prefix}--contained-list--on-page .#{$prefix}--contained-list__header { @include type-style('heading-compact-01'); + background-color: $background; + block-size: layout.size('height'); border-block-end: 1px solid $border-subtle; - background-color: $background; color: $text-primary; } @@ -124,8 +125,9 @@ .#{$prefix}--contained-list--disclosed .#{$prefix}--contained-list__header { @include type-style('label-01'); - block-size: $spacing-07; background-color: $layer; + + block-size: $spacing-07; color: $text-secondary; } @@ -138,7 +140,7 @@ } .#{$prefix}--contained-list-item:not(:first-of-type) { - margin-top: -1px; + margin-block-start: -1px; } .#{$prefix}--contained-list-item__content { @@ -167,25 +169,26 @@ @include type-style('body-01'); - min-block-size: layout.size('height'); padding: calc(calc((#{layout.size('height')} - var(--temp-1lh)) / 2)) layout.density('padding-inline'); color: $text-primary; + + min-block-size: layout.size('height'); } .#{$prefix}--contained-list-item:not(:last-of-type)::before { position: absolute; - right: 0; - inset-block-end: 0; - inset-inline-start: 0; - block-size: 1px; background-color: $border-subtle; + block-size: 1px; content: ''; + inset-block-end: 0; + inset-inline-end: 0; + inset-inline-start: 0; } .#{$prefix}--contained-list--inset-rulers .#{$prefix}--contained-list-item:not(:last-of-type)::before { - right: layout.density('padding-inline'); + inset-inline-end: layout.density('padding-inline'); inset-inline-start: layout.density('padding-inline'); } @@ -227,11 +230,11 @@ .#{$prefix}--contained-list__action, .#{$prefix}--contained-list-item__action { position: absolute; - inset-block-start: 0; - right: 0; - inset-inline-start: 0; display: flex; justify-content: flex-end; + inset-block-start: 0; + inset-inline-end: 0; + inset-inline-start: 0; pointer-events: none; } diff --git a/packages/styles/scss/components/content-switcher/_content-switcher.scss b/packages/styles/scss/components/content-switcher/_content-switcher.scss index edca2fd42752..a20ec0ba189d 100644 --- a/packages/styles/scss/components/content-switcher/_content-switcher.scss +++ b/packages/styles/scss/components/content-switcher/_content-switcher.scss @@ -22,9 +22,9 @@ @include layout.use('density', $default: 'normal'); display: flex; - inline-size: 100%; - block-size: layout.size('height'); justify-content: space-evenly; + block-size: layout.size('height'); + inline-size: 100%; } .#{$prefix}--content-switcher-btn { @@ -37,25 +37,25 @@ display: inline-flex; overflow: hidden; border: none; - border-top: convert.to-rem(1px) solid $border-inverse; - border-block-end: convert.to-rem(1px) solid $border-inverse; margin: 0; background-color: transparent; + border-block-end: convert.to-rem(1px) solid $border-inverse; + border-block-start: convert.to-rem(1px) solid $border-inverse; color: $text-secondary; - text-align: left; + text-align: start; text-decoration: none; transition: all $duration-moderate-01 motion(standard, productive); white-space: nowrap; &::after { position: absolute; - inset-block-start: 0; - inset-inline-start: 0; display: block; - inline-size: 100%; - block-size: 100%; background-color: $layer-selected-inverse; + block-size: 100%; content: ''; + inline-size: 100%; + inset-block-start: 0; + inset-inline-start: 0; transform: scaleY(0); transform-origin: bottom; transition: all $duration-moderate-01 motion(standard, productive); @@ -109,16 +109,16 @@ .#{$prefix}--content-switcher:not(.#{$prefix}--content-switcher--icon-only) .#{$prefix}--content-switcher-btn { - inline-size: 100%; align-items: center; padding: $spacing-03 layout.density('padding-inline'); + inline-size: 100%; } .#{$prefix}--content-switcher:not(.#{$prefix}--content-switcher--icon-only) .#{$prefix}--content-switcher-btn:first-child { + border-end-start-radius: convert.to-rem(4px); border-inline-start: convert.to-rem(1px) solid $border-inverse; - border-bottom-left-radius: convert.to-rem(4px); - border-top-left-radius: convert.to-rem(4px); + border-start-start-radius: convert.to-rem(4px); &:disabled { border-color: $border-disabled; @@ -128,9 +128,9 @@ .#{$prefix}--content-switcher:not(.#{$prefix}--content-switcher--icon-only) .#{$prefix}--content-switcher-btn:last-child { + border-end-end-radius: convert.to-rem(4px); border-inline-end: convert.to-rem(1px) solid $border-inverse; - border-bottom-right-radius: convert.to-rem(4px); - border-top-right-radius: convert.to-rem(4px); + border-start-end-radius: convert.to-rem(4px); &:disabled { border-color: $border-disabled; @@ -150,12 +150,12 @@ .#{$prefix}--content-switcher-btn::before { position: absolute; z-index: 2; - inset-inline-start: 0; display: block; - inline-size: convert.to-rem(1px); - block-size: convert.to-rem(16px); background-color: $border-subtle; + block-size: convert.to-rem(16px); content: ''; + inline-size: convert.to-rem(1px); + inset-inline-start: 0; } .#{$prefix}--content-switcher:not(.#{$prefix}--content-switcher--icon-only) @@ -200,7 +200,7 @@ .#{$prefix}--content-switcher__label { z-index: 1; overflow: hidden; - max-width: 100%; + max-inline-size: 100%; text-overflow: ellipsis; white-space: nowrap; } @@ -244,9 +244,9 @@ .#{$prefix}--content-switcher--icon-only .#{$prefix}--content-switcher-popover__wrapper:first-child .#{$prefix}--content-switcher-btn { + border-end-start-radius: convert.to-rem(4px); border-inline-start: convert.to-rem(1px) solid $border-inverse; - border-bottom-left-radius: convert.to-rem(4px); - border-top-left-radius: convert.to-rem(4px); + border-start-start-radius: convert.to-rem(4px); } .#{$prefix}--content-switcher--icon-only @@ -261,9 +261,9 @@ .#{$prefix}--content-switcher--icon-only .#{$prefix}--content-switcher-popover__wrapper:last-child .#{$prefix}--content-switcher-btn { + border-end-end-radius: convert.to-rem(4px); border-inline-end: convert.to-rem(1px) solid $border-inverse; - border-bottom-right-radius: convert.to-rem(4px); - border-top-right-radius: convert.to-rem(4px); + border-start-end-radius: convert.to-rem(4px); } .#{$prefix}--content-switcher--icon-only @@ -282,8 +282,8 @@ } .#{$prefix}--content-switcher--lg .#{$prefix}--content-switcher-btn svg { - inline-size: 20px; block-size: 20px; + inline-size: 20px; } .#{$prefix}--content-switcher--icon-only diff --git a/packages/styles/scss/components/data-table/_data-table.scss b/packages/styles/scss/components/data-table/_data-table.scss index 8fe29dba585b..808f5f1305ba 100644 --- a/packages/styles/scss/components/data-table/_data-table.scss +++ b/packages/styles/scss/components/data-table/_data-table.scss @@ -59,11 +59,11 @@ color: $text-secondary; @include breakpoint(md) { - max-width: 50ch; + max-inline-size: 50ch; } @include breakpoint(lg) { - max-width: 80ch; + max-inline-size: 80ch; } } @@ -71,9 +71,9 @@ // Data table //---------------------------------------------------------------------------- .#{$prefix}--data-table { - inline-size: 100%; border-collapse: collapse; border-spacing: 0; + inline-size: 100%; } .#{$prefix}--data-table thead { @@ -85,14 +85,15 @@ .#{$prefix}--data-table tbody { @include type-style('body-compact-01'); - inline-size: 100%; background-color: $layer; + + inline-size: 100%; } .#{$prefix}--data-table tr { - inline-size: 100%; - block-size: $spacing-09; border: none; + block-size: $spacing-09; + inline-size: 100%; } .#{$prefix}--data-table tbody tr, @@ -107,9 +108,9 @@ .#{$prefix}--data-table tbody tr:hover td, .#{$prefix}--data-table tbody tr:hover th { - border-top: 1px solid $layer-hover; - border-block-end: 1px solid $layer-hover; background: $layer-hover; + border-block-end: 1px solid $layer-hover; + border-block-start: 1px solid $layer-hover; color: $text-primary; } @@ -123,15 +124,15 @@ .#{$prefix}--data-table th, .#{$prefix}--data-table td { - text-align: left; + text-align: start; vertical-align: middle; } .#{$prefix}--data-table.#{$prefix}--data-table--top-aligned-body { &.#{$prefix}--data-table--lg tr:not([data-child-row]) td:not(.#{$prefix}--table-expand) { + padding-block-end: $spacing-05; padding-block-start: $spacing-05; - padding-bottom: $spacing-05; &.#{$prefix}--table-column-menu { padding-block-start: $spacing-03; @@ -150,8 +151,8 @@ .#{$prefix}--data-table.#{$prefix}--data-table--top-aligned-header { &.#{$prefix}--data-table--lg th:not(.#{$prefix}--table-expand):not(.#{$prefix}--table-sort__header) { + padding-block-end: $spacing-05; padding-block-start: $spacing-05; - padding-bottom: $spacing-05; &.#{$prefix}--table-column-menu { padding-block-start: $spacing-03; @@ -169,7 +170,7 @@ .#{$prefix}--data-table th[align='right'], .#{$prefix}--data-table td[align='right'] { - text-align: right; + text-align: end; } .#{$prefix}--data-table th[align='center'], @@ -178,10 +179,10 @@ } .#{$prefix}--data-table th { - padding-inline-end: $spacing-05; - padding-inline-start: $spacing-05; background-color: $layer-accent; color: $text-primary; + padding-inline-end: $spacing-05; + padding-inline-start: $spacing-05; } .#{$prefix}--data-table th:last-of-type { @@ -191,17 +192,17 @@ } .#{$prefix}--data-table .#{$prefix}--table-header-label { - text-align: left; + text-align: start; } .#{$prefix}--data-table td, .#{$prefix}--data-table tbody th { - padding-inline-end: $spacing-05; - padding-inline-start: $spacing-05; - border-top: 1px solid $layer; - border-block-end: 1px solid $border-subtle; background: $layer; + border-block-end: 1px solid $border-subtle; + border-block-start: 1px solid $layer; color: $text-secondary; + padding-inline-end: $spacing-05; + padding-inline-start: $spacing-05; + td:first-of-type { padding-inline-start: $spacing-04; @@ -312,8 +313,8 @@ .#{$prefix}--data-table--xs td.#{$prefix}--table-column-menu, .#{$prefix}--data-table--sm td.#{$prefix}--table-column-menu { block-size: convert.to-rem(24px); + padding-block-end: 0; padding-block-start: 0; - padding-bottom: 0; } .#{$prefix}--data-table--sm td.#{$prefix}--table-column-menu { @@ -343,18 +344,18 @@ tbody tr:not(.#{$prefix}--parent-row):nth-child(even) td { - border-top: 1px solid $layer-accent; - border-block-end: 1px solid $layer-accent; background-color: $layer-accent; + border-block-end: 1px solid $layer-accent; + border-block-start: 1px solid $layer-accent; } .#{$prefix}--data-table--zebra tbody tr:not(.#{$prefix}--parent-row):hover td { - border-top: 1px solid $layer-hover; - border-block-end: 1px solid $layer-hover; background-color: $layer-hover; + border-block-end: 1px solid $layer-hover; + border-block-start: 1px solid $layer-hover; } //---------------------------------------------------------------------------- @@ -367,8 +368,8 @@ .#{$prefix}--data-table th.#{$prefix}--table-column-checkbox { // Do not use `position: relative`, as its behavior is undefined for many table elements: https://www.w3.org/TR/CSS21/visuren.html#propdef-position position: static; - inline-size: convert.to-rem(32px); background: $layer-accent; + inline-size: convert.to-rem(32px); transition: background-color $duration-fast-01 motion(entrance, productive); } @@ -376,12 +377,12 @@ .#{$prefix}--data-table tbody td.#{$prefix}--table-column-checkbox, .#{$prefix}--data-table thead th.#{$prefix}--table-expand, .#{$prefix}--data-table tbody td.#{$prefix}--table-expand { - min-width: 0; + min-inline-size: 0; } .#{$prefix}--data-table thead th.#{$prefix}--table-column-checkbox, .#{$prefix}--data-table tbody td.#{$prefix}--table-column-checkbox { - min-width: 2.5rem; + min-inline-size: 2.5rem; // spacing between checkbox / chevron and next cell should be 8px / 0.5rem padding-inline-end: convert.to-rem(4px); padding-inline-start: 1rem; @@ -389,37 +390,37 @@ .#{$prefix}--data-table thead th.#{$prefix}--table-expand, .#{$prefix}--data-table tbody td.#{$prefix}--table-expand { - inline-size: convert.to-rem(32px); block-size: convert.to-rem(32px); + inline-size: convert.to-rem(32px); } .#{$prefix}--data-table--xs thead th.#{$prefix}--table-expand, .#{$prefix}--data-table--xs tbody td.#{$prefix}--table-expand { - inline-size: convert.to-rem(24px); - block-size: convert.to-rem(24px); padding: 0 0 0 0.5rem; + block-size: convert.to-rem(24px); + inline-size: convert.to-rem(24px); } .#{$prefix}--data-table--sm thead th.#{$prefix}--table-expand, .#{$prefix}--data-table--sm tbody td.#{$prefix}--table-expand { - inline-size: convert.to-rem(32px); - block-size: convert.to-rem(32px); padding: 0; + block-size: convert.to-rem(32px); + inline-size: convert.to-rem(32px); padding-inline-start: 0.5rem; } .#{$prefix}--data-table--md thead th.#{$prefix}--table-expand, .#{$prefix}--data-table--md tbody td.#{$prefix}--table-expand { - inline-size: convert.to-rem(40px); - block-size: convert.to-rem(40px); padding: convert.to-rem(4px) 0 convert.to-rem(4px) convert.to-rem(8px); + block-size: convert.to-rem(40px); + inline-size: convert.to-rem(40px); } .#{$prefix}--data-table--xl thead th.#{$prefix}--table-expand, .#{$prefix}--data-table--xl tbody td.#{$prefix}--table-expand { block-size: convert.to-rem(64px); + padding-block-end: convert.to-rem(22px); padding-block-start: convert.to-rem(10px); - padding-bottom: convert.to-rem(22px); } .#{$prefix}--data-table--xl .#{$prefix}--table-column-checkbox { @@ -447,10 +448,10 @@ tr:nth-child(odd).#{$prefix}--data-table--selected td, tr.#{$prefix}--data-table--selected td { - border-top: 1px solid $layer-selected; + background-color: $layer-selected; // Bottom border acts as separator from other rows border-block-end: 1px solid $layer-active; - background-color: $layer-selected; + border-block-start: 1px solid $layer-selected; color: $text-primary; } @@ -461,7 +462,7 @@ td, tr.#{$prefix}--data-table--selected:first-of-type td { // Top border acts as separator from thead - border-top: 1px solid $border-subtle-selected; + border-block-start: 1px solid $border-subtle-selected; } // last row + zebra select last @@ -474,9 +475,9 @@ tr:last-of-type:nth-child(even).#{$prefix}--data-table--selected td, tr.#{$prefix}--data-table--selected:last-of-type td { - // Doesn't need separators - border-top: 1px solid $layer-selected; border-block-end: 1px solid $layer-selected; + // Doesn't need separators + border-block-start: 1px solid $layer-selected; } // zebra select - odd child @@ -500,9 +501,9 @@ tr:nth-child(odd).#{$prefix}--data-table--selected:hover td, .#{$prefix}--data-table tbody .#{$prefix}--data-table--selected:hover td { - border-top: 1px solid $data-table-column-hover; - border-block-end: 1px solid $data-table-column-hover; background: $data-table-column-hover; + border-block-end: 1px solid $data-table-column-hover; + border-block-start: 1px solid $data-table-column-hover; color: $text-primary; } @@ -523,19 +524,19 @@ } .#{$prefix}--data-table--xs .#{$prefix}--table-header-label { + padding-block-end: convert.to-rem(2px); padding-block-start: convert.to-rem(2px); - padding-bottom: convert.to-rem(2px); } .#{$prefix}--data-table--xs td, .#{$prefix}--data-table--xs tbody tr th { + padding-block-end: convert.to-rem(2px); padding-block-start: convert.to-rem(2px); - padding-bottom: convert.to-rem(2px); } .#{$prefix}--data-table--xs .#{$prefix}--overflow-menu { - inline-size: convert.to-rem(32px); block-size: calc(100% + 1px); + inline-size: convert.to-rem(32px); } .#{$prefix}--data-table.#{$prefix}--data-table--xs:not( @@ -546,8 +547,8 @@ .#{$prefix}--data-table--top-aligned-header ) th.#{$prefix}--table-column-checkbox { + padding-block-end: 0; padding-block-start: 0; - padding-bottom: 0; } .#{$prefix}--data-table.#{$prefix}--data-table--xs @@ -568,16 +569,16 @@ } .#{$prefix}--data-table--sm .#{$prefix}--table-header-label { + padding-block-end: convert.to-rem(7px); padding-block-start: convert.to-rem(7px); - padding-bottom: convert.to-rem(7px); } .#{$prefix}--data-table--sm td, .#{$prefix}--data-table--sm tbody tr th, .#{$prefix}--data-table--sm.#{$prefix}--data-table--top-aligned-header th.#{$prefix}--table-column-checkbox { + padding-block-end: convert.to-rem(6px); padding-block-start: convert.to-rem(7px); - padding-bottom: convert.to-rem(6px); } .#{$prefix}--data-table.#{$prefix}--data-table--sm:not( @@ -588,8 +589,8 @@ .#{$prefix}--data-table--top-aligned-header ) th.#{$prefix}--table-column-checkbox { + padding-block-end: convert.to-rem(3px); padding-block-start: convert.to-rem(3px); - padding-bottom: convert.to-rem(3px); } .#{$prefix}--data-table--sm .#{$prefix}--overflow-menu { @@ -608,14 +609,14 @@ .#{$prefix}--data-table--md .#{$prefix}--table-header-label, .#{$prefix}--data-table--md.#{$prefix}--data-table--top-aligned-header th.#{$prefix}--table-column-checkbox { + padding-block-end: convert.to-rem(7px); padding-block-start: convert.to-rem(7px); - padding-bottom: convert.to-rem(7px); } .#{$prefix}--data-table--md td, .#{$prefix}--data-table--md tbody tr th { + padding-block-end: convert.to-rem(6px); padding-block-start: convert.to-rem(7px); - padding-bottom: convert.to-rem(6px); } .#{$prefix}--data-table.#{$prefix}--data-table--md:not( @@ -626,13 +627,13 @@ .#{$prefix}--data-table--top-aligned-header ) th.#{$prefix}--table-column-checkbox { + padding-block-end: convert.to-rem(3px); padding-block-start: convert.to-rem(3px); - padding-bottom: convert.to-rem(3px); } .#{$prefix}--data-table--md .#{$prefix}--table-column-menu { + padding-block-end: convert.to-rem(3px); padding-block-start: convert.to-rem(3px); - padding-bottom: convert.to-rem(3px); } //---------------------------------------------------------------------------- @@ -645,14 +646,14 @@ } .#{$prefix}--data-table--xl .#{$prefix}--table-header-label { + padding-block-end: $spacing-05; padding-block-start: $spacing-05; - padding-bottom: $spacing-05; } .#{$prefix}--data-table--xl td, .#{$prefix}--data-table--xl tbody tr th { + padding-block-end: $spacing-05; padding-block-start: $spacing-05; - padding-bottom: $spacing-05; } .#{$prefix}--data-table--xl th, @@ -698,9 +699,9 @@ thead { position: sticky; z-index: 1; - inset-block-start: 0; overflow: scroll; inline-size: 100%; + inset-block-start: 0; // Hides ie scrollbar -ms-overflow-style: none; will-change: transform; @@ -728,7 +729,7 @@ } .#{$prefix}--table-expand { - max-width: convert.to-rem(48px); + max-inline-size: convert.to-rem(48px); } thead .#{$prefix}--table-expand { @@ -753,7 +754,7 @@ tr.#{$prefix}--parent-row.#{$prefix}--expandable-row:hover + tr[data-child-row] td { - border-top: 1px solid $layer-hover; + border-block-start: 1px solid $layer-hover; } tr.#{$prefix}--expandable-row:last-of-type { @@ -761,15 +762,15 @@ } tr.#{$prefix}--data-table--selected:first-of-type td { - border-top: none; + border-block-start: none; } // Selectable fix thead th.#{$prefix}--table-column-checkbox, tbody tr td.#{$prefix}--table-column-checkbox { - inline-size: convert.to-rem(36px); - min-width: convert.to-rem(36px); align-items: center; + inline-size: convert.to-rem(36px); + min-inline-size: convert.to-rem(36px); } &.#{$prefix}--data-table--xl thead th.#{$prefix}--table-column-checkbox, @@ -780,16 +781,16 @@ // Overflow fix /* When using sticky header, with a selection element in the first column, we need to set the last item to a fixed width to match the table body. We only want this to happen when the last table header does not have any text */ th.#{$prefix}--table-column-checkbox ~ th:last-of-type:empty { - max-width: convert.to-rem(64px); + max-inline-size: convert.to-rem(64px); } th:empty:not(.#{$prefix}--table-expand) { - max-width: 2.25rem; + max-inline-size: 2.25rem; } td.#{$prefix}--table-column-menu { - block-size: auto; align-items: center; + block-size: auto; padding-block-start: 0; } @@ -818,7 +819,7 @@ .#{$prefix}--table-column-menu ):not(.#{$prefix}--table-expand):not(.#{$prefix}--table-column-icon) { inline-size: 100%; - min-width: 0; + min-inline-size: 0; } &.#{$prefix}--data-table--xs tr:not(.#{$prefix}--expandable-row), @@ -851,21 +852,21 @@ .#{$prefix}--table-header-label { @include text-overflow; - max-width: calc(100% - 10px); + max-inline-size: calc(100% - 10px); + overflow-y: hidden; + padding-block-end: 1rem; // Needed to reduce 1px jump when toggling between variations padding-block-start: convert.to-rem(15px); - padding-bottom: 1rem; - overflow-y: hidden; } &.#{$prefix}--data-table--xs th .#{$prefix}--table-header-label { + padding-block-end: 0; padding-block-start: convert.to-rem(3px); - padding-bottom: 0; } &.#{$prefix}--data-table--sm th .#{$prefix}--table-header-label { + padding-block-end: 0; padding-block-start: convert.to-rem(8px); - padding-bottom: 0; } &.#{$prefix}--data-table--xl th .#{$prefix}--table-header-label { diff --git a/packages/styles/scss/components/data-table/_mixins.scss b/packages/styles/scss/components/data-table/_mixins.scss index ed065fac61ad..9c7f305e1c7c 100644 --- a/packages/styles/scss/components/data-table/_mixins.scss +++ b/packages/styles/scss/components/data-table/_mixins.scss @@ -19,11 +19,11 @@ $max-height: convert.to-rem(300px) ) { .#{$prefix}--data-table--max-width { - max-width: $max-width; + max-inline-size: $max-width; } .#{$prefix}--data-table--sticky-header { - max-height: $max-height; + max-block-size: $max-height; @if $min-width { th:not(.#{$prefix}--table-column-checkbox):not( @@ -32,7 +32,7 @@ td:not(.#{$prefix}--table-column-checkbox):not( .#{$prefix}--table-column-menu ):not(.#{$prefix}--table-expand):not(.#{$prefix}--table-column-icon) { - min-width: $min-width; + min-inline-size: $min-width; } } } diff --git a/packages/styles/scss/components/data-table/action/_data-table-action.scss b/packages/styles/scss/components/data-table/action/_data-table-action.scss index 40f7f01483a5..8a7c49b32599 100644 --- a/packages/styles/scss/components/data-table/action/_data-table-action.scss +++ b/packages/styles/scss/components/data-table/action/_data-table-action.scss @@ -29,16 +29,16 @@ position: relative; z-index: 1; display: flex; + background-color: $layer; inline-size: 100%; min-block-size: $spacing-09; - background-color: $layer; } .#{$prefix}--toolbar-content { display: flex; - inline-size: 100%; - block-size: $spacing-09; justify-content: flex-end; + block-size: $spacing-09; + inline-size: 100%; transform: translate3d(0, 0, 0); transition: transform $duration-fast-02 motion(standard, productive), clip-path $duration-fast-02 motion(standard, productive); @@ -49,15 +49,15 @@ } .#{$prefix}--toolbar-content .#{$prefix}--search .#{$prefix}--search-input { - block-size: 3rem; padding: 0 3rem; // For toolbar animation with (esp.) persistent search box background-color: transparent; + block-size: 3rem; } .#{$prefix}--toolbar-content .#{$prefix}--overflow-menu { - inline-size: 3rem; block-size: 3rem; + inline-size: 3rem; } //------------------------------------------------- @@ -75,10 +75,10 @@ //------------------------------------------------- .#{$prefix}--toolbar-search-container-expandable { position: relative; - inline-size: $spacing-09; block-size: $spacing-09; box-shadow: none; cursor: pointer; + inline-size: $spacing-09; transition: width $transition-expansion $standard-easing, background-color $duration-fast-02 motion(entrance, productive); @@ -115,13 +115,13 @@ .#{$prefix}--toolbar-search-container-expandable.#{$prefix}--search .#{$prefix}--search-close { - inline-size: $spacing-09; block-size: $spacing-09; + inline-size: $spacing-09; &::before { - inset-block-start: convert.to-rem(2px); - block-size: calc(100% - #{convert.to-rem(4px)}); background-color: $field-hover; + block-size: calc(100% - #{convert.to-rem(4px)}); + inset-block-start: convert.to-rem(2px); } } @@ -171,9 +171,9 @@ .#{$prefix}--toolbar-search-container-expandable .#{$prefix}--search-magnifier-icon { - inline-size: $spacing-09; - block-size: $spacing-09; padding: $spacing-05; + block-size: $spacing-09; + inline-size: $spacing-09; } .#{$prefix}--toolbar-search-container-expandable.#{$prefix}--search--disabled @@ -250,10 +250,10 @@ @include button-reset.reset; display: flex; - inline-size: $spacing-09; - block-size: $spacing-09; padding: $spacing-05; + block-size: $spacing-09; cursor: pointer; + inline-size: $spacing-09; transition: background $duration-fast-02 motion(entrance, productive); } @@ -262,9 +262,9 @@ @include button-reset.reset; display: flex; - inline-size: $spacing-09; block-size: $spacing-09; cursor: pointer; + inline-size: $spacing-09; transition: background $duration-fast-02 motion(entrance, productive); } @@ -296,8 +296,8 @@ } .#{$prefix}--toolbar-action ~ .#{$prefix}--btn { - max-width: none; margin: 0; + max-inline-size: none; white-space: nowrap; } @@ -309,10 +309,10 @@ //TOOLBAR BUTTON ICONS //------------------------------------------------- .#{$prefix}--toolbar-action__icon { - inline-size: auto; - max-width: $spacing-05; block-size: $spacing-05; fill: $icon-primary; + inline-size: auto; + max-inline-size: $spacing-05; } //------------------------------------------------- @@ -320,8 +320,8 @@ //------------------------------------------------- .#{$prefix}--toolbar-search-container-persistent { position: relative; - inline-size: 100%; block-size: $spacing-09; + inline-size: 100%; opacity: 1; } @@ -341,9 +341,9 @@ } .#{$prefix}--toolbar-search-container-persistent .#{$prefix}--search-input { - block-size: $spacing-09; padding: 0 $spacing-09; border: none; + block-size: $spacing-09; } .#{$prefix}--toolbar-search-container-persistent @@ -364,8 +364,8 @@ } .#{$prefix}--toolbar-search-container-persistent .#{$prefix}--search-close { - inline-size: $spacing-09; block-size: $spacing-09; + inline-size: $spacing-09; } .#{$prefix}--batch-actions--active ~ .#{$prefix}--toolbar-search-container, @@ -381,14 +381,14 @@ //------------------------------------------------- .#{$prefix}--batch-actions { position: absolute; - right: 0; - inset-block-end: 0; - inset-inline-start: 0; display: flex; align-items: center; justify-content: space-between; background-color: $background-brand; clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); + inset-block-end: 0; + inset-inline-end: 0; + inset-inline-start: 0; opacity: 0; pointer-events: none; transform: translate3d(0, 48px, 0); @@ -417,9 +417,9 @@ } .#{$prefix}--action-list .#{$prefix}--btn { + color: $text-on-color; padding-inline-end: $spacing-05; padding-inline-start: $spacing-05; - color: $text-on-color; white-space: nowrap; } @@ -432,8 +432,8 @@ .#{$prefix}--action-list .#{$prefix}--btn .#{$prefix}--btn__icon { position: static; - margin-inline-start: $spacing-03; fill: $icon-on-color; + margin-inline-start: $spacing-03; } .#{$prefix}--action-list .#{$prefix}--btn .#{$prefix}--btn__icon .st0 { @@ -470,15 +470,15 @@ .#{$prefix}--btn--primary.#{$prefix}--batch-summary__cancel::before { position: absolute; - //visually 16px spacing is 1px too low - inset-block-start: convert.to-rem(15px); - inset-inline-start: 0; display: block; - inline-size: convert.to-rem(1px); - block-size: $spacing-05; border: none; background-color: $text-on-color; + block-size: $spacing-05; content: ''; + inline-size: convert.to-rem(1px); + //visually 16px spacing is 1px too low + inset-block-start: convert.to-rem(15px); + inset-inline-start: 0; opacity: 1; transition: opacity $duration-fast-02 motion(standard, productive); } @@ -492,14 +492,14 @@ .#{$prefix}--batch-summary { position: sticky; z-index: 100000; - inset-inline-start: 0; display: flex; - min-block-size: 3rem; align-items: center; padding: 0 $spacing-05; background-color: $background-brand; color: $text-on-color; + inset-inline-start: 0; + min-block-size: 3rem; } .#{$prefix}--batch-summary__scroll { @@ -534,17 +534,17 @@ .#{$prefix}--toolbar-search-container-expandable .#{$prefix}--search-close, .#{$prefix}--toolbar-search-container-persistent .#{$prefix}--search-close { - inline-size: convert.to-rem(32px); block-size: convert.to-rem(32px); + inline-size: convert.to-rem(32px); } .#{$prefix}--toolbar-search-container-expandable .#{$prefix}--search-magnifier-icon, .#{$prefix}--toolbar-search-container-persistent .#{$prefix}--search-magnifier-icon { - inline-size: convert.to-rem(32px); - block-size: convert.to-rem(32px); padding: $spacing-03; + block-size: convert.to-rem(32px); + inline-size: convert.to-rem(32px); } .#{$prefix}--toolbar-action.#{$prefix}--toolbar-search-container-persistent { @@ -598,10 +598,10 @@ } .#{$prefix}--overflow-menu.#{$prefix}--toolbar-action { + block-size: convert.to-rem(32px); inline-size: convert.to-rem(32px); //:after element is 2rem but w/o this trigger button is for some reason 28px - min-width: convert.to-rem(32px); - block-size: convert.to-rem(32px); + min-inline-size: convert.to-rem(32px); } .#{$prefix}--toolbar-content { @@ -609,8 +609,8 @@ } .#{$prefix}--toolbar-content .#{$prefix}--overflow-menu { - inline-size: 2rem; block-size: 2rem; + inline-size: 2rem; } } @@ -629,16 +629,16 @@ } .#{$prefix}--table-toolbar--sm .#{$prefix}--toolbar-action { - inline-size: convert.to-rem(32px); - block-size: convert.to-rem(32px); padding: $spacing-03 0; + block-size: convert.to-rem(32px); + inline-size: convert.to-rem(32px); } .#{$prefix}--table-toolbar--sm .#{$prefix}--btn--primary { block-size: convert.to-rem(32px); min-block-size: auto; + padding-block-end: 0.375rem; padding-block-start: 0.375rem; - padding-bottom: 0.375rem; } .#{$prefix}--table-toolbar--sm diff --git a/packages/styles/scss/components/data-table/expandable/_data-table-expandable.scss b/packages/styles/scss/components/data-table/expandable/_data-table-expandable.scss index 42e47c8ed410..379a46fc2b12 100644 --- a/packages/styles/scss/components/data-table/expandable/_data-table-expandable.scss +++ b/packages/styles/scss/components/data-table/expandable/_data-table-expandable.scss @@ -24,7 +24,7 @@ //---------------------------------------------------------------------------- //first row top border .#{$prefix}--data-table tr.#{$prefix}--parent-row:first-of-type td { - border-top: 1px solid $border-subtle; + border-block-start: 1px solid $border-subtle; } //---------------------------------------------------------------------------- @@ -32,9 +32,9 @@ //---------------------------------------------------------------------------- // default styles .#{$prefix}--expandable-row--hidden td { - inline-size: auto; padding: $spacing-05; - border-top: 0; + border-block-start: 0; + inline-size: auto; } //child row hidden @@ -47,10 +47,10 @@ tr.#{$prefix}--parent-row:not(.#{$prefix}--expandable-row) + tr[data-child-row] td { - padding-block-start: 0; - padding-bottom: 0; border: 0; background-color: $layer-hover; + padding-block-end: 0; + padding-block-start: 0; transition: padding $duration-moderate-01 motion(standard, productive), background-color $duration-moderate-01 motion(standard, productive); } @@ -60,7 +60,7 @@ td .#{$prefix}--child-row-inner-container { overflow: hidden; - max-height: 0; + max-block-size: 0; } //child row visible @@ -69,8 +69,8 @@ } tr.#{$prefix}--parent-row.#{$prefix}--expandable-row + tr[data-child-row] td { - padding-inline-start: 3.5rem; border-block-end: 1px solid $border-subtle; + padding-inline-start: 3.5rem; transition: padding-bottom $duration-fast-02 motion(standard, productive), transform $duration-fast-02 motion(standard, productive), background-color $duration-fast-02 motion(standard, productive); @@ -80,7 +80,7 @@ + tr[data-child-row] td .#{$prefix}--child-row-inner-container { - max-height: 100%; + max-block-size: 100%; } // bottom border overrides @@ -114,15 +114,15 @@ // hovering on collapsed parent tr.#{$prefix}--parent-row:not(.#{$prefix}--expandable-row):first-of-type:hover td { - border-top: 1px solid $border-subtle; border-block-end: 1px solid $border-subtle; + border-block-start: 1px solid $border-subtle; } // hovering on expanded parent tr.#{$prefix}--parent-row.#{$prefix}--expandable-row:hover td { - border-top: 1px solid $border-subtle; - border-block-end: 1px solid $border-subtle; background-color: $layer-hover; + border-block-end: 1px solid $border-subtle; + border-block-start: 1px solid $border-subtle; color: $text-primary; } @@ -135,8 +135,8 @@ tr.#{$prefix}--parent-row.#{$prefix}--expandable-row:hover + tr[data-child-row] td { - border-block-end: 1px solid $border-subtle; background-color: $layer-hover; + border-block-end: 1px solid $border-subtle; color: $text-primary; } @@ -151,9 +151,9 @@ } tr.#{$prefix}--expandable-row--hover td { - border-top: 1px solid $border-subtle; - border-block-end: 1px solid $border-subtle; background-color: $layer-hover; + border-block-end: 1px solid $border-subtle; + border-block-start: 1px solid $border-subtle; color: $text-primary; } @@ -212,12 +212,12 @@ @include button-reset.reset('false'); display: inline-flex; - inline-size: 100%; - // Account for the border in `.bx--table-expand` - block-size: calc(100% + 1px); align-items: center; justify-content: center; padding: 0 $spacing-03; + // Account for the border in `.bx--table-expand` + block-size: calc(100% + 1px); + inline-size: 100%; vertical-align: inherit; } @@ -227,8 +227,8 @@ .#{$prefix}--data-table--top-aligned-header th .#{$prefix}--table-expand__button { - block-size: convert.to-rem(32px); align-items: start; + block-size: convert.to-rem(32px); padding-block-start: $spacing-03; } @@ -248,8 +248,8 @@ .#{$prefix}--data-table--top-aligned-header.#{$prefix}--data-table--md th .#{$prefix}--table-expand__button { + margin-block-start: -$spacing-02; padding-block-start: $spacing-03; - margin-top: -$spacing-02; } .#{$prefix}--table-expand__button:focus { @@ -272,12 +272,12 @@ td.#{$prefix}--table-expand + td::after { position: absolute; - inset-block-end: convert.to-rem(-1px); - inset-inline-start: 0; - inline-size: convert.to-rem(8px); - block-size: convert.to-rem(1px); background: $layer-accent; + block-size: convert.to-rem(1px); content: ''; + inline-size: convert.to-rem(8px); + inset-block-end: convert.to-rem(-1px); + inset-inline-start: 0; } tr.#{$prefix}--parent-row.#{$prefix}--expandable-row:hover @@ -305,9 +305,9 @@ .#{$prefix}--data-table--zebra tbody tr[data-parent-row]:nth-child(4n + 1) td, .#{$prefix}--data-table--zebra tbody tr[data-child-row]:nth-child(4n + 2) td { - border-top: 1px solid $layer-accent; - border-block-end: 1px solid $layer-accent; background-color: $layer-accent; + border-block-end: 1px solid $layer-accent; + border-block-start: 1px solid $layer-accent; } .#{$prefix}--data-table--zebra tr.#{$prefix}--parent-row td, @@ -327,17 +327,17 @@ + tr[data-child-row] td, .#{$prefix}--data-table--zebra tbody tr[data-child-row]:hover td { - border-top: 1px solid $layer-hover; - border-block-end: 1px solid $layer-hover; background-color: $layer-hover; + border-block-end: 1px solid $layer-hover; + border-block-start: 1px solid $layer-hover; } .#{$prefix}--data-table--zebra tr.#{$prefix}--parent-row.#{$prefix}--expandable-row.#{$prefix}--expandable-row--hover td { - border-top: 1px solid $layer-hover; - border-block-end: 1px solid $layer-hover; background: $layer-hover; + border-block-end: 1px solid $layer-hover; + border-block-start: 1px solid $layer-hover; } //---------------------------------------------------------------------------- @@ -345,22 +345,22 @@ //---------------------------------------------------------------------------- // Parent collapsed tr.#{$prefix}--parent-row.#{$prefix}--data-table--selected:first-of-type td { - border-top: 1px solid $layer-active; - border-block-end: 1px solid $border-subtle; background: $layer-selected; + border-block-end: 1px solid $border-subtle; + border-block-start: 1px solid $layer-active; box-shadow: 0 1px $layer-active; } tr.#{$prefix}--parent-row.#{$prefix}--data-table--selected td { - border-block-end: 1px solid transparent; background: $layer-selected; + border-block-end: 1px solid transparent; box-shadow: 0 1px $layer-active; color: $text-primary; } tr.#{$prefix}--parent-row.#{$prefix}--data-table--selected:last-of-type td { - border-block-end: 1px solid transparent; background: $layer-selected; + border-block-end: 1px solid transparent; box-shadow: 0 1px $border-subtle; } @@ -369,9 +369,9 @@ .#{$prefix}--expandable-row ):hover td { - border-top: 1px solid $layer-selected-hover; - border-block-end: 1px solid $border-subtle; background: $layer-selected-hover; + border-block-end: 1px solid $border-subtle; + border-block-start: 1px solid $layer-selected-hover; box-shadow: 0 1px $layer-selected-hover; } @@ -394,9 +394,9 @@ td, tr.#{$prefix}--parent-row.#{$prefix}--data-table--selected.#{$prefix}--expandable-row--hover td:first-of-type { - border-top: 1px solid $layer-selected-hover; - border-block-end: 1px solid transparent; background: $layer-selected-hover; + border-block-end: 1px solid transparent; + border-block-start: 1px solid $layer-selected-hover; box-shadow: 0 1px $layer-selected-hover; } @@ -404,9 +404,9 @@ tr.#{$prefix}--parent-row.#{$prefix}--data-table--selected.#{$prefix}--expandable-row + tr[data-child-row] td { - border-top: 1px solid $layer-active; - border-block-end: 1px solid $border-subtle; background-color: $layer-hover; + border-block-end: 1px solid $border-subtle; + border-block-start: 1px solid $layer-active; box-shadow: 0 1px $layer-active; color: $text-primary; } @@ -414,8 +414,8 @@ tr.#{$prefix}--parent-row.#{$prefix}--data-table--selected.#{$prefix}--expandable-row + tr[data-child-row]:last-of-type td { - padding-bottom: convert.to-rem(24px); box-shadow: inset 0 -1px $layer-active; + padding-block-end: convert.to-rem(24px); } // Child row expanded hover diff --git a/packages/styles/scss/components/data-table/skeleton/_data-table-skeleton.scss b/packages/styles/scss/components/data-table/skeleton/_data-table-skeleton.scss index 578ecd04ba6f..409c89e56b64 100644 --- a/packages/styles/scss/components/data-table/skeleton/_data-table-skeleton.scss +++ b/packages/styles/scss/components/data-table/skeleton/_data-table-skeleton.scss @@ -25,9 +25,9 @@ @include skeleton; display: block; + block-size: convert.to-rem(16px); inline-size: convert.to-rem(64px); - block-size: convert.to-rem(16px); } .#{$prefix}--data-table.#{$prefix}--skeleton tr:hover td { @@ -56,17 +56,19 @@ .#{$prefix}--data-table-header__title { @include skeleton; - inline-size: convert.to-rem(120px); block-size: convert.to-rem(24px); + + inline-size: convert.to-rem(120px); } .#{$prefix}--data-table-container.#{$prefix}--skeleton .#{$prefix}--data-table-header__description { @include skeleton; - inline-size: convert.to-rem(160px); block-size: convert.to-rem(16px); - margin-top: $spacing-03; + inline-size: convert.to-rem(160px); + + margin-block-start: $spacing-03; } } diff --git a/packages/styles/scss/components/data-table/sort/_data-table-sort.scss b/packages/styles/scss/components/data-table/sort/_data-table-sort.scss index b5ce560249af..aadabe3bf3f5 100644 --- a/packages/styles/scss/components/data-table/sort/_data-table-sort.scss +++ b/packages/styles/scss/components/data-table/sort/_data-table-sort.scss @@ -23,10 +23,10 @@ // ------------------------------------- .#{$prefix}--data-table--sort th, .#{$prefix}--data-table th[aria-sort] { - block-size: $spacing-09; padding: 0; - border-top: none; + block-size: $spacing-09; border-block-end: none; + border-block-start: none; } // hidden sort description @@ -41,16 +41,16 @@ @include button-reset.reset(false); display: flex; - inline-size: 100%; - min-block-size: 100%; align-items: center; justify-content: space-between; - padding-inline-start: $spacing-05; background-color: $layer-accent; color: $text-primary; font: inherit; + inline-size: 100%; line-height: 1; - text-align: left; + min-block-size: 100%; + padding-inline-start: $spacing-05; + text-align: start; transition: background-color $duration-fast-01 motion(entrance, productive), outline $duration-fast-01 motion(entrance, productive); } @@ -73,9 +73,9 @@ .#{$prefix}--data-table.#{$prefix}--data-table--sort th > .#{$prefix}--table-header-label { + line-height: 1; padding-inline-end: $spacing-05; padding-inline-start: $spacing-05; - line-height: 1; } // ------------------------------------- @@ -83,11 +83,11 @@ // ------------------------------------- th .#{$prefix}--table-sort__flex { display: flex; - inline-size: 100%; - block-size: 100%; - min-block-size: 3rem; align-items: center; justify-content: space-between; + block-size: 100%; + inline-size: 100%; + min-block-size: 3rem; } .#{$prefix}--data-table--top-aligned-header th .#{$prefix}--table-sort__flex { @@ -107,20 +107,20 @@ th.#{$prefix}--table-sort__header .#{$prefix}--table-sort__flex .#{$prefix}--table-header-label { + padding-block-end: 0; padding-block-start: 0; - padding-bottom: 0; } .#{$prefix}--data-table.#{$prefix}--data-table--top-aligned-header.#{$prefix}--data-table--sm th.#{$prefix}--table-sort__header { + padding-block-end: convert.to-rem(7px); padding-block-start: convert.to-rem(7px); - padding-bottom: convert.to-rem(7px); } .#{$prefix}--data-table.#{$prefix}--data-table--top-aligned-header.#{$prefix}--data-table--xs th.#{$prefix}--table-sort__header { + padding-block-end: convert.to-rem(2px); padding-block-start: convert.to-rem(2px); - padding-bottom: convert.to-rem(2px); } .#{$prefix}--data-table--sort:not(.#{$prefix}--data-table--xs):not( @@ -157,8 +157,8 @@ .#{$prefix}--data-table--xl.#{$prefix}--data-table--sort th .#{$prefix}--table-sort__flex { - min-block-size: 4rem; align-items: flex-start; + min-block-size: 4rem; } // ------------------------------------- @@ -174,11 +174,11 @@ } .#{$prefix}--table-sort__icon-unsorted { + fill: $icon-primary; inline-size: convert.to-rem(20px); - min-width: $spacing-05; margin-inline-end: $spacing-03; margin-inline-start: $spacing-03; - fill: $icon-primary; + min-inline-size: $spacing-05; opacity: 0; } @@ -203,11 +203,11 @@ } .#{$prefix}--table-sort__icon { + fill: $icon-primary; inline-size: convert.to-rem(20px); - min-width: $spacing-05; margin-inline-end: $spacing-03; margin-inline-start: $spacing-03; - fill: $icon-primary; + min-inline-size: $spacing-05; opacity: 1; transform: rotate(0); transition: transform $transition-base $standard-easing; @@ -245,7 +245,7 @@ .#{$prefix}--data-table--xl .#{$prefix}--table-sort__icon-unsorted, .#{$prefix}--data-table--xl .#{$prefix}--table-sort__icon { - margin-top: convert.to-rem(13px); + margin-block-start: convert.to-rem(13px); } // Windows HCM fix diff --git a/packages/styles/scss/components/date-picker/_date-picker.scss b/packages/styles/scss/components/date-picker/_date-picker.scss index f86071cc3d0f..d2bffe89202e 100644 --- a/packages/styles/scss/components/date-picker/_date-picker.scss +++ b/packages/styles/scss/components/date-picker/_date-picker.scss @@ -95,11 +95,11 @@ position: relative; display: block; - block-size: convert.to-rem(40px); padding: 0 $spacing-05; border: none; - border-block-end: 1px solid $border-strong; background-color: $field; + block-size: convert.to-rem(40px); + border-block-end: 1px solid $border-strong; color: $text-primary; transition: $duration-fast-01 motion(standard, productive) all; @@ -109,8 +109,8 @@ } &:disabled { - border-block-end: 1px solid transparent; background-color: $field; + border-block-end: 1px solid transparent; color: $text-disabled; cursor: not-allowed; } @@ -140,10 +140,10 @@ .#{$prefix}--date-picker__icon { position: absolute; z-index: 1; + fill: $icon-primary; // vertically center icon within parent container on IE11 inset-block-start: 50%; - right: 1rem; - fill: $icon-primary; + inset-inline-end: 1rem; pointer-events: none; transform: translateY(-50%); } @@ -201,8 +201,9 @@ .#{$prefix}--date-picker.#{$prefix}--skeleton .#{$prefix}--label { @include skeleton; - inline-size: convert.to-rem(75px); block-size: convert.to-rem(14px); + + inline-size: convert.to-rem(75px); } // Windows HCM fix @@ -213,8 +214,8 @@ // readonly .#{$prefix}--date-picker__input[readonly] { - border-bottom-color: $border-subtle; background: transparent; + border-block-end-color: $border-subtle; cursor: text; } diff --git a/packages/styles/scss/components/date-picker/_flatpickr.scss b/packages/styles/scss/components/date-picker/_flatpickr.scss index a652ceb5aedf..352a4e3844ef 100644 --- a/packages/styles/scss/components/date-picker/_flatpickr.scss +++ b/packages/styles/scss/components/date-picker/_flatpickr.scss @@ -92,14 +92,14 @@ .flatpickr-calendar { position: absolute; overflow: hidden; - inline-size: convert.to-rem(315px); - max-height: 0; box-sizing: border-box; padding: 0; border: 0; animation: none; border-radius: 0; direction: ltr; + inline-size: convert.to-rem(315px); + max-block-size: 0; opacity: 0; text-align: center; touch-action: manipulation; @@ -110,7 +110,7 @@ .flatpickr-calendar.open, .flatpickr-calendar.inline { overflow: visible; - max-height: convert.to-rem(640px); + max-block-size: convert.to-rem(640px); opacity: 1; visibility: inherit; } @@ -121,15 +121,15 @@ z-index: 99999; display: flex; overflow: hidden; - inline-size: convert.to-rem(288px); - block-size: convert.to-rem(336px); flex-direction: column; align-items: center; justify-content: center; padding: $spacing-02 $spacing-02 $spacing-03 $spacing-02; border: none; - margin-top: convert.to-rem(-2px); background-color: $layer-01; + block-size: convert.to-rem(336px); + inline-size: convert.to-rem(288px); + margin-block-start: convert.to-rem(-2px); &:focus { @include focus-outline('border'); @@ -146,8 +146,8 @@ .flatpickr-calendar.inline { position: relative; - inset-block-start: convert.to-rem(2px); display: block; + inset-block-start: convert.to-rem(2px); } .flatpickr-calendar.static { @@ -166,18 +166,18 @@ .dayContainer { display: flex; - block-size: convert.to-rem(246px); flex-wrap: wrap; justify-content: space-around; padding: 0; + block-size: convert.to-rem(246px); outline: 0; } .flatpickr-calendar .hasWeeks .dayContainer, .flatpickr-calendar .hasTime .dayContainer { border-block-end: 0; - border-bottom-left-radius: 0; - border-bottom-right-radius: 0; + border-end-end-radius: 0; + border-end-start-radius: 0; } .flatpickr-calendar .hasWeeks .dayContainer { @@ -186,7 +186,7 @@ .flatpickr-calendar.showTimeInput.hasTime .flatpickr-time { block-size: convert.to-rem(40px); - border-top: 1px solid #e6e6e6; + border-block-start: 1px solid #e6e6e6; } .flatpickr-calendar.noCalendar.hasTime .flatpickr-time { @@ -199,17 +199,17 @@ .flatpickr-months { display: flex; - inline-size: 100%; justify-content: space-between; + inline-size: 100%; } .flatpickr-month { @include type-style('heading-compact-01'); display: flex; - block-size: convert.to-rem(40px); align-items: center; background-color: transparent; + block-size: convert.to-rem(40px); color: $text-primary; line-height: 1; text-align: center; @@ -219,13 +219,13 @@ .flatpickr-next-month { z-index: 3; display: flex; - inline-size: convert.to-rem(40px); - block-size: convert.to-rem(40px); align-items: center; justify-content: center; padding: 0; + block-size: convert.to-rem(40px); cursor: pointer; fill: $icon-primary; + inline-size: convert.to-rem(40px); line-height: 16px; text-decoration: none; transform: scale(1, 1) #{'/*rtl: scale(-1,1)*/'}; @@ -258,9 +258,9 @@ @include type-style('heading-compact-01'); display: flex; - block-size: convert.to-rem(28px); align-items: center; justify-content: center; + block-size: convert.to-rem(28px); text-align: center; } @@ -284,7 +284,6 @@ .numInputWrapper .numInput { display: inline-block; - inline-size: 100%; padding: $spacing-02; border: none; margin: 0; @@ -296,6 +295,7 @@ font-family: inherit; font-size: inherit; font-weight: 600; + inline-size: 100%; &::-webkit-outer-spin-button, &::-webkit-inner-spin-button { @@ -317,8 +317,8 @@ } .numInputWrapper .arrowUp { - inset-block-start: convert.to-rem(4px); border-block-end: 0; + inset-block-start: convert.to-rem(4px); &::after { border-block-end: convert.to-rem(4px) solid $icon-primary; @@ -329,48 +329,48 @@ inset-block-start: convert.to-rem(11px); &::after { - border-top: convert.to-rem(4px) solid $icon-primary; + border-block-start: convert.to-rem(4px) solid $icon-primary; } } .numInputWrapper .arrowUp, .numInputWrapper .arrowDown { position: absolute; - inset-inline-start: 2.6rem; - inline-size: convert.to-rem(12px); - block-size: 50%; padding: 0 convert.to-rem(4px) 0 convert.to-rem(2px); border: none; + block-size: 50%; cursor: pointer; + inline-size: convert.to-rem(12px); + inset-inline-start: 2.6rem; line-height: 50%; opacity: 0; &::after { position: absolute; - inset-block-start: 33%; display: block; border-inline-end: convert.to-rem(4px) solid transparent; border-inline-start: convert.to-rem(4px) solid transparent; content: ''; + inset-block-start: 33%; } &:hover::after { - border-top-color: $button-primary; - border-bottom-color: $button-primary; + border-block-end-color: $button-primary; + border-block-start-color: $button-primary; } &:active::after { - border-top-color: $border-interactive; - border-bottom-color: $border-interactive; + border-block-end-color: $border-interactive; + border-block-start-color: $border-interactive; } } .numInput[disabled] ~ .arrowUp::after { - border-bottom-color: $text-disabled; + border-block-end-color: $text-disabled; } .numInput[disabled] ~ .arrowDown::after { - border-top-color: $text-disabled; + border-block-start-color: $text-disabled; } .numInputWrapper:hover .arrowUp, @@ -385,8 +385,8 @@ .flatpickr-weekdays { display: flex; - block-size: convert.to-rem(40px); align-items: center; + block-size: convert.to-rem(40px); } .flatpickr-weekdaycontainer { @@ -436,12 +436,12 @@ @include type-style('body-compact-01'); display: flex; - inline-size: convert.to-rem(40px); - block-size: convert.to-rem(40px); align-items: center; justify-content: center; + block-size: convert.to-rem(40px); color: $text-primary; cursor: pointer; + inline-size: convert.to-rem(40px); transition: all $duration-fast-01 motion(standard, productive); &:hover { @@ -467,13 +467,13 @@ &::after { position: absolute; - inset-block-end: convert.to-rem(7px); - inset-inline-start: 50%; display: block; - inline-size: convert.to-rem(4px); - block-size: convert.to-rem(4px); background-color: $link-primary; + block-size: convert.to-rem(4px); content: ''; + inline-size: convert.to-rem(4px); + inset-block-end: convert.to-rem(7px); + inset-inline-start: 50%; transform: translateX(-50%); } } diff --git a/packages/styles/scss/components/dropdown/_dropdown.scss b/packages/styles/scss/components/dropdown/_dropdown.scss index 244751266eb5..39cc7c46fbdb 100644 --- a/packages/styles/scss/components/dropdown/_dropdown.scss +++ b/packages/styles/scss/components/dropdown/_dropdown.scss @@ -50,13 +50,13 @@ position: relative; display: block; - inline-size: 100%; - block-size: convert.to-rem(40px); border: none; - border-block-end: 1px solid $border-strong; background-color: $field; + block-size: convert.to-rem(40px); + border-block-end: 1px solid $border-strong; color: $text-primary; cursor: pointer; + inline-size: 100%; list-style: none; outline: 2px solid transparent; transition: background-color $duration-fast-01 motion(standard, productive); @@ -68,12 +68,12 @@ // Menu's triggering element updated to button with Downshift v5 upgrade .#{$prefix}--dropdown .#{$prefix}--list-box__field { - text-align: left; + text-align: start; } .#{$prefix}--dropdown--lg { block-size: convert.to-rem(48px); - max-height: convert.to-rem(48px); + max-block-size: convert.to-rem(48px); } .#{$prefix}--dropdown--lg .#{$prefix}--dropdown__arrow { @@ -82,7 +82,7 @@ .#{$prefix}--dropdown--sm { block-size: convert.to-rem(32px); - max-height: convert.to-rem(32px); + max-block-size: convert.to-rem(32px); } .#{$prefix}--dropdown--sm .#{$prefix}--dropdown__arrow { @@ -90,7 +90,7 @@ } .#{$prefix}--dropdown--open { - border-bottom-color: $border-subtle; + border-block-end-color: $border-subtle; } .#{$prefix}--dropdown--invalid { @@ -102,16 +102,16 @@ + .#{$prefix}--form-requirement { display: inline-block; - max-height: convert.to-rem(200px); color: $text-error; + max-block-size: convert.to-rem(200px); } } .#{$prefix}--dropdown__invalid-icon { position: absolute; - inset-block-start: 50%; - right: $spacing-08; fill: $support-error; + inset-block-start: 50%; + inset-inline-end: $spacing-08; transform: translateY(-50%); } @@ -127,7 +127,7 @@ @include box-shadow; // 40px item height * 5.5 items shown - max-height: convert.to-rem(220px); + max-block-size: convert.to-rem(220px); transition: max-height $duration-fast-02 motion(entrance, productive); } @@ -145,21 +145,21 @@ .#{$prefix}--dropdown__arrow { position: absolute; - inset-block-start: convert.to-rem(13px); - right: 1rem; fill: $icon-primary; + inset-block-start: convert.to-rem(13px); + inset-inline-end: 1rem; pointer-events: none; transform-origin: 50% 45%; transition: transform $duration-fast-02 motion(standard, productive); } button.#{$prefix}--dropdown-text { - inline-size: 100%; border: none; // button-reset mixin contradicts with bx--dropdown-text styles background: none; color: $text-primary; - text-align: left; + inline-size: 100%; + text-align: start; &:focus { @include focus-outline('outline'); @@ -189,11 +189,11 @@ position: absolute; z-index: z('dropdown'); display: flex; - inline-size: 100%; - max-height: 0; flex-direction: column; background-color: $layer; + inline-size: 100%; list-style: none; + max-block-size: 0; // NOTE: IE, Edge, and Safari do not support two value `overflow` shorthand. overflow-x: hidden; overflow-y: auto; @@ -231,7 +231,7 @@ } &:first-of-type .#{$prefix}--dropdown-link { - border-top-color: transparent; + border-block-start-color: transparent; } } @@ -244,11 +244,11 @@ display: block; overflow: hidden; - block-size: convert.to-rem(40px); padding: convert.to-rem(11px) 0; border: 1px solid transparent; - border-top-color: $border-subtle; margin: 0 $spacing-05; + block-size: convert.to-rem(40px); + border-block-start-color: $border-subtle; color: $text-secondary; font-weight: normal; line-height: 1rem; @@ -264,13 +264,13 @@ // V11: Possibly deprecate .#{$prefix}--dropdown--light .#{$prefix}--dropdown-link { - border-top-color: $border-subtle-02; + border-block-start-color: $border-subtle-02; } .#{$prefix}--dropdown--sm .#{$prefix}--dropdown-link { block-size: convert.to-rem(32px); + padding-block-end: convert.to-rem(7px); padding-block-start: convert.to-rem(7px); - padding-bottom: convert.to-rem(7px); } .#{$prefix}--dropdown--focused, @@ -312,7 +312,7 @@ } .#{$prefix}--dropdown-item:hover .#{$prefix}--dropdown-link { - border-bottom-color: $layer-hover; + border-block-end-color: $layer-hover; } .#{$prefix}--dropdown--open .#{$prefix}--dropdown__arrow { @@ -322,7 +322,7 @@ .#{$prefix}--dropdown--open.#{$prefix}--dropdown--sm .#{$prefix}--dropdown-list { // 32px item height * 5.5 items shown - max-height: convert.to-rem(176px); + max-block-size: convert.to-rem(176px); } .#{$prefix}--dropdown--open .#{$prefix}--dropdown-item { @@ -330,7 +330,7 @@ } .#{$prefix}--dropdown--disabled { - border-bottom-color: transparent; + border-block-end-color: transparent; &:hover { background-color: $field; @@ -365,14 +365,14 @@ .#{$prefix}--dropdown--auto-width { inline-size: auto; - max-width: convert.to-rem(400px); + max-inline-size: convert.to-rem(400px); } .#{$prefix}--dropdown--inline { display: inline-block; - inline-size: auto; - border-bottom-color: transparent; background-color: transparent; + border-block-end-color: transparent; + inline-size: auto; justify-self: start; transition: background $duration-fast-01 motion(entrance, productive); @@ -386,7 +386,7 @@ .#{$prefix}--dropdown__arrow { inset-block-start: convert.to-rem(8px); - right: convert.to-rem(8px); + inset-inline-end: convert.to-rem(8px); } } @@ -397,8 +397,8 @@ .#{$prefix}--dropdown--inline .#{$prefix}--dropdown-text { display: inline-block; overflow: visible; - block-size: convert.to-rem(32px); padding: convert.to-rem(7px) $spacing-07 convert.to-rem(7px) $spacing-04; + block-size: convert.to-rem(32px); color: $text-primary; } @@ -414,7 +414,7 @@ .#{$prefix}--dropdown--inline.#{$prefix}--dropdown--invalid .#{$prefix}--dropdown__invalid-icon { - right: convert.to-rem(32px); + inset-inline-end: convert.to-rem(32px); } .#{$prefix}--dropdown--inline.#{$prefix}--dropdown--invalid @@ -441,11 +441,11 @@ } .#{$prefix}--dropdown-link { - border-top-color: transparent; + border-block-start-color: transparent; } + .#{$prefix}--dropdown-item .#{$prefix}--dropdown-link { - border-top-color: transparent; + border-block-start-color: transparent; } .#{$prefix}--list-box__menu-item__selected-icon { @@ -478,8 +478,8 @@ // readonly .#{$prefix}--dropdown--readonly, .#{$prefix}--dropdown--readonly:hover { - border-bottom-color: $border-subtle; background-color: transparent; + border-block-end-color: $border-subtle; } .#{$prefix}--dropdown--readonly .#{$prefix}--list-box__field, diff --git a/packages/styles/scss/components/file-uploader/_file-uploader.scss b/packages/styles/scss/components/file-uploader/_file-uploader.scss index 8de1057855bb..712c31410795 100644 --- a/packages/styles/scss/components/file-uploader/_file-uploader.scss +++ b/packages/styles/scss/components/file-uploader/_file-uploader.scss @@ -30,8 +30,8 @@ } .#{$prefix}--file--invalid { - margin-inline-end: $spacing-03; fill: $support-error; + margin-inline-end: $spacing-03; } // TODO: sync with type @@ -39,8 +39,8 @@ @include reset; @include type-style('heading-compact-01'); - margin-bottom: $spacing-03; color: $text-primary; + margin-block-end: $spacing-03; } .#{$prefix}--file--label--disabled { @@ -56,17 +56,17 @@ // TODO: deprecate this block .#{$prefix}--file-btn { display: inline-flex; - padding-inline-end: convert.to-rem(64px); margin: 0; + padding-inline-end: convert.to-rem(64px); } .#{$prefix}--file-browse-btn { display: inline-block; - inline-size: 100%; - max-width: convert.to-rem(320px); color: $link-primary; cursor: pointer; + inline-size: 100%; + max-inline-size: convert.to-rem(320px); outline: 2px solid transparent; outline-offset: -2px; transition: $duration-fast-02 motion(standard, productive); @@ -109,8 +109,8 @@ @include reset; @include type-style('body-compact-01'); - margin-bottom: $spacing-05; color: $text-secondary; + margin-block-end: $spacing-05; } .#{$prefix}--label-description--disabled { @@ -123,39 +123,39 @@ // For backwards compatibility .#{$prefix}--file-btn ~ .#{$prefix}--file-container { - margin-top: $spacing-06; + margin-block-start: $spacing-06; } .#{$prefix}--btn ~ .#{$prefix}--file-container { - margin-top: $spacing-05; + margin-block-start: $spacing-05; } .#{$prefix}--file .#{$prefix}--file-container, .#{$prefix}--file ~ .#{$prefix}--file-container { - margin-top: $spacing-03; + margin-block-start: $spacing-03; } .#{$prefix}--file__selected-file { display: grid; - max-width: convert.to-rem(320px); - min-block-size: $spacing-09; align-items: center; - margin-bottom: $spacing-03; background-color: $layer; gap: convert.to-rem(12px) $spacing-05; grid-auto-rows: auto; grid-template-columns: 1fr auto; + margin-block-end: $spacing-03; + max-inline-size: convert.to-rem(320px); + min-block-size: $spacing-09; word-break: break-word; &:last-child { - margin-bottom: 0; + margin-block-end: 0; } .#{$prefix}--form-requirement { display: block; - max-height: none; margin: 0; grid-column: 1 / -1; + max-block-size: none; } .#{$prefix}--inline-loading__animation .#{$prefix}--loading { @@ -174,22 +174,22 @@ } .#{$prefix}--file__selected-file--md { - min-block-size: convert.to-rem(40px); gap: $spacing-03 $spacing-05; + min-block-size: convert.to-rem(40px); } .#{$prefix}--file__selected-file--sm { - min-block-size: convert.to-rem(32px); gap: $spacing-02 $spacing-05; + min-block-size: convert.to-rem(32px); } // TODO: deprecate this block .#{$prefix}--file__selected-file--invalid__wrapper { @include focus-outline('invalid'); - max-width: convert.to-rem(320px); - margin-bottom: $spacing-03; background-color: $layer; + margin-block-end: $spacing-03; + max-inline-size: convert.to-rem(320px); outline-width: 1px; } @@ -208,8 +208,8 @@ } .#{$prefix}--file__selected-file--invalid .#{$prefix}--form-requirement { + border-block-start: 1px solid $border-subtle; padding-block-start: $spacing-05; - border-top: 1px solid $border-subtle; } .#{$prefix}--file__selected-file--invalid.#{$prefix}--file__selected-file--sm @@ -247,24 +247,24 @@ display: block; overflow: visible; - max-height: convert.to-rem(200px); padding: $spacing-03 $spacing-05; color: $text-error; font-weight: 400; + max-block-size: convert.to-rem(200px); } .#{$prefix}--file__selected-file--invalid + .#{$prefix}--form-requirement .#{$prefix}--form-requirement__supplement { - padding-bottom: $spacing-03; color: $text-primary; + padding-block-end: $spacing-03; } .#{$prefix}--file__state-container { display: flex; - min-width: 1.5rem; align-items: center; justify-content: center; + min-inline-size: 1.5rem; padding-inline-end: $spacing-05; .#{$prefix}--loading__svg { @@ -287,22 +287,22 @@ } .#{$prefix}--file__state-container .#{$prefix}--file-invalid { - inline-size: $spacing-05; block-size: $spacing-05; fill: $support-error; + inline-size: $spacing-05; } .#{$prefix}--file__state-container .#{$prefix}--file-close { display: flex; - inline-size: $spacing-06; - block-size: $spacing-06; align-items: center; justify-content: center; padding: 0; border: none; background-color: transparent; + block-size: $spacing-06; cursor: pointer; fill: $icon-primary; + inline-size: $spacing-06; &:focus { @include focus-outline('outline'); @@ -319,15 +319,15 @@ .#{$prefix}--file__drop-container { @include button-reset.reset; + @include type-style('body-compact-01'); display: flex; overflow: hidden; - block-size: convert.to-rem(96px); align-items: flex-start; justify-content: space-between; padding: $spacing-05; border: 1px dashed $border-strong; - @include type-style('body-compact-01'); + block-size: convert.to-rem(96px); } .#{$prefix}--file__drop-container--drag-over { diff --git a/packages/styles/scss/components/fluid-combo-box/_fluid-combo-box.scss b/packages/styles/scss/components/fluid-combo-box/_fluid-combo-box.scss index 0a7b31b08bdb..a5a6e40334c5 100644 --- a/packages/styles/scss/components/fluid-combo-box/_fluid-combo-box.scss +++ b/packages/styles/scss/components/fluid-combo-box/_fluid-combo-box.scss @@ -45,8 +45,8 @@ .#{$prefix}--list-box__wrapper--fluid .#{$prefix}--combo-box .#{$prefix}--list-box__selection { - inset-block-start: auto; inset-block-end: convert.to-rem(10px); + inset-block-start: auto; transform: none; } @@ -66,6 +66,6 @@ .#{$prefix}--list-box__field .#{$prefix}--text-input + .#{$prefix}--list-box__invalid-icon { - right: 1rem; + inset-inline-end: 1rem; } } diff --git a/packages/styles/scss/components/fluid-date-picker/_fluid-date-picker.scss b/packages/styles/scss/components/fluid-date-picker/_fluid-date-picker.scss index 6e0655c1371c..bfd9a97f0347 100644 --- a/packages/styles/scss/components/fluid-date-picker/_fluid-date-picker.scss +++ b/packages/styles/scss/components/fluid-date-picker/_fluid-date-picker.scss @@ -24,8 +24,8 @@ .#{$prefix}--date-picker--fluid .#{$prefix}--date-picker { position: relative; - inline-size: 100%; block-size: 100%; + inline-size: 100%; transition: background-color $duration-fast-01 motion(standard, productive), outline $duration-fast-01 motion(standard, productive); } @@ -33,13 +33,13 @@ .#{$prefix}--date-picker--fluid .#{$prefix}--label { position: absolute; z-index: 1; - inset-block-start: convert.to-rem(13px); - inset-inline-start: $spacing-05; display: flex; - inline-size: calc(100% - 2rem); - block-size: convert.to-rem(16px); align-items: center; margin: 0; + block-size: convert.to-rem(16px); + inline-size: calc(100% - 2rem); + inset-block-start: convert.to-rem(13px); + inset-inline-start: $spacing-05; } .#{$prefix}--date-picker--fluid .#{$prefix}--label::-webkit-scrollbar, @@ -63,11 +63,11 @@ .#{$prefix}--date-picker--fluid .#{$prefix}--date-picker-input__wrapper .#{$prefix}--date-picker__input { - min-width: convert.to-rem(144px); - min-block-size: convert.to-rem(64px); padding: convert.to-rem(32px) $spacing-05 convert.to-rem(13px); - border-block-end: none; background: transparent; + border-block-end: none; + min-block-size: convert.to-rem(64px); + min-inline-size: convert.to-rem(144px); } // Simple @@ -130,8 +130,8 @@ .#{$prefix}--date-picker--range .#{$prefix}--date-picker-container { inline-size: 100%; - min-width: convert.to-rem(144px); min-block-size: convert.to-rem(63px); + min-inline-size: convert.to-rem(144px); } .#{$prefix}--date-picker--fluid @@ -225,13 +225,13 @@ .#{$prefix}--date-picker--range .#{$prefix}--date-picker--fluid--warn.#{$prefix}--date-picker-container:last-child::after { position: absolute; - inset-block-start: convert.to-rem(8px); - right: 0; display: block; - inline-size: 1px; - block-size: calc(100% - 1rem); background: $border-strong; + block-size: calc(100% - 1rem); content: ''; + inline-size: 1px; + inset-block-start: convert.to-rem(8px); + inset-inline-end: 0; } .#{$prefix}--date-picker--fluid @@ -240,11 +240,11 @@ } .#{$prefix}--date-picker--fluid .#{$prefix}--date-picker__divider { - inline-size: calc(100% - 2rem); border-style: solid; border-color: $border-subtle; - border-block-end: none; margin: 0 1rem; + border-block-end: none; + inline-size: calc(100% - 2rem); } .#{$prefix}--date-picker-container.#{$prefix}--date-picker--fluid--invalid @@ -280,9 +280,9 @@ ~ .#{$prefix}--form-requirement { display: block; overflow: visible; - max-height: 100%; padding: $spacing-03 convert.to-rem(40px) $spacing-03 $spacing-05; - margin-top: 0; + margin-block-start: 0; + max-block-size: 100%; } .#{$prefix}--date-picker--fluid.#{$prefix}--date-picker--fluid--invalid @@ -307,42 +307,42 @@ // Skeleton .#{$prefix}--date-picker--fluid__skeleton { + background: $skeleton-background; block-size: convert.to-rem(64px); border-block-end: 1px solid $skeleton-element; - background: $skeleton-background; } .#{$prefix}--date-picker--fluid__skeleton--container { position: relative; - inline-size: 100%; block-size: 100%; + inline-size: 100%; } .#{$prefix}--date-picker--fluid__skeleton .#{$prefix}--skeleton { position: absolute; + block-size: convert.to-rem(8px); + inline-size: 25%; inset-block-start: $spacing-05; inset-inline-start: $spacing-05; - inline-size: 25%; - block-size: convert.to-rem(8px); } .#{$prefix}--date-picker--fluid__skeleton .#{$prefix}--label { - margin-bottom: convert.to-rem(4px); + margin-block-end: convert.to-rem(4px); } .#{$prefix}--date-picker--fluid__skeleton .#{$prefix}--text-input { position: absolute; + padding: 0; + block-size: convert.to-rem(8px); + inline-size: 50%; inset-block-start: convert.to-rem(36px); inset-inline-start: $spacing-05; - inline-size: 50%; - block-size: convert.to-rem(8px); - padding: 0; } .#{$prefix}--date-picker--fluid__skeleton--container .#{$prefix}--date-picker__icon { - inset-block-start: auto; inset-block-end: $spacing-03; + inset-block-start: auto; } // Range skeleton @@ -354,8 +354,8 @@ .#{$prefix}--date-picker--fluid__skeleton--range .#{$prefix}--date-picker--fluid__skeleton--container { display: flex; - inline-size: 50%; flex-direction: column; + inline-size: 50%; } .#{$prefix}--date-picker--fluid__skeleton--range @@ -380,7 +380,7 @@ ):not(.#{$prefix}--date-picker--fluid--warn) .#{$prefix}--date-picker .#{$prefix}--date-picker__input { - border-bottom-color: $border-subtle; + border-block-end-color: $border-subtle; } .#{$prefix}--date-picker--fluid.#{$prefix}--date-picker--fluid--readonly:not( @@ -389,6 +389,6 @@ .#{$prefix}--date-picker--range > .#{$prefix}--date-picker-container:last-child .#{$prefix}--date-picker__input { - border-left-color: $border-subtle; + border-inline-start-color: $border-subtle; } } diff --git a/packages/styles/scss/components/fluid-list-box/_fluid-list-box.scss b/packages/styles/scss/components/fluid-list-box/_fluid-list-box.scss index 680e3417f4f5..4cd1c8fdb0c2 100644 --- a/packages/styles/scss/components/fluid-list-box/_fluid-list-box.scss +++ b/packages/styles/scss/components/fluid-list-box/_fluid-list-box.scss @@ -19,27 +19,27 @@ @mixin fluid-list-box { .#{$prefix}--list-box__wrapper--fluid.#{$prefix}--list-box__wrapper { position: relative; - block-size: 100%; background: $field; + block-size: 100%; transition: background-color $duration-fast-01 motion(standard, productive), outline $duration-fast-01 motion(standard, productive); } .#{$prefix}--list-box__wrapper--fluid .#{$prefix}--list-box { - min-block-size: convert.to-rem(64px); padding: 0; + min-block-size: convert.to-rem(64px); } .#{$prefix}--list-box__wrapper--fluid .#{$prefix}--label { position: absolute; z-index: 1; - inset-block-start: convert.to-rem(13px); - inset-inline-start: $spacing-05; display: flex; - inline-size: calc(100% - 2rem); - block-size: convert.to-rem(16px); align-items: center; margin: 0; + block-size: convert.to-rem(16px); + inline-size: calc(100% - 2rem); + inset-block-start: convert.to-rem(13px); + inset-inline-start: $spacing-05; } .#{$prefix}--list-box__wrapper--fluid .#{$prefix}--label::-webkit-scrollbar, @@ -61,14 +61,14 @@ } .#{$prefix}--list-box__wrapper--fluid .#{$prefix}--list-box__field { + padding-block-end: convert.to-rem(13px); padding-block-start: convert.to-rem(33px); - padding-bottom: convert.to-rem(13px); padding-inline-start: $spacing-05; } .#{$prefix}--list-box__wrapper--fluid .#{$prefix}--list-box__menu-icon { - inline-size: 1rem; block-size: 1rem; + inline-size: 1rem; } .#{$prefix}--list-box__wrapper--fluid:not( @@ -176,7 +176,7 @@ .#{$prefix}--list-box--warning ~ .#{$prefix}--form-requirement { padding: convert.to-rem(8px) 4rem convert.to-rem(8px) $spacing-05; - margin-top: 0; + margin-block-start: 0; } .#{$prefix}--list-box__wrapper--fluid @@ -191,7 +191,7 @@ .#{$prefix}--list-box--warning .#{$prefix}--list-box__invalid-icon { inset-block-start: convert.to-rem(81px); - right: $spacing-05; + inset-inline-end: $spacing-05; pointer-events: none; } @@ -221,8 +221,8 @@ ~ .#{$prefix}--list-box__divider { display: block; border: none; - border-block-end: 1px solid $border-subtle; margin: 0 1rem; + border-block-end: 1px solid $border-subtle; } .#{$prefix}--list-box__wrapper--fluid @@ -243,29 +243,29 @@ // Skeleton styles .#{$prefix}--list-box__wrapper--fluid .#{$prefix}--skeleton { - border-block-end: 1px solid $skeleton-element; background: $skeleton-background; + border-block-end: 1px solid $skeleton-element; } .#{$prefix}--list-box__wrapper--fluid .#{$prefix}--skeleton .#{$prefix}--list-box__field { position: absolute; + padding: 0; + block-size: convert.to-rem(8px); + inline-size: 50%; inset-block-start: convert.to-rem(36px); inset-inline-start: $spacing-05; - inline-size: 50%; - block-size: convert.to-rem(8px); - padding: 0; } .#{$prefix}--list-box__wrapper--fluid .#{$prefix}--skeleton .#{$prefix}--list-box__label { position: absolute; + block-size: convert.to-rem(8px); + inline-size: 25%; inset-block-start: $spacing-05; inset-inline-start: $spacing-05; - inline-size: 25%; - block-size: convert.to-rem(8px); } .#{$prefix}--list-box__wrapper--fluid diff --git a/packages/styles/scss/components/fluid-multiselect/_fluid-multiselect.scss b/packages/styles/scss/components/fluid-multiselect/_fluid-multiselect.scss index 4dec9ede7c2b..9aafa5fac6e8 100644 --- a/packages/styles/scss/components/fluid-multiselect/_fluid-multiselect.scss +++ b/packages/styles/scss/components/fluid-multiselect/_fluid-multiselect.scss @@ -27,7 +27,7 @@ .#{$prefix}--list-box__wrapper--fluid .#{$prefix}--tag.#{$prefix}--tag--filter { - margin-top: 1.25rem; + margin-block-start: 1.25rem; } // Filterable diff --git a/packages/styles/scss/components/fluid-number-input/_fluid-number-input.scss b/packages/styles/scss/components/fluid-number-input/_fluid-number-input.scss index 5c741d9b0824..2d5be7d7d409 100644 --- a/packages/styles/scss/components/fluid-number-input/_fluid-number-input.scss +++ b/packages/styles/scss/components/fluid-number-input/_fluid-number-input.scss @@ -19,20 +19,20 @@ @mixin fluid-number-input { .#{$prefix}--number-input--fluid { position: relative; - block-size: 100%; background: $field; + block-size: 100%; } .#{$prefix}--number-input--fluid .#{$prefix}--label { position: absolute; z-index: 1; - inset-block-start: convert.to-rem(13px); - inset-inline-start: $spacing-05; display: flex; - inline-size: calc(100% - 2rem); - block-size: convert.to-rem(16px); align-items: center; margin: 0; + block-size: convert.to-rem(16px); + inline-size: calc(100% - 2rem); + inset-block-start: convert.to-rem(13px); + inset-inline-start: $spacing-05; } .#{$prefix}--number-input--fluid .#{$prefix}--label::-webkit-scrollbar, @@ -58,16 +58,16 @@ } .#{$prefix}--number-input--fluid input[type='number'] { - min-block-size: convert.to-rem(64px); padding: convert.to-rem(32px) convert.to-rem(80px) convert.to-rem(13px) $spacing-05; background: transparent; + min-block-size: convert.to-rem(64px); outline: none; } .#{$prefix}--number-input--fluid .#{$prefix}--number__controls { - inset-block-start: convert.to-rem(23px); block-size: convert.to-rem(40px); + inset-block-start: convert.to-rem(23px); transform: translate(0); } @@ -108,12 +108,12 @@ input[type='number']:focus ~ .#{$prefix}--number__controls .#{$prefix}--number__control-btn:hover::before { - inset-block-start: auto; + background: $focus; + block-size: 1px; + inline-size: 100%; inset-block-end: 0; + inset-block-start: auto; inset-inline-start: 0; - inline-size: 100%; - block-size: 1px; - background: $focus; } // End weirdness @@ -134,8 +134,8 @@ input[type='number'] ~ .#{$prefix}--number__controls .#{$prefix}--number__control-btn::after { - inset-block-start: 0; block-size: calc(100% - convert.to-rem(1px)); + inset-block-start: 0; } .#{$prefix}--number-input--fluid.#{$prefix}--number-input--fluid--focus @@ -156,8 +156,8 @@ input[type='number'] ~ .#{$prefix}--number__controls .#{$prefix}--number__control-btn.up-icon:hover::after { - block-size: calc(100%); background-color: $focus; + block-size: calc(100%); } .#{$prefix}--number-input--fluid--invalid @@ -179,7 +179,7 @@ .#{$prefix}--number-input--fluid .#{$prefix}--number__invalid { inset-block-start: convert.to-rem(73px); - right: $spacing-05; + inset-inline-end: $spacing-05; pointer-events: none; } @@ -207,13 +207,13 @@ .#{$prefix}--number__input-wrapper--warning + .#{$prefix}--number-input__divider { position: absolute; - inset-block-start: convert.to-rem(63px); display: block; - inline-size: calc(100% - 2rem); - block-size: convert.to-rem(1px); border: none; - border-block-end: 1px solid $border-subtle; margin: 0 1rem; + block-size: convert.to-rem(1px); + border-block-end: 1px solid $border-subtle; + inline-size: calc(100% - 2rem); + inset-block-start: convert.to-rem(63px); } .#{$prefix}--number-input--fluid .#{$prefix}--form-requirement { @@ -274,7 +274,7 @@ ~ .#{$prefix}--number__controls .#{$prefix}--number__control-btn { border: initial; - border-bottom-width: convert.to-rem(1px); + border-block-end-width: convert.to-rem(1px); } // Disabled states diff --git a/packages/styles/scss/components/fluid-search/_fluid-search.scss b/packages/styles/scss/components/fluid-search/_fluid-search.scss index 282a13f52714..9a79966c01b8 100644 --- a/packages/styles/scss/components/fluid-search/_fluid-search.scss +++ b/packages/styles/scss/components/fluid-search/_fluid-search.scss @@ -24,15 +24,15 @@ .#{$prefix}--search--fluid .#{$prefix}--label { position: absolute; z-index: 1; - inset-block-start: convert.to-rem(13px); - inset-inline-start: $spacing-05; display: flex; overflow: initial; - inline-size: calc(100% - 2rem); - block-size: convert.to-rem(16px); align-items: center; margin: 0; + block-size: convert.to-rem(16px); clip: initial; + inline-size: calc(100% - 2rem); + inset-block-start: convert.to-rem(13px); + inset-inline-start: $spacing-05; white-space: initial; } @@ -53,9 +53,9 @@ } .#{$prefix}--search--fluid .#{$prefix}--search-input { - block-size: 100%; padding: convert.to-rem(32px) convert.to-rem(88px) convert.to-rem(13px) $spacing-05; + block-size: 100%; } .#{$prefix}--search--fluid .#{$prefix}--search-magnifier-icon { @@ -64,9 +64,9 @@ } .#{$prefix}--search--fluid .#{$prefix}--search-close { - inline-size: convert.to-rem(40px); - block-size: convert.to-rem(40px); border: none; + block-size: convert.to-rem(40px); + inline-size: convert.to-rem(40px); inset: auto convert.to-rem(48px) 0 auto; transition: background-color $duration-fast-01 motion(standard, productive); } @@ -74,10 +74,10 @@ .#{$prefix}--search--fluid .#{$prefix}--search-close::before { position: absolute; display: block; - inline-size: convert.to-rem(1px); - block-size: 1rem; background: $border-subtle; + block-size: 1rem; content: ''; + inline-size: convert.to-rem(1px); inset: auto convert.to-rem(-1px) convert.to-rem(14px) auto; } @@ -89,12 +89,12 @@ .#{$prefix}--search--fluid .#{$prefix}--search-close::after { position: absolute; - inset-block-end: 0; - inset-inline-start: 0; display: block; - inline-size: 100%; block-size: convert.to-rem(2px); content: ''; + inline-size: 100%; + inset-block-end: 0; + inset-inline-start: 0; } .#{$prefix}--search--fluid @@ -106,12 +106,12 @@ .#{$prefix}--search--fluid .#{$prefix}--search-input:not(:focus) ~ .#{$prefix}--search-close:not([disabled])::after { - block-size: convert.to-rem(1px); background: $border-strong; + block-size: convert.to-rem(1px); } .#{$prefix}--search--fluid .#{$prefix}--search-close svg { - margin-bottom: convert.to-rem(2px); + margin-block-end: convert.to-rem(2px); } // Disabled styles diff --git a/packages/styles/scss/components/fluid-select/_fluid-select.scss b/packages/styles/scss/components/fluid-select/_fluid-select.scss index 60d2ea094e85..6272266e9166 100644 --- a/packages/styles/scss/components/fluid-select/_fluid-select.scss +++ b/packages/styles/scss/components/fluid-select/_fluid-select.scss @@ -19,8 +19,8 @@ @mixin fluid-select { .#{$prefix}--select--fluid .#{$prefix}--select { position: relative; - block-size: 100%; background: $field; + block-size: 100%; transition: background-color $duration-fast-01 motion(standard, productive), outline $duration-fast-01 motion(standard, productive); } @@ -28,13 +28,13 @@ .#{$prefix}--select--fluid .#{$prefix}--label { position: absolute; z-index: 1; - inset-block-start: convert.to-rem(13px); - inset-inline-start: $spacing-05; display: flex; - inline-size: calc(100% - 2rem); - block-size: convert.to-rem(16px); align-items: center; margin: 0; + block-size: convert.to-rem(16px); + inline-size: calc(100% - 2rem); + inset-block-start: convert.to-rem(13px); + inset-inline-start: $spacing-05; } .#{$prefix}--select--fluid .#{$prefix}--label::-webkit-scrollbar, @@ -54,16 +54,16 @@ } .#{$prefix}--select--fluid .#{$prefix}--select-input { - min-block-size: convert.to-rem(64px); padding: convert.to-rem(32px) convert.to-rem(32px) convert.to-rem(13px) $spacing-05; + min-block-size: convert.to-rem(64px); outline: none; text-overflow: ellipsis; } .#{$prefix}--select--fluid .#{$prefix}--select__arrow { - inset-block-start: $spacing-07; block-size: 1rem; + inset-block-start: $spacing-07; } .#{$prefix}--select--fluid .#{$prefix}--select__divider { @@ -85,10 +85,10 @@ .#{$prefix}--select--warning .#{$prefix}--select__divider { display: block; - inline-size: calc(100% - 2rem); border: none; - border-block-end: 1px solid $border-subtle; margin: 0 1rem; + border-block-end: 1px solid $border-subtle; + inline-size: calc(100% - 2rem); } .#{$prefix}--select--fluid @@ -97,8 +97,8 @@ .#{$prefix}--select--fluid .#{$prefix}--select--warning .#{$prefix}--select-input { - padding-inline-end: convert.to-rem(32px); border-block-end: 1px solid transparent; + padding-inline-end: convert.to-rem(32px); } .#{$prefix}--select--fluid .#{$prefix}--select--warning { @@ -126,7 +126,7 @@ .#{$prefix}--form-requirement { display: block; overflow: visible; - max-height: 100%; + max-block-size: 100%; } .#{$prefix}--select--fluid @@ -157,7 +157,7 @@ .#{$prefix}--select--warning .#{$prefix}--select__invalid-icon { inset-block-start: convert.to-rem(73px); - right: $spacing-05; + inset-inline-end: $spacing-05; pointer-events: none; } diff --git a/packages/styles/scss/components/fluid-text-area/_fluid-text-area.scss b/packages/styles/scss/components/fluid-text-area/_fluid-text-area.scss index 16d7c4d3cc69..7976aff7bedb 100644 --- a/packages/styles/scss/components/fluid-text-area/_fluid-text-area.scss +++ b/packages/styles/scss/components/fluid-text-area/_fluid-text-area.scss @@ -18,9 +18,9 @@ @mixin fluid-text-area { .#{$prefix}--text-area--fluid .#{$prefix}--text-area__wrapper { position: relative; - block-size: 100%; flex-direction: column; background: $field; + block-size: 100%; } .#{$prefix}--modal @@ -37,13 +37,13 @@ .#{$prefix}--text-area--fluid .#{$prefix}--label { position: absolute; z-index: 1; - inset-block-start: convert.to-rem(13px); - inset-inline-start: $spacing-05; display: flex; - inline-size: calc(100% - 2rem); - block-size: convert.to-rem(16px); align-items: center; margin: 0; + block-size: convert.to-rem(16px); + inline-size: calc(100% - 2rem); + inset-block-start: convert.to-rem(13px); + inset-inline-start: $spacing-05; } .#{$prefix}--text-area--fluid .#{$prefix}--label::-webkit-scrollbar, @@ -71,9 +71,9 @@ } .#{$prefix}--text-area--fluid .#{$prefix}--text-area { - min-block-size: convert.to-rem(64px); padding: 0 $spacing-05 convert.to-rem(13px); - margin-top: 2rem; + margin-block-start: 2rem; + min-block-size: convert.to-rem(64px); outline: none; } @@ -100,7 +100,7 @@ // accounts for 2px of border when invalid .#{$prefix}--text-area--fluid .#{$prefix}--text-area--invalid { padding: 0 convert.to-rem(14px) convert.to-rem(13px); - margin-top: convert.to-rem(30px); + margin-block-start: convert.to-rem(30px); } .#{$prefix}--text-area--fluid @@ -112,8 +112,8 @@ display: block; border-style: solid; border-color: $border-subtle; - border-block-end: none; margin: 0 1rem; + border-block-end: none; } // invalid & warning error message container @@ -126,10 +126,10 @@ position: relative; display: block; overflow: visible; - max-height: 12.5rem; padding: 0.5rem 2.5rem 0.5rem 1rem; margin: 0; background: $field; + max-block-size: 12.5rem; } .#{$prefix}--text-area--fluid @@ -197,8 +197,8 @@ // Skeleton .#{$prefix}--text-area--fluid__skeleton { padding: $spacing-05; - border-block-end: 1px solid $skeleton-element; background: $skeleton-background; + border-block-end: 1px solid $skeleton-element; } .#{$prefix}--text-area--fluid__skeleton .#{$prefix}--skeleton, @@ -208,12 +208,12 @@ } .#{$prefix}--text-area--fluid__skeleton .#{$prefix}--label { - margin-bottom: $spacing-04; + margin-block-end: $spacing-04; } .#{$prefix}--text-area--fluid__skeleton .#{$prefix}--text-area.#{$prefix}--skeleton { - inline-size: 80%; block-size: 4rem; + inline-size: 80%; } } diff --git a/packages/styles/scss/components/fluid-text-input/_fluid-text-input.scss b/packages/styles/scss/components/fluid-text-input/_fluid-text-input.scss index 2419a9345c1f..8632ba627b09 100644 --- a/packages/styles/scss/components/fluid-text-input/_fluid-text-input.scss +++ b/packages/styles/scss/components/fluid-text-input/_fluid-text-input.scss @@ -19,8 +19,8 @@ @mixin fluid-text-input { .#{$prefix}--text-input--fluid.#{$prefix}--text-input-wrapper { position: relative; - block-size: 100%; background: $field; + block-size: 100%; transition: background-color $duration-fast-01 motion(standard, productive), outline $duration-fast-01 motion(standard, productive); } @@ -28,13 +28,13 @@ .#{$prefix}--text-input--fluid .#{$prefix}--label { position: absolute; z-index: 1; - inset-block-start: convert.to-rem(13px); - inset-inline-start: $spacing-05; display: flex; - inline-size: calc(100% - 2rem); - block-size: convert.to-rem(16px); align-items: center; margin: 0; + block-size: convert.to-rem(16px); + inline-size: calc(100% - 2rem); + inset-block-start: convert.to-rem(13px); + inset-inline-start: $spacing-05; } .#{$prefix}--text-input--fluid .#{$prefix}--label::-webkit-scrollbar, @@ -60,8 +60,8 @@ } .#{$prefix}--text-input--fluid .#{$prefix}--text-input { - min-block-size: convert.to-rem(64px); padding: convert.to-rem(32px) $spacing-05 convert.to-rem(13px); + min-block-size: convert.to-rem(64px); } .#{$prefix}--text-input__divider, @@ -99,8 +99,8 @@ display: block; border-style: solid; border-color: $border-subtle; - border-block-end: none; margin: 0 1rem; + border-block-end: none; } .#{$prefix}--text-input--fluid .#{$prefix}--text-input__invalid-icon { @@ -150,39 +150,39 @@ .#{$prefix}--text-input--fluid.#{$prefix}--password-input-wrapper .#{$prefix}--text-input__invalid-icon { - right: $spacing-05; + inset-inline-end: $spacing-05; } .#{$prefix}--text-input--fluid .#{$prefix}--btn.#{$prefix}--text-input--password__visibility__toggle.#{$prefix}--tooltip__trigger { - inset-block-start: convert.to-rem(26px); - right: $spacing-03; - inline-size: convert.to-rem(32px); block-size: convert.to-rem(32px); + inline-size: convert.to-rem(32px); + inset-block-start: convert.to-rem(26px); + inset-inline-end: $spacing-03; } // Skeleton .#{$prefix}--text-input--fluid__skeleton { position: relative; + background: $skeleton-background; block-size: convert.to-rem(64px); border-block-end: 1px solid $skeleton-element; - background: $skeleton-background; } .#{$prefix}--text-input--fluid__skeleton .#{$prefix}--skeleton { position: absolute; + block-size: convert.to-rem(8px); + inline-size: 25%; inset-block-start: $spacing-05; inset-inline-start: $spacing-05; - inline-size: 25%; - block-size: convert.to-rem(8px); } .#{$prefix}--text-input--fluid__skeleton .#{$prefix}--label { position: absolute; + padding: 0; + block-size: convert.to-rem(8px); + inline-size: 50%; inset-block-start: convert.to-rem(36px); inset-inline-start: $spacing-05; - inline-size: 50%; - block-size: convert.to-rem(8px); - padding: 0; } } diff --git a/packages/styles/scss/components/fluid-time-picker/_fluid-time-picker.scss b/packages/styles/scss/components/fluid-time-picker/_fluid-time-picker.scss index bde4a78e8a7f..480040ee78bb 100644 --- a/packages/styles/scss/components/fluid-time-picker/_fluid-time-picker.scss +++ b/packages/styles/scss/components/fluid-time-picker/_fluid-time-picker.scss @@ -46,17 +46,17 @@ .#{$prefix}--select-input__wrapper::before { position: absolute; display: block; - inline-size: 1px; - block-size: calc(100% - 1px); background-color: $border-strong; + block-size: calc(100% - 1px); content: ''; + inline-size: 1px; opacity: 1; transition: opacity $duration-fast-01 motion(standard, productive); } .#{$prefix}--time-picker--fluid__wrapper .#{$prefix}--select-input__wrapper::after { - right: 0; + inset-inline-end: 0; } .#{$prefix}--time-picker--fluid__wrapper @@ -108,8 +108,8 @@ } .#{$prefix}--time-picker--fluid--invalid .#{$prefix}--select-input { + border-block-start: 2px solid transparent; padding-block-start: convert.to-rem(30px); - border-top: 2px solid transparent; } .#{$prefix}--select--fluid:last-of-type .#{$prefix}--select-input { @@ -122,7 +122,7 @@ } .#{$prefix}--time-picker--fluid--invalid .#{$prefix}--select-input:hover { - border-top: 2px solid $support-error; + border-block-start: 2px solid $support-error; } .#{$prefix}--time-picker--fluid--invalid @@ -142,9 +142,9 @@ .#{$prefix}--time-picker--fluid--invalid .#{$prefix}--time-picker__icon, .#{$prefix}--time-picker--fluid--warning .#{$prefix}--time-picker__icon { position: absolute; - inset-block-start: convert.to-rem(72px); - right: $spacing-05; display: block; + inset-block-start: convert.to-rem(72px); + inset-inline-end: $spacing-05; } .#{$prefix}--time-picker--fluid--invalid .#{$prefix}--time-picker__icon { @@ -165,7 +165,7 @@ .#{$prefix}--time-picker--fluid--warning .#{$prefix}--form-requirement { display: block; overflow: visible; - max-height: 100%; + max-block-size: 100%; } .#{$prefix}--time-picker--fluid--invalid .#{$prefix}--form-requirement { @@ -188,8 +188,8 @@ .#{$prefix}--time-picker--fluid__wrapper > *:last-child .#{$prefix}--select-input__wrapper::before { - inset-block-start: 8px; block-size: calc(100% - 1rem); + inset-block-start: 8px; } .#{$prefix}--time-picker--fluid--invalid .#{$prefix}--text-input, @@ -203,23 +203,23 @@ .#{$prefix}--time-picker__divider, .#{$prefix}--time-picker--fluid.#{$prefix}--time-picker--fluid--warning .#{$prefix}--time-picker__divider { - inline-size: calc(100% - 2rem); border-style: solid; border-color: $border-subtle; - border-block-end: none; margin: 0 1rem; + border-block-end: none; + inline-size: calc(100% - 2rem); } // Skeleton styles .#{$prefix}--time-picker--fluid--skeleton { display: flex; - inline-size: 100%; block-size: convert.to-rem(64px); + inline-size: 100%; } .#{$prefix}--time-picker--fluid--skeleton > * { - inline-size: auto; block-size: 100%; + inline-size: auto; } .#{$prefix}--time-picker--fluid--skeleton > *:nth-child(1), diff --git a/packages/styles/scss/components/form/_form.scss b/packages/styles/scss/components/form/_form.scss index 74b8c34a6eeb..bcdaacdd74b5 100644 --- a/packages/styles/scss/components/form/_form.scss +++ b/packages/styles/scss/components/form/_form.scss @@ -54,10 +54,10 @@ $input-label-weight: 400 !default; @include type-style('label-01'); display: inline-block; - margin-bottom: $spacing-03; color: $text-secondary; font-weight: $input-label-weight; line-height: 1rem; + margin-block-end: $spacing-03; vertical-align: baseline; } @@ -66,7 +66,7 @@ $input-label-weight: 400 !default; } .#{$prefix}--label--no-margin { - margin-bottom: 0; + margin-block-end: 0; } .#{$prefix}--label + .#{$prefix}--tooltip { @@ -111,8 +111,9 @@ $input-label-weight: 400 !default; .#{$prefix}--label.#{$prefix}--skeleton { @include skeleton; - inline-size: convert.to-rem(75px); block-size: convert.to-rem(14px); + + inline-size: convert.to-rem(75px); } input[type='number'] { @@ -156,8 +157,8 @@ $input-label-weight: 400 !default; ~ .#{$prefix}--form-requirement { display: block; overflow: visible; - max-height: convert.to-rem(200px); font-weight: 400; + max-block-size: convert.to-rem(200px); } } @@ -202,22 +203,22 @@ $input-label-weight: 400 !default; display: none; overflow: hidden; - max-height: 0; margin: $spacing-02 0 0; + max-block-size: 0; } .#{$prefix}--select--inline .#{$prefix}--form__helper-text { - margin-top: 0; + margin-block-start: 0; } .#{$prefix}--form__helper-text { @include type-style('helper-text-01'); z-index: 0; + color: $text-secondary; // Added to prevent error text from displaying under helper text in Safari (#6392) inline-size: 100%; - margin-top: $spacing-02; - color: $text-secondary; + margin-block-start: $spacing-02; opacity: 1; } diff --git a/packages/styles/scss/components/inline-loading/_inline-loading.scss b/packages/styles/scss/components/inline-loading/_inline-loading.scss index 4ca5734a1f32..cc14cc4b9888 100644 --- a/packages/styles/scss/components/inline-loading/_inline-loading.scss +++ b/packages/styles/scss/components/inline-loading/_inline-loading.scss @@ -24,9 +24,9 @@ $-loading-gap-small: 110; @mixin inline-loading { .#{$prefix}--inline-loading { display: flex; + align-items: center; inline-size: 100%; min-block-size: 2rem; - align-items: center; } .#{$prefix}--inline-loading__text { @@ -49,8 +49,8 @@ $-loading-gap-small: 110; // For deprecated older markup &.#{$prefix}--inline-loading__svg { position: absolute; - inset-block-start: 0.75rem; inline-size: 0.75rem; + inset-block-start: 0.75rem; } &[hidden] { @@ -71,9 +71,9 @@ $-loading-gap-small: 110; } .#{$prefix}--inline-loading--error { - inline-size: convert.to-rem(16px); block-size: convert.to-rem(16px); fill: $support-error; + inline-size: convert.to-rem(16px); &[hidden] { display: none; @@ -88,7 +88,7 @@ $-loading-gap-small: 110; screen and (-ms-high-contrast: none) { .#{$prefix}--inline-loading__checkmark-container { inset-block-start: 1px; - right: 0.5rem; + inset-inline-end: 0.5rem; } .#{$prefix}--inline-loading__checkmark { diff --git a/packages/styles/scss/components/list-box/_list-box.scss b/packages/styles/scss/components/list-box/_list-box.scss index 39e963e8a90e..e7fa2d3400b6 100644 --- a/packages/styles/scss/components/list-box/_list-box.scss +++ b/packages/styles/scss/components/list-box/_list-box.scss @@ -67,7 +67,7 @@ $list-box-menu-width: convert.to-rem(300px); } .#{$prefix}--form__helper-text { - max-width: none; + max-inline-size: none; } .#{$prefix}--form-requirement { @@ -79,14 +79,14 @@ $list-box-menu-width: convert.to-rem(300px); @include reset; position: relative; - inline-size: $list-box-width; - block-size: convert.to-rem(40px); - max-height: convert.to-rem(40px); border: none; - border-block-end: 1px solid $border-strong; background-color: $field; + block-size: convert.to-rem(40px); + border-block-end: 1px solid $border-strong; color: $text-primary; cursor: pointer; + inline-size: $list-box-width; + max-block-size: convert.to-rem(40px); transition: all $duration-fast-01 motion(standard, productive); &:hover { @@ -96,24 +96,24 @@ $list-box-menu-width: convert.to-rem(300px); .#{$prefix}--list-box--lg { block-size: convert.to-rem(48px); - max-height: convert.to-rem(48px); + max-block-size: convert.to-rem(48px); } .#{$prefix}--list-box--sm { block-size: convert.to-rem(32px); - max-height: convert.to-rem(32px); + max-block-size: convert.to-rem(32px); } .#{$prefix}--list-box--expanded { - border-bottom-color: $border-subtle-01; + border-block-end-color: $border-subtle-01; } .#{$prefix}--layer-two .#{$prefix}--list-box--expanded { - border-bottom-color: $border-subtle-02; + border-block-end-color: $border-subtle-02; } .#{$prefix}--layer-three .#{$prefix}--list-box--expanded { - border-bottom-color: $border-subtle-03; + border-block-end-color: $border-subtle-03; } .#{$prefix}--list-box--expanded:hover { @@ -126,16 +126,16 @@ $list-box-menu-width: convert.to-rem(300px); } .#{$prefix}--list-box .#{$prefix}--text-input { - min-width: 0; block-size: 100%; + min-inline-size: 0; } // invalid states .#{$prefix}--list-box__invalid-icon { position: absolute; - inset-block-start: 50%; - right: $spacing-08; fill: $support-error; + inset-block-start: 50%; + inset-inline-end: $spacing-08; transform: translateY(-50%); } @@ -151,8 +151,8 @@ $list-box-menu-width: convert.to-rem(300px); .#{$prefix}--list-box[data-invalid] .#{$prefix}--list-box__field, .#{$prefix}--list-box.#{$prefix}--list-box--warning .#{$prefix}--list-box__field { - padding-inline-end: $spacing-10; border-block-end: 0; + padding-inline-end: $spacing-10; } .#{$prefix}--list-box[data-invalid].#{$prefix}--list-box--inline @@ -179,11 +179,11 @@ $list-box-menu-width: convert.to-rem(300px); // V11: Possibly deprecate .#{$prefix}--list-box--light .#{$prefix}--list-box__menu-item__option { - border-top-color: $border-subtle; + border-block-start-color: $border-subtle; } .#{$prefix}--list-box--light.#{$prefix}--list-box--expanded { - border-bottom-color: transparent; + border-block-end-color: transparent; } // Disabled state for `list-box` @@ -199,7 +199,7 @@ $list-box-menu-width: convert.to-rem(300px); .#{$prefix}--list-box--disabled, .#{$prefix}--list-box--disabled .#{$prefix}--list-box__field, .#{$prefix}--list-box--disabled .#{$prefix}--list-box__field:focus { - border-bottom-color: transparent; + border-block-end-color: transparent; outline: none; } @@ -254,7 +254,7 @@ $list-box-menu-width: convert.to-rem(300px); } .#{$prefix}--list-box.#{$prefix}--list-box--inline.#{$prefix}--list-box--expanded { - border-bottom-width: 0; + border-block-end-width: 0; } .#{$prefix}--list-box.#{$prefix}--list-box--inline.#{$prefix}--list-box--expanded @@ -274,12 +274,12 @@ $list-box-menu-width: convert.to-rem(300px); .#{$prefix}--list-box.#{$prefix}--list-box--inline .#{$prefix}--list-box__menu-icon { - right: $spacing-03; + inset-inline-end: $spacing-03; } .#{$prefix}--list-box.#{$prefix}--list-box--inline .#{$prefix}--list-box__invalid-icon { - right: $spacing-07; + inset-inline-end: $spacing-07; } .#{$prefix}--list-box--inline .#{$prefix}--list-box__label { @@ -291,12 +291,12 @@ $list-box-menu-width: convert.to-rem(300px); } .#{$prefix}--dropdown--inline .#{$prefix}--list-box__field { - max-width: convert.to-rem(480px); + max-inline-size: convert.to-rem(480px); } .#{$prefix}--dropdown--inline .#{$prefix}--list-box__menu { - min-width: convert.to-rem(288px); - max-width: convert.to-rem(480px); + max-inline-size: convert.to-rem(480px); + min-inline-size: convert.to-rem(288px); } // The field we use for input, showing selection, etc. @@ -306,10 +306,10 @@ $list-box-menu-width: convert.to-rem(300px); position: relative; display: inline-flex; overflow: hidden; - // Account for the border in `.bx--list-box` - block-size: calc(100% + 1px); align-items: center; padding: 0 $spacing-09 0 $spacing-05; + // Account for the border in `.bx--list-box` + block-size: calc(100% + 1px); cursor: pointer; outline: none; text-overflow: ellipsis; @@ -351,7 +351,7 @@ $list-box-menu-width: convert.to-rem(300px); .#{$prefix}--text-input + .#{$prefix}--list-box__invalid-icon { // to account for clear input button outline - right: convert.to-rem(66px); + inset-inline-end: convert.to-rem(66px); } // empty input field @@ -378,7 +378,7 @@ $list-box-menu-width: convert.to-rem(300px); .#{$prefix}--text-input--empty + .#{$prefix}--list-box__invalid-icon { // to account for clear input button outline - right: convert.to-rem(40px); + inset-inline-end: convert.to-rem(40px); } // Label for a `list-box__field` @@ -397,13 +397,13 @@ $list-box-menu-width: convert.to-rem(300px); @include button-reset.reset($width: false); position: absolute; - right: $spacing-05; display: flex; - inline-size: convert.to-rem(24px); - block-size: convert.to-rem(24px); align-items: center; justify-content: center; + block-size: convert.to-rem(24px); cursor: pointer; + inline-size: convert.to-rem(24px); + inset-inline-end: $spacing-05; outline: none; transition: transform $duration-fast-01 motion(standard, productive); } @@ -413,8 +413,8 @@ $list-box-menu-width: convert.to-rem(300px); } .#{$prefix}--list-box__menu-icon--open { - inline-size: convert.to-rem(24px); justify-content: center; + inline-size: convert.to-rem(24px); transform: rotate(180deg); } @@ -423,15 +423,15 @@ $list-box-menu-width: convert.to-rem(300px); @include button-reset.reset($width: false); position: absolute; - inset-block-start: 50%; - /* to preserve .5rem space between icons according to spec top/transform used to center the combobox clear selection icon in IE11 */ - right: convert.to-rem(36px); display: flex; - inline-size: convert.to-rem(24px); - block-size: convert.to-rem(24px); align-items: center; justify-content: center; + block-size: convert.to-rem(24px); cursor: pointer; + inline-size: convert.to-rem(24px); + inset-block-start: 50%; + /* to preserve .5rem space between icons according to spec top/transform used to center the combobox clear selection icon in IE11 */ + inset-inline-end: convert.to-rem(36px); transform: translateY(-50%); transition: background-color $duration-fast-01 motion(standard, productive); user-select: none; @@ -458,29 +458,29 @@ $list-box-menu-width: convert.to-rem(300px); @include type-style('label-01'); position: static; - inset-block-start: auto; display: flex; - inline-size: auto; - block-size: convert.to-rem(24px); align-items: center; justify-content: space-between; padding: convert.to-rem(8px); - // Align with hover circle of X button - padding-inline-end: convert.to-rem(2px); - margin-inline-end: convert.to-rem(10px); background-color: $background-inverse; + block-size: convert.to-rem(24px); border-radius: convert.to-rem(12px); color: $text-inverse; + inline-size: auto; + inset-block-start: auto; line-height: 0; + margin-inline-end: convert.to-rem(10px); + // Align with hover circle of X button + padding-inline-end: convert.to-rem(2px); transform: none; } .#{$prefix}--list-box__selection--multi > svg { - inline-size: convert.to-rem(20px); - block-size: convert.to-rem(20px); padding: convert.to-rem(2px); - margin-inline-start: convert.to-rem(4px); + block-size: convert.to-rem(20px); fill: $icon-inverse; + inline-size: convert.to-rem(20px); + margin-inline-start: convert.to-rem(4px); &:hover { background-color: $button-secondary-hover; @@ -510,11 +510,11 @@ $list-box-menu-width: convert.to-rem(300px); position: absolute; z-index: z('dropdown'); - right: 0; - inset-inline-start: 0; display: none; - inline-size: $list-box-width; background-color: $layer; + inline-size: $list-box-width; + inset-inline-end: 0; + inset-inline-start: 0; overflow-y: auto; transition: max-height $duration-fast-02 motion(standard, productive); @@ -527,7 +527,7 @@ $list-box-menu-width: convert.to-rem(300px); .#{$prefix}--list-box .#{$prefix}--list-box__field[aria-expanded='false'] { .#{$prefix}--list-box__menu { display: none; - max-height: 0; + max-block-size: 0; visibility: hidden; } } @@ -535,19 +535,19 @@ $list-box-menu-width: convert.to-rem(300px); .#{$prefix}--list-box--expanded .#{$prefix}--list-box__menu { display: block; // 40px item height * 5.5 items shown - max-height: convert.to-rem(220px); + max-block-size: convert.to-rem(220px); } .#{$prefix}--list-box--expanded.#{$prefix}--list-box--lg .#{$prefix}--list-box__menu { // 48px item height * 5.5 items shown - max-height: convert.to-rem(264px); + max-block-size: convert.to-rem(264px); } .#{$prefix}--list-box--expanded.#{$prefix}--list-box--sm .#{$prefix}--list-box__menu { // 32px item height * 5.5 items shown - max-height: convert.to-rem(176px); + max-block-size: convert.to-rem(176px); } // Descendant of a `list-box__menu` that represents a selection for a control @@ -594,24 +594,24 @@ $list-box-menu-width: convert.to-rem(300px); .#{$prefix}--list-box--disabled .#{$prefix}--list-box__menu-item__option:hover { - border-top-color: $border-subtle-01; + border-block-start-color: $border-subtle-01; } .#{$prefix}--layer-two .#{$prefix}--list-box--disabled .#{$prefix}--list-box__menu-item__option:hover { - border-top-color: $border-subtle-02; + border-block-start-color: $border-subtle-02; } .#{$prefix}--layer-three .#{$prefix}--list-box--disabled .#{$prefix}--list-box__menu-item__option:hover { - border-top-color: $border-subtle-03; + border-block-start-color: $border-subtle-03; } .#{$prefix}--list-box__menu-item:first-of-type .#{$prefix}--list-box__menu-item__option { - border-top-color: transparent; + border-block-start-color: transparent; } .#{$prefix}--list-box__menu-item:hover @@ -623,7 +623,7 @@ $list-box-menu-width: convert.to-rem(300px); .#{$prefix}--list-box__menu-item:hover + .#{$prefix}--list-box__menu-item .#{$prefix}--list-box__menu-item__option { - border-top-color: $border-subtle-01; + border-block-start-color: $border-subtle-01; } .#{$prefix}--layer-two @@ -631,7 +631,7 @@ $list-box-menu-width: convert.to-rem(300px); .#{$prefix}--list-box__menu-item:hover + .#{$prefix}--list-box__menu-item .#{$prefix}--list-box__menu-item__option { - border-top-color: $border-subtle-02; + border-block-start-color: $border-subtle-02; } .#{$prefix}--layer-three @@ -639,15 +639,15 @@ $list-box-menu-width: convert.to-rem(300px); .#{$prefix}--list-box__menu-item:hover + .#{$prefix}--list-box__menu-item .#{$prefix}--list-box__menu-item__option { - border-top-color: $border-subtle-03; + border-block-start-color: $border-subtle-03; } .#{$prefix}--layer-two .#{$prefix}--list-box__menu-item__option { - border-top-color: $border-subtle-02; + border-block-start-color: $border-subtle-02; } .#{$prefix}--layer-three .#{$prefix}--list-box__menu-item__option { - border-top-color: $border-subtle-03; + border-block-start-color: $border-subtle-03; } .#{$prefix}--list-box__menu-item__option { @@ -656,16 +656,16 @@ $list-box-menu-width: convert.to-rem(300px); display: block; overflow: hidden; - block-size: convert.to-rem(40px); padding: convert.to-rem(11px) 0; - padding-inline-end: $spacing-06; - border-top: 1px solid transparent; - border-top-color: $border-subtle-01; - border-block-end: 1px solid transparent; margin: 0 $spacing-05; + block-size: convert.to-rem(40px); + border-block-end: 1px solid transparent; + border-block-start: 1px solid transparent; + border-block-start-color: $border-subtle-01; color: $text-secondary; font-weight: normal; line-height: 1rem; + padding-inline-end: $spacing-06; text-decoration: none; text-overflow: ellipsis; transition: border-color $duration-fast-01 motion(standard, productive), @@ -688,14 +688,14 @@ $list-box-menu-width: convert.to-rem(300px); .#{$prefix}--list-box--sm .#{$prefix}--list-box__menu-item__option { block-size: convert.to-rem(32px); + padding-block-end: convert.to-rem(7px); padding-block-start: convert.to-rem(7px); - padding-bottom: convert.to-rem(7px); } .#{$prefix}--list-box--lg .#{$prefix}--list-box__menu-item__option { block-size: convert.to-rem(48px); + padding-block-end: convert.to-rem(15px); padding-block-start: convert.to-rem(15px); - padding-bottom: convert.to-rem(15px); } .#{$prefix}--list-box--disabled @@ -729,7 +729,7 @@ $list-box-menu-width: convert.to-rem(300px); .#{$prefix}--list-box__menu-item[disabled]:hover + .#{$prefix}--list-box__menu-item .#{$prefix}--list-box__menu-item__option { - border-top-color: $border-subtle-01; + border-block-start-color: $border-subtle-01; } .#{$prefix}--layer-two @@ -739,7 +739,7 @@ $list-box-menu-width: convert.to-rem(300px); .#{$prefix}--list-box__menu-item[disabled]:hover + .#{$prefix}--list-box__menu-item .#{$prefix}--list-box__menu-item__option { - border-top-color: $border-subtle-02; + border-block-start-color: $border-subtle-02; } .#{$prefix}--layer-three @@ -749,7 +749,7 @@ $list-box-menu-width: convert.to-rem(300px); .#{$prefix}--list-box__menu-item[disabled]:hover + .#{$prefix}--list-box__menu-item .#{$prefix}--list-box__menu-item__option { - border-top-color: $border-subtle-03; + border-block-start-color: $border-subtle-03; } .#{$prefix}--list-box__menu-item--active @@ -758,7 +758,7 @@ $list-box-menu-width: convert.to-rem(300px); .#{$prefix}--list-box__menu-item:hover + .#{$prefix}--list-box__menu-item .#{$prefix}--list-box__menu-item__option { - border-top-color: transparent; + border-block-start-color: transparent; } .#{$prefix}--list-box.#{$prefix}--list-box--inline @@ -766,9 +766,9 @@ $list-box-menu-width: convert.to-rem(300px); margin: 0 $spacing-03; &:focus { + margin: 0; padding-inline-end: $spacing-03; padding-inline-start: $spacing-03; - margin: 0; } } @@ -783,7 +783,7 @@ $list-box-menu-width: convert.to-rem(300px); .#{$prefix}--list-box__menu-item--highlighted + .#{$prefix}--list-box__menu-item .#{$prefix}--list-box__menu-item__option { - border-top-color: transparent; + border-block-start-color: transparent; } .#{$prefix}--list-box__menu-item--highlighted @@ -792,20 +792,20 @@ $list-box-menu-width: convert.to-rem(300px); } .#{$prefix}--list-box__menu-item--active { - border-bottom-color: $layer-selected; background-color: $layer-selected; + border-block-end-color: $layer-selected; color: $text-primary; } // V11: Possibly deprecate .#{$prefix}--list-box--light .#{$prefix}--list-box__menu-item--active { - border-bottom-color: $layer-selected; background-color: $layer-selected; + border-block-end-color: $layer-selected; } .#{$prefix}--list-box__menu-item--active:hover { - border-bottom-color: $layer-selected-hover; background-color: $layer-selected-hover; + border-block-end-color: $layer-selected-hover; } .#{$prefix}--list-box__menu-item--active @@ -817,21 +817,21 @@ $list-box-menu-width: convert.to-rem(300px); .#{$prefix}--list-box__menu-item--active + .#{$prefix}--list-box__menu-item > .#{$prefix}--list-box__menu-item__option { - border-top-color: transparent; + border-block-start-color: transparent; } .#{$prefix}--list-box__menu-item__selected-icon { position: absolute; - inset-block-start: 50%; - right: convert.to-rem(16px); display: none; fill: $icon-primary; + inset-block-start: 50%; + inset-inline-end: convert.to-rem(16px); transform: translateY(-50%); } .#{$prefix}--list-box--inline .#{$prefix}--list-box__menu-item__selected-icon { - right: convert.to-rem(8px); + inset-inline-end: convert.to-rem(8px); } .#{$prefix}--list-box__menu-item--active @@ -881,8 +881,8 @@ $list-box-menu-width: convert.to-rem(300px); // TODO: remove [role='combobox'] in v11 .#{$prefix}--list-box input[role='combobox'], .#{$prefix}--list-box input[type='text'] { - min-width: 0; background-color: inherit; + min-inline-size: 0; text-overflow: ellipsis; } diff --git a/packages/styles/scss/components/list/_list.scss b/packages/styles/scss/components/list/_list.scss index 780a0faa2f02..27ab561fe672 100644 --- a/packages/styles/scss/components/list/_list.scss +++ b/packages/styles/scss/components/list/_list.scss @@ -67,9 +67,9 @@ .#{$prefix}--list--ordered:not(.#{$prefix}--list--nested) > .#{$prefix}--list__item::before { position: absolute; - inset-inline-start: convert.to-rem(-24px); content: counter(item) '.'; counter-increment: item; + inset-inline-start: convert.to-rem(-24px); } .#{$prefix}--list--ordered.#{$prefix}--list--nested, @@ -82,17 +82,17 @@ &::before { position: absolute; - inset-inline-start: calc(-1 * #{$spacing-05}); // – en dash content: '\002013'; + inset-inline-start: calc(-1 * #{$spacing-05}); } } .#{$prefix}--list--unordered.#{$prefix}--list--nested > .#{$prefix}--list__item::before { - // offset to account for smaller ▪ vs – - inset-inline-start: calc(-1 * #{$spacing-04}); // ▪ square content: '\0025AA'; + // offset to account for smaller ▪ vs – + inset-inline-start: calc(-1 * #{$spacing-04}); } } diff --git a/packages/styles/scss/components/loading/_loading.scss b/packages/styles/scss/components/loading/_loading.scss index 1cb5e2e6bbf7..747f4099a1e1 100644 --- a/packages/styles/scss/components/loading/_loading.scss +++ b/packages/styles/scss/components/loading/_loading.scss @@ -25,8 +25,9 @@ @include component-reset.reset; @include animation.spin; - inline-size: $loading-size; block-size: $loading-size; + + inline-size: $loading-size; } // Animation (Spin by default) @@ -54,8 +55,8 @@ } .#{$prefix}--loading--small { - inline-size: convert.to-rem(16px); block-size: convert.to-rem(16px); + inline-size: convert.to-rem(16px); circle { stroke-width: 16; @@ -84,14 +85,14 @@ .#{$prefix}--loading-overlay { position: fixed; z-index: z('overlay'); - inset-block-start: 0; - inset-inline-start: 0; display: flex; - inline-size: 100%; - block-size: 100%; align-items: center; justify-content: center; background-color: $overlay; + block-size: 100%; + inline-size: 100%; + inset-block-start: 0; + inset-inline-start: 0; transition: background-color $duration-slow-02 motion(standard, expressive); } diff --git a/packages/styles/scss/components/menu-button/_menu-button.scss b/packages/styles/scss/components/menu-button/_menu-button.scss index b7edeab2b2b4..6068a14b4763 100644 --- a/packages/styles/scss/components/menu-button/_menu-button.scss +++ b/packages/styles/scss/components/menu-button/_menu-button.scss @@ -15,7 +15,7 @@ /// @group menu-button @mixin menu-button { .#{$prefix}--menu-button__trigger:not(.#{$prefix}--btn--ghost) { - min-width: 10rem; + min-inline-size: 10rem; } .#{$prefix}--menu-button__trigger svg { diff --git a/packages/styles/scss/components/menu/_menu.scss b/packages/styles/scss/components/menu/_menu.scss index 76daae2af4e2..2b0a0a63a679 100644 --- a/packages/styles/scss/components/menu/_menu.scss +++ b/packages/styles/scss/components/menu/_menu.scss @@ -30,16 +30,16 @@ position: fixed; z-index: z('modal'); - min-width: 10rem; - max-width: 18rem; padding: $spacing-02 0; background-color: $layer; + max-inline-size: 18rem; + min-inline-size: 10rem; opacity: 0; visibility: hidden; } .#{$prefix}--menu--with-icons { - min-width: 12rem; + min-inline-size: 12rem; } .#{$prefix}--menu--open { @@ -64,8 +64,8 @@ @include type-style('body-short-01'); display: grid; - block-size: 2rem; align-items: center; + block-size: 2rem; color: $text-primary; column-gap: $spacing-03; cursor: pointer; @@ -151,9 +151,9 @@ .#{$prefix}--menu-item-divider { display: block; - inline-size: 100%; - block-size: convert.to-rem(1px); background-color: $border-subtle; + block-size: convert.to-rem(1px); + inline-size: 100%; margin-block: $spacing-02; } } diff --git a/packages/styles/scss/components/modal/_modal.scss b/packages/styles/scss/components/modal/_modal.scss index ab3959c29158..c5dff5b9db02 100644 --- a/packages/styles/scss/components/modal/_modal.scss +++ b/packages/styles/scss/components/modal/_modal.scss @@ -25,15 +25,15 @@ .#{$prefix}--modal { position: fixed; z-index: z('modal'); - inset-block-start: 0; - inset-inline-start: 0; display: flex; - inline-size: 100vw; - block-size: 100vh; align-items: center; justify-content: center; background-color: $overlay; + block-size: 100vh; content: ''; + inline-size: 100vw; + inset-block-start: 0; + inset-inline-start: 0; opacity: 0; transition: opacity $duration-moderate-02 motion(exit, expressive), visibility 0ms linear $duration-moderate-02; @@ -78,17 +78,17 @@ } .#{$prefix}--list-box__menu-item__option { - border-top-color: $border-subtle-02; + border-block-start-color: $border-subtle-02; } .#{$prefix}--list-box__menu-item:hover .#{$prefix}--list-box__menu-item__option { - border-top-color: $layer-hover-02; + border-block-start-color: $layer-hover-02; } .#{$prefix}--list-box__menu-item--active:hover .#{$prefix}--list-box__menu-item__option { - border-top-color: $layer-selected-hover-02; + border-block-start-color: $layer-selected-hover-02; } // Fluid inputs @@ -154,15 +154,15 @@ // ----------------------------- .#{$prefix}--modal-container { position: fixed; - inset-block-start: 0; display: grid; overflow: hidden; - inline-size: 100%; - block-size: 100%; - max-height: 100%; background-color: $layer; + block-size: 100%; grid-template-columns: 100%; grid-template-rows: auto 1fr auto; + inline-size: 100%; + inset-block-start: 0; + max-block-size: 100%; // make modal edge visible on high contrast themes (#3880) outline: 3px solid transparent; outline-offset: -3px; @@ -172,14 +172,14 @@ @include breakpoint(md) { position: static; - inline-size: 84%; block-size: auto; - max-height: 90%; + inline-size: 84%; + max-block-size: 90%; } @include breakpoint(lg) { inline-size: 60%; - max-height: 84%; + max-block-size: 84%; } @include breakpoint(xlg) { @@ -198,17 +198,17 @@ @include type-style('body-01'); position: relative; - // Required to accommodate focus outline's negative offset: - padding-block-start: $spacing-03; - // anything besides text/p spans full width, with just 16px padding - padding-inline-end: $spacing-05; - padding-inline-start: $spacing-05; - margin-bottom: $spacing-09; color: $text-primary; font-weight: 400; grid-column: 1/-1; grid-row: 2/-2; + margin-block-end: $spacing-09; overflow-y: auto; + // Required to accommodate focus outline's negative offset: + padding-block-start: $spacing-03; + // anything besides text/p spans full width, with just 16px padding + padding-inline-end: $spacing-05; + padding-inline-start: $spacing-05; &:focus { @include focus-outline('outline'); @@ -240,29 +240,29 @@ // Modal header // ----------------------------- .#{$prefix}--modal-header { + grid-column: 1/-1; + grid-row: 1/1; + margin-block-end: $spacing-03; padding-block-start: $spacing-05; padding-inline-end: $spacing-09; padding-inline-start: $spacing-05; - margin-bottom: $spacing-03; - grid-column: 1/-1; - grid-row: 1/1; } .#{$prefix}--modal-header__label { @include component-reset.reset; @include type-style('label-01'); - margin-bottom: $spacing-02; color: $text-secondary; + margin-block-end: $spacing-02; } .#{$prefix}--modal-header__heading { @include component-reset.reset; @include type-style('heading-03'); + color: $text-primary; // padding should take into account the left and right padding of modal container padding-inline-end: calc(20% - $spacing-09); - color: $text-primary; } // ----------------------------- @@ -285,7 +285,7 @@ @include breakpoint(lg) { inline-size: 32%; - max-height: 48%; + max-block-size: 48%; } @include breakpoint(xlg) { @@ -313,7 +313,7 @@ @include breakpoint(lg) { inline-size: 42%; - max-height: 72%; + max-block-size: 72%; .#{$prefix}--modal-content > p, .#{$prefix}--modal-content__regular-content { @@ -336,7 +336,7 @@ @include breakpoint(lg) { inline-size: 84%; - max-height: 96%; + max-block-size: 96%; } @include breakpoint(xlg) { @@ -349,19 +349,19 @@ // ----------------------------- // Required so overflow-indicator disappears at end of content .#{$prefix}--modal-scroll-content > *:last-child { - padding-bottom: $spacing-07; + padding-block-end: $spacing-07; } .#{$prefix}--modal-content--overflow-indicator { position: absolute; - inset-block-end: $spacing-09; - inset-inline-start: 0; - inline-size: 100%; - block-size: convert.to-rem(32px); background-image: linear-gradient(to bottom, transparent, $layer); + block-size: convert.to-rem(32px); content: ''; grid-column: 1/-1; grid-row: 2/-2; + inline-size: 100%; + inset-block-end: $spacing-09; + inset-inline-start: 0; pointer-events: none; } @@ -378,13 +378,13 @@ .#{$prefix}--modal-content:focus ~ .#{$prefix}--modal-content--overflow-indicator { - inline-size: calc(100% - 4px); margin: 0 2px 2px; + inline-size: calc(100% - 4px); } @media screen and (-ms-high-contrast: active) { .#{$prefix}--modal-scroll-content > *:last-child { - padding-bottom: 0; + padding-block-end: 0; } .#{$prefix}--modal-content--overflow-indicator { @@ -397,21 +397,21 @@ // ----------------------------- .#{$prefix}--modal-footer { display: flex; - block-size: convert.to-rem(64px); justify-content: flex-end; - margin-top: auto; + block-size: convert.to-rem(64px); grid-column: 1/-1; grid-row: -1/-1; + margin-block-start: auto; } .#{$prefix}--modal-footer .#{$prefix}--btn { - max-width: none; - block-size: convert.to-rem(64px); flex: 0 1 50%; align-items: baseline; - padding-block-start: calc($spacing-05 - convert.to-rem(2px)); - padding-bottom: $spacing-07; margin: 0; + block-size: convert.to-rem(64px); + max-inline-size: none; + padding-block-end: $spacing-07; + padding-block-start: calc($spacing-05 - convert.to-rem(2px)); } .#{$prefix}--modal-footer--three-button .#{$prefix}--btn { @@ -425,15 +425,15 @@ .#{$prefix}--modal-close { position: absolute; z-index: 2; - inset-block-start: 0; - right: 0; overflow: hidden; - inline-size: 3rem; - block-size: 3rem; padding: convert.to-rem(12px); border: 2px solid transparent; background-color: transparent; + block-size: 3rem; cursor: pointer; + inline-size: 3rem; + inset-block-start: 0; + inset-inline-end: 0; transition: background-color $duration-fast-02 motion(standard, productive); &:hover { @@ -451,9 +451,9 @@ } .#{$prefix}--modal-close__icon { - inline-size: convert.to-rem(20px); block-size: convert.to-rem(20px); fill: $icon-primary; + inline-size: convert.to-rem(20px); } .#{$prefix}--body--with-modal-open { diff --git a/packages/styles/scss/components/multiselect/_multiselect.scss b/packages/styles/scss/components/multiselect/_multiselect.scss index 27674963dd16..38f257027245 100644 --- a/packages/styles/scss/components/multiselect/_multiselect.scss +++ b/packages/styles/scss/components/multiselect/_multiselect.scss @@ -20,9 +20,9 @@ @mixin multiselect { .#{$prefix}--multi-select .#{$prefix}--list-box__field--wrapper { display: inline-flex; - inline-size: 100%; - block-size: calc(100% + 1px); align-items: center; + block-size: calc(100% + 1px); + inline-size: 100%; } .#{$prefix}--multi-select .#{$prefix}--list-box__field:focus { @@ -34,21 +34,21 @@ } .#{$prefix}--multi-select .#{$prefix}--tag { - min-width: auto; margin: 0 $spacing-03 0 $spacing-05; + min-inline-size: auto; } .#{$prefix}--multi-select .#{$prefix}--list-box__menu { - min-width: auto; + min-inline-size: auto; } .#{$prefix}--multi-select .#{$prefix}--list-box__menu-item__option .#{$prefix}--checkbox-wrapper { display: flex; - inline-size: 100%; - block-size: 100%; align-items: center; + block-size: 100%; + inline-size: 100%; } .#{$prefix}--multi-select @@ -115,8 +115,8 @@ .#{$prefix}--multi-select--filterable.#{$prefix}--multi-select--inline, .#{$prefix}--multi-select--filterable.#{$prefix}--multi-select--inline .#{$prefix}--text-input { - border-block-end: 0; background-color: transparent; + border-block-end: 0; } .#{$prefix}--multi-select:not(.#{$prefix}--list-box--expanded) @@ -126,8 +126,8 @@ .#{$prefix}--multi-select.#{$prefix}--multi-select--readonly, .#{$prefix}--multi-select.#{$prefix}--multi-select--readonly:hover { - border-bottom-color: $border-subtle; background-color: transparent; + border-block-end-color: $border-subtle; } .#{$prefix}--multi-select.#{$prefix}--multi-select--readonly diff --git a/packages/styles/scss/components/notification/_actionable-notification.scss b/packages/styles/scss/components/notification/_actionable-notification.scss index 18f176b613a8..e81609ca18d4 100644 --- a/packages/styles/scss/components/notification/_actionable-notification.scss +++ b/packages/styles/scss/components/notification/_actionable-notification.scss @@ -31,34 +31,33 @@ position: relative; display: flex; - inline-size: 100%; - min-width: convert.to-rem(288px); - max-width: convert.to-rem(288px); - block-size: auto; - min-block-size: convert.to-rem(48px); flex-wrap: wrap; - + block-size: auto; color: $text-inverse; + inline-size: 100%; + max-inline-size: convert.to-rem(288px); + min-block-size: convert.to-rem(48px); + min-inline-size: convert.to-rem(288px); @include breakpoint(md) { - max-width: convert.to-rem(608px); flex-wrap: nowrap; + max-inline-size: convert.to-rem(608px); } @include breakpoint(lg) { - max-width: convert.to-rem(736px); + max-inline-size: convert.to-rem(736px); } @include breakpoint(max) { - max-width: convert.to-rem(832px); + max-inline-size: convert.to-rem(832px); } } .#{$prefix}--actionable-notification--toast { - min-width: convert.to-rem(288px); - max-width: convert.to-rem(288px); flex-wrap: wrap; box-shadow: 0 2px 6px 0 rgb(0 0 0 / 20%); + max-inline-size: convert.to-rem(288px); + min-inline-size: convert.to-rem(288px); } .#{$prefix}--actionable-notification:not( @@ -93,15 +92,15 @@ .#{$prefix}--actionable-notification--toast )::before { position: absolute; - inset-block-start: 0; - inset-inline-start: 0; - inline-size: 100%; - block-size: 100%; box-sizing: border-box; border-width: 1px 1px 1px 0; border-style: solid; + block-size: 100%; content: ''; filter: opacity(0.4); + inline-size: 100%; + inset-block-start: 0; + inset-inline-start: 0; pointer-events: none; } @@ -208,13 +207,13 @@ .#{$prefix}--actionable-notification .#{$prefix}--inline-notification__icon { flex-shrink: 0; - margin-top: convert.to-rem(14px); + margin-block-start: convert.to-rem(14px); margin-inline-end: $spacing-05; } .#{$prefix}--actionable-notification .#{$prefix}--toast-notification__icon { flex-shrink: 0; - margin-top: $spacing-05; + margin-block-start: $spacing-05; margin-inline-end: $spacing-05; } @@ -245,8 +244,8 @@ .#{$prefix}--actionable-notification__title { @include type-style('heading-compact-01'); - margin-inline-end: $spacing-02; font-weight: 600; + margin-inline-end: $spacing-02; word-break: break-word; } @@ -258,8 +257,8 @@ .#{$prefix}--actionable-notification__subtitle { @include type-style('body-compact-01'); - margin-top: 0; color: $text-inverse; + margin-block-start: 0; word-break: break-word; } @@ -270,7 +269,7 @@ /* Ghost action button when inline */ .#{$prefix}--actionable-notification__action-button.#{$prefix}--btn--ghost { block-size: convert.to-rem(32px); - margin-bottom: $spacing-03; + margin-block-end: $spacing-03; margin-inline-start: $spacing-08; @include breakpoint(md) { @@ -316,16 +315,15 @@ /* Tertiary action button when not inline (toast) */ .#{$prefix}--actionable-notification__action-button.#{$prefix}--btn--tertiary { - padding-inline-end: $spacing-05; - padding-inline-start: $spacing-05; - margin-bottom: $spacing-05; - + margin-block-end: $spacing-05; // Button should be left aligned with text. // 20px is the width of the notification icon // 2px is the width of the left border that should be negated margin-inline-start: calc( #{$spacing-07} + #{convert.to-rem(20px)} - #{convert.to-rem(2px)} ); + padding-inline-end: $spacing-05; + padding-inline-start: $spacing-05; } // Tertiary button styles by default use mostly "inverse" tokens. Since the non-low-contrast notification @@ -414,20 +412,20 @@ @include focus-outline('reset'); position: absolute; - inset-block-start: 0; - right: 0; display: flex; - inline-size: convert.to-rem(48px); - min-width: convert.to-rem(48px); - max-width: convert.to-rem(48px); - block-size: convert.to-rem(48px); flex-direction: column; align-items: center; justify-content: center; padding: 0; border: none; background: transparent; + block-size: convert.to-rem(48px); cursor: pointer; + inline-size: convert.to-rem(48px); + inset-block-start: 0; + inset-inline-end: 0; + max-inline-size: convert.to-rem(48px); + min-inline-size: convert.to-rem(48px); transition: outline $duration-fast-02 motion(standard, productive), background-color $duration-fast-02 motion(standard, productive); diff --git a/packages/styles/scss/components/notification/_inline-notification.scss b/packages/styles/scss/components/notification/_inline-notification.scss index c23b9862067a..0d6a8c05d0c9 100644 --- a/packages/styles/scss/components/notification/_inline-notification.scss +++ b/packages/styles/scss/components/notification/_inline-notification.scss @@ -28,26 +28,26 @@ position: relative; display: flex; - inline-size: 100%; - min-width: convert.to-rem(288px); - max-width: convert.to-rem(288px); - block-size: auto; - min-block-size: convert.to-rem(48px); flex-wrap: wrap; + block-size: auto; color: $text-inverse; + inline-size: 100%; + max-inline-size: convert.to-rem(288px); + min-block-size: convert.to-rem(48px); + min-inline-size: convert.to-rem(288px); @include breakpoint(md) { - max-width: convert.to-rem(608px); flex-wrap: nowrap; + max-inline-size: convert.to-rem(608px); } @include breakpoint(lg) { - max-width: convert.to-rem(736px); + max-inline-size: convert.to-rem(736px); } @include breakpoint(max) { - max-width: convert.to-rem(832px); + max-inline-size: convert.to-rem(832px); } } @@ -80,15 +80,15 @@ &::before { position: absolute; - inset-block-start: 0; - inset-inline-start: 0; - inline-size: 100%; - block-size: 100%; box-sizing: border-box; border-width: 1px 1px 1px 0; border-style: solid; + block-size: 100%; content: ''; filter: opacity(0.4); + inline-size: 100%; + inset-block-start: 0; + inset-inline-start: 0; pointer-events: none; } } @@ -191,7 +191,7 @@ .#{$prefix}--inline-notification__icon { flex-shrink: 0; - margin-top: convert.to-rem(14px); + margin-block-start: convert.to-rem(14px); margin-inline-end: $spacing-05; } @@ -215,7 +215,7 @@ .#{$prefix}--inline-notification__action-button.#{$prefix}--btn--ghost { block-size: convert.to-rem(32px); - margin-bottom: $spacing-03; + margin-block-end: $spacing-03; margin-inline-start: $spacing-08; @include breakpoint(md) { @@ -263,20 +263,20 @@ @include focus-outline('reset'); position: absolute; - inset-block-start: 0; - right: 0; display: flex; - inline-size: convert.to-rem(48px); - min-width: convert.to-rem(48px); - max-width: convert.to-rem(48px); - block-size: convert.to-rem(48px); flex-direction: column; align-items: center; justify-content: center; padding: 0; border: none; background: transparent; + block-size: convert.to-rem(48px); cursor: pointer; + inline-size: convert.to-rem(48px); + inset-block-start: 0; + inset-inline-end: 0; + max-inline-size: convert.to-rem(48px); + min-inline-size: convert.to-rem(48px); transition: outline $duration-fast-02 motion(standard, productive), background-color $duration-fast-02 motion(standard, productive); diff --git a/packages/styles/scss/components/notification/_mixins.scss b/packages/styles/scss/components/notification/_mixins.scss index dab3504a4c00..ad73943b2fe5 100644 --- a/packages/styles/scss/components/notification/_mixins.scss +++ b/packages/styles/scss/components/notification/_mixins.scss @@ -31,8 +31,8 @@ /// @access private /// @group notification @mixin notification--experimental($color, $background-color) { - border-inline-start: 3px solid $color; background: $background-color; + border-inline-start: 3px solid $color; .#{$prefix}--inline-notification__icon, .#{$prefix}--toast-notification__icon, diff --git a/packages/styles/scss/components/notification/_toast-notification.scss b/packages/styles/scss/components/notification/_toast-notification.scss index a6aaaf781beb..2c055d2e0cf2 100644 --- a/packages/styles/scss/components/notification/_toast-notification.scss +++ b/packages/styles/scss/components/notification/_toast-notification.scss @@ -29,12 +29,11 @@ @include reset; display: flex; - inline-size: convert.to-rem(288px); block-size: auto; - padding-inline-start: convert.to-rem(13px); - box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.2); color: $text-inverse; + inline-size: convert.to-rem(288px); + padding-inline-start: convert.to-rem(13px); @include breakpoint(max) { inline-size: convert.to-rem(352px); @@ -141,7 +140,7 @@ .#{$prefix}--toast-notification__icon { flex-shrink: 0; - margin-top: $spacing-05; + margin-block-start: $spacing-05; margin-inline-end: $spacing-05; } @@ -153,18 +152,18 @@ @include focus-outline('reset'); display: flex; - inline-size: convert.to-rem(48px); - min-width: convert.to-rem(48px); - block-size: convert.to-rem(48px); - min-block-size: convert.to-rem(48px); flex-direction: column; align-items: center; justify-content: center; padding: 0; border: none; - margin-inline-start: auto; background-color: transparent; + block-size: convert.to-rem(48px); cursor: pointer; + inline-size: convert.to-rem(48px); + margin-inline-start: auto; + min-block-size: convert.to-rem(48px); + min-inline-size: convert.to-rem(48px); transition: outline $transition-base, background-color $transition-base; &:focus { @@ -191,17 +190,16 @@ .#{$prefix}--toast-notification__title { @include type-style('heading-compact-01'); - margin-top: $spacing-05; font-weight: 600; + margin-block-start: $spacing-05; word-break: break-word; } .#{$prefix}--toast-notification__subtitle { @include type-style('body-compact-01'); - margin-top: 0; - margin-bottom: $spacing-05; color: $text-inverse; + margin-block: 0 $spacing-05; word-break: break-word; } @@ -213,9 +211,9 @@ .#{$prefix}--toast-notification__caption { @include type-style('body-compact-01'); - padding-block-start: $spacing-03; - margin-bottom: $spacing-05; color: $text-inverse; + margin-block-end: $spacing-05; + padding-block-start: $spacing-03; } .#{$prefix}--toast-notification--low-contrast diff --git a/packages/styles/scss/components/number-input/_number-input.scss b/packages/styles/scss/components/number-input/_number-input.scss index 670ada8bef66..a8c761dce05b 100644 --- a/packages/styles/scss/components/number-input/_number-input.scss +++ b/packages/styles/scss/components/number-input/_number-input.scss @@ -28,8 +28,8 @@ position: relative; display: flex; - inline-size: 100%; flex-direction: column; + inline-size: 100%; } .#{$prefix}--number @@ -43,23 +43,23 @@ @include focus-outline('reset'); display: inline-flex; - inline-size: 100%; - min-width: 9.375rem; - block-size: convert.to-rem(40px); box-sizing: border-box; - padding-inline-end: convert.to-rem(96px); - padding-inline-start: $spacing-05; border: 0; - border-block-end: convert.to-rem(1px) solid $border-strong; // Firefox: Hide spinner (up and down buttons) -moz-appearance: textfield; appearance: textfield; background-color: $field; + block-size: convert.to-rem(40px); + border-block-end: convert.to-rem(1px) solid $border-strong; border-radius: 0; color: $text-primary; font-family: font-family('sans'); font-weight: 400; + inline-size: 100%; + min-inline-size: 9.375rem; + padding-inline-end: convert.to-rem(96px); + padding-inline-start: $spacing-05; transition: background-color $duration-fast-01 motion(standard, productive), outline $duration-fast-01 motion(standard, productive); @@ -120,8 +120,8 @@ } .#{$prefix}--number input[type='number']:disabled { - border-bottom-color: transparent; background-color: $field; + border-block-end-color: transparent; color: $text-disabled; cursor: not-allowed; } @@ -136,15 +136,15 @@ @include reset; position: absolute; - // vertically center controls within parent container on IE11 - inset-block-start: 50%; - right: 0; display: flex; - inline-size: convert.to-rem(80px); - block-size: 100%; flex-direction: row; align-items: center; justify-content: center; + block-size: 100%; + inline-size: convert.to-rem(80px); + // vertically center controls within parent container on IE11 + inset-block-start: 50%; + inset-inline-end: 0; transform: translateY(-50%); } @@ -153,22 +153,22 @@ position: relative; display: inline-flex; - block-size: 100%; align-items: center; justify-content: center; + block-size: 100%; border-block-end: convert.to-rem(1px) solid $border-strong; color: $icon-primary; &::before, &::after { position: absolute; - inset-block-start: convert.to-rem(2px); display: block; - inline-size: convert.to-rem(2px); + background-color: $field; // block-size: calc(100% - 4px) is calculated differently in Safari block-size: convert.to-rem(36px); - background-color: $field; content: ''; + inline-size: convert.to-rem(2px); + inset-block-start: convert.to-rem(2px); } &::before { @@ -176,7 +176,7 @@ } &::after { - right: 0; + inset-inline-end: 0; } svg { @@ -210,7 +210,7 @@ } &:disabled { - border-bottom-color: transparent; + border-block-end-color: transparent; color: $text-disabled; cursor: not-allowed; } @@ -230,7 +230,7 @@ input[type='number']:focus ~ .#{$prefix}--number__controls .#{$prefix}--number__control-btn { - border-bottom-color: transparent; + border-block-end-color: transparent; &:hover { @include focus-outline('outline'); @@ -241,7 +241,7 @@ input[type='number'][data-invalid] ~ .#{$prefix}--number__controls .#{$prefix}--number__control-btn { - border-bottom-color: transparent; + border-block-end-color: transparent; } // add invalid outline to number controls only when invalid input is not focused @@ -280,9 +280,9 @@ .#{$prefix}--number__rule-divider { position: absolute; z-index: z('overlay'); - inline-size: convert.to-rem(1px); - block-size: convert.to-rem(16px); background-color: $border-subtle; + block-size: convert.to-rem(16px); + inline-size: convert.to-rem(1px); &:first-of-type { order: 0; @@ -292,8 +292,8 @@ // rule divider styles .#{$prefix}--number__controls .#{$prefix}--number__rule-divider:first-of-type { - inset-inline-start: 0; background-color: transparent; + inset-inline-start: 0; } .#{$prefix}--number__invalid @@ -331,33 +331,33 @@ .#{$prefix}--number__invalid { position: absolute; - right: convert.to-rem(96px); fill: $support-error; + inset-inline-end: convert.to-rem(96px); } .#{$prefix}--number--lg .#{$prefix}--number__invalid { - right: convert.to-rem(112px); + inset-inline-end: convert.to-rem(112px); } .#{$prefix}--number--sm .#{$prefix}--number__invalid { - right: convert.to-rem(80px); + inset-inline-end: convert.to-rem(80px); } .#{$prefix}--number__invalid + .#{$prefix}--number__rule-divider { position: absolute; - right: convert.to-rem(80px); + inset-inline-end: convert.to-rem(80px); } .#{$prefix}--number--lg .#{$prefix}--number__invalid + .#{$prefix}--number__rule-divider { - right: convert.to-rem(96px); + inset-inline-end: convert.to-rem(96px); } .#{$prefix}--number--sm .#{$prefix}--number__invalid + .#{$prefix}--number__rule-divider { - right: convert.to-rem(64px); + inset-inline-end: convert.to-rem(64px); } .#{$prefix}--number__control-btn.down-icon:hover @@ -453,7 +453,7 @@ .#{$prefix}--number--nolabel .#{$prefix}--label + .#{$prefix}--form__helper-text { - margin-top: 0; + margin-block-start: 0; } // No steppers @@ -462,13 +462,13 @@ } .#{$prefix}--number--nosteppers .#{$prefix}--number__invalid { - right: convert.to-rem(16px); + inset-inline-end: convert.to-rem(16px); } // Readonly .#{$prefix}--number--readonly input[type='number'] { - border-bottom-color: $border-subtle; background: transparent; + border-block-end-color: $border-subtle; } .#{$prefix}--number--readonly .#{$prefix}--number__control-btn { @@ -508,27 +508,27 @@ .#{$prefix}--number.#{$prefix}--skeleton { @include skeleton; - inline-size: 100%; block-size: 2.5rem; + inline-size: 100%; input[type='number'] { display: none; } } - // Windows HCM fix - /* stylelint-disable */ - .#{$prefix}--number__control-btn:hover, - .#{$prefix}--number__control-btn:focus { - @include high-contrast-mode('focus'); - } + // // Windows HCM fix + // /* stylelint-disable */ + // .#{$prefix}--number__control-btn:hover, + // .#{$prefix}--number__control-btn:focus { + // @include high-contrast-mode('focus'); + // } - .#{$prefix}--number__control-btn { - @include high-contrast-mode('outline'); - } + // .#{$prefix}--number__control-btn { + // @include high-contrast-mode('outline'); + // } - .#{$prefix}--number__control-btn svg { - @include high-contrast-mode('icon-fill'); - } - /* stylelint-enable */ + // .#{$prefix}--number__control-btn svg { + // @include high-contrast-mode('icon-fill'); + // } + // /* stylelint-enable */ } diff --git a/packages/styles/scss/components/overflow-menu/_overflow-menu.scss b/packages/styles/scss/components/overflow-menu/_overflow-menu.scss index b01124b897f2..301c0c018664 100644 --- a/packages/styles/scss/components/overflow-menu/_overflow-menu.scss +++ b/packages/styles/scss/components/overflow-menu/_overflow-menu.scss @@ -33,12 +33,12 @@ position: relative; display: flex; - inline-size: convert.to-rem(40px); - block-size: convert.to-rem(40px); - min-block-size: convert.to-rem(40px); align-items: center; justify-content: center; + block-size: convert.to-rem(40px); cursor: pointer; + inline-size: convert.to-rem(40px); + min-block-size: convert.to-rem(40px); transition: outline $duration-fast-02 motion(entrance, productive), background-color $duration-fast-02 motion(entrance, productive); @@ -56,13 +56,13 @@ } .#{$prefix}--overflow-menu--sm { - inline-size: convert.to-rem(32px); block-size: convert.to-rem(32px); + inline-size: convert.to-rem(32px); } .#{$prefix}--overflow-menu--lg { - inline-size: convert.to-rem(48px); block-size: convert.to-rem(48px); + inline-size: convert.to-rem(48px); } // Overwrite Icon Tooltip focus styles @@ -90,9 +90,9 @@ } .#{$prefix}--overflow-menu__icon { - inline-size: convert.to-rem(16px); block-size: convert.to-rem(16px); fill: $icon-primary; + inline-size: convert.to-rem(16px); } .#{$prefix}--overflow-menu__wrapper { @@ -105,13 +105,13 @@ position: absolute; z-index: z('floating'); - inset-block-start: 32px; - inset-inline-start: 0; display: none; - inline-size: convert.to-rem(160px); flex-direction: column; align-items: flex-start; background-color: $layer; + inline-size: convert.to-rem(160px); + inset-block-start: 32px; + inset-inline-start: 0; list-style: none; &::after { @@ -147,31 +147,31 @@ .#{$prefix}--overflow-menu-options[data-floating-menu-direction='bottom']:not( .#{$prefix}--breadcrumb-menu-options )::after { + block-size: convert.to-rem(3px); + inline-size: convert.to-rem(40px); inset-block-start: convert.to-rem(-3px); inset-inline-start: 0; - inline-size: convert.to-rem(40px); - block-size: convert.to-rem(3px); } .#{$prefix}--overflow-menu-options[data-floating-menu-direction='top']::after { + block-size: convert.to-rem(8px); + inline-size: convert.to-rem(40px); inset-block-end: convert.to-rem(-8px); inset-inline-start: 0; - inline-size: convert.to-rem(40px); - block-size: convert.to-rem(8px); } .#{$prefix}--overflow-menu-options[data-floating-menu-direction='left']::after { - inset-block-start: 0; - right: convert.to-rem(-6px); - inline-size: convert.to-rem(6px); block-size: convert.to-rem(40px); + inline-size: convert.to-rem(6px); + inset-block-start: 0; + inset-inline-end: convert.to-rem(-6px); } .#{$prefix}--overflow-menu-options[data-floating-menu-direction='right']::after { + block-size: convert.to-rem(40px); + inline-size: convert.to-rem(6px); inset-block-start: 0; inset-inline-start: convert.to-rem(-6px); - inline-size: convert.to-rem(6px); - block-size: convert.to-rem(40px); } .#{$prefix}--overflow-menu-options--sm.#{$prefix}--overflow-menu-options { @@ -200,14 +200,14 @@ .#{$prefix}--overflow-menu--flip.#{$prefix}--overflow-menu-options[data-floating-menu-direction='top']::after, .#{$prefix}--overflow-menu--flip.#{$prefix}--overflow-menu-options[data-floating-menu-direction='bottom']::after { - right: 0; + inset-inline-end: 0; inset-inline-start: auto; } .#{$prefix}--overflow-menu--flip.#{$prefix}--overflow-menu-options[data-floating-menu-direction='left']::after, .#{$prefix}--overflow-menu--flip.#{$prefix}--overflow-menu-options[data-floating-menu-direction='right']::after { - inset-block-start: auto; inset-block-end: 0; + inset-block-start: auto; } .#{$prefix}--overflow-menu-options--open { @@ -222,11 +222,11 @@ @include component-reset.reset; display: flex; - inline-size: 100%; - block-size: convert.to-rem(40px); align-items: center; padding: 0; background-color: transparent; + block-size: convert.to-rem(40px); + inline-size: 100%; transition: background-color $duration-fast-02 motion(entrance, productive); } @@ -241,11 +241,11 @@ } .#{$prefix}--overflow-menu--divider { - border-top: 1px solid $border-subtle; + border-block-start: 1px solid $border-subtle; } .#{$prefix}--overflow-menu--light .#{$prefix}--overflow-menu--divider { - border-top: 1px solid $border-subtle; + border-block-start: 1px solid $border-subtle; } a.#{$prefix}--overflow-menu-options__btn::before { @@ -260,18 +260,18 @@ @include focus-outline('reset'); display: inline-flex; - inline-size: 100%; - max-width: 11.25rem; - block-size: 100%; align-items: center; padding: 0 $spacing-05; border: none; background-color: transparent; + block-size: 100%; color: $text-secondary; cursor: pointer; font-family: inherit; font-weight: 400; - text-align: left; + inline-size: 100%; + max-inline-size: 11.25rem; + text-align: start; transition: outline $duration-fast-02 motion(entrance, productive), background-color $duration-fast-02 motion(entrance, productive), color $duration-fast-02 motion(entrance, productive); diff --git a/packages/styles/scss/components/pagination-nav/_mixins.scss b/packages/styles/scss/components/pagination-nav/_mixins.scss index cc01d2a88f9c..d861984cd934 100644 --- a/packages/styles/scss/components/pagination-nav/_mixins.scss +++ b/packages/styles/scss/components/pagination-nav/_mixins.scss @@ -17,13 +17,13 @@ &:not(.#{$prefix}--pagination-nav__page--direction) { &::after { position: absolute; - inset-block-end: 0; - inset-inline-start: 50%; display: block; - inline-size: 0; - block-size: $spacing-02; background-color: $border-interactive; + block-size: $spacing-02; content: ''; + inline-size: 0; + inset-block-end: 0; + inset-inline-start: 50%; opacity: 0; transition: width $duration-fast-02 motion(standard, productive); @@ -35,8 +35,8 @@ .#{$prefix}--pagination-nav__page--active + &::after, &.#{$prefix}--pagination-nav__page--active::after { - inset-inline-start: calc(50% - #{$spacing-05 * 0.5}); inline-size: $spacing-05; + inset-inline-start: calc(50% - #{$spacing-05 * 0.5}); opacity: 1; } } diff --git a/packages/styles/scss/components/pagination-nav/_pagination-nav.scss b/packages/styles/scss/components/pagination-nav/_pagination-nav.scss index 93a1e6b7e61b..31ecc7307422 100644 --- a/packages/styles/scss/components/pagination-nav/_pagination-nav.scss +++ b/packages/styles/scss/components/pagination-nav/_pagination-nav.scss @@ -75,12 +75,12 @@ position: relative; display: block; - min-width: $button-min-width; padding: $button-padding; border-radius: 0; color: $text-primary; font-weight: $font-weight; line-height: 1; + min-inline-size: $button-min-width; outline: 0; text-align: center; text-decoration: none; @@ -121,10 +121,10 @@ .#{$prefix}--pagination-nav__page--direction { display: flex; - inline-size: $button-direction-size; - block-size: $button-direction-size; align-items: center; justify-content: center; + block-size: $button-direction-size; + inline-size: $button-direction-size; line-height: 0; } @@ -133,8 +133,8 @@ } .#{$prefix}--pagination-nav__page--select { - max-height: $button-min-width; appearance: none; + max-block-size: $button-min-width; text-indent: calc(50% - 4.5px); // Override some Firefox user-agent styles @-moz-document url-prefix() { @@ -144,9 +144,9 @@ .#{$prefix}--pagination-nav__select-icon-wrapper { position: absolute; - inset-block-start: 0; - inline-size: 100%; block-size: 100%; + inline-size: 100%; + inset-block-start: 0; pointer-events: none; @include pseudo-underline(); diff --git a/packages/styles/scss/components/pagination/_pagination.scss b/packages/styles/scss/components/pagination/_pagination.scss index 998b845c1d97..8c68ca39c79a 100644 --- a/packages/styles/scss/components/pagination/_pagination.scss +++ b/packages/styles/scss/components/pagination/_pagination.scss @@ -24,7 +24,7 @@ /// @group pagination @mixin pagination { .#{$prefix}--data-table-container + .#{$prefix}--pagination { - border-top: 0; + border-block-start: 0; } .#{$prefix}--pagination { @@ -32,12 +32,12 @@ @include type-style('body-compact-01'); display: flex; - inline-size: calc(100% - 1px); - min-block-size: convert.to-rem(40px); align-items: center; justify-content: space-between; - border-top: 1px solid $border-subtle; background-color: $layer; + border-block-start: 1px solid $border-subtle; + inline-size: calc(100% - 1px); + min-block-size: convert.to-rem(40px); overflow-x: auto; @include breakpoint('md') { @@ -74,8 +74,8 @@ } .#{$prefix}--pagination .#{$prefix}--select { - block-size: 100%; align-items: center; + block-size: 100%; } .#{$prefix}--pagination .#{$prefix}--select-input--inline__wrapper { @@ -86,10 +86,12 @@ .#{$prefix}--pagination .#{$prefix}--select-input { @include type-style('body-compact-01'); - inline-size: auto; - min-width: auto; block-size: 100%; + + inline-size: auto; line-height: convert.to-rem(40px); + + min-inline-size: auto; } // Extra specificity is needed to preserve padding @@ -143,8 +145,8 @@ .#{$prefix}--pagination__left, .#{$prefix}--pagination__right { display: flex; - block-size: 100%; align-items: center; + block-size: 100%; } .#{$prefix}--pagination__left > .#{$prefix}--form-item, @@ -191,8 +193,8 @@ } span.#{$prefix}--pagination__text { - margin-inline-start: $spacing-05; color: $text-primary; + margin-inline-start: $spacing-05; } span.#{$prefix}--pagination__text.#{$prefix}--pagination__items-count { @@ -204,17 +206,17 @@ @include component-reset.reset; display: flex; - inline-size: convert.to-rem(40px); - block-size: convert.to-rem(40px); - min-block-size: convert.to-rem(32px); align-items: center; justify-content: center; border: none; - border-inline-start: 1px solid $border-subtle; margin: 0; background: none; + block-size: convert.to-rem(40px); + border-inline-start: 1px solid $border-subtle; cursor: pointer; fill: $icon-primary; + inline-size: convert.to-rem(40px); + min-block-size: convert.to-rem(32px); transition: outline $duration-fast-02 motion(standard, productive), background-color $duration-fast-02 motion(standard, productive); } @@ -227,15 +229,15 @@ .#{$prefix}--pagination--sm .#{$prefix}--pagination__button, .#{$prefix}--pagination--sm .#{$prefix}--btn--ghost.#{$prefix}--pagination__button { - inline-size: convert.to-rem(32px); block-size: convert.to-rem(32px); + inline-size: convert.to-rem(32px); } .#{$prefix}--pagination--lg .#{$prefix}--pagination__button, .#{$prefix}--pagination--lg .#{$prefix}--btn--ghost.#{$prefix}--pagination__button { - inline-size: convert.to-rem(48px); block-size: convert.to-rem(48px); + inline-size: convert.to-rem(48px); } .#{$prefix}--pagination__button:focus, @@ -268,8 +270,8 @@ // Skeleton state .#{$prefix}--pagination.#{$prefix}--skeleton .#{$prefix}--skeleton__text { + margin-block-end: 0; margin-inline-end: 1rem; - margin-bottom: 0; } // Windows HCM fix diff --git a/packages/styles/scss/components/pagination/_unstable_pagination.scss b/packages/styles/scss/components/pagination/_unstable_pagination.scss index ee22d4c3e23f..d7a2784edd8c 100644 --- a/packages/styles/scss/components/pagination/_unstable_pagination.scss +++ b/packages/styles/scss/components/pagination/_unstable_pagination.scss @@ -25,13 +25,13 @@ @include type-style('body-compact-01'); display: flex; - inline-size: 100%; - min-block-size: convert.to-rem(40px); align-items: center; justify-content: space-between; - border-top: 1px solid $border-subtle; - border-block-end: 1px solid transparent; background-color: $layer; + border-block-end: 1px solid transparent; + border-block-start: 1px solid $border-subtle; + inline-size: 100%; + min-block-size: convert.to-rem(40px); } .#{$prefix}--unstable-pagination__text { @@ -46,8 +46,8 @@ .#{$prefix}--unstable-pagination__left, .#{$prefix}--unstable-pagination__right { display: flex; - block-size: 100%; align-items: center; + block-size: 100%; } .#{$prefix}--unstable-pagination__left { @@ -74,26 +74,26 @@ @include component-reset.reset; display: flex; - inline-size: convert.to-rem(40px); - block-size: convert.to-rem(40px); - min-block-size: convert.to-rem(32px); align-items: center; justify-content: center; border: none; - border-inline-start: 1px solid $border-subtle; margin: 0; background: none; + block-size: convert.to-rem(40px); + border-inline-start: 1px solid $border-subtle; color: $icon-primary; cursor: pointer; fill: $icon-primary; + inline-size: convert.to-rem(40px); + min-block-size: convert.to-rem(32px); transition: outline $duration-fast-02 motion(standard, productive), background-color $duration-fast-02 motion(standard, productive); } // Unset height/width set by icon-only button: .#{$prefix}--unstable-pagination__button .#{$prefix}--btn__icon { - inline-size: initial; block-size: initial; + inline-size: initial; } .#{$prefix}--unstable-pagination__button.#{$prefix}--btn--icon-only.#{$prefix}--tooltip__trigger:focus { @@ -124,8 +124,8 @@ .#{$prefix}--unstable-pagination__page-selector, .#{$prefix}--unstable-pagination__page-sizer { - block-size: 100%; align-items: center; + block-size: 100%; } .#{$prefix}--unstable-pagination__page-selector @@ -140,11 +140,13 @@ .#{$prefix}--unstable-pagination__page-sizer .#{$prefix}--select-input { @include type-style('body-short-01'); - inline-size: auto; - min-width: auto; - block-size: 100%; padding: 0 2.25rem 0 $spacing-05; + block-size: 100%; + + inline-size: auto; line-height: convert.to-rem(40px); + + min-inline-size: auto; } .#{$prefix}--unstable-pagination__page-selector @@ -159,7 +161,7 @@ transform: translateY(-50%); @include breakpoint('md') { - right: $spacing-05; + inset-inline-end: $spacing-05; } } diff --git a/packages/styles/scss/components/popover/_popover.scss b/packages/styles/scss/components/popover/_popover.scss index 2c36e54a4375..91a01f14c079 100644 --- a/packages/styles/scss/components/popover/_popover.scss +++ b/packages/styles/scss/components/popover/_popover.scss @@ -130,11 +130,11 @@ $popover-caret-height: custom-property.get-var( position: absolute; z-index: z('floating'); display: none; - inline-size: max-content; - max-width: convert.to-rem(368px); background-color: $popover-background-color; border-radius: $popover-border-radius; color: $popover-text-color; + inline-size: max-content; + max-inline-size: convert.to-rem(368px); pointer-events: auto; } @@ -211,8 +211,8 @@ $popover-caret-height: custom-property.get-var( .#{$prefix}--popover--bottom-right > .#{$prefix}--popover > .#{$prefix}--popover-content { - right: 0; inset-block-end: 0; + inset-inline-end: 0; transform: translate($popover-offset, calc(100% + $popover-offset)); } @@ -226,10 +226,10 @@ $popover-caret-height: custom-property.get-var( .#{$prefix}--popover--bottom-right > .#{$prefix}--popover > .#{$prefix}--popover-content::before { + block-size: $popover-offset; inset-block-start: 0; - right: 0; + inset-inline-end: 0; inset-inline-start: 0; - block-size: $popover-offset; transform: translateY(-100%); } @@ -243,11 +243,11 @@ $popover-caret-height: custom-property.get-var( .#{$prefix}--popover--bottom-right > .#{$prefix}--popover > .#{$prefix}--popover-caret { - inset-block-end: 0; - inset-inline-start: 50%; - inline-size: $popover-caret-width; block-size: $popover-caret-height; clip-path: polygon(0% 100%, 50% 0%, 100% 100%); + inline-size: $popover-caret-width; + inset-block-end: 0; + inset-inline-start: 50%; transform: translate(-50%, $popover-offset); } @@ -279,7 +279,7 @@ $popover-caret-height: custom-property.get-var( > .#{$prefix}--popover > .#{$prefix}--popover-content { inset-block-start: 0; - right: 0; + inset-inline-end: 0; transform: translate($popover-offset, calc(-100% - $popover-offset)); } @@ -293,10 +293,10 @@ $popover-caret-height: custom-property.get-var( .#{$prefix}--popover--top-right > .#{$prefix}--popover > .#{$prefix}--popover-content::before { - right: 0; + block-size: $popover-offset; inset-block-end: 0; + inset-inline-end: 0; inset-inline-start: 0; - block-size: $popover-offset; transform: translateY(100%); } @@ -308,11 +308,11 @@ $popover-caret-height: custom-property.get-var( .#{$prefix}--popover--top-right > .#{$prefix}--popover > .#{$prefix}--popover-caret { - inset-block-start: 0; - inset-inline-start: 50%; - inline-size: $popover-caret-width; block-size: $popover-caret-height; clip-path: polygon(0% 0%, 50% 100%, 100% 0%); + inline-size: $popover-caret-width; + inset-block-start: 0; + inset-inline-start: 50%; transform: translate(-50%, calc(-1 * $popover-offset)); } @@ -360,10 +360,10 @@ $popover-caret-height: custom-property.get-var( .#{$prefix}--popover--right-bottom > .#{$prefix}--popover > .#{$prefix}--popover-content::before { - inset-block-start: 0; + inline-size: $popover-offset; inset-block-end: 0; + inset-block-start: 0; inset-inline-start: 0; - inline-size: $popover-offset; transform: translateX(-100%); } @@ -377,11 +377,11 @@ $popover-caret-height: custom-property.get-var( .#{$prefix}--popover--right-bottom > .#{$prefix}--popover > .#{$prefix}--popover-caret { - inset-block-start: 50%; - inset-inline-start: 100%; - inline-size: $popover-caret-height; block-size: $popover-caret-width; clip-path: polygon(0% 50%, 100% 0%, 100% 100%); + inline-size: $popover-caret-height; + inset-block-start: 50%; + inset-inline-start: 100%; transform: translate(calc($popover-offset - 100%), -50%); } @@ -394,7 +394,7 @@ $popover-caret-height: custom-property.get-var( > .#{$prefix}--popover > .#{$prefix}--popover-content { inset-block-start: 50%; - right: 100%; + inset-inline-end: 100%; // Add in 0.1px to prevent rounding errors where the content is // moved farther than the caret transform: translate(calc(-1 * $popover-offset + 0.1px), -50%); @@ -404,7 +404,7 @@ $popover-caret-height: custom-property.get-var( > .#{$prefix}--popover > .#{$prefix}--popover-content { inset-block-start: -50%; - right: 100%; + inset-inline-end: 100%; // Add in 0.1px to prevent rounding errors where the content is // moved farther than the caret transform: translate( @@ -416,8 +416,8 @@ $popover-caret-height: custom-property.get-var( .#{$prefix}--popover--left-bottom > .#{$prefix}--popover > .#{$prefix}--popover-content { - right: 100%; inset-block-end: -50%; + inset-inline-end: 100%; // Add in 0.1px to prevent rounding errors where the content is // moved farther than the caret transform: translate( @@ -436,10 +436,10 @@ $popover-caret-height: custom-property.get-var( .#{$prefix}--popover--left-bottom > .#{$prefix}--popover > .#{$prefix}--popover-content::before { - inset-block-start: 0; - right: 0; - inset-block-end: 0; inline-size: $popover-offset; + inset-block-end: 0; + inset-block-start: 0; + inset-inline-end: 0; transform: translateX(100%); } @@ -453,11 +453,11 @@ $popover-caret-height: custom-property.get-var( .#{$prefix}--popover--left-bottom > .#{$prefix}--popover > .#{$prefix}--popover-caret { - inset-block-start: 50%; - right: 100%; - inline-size: $popover-caret-height; block-size: $popover-caret-width; clip-path: polygon(0% 0%, 100% 50%, 0% 100%); + inline-size: $popover-caret-height; + inset-block-start: 50%; + inset-inline-end: 100%; transform: translate(calc(-1 * $popover-offset + 100%), -50%); } @@ -479,10 +479,10 @@ $popover-caret-height: custom-property.get-var( position: relative; display: inline-flex; - inline-size: convert.to-rem(32px); - block-size: convert.to-rem(32px); align-items: center; justify-content: center; + block-size: convert.to-rem(32px); + inline-size: convert.to-rem(32px); &:focus { @include focus-outline('outline'); @@ -503,11 +503,11 @@ $popover-caret-height: custom-property.get-var( .#{$prefix}--popover--tab-tip__button:not(:focus)::after { position: absolute; z-index: z('floating') + 1; - inset-block-end: 0; - inline-size: 100%; - block-size: 2px; background: theme.$layer; + block-size: 2px; content: ''; + inline-size: 100%; + inset-block-end: 0; } .#{$prefix}--popover--tab-tip__button svg { diff --git a/packages/styles/scss/components/progress-bar/_progress-bar.scss b/packages/styles/scss/components/progress-bar/_progress-bar.scss index 333b795d6b06..09b9d46f1324 100644 --- a/packages/styles/scss/components/progress-bar/_progress-bar.scss +++ b/packages/styles/scss/components/progress-bar/_progress-bar.scss @@ -27,10 +27,10 @@ @include type-style('body-compact-01'); display: flex; - min-width: convert.to-rem(48px); justify-content: space-between; color: $text-primary; margin-block-end: $spacing-03; + min-inline-size: convert.to-rem(48px); } .#{$prefix}--progress-bar__label-text { @@ -41,10 +41,10 @@ .#{$prefix}--progress-bar__track { position: relative; - inline-size: 100%; - min-width: convert.to-rem(48px); - block-size: convert.to-rem(8px); background-color: $layer; + block-size: convert.to-rem(8px); + inline-size: 100%; + min-inline-size: convert.to-rem(48px); } .#{$prefix}--progress-bar--big .#{$prefix}--progress-bar__track { @@ -57,10 +57,10 @@ .#{$prefix}--progress-bar__bar { display: block; - inline-size: 100%; - block-size: 100%; background-color: currentColor; + block-size: 100%; color: $interactive; + inline-size: 100%; transform: scaleX(0); transform-origin: 0 center #{'/*rtl:100% center*/'}; transition: transform $duration-fast-02 motion(standard, productive); @@ -87,8 +87,9 @@ .#{$prefix}--progress-bar__helper-text { @include type-style('helper-text-01'); - margin-top: $spacing-03; color: $text-secondary; + + margin-block-start: $spacing-03; } .#{$prefix}--progress-bar__status-icon { @@ -146,7 +147,7 @@ .#{$prefix}--progress-bar--inline .#{$prefix}--progress-bar__label { flex-shrink: 0; - margin-bottom: 0; + margin-block-end: 0; margin-inline-end: layout.density('padding-inline'); } diff --git a/packages/styles/scss/components/progress-indicator/_progress-indicator.scss b/packages/styles/scss/components/progress-indicator/_progress-indicator.scss index 509a97a600fb..b10ce1df6002 100644 --- a/packages/styles/scss/components/progress-indicator/_progress-indicator.scss +++ b/packages/styles/scss/components/progress-indicator/_progress-indicator.scss @@ -39,9 +39,9 @@ $progress-indicator-bar-width: 1px inset transparent !default; position: relative; display: inline-flex; overflow: visible; - inline-size: convert.to-rem(128px); - min-width: 7rem; flex-direction: row; + inline-size: convert.to-rem(128px); + min-inline-size: 7rem; .#{$prefix}--tooltip__label { display: block; @@ -49,32 +49,32 @@ $progress-indicator-bar-width: 1px inset transparent !default; } .#{$prefix}--progress--space-equal .#{$prefix}--progress-step { - min-width: 8rem; flex-grow: 1; + min-inline-size: 8rem; } .#{$prefix}--progress-line { position: absolute; - inset-inline-start: 0; - inline-size: convert.to-rem(128px); - block-size: 2px; border: $progress-indicator-bar-width; + block-size: 2px; + inline-size: convert.to-rem(128px); + inset-inline-start: 0; } .#{$prefix}--progress--space-equal .#{$prefix}--progress-line { inline-size: 100%; - min-width: convert.to-rem(128px); + min-inline-size: convert.to-rem(128px); } .#{$prefix}--progress-step svg { position: relative; z-index: 1; - inline-size: $spacing-05; - block-size: $spacing-05; flex-shrink: 0; margin: convert.to-rem(10px) $spacing-03 0 0; + block-size: $spacing-05; border-radius: 50%; fill: $interactive; + inline-size: $spacing-05; } .#{$prefix}--progress--space-equal .#{$prefix}--progress-text { @@ -85,10 +85,10 @@ $progress-indicator-bar-width: 1px inset transparent !default; @include type-style('body-compact-01'); overflow: hidden; - max-width: convert.to-rem(88px); margin: $spacing-03 0 0 0; color: $text-primary; line-height: 1.45; + max-inline-size: convert.to-rem(88px); text-overflow: ellipsis; transition: box-shadow $duration-fast-02 motion(standard, productive), color $duration-fast-02 motion(standard, productive); @@ -107,8 +107,8 @@ $progress-indicator-bar-width: 1px inset transparent !default; } .#{$prefix}--progress--space-equal .#{$prefix}--progress-label { - max-width: 100%; margin-inline-end: 0.75rem; + max-inline-size: 100%; } .#{$prefix}--progress-step-button:not( @@ -148,14 +148,14 @@ $progress-indicator-bar-width: 1px inset transparent !default; @include type-style('body-01'); display: block; - inline-size: convert.to-rem(125px); - - min-width: convert.to-rem(115px); - min-block-size: $spacing-06; padding: $spacing-03 $spacing-05; - margin-top: convert.to-rem(40px); - margin-inline-start: convert.to-rem(22px); color: $text-inverse; + inline-size: convert.to-rem(125px); + margin-block-start: convert.to-rem(40px); + margin-inline-start: convert.to-rem(22px); + min-block-size: $spacing-06; + + min-inline-size: convert.to-rem(115px); visibility: hidden; } @@ -163,9 +163,10 @@ $progress-indicator-bar-width: 1px inset transparent !default; .#{$prefix}--progress-step .#{$prefix}--tooltip_multi { @include type-style('body-01'); - inline-size: convert.to-rem(150px); block-size: auto; color: $text-inverse; + + inline-size: convert.to-rem(150px); } //OPTIONAL HELPER TEXT STYLING @@ -173,10 +174,10 @@ $progress-indicator-bar-width: 1px inset transparent !default; @include type-style('label-01'); position: absolute; + color: $text-secondary; inset-inline-start: 0; - margin-top: convert.to-rem(28px); + margin-block-start: convert.to-rem(28px); margin-inline-start: $spacing-06; - color: $text-secondary; text-align: start; } @@ -210,7 +211,7 @@ $progress-indicator-bar-width: 1px inset transparent !default; @include button-reset.reset; display: flex; - text-align: left; + text-align: start; } //unclickable button @@ -270,14 +271,16 @@ $progress-indicator-bar-width: 1px inset transparent !default; .#{$prefix}--progress.#{$prefix}--skeleton .#{$prefix}--progress-label { @include skeleton; - inline-size: convert.to-rem(40px); block-size: convert.to-rem(14px); - margin-top: 0.625rem; + + inline-size: convert.to-rem(40px); + + margin-block-start: 0.625rem; } .#{$prefix}--progress.#{$prefix}--progress--vertical.#{$prefix}--skeleton .#{$prefix}--progress-label { - margin-top: 0.0625rem; + margin-block-start: 0.0625rem; } // Vertical Variant @@ -295,10 +298,10 @@ $progress-indicator-bar-width: 1px inset transparent !default; .#{$prefix}--progress--vertical .#{$prefix}--progress-step, .#{$prefix}--progress--vertical .#{$prefix}--progress-step-button { + align-content: flex-start; inline-size: initial; - min-width: initial; min-block-size: 3.625rem; - align-content: flex-start; + min-inline-size: initial; } .#{$prefix}--progress--vertical .#{$prefix}--progress-step svg, @@ -310,9 +313,9 @@ $progress-indicator-bar-width: 1px inset transparent !default; .#{$prefix}--progress--vertical .#{$prefix}--progress-label { display: inline-block; - inline-size: initial; - max-width: convert.to-rem(160px); margin: 0; + inline-size: initial; + max-inline-size: convert.to-rem(160px); vertical-align: top; white-space: initial; } @@ -320,20 +323,20 @@ $progress-indicator-bar-width: 1px inset transparent !default; .#{$prefix}--progress--vertical .#{$prefix}--progress-step .#{$prefix}--tooltip { - margin-top: 0.5rem; + margin-block-start: 0.5rem; } .#{$prefix}--progress--vertical .#{$prefix}--progress-optional { position: static; - inline-size: 100%; margin: auto 0; + inline-size: 100%; } .#{$prefix}--progress--vertical .#{$prefix}--progress-line { position: absolute; + block-size: 100%; + inline-size: 1px; inset-block-start: 0; inset-inline-start: 0; - inline-size: 1px; - block-size: 100%; } } diff --git a/packages/styles/scss/components/radio-button/_radio-button.scss b/packages/styles/scss/components/radio-button/_radio-button.scss index 92281250e31c..f88b0d43df40 100644 --- a/packages/styles/scss/components/radio-button/_radio-button.scss +++ b/packages/styles/scss/components/radio-button/_radio-button.scss @@ -41,7 +41,7 @@ $radio-border-width: 1px !default; // Remove spacing above collection of radio buttons if label is present .#{$prefix}--label + .#{$prefix}--form-item .#{$prefix}--radio-button-group { - margin-top: 0; + margin-block-start: 0; } // vertical radio button @@ -54,12 +54,12 @@ $radio-border-width: 1px !default; } .#{$prefix}--radio-button__label { - margin-inline-end: 0; line-height: 1.25; + margin-inline-end: 0; } .#{$prefix}--radio-button__label:not(:last-of-type) { - margin-bottom: $spacing-03; + margin-block-end: $spacing-03; } } @@ -74,21 +74,22 @@ $radio-border-width: 1px !default; display: flex; align-items: center; - margin-inline-end: $spacing-05; cursor: pointer; + margin-inline-end: $spacing-05; } .#{$prefix}--radio-button__appearance { @include reset; - inline-size: convert.to-rem(18px); - block-size: convert.to-rem(18px); flex-shrink: 0; border: $radio-border-width solid $icon-primary; margin: convert.to-rem(1px) $spacing-03 convert.to-rem(2px) convert.to-rem(2px); background-color: transparent; + block-size: convert.to-rem(18px); border-radius: 50%; + + inline-size: convert.to-rem(18px); } .#{$prefix}--radio-button:checked @@ -102,11 +103,11 @@ $radio-border-width: 1px !default; &::before { position: relative; display: inline-block; - inline-size: 100%; - block-size: 100%; background-color: $icon-primary; + block-size: 100%; border-radius: 50%; content: ''; + inline-size: 100%; transform: scale(0.5); // Allow the selected button to be seen in Windows HCM for IE/Edge @@ -164,7 +165,7 @@ $radio-border-width: 1px !default; .#{$prefix}--radio-button__validation-msg { display: none; align-items: flex-end; - margin-top: convert.to-rem(6px); + margin-block-start: convert.to-rem(6px); } .#{$prefix}--radio-button__invalid-icon { @@ -195,9 +196,9 @@ $radio-border-width: 1px !default; .#{$prefix}--form-requirement { display: block; overflow: visible; - max-height: 100%; - margin-top: 0; + margin-block-start: 0; margin-inline-start: $spacing-03; + max-block-size: 100%; } .#{$prefix}--radio-button-group--invalid @@ -207,7 +208,7 @@ $radio-border-width: 1px !default; } .#{$prefix}--radio-button-group ~ .#{$prefix}--form__helper-text { - margin-top: convert.to-rem(6px); + margin-block-start: convert.to-rem(6px); } // Focus @@ -223,8 +224,9 @@ $radio-border-width: 1px !default; .#{$prefix}--radio-button__label.#{$prefix}--skeleton { @include skeleton; - inline-size: convert.to-rem(100px); block-size: convert.to-rem(18px); + + inline-size: convert.to-rem(100px); } .#{$prefix}--radio-button__label.#{$prefix}--skeleton @@ -245,8 +247,8 @@ $radio-border-width: 1px !default; .#{$prefix}--radio-button-group--vertical .#{$prefix}--radio-button-wrapper:not(:last-of-type) { + margin-block-end: $spacing-03; margin-inline-end: 0; - margin-bottom: $spacing-03; } .#{$prefix}--radio-button-group--label-right .#{$prefix}--radio-button__label, diff --git a/packages/styles/scss/components/search/_search.scss b/packages/styles/scss/components/search/_search.scss index be3ae7126b8c..69e82074c44c 100644 --- a/packages/styles/scss/components/search/_search.scss +++ b/packages/styles/scss/components/search/_search.scss @@ -31,8 +31,8 @@ .#{$prefix}--search { position: relative; display: flex; - inline-size: 100%; align-items: center; + inline-size: 100%; } .#{$prefix}--search .#{$prefix}--label { @@ -44,14 +44,15 @@ @include type.type-style('body-compact-01'); @include focus-outline('reset'); - inline-size: 100%; order: 1; padding: 0 $spacing-08; border: none; - border-block-end: 1px solid $border-strong; appearance: none; background-color: $field; + border-block-end: 1px solid $border-strong; color: $text-primary; + + inline-size: 100%; text-overflow: ellipsis; transition: background-color $duration-fast-02 motion(standard, productive), outline $duration-fast-02 motion(standard, productive); @@ -70,8 +71,8 @@ } .#{$prefix}--search-input[disabled] { - border-block-end: 1px solid transparent; background-color: $field; + border-block-end: 1px solid transparent; color: $text-disabled; cursor: not-allowed; @@ -91,9 +92,9 @@ .#{$prefix}--search--sm .#{$prefix}--search-input, .#{$prefix}--search--sm.#{$prefix}--search--expandable.#{$prefix}--search--expanded .#{$prefix}--search-input { - block-size: convert.to-rem(32px); // 8px padding on either side of icon + 16px icon (32px) padding: 0 $spacing-07; + block-size: convert.to-rem(32px); } .#{$prefix}--search--sm .#{$prefix}--search-magnifier-icon { @@ -104,9 +105,9 @@ .#{$prefix}--search--md .#{$prefix}--search-input, .#{$prefix}--search--md.#{$prefix}--search--expandable.#{$prefix}--search--expanded .#{$prefix}--search-input { - block-size: convert.to-rem(40px); // 12px padding on either side of icon + 16px icon (40px) padding: 0 $spacing-08; + block-size: convert.to-rem(40px); } .#{$prefix}--search--md .#{$prefix}--search-magnifier-icon { @@ -117,9 +118,9 @@ .#{$prefix}--search--lg .#{$prefix}--search-input, .#{$prefix}--search--lg.#{$prefix}--search--expandable.#{$prefix}--search--expanded .#{$prefix}--search-input { - block-size: convert.to-rem(48px); // 16px padding on either side of icon + 16px icon (48px) padding: 0 $spacing-09; + block-size: convert.to-rem(48px); } .#{$prefix}--search-magnifier-icon { @@ -127,11 +128,11 @@ position: absolute; z-index: 2; - inset-block-start: 50%; - inset-inline-start: $spacing-05; - inline-size: convert.to-rem(16px); block-size: convert.to-rem(16px); fill: $icon-secondary; + inline-size: convert.to-rem(16px); + inset-block-start: 50%; + inset-inline-start: $spacing-05; pointer-events: none; transform: translateY(-50%); } @@ -142,17 +143,17 @@ position: absolute; inset-block-start: 0; - right: 0; + inset-inline-end: 0; &::before { position: absolute; - inset-block-start: convert.to-rem(1px); - inset-inline-start: 0; display: block; - inline-size: 2px; - block-size: calc(100% - 2px); background-color: $field; + block-size: calc(100% - 2px); content: ''; + inline-size: 2px; + inset-block-start: convert.to-rem(1px); + inset-inline-start: 0; transition: background-color $duration-fast-02 motion(standard, productive); @@ -172,8 +173,8 @@ .#{$prefix}--search-button { flex-shrink: 0; - margin-inline-start: $spacing-01; background-color: $field; + margin-inline-start: $spacing-01; svg { fill: currentColor; @@ -188,15 +189,15 @@ .#{$prefix}--search-close, .#{$prefix}--search-button { display: flex; - inline-size: convert.to-rem(40px); - block-size: convert.to-rem(40px); align-items: center; justify-content: center; border-width: 1px 0; border-style: solid; border-color: transparent; + block-size: convert.to-rem(40px); cursor: pointer; fill: $icon-primary; + inline-size: convert.to-rem(40px); opacity: 1; transition: opacity $duration-fast-02 motion(standard, productive), background-color $duration-fast-02 motion(standard, productive), @@ -226,8 +227,8 @@ outline: none; &:hover { - border-bottom-color: transparent; background-color: transparent; + border-block-end-color: transparent; } &:hover::before { @@ -256,8 +257,8 @@ ~ .#{$prefix}--search-button, &.#{$prefix}--search--expandable, &.#{$prefix}--search--expandable .#{$prefix}--search-magnifier { - inline-size: convert.to-rem(32px); block-size: convert.to-rem(32px); + inline-size: convert.to-rem(32px); } &.#{$prefix}--search--expandable .#{$prefix}--search-input::placeholder { @@ -271,8 +272,8 @@ ~ .#{$prefix}--search-button, &.#{$prefix}--search--expandable, &.#{$prefix}--search--expandable .#{$prefix}--search-magnifier { - inline-size: convert.to-rem(40px); block-size: convert.to-rem(40px); + inline-size: convert.to-rem(40px); } &.#{$prefix}--search--expandable .#{$prefix}--search-input::placeholder { @@ -286,8 +287,8 @@ ~ .#{$prefix}--search-button, &.#{$prefix}--search--expandable, &.#{$prefix}--search--expandable .#{$prefix}--search-magnifier { - inline-size: convert.to-rem(48px); block-size: convert.to-rem(48px); + inline-size: convert.to-rem(48px); } &.#{$prefix}--search--expandable .#{$prefix}--search-input::placeholder { @@ -321,8 +322,8 @@ } .#{$prefix}--search--expandable .#{$prefix}--search-input { - inline-size: 0; padding: 0; + inline-size: 0; transition: padding $duration-fast-01 motion(standard, productive), width 0s linear $duration-fast-01; diff --git a/packages/styles/scss/components/select/_select.scss b/packages/styles/scss/components/select/_select.scss index be943246b961..7e2045846b96 100644 --- a/packages/styles/scss/components/select/_select.scss +++ b/packages/styles/scss/components/select/_select.scss @@ -27,16 +27,16 @@ position: relative; display: flex; - inline-size: 100%; flex-direction: column; align-items: flex-start; + inline-size: 100%; } .#{$prefix}--select-input__wrapper { position: relative; display: flex; - inline-size: 100%; align-items: center; + inline-size: 100%; } .#{$prefix}--select-input { @@ -44,17 +44,17 @@ @include focus-outline('reset'); display: block; - inline-size: 100%; - block-size: convert.to-rem(40px); padding: 0 $spacing-09 0 $spacing-05; border: none; - border-block-end: 1px solid $border-strong; appearance: none; background-color: $field; + block-size: convert.to-rem(40px); + border-block-end: 1px solid $border-strong; border-radius: 0; color: $text-primary; cursor: pointer; font-family: inherit; + inline-size: 100%; // reset disabled opacity opacity: 1; + padding-block: 0; + padding-inline: $spacing-05 $spacing-09; text-overflow: ellipsis; // Do not transition on background-color (see: https://github.com/carbon-design-system/carbon/issues/4464) From b75064b8d450e2446323b16d0d0c500d54c7935a Mon Sep 17 00:00:00 2001 From: TJ Egan Date: Tue, 29 Aug 2023 11:06:47 -0400 Subject: [PATCH 6/9] chore(stylelint): run styelint on files outside @carbon/styles --- packages/grid/scss/_css-grid.scss | 33 +++++----- packages/grid/scss/_flex-grid.scss | 60 ++++++++----------- packages/grid/scss/_mixins.scss | 60 ++++++++----------- .../scss/components/checkbox/_checkbox.scss | 4 +- .../components/time-picker/_time-picker.scss | 2 +- www/src/components/Box/Box.module.scss | 56 ++++++++--------- www/src/components/Header/Header.module.scss | 8 +-- 7 files changed, 95 insertions(+), 128 deletions(-) diff --git a/packages/grid/scss/_css-grid.scss b/packages/grid/scss/_css-grid.scss index 816691960b53..57f12e4e73e0 100644 --- a/packages/grid/scss/_css-grid.scss +++ b/packages/grid/scss/_css-grid.scss @@ -94,23 +94,21 @@ --cds-grid-column-hang: calc(var(--cds-grid-gutter) / 2); display: grid; - width: 100%; - max-width: get-grid-width( + grid-template-columns: repeat(var(--cds-grid-columns), minmax(0, 1fr)); + inline-size: 100%; + margin-inline: auto; + max-inline-size: get-grid-width( $breakpoints, largest-breakpoint-name($breakpoints) ); - padding-right: var(--cds-grid-margin); - padding-left: var(--cds-grid-margin); - margin-right: auto; - margin-left: auto; - grid-template-columns: repeat(var(--cds-grid-columns), minmax(0, 1fr)); + padding-inline: var(--cds-grid-margin); } // ----------------------------------------------------------------------------- // Full width // ----------------------------------------------------------------------------- .#{$prefix}--css-grid--full-width { - max-width: 100%; + max-inline-size: 100%; } // ----------------------------------------------------------------------------- @@ -127,12 +125,10 @@ --cds-grid-mode-start: var(--cds-grid-gutter-start); --cds-grid-mode-end: var(--cds-grid-gutter-end); - margin-right: var(--cds-grid-gutter-end); - margin-left: var(--cds-grid-gutter-start); + margin-inline: var(--cds-grid-gutter-start) var(--cds-grid-gutter-end); [dir='rtl'] & { - margin-right: var(--cds-grid-gutter-start); - margin-left: var(--cds-grid-gutter-end); + margin-inline: var(--cds-grid-gutter-end) var(--cds-grid-gutter-start); } } @@ -157,13 +153,13 @@ // ----------------------------------------------------------------------------- .#{$prefix}--subgrid { display: grid; - margin-right: calc(var(--cds-grid-mode-end) * -1); - margin-left: calc(var(--cds-grid-mode-start) * -1); grid-template-columns: repeat(var(--cds-grid-columns), minmax(0, 1fr)); + margin-inline: calc(var(--cds-grid-mode-start) * -1) + calc(var(--cds-grid-mode-end) * -1); [dir='rtl'] & { - margin-right: calc(var(--cds-grid-mode-start) * -1); - margin-left: calc(var(--cds-grid-mode-end) * -1); + margin-inline: calc(var(--cds-grid-mode-end) * -1) + calc(var(--cds-grid-mode-start) * -1); } } @@ -194,11 +190,10 @@ // Helper class to allow for text alignment in columns where the leading // gutter is missing (like narrow) or is reduced (like in condensed). .#{$prefix}--grid-column-hang { - margin-left: var(--cds-grid-column-hang); + margin-inline-start: var(--cds-grid-column-hang); [dir='rtl'] & { - margin-right: var(--cds-grid-column-hang); - margin-left: initial; + margin-inline: initial var(--cds-grid-column-hang); } } diff --git a/packages/grid/scss/_flex-grid.scss b/packages/grid/scss/_flex-grid.scss index 5374be1fe182..056904aedc7e 100644 --- a/packages/grid/scss/_flex-grid.scss +++ b/packages/grid/scss/_flex-grid.scss @@ -35,23 +35,20 @@ // Prevent columns from becoming too narrow when at smaller grid tiers by // always setting `width: 100%;`. This works because we use `flex` values // later on to override this initial width. - width: 100%; - padding-right: $gutter * 0.5; - padding-left: $gutter * 0.5; + inline-size: 100%; + padding-inline: $gutter * 0.5; // For our condensed use-case, our gutters collapse to 2px solid, 1px on each // side. .#{$prefix}--row--condensed &, .#{$prefix}--grid--condensed & { - padding-right: $condensed-gutter * 0.5; - padding-left: $condensed-gutter * 0.5; + padding-inline: $condensed-gutter * 0.5; } // For our narrow use-case, our container hangs 16px into the gutter .#{$prefix}--row--narrow &, .#{$prefix}--grid--narrow & { - padding-right: $gutter * 0.5; - padding-left: 0; + padding-inline: 0 $gutter * 0.5; } } @@ -70,8 +67,8 @@ // Add a `max-width` to ensure content within each column does not blow out // the width of the column. Applies to IE10+ and Firefox. Chrome and Safari // do not appear to require this. - max-width: math.percentage(math.div($span, $columns)); flex: 0 0 math.percentage(math.div($span, $columns)); + max-inline-size: math.percentage(math.div($span, $columns)); } } @@ -84,9 +81,9 @@ $offset: 0; $offset: math.div($span, $columns); @if $offset == 0 { - margin-left: 0; + margin-inline-start: 0; } @else { - margin-left: math.percentage($offset); + margin-inline-start: math.percentage($offset); } } @@ -123,17 +120,17 @@ // Provide basic `.col-{bp}` classes for equal-width flexbox columns .#{$prefix}--col, .#{$prefix}--col#{$infix} { - max-width: 100%; flex-basis: 0; flex-grow: 1; + max-inline-size: 100%; } .#{$prefix}--col--auto, .#{$prefix}--col#{$infix}--auto { - width: auto; - // Reset earlier grid tiers - max-width: 100%; flex: 1 0 0%; + inline-size: auto; + // Reset earlier grid tiers + max-inline-size: 100%; } @for $i from 0 through $columns { @@ -164,8 +161,7 @@ @mixin -make-row($gutter: $grid-gutter) { display: flex; flex-wrap: wrap; - margin-right: -1 * $gutter * 0.5; - margin-left: -1 * $gutter * 0.5; + margin-inline: -1 * $gutter * 0.5; } // ----------------------------------------------------------------------------- @@ -179,18 +175,17 @@ @mixin -no-gutter { .#{$prefix}--no-gutter, .#{$prefix}--row.#{$prefix}--no-gutter [class*='#{$prefix}--col'] { - padding-right: 0; - padding-left: 0; + padding-inline: 0; } .#{$prefix}--no-gutter--start, .#{$prefix}--row.#{$prefix}--no-gutter--start [class*='#{$prefix}--col'] { - padding-left: 0; + padding-inline-start: 0; } .#{$prefix}--no-gutter--end, .#{$prefix}--row.#{$prefix}--no-gutter--end [class*='#{$prefix}--col'] { - padding-right: 0; + padding-inline-end: 0; } } @@ -205,11 +200,11 @@ /// @group @carbon/grid @mixin -hang($gutter: $grid-gutter) { .#{$prefix}--hang--start { - padding-left: $gutter * 0.5; + padding-inline-start: $gutter * 0.5; } .#{$prefix}--hang--end { - padding-right: $gutter * 0.5; + padding-inline-end: $gutter * 0.5; } } @@ -223,8 +218,7 @@ /// @access private /// @group @carbon/grid @mixin -make-container($breakpoints: $grid-breakpoints) { - margin-right: auto; - margin-left: auto; + margin-inline: auto; @include -set-largest-breakpoint($breakpoints); @@ -236,14 +230,12 @@ $prev-margin: map.get($prev-breakpoint, margin); @if $prev-margin != $margin { @include breakpoint($name) { - padding-right: #{($grid-gutter * 0.5) + $margin}; - padding-left: #{($grid-gutter * 0.5) + $margin}; + padding-inline: #{($grid-gutter * 0.5) + $margin}; } } } @else { @include breakpoint($name) { - padding-right: #{($grid-gutter * 0.5) + $margin}; - padding-left: #{($grid-gutter * 0.5) + $margin}; + padding-inline: #{($grid-gutter * 0.5) + $margin}; } } } @@ -256,7 +248,7 @@ @mixin -set-largest-breakpoint($breakpoints: $grid-breakpoints) { $largest-breakpoint: -last-map-item($breakpoints); - max-width: map.get($largest-breakpoint, 'width'); + max-inline-size: map.get($largest-breakpoint, 'width'); } /// Add in the max-widths for each breakpoint to the container @@ -266,7 +258,7 @@ @mixin -make-container-max-widths($breakpoints: $grid-breakpoints) { @each $name, $value in $breakpoints { @include breakpoint($name) { - max-width: map.get($value, width); + max-inline-size: map.get($value, width); } } } @@ -309,7 +301,7 @@ @include largest-breakpoint($breakpoints) { .#{$prefix}--grid--full-width { - max-width: 100%; + max-inline-size: 100%; } } @@ -319,13 +311,11 @@ .#{$prefix}--row-padding [class*='#{$prefix}--col'], .#{$prefix}--col-padding { - padding-top: $grid-gutter * 0.5; - padding-bottom: $grid-gutter * 0.5; + padding-block: $grid-gutter * 0.5; } .#{$prefix}--grid--condensed [class*='#{$prefix}--col'] { - padding-top: $condensed-gutter * 0.5; - padding-bottom: $condensed-gutter * 0.5; + padding-block: $condensed-gutter * 0.5; } @include -make-grid-columns($breakpoints, $grid-gutter); diff --git a/packages/grid/scss/_mixins.scss b/packages/grid/scss/_mixins.scss index 5146c45fa1ef..c486577d6d27 100644 --- a/packages/grid/scss/_mixins.scss +++ b/packages/grid/scss/_mixins.scss @@ -29,23 +29,20 @@ // Prevent columns from becoming too narrow when at smaller grid tiers by // always setting `width: 100%;`. This works because we use `flex` values // later on to override this initial width. - width: 100%; - padding-right: ($gutter * 0.5); - padding-left: ($gutter * 0.5); + inline-size: 100%; + padding-inline: ($gutter * 0.5); // For our condensed use-case, our gutters collapse to 2px solid, 1px on each // side. .#{$prefix}--row--condensed &, .#{$prefix}--grid--condensed & { - padding-right: ($condensed-gutter * 0.5); - padding-left: ($condensed-gutter * 0.5); + padding-inline: ($condensed-gutter * 0.5); } // For our narrow use-case, our container hangs 16px into the gutter .#{$prefix}--row--narrow &, .#{$prefix}--grid--narrow & { - padding-right: ($gutter * 0.5); - padding-left: 0; + padding-inline: 0 ($gutter * 0.5); } } @@ -64,8 +61,8 @@ // Add a `max-width` to ensure content within each column does not blow out // the width of the column. Applies to IE10+ and Firefox. Chrome and Safari // do not appear to require this. - max-width: math.percentage(math.div($span, $columns)); flex: 0 0 math.percentage(math.div($span, $columns)); + max-inline-size: math.percentage(math.div($span, $columns)); } } @@ -78,9 +75,9 @@ $offset: 0; $offset: math.div($span, $columns); @if $offset == 0 { - margin-left: 0; + margin-inline-start: 0; } @else { - margin-left: math.percentage($offset); + margin-inline-start: math.percentage($offset); } } @@ -117,17 +114,17 @@ // Provide basic `.col-{bp}` classes for equal-width flexbox columns .#{$prefix}--col, .#{$prefix}--col#{$infix} { - max-width: 100%; flex-basis: 0; flex-grow: 1; + max-inline-size: 100%; } .#{$prefix}--col--auto, .#{$prefix}--col#{$infix}--auto { - width: auto; - // Reset earlier grid tiers - max-width: 100%; flex: 1 0 0%; + inline-size: auto; + // Reset earlier grid tiers + max-inline-size: 100%; } @for $i from 0 through $columns { @@ -158,8 +155,7 @@ @mixin make-row($gutter: $grid-gutter) { display: flex; flex-wrap: wrap; - margin-right: -1 * $gutter * 0.5; - margin-left: -1 * $gutter * 0.5; + margin-inline: -1 * $gutter * 0.5; } // ----------------------------------------------------------------------------- @@ -173,18 +169,17 @@ @mixin -no-gutter { .#{$prefix}--no-gutter, .#{$prefix}--row.#{$prefix}--no-gutter [class*='#{$prefix}--col'] { - padding-right: 0; - padding-left: 0; + padding-inline: 0; } .#{$prefix}--no-gutter--start, .#{$prefix}--row.#{$prefix}--no-gutter--start [class*='#{$prefix}--col'] { - padding-left: 0; + padding-inline-start: 0; } .#{$prefix}--no-gutter--end, .#{$prefix}--row.#{$prefix}--no-gutter--end [class*='#{$prefix}--col'] { - padding-right: 0; + padding-inline-end: 0; } } @@ -199,11 +194,11 @@ /// @group @carbon/grid @mixin -hang($gutter: $grid-gutter) { .#{$prefix}--hang--start { - padding-left: ($gutter * 0.5); + padding-inline-start: ($gutter * 0.5); } .#{$prefix}--hang--end { - padding-right: ($gutter * 0.5); + padding-inline-end: ($gutter * 0.5); } } @@ -217,8 +212,7 @@ /// @access private /// @group @carbon/grid @mixin -make-container($breakpoints: $grid-breakpoints) { - margin-right: auto; - margin-left: auto; + margin-inline: auto; @include -set-largest-breakpoint(); @@ -230,14 +224,12 @@ $prev-margin: map.get($prev-breakpoint, margin); @if $prev-margin != $margin { @include breakpoint($name) { - padding-right: #{($grid-gutter * 0.5) + $margin}; - padding-left: #{($grid-gutter * 0.5) + $margin}; + padding-inline: #{($grid-gutter * 0.5) + $margin}; } } } @else { @include breakpoint($name) { - padding-right: #{($grid-gutter * 0.5) + $margin}; - padding-left: #{($grid-gutter * 0.5) + $margin}; + padding-inline: #{($grid-gutter * 0.5) + $margin}; } } } @@ -250,7 +242,7 @@ @mixin -set-largest-breakpoint($breakpoints: $grid-breakpoints) { $largest-breakpoint: last-map-item($breakpoints); - max-width: map.get($largest-breakpoint, 'width'); + max-inline-size: map.get($largest-breakpoint, 'width'); } /// Add in the max-widths for each breakpoint to the container @@ -260,7 +252,7 @@ @mixin -make-container-max-widths($breakpoints: $grid-breakpoints) { @each $name, $value in $breakpoints { @include breakpoint($name) { - max-width: map.get($value, width); + max-inline-size: map.get($value, width); } } } @@ -282,7 +274,7 @@ @include largest-breakpoint($breakpoints) { .#{$prefix}--grid--full-width { - max-width: 100%; + max-inline-size: 100%; } } @@ -292,13 +284,11 @@ .#{$prefix}--row-padding [class*='#{$prefix}--col'], .#{$prefix}--col-padding { - padding-top: $grid-gutter * 0.5; - padding-bottom: $grid-gutter * 0.5; + padding-block: $grid-gutter * 0.5; } .#{$prefix}--grid--condensed [class*='#{$prefix}--col'] { - padding-top: $condensed-gutter * 0.5; - padding-bottom: $condensed-gutter * 0.5; + padding-block: $condensed-gutter * 0.5; } @include -make-grid-columns($breakpoints, $grid-gutter); diff --git a/packages/styles/scss/components/checkbox/_checkbox.scss b/packages/styles/scss/components/checkbox/_checkbox.scss index 401d1a1c8803..8e6fbf333775 100644 --- a/packages/styles/scss/components/checkbox/_checkbox.scss +++ b/packages/styles/scss/components/checkbox/_checkbox.scss @@ -136,7 +136,7 @@ // Display the check .#{$prefix}--checkbox:checked + .#{$prefix}--checkbox-label::after, .#{$prefix}--checkbox-label[data-contained-checkbox-state='true']::after { - transform: scale(1) rotate(-45deg) #{'/*rtl:scale(1.2) rotate3d(.5, 1, 0, 158deg)*/'}; + transform: scale(1) rotate(-45deg) #{'/*!rtl:scale(1.2) rotate3d(.5, 1, 0, 158deg)*/'}; } // Indeterminate symbol @@ -228,9 +228,9 @@ } .#{$prefix}--checkbox__invalid-icon { - min-width: convert.to-rem(16px); margin: convert.to-rem(1px) convert.to-rem(1px) 0 convert.to-rem(3px); fill: $support-error; + min-inline-size: convert.to-rem(16px); } .#{$prefix}--checkbox__invalid-icon--warning { diff --git a/packages/styles/scss/components/time-picker/_time-picker.scss b/packages/styles/scss/components/time-picker/_time-picker.scss index e983eacbc724..cc751ff07b44 100644 --- a/packages/styles/scss/components/time-picker/_time-picker.scss +++ b/packages/styles/scss/components/time-picker/_time-picker.scss @@ -27,7 +27,7 @@ .#{$prefix}--time-picker__select { justify-content: center; - margin-left: $spacing-01; + margin-inline-start: $spacing-01; } .#{$prefix}--time-picker__input { diff --git a/www/src/components/Box/Box.module.scss b/www/src/components/Box/Box.module.scss index 3f6cab7b8f46..786ca772cc38 100644 --- a/www/src/components/Box/Box.module.scss +++ b/www/src/components/Box/Box.module.scss @@ -16,29 +16,27 @@ $index: 1; } .px-0 { - padding-right: 0; - padding-left: 0; + padding-inline: 0; } .py-0 { - padding-top: 0; - padding-bottom: 0; + padding-block: 0; } .pl-0 { - padding-left: 0; + padding-inline-start: 0; } .pr-0 { - padding-right: 0; + padding-inline-end: 0; } .pt-0 { - padding-top: 0; + padding-block-start: 0; } .pb-0 { - padding-bottom: 0; + padding-block-end: 0; } @each $key, $value in spacing.$spacing { @@ -47,29 +45,27 @@ $index: 1; } .px-#{$index} { - padding-right: $value; - padding-left: $value; + padding-inline: $value; } .py-#{$index} { - padding-top: $value; - padding-bottom: $value; + padding-block: $value; } .pl-#{$index} { - padding-left: $value; + padding-inline-start: $value; } .pr-#{$index} { - padding-right: $value; + padding-inline-end: $value; } .pt-#{$index} { - padding-top: $value; + padding-block-start: $value; } .pb-#{$index} { - padding-bottom: $value; + padding-block-end: $value; } $index: $index + 1; } @@ -82,29 +78,27 @@ $index: 1; } .mx-0 { - margin-right: 0; - margin-left: 0; + margin-inline: 0; } .my-0 { - margin-top: 0; - margin-bottom: 0; + margin-block: 0; } .ml-0 { - margin-left: 0; + margin-inline-start: 0; } .mr-0 { - margin-right: 0; + margin-inline-end: 0; } .mt-0 { - margin-top: 0; + margin-block-start: 0; } .mb-0 { - margin-bottom: 0; + margin-block-end: 0; } @each $key, $value in spacing.$spacing { @@ -113,29 +107,27 @@ $index: 1; } .mx-#{$index} { - margin-right: $value; - margin-left: $value; + margin-inline: $value; } .my-#{$index} { - margin-top: $value; - margin-bottom: $value; + margin-block: $value; } .ml-#{$index} { - margin-left: $value; + margin-inline-start: $value; } .mr-#{$index} { - margin-right: $value; + margin-inline-end: $value; } .mt-#{$index} { - margin-top: $value; + margin-block-start: $value; } .mb-#{$index} { - margin-bottom: $value; + margin-block-end: $value; } $index: $index + 1; } diff --git a/www/src/components/Header/Header.module.scss b/www/src/components/Header/Header.module.scss index daa5485ce916..3e059f9fd61f 100644 --- a/www/src/components/Header/Header.module.scss +++ b/www/src/components/Header/Header.module.scss @@ -6,21 +6,21 @@ // .header { display: grid; - min-height: 4rem; align-items: center; padding: 0 1rem; - border-bottom: 2px solid #000000; + border-block-end: 2px solid #000000; column-gap: 2rem; grid-template-columns: max-content 1fr; + min-block-size: 4rem; } .nav { - height: 100%; + block-size: 100%; } .links { display: flex; - height: 100%; align-items: center; + block-size: 100%; column-gap: 1rem; } From 9b9786ae4e23085c92e6d23cf23095db7c7df5fd Mon Sep 17 00:00:00 2001 From: TJ Egan Date: Tue, 29 Aug 2023 12:30:23 -0400 Subject: [PATCH 7/9] fix(AspectRatio): remove unsupported float: inline-start --- .../styles/scss/components/aspect-ratio/_aspect-ratio.scss | 5 ++++- .../scss/components/contained-list/_contained-list.scss | 3 --- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/styles/scss/components/aspect-ratio/_aspect-ratio.scss b/packages/styles/scss/components/aspect-ratio/_aspect-ratio.scss index e9b180225b57..15863df302eb 100644 --- a/packages/styles/scss/components/aspect-ratio/_aspect-ratio.scss +++ b/packages/styles/scss/components/aspect-ratio/_aspect-ratio.scss @@ -47,7 +47,10 @@ $aspect-ratios: ( .#{$prefix}--aspect-ratio::before { block-size: 0; content: ''; - float: inline-start; + // float: inline-start is not supported yet + // https://caniuse.com/mdn-css_properties_float_flow_relative_values + // stylelint-disable-next-line csstools/use-logical + float: left; inline-size: 1px; margin-inline-start: -1px; } diff --git a/packages/styles/scss/components/contained-list/_contained-list.scss b/packages/styles/scss/components/contained-list/_contained-list.scss index 32be3c64c778..8f8ab0e5325d 100644 --- a/packages/styles/scss/components/contained-list/_contained-list.scss +++ b/packages/styles/scss/components/contained-list/_contained-list.scss @@ -102,7 +102,6 @@ @include type-style('heading-compact-01'); background-color: $background; - block-size: layout.size('height'); border-block-end: 1px solid $border-subtle; color: $text-primary; @@ -126,7 +125,6 @@ @include type-style('label-01'); background-color: $layer; - block-size: $spacing-07; color: $text-secondary; } @@ -172,7 +170,6 @@ padding: calc(calc((#{layout.size('height')} - var(--temp-1lh)) / 2)) layout.density('padding-inline'); color: $text-primary; - min-block-size: layout.size('height'); } From dcaf97c42f1be6012422e2a3e76e9651e19b690d Mon Sep 17 00:00:00 2001 From: TJ Egan Date: Tue, 29 Aug 2023 12:52:09 -0400 Subject: [PATCH 8/9] fix(ContainedList): redefine tag tokens in contained list --- .../ContainedList/ContainedList.stories.js | 2 +- .../contained-list/_contained-list.scss | 19 +++++++++++++++++++ packages/styles/scss/components/tag/_tag.scss | 4 ++-- 3 files changed, 22 insertions(+), 3 deletions(-) diff --git a/packages/react/src/components/ContainedList/ContainedList.stories.js b/packages/react/src/components/ContainedList/ContainedList.stories.js index 4646e6d2f014..ee9eba54cf60 100644 --- a/packages/react/src/components/ContainedList/ContainedList.stories.js +++ b/packages/react/src/components/ContainedList/ContainedList.stories.js @@ -248,7 +248,7 @@ export const WithListTitleDecorators = () => ( justifyContent: 'space-between', }}> List title - + 4 diff --git a/packages/styles/scss/components/contained-list/_contained-list.scss b/packages/styles/scss/components/contained-list/_contained-list.scss index 8f8ab0e5325d..737268808b81 100644 --- a/packages/styles/scss/components/contained-list/_contained-list.scss +++ b/packages/styles/scss/components/contained-list/_contained-list.scss @@ -14,6 +14,7 @@ @use '../../spacing' as *; @use '../../theme' as *; @use '../../type' as *; +@use '../../utilities/convert'; @use '../../utilities/button-reset'; @use '../../utilities/focus-outline' as *; @use '../../utilities/custom-property'; @@ -28,6 +29,24 @@ @include layout.use('density', $default: 'normal'); } + .#{$prefix}--contained-list .#{$prefix}--tag { + @include layout.redefine-tokens( + ( + size: ( + height: ( + xs: convert.to-rem(18px), + sm: convert.to-rem(18px), + md: convert.to-rem(24px), + lg: convert.to-rem(24px), + xl: convert.to-rem(24px), + ), + ), + ) + ); + + @include layout.use('size', $default: 'md', $min: 'sm', $max: 'xl'); + } + .#{$prefix}--contained-list > ul { padding: 0; margin: 0; diff --git a/packages/styles/scss/components/tag/_tag.scss b/packages/styles/scss/components/tag/_tag.scss index a491810e2d6d..71e6be20111f 100644 --- a/packages/styles/scss/components/tag/_tag.scss +++ b/packages/styles/scss/components/tag/_tag.scss @@ -27,7 +27,7 @@ @include layout.redefine-tokens( ( size: ( - block-size: ( + height: ( xs: convert.to-rem(18px), sm: convert.to-rem(18px), md: convert.to-rem(24px), @@ -36,7 +36,7 @@ ) ); - @include layout.use('size', $default: 'xs', $min: 'xs', $max: 'md'); + @include layout.use('size', $default: 'md', $min: 'sm', $max: 'md'); @include type-style('label-01'); @include tag-theme($tag-background-gray, $tag-color-gray, $tag-hover-gray); From 7964324b74af573d3c8e9c684817795dcec06529 Mon Sep 17 00:00:00 2001 From: TJ Egan Date: Wed, 30 Aug 2023 09:10:59 -0400 Subject: [PATCH 9/9] fix(ContainedList): keep story the same --- .../react/src/components/ContainedList/ContainedList.stories.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react/src/components/ContainedList/ContainedList.stories.js b/packages/react/src/components/ContainedList/ContainedList.stories.js index ee9eba54cf60..4646e6d2f014 100644 --- a/packages/react/src/components/ContainedList/ContainedList.stories.js +++ b/packages/react/src/components/ContainedList/ContainedList.stories.js @@ -248,7 +248,7 @@ export const WithListTitleDecorators = () => ( justifyContent: 'space-between', }}> List title - + 4