From 4e3a3dac879cbd73dbe88306c5d8504b7a12231b Mon Sep 17 00:00:00 2001 From: TJ Egan Date: Wed, 30 Aug 2023 09:47:06 -0400 Subject: [PATCH] refactor(@carbon/styles): use logical properties for better RTL support (#14531) * refactor(styles): update styles to use CSS logical properties * fix(styles): change padding-inline-end to padding-inline * fix(styles): run stylelint --fix on components * fix(styles): run stylelint --fix on utilities * fix(Select): test padding fix * chore(stylelint): run styelint on files outside @carbon/styles * fix(AspectRatio): remove unsupported float: inline-start * fix(ContainedList): redefine tag tokens in contained list * fix(ContainedList): keep story the same --- ...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 +- packages/grid/scss/_css-grid.scss | 33 +- packages/grid/scss/_flex-grid.scss | 60 ++-- packages/grid/scss/_mixins.scss | 60 ++-- .../scss/components/accordion/_accordion.scss | 70 ++--- .../aspect-ratio/_aspect-ratio.scss | 11 +- .../components/breadcrumb/_breadcrumb.scss | 40 +-- .../scss/components/button/_button.scss | 22 +- .../scss/components/button/_mixins.scss | 24 +- .../scss/components/checkbox/_checkbox.scss | 76 ++--- .../code-snippet/_code-snippet.scss | 116 +++---- .../scss/components/code-snippet/_mixins.scss | 4 +- .../scss/components/combo-box/_combo-box.scss | 4 +- .../combo-button/_combo-button.scss | 4 +- .../contained-list/_contained-list.scss | 63 ++-- .../content-switcher/_content-switcher.scss | 64 ++-- .../components/data-table/_data-table.scss | 287 +++++++++--------- .../scss/components/data-table/_mixins.scss | 6 +- .../data-table/action/_data-table-action.scss | 158 +++++----- .../expandable/_data-table-expandable.scss | 120 ++++---- .../skeleton/_data-table-skeleton.scss | 18 +- .../data-table/sort/_data-table-sort.scss | 76 ++--- .../components/date-picker/_date-picker.scss | 41 +-- .../components/date-picker/_flatpickr.scss | 102 +++---- .../scss/components/dropdown/_dropdown.scss | 98 +++--- .../file-uploader/_file-uploader.scss | 74 ++--- .../fluid-combo-box/_fluid-combo-box.scss | 8 +- .../fluid-date-picker/_fluid-date-picker.scss | 108 +++---- .../fluid-list-box/_fluid-list-box.scss | 66 ++-- .../fluid-multiselect/_fluid-multiselect.scss | 4 +- .../_fluid-number-input.scss | 60 ++-- .../fluid-search/_fluid-search.scss | 34 +-- .../fluid-select/_fluid-select.scss | 34 +-- .../fluid-text-area/_fluid-text-area.scss | 42 +-- .../fluid-text-input/_fluid-text-input.scss | 52 ++-- .../fluid-time-picker/_fluid-time-picker.scss | 46 +-- .../styles/scss/components/form/_form.scss | 29 +- .../inline-loading/_inline-loading.scss | 18 +- .../styles/scss/components/link/_link.scss | 2 +- .../scss/components/list-box/_list-box.scss | 212 ++++++------- .../styles/scss/components/list/_list.scss | 14 +- .../scss/components/loading/_loading.scss | 17 +- .../components/menu-button/_menu-button.scss | 2 +- .../styles/scss/components/menu/_menu.scss | 14 +- .../styles/scss/components/modal/_modal.scss | 142 ++++----- .../components/multiselect/_multiselect.scss | 22 +- .../_actionable-notification.scss | 74 +++-- .../notification/_inline-notification.scss | 48 +-- .../scss/components/notification/_mixins.scss | 6 +- .../notification/_toast-notification.scss | 34 +-- .../number-input/_number-input.scss | 140 ++++----- .../overflow-menu/_overflow-menu.scss | 100 +++--- .../components/pagination-nav/_mixins.scss | 12 +- .../pagination-nav/_pagination-nav.scss | 22 +- .../components/pagination/_pagination.scss | 68 +++-- .../pagination/_unstable_pagination.scss | 50 +-- .../scss/components/popover/_popover.scss | 126 ++++---- .../progress-bar/_progress-bar.scss | 21 +- .../_progress-indicator.scss | 85 +++--- .../radio-button/_radio-button.scss | 42 +-- .../scss/components/search/_search.scss | 69 ++--- .../scss/components/select/_select.scss | 60 ++-- .../skeleton-styles/_skeleton-styles.scss | 18 +- .../scss/components/slider/_slider.scss | 56 ++-- .../components/structured-list/_mixins.scss | 8 +- .../structured-list/_structured-list.scss | 32 +- .../styles/scss/components/tabs/_tabs.scss | 98 +++--- packages/styles/scss/components/tag/_tag.scss | 36 +-- .../scss/components/text-area/_text-area.scss | 32 +- .../components/text-input/_text-input.scss | 84 ++--- .../styles/scss/components/tile/_tile.scss | 20 +- .../components/time-picker/_time-picker.scss | 34 +-- .../scss/components/toggle/_toggle.scss | 50 +-- .../scss/components/toggletip/_toggletip.scss | 5 +- .../scss/components/tooltip/_tooltip.scss | 12 +- .../scss/components/treeview/_treeview.scss | 54 ++-- .../components/ui-shell/content/_content.scss | 6 +- .../ui-shell/header-panel/_header-panel.scss | 14 +- .../components/ui-shell/header/_header.scss | 94 +++--- .../ui-shell/side-nav/_side-nav.scss | 130 ++++---- .../ui-shell/switcher/_switcher.scss | 12 +- .../styles/scss/utilities/_button-reset.scss | 2 +- packages/styles/scss/utilities/_skeleton.scss | 8 +- .../styles/scss/utilities/_text-overflow.scss | 2 +- .../styles/scss/utilities/_text-truncate.scss | 4 +- packages/styles/scss/utilities/_tooltip.scss | 90 +++--- .../scss/utilities/_visually-hidden.scss | 8 +- www/src/components/Box/Box.module.scss | 56 ++-- www/src/components/Header/Header.module.scss | 8 +- yarn.lock | 10 + 92 files changed, 2267 insertions(+), 2238 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 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

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/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/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..15863df302eb 100644 --- a/packages/styles/scss/components/aspect-ratio/_aspect-ratio.scss +++ b/packages/styles/scss/components/aspect-ratio/_aspect-ratio.scss @@ -45,11 +45,14 @@ $aspect-ratios: ( } .#{$prefix}--aspect-ratio::before { - width: 1px; - height: 0; - margin-left: -1px; + block-size: 0; content: ''; + // 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; } .#{$prefix}--aspect-ratio::after { @@ -63,7 +66,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..c46d5e602ee9 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,10 +149,10 @@ } .#{$prefix}--btn--icon-only { - width: layout.size('height'); - height: 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 { @@ -283,7 +283,7 @@ .#{$prefix}--btn__icon { position: static; - margin-left: $spacing-03; + margin-inline-start: $spacing-03; } &:hover, @@ -324,19 +324,19 @@ } .#{$prefix}--btn.#{$prefix}--btn--expressive .#{$prefix}--btn__icon { - width: convert.to-rem(20px); - height: 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 .#{$prefix}--btn.#{$prefix}--skeleton { @include skeleton; - width: convert.to-rem(150px); + inline-size: convert.to-rem(150px); } // button set styles @@ -349,9 +349,9 @@ } .#{$prefix}--btn-set .#{$prefix}--btn { - width: 100%; + 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 01e4e396dad9..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; - width: max-content; - max-width: convert.to-rem(320px); - min-height: 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,17 +91,17 @@ $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 - 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); - flex-shrink: 0; + inset-inline-end: layout.density('padding-inline'); 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..8e6fbf333775 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 @@ -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); cursor: pointer; + min-block-size: convert.to-rem(24px); + padding-block-start: convert.to-rem(3px); + padding-inline-start: convert.to-rem(20px); 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,6 @@ // `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; - - // 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); 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; - 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; - margin-top: convert.to-rem(-3px) #{'/*rtl:0rem*/'}; background: none; + block-size: convert.to-rem(5px); + border-block-end: 1.5px solid $icon-inverse; + border-inline-start: 1.5px solid $icon-inverse; 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*/'}; } @@ -136,15 +136,15 @@ // 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 .#{$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; + 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,13 +224,13 @@ .#{$prefix}--checkbox__validation-msg { display: none; align-items: flex-start; - margin-top: $spacing-02; + margin-block-start: $spacing-02; } .#{$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 { @@ -266,9 +266,9 @@ .#{$prefix}--form-requirement { display: block; overflow: visible; - max-height: 100%; - margin-top: 0; - margin-left: $spacing-03; + 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; - width: convert.to-rem(100px); - height: $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 ebe18d47010c..55b30c294213 100644 --- a/packages/styles/scss/components/code-snippet/_code-snippet.scss +++ b/packages/styles/scss/components/code-snippet/_code-snippet.scss @@ -149,26 +149,26 @@ $copy-btn-feedback: $background-inverse !default; @include bx--snippet; display: flex; - height: $spacing-08; align-items: center; - padding-right: $spacing-08; + block-size: $spacing-08; + padding-inline-end: $spacing-08; } .#{$prefix}--snippet--single.#{$prefix}--snippet--no-copy { padding: 0; &::after { - right: $spacing-05; + inset-inline-end: $spacing-05; } } .#{$prefix}--snippet--single .#{$prefix}--snippet-container { position: relative; display: flex; - height: 100%; align-items: center; - padding-left: $spacing-05; + block-size: 100%; overflow-x: auto; + padding-inline-start: $spacing-05; &:focus { @include focus-outline('outline'); @@ -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,9 +198,9 @@ $copy-btn-feedback: $background-inverse !default; //collapsed snippet container .#{$prefix}--snippet--multi .#{$prefix}--snippet-container { position: relative; - min-height: 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,15 +225,15 @@ $copy-btn-feedback: $background-inverse !default; // collapsed pre .#{$prefix}--snippet--multi .#{$prefix}--snippet-container pre { - padding-right: $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 .#{$prefix}--snippet-container pre { - padding-right: 0; + padding-inline-end: 0; } // expanded pre @@ -247,12 +247,12 @@ $copy-btn-feedback: $background-inverse !default; .#{$prefix}--snippet-container pre::after { position: absolute; - top: 0; - right: 0; - width: convert.to-rem(16px); - height: 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 { - width: convert.to-rem(16px); - height: 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); } @@ -296,17 +296,17 @@ $copy-btn-feedback: $background-inverse !default; @include font-family('sans'); position: absolute; - top: 0; - right: 0; + inset-block-start: 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 { - width: initial; - height: 1.25rem; - min-height: 1.25rem; + block-size: 1.25rem; + inline-size: initial; + min-block-size: 1.25rem; padding-inline: 0; } @@ -317,8 +317,8 @@ $copy-btn-feedback: $background-inverse !default; // override multi copy btn styles .#{$prefix}--snippet.#{$prefix}--snippet--multi .#{$prefix}--popover-container { - top: 0.5rem; - right: 0.5rem; + inset-block-start: 0.5rem; + inset-inline-end: 0.5rem; } .#{$prefix}--snippet--multi .#{$prefix}--copy-btn { @@ -332,21 +332,21 @@ $copy-btn-feedback: $background-inverse !default; position: absolute; z-index: 10; - right: 0; - bottom: 0; display: inline-flex; - height: 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 { position: relative; - top: convert.to-rem(-1px); + inset-block-start: convert.to-rem(-1px); } .#{$prefix}--snippet-btn--expand--hide.#{$prefix}--snippet-btn--expand { @@ -354,8 +354,8 @@ $copy-btn-feedback: $background-inverse !default; } .#{$prefix}--snippet-btn--expand .#{$prefix}--icon-chevron--down { - margin-left: $spacing-03; fill: $icon-primary; + margin-inline-start: $spacing-03; 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%; + 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 - top: convert.to-rem(50.8px); - right: auto; - left: 50%; + inset-block-start: convert.to-rem(50.8px); + inset-inline-end: auto; + 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,63 +439,63 @@ $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)}); - right: auto; - left: 50%; + inset-block-start: calc(100% - #{convert.to-rem(4px)}); + inset-inline-end: auto; + inset-inline-start: 50%; } // Overflow Indicator .#{$prefix}--snippet__overflow-indicator--left, .#{$prefix}--snippet__overflow-indicator--right { z-index: 1; - width: $spacing-05; flex: 1 0 auto; + inline-size: $spacing-05; } .#{$prefix}--snippet__overflow-indicator--left { order: 0; - margin-right: -$spacing-05; background-image: linear-gradient(to left, transparent, $layer); + margin-inline-end: -$spacing-05; } .#{$prefix}--snippet__overflow-indicator--right { order: 2; - margin-left: -$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; - width: $spacing-07; - height: calc(100% - #{$spacing-02}); + 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 .#{$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,37 +522,37 @@ $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; - margin-top: 0.5rem; + block-size: 1rem; + inline-size: 100%; + margin-block-start: 0.5rem; &:first-child { margin: 0; } &:nth-child(2) { - width: 85%; + inline-size: 85%; } &:nth-child(3) { - width: 95%; + inline-size: 95%; } } .#{$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 ec98cf8acb2c..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; - width: 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 35f73a4b0a3d..7e5396699b89 100644 --- a/packages/styles/scss/components/combo-button/_combo-button.scss +++ b/packages/styles/scss/components/combo-button/_combo-button.scss @@ -29,12 +29,12 @@ @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; } } .#{$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..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; @@ -36,20 +55,20 @@ .#{$prefix}--contained-list__header { position: sticky; z-index: 1; - top: 0; display: flex; align-items: center; + inset-block-start: 0; padding-inline: 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,8 +76,8 @@ } .#{$prefix}--contained-list .#{$prefix}--search .#{$prefix}--search-input { - border-bottom: 1px solid $border-subtle; background-color: $background; + border-block-end: 1px solid $border-subtle; } .#{$prefix}--contained-list @@ -68,7 +87,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 +99,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 +107,7 @@ .#{$prefix}--search-input:focus ~ .#{$prefix}--search-close:hover { border: 2px solid $focus; - border-left: 0; + border-inline-start: 0; outline: none; } @@ -101,9 +120,9 @@ .#{$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; background-color: $background; + block-size: layout.size('height'); + border-block-end: 1px solid $border-subtle; color: $text-primary; } @@ -124,8 +143,8 @@ .#{$prefix}--contained-list--disclosed .#{$prefix}--contained-list__header { @include type-style('label-01'); - height: $spacing-07; background-color: $layer; + block-size: $spacing-07; color: $text-secondary; } @@ -138,7 +157,7 @@ } .#{$prefix}--contained-list-item:not(:first-of-type) { - margin-top: -1px; + margin-block-start: -1px; } .#{$prefix}--contained-list-item__content { @@ -167,26 +186,26 @@ @include type-style('body-01'); - min-height: 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; - bottom: 0; - left: 0; - height: 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'); - left: layout.density('padding-inline'); + inset-inline-end: layout.density('padding-inline'); + inset-inline-start: layout.density('padding-inline'); } .#{$prefix}--contained-list-item--clickable @@ -227,11 +246,11 @@ .#{$prefix}--contained-list__action, .#{$prefix}--contained-list-item__action { position: absolute; - top: 0; - right: 0; - left: 0; display: flex; justify-content: flex-end; + inset-block-start: 0; + inset-inline-end: 0; + inset-inline-start: 0; pointer-events: none; } @@ -249,6 +268,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..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; - width: 100%; - height: 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-bottom: 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; - top: 0; - left: 0; display: block; - width: 100%; - height: 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 { - width: 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-left: convert.to-rem(1px) solid $border-inverse; - border-bottom-left-radius: convert.to-rem(4px); - border-top-left-radius: convert.to-rem(4px); + border-end-start-radius: convert.to-rem(4px); + border-inline-start: convert.to-rem(1px) solid $border-inverse; + 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-right: convert.to-rem(1px) solid $border-inverse; - border-bottom-right-radius: convert.to-rem(4px); - border-top-right-radius: convert.to-rem(4px); + border-end-end-radius: convert.to-rem(4px); + border-inline-end: convert.to-rem(1px) solid $border-inverse; + 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; - left: 0; display: block; - width: convert.to-rem(1px); - height: 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) @@ -194,13 +194,13 @@ } .#{$prefix}--content-switcher__icon + span { - margin-left: $spacing-03; + margin-inline-start: $spacing-03; } .#{$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-left: convert.to-rem(1px) solid $border-inverse; - border-bottom-left-radius: convert.to-rem(4px); - border-top-left-radius: convert.to-rem(4px); + border-end-start-radius: convert.to-rem(4px); + border-inline-start: convert.to-rem(1px) solid $border-inverse; + 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-right: convert.to-rem(1px) solid $border-inverse; - border-bottom-right-radius: convert.to-rem(4px); - border-top-right-radius: convert.to-rem(4px); + border-end-end-radius: convert.to-rem(4px); + border-inline-end: convert.to-rem(1px) solid $border-inverse; + border-start-end-radius: convert.to-rem(4px); } .#{$prefix}--content-switcher--icon-only @@ -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; + block-size: 20px; + inline-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..808f5f1305ba 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 { @@ -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 { - width: 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'); - width: 100%; background-color: $layer; + + inline-size: 100%; } .#{$prefix}--data-table tr { - width: 100%; - height: $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-bottom: 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,22 +124,22 @@ .#{$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-top: $spacing-05; - padding-bottom: $spacing-05; + padding-block-end: $spacing-05; + padding-block-start: $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 +151,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-bottom: $spacing-05; + padding-block-end: $spacing-05; + padding-block-start: $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); } } @@ -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,33 +179,33 @@ } .#{$prefix}--data-table th { - padding-right: $spacing-05; - padding-left: $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 { // 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 { - text-align: left; + text-align: start; } .#{$prefix}--data-table td, .#{$prefix}--data-table tbody th { - padding-right: $spacing-05; - padding-left: $spacing-05; - border-top: 1px solid $layer; - border-bottom: 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-left: $spacing-04; + padding-inline-start: $spacing-04; } } @@ -286,8 +287,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 +312,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; - padding-bottom: 0; + block-size: convert.to-rem(24px); + padding-block-end: 0; + padding-block-start: 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,39 +337,39 @@ 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 tbody tr:not(.#{$prefix}--parent-row):nth-child(even) td { - border-top: 1px solid $layer-accent; - border-bottom: 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-bottom: 1px solid $layer-hover; background-color: $layer-hover; + border-block-end: 1px solid $layer-hover; + border-block-start: 1px solid $layer-hover; } //---------------------------------------------------------------------------- // 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); background: $layer-accent; + inline-size: convert.to-rem(32px); transition: background-color $duration-fast-01 motion(entrance, productive); } @@ -376,69 +377,69 @@ .#{$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-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); + 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 { - width: convert.to-rem(24px); - height: 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 { - width: convert.to-rem(32px); - height: convert.to-rem(32px); padding: 0; - padding-left: 0.5rem; + 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 { - width: convert.to-rem(40px); - height: 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 { - height: convert.to-rem(64px); - padding-top: convert.to-rem(10px); - padding-bottom: convert.to-rem(22px); + block-size: convert.to-rem(64px); + padding-block-end: convert.to-rem(22px); + padding-block-start: convert.to-rem(10px); } .#{$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 @@ -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; - // Bottom border acts as separator from other rows - border-bottom: 1px solid $layer-active; background-color: $layer-selected; + // Bottom border acts as separator from other rows + border-block-end: 1px solid $layer-active; + 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 { + border-block-end: 1px solid $layer-selected; // Doesn't need separators - border-top: 1px solid $layer-selected; - border-bottom: 1px solid $layer-selected; + border-block-start: 1px solid $layer-selected; } // zebra select - odd child @@ -484,14 +485,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 @@ -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-bottom: 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; } @@ -519,23 +520,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-bottom: convert.to-rem(2px); + padding-block-end: convert.to-rem(2px); + padding-block-start: convert.to-rem(2px); } .#{$prefix}--data-table--xs td, .#{$prefix}--data-table--xs tbody tr th { - padding-top: convert.to-rem(2px); - padding-bottom: convert.to-rem(2px); + padding-block-end: convert.to-rem(2px); + padding-block-start: convert.to-rem(2px); } .#{$prefix}--data-table--xs .#{$prefix}--overflow-menu { - width: convert.to-rem(32px); - height: calc(100% + 1px); + block-size: calc(100% + 1px); + inline-size: convert.to-rem(32px); } .#{$prefix}--data-table.#{$prefix}--data-table--xs:not( @@ -546,16 +547,16 @@ .#{$prefix}--data-table--top-aligned-header ) th.#{$prefix}--table-column-checkbox { - padding-top: 0; - padding-bottom: 0; + padding-block-end: 0; + padding-block-start: 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,20 +565,20 @@ .#{$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-bottom: convert.to-rem(7px); + padding-block-end: convert.to-rem(7px); + padding-block-start: 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-top: convert.to-rem(7px); - padding-bottom: convert.to-rem(6px); + padding-block-end: convert.to-rem(6px); + padding-block-start: convert.to-rem(7px); } .#{$prefix}--data-table.#{$prefix}--data-table--sm:not( @@ -588,12 +589,12 @@ .#{$prefix}--data-table--top-aligned-header ) th.#{$prefix}--table-column-checkbox { - padding-top: convert.to-rem(3px); - padding-bottom: convert.to-rem(3px); + padding-block-end: convert.to-rem(3px); + padding-block-start: convert.to-rem(3px); } .#{$prefix}--data-table--sm .#{$prefix}--overflow-menu { - height: calc(100% + 1px); + block-size: calc(100% + 1px); } //---------------------------------------------------------------------------- @@ -602,20 +603,20 @@ .#{$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-bottom: convert.to-rem(7px); + padding-block-end: convert.to-rem(7px); + padding-block-start: convert.to-rem(7px); } .#{$prefix}--data-table--md td, .#{$prefix}--data-table--md tbody tr th { - padding-top: convert.to-rem(7px); - padding-bottom: convert.to-rem(6px); + padding-block-end: convert.to-rem(6px); + padding-block-start: convert.to-rem(7px); } .#{$prefix}--data-table.#{$prefix}--data-table--md:not( @@ -626,13 +627,13 @@ .#{$prefix}--data-table--top-aligned-header ) th.#{$prefix}--table-column-checkbox { - padding-top: convert.to-rem(3px); - padding-bottom: convert.to-rem(3px); + padding-block-end: convert.to-rem(3px); + padding-block-start: convert.to-rem(3px); } .#{$prefix}--data-table--md .#{$prefix}--table-column-menu { - padding-top: convert.to-rem(3px); - padding-bottom: convert.to-rem(3px); + padding-block-end: convert.to-rem(3px); + padding-block-start: convert.to-rem(3px); } //---------------------------------------------------------------------------- @@ -641,18 +642,18 @@ .#{$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-bottom: $spacing-05; + padding-block-end: $spacing-05; + padding-block-start: $spacing-05; } .#{$prefix}--data-table--xl td, .#{$prefix}--data-table--xl tbody tr th { - padding-top: $spacing-05; - padding-bottom: $spacing-05; + padding-block-end: $spacing-05; + padding-block-start: $spacing-05; } .#{$prefix}--data-table--xl th, @@ -668,11 +669,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 +699,16 @@ thead { position: sticky; z-index: 1; - top: 0; overflow: scroll; - width: 100%; + inline-size: 100%; + inset-block-start: 0; // 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,16 +720,16 @@ } 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 { - max-width: convert.to-rem(48px); + max-inline-size: convert.to-rem(48px); } thead .#{$prefix}--table-expand { @@ -736,7 +737,7 @@ } .#{$prefix}--parent-row { - min-height: 3rem; + min-block-size: 3rem; } &:not(.#{$prefix}--data-table--xs):not(.#{$prefix}--data-table--xl):not( @@ -745,7 +746,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 @@ -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 { - width: 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,17 +781,17 @@ // 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 { - height: auto; align-items: center; - padding-top: 0; + block-size: auto; + padding-block-start: 0; } //hides webkit scrollbar @@ -808,7 +809,7 @@ } tbody tr:last-of-type { - border-bottom: 0; + border-block-end: 0; } th:not(.#{$prefix}--table-column-checkbox):not( @@ -817,59 +818,59 @@ td:not(.#{$prefix}--table-column-checkbox):not( .#{$prefix}--table-column-menu ):not(.#{$prefix}--table-expand):not(.#{$prefix}--table-column-icon) { - width: 100%; - min-width: 0; + inline-size: 100%; + min-inline-size: 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 { @include text-overflow; - max-width: calc(100% - 10px); - // Needed to reduce 1px jump when toggling between variations - padding-top: convert.to-rem(15px); - padding-bottom: 1rem; + 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); } &.#{$prefix}--data-table--xs th .#{$prefix}--table-header-label { - padding-top: convert.to-rem(3px); - padding-bottom: 0; + padding-block-end: 0; + padding-block-start: convert.to-rem(3px); } &.#{$prefix}--data-table--sm th .#{$prefix}--table-header-label { - padding-top: convert.to-rem(8px); - padding-bottom: 0; + padding-block-end: 0; + padding-block-start: convert.to-rem(8px); } &.#{$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/_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 3be4eb510ce8..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; - width: 100%; - min-height: $spacing-09; background-color: $layer; + inline-size: 100%; + min-block-size: $spacing-09; } .#{$prefix}--toolbar-content { display: flex; - width: 100%; - height: $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 { - height: 3rem; padding: 0 3rem; // For toolbar animation with (esp.) persistent search box background-color: transparent; + block-size: 3rem; } .#{$prefix}--toolbar-content .#{$prefix}--overflow-menu { - width: 3rem; - height: 3rem; + block-size: 3rem; + inline-size: 3rem; } //------------------------------------------------- @@ -75,10 +75,10 @@ //------------------------------------------------- .#{$prefix}--toolbar-search-container-expandable { position: relative; - width: $spacing-09; - height: $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); @@ -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,13 +115,13 @@ .#{$prefix}--toolbar-search-container-expandable.#{$prefix}--search .#{$prefix}--search-close { - width: $spacing-09; - height: $spacing-09; + block-size: $spacing-09; + inline-size: $spacing-09; &::before { - top: convert.to-rem(2px); - height: 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); } } @@ -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,27 +153,27 @@ .#{$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; padding: $spacing-05; + block-size: $spacing-09; + inline-size: $spacing-09; } .#{$prefix}--toolbar-search-container-expandable.#{$prefix}--search--disabled @@ -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,10 +250,10 @@ @include button-reset.reset; display: flex; - width: $spacing-09; - height: $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; - width: $spacing-09; - height: $spacing-09; + block-size: $spacing-09; cursor: pointer; + inline-size: $spacing-09; transition: background $duration-fast-02 motion(entrance, productive); } @@ -296,23 +296,23 @@ } .#{$prefix}--toolbar-action ~ .#{$prefix}--btn { - max-width: none; margin: 0; + max-inline-size: none; white-space: nowrap; } .#{$prefix}--overflow-menu--data-table { - height: $spacing-09; + block-size: $spacing-09; } //------------------------------------------------- //TOOLBAR BUTTON ICONS //------------------------------------------------- .#{$prefix}--toolbar-action__icon { - width: auto; - max-width: $spacing-05; - height: $spacing-05; + block-size: $spacing-05; fill: $icon-primary; + inline-size: auto; + max-inline-size: $spacing-05; } //------------------------------------------------- @@ -320,15 +320,15 @@ //------------------------------------------------- .#{$prefix}--toolbar-search-container-persistent { position: relative; - width: 100%; - height: $spacing-09; + block-size: $spacing-09; + inline-size: 100%; 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,13 +337,13 @@ .#{$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; 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 { - width: $spacing-09; - height: $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; - bottom: 0; - left: 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 { - padding-right: $spacing-05; - padding-left: $spacing-05; color: $text-on-color; + padding-inline-end: $spacing-05; + padding-inline-start: $spacing-05; white-space: nowrap; } @@ -432,8 +432,8 @@ .#{$prefix}--action-list .#{$prefix}--btn .#{$prefix}--btn__icon { position: static; - margin-left: $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 - top: convert.to-rem(15px); - left: 0; display: block; - width: convert.to-rem(1px); - height: $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; - left: 0; display: flex; - min-height: 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 { @@ -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); + 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 { - width: convert.to-rem(32px); - height: 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 { - 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); + 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); - height: convert.to-rem(32px); + min-inline-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; + block-size: 2rem; + inline-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); padding: $spacing-03 0; + block-size: convert.to-rem(32px); + inline-size: convert.to-rem(32px); } .#{$prefix}--table-toolbar--sm .#{$prefix}--btn--primary { - height: convert.to-rem(32px); - min-height: auto; - padding-top: 0.375rem; - padding-bottom: 0.375rem; + block-size: convert.to-rem(32px); + min-block-size: auto; + padding-block-end: 0.375rem; + padding-block-start: 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..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,25 +32,25 @@ //---------------------------------------------------------------------------- // default styles .#{$prefix}--expandable-row--hidden td { - width: auto; padding: $spacing-05; - border-top: 0; + border-block-start: 0; + inline-size: auto; } //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-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-left: 3.5rem; - border-bottom: 1px solid $border-subtle; + 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,13 +80,13 @@ + tr[data-child-row] td .#{$prefix}--child-row-inner-container { - max-height: 100%; + max-block-size: 100%; } // 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; } @@ -114,35 +114,35 @@ // hovering on collapsed parent 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; + 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-bottom: 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; } 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; background-color: $layer-hover; + border-block-end: 1px solid $border-subtle; 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) @@ -151,23 +151,23 @@ } tr.#{$prefix}--expandable-row--hover td { - border-top: 1px solid $border-subtle; - border-bottom: 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; } 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,12 +212,12 @@ @include button-reset.reset('false'); display: inline-flex; - width: 100%; - // Account for the border in `.bx--table-expand` - height: 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,9 +227,9 @@ .#{$prefix}--data-table--top-aligned-header th .#{$prefix}--table-expand__button { - height: convert.to-rem(32px); align-items: start; - padding-top: $spacing-03; + block-size: convert.to-rem(32px); + 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,8 +248,8 @@ .#{$prefix}--data-table--top-aligned-header.#{$prefix}--data-table--md th .#{$prefix}--table-expand__button { - padding-top: $spacing-03; - margin-top: -$spacing-02; + margin-block-start: -$spacing-02; + padding-block-start: $spacing-03; } .#{$prefix}--table-expand__button:focus { @@ -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,12 +272,12 @@ 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); 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 @@ -300,14 +300,14 @@ //---------------------------------------------------------------------------- .#{$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; 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-bottom: 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-bottom: 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-bottom: 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-bottom: 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-bottom: 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-bottom: 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; } @@ -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; } @@ -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-bottom: 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-bottom: 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 66d698018fd8..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 @@ -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; } @@ -25,9 +25,9 @@ @include skeleton; display: block; + block-size: convert.to-rem(16px); - width: convert.to-rem(64px); - height: convert.to-rem(16px); + inline-size: convert.to-rem(64px); } .#{$prefix}--data-table.#{$prefix}--skeleton tr:hover td { @@ -56,17 +56,19 @@ .#{$prefix}--data-table-header__title { @include skeleton; - width: convert.to-rem(120px); - height: convert.to-rem(24px); + 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; - width: convert.to-rem(160px); - height: convert.to-rem(16px); + block-size: convert.to-rem(16px); + + inline-size: convert.to-rem(160px); - margin-top: $spacing-03; + 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 7ca49de7ab88..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] { - height: $spacing-09; padding: 0; - border-top: none; - border-bottom: 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; - width: 100%; - min-height: 100%; align-items: center; justify-content: space-between; - padding-left: $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 { - padding-right: $spacing-05; - padding-left: $spacing-05; line-height: 1; + padding-inline-end: $spacing-05; + padding-inline-start: $spacing-05; } // ------------------------------------- @@ -83,11 +83,11 @@ // ------------------------------------- th .#{$prefix}--table-sort__flex { display: flex; - width: 100%; - height: 100%; - min-height: 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 { @@ -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,20 +107,20 @@ th.#{$prefix}--table-sort__header .#{$prefix}--table-sort__flex .#{$prefix}--table-header-label { - padding-top: 0; - padding-bottom: 0; + padding-block-end: 0; + padding-block-start: 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-bottom: convert.to-rem(7px); + padding-block-end: convert.to-rem(7px); + padding-block-start: 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-bottom: convert.to-rem(2px); + padding-block-end: convert.to-rem(2px); + padding-block-start: convert.to-rem(2px); } .#{$prefix}--data-table--sort:not(.#{$prefix}--data-table--xs):not( @@ -132,33 +132,33 @@ 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; align-items: flex-start; + min-block-size: 4rem; } // ------------------------------------- @@ -174,11 +174,11 @@ } .#{$prefix}--table-sort__icon-unsorted { - width: convert.to-rem(20px); - min-width: $spacing-05; - margin-right: $spacing-03; - margin-left: $spacing-03; fill: $icon-primary; + inline-size: convert.to-rem(20px); + margin-inline-end: $spacing-03; + margin-inline-start: $spacing-03; + min-inline-size: $spacing-05; opacity: 0; } @@ -203,11 +203,11 @@ } .#{$prefix}--table-sort__icon { - width: convert.to-rem(20px); - min-width: $spacing-05; - margin-right: $spacing-03; - margin-left: $spacing-03; fill: $icon-primary; + inline-size: convert.to-rem(20px); + margin-inline-end: $spacing-03; + margin-inline-start: $spacing-03; + min-inline-size: $spacing-05; opacity: 1; transform: rotate(0); transition: transform $transition-base $standard-easing; @@ -218,34 +218,34 @@ //---------------------------------------------------------------------------- // 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, .#{$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 771a60ffd205..d2bffe89202e 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,11 +95,11 @@ position: relative; display: block; - height: convert.to-rem(40px); padding: 0 $spacing-05; border: none; - border-bottom: 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-bottom: 1px solid transparent; background-color: $field; + border-block-end: 1px solid transparent; 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,20 +130,20 @@ // 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%; - right: 1rem; fill: $icon-primary; + // vertically center icon within parent container on IE11 + inset-block-start: 50%; + inset-inline-end: 1rem; pointer-events: none; transform: translateY(-50%); } @@ -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,9 @@ .#{$prefix}--date-picker.#{$prefix}--skeleton .#{$prefix}--label { @include skeleton; - width: convert.to-rem(75px); - height: convert.to-rem(14px); + 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 7096b50ff599..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; - width: 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; - width: convert.to-rem(288px); - height: 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,13 +146,13 @@ .flatpickr-calendar.inline { position: relative; - top: convert.to-rem(2px); display: block; + inset-block-start: convert.to-rem(2px); } .flatpickr-calendar.static { position: absolute; - top: calc(100% + 2px); + inset-block-start: calc(100% + 2px); } .flatpickr-calendar.static.open { @@ -161,36 +161,36 @@ } .flatpickr-calendar.hasWeeks { - width: auto; + inline-size: auto; } .dayContainer { display: flex; - height: 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-bottom: 0; - border-bottom-left-radius: 0; - border-bottom-right-radius: 0; + border-block-end: 0; + border-end-end-radius: 0; + border-end-start-radius: 0; } .flatpickr-calendar .hasWeeks .dayContainer { - border-left: 0; + border-inline-start: 0; } .flatpickr-calendar.showTimeInput.hasTime .flatpickr-time { - height: convert.to-rem(40px); - border-top: 1px solid #e6e6e6; + block-size: convert.to-rem(40px); + border-block-start: 1px solid #e6e6e6; } .flatpickr-calendar.noCalendar.hasTime .flatpickr-time { - height: auto; + block-size: auto; } .flatpickr-calendar:focus { @@ -199,17 +199,17 @@ .flatpickr-months { display: flex; - width: 100%; justify-content: space-between; + inline-size: 100%; } .flatpickr-month { @include type-style('heading-compact-01'); display: flex; - height: 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; - width: convert.to-rem(40px); - height: 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,15 +258,15 @@ @include type-style('heading-compact-01'); display: flex; - height: convert.to-rem(28px); align-items: center; justify-content: center; + block-size: convert.to-rem(28px); 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,6 @@ .numInputWrapper .numInput { display: inline-block; - width: 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,60 +317,60 @@ } .numInputWrapper .arrowUp { - top: convert.to-rem(4px); - border-bottom: 0; + border-block-end: 0; + inset-block-start: convert.to-rem(4px); &::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; + border-block-start: convert.to-rem(4px) solid $icon-primary; } } .numInputWrapper .arrowUp, .numInputWrapper .arrowDown { position: absolute; - left: 2.6rem; - width: convert.to-rem(12px); - height: 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; - top: 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: ''; + 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,13 +385,13 @@ .flatpickr-weekdays { display: flex; - height: convert.to-rem(40px); align-items: center; + block-size: convert.to-rem(40px); } .flatpickr-weekdaycontainer { display: flex; - width: 100%; + inline-size: 100%; } .flatpickr-weekday { @@ -436,12 +436,12 @@ @include type-style('body-compact-01'); display: flex; - width: convert.to-rem(40px); - height: 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; - bottom: convert.to-rem(7px); - left: 50%; display: block; - width: convert.to-rem(4px); - height: 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 29a136166e42..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; - width: 100%; - height: convert.to-rem(40px); border: none; - border-bottom: 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,50 +68,50 @@ // 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 { - height: convert.to-rem(48px); - max-height: convert.to-rem(48px); + block-size: convert.to-rem(48px); + max-block-size: 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); - max-height: convert.to-rem(32px); + block-size: convert.to-rem(32px); + max-block-size: 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 { - border-bottom-color: $border-subtle; + border-block-end-color: $border-subtle; } .#{$prefix}--dropdown--invalid { @include focus-outline('invalid'); .#{$prefix}--dropdown-text { - padding-right: convert.to-rem(56px); + padding-inline-end: convert.to-rem(56px); } + .#{$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; - top: 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); } @@ -140,26 +140,26 @@ } .#{$prefix}--dropdown--up .#{$prefix}--dropdown-list { - bottom: 2rem; + inset-block-end: 2rem; } .#{$prefix}--dropdown__arrow { position: absolute; - top: 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 { - width: 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'); @@ -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,11 +189,11 @@ position: absolute; z-index: z('dropdown'); display: flex; - width: 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,12 +231,12 @@ } &:first-of-type .#{$prefix}--dropdown-link { - border-top-color: transparent; + border-block-start-color: transparent; } } .#{$prefix}--dropdown-item:last-of-type .#{$prefix}--dropdown-link { - border-bottom: none; + border-block-end: none; } .#{$prefix}--dropdown-link { @@ -244,11 +244,11 @@ display: block; overflow: hidden; - height: 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 { - height: convert.to-rem(32px); - padding-top: convert.to-rem(7px); - padding-bottom: convert.to-rem(7px); + block-size: convert.to-rem(32px); + padding-block-end: convert.to-rem(7px); + padding-block-start: 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; @@ -364,15 +364,15 @@ } .#{$prefix}--dropdown--auto-width { - width: auto; - max-width: convert.to-rem(400px); + inline-size: auto; + max-inline-size: convert.to-rem(400px); } .#{$prefix}--dropdown--inline { display: inline-block; - width: 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); @@ -385,8 +385,8 @@ } .#{$prefix}--dropdown__arrow { - top: convert.to-rem(8px); - right: convert.to-rem(8px); + inset-block-start: 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; - height: 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,12 +414,12 @@ .#{$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 .#{$prefix}--dropdown-text { - padding-right: convert.to-rem(56px); + padding-inline-end: convert.to-rem(56px); } .#{$prefix}--dropdown--inline.#{$prefix}--dropdown--open:focus @@ -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 d366f9920198..712c31410795 100644 --- a/packages/styles/scss/components/file-uploader/_file-uploader.scss +++ b/packages/styles/scss/components/file-uploader/_file-uploader.scss @@ -26,12 +26,12 @@ /// @group file-uploader @mixin file-uploader { .#{$prefix}--file { - width: 100%; + inline-size: 100%; } .#{$prefix}--file--invalid { - margin-right: $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-right: convert.to-rem(64px); margin: 0; + padding-inline-end: convert.to-rem(64px); } .#{$prefix}--file-browse-btn { display: inline-block; - width: 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 { @@ -118,78 +118,78 @@ } .#{$prefix}--file-container--drop { - width: 100%; + inline-size: 100%; } // 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-height: $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 { // 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); gap: $spacing-03 $spacing-05; + min-block-size: convert.to-rem(40px); } .#{$prefix}--file__selected-file--sm { - min-height: 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,18 +208,18 @@ } .#{$prefix}--file__selected-file--invalid .#{$prefix}--form-requirement { - padding-top: $spacing-05; - border-top: 1px solid $border-subtle; + border-block-start: 1px solid $border-subtle; + padding-block-start: $spacing-05; } .#{$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 @@ -247,25 +247,25 @@ 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; - padding-right: $spacing-05; + min-inline-size: 1.5rem; + padding-inline-end: $spacing-05; .#{$prefix}--loading__svg { stroke: $icon-primary; @@ -287,22 +287,22 @@ } .#{$prefix}--file__state-container .#{$prefix}--file-invalid { - width: $spacing-05; - height: $spacing-05; + block-size: $spacing-05; fill: $support-error; + inline-size: $spacing-05; } .#{$prefix}--file__state-container .#{$prefix}--file-close { display: flex; - width: $spacing-06; - height: $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'); @@ -314,20 +314,20 @@ } .#{$prefix}--file__state-container .#{$prefix}--inline-loading__animation { - margin-right: -$spacing-03; + margin-inline-end: -$spacing-03; } .#{$prefix}--file__drop-container { @include button-reset.reset; + @include type-style('body-compact-01'); display: flex; overflow: hidden; - height: 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 558744a9cc2c..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,15 +45,15 @@ .#{$prefix}--list-box__wrapper--fluid .#{$prefix}--combo-box .#{$prefix}--list-box__selection { - top: auto; - bottom: convert.to-rem(10px); + inset-block-end: convert.to-rem(10px); + inset-block-start: auto; 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 @@ -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 6dddaabf6560..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; - width: 100%; - height: 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; - top: convert.to-rem(13px); - left: $spacing-05; display: flex; - width: calc(100% - 2rem); - height: 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-height: convert.to-rem(64px); padding: convert.to-rem(32px) $spacing-05 convert.to-rem(13px); - border-bottom: none; background: transparent; + border-block-end: none; + min-block-size: convert.to-rem(64px); + min-inline-size: convert.to-rem(144px); } // Simple @@ -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%; - min-width: convert.to-rem(144px); - min-height: convert.to-rem(63px); + inline-size: 100%; + min-block-size: convert.to-rem(63px); + min-inline-size: convert.to-rem(144px); } .#{$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,33 +225,33 @@ .#{$prefix}--date-picker--range .#{$prefix}--date-picker--fluid--warn.#{$prefix}--date-picker-container:last-child::after { position: absolute; - top: convert.to-rem(8px); - right: 0; display: block; - width: 1px; - height: 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 .#{$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); border-style: solid; border-color: $border-subtle; - border-bottom: none; margin: 0 1rem; + border-block-end: none; + inline-size: calc(100% - 2rem); } .#{$prefix}--date-picker-container.#{$prefix}--date-picker--fluid--invalid .#{$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 @@ -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 @@ -302,47 +302,47 @@ .#{$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; background: $skeleton-background; + block-size: convert.to-rem(64px); + border-block-end: 1px solid $skeleton-element; } .#{$prefix}--date-picker--fluid__skeleton--container { position: relative; - width: 100%; - height: 100%; + block-size: 100%; + inline-size: 100%; } .#{$prefix}--date-picker--fluid__skeleton .#{$prefix}--skeleton { position: absolute; - top: $spacing-05; - left: $spacing-05; - width: 25%; - height: convert.to-rem(8px); + block-size: convert.to-rem(8px); + inline-size: 25%; + inset-block-start: $spacing-05; + inset-inline-start: $spacing-05; } .#{$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; - top: convert.to-rem(36px); - left: $spacing-05; - width: 50%; - height: convert.to-rem(8px); padding: 0; + block-size: convert.to-rem(8px); + inline-size: 50%; + inset-block-start: convert.to-rem(36px); + inset-inline-start: $spacing-05; } .#{$prefix}--date-picker--fluid__skeleton--container .#{$prefix}--date-picker__icon { - top: auto; - bottom: $spacing-03; + inset-block-end: $spacing-03; + inset-block-start: auto; } // Range skeleton @@ -354,19 +354,19 @@ .#{$prefix}--date-picker--fluid__skeleton--range .#{$prefix}--date-picker--fluid__skeleton--container { display: flex; - width: 50%; flex-direction: column; + inline-size: 50%; } .#{$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 @@ -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 93ddc0cdd376..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; - height: 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-height: 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; - top: convert.to-rem(13px); - left: $spacing-05; display: flex; - width: calc(100% - 2rem); - height: 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,28 +61,28 @@ } .#{$prefix}--list-box__wrapper--fluid .#{$prefix}--list-box__field { - padding-top: convert.to-rem(33px); - padding-bottom: convert.to-rem(13px); - padding-left: $spacing-05; + padding-block-end: convert.to-rem(13px); + padding-block-start: convert.to-rem(33px); + padding-inline-start: $spacing-05; } .#{$prefix}--list-box__wrapper--fluid .#{$prefix}--list-box__menu-icon { - width: 1rem; - height: 1rem; + block-size: 1rem; + inline-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 @@ -176,13 +176,13 @@ .#{$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 .#{$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,21 +190,21 @@ .#{$prefix}--list-box__wrapper--fluid .#{$prefix}--list-box--warning .#{$prefix}--list-box__invalid-icon { - top: convert.to-rem(81px); - right: $spacing-05; + inset-block-start: convert.to-rem(81px); + inset-inline-end: $spacing-05; pointer-events: none; } .#{$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,8 +221,8 @@ ~ .#{$prefix}--list-box__divider { display: block; border: none; - border-bottom: 1px solid $border-subtle; margin: 0 1rem; + border-block-end: 1px solid $border-subtle; } .#{$prefix}--list-box__wrapper--fluid @@ -238,34 +238,34 @@ .#{$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; background: $skeleton-background; + border-block-end: 1px solid $skeleton-element; } .#{$prefix}--list-box__wrapper--fluid .#{$prefix}--skeleton .#{$prefix}--list-box__field { position: absolute; - top: convert.to-rem(36px); - left: $spacing-05; - width: 50%; - height: convert.to-rem(8px); padding: 0; + block-size: convert.to-rem(8px); + inline-size: 50%; + inset-block-start: convert.to-rem(36px); + inset-inline-start: $spacing-05; } .#{$prefix}--list-box__wrapper--fluid .#{$prefix}--skeleton .#{$prefix}--list-box__label { position: absolute; - top: $spacing-05; - left: $spacing-05; - width: 25%; - height: convert.to-rem(8px); + block-size: convert.to-rem(8px); + inline-size: 25%; + inset-block-start: $spacing-05; + inset-inline-start: $spacing-05; } .#{$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..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 @@ -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..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; - height: 100%; background: $field; + block-size: 100%; } .#{$prefix}--number-input--fluid .#{$prefix}--label { position: absolute; z-index: 1; - top: convert.to-rem(13px); - left: $spacing-05; display: flex; - width: calc(100% - 2rem); - height: 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-height: 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 { - top: convert.to-rem(23px); - height: convert.to-rem(40px); + block-size: convert.to-rem(40px); + inset-block-start: convert.to-rem(23px); 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,12 +108,12 @@ input[type='number']:focus ~ .#{$prefix}--number__controls .#{$prefix}--number__control-btn:hover::before { - top: auto; - bottom: 0; - left: 0; - width: 100%; - height: 1px; background: $focus; + block-size: 1px; + inline-size: 100%; + inset-block-end: 0; + inset-block-start: auto; + inset-inline-start: 0; } // 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)); + block-size: calc(100% - convert.to-rem(1px)); + inset-block-start: 0; } .#{$prefix}--number-input--fluid.#{$prefix}--number-input--fluid--focus @@ -149,15 +149,15 @@ 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%); background-color: $focus; + block-size: calc(100%); } .#{$prefix}--number-input--fluid--invalid @@ -178,8 +178,8 @@ } .#{$prefix}--number-input--fluid .#{$prefix}--number__invalid { - top: convert.to-rem(73px); - right: $spacing-05; + inset-block-start: convert.to-rem(73px); + inset-inline-end: $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,13 +207,13 @@ .#{$prefix}--number__input-wrapper--warning + .#{$prefix}--number-input__divider { position: absolute; - top: convert.to-rem(63px); display: block; - width: calc(100% - 2rem); - height: convert.to-rem(1px); border: none; - border-bottom: 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 { @@ -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 @@ -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 @@ -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..9a79966c01b8 100644 --- a/packages/styles/scss/components/fluid-search/_fluid-search.scss +++ b/packages/styles/scss/components/fluid-search/_fluid-search.scss @@ -18,21 +18,21 @@ @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; display: flex; overflow: initial; - width: calc(100% - 2rem); - height: 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 { - height: 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 { - width: convert.to-rem(40px); - height: 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; - width: convert.to-rem(1px); - height: 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; - bottom: 0; - left: 0; display: block; - width: 100%; - height: convert.to-rem(2px); + 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 { - height: 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 @@ -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..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; - height: 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; - top: convert.to-rem(13px); - left: $spacing-05; display: flex; - width: calc(100% - 2rem); - height: 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-height: 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 { - top: $spacing-07; - height: 1rem; + 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; - width: calc(100% - 2rem); border: none; - border-bottom: 1px solid $border-subtle; margin: 0 1rem; + border-block-end: 1px solid $border-subtle; + inline-size: calc(100% - 2rem); } .#{$prefix}--select--fluid @@ -97,12 +97,12 @@ .#{$prefix}--select--fluid .#{$prefix}--select--warning .#{$prefix}--select-input { - padding-right: convert.to-rem(32px); - border-bottom: 1px solid transparent; + border-block-end: 1px solid transparent; + padding-inline-end: convert.to-rem(32px); } .#{$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 { @@ -126,7 +126,7 @@ .#{$prefix}--form-requirement { display: block; overflow: visible; - max-height: 100%; + max-block-size: 100%; } .#{$prefix}--select--fluid @@ -156,8 +156,8 @@ .#{$prefix}--select--fluid .#{$prefix}--select--warning .#{$prefix}--select__invalid-icon { - top: convert.to-rem(73px); - right: $spacing-05; + inset-block-start: convert.to-rem(73px); + inset-inline-end: $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..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; - height: 100%; flex-direction: column; background: $field; + block-size: 100%; } .#{$prefix}--modal @@ -31,19 +31,19 @@ .#{$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; display: flex; - width: calc(100% - 2rem); - height: 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-height: 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; } @@ -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, @@ -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-bottom: none; margin: 0 1rem; + border-block-end: none; } // invalid & warning error message container @@ -126,28 +126,28 @@ 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 .#{$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,23 +197,23 @@ // Skeleton .#{$prefix}--text-area--fluid__skeleton { padding: $spacing-05; - border-bottom: 1px solid $skeleton-element; background: $skeleton-background; + border-block-end: 1px solid $skeleton-element; } .#{$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 { - margin-bottom: $spacing-04; + margin-block-end: $spacing-04; } .#{$prefix}--text-area--fluid__skeleton .#{$prefix}--text-area.#{$prefix}--skeleton { - width: 80%; - height: 4rem; + 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 a9be04601a1a..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; - height: 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; - top: convert.to-rem(13px); - left: $spacing-05; display: flex; - width: calc(100% - 2rem); - height: 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-height: 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, @@ -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; margin: 0 1rem; + border-block-end: none; } .#{$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,44 +145,44 @@ // 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 .#{$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 { - top: convert.to-rem(26px); - right: $spacing-03; - width: convert.to-rem(32px); - height: 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; - height: convert.to-rem(64px); - border-bottom: 1px solid $skeleton-element; background: $skeleton-background; + block-size: convert.to-rem(64px); + border-block-end: 1px solid $skeleton-element; } .#{$prefix}--text-input--fluid__skeleton .#{$prefix}--skeleton { position: absolute; - top: $spacing-05; - left: $spacing-05; - width: 25%; - height: convert.to-rem(8px); + block-size: convert.to-rem(8px); + inline-size: 25%; + inset-block-start: $spacing-05; + inset-inline-start: $spacing-05; } .#{$prefix}--text-input--fluid__skeleton .#{$prefix}--label { position: absolute; - top: convert.to-rem(36px); - left: $spacing-05; - width: 50%; - height: convert.to-rem(8px); padding: 0; + block-size: convert.to-rem(8px); + inline-size: 50%; + inset-block-start: convert.to-rem(36px); + inset-inline-start: $spacing-05; } } 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..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,22 +46,22 @@ .#{$prefix}--select-input__wrapper::before { position: absolute; display: block; - width: 1px; - height: 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 .#{$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); - border-top: 2px solid transparent; + border-block-start: 2px solid transparent; + padding-block-start: convert.to-rem(30px); } .#{$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 @@ -122,13 +122,13 @@ } .#{$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 .#{$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,9 +142,9 @@ .#{$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); - 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,48 +188,48 @@ .#{$prefix}--time-picker--fluid__wrapper > *:last-child .#{$prefix}--select-input__wrapper::before { - top: 8px; - height: calc(100% - 1rem); + block-size: calc(100% - 1rem); + inset-block-start: 8px; } .#{$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); border-style: solid; border-color: $border-subtle; - border-bottom: none; margin: 0 1rem; + border-block-end: none; + inline-size: calc(100% - 2rem); } // Skeleton styles .#{$prefix}--time-picker--fluid--skeleton { display: flex; - width: 100%; - height: convert.to-rem(64px); + block-size: convert.to-rem(64px); + inline-size: 100%; } .#{$prefix}--time-picker--fluid--skeleton > * { - width: auto; - height: 100%; + block-size: 100%; + inline-size: auto; } .#{$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..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,13 +66,13 @@ $input-label-weight: 400 !default; } .#{$prefix}--label--no-margin { - margin-bottom: 0; + margin-block-end: 0; } .#{$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,17 @@ $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); + 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; - // Added to prevent error text from displaying under helper text in Safari (#6392) - width: 100%; - margin-top: $spacing-02; color: $text-secondary; + // Added to prevent error text from displaying under helper text in Safari (#6392) + inline-size: 100%; + 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 03d6e56c0fd4..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; - width: 100%; - min-height: 2rem; align-items: center; + inline-size: 100%; + min-block-size: 2rem; } .#{$prefix}--inline-loading__text { @@ -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; + inline-size: 0.75rem; + inset-block-start: 0.75rem; } &[hidden] { @@ -71,9 +71,9 @@ $-loading-gap-small: 110; } .#{$prefix}--inline-loading--error { - width: convert.to-rem(16px); - height: convert.to-rem(16px); + block-size: convert.to-rem(16px); fill: $support-error; + inline-size: convert.to-rem(16px); &[hidden] { display: none; @@ -87,8 +87,8 @@ $-loading-gap-small: 110; @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) { .#{$prefix}--inline-loading__checkmark-container { - top: 1px; - right: 0.5rem; + inset-block-start: 1px; + inset-inline-end: 0.5rem; } .#{$prefix}--inline-loading__checkmark { 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..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; - width: $list-box-width; - height: convert.to-rem(40px); - max-height: convert.to-rem(40px); border: none; - border-bottom: 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 { @@ -95,25 +95,25 @@ $list-box-menu-width: convert.to-rem(300px); } .#{$prefix}--list-box--lg { - height: convert.to-rem(48px); - max-height: convert.to-rem(48px); + block-size: convert.to-rem(48px); + max-block-size: convert.to-rem(48px); } .#{$prefix}--list-box--sm { - height: convert.to-rem(32px); - max-height: convert.to-rem(32px); + block-size: 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; - height: 100%; + block-size: 100%; + min-inline-size: 0; } // invalid states .#{$prefix}--list-box__invalid-icon { position: absolute; - top: 50%; - right: $spacing-08; fill: $support-error; + inset-block-start: 50%; + inset-inline-end: $spacing-08; 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; + border-block-end: 0; + padding-inline-end: $spacing-10; } .#{$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 @@ -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; } @@ -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` @@ -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 { @@ -287,16 +287,16 @@ $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 { - 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` - height: 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; @@ -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] @@ -351,12 +351,12 @@ $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 .#{$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] @@ -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; - width: convert.to-rem(24px); - height: 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 { - width: 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; - top: 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); 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; - top: auto; display: flex; - width: auto; - height: 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); 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 { - width: convert.to-rem(20px); - height: convert.to-rem(20px); padding: convert.to-rem(2px); - margin-left: 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; - left: 0; display: none; - width: $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 @@ -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 { @@ -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; - height: convert.to-rem(40px); padding: convert.to-rem(11px) 0; - padding-right: $spacing-06; - border-top: 1px solid transparent; - border-top-color: $border-subtle-01; - border-bottom: 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), @@ -687,15 +687,15 @@ $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); - padding-bottom: convert.to-rem(7px); + block-size: convert.to-rem(32px); + padding-block-end: convert.to-rem(7px); + padding-block-start: 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); - padding-bottom: convert.to-rem(15px); + block-size: convert.to-rem(48px); + padding-block-end: convert.to-rem(15px); + padding-block-start: 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 { - padding-right: $spacing-03; - padding-left: $spacing-03; margin: 0; + padding-inline-end: $spacing-03; + padding-inline-start: $spacing-03; } } @@ -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; - top: 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 @@ -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 @@ -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 57e5e6972211..27ab561fe672 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,9 +67,9 @@ .#{$prefix}--list--ordered:not(.#{$prefix}--list--nested) > .#{$prefix}--list__item::before { position: absolute; - left: 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; - left: 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 – - left: 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 f810cce446da..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; - width: $loading-size; - height: $loading-size; + block-size: $loading-size; + + inline-size: $loading-size; } // Animation (Spin by default) @@ -54,8 +55,8 @@ } .#{$prefix}--loading--small { - width: convert.to-rem(16px); - height: 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'); - top: 0; - left: 0; display: flex; - width: 100%; - height: 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 6b0939257b05..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; - height: 2rem; align-items: center; + block-size: 2rem; color: $text-primary; column-gap: $spacing-03; cursor: pointer; @@ -91,7 +91,7 @@ @each $size, $value in $supported-sizes { .#{$prefix}--menu--#{$size} .#{$prefix}--menu-item { - height: $value; + block-size: $value; } } @@ -151,9 +151,9 @@ .#{$prefix}--menu-item-divider { display: block; - width: 100%; - height: 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 4d9d47b16b81..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'); - top: 0; - left: 0; display: flex; - width: 100vw; - height: 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 @@ -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,15 +154,15 @@ // ----------------------------- .#{$prefix}--modal-container { position: fixed; - top: 0; display: grid; overflow: hidden; - width: 100%; - height: 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,18 +172,18 @@ @include breakpoint(md) { position: static; - width: 84%; - height: auto; - max-height: 90%; + block-size: auto; + inline-size: 84%; + max-block-size: 90%; } @include breakpoint(lg) { - width: 60%; - max-height: 84%; + inline-size: 60%; + max-block-size: 84%; } @include breakpoint(xlg) { - width: 48%; + inline-size: 48%; } .#{$prefix}--modal-container-body { @@ -198,17 +198,17 @@ @include type-style('body-01'); position: relative; - // Required to accommodate focus outline's negative offset: - padding-top: $spacing-03; - // anything besides text/p spans full width, with just 16px padding - padding-right: $spacing-05; - padding-left: $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'); @@ -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,42 +227,42 @@ .#{$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; - margin-bottom: $spacing-03; 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; } .#{$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'); - // padding should take into account the left and right padding of modal container - padding-right: calc(20% - $spacing-09); color: $text-primary; + // padding should take into account the left and right padding of modal container + padding-inline-end: calc(20% - $spacing-09); } // ----------------------------- @@ -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%; - max-height: 48%; + inline-size: 32%; + max-block-size: 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%; - max-height: 72%; + inline-size: 42%; + max-block-size: 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%; - max-height: 96%; + inline-size: 84%; + max-block-size: 96%; } @include breakpoint(xlg) { - width: 72%; + inline-size: 72%; } } @@ -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; - bottom: $spacing-09; - left: 0; - width: 100%; - height: 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 { - width: 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; - height: 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; - height: convert.to-rem(64px); flex: 0 1 50%; align-items: baseline; - padding-top: 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; - top: 0; - right: 0; overflow: hidden; - width: 3rem; - height: 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 { - width: convert.to-rem(20px); - height: 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 84f8249bfa06..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; - width: 100%; - height: 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; - width: 100%; - height: 100%; align-items: center; + block-size: 100%; + inline-size: 100%; } .#{$prefix}--multi-select @@ -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,8 +115,8 @@ .#{$prefix}--multi-select--filterable.#{$prefix}--multi-select--inline, .#{$prefix}--multi-select--filterable.#{$prefix}--multi-select--inline .#{$prefix}--text-input { - border-bottom: 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 6a9baa731154..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; - width: 100%; - min-width: convert.to-rem(288px); - max-width: convert.to-rem(288px); - height: auto; - min-height: 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; - top: 0; - left: 0; - width: 100%; - height: 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,14 +207,14 @@ .#{$prefix}--actionable-notification .#{$prefix}--inline-notification__icon { flex-shrink: 0; - margin-top: convert.to-rem(14px); - margin-right: $spacing-05; + 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-right: $spacing-05; + margin-block-start: $spacing-05; + margin-inline-end: $spacing-05; } .#{$prefix}--actionable-notification__text-wrapper { @@ -245,21 +244,21 @@ .#{$prefix}--actionable-notification__title { @include type-style('heading-compact-01'); - margin-right: $spacing-02; font-weight: 600; + margin-inline-end: $spacing-02; word-break: break-word; } .#{$prefix}--actionable-notification--toast .#{$prefix}--actionable-notification__title { - margin-right: 0; + margin-inline-end: 0; } .#{$prefix}--actionable-notification__subtitle { @include type-style('body-compact-01'); - margin-top: 0; color: $text-inverse; + margin-block-start: 0; word-break: break-word; } @@ -269,9 +268,9 @@ } /* Ghost action button when inline */ .#{$prefix}--actionable-notification__action-button.#{$prefix}--btn--ghost { - height: convert.to-rem(32px); - margin-bottom: $spacing-03; - margin-left: $spacing-08; + block-size: convert.to-rem(32px); + margin-block-end: $spacing-03; + margin-inline-start: $spacing-08; @include breakpoint(md) { margin: $spacing-03 0; @@ -311,21 +310,20 @@ .#{$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; - 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-left: calc( + 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 @@ -407,27 +405,27 @@ .#{$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; - right: 0; display: flex; - width: convert.to-rem(48px); - min-width: convert.to-rem(48px); - max-width: convert.to-rem(48px); - height: 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 e10ff6d68437..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; - width: 100%; - min-width: convert.to-rem(288px); - max-width: convert.to-rem(288px); - height: auto; - min-height: 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; - top: 0; - left: 0; - width: 100%; - height: 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,8 +191,8 @@ .#{$prefix}--inline-notification__icon { flex-shrink: 0; - margin-top: convert.to-rem(14px); - margin-right: $spacing-05; + margin-block-start: convert.to-rem(14px); + 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); - margin-bottom: $spacing-03; - margin-left: $spacing-08; + block-size: convert.to-rem(32px); + margin-block-end: $spacing-03; + margin-inline-start: $spacing-08; @include breakpoint(md) { margin: $spacing-03 0; @@ -256,27 +256,27 @@ .#{$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; - right: 0; display: flex; - width: convert.to-rem(48px); - min-width: convert.to-rem(48px); - max-width: convert.to-rem(48px); - height: 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 5b4c6bffd044..ad73943b2fe5 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,14 +25,14 @@ /// @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; 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 d639f2eaebd7..2c055d2e0cf2 100644 --- a/packages/styles/scss/components/notification/_toast-notification.scss +++ b/packages/styles/scss/components/notification/_toast-notification.scss @@ -29,15 +29,14 @@ @include reset; display: flex; - width: convert.to-rem(288px); - height: auto; - padding-left: convert.to-rem(13px); - + block-size: auto; 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) { - width: convert.to-rem(352px); + inline-size: convert.to-rem(352px); } } @@ -141,30 +140,30 @@ .#{$prefix}--toast-notification__icon { flex-shrink: 0; - margin-top: $spacing-05; - margin-right: $spacing-05; + margin-block-start: $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); - min-width: convert.to-rem(48px); - height: convert.to-rem(48px); - min-height: convert.to-rem(48px); flex-direction: column; align-items: center; justify-content: center; padding: 0; border: none; - margin-left: 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-top: $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 964f164093cf..a8c761dce05b 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%; flex-direction: column; + inline-size: 100%; } .#{$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,23 +43,23 @@ @include focus-outline('reset'); display: inline-flex; - width: 100%; - min-width: 9.375rem; - height: convert.to-rem(40px); box-sizing: border-box; - padding-right: convert.to-rem(96px); - padding-left: $spacing-05; border: 0; - border-bottom: 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); @@ -87,41 +87,41 @@ } &[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); } } .#{$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 - top: 50%; - right: 0; display: flex; - width: convert.to-rem(80px); - height: 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,30 +153,30 @@ position: relative; display: inline-flex; - height: 100%; align-items: center; justify-content: center; - border-bottom: convert.to-rem(1px) solid $border-strong; + block-size: 100%; + border-block-end: convert.to-rem(1px) solid $border-strong; color: $icon-primary; &::before, &::after { position: absolute; - top: 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); background-color: $field; + // block-size: calc(100% - 4px) is calculated differently in Safari + block-size: convert.to-rem(36px); content: ''; + inline-size: convert.to-rem(2px); + inset-block-start: convert.to-rem(2px); } &::before { - left: 0; + inset-inline-start: 0; } &::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'); - width: convert.to-rem(1px); - height: 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 { - left: 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 @@ -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); } } @@ -453,22 +453,22 @@ .#{$prefix}--number--nolabel .#{$prefix}--label + .#{$prefix}--form__helper-text { - margin-top: 0; + margin-block-start: 0; } // 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 { - 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; - width: 100%; - height: 2.5rem; + 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 3f5c84710d06..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; - width: convert.to-rem(40px); - height: convert.to-rem(40px); - min-height: 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 { - width: convert.to-rem(32px); - height: convert.to-rem(32px); + block-size: convert.to-rem(32px); + inline-size: convert.to-rem(32px); } .#{$prefix}--overflow-menu--lg { - width: convert.to-rem(48px); - height: 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 { - width: convert.to-rem(16px); - height: 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'); - top: 32px; - left: 0; display: none; - width: 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,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); + block-size: convert.to-rem(3px); + inline-size: convert.to-rem(40px); + inset-block-start: convert.to-rem(-3px); + inset-inline-start: 0; } .#{$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); + block-size: convert.to-rem(8px); + inline-size: convert.to-rem(40px); + inset-block-end: convert.to-rem(-8px); + inset-inline-start: 0; } .#{$prefix}--overflow-menu-options[data-floating-menu-direction='left']::after { - top: 0; - right: convert.to-rem(-6px); - width: convert.to-rem(6px); - height: convert.to-rem(40px); + 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 { - top: 0; - left: convert.to-rem(-6px); - width: convert.to-rem(6px); - height: convert.to-rem(40px); + block-size: convert.to-rem(40px); + inline-size: convert.to-rem(6px); + inset-block-start: 0; + inset-inline-start: convert.to-rem(-6px); } .#{$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-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 { - top: auto; - bottom: 0; + inset-block-end: 0; + inset-block-start: auto; } .#{$prefix}--overflow-menu-options--open { @@ -215,42 +215,42 @@ } .#{$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); 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); } .#{$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 { - 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 { display: inline-block; - height: 100%; + block-size: 100%; content: ''; vertical-align: middle; } @@ -260,18 +260,18 @@ @include focus-outline('reset'); display: inline-flex; - width: 100%; - max-width: 11.25rem; - height: 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); @@ -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..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; - bottom: 0; - left: 50%; display: block; - width: 0; - height: $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 { - left: calc(50% - #{$spacing-05 * 0.5}); - width: $spacing-05; + 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 9a2f8f56c7d2..31ecc7307422 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; } } @@ -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; - width: $button-direction-size; - height: $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; - top: 0; - width: 100%; - height: 100%; + block-size: 100%; + inline-size: 100%; + inset-block-start: 0; 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..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; - width: calc(100% - 1px); - min-height: 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') { @@ -66,30 +66,32 @@ } .#{$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%; align-items: center; + block-size: 100%; } .#{$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; - min-width: auto; - height: 100%; + block-size: 100%; + + inline-size: auto; line-height: convert.to-rem(40px); + + min-inline-size: auto; } // Extra specificity is needed to preserve padding @@ -126,30 +128,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%; align-items: center; + block-size: 100%; } .#{$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 +160,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,8 +193,8 @@ } span.#{$prefix}--pagination__text { - margin-left: $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; - width: convert.to-rem(40px); - height: convert.to-rem(40px); - min-height: convert.to-rem(32px); align-items: center; justify-content: center; border: none; - border-left: 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,22 +229,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); + 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 { - width: convert.to-rem(48px); - height: convert.to-rem(48px); + block-size: convert.to-rem(48px); + inline-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,8 +270,8 @@ // Skeleton state .#{$prefix}--pagination.#{$prefix}--skeleton .#{$prefix}--skeleton__text { - margin-right: 1rem; - margin-bottom: 0; + margin-block-end: 0; + margin-inline-end: 1rem; } // Windows HCM fix diff --git a/packages/styles/scss/components/pagination/_unstable_pagination.scss b/packages/styles/scss/components/pagination/_unstable_pagination.scss index 5359c8b57fbc..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; - width: 100%; - min-height: convert.to-rem(40px); align-items: center; justify-content: space-between; - border-top: 1px solid $border-subtle; - border-bottom: 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; - height: 100%; align-items: center; + block-size: 100%; } .#{$prefix}--unstable-pagination__left { @@ -56,44 +56,44 @@ .#{$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); align-items: center; justify-content: center; border: none; - border-left: 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 { - width: initial; - height: 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 { - height: 100%; align-items: center; + block-size: 100%; } .#{$prefix}--unstable-pagination__page-selector @@ -133,18 +133,20 @@ .#{$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; - min-width: auto; - height: 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 @@ -155,19 +157,19 @@ .#{$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') { - right: $spacing-05; + inset-inline-end: $spacing-05; } } .#{$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..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; - width: 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; } @@ -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) @@ -211,8 +211,8 @@ $popover-caret-height: custom-property.get-var( .#{$prefix}--popover--bottom-right > .#{$prefix}--popover > .#{$prefix}--popover-content { - right: 0; - bottom: 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 { - top: 0; - right: 0; - left: 0; - height: $popover-offset; + block-size: $popover-offset; + inset-block-start: 0; + inset-inline-end: 0; + inset-inline-start: 0; transform: translateY(-100%); } @@ -243,11 +243,11 @@ $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; + 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); } @@ -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,8 +278,8 @@ $popover-caret-height: custom-property.get-var( .#{$prefix}--popover--top-right > .#{$prefix}--popover > .#{$prefix}--popover-content { - top: 0; - right: 0; + inset-block-start: 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; - bottom: 0; - left: 0; - height: $popover-offset; + block-size: $popover-offset; + inset-block-end: 0; + inset-inline-end: 0; + inset-inline-start: 0; transform: translateY(100%); } @@ -308,11 +308,11 @@ $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; + 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)); } @@ -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; + inline-size: $popover-offset; + inset-block-end: 0; + inset-block-start: 0; + inset-inline-start: 0; transform: translateX(-100%); } @@ -377,11 +377,11 @@ $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; + 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%); } @@ -393,8 +393,8 @@ $popover-caret-height: custom-property.get-var( .#{$prefix}--popover--left > .#{$prefix}--popover > .#{$prefix}--popover-content { - top: 50%; - right: 100%; + inset-block-start: 50%; + 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%); @@ -403,8 +403,8 @@ $popover-caret-height: custom-property.get-var( .#{$prefix}--popover--left-top > .#{$prefix}--popover > .#{$prefix}--popover-content { - top: -50%; - right: 100%; + inset-block-start: -50%; + 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%; - bottom: -50%; + 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 { - top: 0; - right: 0; - bottom: 0; - width: $popover-offset; + 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 { - top: 50%; - right: 100%; - width: $popover-caret-height; - height: $popover-caret-width; + 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; - width: convert.to-rem(32px); - height: 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; - bottom: 0; - width: 100%; - height: 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 8371b6669bae..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,26 +41,26 @@ .#{$prefix}--progress-bar__track { position: relative; - width: 100%; - min-width: convert.to-rem(48px); - height: 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 { - 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%; 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 2095b25654f0..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; - width: 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; - left: 0; - width: convert.to-rem(128px); - height: 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 { - width: 100%; - min-width: convert.to-rem(128px); + inline-size: 100%; + min-inline-size: convert.to-rem(128px); } .#{$prefix}--progress-step svg { position: relative; z-index: 1; - width: $spacing-05; - height: $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-right: 0.75rem; + margin-inline-end: 0.75rem; + max-inline-size: 100%; } .#{$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,14 +148,14 @@ $progress-indicator-bar-width: 1px inset transparent !default; @include type-style('body-01'); display: block; - width: convert.to-rem(125px); - - min-width: convert.to-rem(115px); - min-height: $spacing-06; padding: $spacing-03 $spacing-05; - margin-top: convert.to-rem(40px); - margin-left: 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'); - width: convert.to-rem(150px); - height: auto; + 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; - left: 0; - margin-top: convert.to-rem(28px); - margin-left: $spacing-06; color: $text-secondary; + inset-inline-start: 0; + margin-block-start: convert.to-rem(28px); + margin-inline-start: $spacing-06; 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; - width: convert.to-rem(40px); - height: convert.to-rem(14px); - margin-top: 0.625rem; + block-size: convert.to-rem(14px); + + 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 { - width: initial; - min-width: initial; - min-height: 3.625rem; align-content: flex-start; + inline-size: initial; + min-block-size: 3.625rem; + 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; - width: 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; - width: 100%; margin: auto 0; + inline-size: 100%; } .#{$prefix}--progress--vertical .#{$prefix}--progress-line { position: absolute; - top: 0; - left: 0; - width: 1px; - height: 100%; + block-size: 100%; + inline-size: 1px; + inset-block-start: 0; + inset-inline-start: 0; } } diff --git a/packages/styles/scss/components/radio-button/_radio-button.scss b/packages/styles/scss/components/radio-button/_radio-button.scss index a084f9c0137f..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-right: 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-right: $spacing-05; cursor: pointer; + margin-inline-end: $spacing-05; } .#{$prefix}--radio-button__appearance { @include reset; - width: convert.to-rem(18px); - height: 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; - width: 100%; - height: 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-left: $spacing-03; + 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; - width: convert.to-rem(100px); - height: convert.to-rem(18px); + block-size: convert.to-rem(18px); + + inline-size: convert.to-rem(100px); } .#{$prefix}--radio-button__label.#{$prefix}--skeleton @@ -240,13 +242,13 @@ $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-bottom: $spacing-03; + margin-block-end: $spacing-03; + margin-inline-end: 0; } .#{$prefix}--radio-button-group--label-right .#{$prefix}--radio-button__label, @@ -265,7 +267,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..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; - width: 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'); - width: 100%; order: 1; padding: 0 $spacing-08; border: none; - border-bottom: 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-bottom: 1px solid transparent; background-color: $field; + border-block-end: 1px solid transparent; color: $text-disabled; cursor: not-allowed; @@ -91,35 +92,35 @@ .#{$prefix}--search--sm .#{$prefix}--search-input, .#{$prefix}--search--sm.#{$prefix}--search--expandable.#{$prefix}--search--expanded .#{$prefix}--search-input { - height: 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 { - 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); // 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 { - 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); // 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; - top: 50%; - left: $spacing-05; - width: convert.to-rem(16px); - height: 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%); } @@ -141,18 +142,18 @@ @include focus-outline('reset'); position: absolute; - top: 0; - right: 0; + inset-block-start: 0; + inset-inline-end: 0; &::before { position: absolute; - top: convert.to-rem(1px); - left: 0; display: block; - width: 2px; - height: 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); @@ -162,7 +163,7 @@ } &:hover { - border-bottom: 1px solid $border-strong; + border-block-end: 1px solid $border-strong; &::before { background-color: $field-hover; @@ -172,8 +173,8 @@ .#{$prefix}--search-button { flex-shrink: 0; - margin-left: $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; - width: convert.to-rem(40px); - height: 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 { - width: convert.to-rem(32px); - height: 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 { - width: convert.to-rem(40px); - height: 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 { - width: convert.to-rem(48px); - height: convert.to-rem(48px); + block-size: convert.to-rem(48px); + inline-size: convert.to-rem(48px); } &.#{$prefix}--search--expandable .#{$prefix}--search-input::placeholder { @@ -305,7 +306,7 @@ .#{$prefix}--search--sm.#{$prefix}--skeleton .#{$prefix}--search-input { @include skeleton; - width: 100%; + inline-size: 100%; &::placeholder { color: transparent; @@ -317,12 +318,12 @@ } .#{$prefix}--search--expandable.#{$prefix}--search--expanded { - width: 100%; + inline-size: 100%; } .#{$prefix}--search--expandable .#{$prefix}--search-input { - width: 0; padding: 0; + inline-size: 0; transition: padding $duration-fast-01 motion(standard, productive), width 0s linear $duration-fast-01; @@ -337,7 +338,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..df296a4e4a3a 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; - width: 100%; flex-direction: column; align-items: flex-start; + inline-size: 100%; } .#{$prefix}--select-input__wrapper { position: relative; display: flex; - width: 100%; align-items: center; + inline-size: 100%; } .#{$prefix}--select-input { @@ -44,19 +44,20 @@ @include focus-outline('reset'); display: block; - width: 100%; - height: convert.to-rem(40px); - padding: 0 $spacing-09 0 $spacing-05; border: none; - border-bottom: 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