From ae0994edf153ef159ef43b0f2b590357ab9c922c Mon Sep 17 00:00:00 2001 From: Eugenio Romano Date: Thu, 15 Feb 2018 10:08:46 +0000 Subject: [PATCH] [ADF-2296] Background color on form buttons (#2953) * add a targeting ID for any Form button * custom outcome style ID --- docs/docassets/images/form-style-sample.png | Bin 0 -> 35458 bytes docs/form.component.md | 34 +++++++++++++++++++ lib/core/form/components/form.component.html | 2 +- 3 files changed, 35 insertions(+), 1 deletion(-) create mode 100644 docs/docassets/images/form-style-sample.png diff --git a/docs/docassets/images/form-style-sample.png b/docs/docassets/images/form-style-sample.png new file mode 100644 index 0000000000000000000000000000000000000000..7ed73bf2990e79ed6ad32a1839667d8f151f7be9 GIT binary patch literal 35458 zcmeIbby$>J`!9|N(xHHKmx7dZkCM{J07{2+3`n;lrAUZ~AT0r%#8d)8 z`xr2ecDpA%=q3o1ZN$g~4Y(mi2OEr(LGOPag3eyamb##W@)+D?a1-52pHN-Bzxg@d zTgV%f$~El{x6b$bzVjW4qUXos)xr=IwXmrd&F^6pD34S19yk|BIz2SG5w$}`_YCDr z9jc{Mg|G=626I5MJ2-Rm^23pps22xqkZQq z`m?U9r!2fq&97goF?YQML0>DIC1e;0l4sr$(xV}wY=54B`|L(^W8}vxDGa^M-={O` z#n{qcugZvhz*BlzPZBcvW3AY)Ag%e7yYyDslOh+*e z7mDINKKG_NA1S(<-slutCrcuKKh=!CElIZ}l$%_G-jFa|TKazfGjFLcQLSwUSs;oV zg2d;M@r}0$jQ7R@0L33_EtBS zK2S?~cqLi{UF>8m*qD&=u6M9y4R;K+=-ci4N!${sMc6YK!sI;0Ql^G8IFGI~ zIz31;i<=Z}1!;9SaKu_=Gu_g;9`PA7VC4n9pL-sifHcp|_?Fo({FYKG^YcpBwEd0K z7-(!eM(Ez^qpwvyDJ3k^iW9>%63F?9Blx#?{mpz$ziSCZ!_$n}@^PsU2Cs%5PaCL7{s`xF&^LM&;U9f4DN!I` zv2eQg<1Ep2vB0`WoSZp=;rI=QU#Lc*mLm;0W6r8qBDVf*#^?fBPv3;FU41(-cYWBX$$?c5x0 zJ69y!?{!;pH2bl`Bi^QB<_5ldoV^5V{oX9PO{J8L&LwWos$jP3+O`}J@-1;{W4)s} zU8O5^ihM#sg9q)Td*sg;Wl_|I;fHsIf6m{z_OpR45Bw%`W3mY6irO=_lZVdFu8daQ zF_sChLw83tB*eUbkLd;aOCt*J4%FA^nw@A)^$cog3UvwvH*L{$>+uUPRxpA=)Rt(O zb;1thdRGPOeJZpn>lC|i#{GTK?#W}~eP9%ML2nW?NEiNsaw-gsVN#y&%?l<*s~4D& z3{H{F@>mapY^BQ>HNWJ4;h7J(sL3soKIvU`C+9m$K}R2qE$@hs zC`%Q0dzTREhv&($cl%g!cw*Otj!Tbp$5_%{<2DP0k{g%BQnoZO6f)f*i89(QH2Fl8 z(_~$6?I0uHboCLz9v17AbHdA!hFyy1t&@6Ul*th>QJZ}!gYmD${) zqN2j0sx4`=4_o(VcfVmobKP>g<(F!$mYa2Fi8%XhWkO~Auyl>0k78Q)cdObGCLK;Y z;oK0{xV;y9>VbJCnGIT#S$EX3)Uq_KG(6H3wD>i4H4-!8@^$h&AMIvaM^HR&*9%K; zQIF5p`rxXxTBegMqCa*|{GqsF4cI6DNM?7Qf(g$l41|{?`=JFttd}CuIn@5XMfc~O z=AFcy;vG)q)QmtDU0(fSX(zb(EA#w!LH$Cx?zxY3NOW3Dhsntr6Y9;M+|}a7=dtIJ zi0Gl66%3KI9)iWG+oefZM)dFX&DoIJ(00{kojwlEB7#MIC|1Z+ng76hJdIz@D|{}Tlg7t#M_e4-sl%lM2_MI=VfXYox^`55WO9mkl)3ALOLndH+Tt}E zTop2B${xHLyuctETvdu%BWs@1*!SOezw>@KU=&XyWX$SzO}m-qYl<^1G>tlawS_?W z7K=Sg7K@EioU*4fo-%7}2Y;?WjfJd$6E9J0F0UwLuYR;atls;jN8+IqjvY>!Os!05 z^Hs&T^a!&uv-DX!_SEQj&7eN>9GiYvX>n;?Wy4W6p7pc|W66+huSgJgi%+Pf(roNV z8CX|xL~O)*1Ya~rzd|3XpE#CNm|+^#l1Jg?yQ1x7ajbNlxVKNuM|GbXn~H*JTu4Xs zDK$G4M5sIAdBRPhKG7N)3*K-^`?d~#A?^YENNzj_vGhdkhlB?4#W}R1(9qtVG@y$P3J!L+VJC!UDd$j#X`N|`Z1IQ7i zm?CSW_p_x=?q171t9yO-YU(@cou0?v$D}u=&$(}3ygQ`lN>U~GgWuU;;XSwYBc;KX zg4W6Y$u}E8SPKDNSUId>FSuV3%KVUdF7GrrdoiyB%Ba@H`LaP6?<8-^t3^z?Ke?tJj+8GNwKqObBpnV6-YHS*0= zlq>VDGJZm}>(c?^`P(uY_R6KPA~s9SR+YVXGpUpFL=t&V9q!T#(|bU+P*~q+d|gyD z&a_onoGq$YuHf>ht>&+`uO)?tp5N(XFTJzt5vM)8RALW}NYU$Je1av2ZI~JS5u$wl z`uh7qQB!VS`fbp=hgwhjc_M>uNjaMb)rUUj)oB)(VsP{-liM3!F?bOBL>vDNFMp`ky-0l=M#~C-m z(+L^hJN$C;_OKmC=_WDff(}`=Lnp(x)KD2X=^*J_l4{+Af{G7na0g@KdDVJJP0}pl z2O;)cn|ehqw`;)_C1&q?i}2cNZ*GThMGwZjjlq5URFUg+Wn=p&86zf>6Y_Yn$fQkS zN}>CkZjQIs>TM0KHm+qoabuTNin+Kc{`GzpL$5+_y~BQ&w=O*{tILf80}$@9f~Spj zvh^+TBxfWT0*iJ!Ws8mG<8x&kwYt`2OAwBsBae88k;K*d5gYb)_BJ;{x0zM7`3s6F669MBDJz~`rR71eWUTKSTZwv*OeD!;liJT7ui-^<6uXSuM;v>h)APtLFS z*v>6Y-L%;;cbZ*AO@%m#Ozgd1QT~I`A5LtmV2kaYx#LXM#9Bx5srT=SjV-tma75gW zswWPkNUJ&d40bBqSKf@ISGIA+*yIZt3LjN%ugmG`=~(Ai8sx&~d~-jzcrU*cNG{VD zxSE$-RbT6PXx`M`uj^R8Hk$Ob>J)#yW4r3To8d%T)qtPhsBx@j>bzKC8_$r21UVT*qD^ zXW(&bG5Kqx%J}leZO00ux-aq)^gQ( zNmg&)eo3cidM&E43^H$4kBD!Zfnn`qaw7*$QG$hZxt`1mfZ>&cJ{W^w*z1?$gZO>fe&=o&KB_ zFhMTFCtN(7++2T+4SZD$@vexPmAjekBWWu;GkYgMhQwVS-n(MIzVKfk{afUJeD(3a zzsi4?`#-<=AD{gBO))OS4E|$Ae=OIpcY*biz!u~BYwabl6WpU@fbF2Nl2!%0KonHO z-T*s?2K;mDkDrLwVt1^=y@8DrJ$N8}5A1$rWy~g2v+q>$CzmO@%p&MsZX$!M%v+rj zX&uNjD+NRK8JW_TgDtS@aV*NYcsl-l?hi`B%2~pOf0QZkX)fa6K|Z-PDM}Ygi{402 zrDrU|FGUa0lRf;rckZXsG2~=EXkjGcG}!qdsCZ!9Cby=)xGcY;wN!59Y=uYy4U>=# z^bF++>IE+}q1RDKG;uI4xa7}|ph}>W27hGZ0T+M4!UWHNh_R3hMLkT!h|vxEz2L0pMe4`kV~a|O+*O$0=;zu>0+ayv58&% zW9W-^1)A^-B!e#2r7xF+gj+_+S<|%i&88hqg?o>chtX~_`hK{1iQpLWh&8a z{N-|96{psxN8L6Z1BQM+cODg_40y0!<1Dc1%@`~+mFtIgeXFA`MZ&+JlN?<=&=5Hq z4<^p4l_H5iQZ56kS2sD9wkvU((R=Xe+TL-zVpe^&GQGzz{LW&@(gN3d{37R_lMD?Q&PD@~swa=T= zwC5E^*dfaC0?mGB+sQ(6v8GE)w~2||&kpCOk0;K3;nC=9N3)K|7`D!%6y~cWVFvq! z-iKSUA}-cAT+JI~p4h3QPMzY81Nv^Ojv!PLFQ$i3B&1mf{A(ar)s5-1S`Sppp}jud z?b;^^tQT`xs1_+9%yO4xv~?On40}}RY-KxA#&MHV?~$7zG(-d+9f=Dw7=flh3mg3G zWZ~@QrXAz_J(ef(Y;QI*Cx=}&lq}L^NaH=v-V($Ow!l;M^gR|5*SSWfCb5opDL#?qmm>hCPw;J=X>|(8`2Vp z@2I86`ef3ckBp2gcg(thVR}mRA%f%XjLVD@s_7l8RP|O(ceS z9qlakd0~RVx2gWptABn0!a~zwQ0rc3Jz=oXpmc`)P@T`KTC03iXd*KUhELpn6p4Dn z$7cs z`M$e3LH9z2U5m}zLkv%*NL}uQ4lhSf&o~Vl2k&AV^66X^1%rQh6J2~j>&{rzvOzLw zYM@ATi@mXgmW`}yYYg+0Gk!#1k| zevT=FN@9`dqV-Ad^WA~Qx>x06uDS_M9m2|PU6x7F9(-f(ul*bP{*hsIZK3Lx+lN^s z`v@d?E@inNua>7(Rf!%e62)^H-`|VzB|V=Lgp)7kVw<*xk4-16S4@Y?$J2yT@LNZ? zU{u{#L}M$n9l8-O2+7l_-ulMwIAj*1*|umjRAlDZbY1R8;_|}6mv0EHR^+NF8BoE$ z{mEgqbf6^$elokXMx?K=zxkcFbH_7GZs}IdH%8j$mc)E8Tn3IUH~8_GB?J<&Io&E3 z*BXRJX)@LHa)|T#VJ+KgPemReOK7cPI(vF)WhFG;zA~%RLB@=;)CYl*RetFc-}XVS zS(bdN(2x)qz zKS=Fi21o`yeQ4d>ZxjNC!w1|yZi<~9Ocy##HdKB9jEcu&*oVC*X|=t(%lUAL4gmA5 z=~By-XDb9w)P!T6Uxy#ILnvzBrR9623jp(5rx;(3l%rWBksy~ROzp10=utIGsznmi zNhw9^F~4?O-f_KVUsiJo3KHgNps&(2=V<#)$Wda9ns==^fl%PYvDh{4l+9 zT^1T5j?P0-`ryOMS_!M1XoMZoU*jrK*DlNeR2`LsAB2DLx)mg2f6^`I-pLgANK2D-bi#~Av0e2*988Xg{A z%A3VW_TGAMvZ(48G6I2%_pEPt9btl39>9{95qAVzBT^OXW{>R}Slzl3bh36c?1<|~ zAkaze)1Hqi7@qx=O$@{QifH`d>ZB5`hFY!v`ycl*_S!{YE4Wb zN1Yhd*KUN9$x}i@DrdnLgCGj@8mil7>l!Dy9LRnsfQo#A#P zWtu8xq8g(f^NCmSH9m$@1oCAI9-L#Kl6XY2d}|LNqv+Ewvwf_TEK$=%y-)0E`NPk! z%4`Nwky*RFtKnf-0<0_3GID`=pXcJ_;T+l$)YR0QgQgMur*RPq$2>!!x;FdZh?0^qQQxXV}Om?lka zeN7HQr!L!AhFuP|?ofw3d*DVoIyw+qrO$<62Dy}PN*6x)`liw* ztO2JzJiSZ`8lr=TOe!}O8fWD~s{7n~i)<K54*#*W*KU|p0KUf*U;)kY zMbGxi;bGz7;ee^@%&R$GtJ+*hi)fJ|5dV?0maUoNiOzlP?mLCnMjo}uIbM^d7vBhT zCi3BDo}=E|?R`&0Do*!COdA5QT;?Cr+wH$m^7%(2|8F9hvWqs?9#0CX-jsFud0Wr% zhq|0*n+$>L%Ak6QwSJ9ynrvTma5lHezD4qf%0tk)=xf48ghI$k9;pK)<0+_ISyT(5 z|Joza(Da_K4!Gc%Rxr5@@5EJQR(>Y}my1CdWaNO>Av7I&@YA0lJ2BItd7(QkXSRsy zEsI*@P3PVWWdwcTr_NsBqN7vmK9-C=tM(jl4MJjTf});*n$LB^9-_1Lymea}C5NA% zu2a^YF`hq50$de@bzXoBT!V&G>i}jELS%9AB6YE$9xp}H=H8vCZ5et44FR+R!9B+k z9v&E<9BjJGAF+SbepU_W=;l8BT>KaDmOOFL^4XkfM(C>0=}zx4-b3)wczofg%Yc5g zebKsUgt)-m_xBoZoQ8v>b^t3R0Z3`PTVnL~soeF=k_xAqIysT(IDIwK7YoF(ntdnE(o<7iX>C^0c`WPRL?ORdL+=JhJ z?_UHR`>*qC-Tokor8!Dfg51u|uFvUs%4i@@e{&V$Cn{h+`e=16!tca1!FAZGZ%d5^ z6O5Z)>xE=eC{SaTuHIgv-b~eqT-|alIoIXf@|Kgs?VMR3M+d-`HkS?<=&o9C&3r{b zrDmIy51ks%5B8sDNX|aUC>Bf4shz*jd9h~+CL$tIRM3b}xB0!fp8y{TA1bzx15&f4 zznqm0$@3Fy4;TR&TaYLEXfhIo!^Gu<5<3eWuN0e(l-cz~w!i0PU8~;isPWxxT^p;K z&d$jT!Jzdn7hIS|3E)>+PmjCP+`I6jnXr*?OKFT@ObDs=EAkdXy zHVHtlDgcUY3UKSvv6fVsS0;eQxy%Pu{!bT#?EhoY#};~2NDv+a-|PWeTaR|bD z%Yy?hp!nHFuw>JhNXF$30+)L!CNS-~QzS?GSsgdY0RUbmfLSRtZValt?&|E^G#g_` zvpv^7GHp+CTYj_dDgnY9q(<;8eM#WFx8?CucEFaOyv9Z)@kh(iy_l&J(iKQzB3N8c zj>Nd%`Kdwgdp@g&AF0{RJCmr1SXDx?h*+9{I$qP$qun7x>*IOJ^UvC^8C;x49b23I z2_(p-Tf&z6)*XcC)p)41>d7v~0T3{wn}a1*8h7+6xV7>PYE)%CRtj5NdeRlAUjhE3 z#3F=S&Gey{&;=O1`9kN+MN*x~7Wk zZ0o2QE%)bc0tBcg?povVuKq;|+bRO1HWV(R@y#eIl-&z(bM)2{ABb`wQApLSV|7D>5dACw7m-A9PFFHw=hy4;eFM^OuQ*>#H{@Jwr$*OK$TJ{Uq z=T}(sk|xdAGDUccWr+A7euK+@gxcfgeRKpyn zTkyy{Rq@Ip6Ey7Fd7)!fZmsHa)Fc`iN<$h%1IRt&dp9gUgPL>lYbnl;2H;cAuHwG{ z0$vsq{!fS~1#DlG+6^7O0jHeMwV;0>b8PeHN z=PTniqWyXLl;{U(&0(8-86f1Dk>L6wR>;w$Oi_ARm|;~!o$~DhyPEpr zR4$)I#i6{L=V$xyX&_FOQ${W7Y6}#!Fy_2F@|p}JH35|Uu?O&mBM=8OhrS~2k>6KN z_Qw~w)giL{>CPv5waCbW;ESLhaXfHwpr;aQg+QIvqZ&__phVX|AS1wAL5lHcK1AWm(C0>c(K{-_vu_om zR=j|qU!nb2<;uawD3uV#2(i0pY)dbQkO}dbpX!=ZjhH&AzSc9K7 z{hzYdD7v*%rhsaa2q577S$kyIK|0;eOfHnTLH|vKDN{hOccpp!&z(9nze+Mv4vC0n*ETl}WegW$s6Fb-*SboAs4)7T zAY43fN|6Y|Gyf6(L0x|y*`}dD>q!RJuaW?P%U8S00~R5yiOvtHJZ2(mqwCb z#xH*ZHv0)rjLLK2gX7U+=72%?&hW3=8Bb5oqHP}_|8&}8PqbLIHB{r}RwgPloX+6G z1`R72k*S0nQMnEpJAS*J`J}b<9I>quKo%?(h+n(vq@-#g&EFD|=|JD%fvFtou53o< zdoz3W$r=W%uC7KJRBfJYcgkVk`Pd1hH%ym)WFeAJE1Gmbxr#ZE!Ot0%0kXSb`WjBA zKo$V*<5xkOBNTl z09rES0u5oBl|qVZ!HB}ekPS_P-a?Po0i*Z>gmYSSV4M5aD4EOAjUJGzOV(Tut{3I6NyS_Mf!5*LH?EZ zVjfRFJuYSu)gCc#48kjPT^+U^cv-^Re6+i43Mh)pt9P#Tu>wFdDUs}0U?=usDUBac zPRWQavXzXeopC(bY;CP@oGwxX(*5*i$YQnJ&Zr!uutD8yz9!y}pUXlb7I#?BrfS^#@#Z9?O#d0h!U!1gM6lc1Hy=bBY4J2ehM+ z@##<_7oW=pWU{l_Ek=>^q7)#ck4upoj$FJJ2~e}z7tL#rR8Ne$fWEYAVOq#)7C_HH zIoO!slBI9tg2*|nC7>t%vN@(m#b2uFrJDY4SJM+(pdI-9oG4Of3Izp(g6IKW9rG#B z*YpwGa521b)@_Ih6yj4;N4wtD2;~o=8*=GVyH`WUlq%Z&iIz>eS+gfMv!A5z%80<6n8@>O{TVgOoqpIIU+ z3IIkzW2^q3^eRgO&DmGFk+h;9ZVYGz#z4xQub{pJj3;U;(yE_dJ!bfq3iw|td8vT^ zwIqMSz@-BIBPv}Y;P1@D|84}_QA(MzF+7eN`g=_fHntuRT0&>9Ncg)&=%NL1{gkIu z_HTe_4ZLlD_IIlV@}a@JduSi0YDDH0g7}4!AOHbgty)Uko=Y9hXYddhE4&u z)r_Z!+>R?Ca+5_^KwS18b@D$3NT~p%J4%rt7ybrO^JIG;4>{Gj#R*6sRYTT32QZ>1 zz=W9N)f(x4rz3ye*5z_uF6RaO3wo)YmxulD=>DIea*3UnrszNQ;qO>-X^Ji_`+v}) z|8{aNiP9zSyeJ-WN#ieR{9oS6KfSp0ivFK+GNYIsj-_lG#NlU-2Yvm)jp6gjSd7vB zQJOl`sMFZE__%?Gt#>djI3+~&HiGs86gzZ<*Z32i531H_F>U<3xlg7hBMWxlD+n#@ zt_7%0yurf73oLN22OW$RV>G6(lVj5!*ExKZ6)K#>1S@@S*Zi%c5ADHjqH9)`{7i2< zQIlI@%2zN>^vHcBwP0y12M2@Qe>r2&?zZO#tOb5<5^8PrTp3e17Lr0)HCY-q@B z&&ko>H{o{Spc>Ym4sQ@FLly(&c0+yGHst30nDkt}@)J>te|gLb6; zbDEYM-|%qdyDyce-FH+HAJN@wD*tV0|9ppxolc3TU&`hPTZsuwuf*ds-y5Y2f%@WW z0`pyW>+Su03?@UG&VJi*j6gz|dH*R9Y83s(d&v`%krBTpI|a zb*!|lN&*#WTP}i@zYUetJ%aB09X>Dc*)J=^D8*DVg$A~AVoO#p0Z%>OD47@`O&Zj) z%E?zj!=&PLSW1N!%o@_QbUF zv391}NKi>?_TG6K{Qjnxa871({b>5_DsA56u*v=Wf^)~v)%c*n%n;&{7Oh=PWnZ;y z)Fz>FgO0nlE(9mIA&xSF0&e=!6VbVL7ccO)&Jy?aD71=%(5_(wHPj493~#M9TCCt<)Qoe4 zB`|e`*LA63V$g_ICg!Ct0)=yNS$u@QpK24@_>rH1WFd~ej1dLq$;tVdc3UQy``Gxq z`9vmAiVyUg9}c)AKb`gOr2gM459$QMaXTl(d%GyWc6%P-`Gx>R6d7crtN#Sme-gn; zb|8PR@8`z#tJ1%-4^0Hf7A;6C8vgcHQJ_h{Bc&D&Z?7z00p#uOP@WJ2f|YnGMt-lZ zn9kZj@j=zungQ?#;MCaU94u!bi`4z{UF~nz`3kBy7jVh8#^AtJK;H7A;KA*igs@l> zhjPZ>dpQevK&;R0bgbrApQEHU(E^ZNN+sg(xgh=JX#iX@pIMNP0mvKZg=}ct0ct9m zf7<_Et?9b-fvn`(QI!`D@YBRMkEIKdbz;>yx*#pKQw?0wscLLU0LaVFocNgu6n~n8 z)Q??I?v_#ogb&Ad-S&U=f}ZFprw{=GRZ4a)XrWy204_;NZm6XJs1SZY8GPu zD(VZA#|<5gt#WyNtr^JLg&cm41F-^v6D=1N|E*wuKTciSz$N06fj;6W(2&|BU;kti zK=AErZlV_`&l*sM;XE)g_6pJ9x$VRcRRIKwboX3PKa?_$e#ES{DXQ2(keRSC%x!8Z z8|(CAbhvtT_*ieS+)s7zXobkQw?B-!eYU81KA@NMEMl0SYjuKh&DY(oart~8o)af} z>3k|v6COkg_jEWc!fE6wj>vI4Y{h_6j@LSS2w9CkKPq(fYqDwES=z|KwiVV(14vxT#{VW~pdWjr>&A`1__eqr|cz zSFpo;bxytT}NZ8H3(&vxnb`uAJn5(c8iEdDYEK$&fCv6m;czRV)S3IccqRXK8FjS7x<4a_KM9YK!`w1P-N06$jNMyRW6h z&VF=oOv(|A$GK$rwMO3=cj=ee-J7G12ox0<)q+IqGg3E7MdTCgOH`_)Oleja;DSHZ zdJ83p!B6|}O)7p)`1!ck885!6cj(@#FM#>$bZVZ%{6-|HZ7YtXC18YC$p%Kb1qgY@ ztK!1h@lc#^z`m^QPK^`R9-p^JK+c5G+3sd#9o~e+QdqcMkU@xLK{dkzH$~s>@LD}I zeQW5wcvxW5xgbF6*c>wXVbWoxyOp}kQ>M6&rO3qU3q4Ilj;i-`GCaYBeEYO}0?zO~ zk^ji=bi(iFtV6G=J(*Lj=CtZNzv?sZ%|rNMF{RDeHaoZ}PSh0w(aiA8Q(s8)EyD2I z(Mg$F(&TNhQ6a;j*5(}Cf5^NtBp~xl&WacCn3rJp)rSyOKP%fhdfGc*JX>_& zKK9Nz5f!_w4_XNVKKC_04kF;7QXf-c3RteaTc%Ylkz4NDC|{8qmV1AylxK9aJ6g(g zt(Q%0)7fP<%(i;-Xr*_-que$pApiXIgXXQR&c{q@n>}aNgxQtWa-zw(BkabT4K4Js z2j7Rj(G+TVXUHa#?uXhRMjC!djj~vH!W=HUpB!q6N)q(}cI^T*?8JP_ueSNY?Gtuu zJNapw3$CcG_f-AxH~cUbmLRSUk=aphrvun)yR2@Qp{s3QmG;1q`RYp5(9+Ge82v{% z$-7=NS$M`{8C6B*z3Y6$Z}O7~z%%|gm0v~gNOPgHO$pG>CyPExeo6M`pxiJtK(t@e zkME!hyjEECsqe1vEa@7cUpa0{C1*_>CfR@N6ui!{d)&vEZq`jO{p zn&++^vogJ`bKPCn zG+IZ>2%HXY$O~O-+u_PW^_by8KB_{S&f?vlvN?UMTlAr%d#m{6quXH_`(IT4LYO!! zJ7|b{x&b!Wdu@q)mxRhBb}HTmKM<`*SQTzsVKhsN8_54vfcj8}M`?4Fwk(fi*?Zws z%2cc7OEB@2&-T5*72#UH`TC8zmdH;-JIBNDSe^{mmDp=ITe`j_*x)9c>Fu*c3<8dv z$n|7D6=(>I--Q+$l2z<_LFFmbimrDCF3D&Uv{^>-xa=T-$0d3AGxJROGEgp=z7h?RsZ5p5y!Y(rmBwjg|8Rj7 zlefj{B)i5;{!93D2sw7pUuo+{H=;C^9Abq|PNzKE^LB^o7Q!p7 zb<2A+uAe9|v=P*4SbnjPKZ%9#Mp~C+X3@| zyH&oCInz5CTdCxG^qN3^Mms@%*=*JOe3w$T!Okr#NOo(V2==8UV{QbSL}Pk|^Md>D zl}`Bt?1RFM$fK``5y5y76Ot@%yB3N0MxIZvD#iqF8+iHF=oR;|YSqp*8c#aDT0ZTU zIH<|!+y?Aaw%Nh`6qC1w+FGzL!6+el3Thv(J`FnXf2$SSd44pOctR9+5uXabz~}>$E&x zWjy6jbNm?Ccfo^KW3>=y{E_YHF<#=)dW=0| z5#XOTexFRUo{!I!h|F_{w4aV7@tYWm3F1{Tc*jp^Pw<8S+(dF`ueLgK96l6L@vwD_ zAm7flk~LyqA%%gK#nOT@Oe-ofUz16Va6R&T+7B=($vp7XmQ1*_CG)G3;@PVdj-|lw zR3b=h9|)J*?yOlXR2bY`nT)?pCCU{rkaU+UTyjn=ku>L3sNR0G)PAR=MdW5{^nC-e zbIJIE*{puu?3t@KHnVyiX(_%g2|uZ!u#^uHd|&tdU-01>^A#KX11Egj zRBYNC!~i^tEb*P{appW_X{%R|>;TnEz*flJ*Sw&*4{F7(HV2ZCj>x&6;ItIq08ps% z1b;GncfbNn0>Ht)5;O6fF>j|}?hF#PNUB}%i&@x-#08S}MDzAUbM|Z#h}YIm@&dhC zTR32FgK{|y**0gHbqOWxgnZ9LxHvIYoM$-BLVzglF-{{w~_lV&>{@ByJKYTLQdV3jaW{q*xTl`x)Vu^qRBq3 zYR#3(Zf5PnZoa!O-G63AjFJo3jR|F_+J5qG3vO(fzBv#ssO!U!^gSPRy`1jzY!c*0 z-pg|YzAsNkXz_1BLk1zOYpc5y?Y<{-fvb3pZ-1D8ggduO)c1B^M@75{nGI@^|RaP0O zIr7a#T?$4z*gJ|T49yYj+6hk^tR`osRk55bs5Kv3>`m~}mS4rB-(6dO{HY0$xyBR4I z$JxNniGyze7PGv`vDfEl#63MSOaBG3OVXcS1IPD_yf{U+)=w{RN>MOO!p%4R6&ZHL zT)qJoDHpA^s9IzYuSmV+PQt1|G6Ao%^}q_vVO*i=cu6<^FK`N5b7Bg|0#jjW@?YTY zX5@n4*Vwj*o^F0-Z+LTP@q=Ktd`Q0hC(O-yy0!Myt6?JV*t#+4kVD$Fwt#WebE4h! z{*AEb)Q9&`Nzy240EUV|WZ)?r06AYUa(CWd$i_ePu$y<&S&pL|Ca};uCgpAT^ghk) zD+be4r0l&w!DL=C35RaA)53q5?AHV?wu5{(YK!+$fF4fZK~B2^>GOWL;Oyii+Q2Ip zBp{R!{_@+kZ~H#k_6L9RavdAL1?rpzM<*5FDWN-Z5($xT0ooTYS_c4=;IQez-q7{a zAy@Z|d~3iAzCED(fk8v~#OtR^Uk!6cy+w1N)Z~d1#eo}|~_XofD~(@p5{Qs5Wfm-$h2zZrI4_>2U0t5u8w{kL4w zsNokg*JQ<~@@5`A-57SX^R@VTIB92bCx8E6ED?VMKnSKn$a$?N++1>wwu<{Zl|;6y z2yn($y_Q}oHl#z2j7}Z&+D!mgZg)?W_A@VnZ;h+?VS+#Pa&nxM@kg?aQHc-<7NNJ<}^Dl&y^b zHN#{9YTOgeY(i*q8Wic!T4}BDp`P^``Be7J;_RUWZwGo;W$k$P!b-wcae~kQ7fH!# ztIsj z_`V~`pvH4L*F^ODcvS{CB@`OM*F|{GaIjo-1&A}a1iloXY>qL&Z0!^-tYm2Fp5$-6 z1A`P_KQ=QCs(3E#ixa+DRTjj*@5k;+zTdl6y7-Ok@uc}kz?1oDH=rLBVc*`5sm`kk zo}NY!_?9nzHW2GpgoZ45?Pinj_EFzmpHCu~Ebr86c;&@D2_wI1jBul(<_SWvKuyu~ z5~u0fMT*uFhbYowuXAY%mk$*NkCd427;qDYi<;9>`PstqL$4nH{wKdZlZ5|UUd^Rv4&ey@i znjPld?#_w#resO-ap&vtY57w2^F+m2s;qdWv`SQxUdy{;*uT~F6iQSxTyPVpG2ZYz zykMiEnL4tipjlGV+soZ#evYsl_wn8H(4*aUt@kiDd0&JrS>A_~RyND|oriF{_4DlJ zARO0?_T;fg5W(X}0x;il@4~^rT5WCjWRiHl4K$=8u(i35L(Ie|HL5d6nQ>CorZrE3 zCsN1p)l2?!KG&Rx6=5B8Hk0HN0mi~a`;qQ2kc@Y@tHfgv6P{#=lif-$8&hPzZJ%Jj z!f~tVs&`Ayh)P(h4-oOfuDsxp&ncN`-^gHJSd50IoUH3Zyp8BZV|*n`ofPeCUXx|K zNY-38pf<%I9@rzgP3jO#I;C#YTu6= zAzpJE0SBH{LjYS>e{X;TezHxj?Jcyuv*b#{Tg(^+H$|DM4W@w1M(STb2l;*bdX>Yb zxsRR3FZ+glW$B>;&NMpP*1cy3ddYCd6*f`;oO$mWY|yXAwi}C1O!wJk%60>6Kn7j^ zf@kD)X`q_ngP#yxFYk}#H+6MyuMX_9lQ7pV*NoK^B`H69p$k2+9)S;NrGGhUZy$byDpn_xVHr zQmL>G_+di5!&*`IcA*Bv_=|hbSBSJn5fQuol?Bmrz--2fL*~ZTTpq)n?+k4oBm$~X zu72*Fs|9b(8Ce?sD#EJ9^Z3ou1tw@G00bmcJWUwHW&+SW#npH|+^c#4iUDGnm1yf_ z7kD*eh`4%qRh3FO5R07=%D$gM4FpSF-|k!x)wvZ01aPe~inuUID!mR;jw@_5c_} zal`(Ch(H(O_SY(^mS=#r45jciHnd@2hL&;XCODk+D@Zw_W5&d^C%a=1uPysY8Jt5-$QFq`M+_d$|q@;>DSuy?go}pM+qi0=l4v4Jm2OE9q zlz7zS!$z(kAn!f2b^UDZ7^7h}d32&EA_@&Nl*?h8)FLRt$H@I8oOy{JczowqKH}dV zojPfB+hZPe;Q<%Ll*CnuB8%cxIhM)zx+b(E$Et{1%xXM^`^^{R#~)%nN>2s%4w3p> zS-6DYHn5Sr4}hQ&5iPX#-A;WAYHk`Q)&4yjQefSf9m&T#FF1SG6V~?Z8|z;gaB932 zqU15!TF*9UcwYB=6eyv@S>)tKbZ5tkB9K|HO>p)9eP1-+O~P!;m8pfD>#_2&3|^ie zLX;W=p?hdY!b;Zz0nGAJ-T8Z)!@o0`J7J*FvuPk=Kv=du-Y;k>(6z`_urVlO3(#Y}(j1EbVA(6aH&VITqLNJCSiB&cs0tav0n^;WhsFv_O(Rw2~d6<;G_`I1TS#b>fp&Pl^Zn6ED)46qu|=5Cj>D ziQOoZ(7*z6!M7t_Y5!i=uyjl(Be0A5YY%>_P5*+#x*PzU4UkvHU-sqwJwN%^zFszl z{v)HgYz+OK#sHnkmyMx+9iP8mTsDUOt{CF~aAT-Qm(vLFPyjl_vjG0ujlaFP0X-*> Y { }); ``` +#### Customize form outcomes (buttons) styles + +If you want custtomize the outcoumes style of your form you can do it using plain css selectors. +Any outcome has an Id that is composed in the following way: + + +``` + adf-form-YOUR_OUTCAME_NAME +``` + +Using the CSS you can target any outcome ID and change the style as in this example: + +```css +#adf-form-complete { + background-color: blue !important; + color: white; +} + + +#adf-form-save { + background-color: green !important; + color: white; +} + +#adf-form-customoutcome { + background-color: yellow !important; + color: white; +} +``` + +![](docassets/images/form-style-sample.png) + + + ## See also - [Stencils](stencils.md) diff --git a/lib/core/form/components/form.component.html b/lib/core/form/components/form.component.html index 19edbb04a6..47972a0448 100644 --- a/lib/core/form/components/form.component.html +++ b/lib/core/form/components/form.component.html @@ -30,7 +30,7 @@ -