Repositorio del curso CCOM4030 el semestre B91 del proyecto Artesanías con el Instituto de Cultura

onsen-css-components.css 203KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545154615471548154915501551155215531554155515561557155815591560156115621563156415651566156715681569157015711572157315741575157615771578157915801581158215831584158515861587158815891590159115921593159415951596159715981599160016011602160316041605160616071608160916101611161216131614161516161617161816191620162116221623162416251626162716281629163016311632163316341635163616371638163916401641164216431644164516461647164816491650165116521653165416551656165716581659166016611662166316641665166616671668166916701671167216731674167516761677167816791680168116821683168416851686168716881689169016911692169316941695169616971698169917001701170217031704170517061707170817091710171117121713171417151716171717181719172017211722172317241725172617271728172917301731173217331734173517361737173817391740174117421743174417451746174717481749175017511752175317541755175617571758175917601761176217631764176517661767176817691770177117721773177417751776177717781779178017811782178317841785178617871788178917901791179217931794179517961797179817991800180118021803180418051806180718081809181018111812181318141815181618171818181918201821182218231824182518261827182818291830183118321833183418351836183718381839184018411842184318441845184618471848184918501851185218531854185518561857185818591860186118621863186418651866186718681869187018711872187318741875187618771878187918801881188218831884188518861887188818891890189118921893189418951896189718981899190019011902190319041905190619071908190919101911191219131914191519161917191819191920192119221923192419251926192719281929193019311932193319341935193619371938193919401941194219431944194519461947194819491950195119521953195419551956195719581959196019611962196319641965196619671968196919701971197219731974197519761977197819791980198119821983198419851986198719881989199019911992199319941995199619971998199920002001200220032004200520062007200820092010201120122013201420152016201720182019202020212022202320242025202620272028202920302031203220332034203520362037203820392040204120422043204420452046204720482049205020512052205320542055205620572058205920602061206220632064206520662067206820692070207120722073207420752076207720782079208020812082208320842085208620872088208920902091209220932094209520962097209820992100210121022103210421052106210721082109211021112112211321142115211621172118211921202121212221232124212521262127212821292130213121322133213421352136213721382139214021412142214321442145214621472148214921502151215221532154215521562157215821592160216121622163216421652166216721682169217021712172217321742175217621772178217921802181218221832184218521862187218821892190219121922193219421952196219721982199220022012202220322042205220622072208220922102211221222132214221522162217221822192220222122222223222422252226222722282229223022312232223322342235223622372238223922402241224222432244224522462247224822492250225122522253225422552256225722582259226022612262226322642265226622672268226922702271227222732274227522762277227822792280228122822283228422852286228722882289229022912292229322942295229622972298229923002301230223032304230523062307230823092310231123122313231423152316231723182319232023212322232323242325232623272328232923302331233223332334233523362337233823392340234123422343234423452346234723482349235023512352235323542355235623572358235923602361236223632364236523662367236823692370237123722373237423752376237723782379238023812382238323842385238623872388238923902391239223932394239523962397239823992400240124022403240424052406240724082409241024112412241324142415241624172418241924202421242224232424242524262427242824292430243124322433243424352436243724382439244024412442244324442445244624472448244924502451245224532454245524562457245824592460246124622463246424652466246724682469247024712472247324742475247624772478247924802481248224832484248524862487248824892490249124922493249424952496249724982499250025012502250325042505250625072508250925102511251225132514251525162517251825192520252125222523252425252526252725282529253025312532253325342535253625372538253925402541254225432544254525462547254825492550255125522553255425552556255725582559256025612562256325642565256625672568256925702571257225732574257525762577257825792580258125822583258425852586258725882589259025912592259325942595259625972598259926002601260226032604260526062607260826092610261126122613261426152616261726182619262026212622262326242625262626272628262926302631263226332634263526362637263826392640264126422643264426452646264726482649265026512652265326542655265626572658265926602661266226632664266526662667266826692670267126722673267426752676267726782679268026812682268326842685268626872688268926902691269226932694269526962697269826992700270127022703270427052706270727082709271027112712271327142715271627172718271927202721272227232724272527262727272827292730273127322733273427352736273727382739274027412742274327442745274627472748274927502751275227532754275527562757275827592760276127622763276427652766276727682769277027712772277327742775277627772778277927802781278227832784278527862787278827892790279127922793279427952796279727982799280028012802280328042805280628072808280928102811281228132814281528162817281828192820282128222823282428252826282728282829283028312832283328342835283628372838283928402841284228432844284528462847284828492850285128522853285428552856285728582859286028612862286328642865286628672868286928702871287228732874287528762877287828792880288128822883288428852886288728882889289028912892289328942895289628972898289929002901290229032904290529062907290829092910291129122913291429152916291729182919292029212922292329242925292629272928292929302931293229332934293529362937293829392940294129422943294429452946294729482949295029512952295329542955295629572958295929602961296229632964296529662967296829692970297129722973297429752976297729782979298029812982298329842985298629872988298929902991299229932994299529962997299829993000300130023003300430053006300730083009301030113012301330143015301630173018301930203021302230233024302530263027302830293030303130323033303430353036303730383039304030413042304330443045304630473048304930503051305230533054305530563057305830593060306130623063306430653066306730683069307030713072307330743075307630773078307930803081308230833084308530863087308830893090309130923093309430953096309730983099310031013102310331043105310631073108310931103111311231133114311531163117311831193120312131223123312431253126312731283129313031313132313331343135313631373138313931403141314231433144314531463147314831493150315131523153315431553156315731583159316031613162316331643165316631673168316931703171317231733174317531763177317831793180318131823183318431853186318731883189319031913192319331943195319631973198319932003201320232033204320532063207320832093210321132123213321432153216321732183219322032213222322332243225322632273228322932303231323232333234323532363237323832393240324132423243324432453246324732483249325032513252325332543255325632573258325932603261326232633264326532663267326832693270327132723273327432753276327732783279328032813282328332843285328632873288328932903291329232933294329532963297329832993300330133023303330433053306330733083309331033113312331333143315331633173318331933203321332233233324332533263327332833293330333133323333333433353336333733383339334033413342334333443345334633473348334933503351335233533354335533563357335833593360336133623363336433653366336733683369337033713372337333743375337633773378337933803381338233833384338533863387338833893390339133923393339433953396339733983399340034013402340334043405340634073408340934103411341234133414341534163417341834193420342134223423342434253426342734283429343034313432343334343435343634373438343934403441344234433444344534463447344834493450345134523453345434553456345734583459346034613462346334643465346634673468346934703471347234733474347534763477347834793480348134823483348434853486348734883489349034913492349334943495349634973498349935003501350235033504350535063507350835093510351135123513351435153516351735183519352035213522352335243525352635273528352935303531353235333534353535363537353835393540354135423543354435453546354735483549355035513552355335543555355635573558355935603561356235633564356535663567356835693570357135723573357435753576357735783579358035813582358335843585358635873588358935903591359235933594359535963597359835993600360136023603360436053606360736083609361036113612361336143615361636173618361936203621362236233624362536263627362836293630363136323633363436353636363736383639364036413642364336443645364636473648364936503651365236533654365536563657365836593660366136623663366436653666366736683669367036713672367336743675367636773678367936803681368236833684368536863687368836893690369136923693369436953696369736983699370037013702370337043705370637073708370937103711371237133714371537163717371837193720372137223723372437253726372737283729373037313732373337343735373637373738373937403741374237433744374537463747374837493750375137523753375437553756375737583759376037613762376337643765376637673768376937703771377237733774377537763777377837793780378137823783378437853786378737883789379037913792379337943795379637973798379938003801380238033804380538063807380838093810381138123813381438153816381738183819382038213822382338243825382638273828382938303831383238333834383538363837383838393840384138423843384438453846384738483849385038513852385338543855385638573858385938603861386238633864386538663867386838693870387138723873387438753876387738783879388038813882388338843885388638873888388938903891389238933894389538963897389838993900390139023903390439053906390739083909391039113912391339143915391639173918391939203921392239233924392539263927392839293930393139323933393439353936393739383939394039413942394339443945394639473948394939503951395239533954395539563957395839593960396139623963396439653966396739683969397039713972397339743975397639773978397939803981398239833984398539863987398839893990399139923993399439953996399739983999400040014002400340044005400640074008400940104011401240134014401540164017401840194020402140224023402440254026402740284029403040314032403340344035403640374038403940404041404240434044404540464047404840494050405140524053405440554056405740584059406040614062406340644065406640674068406940704071407240734074407540764077407840794080408140824083408440854086408740884089409040914092409340944095409640974098409941004101410241034104410541064107410841094110411141124113411441154116411741184119412041214122412341244125412641274128412941304131413241334134413541364137413841394140414141424143414441454146414741484149415041514152415341544155415641574158415941604161416241634164416541664167416841694170417141724173417441754176417741784179418041814182418341844185418641874188418941904191419241934194419541964197419841994200420142024203420442054206420742084209421042114212421342144215421642174218421942204221422242234224422542264227422842294230423142324233423442354236423742384239424042414242424342444245424642474248424942504251425242534254425542564257425842594260426142624263426442654266426742684269427042714272427342744275427642774278427942804281428242834284428542864287428842894290429142924293429442954296429742984299430043014302430343044305430643074308430943104311431243134314431543164317431843194320432143224323432443254326432743284329433043314332433343344335433643374338433943404341434243434344434543464347434843494350435143524353435443554356435743584359436043614362436343644365436643674368436943704371437243734374437543764377437843794380438143824383438443854386438743884389439043914392439343944395439643974398439944004401440244034404440544064407440844094410441144124413441444154416441744184419442044214422442344244425442644274428442944304431443244334434443544364437443844394440444144424443444444454446444744484449445044514452445344544455445644574458445944604461446244634464446544664467446844694470447144724473447444754476447744784479448044814482448344844485448644874488448944904491449244934494449544964497449844994500450145024503450445054506450745084509451045114512451345144515451645174518451945204521452245234524452545264527452845294530453145324533453445354536453745384539454045414542454345444545454645474548454945504551455245534554455545564557455845594560456145624563456445654566456745684569457045714572457345744575457645774578457945804581458245834584458545864587458845894590459145924593459445954596459745984599460046014602460346044605460646074608460946104611461246134614461546164617461846194620462146224623462446254626462746284629463046314632463346344635463646374638463946404641464246434644464546464647464846494650465146524653465446554656465746584659466046614662466346644665466646674668466946704671467246734674467546764677467846794680468146824683468446854686468746884689469046914692469346944695469646974698469947004701470247034704470547064707470847094710471147124713471447154716471747184719472047214722472347244725472647274728472947304731473247334734473547364737473847394740474147424743474447454746474747484749475047514752475347544755475647574758475947604761476247634764476547664767476847694770477147724773477447754776477747784779478047814782478347844785478647874788478947904791479247934794479547964797479847994800480148024803480448054806480748084809481048114812481348144815481648174818481948204821482248234824482548264827482848294830483148324833483448354836483748384839484048414842484348444845484648474848484948504851485248534854485548564857485848594860486148624863486448654866486748684869487048714872487348744875487648774878487948804881488248834884488548864887488848894890489148924893489448954896489748984899490049014902490349044905490649074908490949104911491249134914491549164917491849194920492149224923492449254926492749284929493049314932493349344935493649374938493949404941494249434944494549464947494849494950495149524953495449554956495749584959496049614962496349644965496649674968496949704971497249734974497549764977497849794980498149824983498449854986498749884989499049914992499349944995499649974998499950005001500250035004500550065007500850095010501150125013501450155016501750185019502050215022502350245025502650275028502950305031503250335034503550365037503850395040504150425043504450455046504750485049505050515052505350545055505650575058505950605061506250635064506550665067506850695070507150725073507450755076507750785079508050815082508350845085508650875088508950905091509250935094509550965097509850995100510151025103510451055106510751085109511051115112511351145115511651175118511951205121512251235124512551265127512851295130513151325133513451355136513751385139514051415142514351445145514651475148514951505151515251535154515551565157515851595160516151625163516451655166516751685169517051715172517351745175517651775178517951805181518251835184518551865187518851895190519151925193519451955196519751985199520052015202520352045205520652075208520952105211521252135214521552165217521852195220522152225223522452255226522752285229523052315232523352345235523652375238523952405241524252435244524552465247524852495250525152525253525452555256525752585259526052615262526352645265526652675268526952705271527252735274527552765277527852795280528152825283528452855286528752885289529052915292529352945295529652975298529953005301530253035304530553065307530853095310531153125313531453155316531753185319532053215322532353245325532653275328532953305331533253335334533553365337533853395340534153425343534453455346534753485349535053515352535353545355535653575358535953605361536253635364536553665367536853695370537153725373537453755376537753785379538053815382538353845385538653875388538953905391539253935394539553965397539853995400540154025403540454055406540754085409541054115412541354145415541654175418541954205421542254235424542554265427542854295430543154325433543454355436543754385439544054415442544354445445544654475448544954505451545254535454545554565457545854595460546154625463546454655466546754685469547054715472547354745475547654775478547954805481548254835484548554865487548854895490549154925493549454955496549754985499550055015502550355045505550655075508550955105511551255135514551555165517551855195520552155225523552455255526552755285529553055315532553355345535553655375538553955405541554255435544554555465547554855495550555155525553555455555556555755585559556055615562556355645565556655675568556955705571557255735574557555765577557855795580558155825583558455855586558755885589559055915592559355945595559655975598559956005601560256035604560556065607560856095610561156125613561456155616561756185619562056215622562356245625562656275628562956305631563256335634563556365637563856395640564156425643564456455646564756485649565056515652565356545655565656575658565956605661566256635664566556665667566856695670567156725673567456755676567756785679568056815682568356845685568656875688568956905691569256935694569556965697569856995700570157025703570457055706570757085709571057115712571357145715571657175718571957205721572257235724572557265727572857295730573157325733573457355736573757385739574057415742574357445745574657475748574957505751575257535754575557565757575857595760576157625763576457655766576757685769577057715772577357745775577657775778577957805781578257835784578557865787578857895790579157925793579457955796579757985799580058015802580358045805580658075808580958105811581258135814581558165817581858195820582158225823582458255826582758285829583058315832583358345835583658375838583958405841584258435844584558465847584858495850585158525853585458555856585758585859586058615862586358645865586658675868586958705871587258735874587558765877587858795880588158825883588458855886588758885889589058915892589358945895589658975898589959005901590259035904590559065907590859095910591159125913591459155916591759185919592059215922592359245925592659275928592959305931593259335934593559365937593859395940594159425943594459455946594759485949595059515952595359545955595659575958595959605961596259635964596559665967596859695970597159725973597459755976597759785979598059815982598359845985598659875988598959905991599259935994599559965997599859996000600160026003600460056006600760086009601060116012601360146015601660176018601960206021602260236024602560266027602860296030603160326033603460356036603760386039604060416042604360446045604660476048604960506051605260536054605560566057605860596060606160626063606460656066606760686069607060716072607360746075607660776078607960806081608260836084608560866087608860896090609160926093609460956096609760986099610061016102610361046105610661076108610961106111611261136114611561166117611861196120612161226123612461256126612761286129613061316132613361346135613661376138613961406141614261436144614561466147614861496150615161526153615461556156615761586159616061616162616361646165616661676168616961706171617261736174617561766177617861796180618161826183618461856186618761886189619061916192619361946195619661976198619962006201620262036204620562066207620862096210621162126213621462156216621762186219622062216222622362246225622662276228622962306231623262336234623562366237623862396240624162426243624462456246624762486249625062516252625362546255625662576258625962606261626262636264626562666267626862696270627162726273627462756276627762786279628062816282628362846285628662876288628962906291629262936294629562966297629862996300630163026303630463056306630763086309631063116312631363146315631663176318631963206321632263236324632563266327632863296330633163326333633463356336633763386339634063416342634363446345634663476348634963506351635263536354635563566357635863596360636163626363636463656366636763686369637063716372637363746375637663776378637963806381638263836384638563866387638863896390639163926393639463956396639763986399640064016402640364046405640664076408640964106411641264136414641564166417641864196420642164226423642464256426642764286429643064316432643364346435643664376438643964406441644264436444644564466447644864496450645164526453645464556456645764586459646064616462646364646465646664676468646964706471647264736474647564766477647864796480648164826483648464856486648764886489649064916492649364946495649664976498649965006501650265036504650565066507650865096510651165126513651465156516651765186519652065216522652365246525652665276528652965306531653265336534653565366537653865396540654165426543654465456546654765486549655065516552655365546555655665576558655965606561656265636564656565666567656865696570657165726573657465756576657765786579658065816582658365846585658665876588658965906591659265936594659565966597659865996600660166026603660466056606660766086609661066116612661366146615661666176618661966206621662266236624662566266627662866296630663166326633663466356636663766386639664066416642664366446645664666476648664966506651665266536654665566566657665866596660666166626663666466656666666766686669667066716672667366746675667666776678667966806681668266836684668566866687668866896690669166926693669466956696669766986699670067016702670367046705670667076708670967106711671267136714671567166717671867196720672167226723672467256726672767286729673067316732673367346735673667376738673967406741674267436744674567466747674867496750675167526753675467556756675767586759676067616762676367646765676667676768676967706771677267736774677567766777677867796780678167826783678467856786678767886789679067916792679367946795679667976798679968006801680268036804680568066807680868096810681168126813681468156816681768186819682068216822682368246825682668276828682968306831683268336834683568366837683868396840684168426843684468456846684768486849685068516852685368546855685668576858685968606861686268636864686568666867686868696870687168726873687468756876687768786879688068816882688368846885688668876888688968906891689268936894689568966897689868996900690169026903690469056906690769086909691069116912691369146915691669176918691969206921692269236924692569266927692869296930693169326933693469356936693769386939694069416942694369446945694669476948694969506951695269536954695569566957695869596960696169626963696469656966696769686969697069716972697369746975697669776978697969806981698269836984698569866987698869896990699169926993699469956996699769986999700070017002700370047005700670077008700970107011701270137014701570167017701870197020702170227023702470257026702770287029703070317032703370347035703670377038703970407041704270437044704570467047704870497050705170527053705470557056705770587059706070617062706370647065706670677068706970707071707270737074707570767077707870797080708170827083708470857086708770887089709070917092709370947095709670977098709971007101710271037104710571067107710871097110711171127113711471157116711771187119712071217122712371247125712671277128712971307131713271337134713571367137713871397140714171427143714471457146714771487149715071517152715371547155715671577158715971607161716271637164716571667167716871697170717171727173717471757176717771787179718071817182718371847185718671877188718971907191719271937194719571967197719871997200720172027203720472057206720772087209721072117212721372147215721672177218721972207221722272237224722572267227722872297230723172327233723472357236723772387239724072417242724372447245724672477248724972507251725272537254725572567257725872597260726172627263726472657266726772687269727072717272727372747275727672777278727972807281728272837284728572867287728872897290729172927293729472957296729772987299730073017302730373047305730673077308730973107311731273137314731573167317731873197320732173227323732473257326732773287329733073317332733373347335733673377338733973407341734273437344734573467347734873497350735173527353735473557356735773587359736073617362736373647365736673677368736973707371737273737374737573767377737873797380738173827383738473857386738773887389739073917392739373947395
  1. /*!
  2. * Copyright 2013-2017 ASIAL CORPORATION
  3. *
  4. * Licensed under the Apache License, Version 2.0 (the "License");
  5. * you may not use this file except in compliance with the License.
  6. * You may obtain a copy of the License at
  7. *
  8. * http://www.apache.org/licenses/LICENSE-2.0
  9. *
  10. * Unless required by applicable law or agreed to in writing, software
  11. * distributed under the License is distributed on an "AS IS" BASIS,
  12. * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  13. * See the License for the specific language governing permissions and
  14. * limitations under the License.
  15. *
  16. */
  17. /*!
  18. * Copyright 2012 Adobe Systems Inc.;
  19. *
  20. * Licensed under the Apache License, Version 2.0 (the "License");
  21. * you may not use this file except in compliance with the License.
  22. * You may obtain a copy of the License at
  23. *
  24. * http://www.apache.org/licenses/LICENSE-2.0
  25. *
  26. * Unless required by applicable law or agreed to in writing, software
  27. * distributed under the License is distributed on an "AS IS" BASIS,
  28. * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  29. * See the License for the specific language governing permissions and
  30. * limitations under the License.
  31. *
  32. */
  33. :root {
  34. /* variables for iOS components */
  35. /* variables for Material Design components */
  36. /* others */
  37. }
  38. html {
  39. height: 100%;
  40. width: 100%;
  41. }
  42. body {
  43. position: absolute;
  44. overflow: hidden;
  45. top: 0;
  46. right: 0;
  47. left: 0;
  48. bottom: 0;
  49. padding: 0;
  50. margin: 0;
  51. -webkit-text-size-adjust: 100%;
  52. touch-action: manipulation;
  53. }
  54. html, body, div, span, applet, object, iframe,
  55. h1, h2, h3, h4, h5, h6, p, blockquote, pre,
  56. a, abbr, acronym, address, big, cite, code,
  57. del, dfn, em, img, ins, kbd, q, s, samp,
  58. small, strike, strong, sub, sup, tt, var,
  59. b, u, i, center, dl, dt, dd, ol, ul, li,
  60. fieldset, form, label, legend,
  61. table, caption, tbody, tfoot, thead, tr, th, td,
  62. article, aside, canvas, details, embed,
  63. figure, figcaption, footer, header, hgroup,
  64. menu, nav, output, ruby, section, summary,
  65. time, mark, audio, video {
  66. -webkit-user-select: none;
  67. -moz-user-select: none;
  68. -ms-user-select: none;
  69. user-select: none;
  70. -webkit-tap-highlight-color: transparent;
  71. -webkit-touch-callout: none;
  72. }
  73. input, textarea, select {
  74. -webkit-user-select: auto;
  75. -ms-user-select: auto;
  76. user-select: auto;
  77. -moz-user-select: text;
  78. -webkit-touch-callout: none;
  79. }
  80. a, button, input, textarea, select {
  81. touch-action: manipulation;
  82. }
  83. input:active, input:focus, textarea:active, textarea:focus, select:active, select:focus {
  84. outline: none;
  85. }
  86. h1 {
  87. font-size: 36px;
  88. }
  89. h2 {
  90. font-size: 30px;
  91. }
  92. h3 {
  93. font-size: 24px;
  94. }
  95. h4, h5, h6 {
  96. font-size: 18px;
  97. }
  98. :root {
  99. }
  100. .page {
  101. font-family: -apple-system, 'Helvetica Neue', 'Helvetica', 'Arial', 'Lucida Grande', sans-serif;
  102. -webkit-font-smoothing: antialiased;
  103. -moz-osx-font-smoothing: grayscale;
  104. font-weight: 400;
  105. background-color: #efeff4;
  106. position: absolute;
  107. top: 0;
  108. left: 0;
  109. right: 0;
  110. bottom: 0;
  111. overflow-x: visible;
  112. overflow-y: hidden;
  113. color: #1f1f21;
  114. -ms-overflow-style: none;
  115. -webkit-font-smoothing: antialiased;
  116. }
  117. .page::-webkit-scrollbar {
  118. display: none;
  119. }
  120. .page__content {
  121. background-color: #efeff4;
  122. position: absolute;
  123. top: 0;
  124. left: 0;
  125. right: 0;
  126. bottom: 0;
  127. box-sizing: border-box;
  128. }
  129. .page__background {
  130. background-color: #efeff4;
  131. position: absolute;
  132. top: 0;
  133. left: 0;
  134. right: 0;
  135. bottom: 0;
  136. box-sizing: border-box;
  137. }
  138. .page--material {
  139. font-family: 'Roboto', 'Noto', sans-serif;
  140. -webkit-font-smoothing: antialiased;
  141. font-weight: 400;
  142. background-color: #eceff1;
  143. }
  144. .page--material__content {
  145. font-family: 'Roboto', 'Noto', sans-serif;
  146. -webkit-font-smoothing: antialiased;
  147. font-weight: 400;
  148. font-weight: 400;
  149. }
  150. .page__content h1,
  151. .page__content h2,
  152. .page__content h3,
  153. .page__content h4,
  154. .page__content h5 {
  155. font-family: 'Roboto', 'Noto', sans-serif;
  156. -webkit-font-smoothing: antialiased;
  157. font-weight: 400;
  158. font-weight: 500;
  159. margin: 0.6em 0;
  160. padding: 0;
  161. }
  162. .page__content h1 {
  163. font-size: 28px;
  164. }
  165. .page__content h2 {
  166. font-size: 24px;
  167. }
  168. .page__content h3 {
  169. font-size: 20px;
  170. }
  171. .page--material__content h1,
  172. .page--material__content h2,
  173. .page--material__content h3,
  174. .page--material__content h4,
  175. .page--material__content h5 {
  176. font-family: 'Roboto', 'Noto', sans-serif;
  177. -webkit-font-smoothing: antialiased;
  178. font-weight: 400;
  179. font-weight: 500;
  180. margin: 0.6em 0;
  181. padding: 0;
  182. }
  183. .page--material__content h1 {
  184. font-size: 28px;
  185. }
  186. .page--material__content h2 {
  187. font-size: 24px;
  188. }
  189. .page--material__content h3 {
  190. font-size: 20px;
  191. }
  192. .page--material__background {
  193. background-color: #eceff1;
  194. }
  195. :root { /* background color active */
  196. }
  197. /*~
  198. name: Switch
  199. category: Switch
  200. elements: ons-switch
  201. markup: |
  202. <label class="switch">
  203. <input type="checkbox" class="switch__input">
  204. <div class="switch__toggle">
  205. <div class="switch__handle"></div>
  206. </div>
  207. </label>
  208. <label class="switch">
  209. <input type="checkbox" class="switch__input" checked>
  210. <div class="switch__toggle">
  211. <div class="switch__handle"></div>
  212. </div>
  213. </label>
  214. <label class="switch">
  215. <input type="checkbox" class="switch__input" disabled>
  216. <div class="switch__toggle">
  217. <div class="switch__handle"></div>
  218. </div>
  219. </label>
  220. */
  221. .switch {
  222. display: inline-block;
  223. vertical-align: top;
  224. box-sizing: border-box;
  225. background-clip: padding-box;
  226. position: relative;
  227. min-width: 51px;
  228. font-size: 17px;
  229. padding: 0 20px;
  230. border: none;
  231. overflow: visible;
  232. width: 51px;
  233. height: 32px;
  234. z-index: 0;
  235. text-align: left;
  236. }
  237. .switch__input {
  238. position: absolute;
  239. right: 0;
  240. top: 0;
  241. left: 0;
  242. bottom: 0;
  243. padding: 0;
  244. border: 0;
  245. background-color: transparent;
  246. z-index: 1;
  247. vertical-align: top;
  248. outline: none;
  249. width: 100%;
  250. height: 100%;
  251. margin: 0;
  252. -webkit-appearance: none;
  253. -moz-appearance: none;
  254. appearance: none;
  255. z-index: 0;
  256. }
  257. /* switch toggle background */
  258. .switch__toggle {
  259. background-color: white;
  260. position: absolute;
  261. top: 0;
  262. left: 0;
  263. right: 0;
  264. bottom: 0;
  265. border-radius: 30px;
  266. transition-property: all;
  267. transition-duration: 0.35s;
  268. transition-timing-function: ease-out;
  269. box-shadow: inset 0 0 0 2px #e5e5e5;
  270. }
  271. /* switch toggle circle */
  272. .switch__handle {
  273. box-sizing: border-box;
  274. background-clip: padding-box;
  275. position: absolute;
  276. content: '';
  277. border-radius: 28px;
  278. height: 28px;
  279. width: 28px;
  280. background-color: white;
  281. left: 1px;
  282. top: 2px;
  283. transition-property: all;
  284. transition-duration: 0.35s;
  285. transition-timing-function: cubic-bezier(.59, .01, .5, .99);
  286. box-shadow: 0 0 1px 0 rgba(0, 0, 0, .25), 0 3px 2px rgba(0, 0, 0, .25);
  287. }
  288. .switch--active__handle {
  289. transition: none;
  290. }
  291. :checked + .switch__toggle {
  292. box-shadow: inset 0 0 0 2px #44db5e;
  293. background-color: #44db5e;
  294. }
  295. :checked + .switch__toggle > .switch__handle {
  296. left: 21px;
  297. box-shadow: 0 3px 2px rgba(0, 0, 0, .25);
  298. }
  299. :disabled + .switch__toggle {
  300. opacity: 0.3;
  301. cursor: default;
  302. pointer-events: none;
  303. }
  304. .switch__touch {
  305. position: absolute;
  306. top: -5px;
  307. bottom: -5px;
  308. left: -10px;
  309. right: -10px;
  310. }
  311. /*~
  312. name: Material Switch
  313. category: Switch
  314. elements: ons-switch
  315. markup: |
  316. <label class="switch switch--material">
  317. <input type="checkbox" class="switch__input switch--material__input">
  318. <div class="switch__toggle switch--material__toggle">
  319. <div class="switch__handle switch--material__handle">
  320. </div>
  321. </div>
  322. </label>
  323. <label class="switch switch--material">
  324. <input type="checkbox" class="switch__input switch--material__input" checked>
  325. <div class="switch__toggle switch--material__toggle">
  326. <div class="switch__handle switch--material__handle">
  327. </div>
  328. </div>
  329. </label>
  330. <label class="switch switch--material">
  331. <input type="checkbox" class="switch__input switch--material__input" disabled>
  332. <div class="switch__toggle switch--material__toggle">
  333. <div class="switch__handle switch--material__handle">
  334. </div>
  335. </div>
  336. </label>
  337. */
  338. .switch--material {
  339. width: 36px;
  340. height: 24px;
  341. padding: 0 10px;
  342. min-width: 36px;
  343. }
  344. .switch--material__toggle {
  345. background-color: #b0afaf;
  346. margin-top: 5px;
  347. height: 14px;
  348. box-shadow: none;
  349. }
  350. .switch--material__input {
  351. position: absolute;
  352. right: 0;
  353. top: 0;
  354. left: 0;
  355. bottom: 0;
  356. padding: 0;
  357. border: 0;
  358. background-color: transparent;
  359. z-index: 1;
  360. vertical-align: top;
  361. outline: none;
  362. width: 100%;
  363. height: 100%;
  364. margin: 0;
  365. -webkit-appearance: none;
  366. -moz-appearance: none;
  367. appearance: none;
  368. z-index: 0;
  369. }
  370. .switch--material__handle {
  371. background-color: #f1f1f1;
  372. left: 0;
  373. margin-top: -5px;
  374. width: 20px;
  375. height: 20px;
  376. box-shadow:
  377. 0 4px 5px 0 rgba(0, 0, 0, .14),
  378. 0 1px 10px 0 rgba(0, 0, 0, .12),
  379. 0 2px 4px -1px rgba(0, 0, 0, .4);
  380. }
  381. :checked + .switch--material__toggle {
  382. background-color: rgba(55, 71, 79, 0.5);
  383. box-shadow: none;
  384. }
  385. :checked + .switch--material__toggle > .switch--material__handle {
  386. left: 16px;
  387. background-color: #37474f;
  388. box-shadow:
  389. 0 2px 2px 0 rgba(0, 0, 0, .14),
  390. 0 1px 5px 0 rgba(0, 0, 0, .12),
  391. 0 3px 1px -2px rgba(0, 0, 0, .2);
  392. }
  393. :disabled + .switch--material__toggle {
  394. opacity: 0.3;
  395. cursor: default;
  396. pointer-events: none;
  397. }
  398. .switch--material__handle:before {
  399. background: transparent;
  400. content: '';
  401. display: block;
  402. width: 100%;
  403. height: 100%;
  404. border-radius: 50%;
  405. z-index: 0;
  406. box-shadow: 0 0 0 0 rgba(0, 0, 0, .12);
  407. transition: box-shadow 0.1s linear;
  408. }
  409. .switch--material__toggle > .switch--active__handle:before {
  410. box-shadow: 0 0 0 14px rgba(0, 0, 0, .12);
  411. }
  412. :checked + .switch--material__toggle > .switch--active__handle:before {
  413. box-shadow: 0 0 0 14px rgba(55, 71, 79, 0.2);
  414. }
  415. .switch--material__touch {
  416. position: absolute;
  417. top: -10px;
  418. bottom: -10px;
  419. left: -15px;
  420. right: -15px;
  421. }
  422. /*~
  423. name: Range
  424. category: Range
  425. elements: ons-range
  426. markup: |
  427. <div class="range">
  428. <input type="range" class="range__input">
  429. <input type="range" class="range__focus-ring">
  430. </div>
  431. <div class="range range--disabled">
  432. <input type="range" class="range__input" disabled>
  433. <input type="range" class="range__focus-ring" disabled>
  434. </div>
  435. */
  436. .range {
  437. display: inline-block;
  438. position: relative;
  439. width: 100px;
  440. height: 30px;
  441. margin: 0;
  442. padding: 0;
  443. background-image: linear-gradient(#a4aab3, #a4aab3);
  444. background-position: left center;
  445. background-size: 100% 2px;
  446. background-repeat: no-repeat;
  447. background-color: transparent;
  448. }
  449. .range__input {
  450. box-sizing: border-box;
  451. background-clip: padding-box;
  452. padding: 0;
  453. margin: 0;
  454. font: inherit;
  455. color: inherit;
  456. background: transparent;
  457. border: none;
  458. vertical-align: top;
  459. outline: none;
  460. line-height: 1;
  461. -webkit-appearance: none;
  462. -moz-appearance: none;
  463. appearance: none;
  464. background-image: linear-gradient(#0076ff, #0076ff);
  465. background-position: left center;
  466. background-size: 0% 2px;
  467. background-repeat: no-repeat;
  468. height: 30px;
  469. position: relative;
  470. z-index: 1;
  471. width: 100%;
  472. }
  473. .range__input::-moz-range-track {
  474. position: relative;
  475. border: none;
  476. background: none;
  477. box-shadow: none;
  478. top: 0;
  479. margin: 0;
  480. padding: 0;
  481. }
  482. .range__input::-ms-track {
  483. position: relative;
  484. border: none;
  485. background-color: #a4aab3;
  486. height: 0;
  487. border-radius: 50%;
  488. }
  489. .range__input::-webkit-slider-thumb {
  490. cursor: pointer;
  491. position: relative;
  492. height: 28px;
  493. width: 28px;
  494. background-color: #fff;
  495. border: none;
  496. box-shadow: 0 0 1px 0 rgba(0, 0, 0, .25), 0 3px 2px rgba(0, 0, 0, .25);
  497. border-radius: 50%;
  498. margin: 0;
  499. padding: 0;
  500. box-sizing: border-box;
  501. -webkit-appearance: none;
  502. appearance: none;
  503. top: 0;
  504. z-index: 1;
  505. }
  506. .range__input::-moz-range-thumb {
  507. cursor: pointer;
  508. position: relative;
  509. height: 28px;
  510. width: 28px;
  511. background-color: #fff;
  512. border: none;
  513. box-shadow: 0 0 1px 0 rgba(0, 0, 0, .25), 0 3px 2px rgba(0, 0, 0, .25);
  514. border-radius: 50%;
  515. margin: 0;
  516. padding: 0;
  517. }
  518. .range__input::-ms-thumb {
  519. cursor: pointer;
  520. position: relative;
  521. height: 28px;
  522. width: 28px;
  523. background-color: #fff;
  524. border: none;
  525. box-shadow: 0 0 1px 0 rgba(0, 0, 0, .25), 0 3px 2px rgba(0, 0, 0, .25);
  526. border-radius: 50%;
  527. margin: 0;
  528. padding: 0;
  529. top: 0;
  530. }
  531. .range__input::-ms-fill-lower {
  532. height: 2px;
  533. background-color: #0076ff;
  534. }
  535. .range__input::-ms-tooltip {
  536. display: none;
  537. }
  538. .range__input:disabled {
  539. opacity: 1;
  540. pointer-events: none;
  541. }
  542. .range__focus-ring {
  543. pointer-events: none;
  544. top: 0;
  545. left: 0;
  546. display: none;
  547. box-sizing: border-box;
  548. background-clip: padding-box;
  549. padding: 0;
  550. margin: 0;
  551. font: inherit;
  552. color: inherit;
  553. background: transparent;
  554. border: none;
  555. vertical-align: top;
  556. outline: none;
  557. line-height: 1;
  558. -webkit-appearance: none;
  559. -moz-appearance: none;
  560. appearance: none;
  561. background: none;
  562. height: 30px;
  563. position: absolute;
  564. z-index: 0;
  565. width: 100%;
  566. }
  567. .range--disabled {
  568. opacity: 0.3;
  569. cursor: default;
  570. pointer-events: none;
  571. pointer-events: none;
  572. }
  573. /*~
  574. name: Material Range
  575. category: Range
  576. elements: ons-range
  577. markup: |
  578. <div class="range range--material">
  579. <input type="range" class="range__input range--material__input" min="0" max="100">
  580. <!-- <input type="range" class="range__focus-ring range--material__focus-ring"> -->
  581. </div>
  582. <div class="range range--material range--disabled">
  583. <input type="range" class="range__input range--material__input" disabled>
  584. <!-- <input type="range" class="range__focus-ring range--material__focus-ring" disabled> -->
  585. </div>
  586. */
  587. .range--material {
  588. position: relative;
  589. background-image: linear-gradient(#bdbdbd, #bdbdbd);
  590. }
  591. .range--material__input {
  592. background-image: linear-gradient(#31313a, #31313a);
  593. background-position: center left;
  594. background-size: 0% 2px;
  595. }
  596. .range--material__focus-ring {
  597. display: block;
  598. }
  599. .range--material__focus-ring::-webkit-slider-thumb {
  600. -webkit-appearance: none;
  601. appearance: none;
  602. width: 14px;
  603. height: 14px;
  604. border: none;
  605. box-shadow: 0 0 0 9px #31313a;
  606. background-color: #31313a;
  607. border-radius: 50%;
  608. opacity: 0;
  609. transition: opacity 0.25s ease-out, -webkit-transform 0.25s ease-out;
  610. transition: opacity 0.25s ease-out, transform 0.25s ease-out;
  611. transition: opacity 0.25s ease-out, transform 0.25s ease-out, -webkit-transform 0.25s ease-out;
  612. }
  613. .range--material__input.range__input--active + .range--material__focus-ring::-webkit-slider-thumb {
  614. opacity: 0.2;
  615. -webkit-transform: scale(1.5, 1.5, 1.5);
  616. transform: scale(1.5, 1.5, 1.5);
  617. }
  618. .range--material__input::-webkit-slider-thumb {
  619. position: relative;
  620. box-sizing: border-box;
  621. border: none;
  622. background-color: transparent;
  623. width: 14px;
  624. height: 32px;
  625. border-radius: 0;
  626. box-shadow: none;
  627. background-image: radial-gradient(circle farthest-corner, #31313a 0%, #31313a 6.6px, transparent 7px);
  628. transition: -webkit-transform 0.1s linear;
  629. transition: transform 0.1s linear;
  630. transition: transform 0.1s linear, -webkit-transform 0.1s linear;
  631. overflow: visible;
  632. }
  633. .range--material__input[_zero]::-webkit-slider-thumb {
  634. background-image: radial-gradient(circle farthest-corner, #f2f2f2 0%, #f2f2f2 4px, #bdbdbd 4px, #bdbdbd 6.4px, transparent 7px);
  635. }
  636. .range--material__input[_zero] + .range--material__focus-ring::-webkit-slider-thumb {
  637. box-shadow: 0 0 0 9px #bdbdbd;
  638. }
  639. .range--material__input::-moz-range-track {
  640. background: none;
  641. }
  642. .range--material__input::-moz-range-thumb,
  643. .range--material__input:focus::-moz-range-thumb {
  644. box-sizing: border-box;
  645. border: none;
  646. width: 14px;
  647. height: 32px;
  648. border-radius: 0;
  649. background-color: transparent;
  650. background-image: -moz-radial-gradient(circle farthest-corner, #31313a 0%, #31313a 6.6px, transparent 7px); /* stylelint-disable-line */
  651. box-shadow: none;
  652. }
  653. .range--material__input:active::-webkit-slider-thumb,
  654. .range--material__input.range__input--active::-webkit-slider-thumb { /* NOTICE: ":active" does not work on Android Chrome. */
  655. -webkit-transform: scale(1.5);
  656. transform: scale(1.5);
  657. transition: -webkit-transform 0.1s linear;
  658. transition: transform 0.1s linear;
  659. transition: transform 0.1s linear, -webkit-transform 0.1s linear;
  660. }
  661. /* stylelint-disable */
  662. .range--disabled.range--material { /* stylelint-enable */
  663. opacity: 1;
  664. }
  665. /* stylelint-disable */
  666. .range--disabled > .range--material__input { /* stylelint-enable */
  667. background-image: none;
  668. }
  669. .range--material__input:disabled::-webkit-slider-thumb {
  670. background-image: radial-gradient(circle farthest-corner, #b0b0b0 0%, #b0b0b0 4px, #eeeeee 4.4px, #eeeeee 7.6px, transparent 7.6px);
  671. transition: none;
  672. }
  673. .range--material__input:disabled::-moz-range-thumb {
  674. background-image: -moz-radial-gradient(circle farthest-corner, #b0b0b0 0%, #b0b0b0 4px, #eeeeee 4.4px, #eeeeee 7.6px, transparent 7.6px); /* stylelint-disable-line */
  675. transition: none;
  676. }
  677. /*~
  678. name: Notification
  679. category: Notification
  680. markup: |
  681. <span class="notification">1</span>
  682. <span class="notification">10</span>
  683. <span class="notification">999</span>
  684. */
  685. .notification {
  686. position: relative;
  687. display: inline-block;
  688. vertical-align: top;
  689. font: inherit;
  690. border: none;
  691. box-sizing: border-box;
  692. background-clip: padding-box;
  693. padding: 0;
  694. margin: 0;
  695. font: inherit;
  696. color: inherit;
  697. background: transparent;
  698. border: none;
  699. line-height: normal;
  700. font-family: -apple-system, 'Helvetica Neue', 'Helvetica', 'Arial', 'Lucida Grande', sans-serif;
  701. -webkit-font-smoothing: antialiased;
  702. -moz-osx-font-smoothing: grayscale;
  703. font-weight: 400;
  704. cursor: default;
  705. -webkit-user-select: none;
  706. -moz-user-select: none;
  707. -ms-user-select: none;
  708. user-select: none;
  709. text-overflow: ellipsis;
  710. white-space: nowrap;
  711. overflow: hidden;
  712. text-decoration: none;
  713. margin: 0;
  714. padding: 0 4px;
  715. width: auto;
  716. height: 19px;
  717. border-radius: 19px;
  718. background-color: #fe3824;
  719. color: white;
  720. text-align: center;
  721. font-size: 16px;
  722. min-width: 19px;
  723. line-height: 19px;
  724. font-weight: 400;
  725. }
  726. .notification:empty {
  727. display: none;
  728. }
  729. /*~
  730. name: Material Notification
  731. category: Notification
  732. markup: |
  733. <span class="notification notification--material">1</span>
  734. <span class="notification notification--material">10</span>
  735. <span class="notification notification--material">999</span>
  736. */
  737. .notification--material {
  738. font-family: 'Roboto', 'Noto', sans-serif;
  739. -webkit-font-smoothing: antialiased;
  740. font-weight: 400;
  741. background-color: #e91e63;
  742. font-size: 16px;
  743. font-weight: 500;
  744. color: white;
  745. }
  746. /*~
  747. name: Toolbar
  748. category: Toolbar
  749. elements: ons-toolbar
  750. markup: |
  751. <div class="toolbar">
  752. <div class="toolbar__center">Navigation Bar</div>
  753. </div>
  754. */
  755. .toolbar {
  756. font-family: -apple-system, 'Helvetica Neue', 'Helvetica', 'Arial', 'Lucida Grande', sans-serif;
  757. -webkit-font-smoothing: antialiased;
  758. -moz-osx-font-smoothing: grayscale;
  759. font-weight: 400;
  760. box-sizing: border-box;
  761. background-clip: padding-box;
  762. white-space: nowrap;
  763. overflow: hidden;
  764. word-spacing: 0;
  765. padding: 0;
  766. margin: 0;
  767. font: inherit;
  768. color: inherit;
  769. background: transparent;
  770. border: none;
  771. line-height: normal;
  772. cursor: default;
  773. -webkit-user-select: none;
  774. -moz-user-select: none;
  775. -ms-user-select: none;
  776. user-select: none;
  777. z-index: 2;
  778. display: -webkit-box;
  779. display: -webkit-flex;
  780. display: flex;
  781. -webkit-box-align: stretch;
  782. -webkit-align-items: stretch;
  783. align-items: stretch;
  784. -webkit-flex-wrap: nowrap;
  785. flex-wrap: nowrap;
  786. height: 44px;
  787. padding-left: 0;
  788. padding-right: 0;
  789. background: #fafafa;
  790. color: #1f1f21;
  791. box-shadow: none;
  792. font-weight: 400;
  793. width: 100%;
  794. white-space: nowrap;
  795. border-bottom: none;
  796. background-size: 100% 1px;
  797. background-repeat: no-repeat;
  798. background-position: bottom;
  799. background-image: linear-gradient(0deg, #b2b2b2, #b2b2b2 100%);
  800. }
  801. @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) {
  802. .toolbar {
  803. background-image: linear-gradient(0deg, #b2b2b2, #b2b2b2 50%, transparent 50%);
  804. }
  805. }
  806. .toolbar__bg {
  807. background: #fafafa;
  808. }
  809. .toolbar__item {
  810. box-sizing: border-box;
  811. background-clip: padding-box;
  812. padding: 0;
  813. margin: 0;
  814. font: inherit;
  815. color: inherit;
  816. background: transparent;
  817. border: none;
  818. line-height: normal;
  819. height: 44px;
  820. overflow: visible;
  821. display: block;
  822. vertical-align: middle;
  823. }
  824. .toolbar__left {
  825. box-sizing: border-box;
  826. background-clip: padding-box;
  827. padding: 0;
  828. margin: 0;
  829. font: inherit;
  830. color: inherit;
  831. background: transparent;
  832. border: none;
  833. line-height: normal;
  834. max-width: 50%;
  835. width: 27%;
  836. text-align: left;
  837. line-height: 44px;
  838. }
  839. .toolbar__right {
  840. box-sizing: border-box;
  841. background-clip: padding-box;
  842. padding: 0;
  843. margin: 0;
  844. font: inherit;
  845. color: inherit;
  846. background: transparent;
  847. border: none;
  848. line-height: normal;
  849. max-width: 50%;
  850. width: 27%;
  851. text-align: right;
  852. line-height: 44px;
  853. }
  854. .toolbar__center {
  855. box-sizing: border-box;
  856. background-clip: padding-box;
  857. padding: 0;
  858. margin: 0;
  859. font: inherit;
  860. color: inherit;
  861. background: transparent;
  862. border: none;
  863. line-height: normal;
  864. width: 46%;
  865. text-align: center;
  866. line-height: 44px;
  867. font-size: 17px;
  868. font-weight: 500;
  869. color: #1f1f21;
  870. }
  871. .toolbar__title {
  872. line-height: 44px;
  873. font-size: 17px;
  874. font-weight: 500;
  875. color: #1f1f21;
  876. margin: 0;
  877. padding: 0;
  878. overflow: visible;
  879. }
  880. .toolbar__center:first-child:last-child {
  881. width: 100%;
  882. }
  883. /*~
  884. name: Toolbar Item
  885. category: Toolbar
  886. elements: ons-toolbar ons-toolbar-button
  887. markup: |
  888. <div class="toolbar">
  889. <div class="toolbar__left">
  890. <span class="toolbar-button">
  891. <i class="ion-navicon" style="font-size:32px; vertical-align:-6px;"></i>
  892. </span>
  893. </div>
  894. <div class="toolbar__center">
  895. Navigation Bar
  896. </div>
  897. <div class="toolbar__right">
  898. <span class="toolbar-button">Label</span>
  899. </div>
  900. </div>
  901. */
  902. /*~
  903. name: Toolbar with Outline Button
  904. category: Toolbar
  905. elements: ons-toolbar ons-toolbar-button
  906. markup: |
  907. <!-- Prerequisite=This example use ionicons(http://ionicons.com) to display icons. -->
  908. <div class="toolbar">
  909. <div class="toolbar__left">
  910. <span class="toolbar-button toolbar-button--outline">
  911. <i class="ion-navicon" style="font-size:32px; vertical-align:-6px;"></i>
  912. </span>
  913. </div>
  914. <div class="toolbar__center">
  915. Title
  916. </div>
  917. <div class="toolbar__right">
  918. <span class="toolbar-button toolbar-button--outline">Button</span>
  919. </div>
  920. </div>
  921. */
  922. /*~
  923. name: Bottom Bar
  924. category: Toolbar
  925. elements: ons-bottom-toolbar
  926. markup: |
  927. <div class="bottom-bar">
  928. <div class="bottom-bar__line-height" style="text-align:center">Bottom Toolbar</div>
  929. </div>
  930. */
  931. .bottom-bar {
  932. font-family: -apple-system, 'Helvetica Neue', 'Helvetica', 'Arial', 'Lucida Grande', sans-serif;
  933. -webkit-font-smoothing: antialiased;
  934. -moz-osx-font-smoothing: grayscale;
  935. font-weight: 400;
  936. box-sizing: border-box;
  937. background-clip: padding-box;
  938. white-space: nowrap;
  939. overflow: hidden;
  940. word-spacing: 0;
  941. padding: 0;
  942. margin: 0;
  943. font: inherit;
  944. color: inherit;
  945. background: transparent;
  946. border: none;
  947. line-height: normal;
  948. cursor: default;
  949. -webkit-user-select: none;
  950. -moz-user-select: none;
  951. -ms-user-select: none;
  952. user-select: none;
  953. z-index: 2;
  954. display: block;
  955. height: 44px;
  956. padding-left: 0;
  957. padding-right: 0;
  958. background: #fafafa;
  959. color: #1f1f21;
  960. box-shadow: none;
  961. font-weight: 400;
  962. border-bottom: none;
  963. border-top: 1px solid #b2b2b2;
  964. position: absolute;
  965. bottom: 0;
  966. right: 0;
  967. left: 0;
  968. border-top: none;
  969. background-size: 100% 1px;
  970. background-repeat: no-repeat;
  971. background-position: top;
  972. background-image: linear-gradient(180deg, #b2b2b2, #b2b2b2 100%);
  973. }
  974. @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) {
  975. .bottom-bar {
  976. background-image: linear-gradient(180deg, #b2b2b2, #b2b2b2 50%, transparent 50%);
  977. }
  978. }
  979. .bottom-bar__line-height {
  980. line-height: 44px;
  981. padding-bottom: 0;
  982. padding-top: 0;
  983. }
  984. .bottom-bar--aligned {
  985. display: -webkit-box;
  986. display: -webkit-flex;
  987. display: flex;
  988. -webkit-flex-wrap: nowrap;
  989. flex-wrap: nowrap;
  990. line-height: 44px;
  991. }
  992. .bottom-bar--transparent {
  993. background-color: transparent;
  994. background-image: none;
  995. border: none;
  996. }
  997. /*~
  998. name: Toolbar with Segment
  999. category: Toolbar
  1000. elements: ons-toolbar
  1001. markup: |
  1002. <div class="toolbar">
  1003. <div class="toolbar__center">
  1004. <div class="segment" style="width:200px;margin:7px 50px;">
  1005. <div class="segment__item">
  1006. <input type="radio" class="segment__input" name="navi-segment-a" checked>
  1007. <div class="segment__button">One</div>
  1008. </div>
  1009. <div class="segment__item">
  1010. <input type="radio" class="segment__input" name="navi-segment-a">
  1011. <div class="segment__button">Two</div>
  1012. </div>
  1013. </div>
  1014. </div>
  1015. </div>
  1016. */
  1017. /*~
  1018. name: Material Toolbar
  1019. category: Toolbar
  1020. elements: ons-toolbar
  1021. markup: |
  1022. <div class="toolbar toolbar--material">
  1023. <div class="toolbar__center toolbar--material__center">
  1024. Title
  1025. </div>
  1026. </div>
  1027. */
  1028. .toolbar--material {
  1029. display: -webkit-box;
  1030. display: -webkit-flex;
  1031. display: flex;
  1032. -webkit-flex-wrap: nowrap;
  1033. flex-wrap: nowrap;
  1034. -webkit-box-pack: justify;
  1035. -webkit-justify-content: space-between;
  1036. justify-content: space-between;
  1037. height: 56px;
  1038. border-bottom: 0;
  1039. box-shadow: 0 1px 5px rgba(0, 0, 0, .3);
  1040. padding: 0;
  1041. background-color: #ffffff;
  1042. background-size: 0;
  1043. }
  1044. /*~
  1045. name: No Shadow Toolbar
  1046. category: Toolbar
  1047. elements: ons-toolbar
  1048. markup: |
  1049. <div class="toolbar toolbar--noshadow">
  1050. <div class="toolbar__left">
  1051. <span class="toolbar-button">
  1052. <i class="ion-navicon" style="font-size:32px; vertical-align:-6px;"></i>
  1053. </span>
  1054. </div>
  1055. <div class="toolbar__center">
  1056. Navigation Bar
  1057. </div>
  1058. <div class="toolbar__right">
  1059. <span class="toolbar-button">Label</span>
  1060. </div>
  1061. </div>
  1062. */
  1063. .toolbar--noshadow {
  1064. box-shadow: none;
  1065. background-image: none;
  1066. border-bottom: none;
  1067. }
  1068. .toolbar--material__left, .toolbar--material__right {
  1069. font-family: 'Roboto', 'Noto', sans-serif;
  1070. -webkit-font-smoothing: antialiased;
  1071. font-weight: 400;
  1072. font-size: 20px;
  1073. font-weight: 500;
  1074. color: #31313a;
  1075. height: 56px;
  1076. min-width: 72px;
  1077. width: auto;
  1078. line-height: 56px;
  1079. }
  1080. .toolbar--material__center {
  1081. font-family: 'Roboto', 'Noto', sans-serif;
  1082. -webkit-font-smoothing: antialiased;
  1083. font-weight: 400;
  1084. font-size: 20px;
  1085. font-weight: 500;
  1086. color: #31313a;
  1087. height: 56px;
  1088. width: auto;
  1089. -webkit-box-flex: 1;
  1090. -webkit-flex-grow: 1;
  1091. flex-grow: 1;
  1092. overflow: hidden;
  1093. text-overflow: ellipsis;
  1094. text-align: left;
  1095. line-height: 56px;
  1096. }
  1097. .toolbar--material__center:first-child {
  1098. margin-left: 16px;
  1099. }
  1100. .toolbar--material__center:last-child {
  1101. margin-right: 16px;
  1102. }
  1103. .toolbar--material__left:empty, .toolbar--material__right:empty {
  1104. min-width: 16px;
  1105. }
  1106. /*~
  1107. name: Material Toolbar with Icons
  1108. category: Toolbar
  1109. elements: ons-toolbar
  1110. markup: |
  1111. <div class="toolbar toolbar--material">
  1112. <div class="toolbar__left toolbar--material__left">
  1113. <span class="toolbar-button toolbar-button--material">
  1114. <i class="zmdi zmdi-menu"></i>
  1115. </span>
  1116. </div>
  1117. <div class="toolbar__center toolbar--material__center">
  1118. Title
  1119. </div>
  1120. <div class="toolbar__right toolbar--material__right">
  1121. <span class="toolbar-button toolbar-button--material">
  1122. <i class="zmdi zmdi-search"></i>
  1123. </span>
  1124. <span class="toolbar-button toolbar-button--material">
  1125. <i class="zmdi zmdi-favorite"></i>
  1126. </span>
  1127. <span class="toolbar-button toolbar-button--material">
  1128. <i class="zmdi zmdi-more-vert"></i>
  1129. </span>
  1130. </div>
  1131. </div>
  1132. */
  1133. /*~
  1134. name: Transparent Toolbar
  1135. category: Toolbar
  1136. elements: ons-toolbar
  1137. markup: |
  1138. <div class="toolbar toolbar--transparent">
  1139. <div class="toolbar__left">
  1140. <span class="toolbar-button">
  1141. <i class="ion-navicon" style="font-size:32px; vertical-align:-6px;"></i>
  1142. </span>
  1143. </div>
  1144. <div class="toolbar__center">
  1145. Navigation Bar
  1146. </div>
  1147. <div class="toolbar__right">
  1148. <span class="toolbar-button">Label</span>
  1149. </div>
  1150. </div>
  1151. */
  1152. .toolbar--transparent {
  1153. background-color: transparent;
  1154. box-shadow: none;
  1155. background-image: none;
  1156. border-bottom: none;
  1157. }
  1158. /*~
  1159. name: Button
  1160. category: Button
  1161. elements: ons-button
  1162. markup: |
  1163. <button class="button">Button</button>
  1164. <button class="button" disabled>Button</button>
  1165. */
  1166. .button {
  1167. position: relative;
  1168. display: inline-block;
  1169. box-sizing: border-box;
  1170. background-clip: padding-box;
  1171. padding: 0;
  1172. margin: 0;
  1173. font: inherit;
  1174. color: inherit;
  1175. background: transparent;
  1176. border: none;
  1177. line-height: normal;
  1178. font-family: -apple-system, 'Helvetica Neue', 'Helvetica', 'Arial', 'Lucida Grande', sans-serif;
  1179. -webkit-font-smoothing: antialiased;
  1180. -moz-osx-font-smoothing: grayscale;
  1181. font-weight: 400;
  1182. cursor: default;
  1183. -webkit-user-select: none;
  1184. -moz-user-select: none;
  1185. -ms-user-select: none;
  1186. user-select: none;
  1187. text-overflow: ellipsis;
  1188. white-space: nowrap;
  1189. overflow: hidden;
  1190. height: auto;
  1191. text-decoration: none;
  1192. padding: 4px 10px;
  1193. font-size: 17px;
  1194. line-height: 32px;
  1195. letter-spacing: 0;
  1196. color: white;
  1197. vertical-align: middle;
  1198. background-color: #0076ff;
  1199. border: 0 solid currentColor;
  1200. border-radius: 3px;
  1201. transition: none;
  1202. }
  1203. .button::-moz-focus-inner {
  1204. outline: 0;
  1205. }
  1206. .button:hover {
  1207. transition: none;
  1208. }
  1209. .button:active {
  1210. background-color: #0076ff;
  1211. transition: none;
  1212. opacity: 0.2;
  1213. }
  1214. .button:focus {
  1215. outline: 0;
  1216. }
  1217. .button:disabled, .button[disabled] {
  1218. opacity: 0.3;
  1219. cursor: default;
  1220. pointer-events: none;
  1221. }
  1222. /*~
  1223. name: Outline Button
  1224. category: Button
  1225. elements: ons-button
  1226. markup: |
  1227. <button class="button button--outline">Button</button>
  1228. <button class="button button--outline" disabled>Button</button>
  1229. */
  1230. .button--outline {
  1231. background-color: transparent;
  1232. border: 1px solid #0076ff;
  1233. color: #0076ff;
  1234. }
  1235. .button--outline:active {
  1236. background-color: rgb(179, 214, 255);
  1237. border: 1px solid #0076ff;
  1238. color: #0076ff;
  1239. opacity: 1;
  1240. }
  1241. .button--outline:hover {
  1242. border: 1px solid #0076ff;
  1243. transition: 0;
  1244. }
  1245. /*~
  1246. name: Light Button
  1247. category: Button
  1248. elements: ons-button
  1249. markup: |
  1250. <button class="button button--light">Button</button>
  1251. <button class="button button--light" disabled>Button</button>
  1252. */
  1253. .button--light {
  1254. background-color: transparent;
  1255. color: rgba(0, 0, 0, 0.4);
  1256. border: 1px solid rgba(0, 0, 0, 0.2);
  1257. }
  1258. .button--light:active {
  1259. background-color: rgba(0, 0, 0, 0.05);
  1260. color: rgba(0, 0, 0, 0.4);
  1261. border: 1px solid rgba(0, 0, 0, 0.2);
  1262. opacity: 1;
  1263. }
  1264. /*~
  1265. name: Quiet Button
  1266. category: Button
  1267. elements: ons-button
  1268. markup: |
  1269. <button class="button--quiet">Button</button>
  1270. <button class="button--quiet" disabled>Button</button>
  1271. */
  1272. .button--quiet {
  1273. position: relative;
  1274. display: inline-block;
  1275. box-sizing: border-box;
  1276. background-clip: padding-box;
  1277. padding: 0;
  1278. margin: 0;
  1279. font: inherit;
  1280. color: inherit;
  1281. background: transparent;
  1282. border: none;
  1283. line-height: normal;
  1284. font-family: -apple-system, 'Helvetica Neue', 'Helvetica', 'Arial', 'Lucida Grande', sans-serif;
  1285. -webkit-font-smoothing: antialiased;
  1286. -moz-osx-font-smoothing: grayscale;
  1287. font-weight: 400;
  1288. cursor: default;
  1289. -webkit-user-select: none;
  1290. -moz-user-select: none;
  1291. -ms-user-select: none;
  1292. user-select: none;
  1293. text-overflow: ellipsis;
  1294. white-space: nowrap;
  1295. overflow: hidden;
  1296. height: auto;
  1297. text-decoration: none;
  1298. padding: 4px 10px;
  1299. font-size: 17px;
  1300. line-height: 32px;
  1301. letter-spacing: 0;
  1302. color: white;
  1303. vertical-align: middle;
  1304. background-color: #0076ff;
  1305. border: 0 solid currentColor;
  1306. border-radius: 3px;
  1307. transition: none;
  1308. background: transparent;
  1309. border: 1px solid transparent;
  1310. box-shadow: none;
  1311. background: transparent;
  1312. color: #0076ff;
  1313. border: none;
  1314. }
  1315. .button--quiet:disabled,
  1316. .button--quiet[disabled] {
  1317. opacity: 0.3;
  1318. cursor: default;
  1319. pointer-events: none;
  1320. border: none;
  1321. }
  1322. .button--quiet:hover {
  1323. transition: none;
  1324. }
  1325. .button--quiet:focus {
  1326. outline: 0;
  1327. }
  1328. .button--quiet:active {
  1329. background-color: transparent;
  1330. border: none;
  1331. transition: none;
  1332. opacity: 0.2;
  1333. color: #0076ff;
  1334. }
  1335. /*~
  1336. name: Call To Action Button
  1337. category: Button
  1338. elements: ons-button
  1339. markup: |
  1340. <button class="button--cta">Button</button>
  1341. <button class="button--cta" disabled>Button</button>
  1342. */
  1343. .button--cta {
  1344. position: relative;
  1345. display: inline-block;
  1346. box-sizing: border-box;
  1347. background-clip: padding-box;
  1348. padding: 0;
  1349. margin: 0;
  1350. font: inherit;
  1351. color: inherit;
  1352. background: transparent;
  1353. border: none;
  1354. line-height: normal;
  1355. font-family: -apple-system, 'Helvetica Neue', 'Helvetica', 'Arial', 'Lucida Grande', sans-serif;
  1356. -webkit-font-smoothing: antialiased;
  1357. -moz-osx-font-smoothing: grayscale;
  1358. font-weight: 400;
  1359. cursor: default;
  1360. -webkit-user-select: none;
  1361. -moz-user-select: none;
  1362. -ms-user-select: none;
  1363. user-select: none;
  1364. text-overflow: ellipsis;
  1365. white-space: nowrap;
  1366. overflow: hidden;
  1367. height: auto;
  1368. text-decoration: none;
  1369. padding: 4px 10px;
  1370. font-size: 17px;
  1371. line-height: 32px;
  1372. letter-spacing: 0;
  1373. color: white;
  1374. vertical-align: middle;
  1375. background-color: #0076ff;
  1376. border: 0 solid currentColor;
  1377. border-radius: 3px;
  1378. transition: none;
  1379. border: none;
  1380. background-color: #25a6d9;
  1381. color: white;
  1382. }
  1383. .button--cta:hover {
  1384. transition: none;
  1385. }
  1386. .button--cta:focus {
  1387. outline: 0;
  1388. }
  1389. .button--cta:active {
  1390. color: white;
  1391. background-color: #25a6d9;
  1392. transition: none;
  1393. opacity: 0.2;
  1394. }
  1395. .button--cta:disabled,
  1396. .button--cta[disabled] {
  1397. opacity: 0.3;
  1398. cursor: default;
  1399. pointer-events: none;
  1400. }
  1401. /*
  1402. name: Large Button
  1403. category: Button
  1404. elements: ons-button
  1405. markup: |
  1406. <button class="button button--large" style="width: 95%; margin: 0 auto;">Button</button>
  1407. */
  1408. .button--large {
  1409. font-size: 17px;
  1410. font-weight: 500;
  1411. line-height: 36px;
  1412. padding: 4px 12px;
  1413. display: block;
  1414. width: 100%;
  1415. text-align: center;
  1416. }
  1417. .button--large:active {
  1418. background-color: #0076ff;
  1419. transition: none;
  1420. opacity: 0.2;
  1421. transition: none;
  1422. }
  1423. .button--large:disabled,
  1424. .button--large[disabled] {
  1425. opacity: 0.3;
  1426. cursor: default;
  1427. pointer-events: none;
  1428. }
  1429. .button--large:hover {
  1430. transition: none;
  1431. }
  1432. .button--large:focus {
  1433. outline: 0;
  1434. }
  1435. /*~
  1436. name: Large Quiet Button
  1437. category: Button
  1438. elements: ons-button
  1439. markup: |
  1440. <button class="button--large--quiet" style="width: 95%; margin: 0 auto;">Button</button>
  1441. */
  1442. .button--large--quiet { /* stylelint-disable-line */
  1443. position: relative;
  1444. display: inline-block;
  1445. box-sizing: border-box;
  1446. background-clip: padding-box;
  1447. padding: 0;
  1448. margin: 0;
  1449. font: inherit;
  1450. color: inherit;
  1451. background: transparent;
  1452. border: none;
  1453. line-height: normal;
  1454. font-family: -apple-system, 'Helvetica Neue', 'Helvetica', 'Arial', 'Lucida Grande', sans-serif;
  1455. -webkit-font-smoothing: antialiased;
  1456. -moz-osx-font-smoothing: grayscale;
  1457. font-weight: 400;
  1458. cursor: default;
  1459. -webkit-user-select: none;
  1460. -moz-user-select: none;
  1461. -ms-user-select: none;
  1462. user-select: none;
  1463. text-overflow: ellipsis;
  1464. white-space: nowrap;
  1465. overflow: hidden;
  1466. height: auto;
  1467. text-decoration: none;
  1468. padding: 4px 10px;
  1469. font-size: 17px;
  1470. line-height: 32px;
  1471. letter-spacing: 0;
  1472. color: white;
  1473. vertical-align: middle;
  1474. background-color: #0076ff;
  1475. border: 0 solid currentColor;
  1476. border-radius: 3px;
  1477. transition: none;
  1478. font-size: 17px;
  1479. font-weight: 500;
  1480. line-height: 36px;
  1481. padding: 4px 12px;
  1482. display: block;
  1483. width: 100%;
  1484. background: transparent;
  1485. border: 1px solid transparent;
  1486. box-shadow: none;
  1487. color: #0076ff;
  1488. text-align: center;
  1489. }
  1490. .button--large--quiet:active { /* stylelint-disable-line */
  1491. transition: none;
  1492. opacity: 0.2;
  1493. color: #0076ff;
  1494. background: transparent;
  1495. border: 1px solid transparent;
  1496. box-shadow: none;
  1497. }
  1498. .button--large--quiet:disabled, .button--large--quiet[disabled] { /* stylelint-disable-line */
  1499. opacity: 0.3;
  1500. cursor: default;
  1501. pointer-events: none;
  1502. }
  1503. .button--large--quiet:hover { /* stylelint-disable-line */
  1504. transition: none;
  1505. }
  1506. .button--large--quiet:focus { /* stylelint-disable-line */
  1507. outline: 0;
  1508. }
  1509. /*~
  1510. name: Large Call To Action Button
  1511. category: Button
  1512. elements: ons-button
  1513. markup: |
  1514. <button class="button--large--cta" style="width: 95%; margin: 0 auto;">Button</button>
  1515. */
  1516. .button--large--cta { /* stylelint-disable-line */
  1517. position: relative;
  1518. display: inline-block;
  1519. box-sizing: border-box;
  1520. background-clip: padding-box;
  1521. padding: 0;
  1522. margin: 0;
  1523. font: inherit;
  1524. color: inherit;
  1525. background: transparent;
  1526. border: none;
  1527. line-height: normal;
  1528. font-family: -apple-system, 'Helvetica Neue', 'Helvetica', 'Arial', 'Lucida Grande', sans-serif;
  1529. -webkit-font-smoothing: antialiased;
  1530. -moz-osx-font-smoothing: grayscale;
  1531. font-weight: 400;
  1532. cursor: default;
  1533. -webkit-user-select: none;
  1534. -moz-user-select: none;
  1535. -ms-user-select: none;
  1536. user-select: none;
  1537. text-overflow: ellipsis;
  1538. white-space: nowrap;
  1539. overflow: hidden;
  1540. height: auto;
  1541. text-decoration: none;
  1542. padding: 4px 10px;
  1543. font-size: 17px;
  1544. line-height: 32px;
  1545. letter-spacing: 0;
  1546. color: white;
  1547. vertical-align: middle;
  1548. background-color: #0076ff;
  1549. border: 0 solid currentColor;
  1550. border-radius: 3px;
  1551. transition: none;
  1552. border: none;
  1553. background-color: #25a6d9;
  1554. color: white;
  1555. font-size: 17px;
  1556. font-weight: 500;
  1557. line-height: 36px;
  1558. padding: 4px 12px;
  1559. width: 100%;
  1560. text-align: center;
  1561. display: block;
  1562. }
  1563. .button--large--cta:hover { /* stylelint-disable-line */
  1564. transition: none;
  1565. }
  1566. .button--large--cta:focus { /* stylelint-disable-line */
  1567. outline: 0;
  1568. }
  1569. .button--large--cta:active { /* stylelint-disable-line */
  1570. color: white;
  1571. background-color: #25a6d9;
  1572. transition: none;
  1573. opacity: 0.2;
  1574. }
  1575. .button--large--cta:disabled, .button--large--cta[disabled] { /* stylelint-disable-line */
  1576. opacity: 0.3;
  1577. cursor: default;
  1578. pointer-events: none;
  1579. }
  1580. /*~
  1581. name: Material Button
  1582. category: Button
  1583. elements: ons-button
  1584. markup: |
  1585. <button class="button button--material">BUTTON</button>
  1586. <button class="button button--material" disabled>DISABLED</button>
  1587. */
  1588. .button--material {
  1589. position: relative;
  1590. display: inline-block;
  1591. box-sizing: border-box;
  1592. background-clip: padding-box;
  1593. padding: 0;
  1594. margin: 0;
  1595. font: inherit;
  1596. color: inherit;
  1597. background: transparent;
  1598. border: none;
  1599. line-height: normal;
  1600. font-family: -apple-system, 'Helvetica Neue', 'Helvetica', 'Arial', 'Lucida Grande', sans-serif;
  1601. -webkit-font-smoothing: antialiased;
  1602. -moz-osx-font-smoothing: grayscale;
  1603. font-weight: 400;
  1604. cursor: default;
  1605. -webkit-user-select: none;
  1606. -moz-user-select: none;
  1607. -ms-user-select: none;
  1608. user-select: none;
  1609. text-overflow: ellipsis;
  1610. white-space: nowrap;
  1611. overflow: hidden;
  1612. height: auto;
  1613. text-decoration: none;
  1614. padding: 4px 10px;
  1615. font-size: 17px;
  1616. line-height: 32px;
  1617. letter-spacing: 0;
  1618. color: white;
  1619. vertical-align: middle;
  1620. background-color: #0076ff;
  1621. border: 0 solid currentColor;
  1622. border-radius: 3px;
  1623. transition: none;
  1624. box-shadow:
  1625. 0 2px 2px 0 rgba(0, 0, 0, .14),
  1626. 0 1px 5px 0 rgba(0, 0, 0, .12),
  1627. 0 3px 1px -2px rgba(0, 0, 0, .2);
  1628. font-family: 'Roboto', 'Noto', sans-serif;
  1629. -webkit-font-smoothing: antialiased;
  1630. font-weight: 400;
  1631. min-height: 36px;
  1632. line-height: 36px;
  1633. padding: 0 16px;
  1634. text-align: center;
  1635. font-size: 14px;
  1636. -webkit-transform: translate3d(0, 0, 0);
  1637. transform: translate3d(0, 0, 0);
  1638. text-transform: uppercase;
  1639. background-color: #2979ff;
  1640. color: #ffffff;
  1641. font-weight: 500;
  1642. transition: background-color 0.25s linear;
  1643. opacity: 1;
  1644. transition: all 0.25s linear;
  1645. }
  1646. .button--material:hover {
  1647. transition: all 0.25s linear;
  1648. }
  1649. .button--material:active {
  1650. box-shadow:
  1651. 0 6px 10px 0 rgba(0, 0, 0, .14),
  1652. 0 1px 18px 0 rgba(0, 0, 0, .12),
  1653. 0 3px 5px -1px rgba(0, 0, 0, .4);
  1654. background-color: #2979ff;
  1655. opacity: 0.9;
  1656. transition: all 0.25s linear;
  1657. }
  1658. .button--material:focus {
  1659. outline: 0;
  1660. }
  1661. .button--material:disabled,
  1662. .button--material[disabled] {
  1663. transition: none;
  1664. box-shadow: none;
  1665. background-color: rgba(79, 79, 79, 0.26);
  1666. color: rgba(0, 0, 0, 0.26);
  1667. opacity: 1;
  1668. }
  1669. /*~
  1670. name: Material Flat Button
  1671. category: Button
  1672. elements: ons-button
  1673. markup: |
  1674. <button class="button button--material--flat">BUTTON</button>
  1675. <button class="button button--material--flat" disabled>DISABLED</button>
  1676. */
  1677. .button--material--flat { /* stylelint-disable-line */
  1678. position: relative;
  1679. display: inline-block;
  1680. box-sizing: border-box;
  1681. background-clip: padding-box;
  1682. padding: 0;
  1683. margin: 0;
  1684. font: inherit;
  1685. color: inherit;
  1686. background: transparent;
  1687. border: none;
  1688. line-height: normal;
  1689. font-family: -apple-system, 'Helvetica Neue', 'Helvetica', 'Arial', 'Lucida Grande', sans-serif;
  1690. -webkit-font-smoothing: antialiased;
  1691. -moz-osx-font-smoothing: grayscale;
  1692. font-weight: 400;
  1693. cursor: default;
  1694. -webkit-user-select: none;
  1695. -moz-user-select: none;
  1696. -ms-user-select: none;
  1697. user-select: none;
  1698. text-overflow: ellipsis;
  1699. white-space: nowrap;
  1700. overflow: hidden;
  1701. height: auto;
  1702. text-decoration: none;
  1703. padding: 4px 10px;
  1704. font-size: 17px;
  1705. line-height: 32px;
  1706. letter-spacing: 0;
  1707. color: white;
  1708. vertical-align: middle;
  1709. background-color: #0076ff;
  1710. border: 0 solid currentColor;
  1711. border-radius: 3px;
  1712. transition: none;
  1713. box-shadow:
  1714. 0 2px 2px 0 rgba(0, 0, 0, .14),
  1715. 0 1px 5px 0 rgba(0, 0, 0, .12),
  1716. 0 3px 1px -2px rgba(0, 0, 0, .2);
  1717. font-family: 'Roboto', 'Noto', sans-serif;
  1718. -webkit-font-smoothing: antialiased;
  1719. font-weight: 400;
  1720. min-height: 36px;
  1721. line-height: 36px;
  1722. padding: 0 16px;
  1723. text-align: center;
  1724. font-size: 14px;
  1725. -webkit-transform: translate3d(0, 0, 0);
  1726. transform: translate3d(0, 0, 0);
  1727. text-transform: uppercase;
  1728. background-color: #2979ff;
  1729. color: #ffffff;
  1730. font-weight: 500;
  1731. transition: background-color 0.25s linear;
  1732. box-shadow: none;
  1733. background-color: transparent;
  1734. color: #2979ff;
  1735. transition: all 0.25s linear;
  1736. }
  1737. .button--material--flat:hover { /* stylelint-disable-line */
  1738. transition: all 0.25s linear;
  1739. }
  1740. .button--material--flat:focus { /* stylelint-disable-line */
  1741. box-shadow: none;
  1742. background-color: transparent;
  1743. color: #2979ff;
  1744. outline: 0;
  1745. opacity: 1;
  1746. border: none;
  1747. }
  1748. .button--material--flat:active { /* stylelint-disable-line */
  1749. box-shadow: none;
  1750. outline: 0;
  1751. opacity: 1;
  1752. border: none;
  1753. background-color: rgba(153, 153, 153, 0.2);
  1754. color: #2979ff;
  1755. transition: all 0.25s linear;
  1756. }
  1757. .button--material--flat:disabled, .button--material--flat[disabled] {/* stylelint-disable-line */
  1758. transition: none;
  1759. opacity: 1;
  1760. box-shadow: none;
  1761. background-color: transparent;
  1762. color: rgba(0, 0, 0, 0.26);
  1763. }
  1764. /*~
  1765. name: Button Bar
  1766. category: Segment
  1767. markup: |
  1768. <div class="button-bar" style="width:280px;">
  1769. <div class="button-bar__item">
  1770. <button class="button-bar__button">One</button>
  1771. </div>
  1772. <div class="button-bar__item">
  1773. <button class="button-bar__button">Two</button>
  1774. </div>
  1775. <div class="button-bar__item">
  1776. <button class="button-bar__button">Three</button>
  1777. </div>
  1778. </div>
  1779. */
  1780. .button-bar {
  1781. font-family: -apple-system, 'Helvetica Neue', 'Helvetica', 'Arial', 'Lucida Grande', sans-serif;
  1782. -webkit-font-smoothing: antialiased;
  1783. -moz-osx-font-smoothing: grayscale;
  1784. font-weight: 400;
  1785. display: -webkit-inline-box;
  1786. display: -webkit-inline-flex;
  1787. display: inline-flex;
  1788. -webkit-box-align: stretch;
  1789. -webkit-align-items: stretch;
  1790. align-items: stretch;
  1791. -webkit-align-content: stretch;
  1792. align-content: stretch;
  1793. -webkit-flex-wrap: nowrap;
  1794. flex-wrap: nowrap;
  1795. margin: 0;
  1796. padding: 0;
  1797. border: none;
  1798. }
  1799. .button-bar__item {
  1800. font-family: -apple-system, 'Helvetica Neue', 'Helvetica', 'Arial', 'Lucida Grande', sans-serif;
  1801. -webkit-font-smoothing: antialiased;
  1802. -moz-osx-font-smoothing: grayscale;
  1803. font-weight: 400;
  1804. border-radius: 0;
  1805. width: 100%;
  1806. padding: 0;
  1807. margin: 0;
  1808. position: relative;
  1809. overflow: hidden;
  1810. box-sizing: border-box;
  1811. }
  1812. .button-bar__button {
  1813. font-family: -apple-system, 'Helvetica Neue', 'Helvetica', 'Arial', 'Lucida Grande', sans-serif;
  1814. -webkit-font-smoothing: antialiased;
  1815. -moz-osx-font-smoothing: grayscale;
  1816. font-weight: 400;
  1817. border-radius: 0;
  1818. background-color: transparent;
  1819. color: #0076ff;
  1820. border: 1px solid #0076ff;
  1821. border-top-width: 1px;
  1822. border-bottom-width: 1px;
  1823. border-right-width: 1px;
  1824. border-left-width: 0;
  1825. font-weight: 400;
  1826. padding: 0;
  1827. font-size: 13px;
  1828. height: 27px;
  1829. line-height: 27px;
  1830. width: 100%;
  1831. transition: background-color 0.2s linear, color 0.2s linear;
  1832. box-sizing: border-box;
  1833. }
  1834. .button-bar__button:disabled {
  1835. opacity: 0.3;
  1836. cursor: default;
  1837. pointer-events: none;
  1838. }
  1839. .button-bar__button:hover {
  1840. transition: none;
  1841. }
  1842. .button-bar__button:focus {
  1843. outline: 0;
  1844. }
  1845. :checked + .button-bar__button {
  1846. background-color: #0076ff;
  1847. color: #fff;
  1848. transition: none;
  1849. }
  1850. .button-bar__button:active,
  1851. :active + .button-bar__button {
  1852. background-color: rgb(179, 214, 255);
  1853. border: 0 solid #0076ff;
  1854. border-top: 1px solid #0076ff;
  1855. border-bottom: 1px solid #0076ff;
  1856. border-right: 1px solid #0076ff;
  1857. font-size: 13px;
  1858. width: 100%;
  1859. transition: none;
  1860. }
  1861. .button-bar__item:first-child > .button-bar__button {
  1862. border-left-width: 1px;
  1863. border-radius: 4px 0 0 4px;
  1864. }
  1865. .button-bar__item:last-child > .button-bar__button {
  1866. border-right-width: 1px;
  1867. border-radius: 0 4px 4px 0;
  1868. }
  1869. /*~
  1870. name: Segment
  1871. category: Segment
  1872. markup: |
  1873. <div class="segment" style="width: 280px; margin: 0 auto;">
  1874. <div class="segment__item">
  1875. <input type="radio" class="segment__input" name="segment-a" checked>
  1876. <div class="segment__button">One</div>
  1877. </div>
  1878. <div class="segment__item">
  1879. <input type="radio" class="segment__input" name="segment-a">
  1880. <div class="segment__button">Two</div>
  1881. </div>
  1882. <div class="segment__item">
  1883. <input type="radio" class="segment__input" name="segment-a">
  1884. <div class="segment__button">Three</div>
  1885. </div>
  1886. </div>
  1887. */
  1888. .segment {
  1889. font-family: -apple-system, 'Helvetica Neue', 'Helvetica', 'Arial', 'Lucida Grande', sans-serif;
  1890. -webkit-font-smoothing: antialiased;
  1891. -moz-osx-font-smoothing: grayscale;
  1892. font-weight: 400;
  1893. display: -webkit-inline-box;
  1894. display: -webkit-inline-flex;
  1895. display: inline-flex;
  1896. -webkit-box-align: stretch;
  1897. -webkit-align-items: stretch;
  1898. align-items: stretch;
  1899. -webkit-align-content: stretch;
  1900. align-content: stretch;
  1901. -webkit-flex-wrap: nowrap;
  1902. flex-wrap: nowrap;
  1903. margin: 0;
  1904. padding: 0;
  1905. border: none;
  1906. }
  1907. .segment__item {
  1908. font-family: -apple-system, 'Helvetica Neue', 'Helvetica', 'Arial', 'Lucida Grande', sans-serif;
  1909. -webkit-font-smoothing: antialiased;
  1910. -moz-osx-font-smoothing: grayscale;
  1911. font-weight: 400;
  1912. border-radius: 0;
  1913. width: 100%;
  1914. padding: 0;
  1915. margin: 0;
  1916. position: relative;
  1917. overflow: hidden;
  1918. box-sizing: border-box;
  1919. display: block;
  1920. background-color: transparent;
  1921. border: none;
  1922. }
  1923. .segment__input {
  1924. position: absolute;
  1925. right: 0;
  1926. top: 0;
  1927. left: 0;
  1928. bottom: 0;
  1929. padding: 0;
  1930. border: 0;
  1931. background-color: transparent;
  1932. z-index: 1;
  1933. vertical-align: top;
  1934. outline: none;
  1935. width: 100%;
  1936. height: 100%;
  1937. margin: 0;
  1938. -webkit-appearance: none;
  1939. -moz-appearance: none;
  1940. appearance: none;
  1941. }
  1942. .segment__button {
  1943. font-family: -apple-system, 'Helvetica Neue', 'Helvetica', 'Arial', 'Lucida Grande', sans-serif;
  1944. -webkit-font-smoothing: antialiased;
  1945. -moz-osx-font-smoothing: grayscale;
  1946. font-weight: 400;
  1947. border-radius: 0;
  1948. background-color: transparent;
  1949. color: #0076ff;
  1950. border: 1px solid #0076ff;
  1951. border-top-width: 1px;
  1952. border-bottom-width: 1px;
  1953. border-right-width: 1px;
  1954. border-left-width: 0;
  1955. font-weight: 400;
  1956. padding: 0;
  1957. font-size: 13px;
  1958. height: 29px;
  1959. line-height: 29px;
  1960. width: 100%;
  1961. transition: background-color 0.2s linear, color 0.2s linear;
  1962. box-sizing: border-box;
  1963. text-align: center;
  1964. }
  1965. .segment__item:disabled {
  1966. opacity: 0.3;
  1967. cursor: default;
  1968. pointer-events: none;
  1969. }
  1970. .segment__button:hover {
  1971. transition: none;
  1972. }
  1973. .segment__button:focus {
  1974. outline: 0;
  1975. }
  1976. :active + .segment__button {
  1977. background-color: rgb(179, 214, 255);
  1978. border: 0 solid #0076ff;
  1979. border-top: 1px solid #0076ff;
  1980. border-bottom: 1px solid #0076ff;
  1981. border-right: 1px solid #0076ff;
  1982. font-size: 13px;
  1983. width: 100%;
  1984. transition: none;
  1985. }
  1986. :checked + .segment__button {
  1987. background-color: #0076ff;
  1988. color: #fff;
  1989. transition: none;
  1990. }
  1991. .segment__item:first-child > .segment__button {
  1992. border-left-width: 1px;
  1993. border-radius: 4px 0 0 4px;
  1994. }
  1995. .segment__item:last-child > .segment__button {
  1996. border-right-width: 1px;
  1997. border-radius: 0 4px 4px 0;
  1998. }
  1999. /*~
  2000. name: Material Segment
  2001. category: Segment
  2002. markup: |
  2003. <div class="segment segment--material" style="width: 280px; margin: 0 auto;">
  2004. <div class="segment__item segment--material__item">
  2005. <input type="radio" class="segment__input segment--material__input" name="segment-b" checked>
  2006. <div class="segment__button segment--material__button">One</div>
  2007. </div>
  2008. <div class="segment__item segment--material__item">
  2009. <input type="radio" class="segment__input segment--material__input" name="segment-b">
  2010. <div class="segment__button segment--material__button">Two</div>
  2011. </div>
  2012. <div class="segment__item segment--material__item">
  2013. <input type="radio" class="segment__input segment--material__input" name="segment-b">
  2014. <div class="segment__button segment--material__button">Three</div>
  2015. </div>
  2016. </div>
  2017. */
  2018. .segment--material {
  2019. border-radius: 2px;
  2020. overflow: hidden;
  2021. box-shadow: 0 0 2px 0 rgba(0, 0, 0, .12), 0 2px 2px 0 rgba(0, 0, 0, .24);
  2022. }
  2023. .segment--material__button {
  2024. font-family: 'Roboto', 'Noto', sans-serif;
  2025. -webkit-font-smoothing: antialiased;
  2026. font-weight: 400;
  2027. font-size: 14px;
  2028. height: 32px;
  2029. line-height: 32px;
  2030. border-width: 0;
  2031. color: rgba(0, 0, 0, 0.38);
  2032. border-radius: 0;
  2033. background-color: #fafafa;
  2034. }
  2035. :active + .segment--material__button {
  2036. background-color: #fafafa;
  2037. border-radius: 0;
  2038. border-width: 0;
  2039. font-size: 14px;
  2040. transition: none;
  2041. color: rgba(0, 0, 0, 0.38);
  2042. }
  2043. :checked + .segment--material__button {
  2044. background-color: #c8c8c8;
  2045. color: #353535;
  2046. border-radius: 0;
  2047. border-width: 0;
  2048. }
  2049. .segment--material__item:first-child > .segment--material__button,
  2050. .segment--material__item:last-child > .segment--material__button {
  2051. border-radius: 0;
  2052. border-width: 0;
  2053. }
  2054. :root { /* Text color */ /* Text color active */
  2055. }
  2056. /*~
  2057. name: Icon Tabbar
  2058. category: Tabbar
  2059. elements: ons-tabbar ons-tab
  2060. markup: |
  2061. <!-- Prerequisite=This example use ionicons(http://ionicons.com) to display icons. -->
  2062. <div class="tabbar">
  2063. <label class="tabbar__item">
  2064. <input type="radio" name="tabbar-a" checked="checked">
  2065. <button class="tabbar__button">
  2066. <i class="tabbar__icon ion-stop"></i>
  2067. <div class="tabbar__label">One</div>
  2068. </button>
  2069. </label>
  2070. <label class="tabbar__item">
  2071. <input type="radio" name="tabbar-a">
  2072. <button class="tabbar__button">
  2073. <i class="tabbar__icon ion-record"></i>
  2074. <div class="tabbar__label">Two</div>
  2075. </button>
  2076. </label>
  2077. <label class="tabbar__item">
  2078. <input type="radio" name="tabbar-a">
  2079. <button class="tabbar__button">
  2080. <i class="tabbar__icon ion-star"></i>
  2081. <div class="tabbar__label">Three</div>
  2082. </button>
  2083. </label>
  2084. </div>
  2085. */
  2086. /*~
  2087. name: Tabbar
  2088. category: Tabbar
  2089. elements: ons-tabbar ons-tab
  2090. markup: |
  2091. <div class="tabbar">
  2092. <label class="tabbar__item">
  2093. <input type="radio" name="tabbar-c" checked="checked">
  2094. <button class="tabbar__button">
  2095. <div class="tabbar__label">One</div>
  2096. </button>
  2097. </label>
  2098. <label class="tabbar__item">
  2099. <input type="radio" name="tabbar-c">
  2100. <button class="tabbar__button">
  2101. <div class="tabbar__label">Two</div>
  2102. </button>
  2103. </label>
  2104. <label class="tabbar__item">
  2105. <input type="radio" name="tabbar-c">
  2106. <button class="tabbar__button">
  2107. <div class="tabbar__label">Three</div>
  2108. </button>
  2109. </label>
  2110. </div>
  2111. */
  2112. .tabbar {
  2113. font-family: -apple-system, 'Helvetica Neue', 'Helvetica', 'Arial', 'Lucida Grande', sans-serif;
  2114. -webkit-font-smoothing: antialiased;
  2115. -moz-osx-font-smoothing: grayscale;
  2116. font-weight: 400;
  2117. display: -webkit-box;
  2118. display: -webkit-flex;
  2119. display: flex;
  2120. position: absolute;
  2121. bottom: 0;
  2122. left: 0;
  2123. right: 0;
  2124. white-space: nowrap;
  2125. margin: 0;
  2126. padding: 0;
  2127. height: 49px;
  2128. background-color: #fafafa;
  2129. border-top: 1px solid #ccc;
  2130. width: 100%;
  2131. }
  2132. @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) {
  2133. .tabbar {
  2134. border-top: none;
  2135. background-size: 100% 1px;
  2136. background-repeat: no-repeat;
  2137. background-position: top;
  2138. background-image: linear-gradient(180deg, #ccc, #ccc 50%, transparent 50%);
  2139. }
  2140. }
  2141. .tabbar__item {
  2142. font-family: -apple-system, 'Helvetica Neue', 'Helvetica', 'Arial', 'Lucida Grande', sans-serif;
  2143. -webkit-font-smoothing: antialiased;
  2144. -moz-osx-font-smoothing: grayscale;
  2145. font-weight: 400;
  2146. position: relative;
  2147. -webkit-box-flex: 1;
  2148. -webkit-flex-grow: 1;
  2149. flex-grow: 1;
  2150. -webkit-flex-basis: 0;
  2151. flex-basis: 0;
  2152. width: auto;
  2153. border-radius: 0;
  2154. }
  2155. .tabbar__item > input {
  2156. position: absolute;
  2157. right: 0;
  2158. top: 0;
  2159. left: 0;
  2160. bottom: 0;
  2161. padding: 0;
  2162. border: 0;
  2163. background-color: transparent;
  2164. z-index: 1;
  2165. vertical-align: top;
  2166. outline: none;
  2167. width: 100%;
  2168. height: 100%;
  2169. margin: 0;
  2170. -webkit-appearance: none;
  2171. -moz-appearance: none;
  2172. appearance: none;
  2173. }
  2174. .tabbar__button {
  2175. font-family: -apple-system, 'Helvetica Neue', 'Helvetica', 'Arial', 'Lucida Grande', sans-serif;
  2176. -webkit-font-smoothing: antialiased;
  2177. -moz-osx-font-smoothing: grayscale;
  2178. font-weight: 400;
  2179. box-sizing: border-box;
  2180. background-clip: padding-box;
  2181. padding: 0;
  2182. margin: 0;
  2183. font: inherit;
  2184. color: inherit;
  2185. background: transparent;
  2186. border: none;
  2187. line-height: normal;
  2188. cursor: default;
  2189. -webkit-user-select: none;
  2190. -moz-user-select: none;
  2191. -ms-user-select: none;
  2192. user-select: none;
  2193. text-overflow: ellipsis;
  2194. white-space: nowrap;
  2195. overflow: hidden;
  2196. position: relative;
  2197. display: inline-block;
  2198. text-decoration: none;
  2199. padding: 0;
  2200. height: 49px;
  2201. letter-spacing: 0;
  2202. color: #999;
  2203. vertical-align: top;
  2204. background-color: transparent;
  2205. border-top: none;
  2206. width: 100%;
  2207. font-weight: 400;
  2208. line-height: 49px;
  2209. }
  2210. @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) {
  2211. .tabbar__button {
  2212. border-top: none;
  2213. }
  2214. }
  2215. .tabbar__icon {
  2216. font-size: 24px;
  2217. padding: 0;
  2218. margin: 0;
  2219. line-height: 26px;
  2220. display: block !important; /* stylelint-disable-line declaration-no-important */
  2221. height: 28px;
  2222. }
  2223. .tabbar__label {
  2224. font-family: -apple-system, 'Helvetica Neue', 'Helvetica', 'Arial', 'Lucida Grande', sans-serif;
  2225. -webkit-font-smoothing: antialiased;
  2226. -moz-osx-font-smoothing: grayscale;
  2227. font-weight: 400;
  2228. display: inline-block;
  2229. }
  2230. .tabbar__badge.notification {
  2231. vertical-align: text-bottom;
  2232. top: -1px;
  2233. margin-left: 5px;
  2234. z-index: 10;
  2235. font-size: 12px;
  2236. height: 16px;
  2237. min-width: 16px;
  2238. line-height: 16px;
  2239. border-radius: 8px;
  2240. }
  2241. .tabbar__icon ~ .tabbar__badge.notification {
  2242. position: absolute;
  2243. top: 5px;
  2244. margin-left: 0;
  2245. }
  2246. .tabbar__icon + .tabbar__label {
  2247. display: block;
  2248. font-size: 10px;
  2249. line-height: 1;
  2250. margin: 0;
  2251. font-weight: 400;
  2252. }
  2253. .tabbar__label:first-child {
  2254. font-size: 16px;
  2255. line-height: 49px;
  2256. margin: 0;
  2257. padding: 0;
  2258. }
  2259. :checked + .tabbar__button {
  2260. color: #0076ff;
  2261. background-color: transparent;
  2262. box-shadow: none;
  2263. border-top: none;
  2264. }
  2265. .tabbar__button:disabled {
  2266. opacity: 0.3;
  2267. cursor: default;
  2268. pointer-events: none;
  2269. }
  2270. .tabbar__button:focus {
  2271. z-index: 1;
  2272. border-top: none;
  2273. box-shadow: none;
  2274. outline: 0;
  2275. }
  2276. .tabbar__content {
  2277. position: absolute;
  2278. top: 0;
  2279. left: 0;
  2280. right: 0;
  2281. bottom: 49px;
  2282. z-index: 0;
  2283. }
  2284. .tabbar--autogrow .tabbar__item {
  2285. -webkit-flex-basis: auto;
  2286. flex-basis: auto;
  2287. }
  2288. /*~
  2289. name: Icon Only Tabbar
  2290. category: Tabbar
  2291. elements: ons-tabbar ons-tab
  2292. markup: |
  2293. <!-- Prerequisite=This example use ionicons(http://ionicons.com) to display icons. -->
  2294. <div class="tabbar">
  2295. <label class="tabbar__item">
  2296. <input type="radio" name="tabbar-b" checked="checked">
  2297. <button class="tabbar__button">
  2298. <i class="tabbar__icon ion-stop"></i>
  2299. </button>
  2300. </label>
  2301. <label class="tabbar__item">
  2302. <input type="radio" name="tabbar-b">
  2303. <button class="tabbar__button">
  2304. <i class="tabbar__icon ion-record"></i>
  2305. </button>
  2306. </label>
  2307. <label class="tabbar__item">
  2308. <input type="radio" name="tabbar-b">
  2309. <button class="tabbar__button">
  2310. <i class="tabbar__icon ion-star"></i>
  2311. </button>
  2312. </label>
  2313. </div>
  2314. */
  2315. /*~
  2316. name: Top Tabbar
  2317. category: Tabbar
  2318. elements: ons-tabbar ons-tab
  2319. markup: |
  2320. <div class="tabbar tabbar--top">
  2321. <label class="tabbar__item">
  2322. <input type="radio" name="top-tabbar-a" checked="checked">
  2323. <button class="tabbar__button">
  2324. <i class="tabbar__icon ion-stop"></i>
  2325. </button>
  2326. </label>
  2327. <label class="tabbar__item">
  2328. <input type="radio" name="top-tabbar-a">
  2329. <button class="tabbar__button">
  2330. <i class="tabbar__icon ion-record"></i>
  2331. </button>
  2332. </label>
  2333. <label class="tabbar__item">
  2334. <input type="radio" name="top-tabbar-a">
  2335. <button class="tabbar__button">
  2336. <i class="tabbar__icon ion-star"></i>
  2337. </button>
  2338. </label>
  2339. </div>
  2340. */
  2341. .tabbar--top {
  2342. position: relative;
  2343. top: 0;
  2344. left: 0;
  2345. right: 0;
  2346. bottom: auto;
  2347. border-top: none;
  2348. border-bottom: 1px solid #ccc;
  2349. }
  2350. @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) {
  2351. .tabbar--top {
  2352. border-bottom: none;
  2353. background-size: 100% 1px;
  2354. background-repeat: no-repeat;
  2355. background-position: bottom;
  2356. background-image: linear-gradient(0deg, #ccc, #ccc 50%, transparent 50%);
  2357. }
  2358. }
  2359. .tabbar--top__content {
  2360. top: 49px;
  2361. left: 0;
  2362. right: 0;
  2363. bottom: 0;
  2364. z-index: 0;
  2365. }
  2366. /*~
  2367. name: Bordered Top Tabbar
  2368. category: Tabbar
  2369. elements: ons-tabbar ons-tab
  2370. markup: |
  2371. <div class="tabbar tabbar--top tabbar--top-border">
  2372. <label class="tabbar__item tabbar--top-border__item">
  2373. <input type="radio" name="top-tabbar-b" checked="checked">
  2374. <button class="tabbar__button tabbar--top-border__button">
  2375. Home
  2376. </button>
  2377. </label>
  2378. <label class="tabbar__item tabbar--top-border__item">
  2379. <input type="radio" name="top-tabbar-b">
  2380. <button class="tabbar__button tabbar--top-border__button">
  2381. Comments
  2382. </button>
  2383. </label>
  2384. <label class="tabbar__item tabbar--top-border__item">
  2385. <input type="radio" name="top-tabbar-b">
  2386. <button class="tabbar__button tabbar--top-border__button">
  2387. Activity
  2388. </button>
  2389. </label>
  2390. </div>
  2391. */
  2392. /*~
  2393. name: Material Tabbar
  2394. category: Tabbar
  2395. elements: ons-tabbar ons-tab
  2396. markup: |
  2397. <div class="tabbar tabbar--top tabbar--material">
  2398. <label class="tabbar__item tabbar--material__item">
  2399. <input type="radio" name="tabbar-material-a" checked="checked">
  2400. <button class="tabbar__button tabbar--material__button">
  2401. Music
  2402. </button>
  2403. </label>
  2404. <label class="tabbar__item tabbar--material__item">
  2405. <input type="radio" name="tabbar-material-a">
  2406. <button class="tabbar__button tabbar--material__button">
  2407. Movies
  2408. </button>
  2409. </label>
  2410. <label class="tabbar__item tabbar--material__item">
  2411. <input type="radio" name="tabbar-material-a">
  2412. <button class="tabbar__button tabbar--material__button">
  2413. Books
  2414. </button>
  2415. </label>
  2416. <label class="tabbar__item tabbar--material__item">
  2417. <input type="radio" name="tabbar-material-a">
  2418. <button class="tabbar__button tabbar--material__button">
  2419. Games
  2420. </button>
  2421. </label>
  2422. </div>
  2423. */
  2424. .tabbar--top-border__button {
  2425. background-color: transparent;
  2426. border-bottom: 4px solid transparent;
  2427. }
  2428. :checked + .tabbar--top-border__button {
  2429. background-color: transparent;
  2430. border-bottom: 4px solid #0076ff;
  2431. }
  2432. .tabbar__border {
  2433. position: absolute;
  2434. bottom: 0;
  2435. left: 0;
  2436. width: 0;
  2437. height: 4px;
  2438. background-color: #0076ff;
  2439. }
  2440. .tabbar--material {
  2441. background: none;
  2442. background-color: #ffffff;
  2443. border-bottom-width: 0;
  2444. box-shadow:
  2445. 0 4px 2px -2px rgba(0, 0, 0, .14),
  2446. 0 3px 5px -2px rgba(0, 0, 0, .12),
  2447. 0 5px 1px -4px rgba(0, 0, 0, .2);
  2448. }
  2449. .tabbar--material__button {
  2450. background-color: transparent;
  2451. color: #31313a;
  2452. text-transform: uppercase;
  2453. font-size: 14px;
  2454. font-weight: 500;
  2455. font-family: 'Roboto', 'Noto', sans-serif;
  2456. -webkit-font-smoothing: antialiased;
  2457. font-weight: 400;
  2458. }
  2459. .tabbar--material__button:after {
  2460. content: '';
  2461. display: block;
  2462. width: 0;
  2463. height: 2px;
  2464. bottom: 0;
  2465. position: absolute;
  2466. margin-top: -2px;
  2467. background-color: #31313a;
  2468. }
  2469. :checked + .tabbar--material__button:after {
  2470. width: 100%;
  2471. transition: width 0.2s ease-in-out;
  2472. }
  2473. :checked + .tabbar--material__button {
  2474. background-color: transparent;
  2475. color: #31313a;
  2476. }
  2477. .tabbar--material__item:not([ripple]):active {
  2478. background-color: rgba(49, 49, 58, .1);
  2479. }
  2480. .tabbar--material__border {
  2481. height: 2px;
  2482. background-color: #31313a;
  2483. }
  2484. /*~
  2485. name: Material Tabbar (Icon only)
  2486. category: Tabbar
  2487. elements: ons-tabbar ons-tab
  2488. markup: |
  2489. <div class="tabbar tabbar--top tabbar--material">
  2490. <label class="tabbar__item tabbar--material__item">
  2491. <input type="radio" name="tabbar-material-b" checked="checked">
  2492. <button class="tabbar__button tabbar--material__button">
  2493. <i class="tabbar__icon tabbar--material__icon zmdi zmdi-phone"></i>
  2494. </button>
  2495. </label>
  2496. <label class="tabbar__item tabbar--material__item">
  2497. <input type="radio" name="tabbar-material-b">
  2498. <button class="tabbar__button tabbar--material__button">
  2499. <i class="tabbar__icon tabbar--material__icon zmdi zmdi-favorite"></i>
  2500. </button>
  2501. </label>
  2502. <label class="tabbar__item tabbar--material__item">
  2503. <input type="radio" name="tabbar-material-b">
  2504. <button class="tabbar__button tabbar--material__button">
  2505. <i class="tabbar__icon tabbar--material__icon zmdi zmdi-pin-account"></i>
  2506. </button>
  2507. </label>
  2508. </div>
  2509. */
  2510. .tabbar--material__icon {
  2511. font-size: 22px !important; /* stylelint-disable-line declaration-no-important */
  2512. line-height: 36px;
  2513. }
  2514. /*~
  2515. name: Material Tabbar (Icon and Label)
  2516. category: Tabbar
  2517. elements: ons-tabbar ons-tab
  2518. markup: |
  2519. <div class="tabbar tabbar--top tabbar--material">
  2520. <label class="tabbar__item tabbar--material__item">
  2521. <input type="radio" name="tabbar-material-c" checked="checked">
  2522. <button class="tabbar__button tabbar--material__button">
  2523. <i class="tabbar__icon tabbar--material__icon zmdi zmdi-phone"></i>
  2524. <div class="tabbar__label tabbar--material__label">Call</div>
  2525. </button>
  2526. </label>
  2527. <label class="tabbar__item tabbar--material__item">
  2528. <input type="radio" name="tabbar-material-c">
  2529. <button class="tabbar__button tabbar--material__button">
  2530. <i class="tabbar__icon tabbar--material__icon zmdi zmdi-favorite"></i>
  2531. <div class="tabbar__label tabbar--material__label">Favorites</div>
  2532. </button>
  2533. </label>
  2534. <label class="tabbar__item tabbar--material__item">
  2535. <input type="radio" name="tabbar-material-c">
  2536. <button class="tabbar__button tabbar--material__button">
  2537. <i class="tabbar__icon tabbar--material__icon zmdi zmdi-delete"></i>
  2538. <div class="tabbar__label tabbar--material__label">Delete</div>
  2539. </button>
  2540. </label>
  2541. </div>
  2542. */
  2543. .tabbar--material__label {
  2544. font-family: 'Roboto', 'Noto', sans-serif;
  2545. -webkit-font-smoothing: antialiased;
  2546. font-weight: 400;
  2547. }
  2548. .tabbar--material__label:first-child {
  2549. font-family: 'Roboto', 'Noto', sans-serif;
  2550. -webkit-font-smoothing: antialiased;
  2551. font-weight: 400;
  2552. letter-spacing: 0.015em;
  2553. font-weight: 500;
  2554. font-size: 14px;
  2555. }
  2556. .tabbar--material__icon + .tabbar--material__label {
  2557. font-size: 10px;
  2558. }
  2559. /*~
  2560. name: Toolbar Button
  2561. category: Toolbar Button
  2562. elements: ons-toolbar-button
  2563. markup: |
  2564. <!-- Prerequisite=This example use font-awesome(http://fortawesome.github.io/Font-Awesome/) to display icons. -->
  2565. <button class="toolbar-button">
  2566. <i class="fa fa-bell" style="font-size:17px"></i>
  2567. </button>
  2568. <button class="toolbar-button">
  2569. Label
  2570. </button>
  2571. <button class="toolbar-button toolbar-button--outline">
  2572. <i class="fa fa-bell" style="font-size:17px"></i> Label
  2573. </button>
  2574. */
  2575. .toolbar-button {
  2576. font-family: -apple-system, 'Helvetica Neue', 'Helvetica', 'Arial', 'Lucida Grande', sans-serif;
  2577. -webkit-font-smoothing: antialiased;
  2578. -moz-osx-font-smoothing: grayscale;
  2579. font-weight: 400;
  2580. padding: 4px 10px;
  2581. letter-spacing: 0;
  2582. color: #0076ff;
  2583. background-color: rgba(0, 0, 0, 0);
  2584. border-radius: 2px;
  2585. border: 1px solid transparent;
  2586. font-weight: 400;
  2587. font-size: 17px;
  2588. transition: none;
  2589. }
  2590. .toolbar-button:active {
  2591. background-color: rgba(0, 0, 0, 0);
  2592. transition: none;
  2593. opacity: 0.2;
  2594. }
  2595. .toolbar-button:disabled,
  2596. .toolbar-button[disabled] {
  2597. opacity: 0.3;
  2598. cursor: default;
  2599. pointer-events: none;
  2600. }
  2601. .toolbar-button:focus {
  2602. outline: 0;
  2603. transition: none;
  2604. }
  2605. .toolbar-button:hover {
  2606. transition: none;
  2607. }
  2608. .toolbar-button--outline {
  2609. border: 1px solid #0076ff;
  2610. margin: auto 8px;
  2611. padding-left: 6px;
  2612. padding-right: 6px;
  2613. }
  2614. /*~
  2615. name: Material Toolbar Button
  2616. category: Toolbar Button
  2617. elements: ons-toolbar-button
  2618. markup: |
  2619. <!-- Prerequisite=This example use Material Design Iconic Font(http://zavoloklom.github.io/material-design-iconic-font/) to display icons. -->
  2620. <span class="toolbar-button toolbar-button--material">
  2621. <i class="zmdi zmdi-menu"></i>
  2622. </span>
  2623. <span class="toolbar-button toolbar-button--material">
  2624. Label
  2625. </span>
  2626. <span class="toolbar-button toolbar-button--material">
  2627. <i class="zmdi zmdi-favorite"></i>
  2628. </span>
  2629. */
  2630. .toolbar-button--material {
  2631. font-size: 22px;
  2632. color: #1e88e5;
  2633. display: inline-block;
  2634. padding: 0 12px;
  2635. height: 100%;
  2636. margin: 0;
  2637. border: none;
  2638. border-radius: 0;
  2639. vertical-align: baseline;
  2640. vertical-align: initial;
  2641. transition: background-color 0.25s linear;
  2642. }
  2643. .toolbar-button--material:first-of-type {
  2644. margin-left: 4px;
  2645. }
  2646. .toolbar-button--material:last-of-type {
  2647. margin-right: 4px;
  2648. }
  2649. .toolbar-button--material:active {
  2650. opacity: 1;
  2651. transition: background-color 0.25s linear;
  2652. }
  2653. .back-button {
  2654. height: 44px;
  2655. line-height: 44px;
  2656. padding-left: 8px;
  2657. color: #0076ff;
  2658. background-color: rgba(0, 0, 0, 0);
  2659. display: inline-block;
  2660. }
  2661. .back-button:active {
  2662. opacity: 0.2;
  2663. }
  2664. .back-button__label {
  2665. display: inline-block;
  2666. height: 100%;
  2667. vertical-align: top;
  2668. line-height: 44px;
  2669. font-size: 17px;
  2670. font-weight: 500;
  2671. }
  2672. .back-button__icon {
  2673. margin-right: 6px;
  2674. display: -webkit-inline-box;
  2675. display: -webkit-inline-flex;
  2676. display: inline-flex;
  2677. fill: #0076ff;
  2678. -webkit-box-align: center;
  2679. -webkit-align-items: center;
  2680. align-items: center;
  2681. height: 100%;
  2682. }
  2683. .back-button--material {
  2684. font-size: 22px;
  2685. color: #1e88e5;
  2686. display: inline-block;
  2687. padding: 0 12px;
  2688. height: 100%;
  2689. margin: 0 0 0 4px;
  2690. border: none;
  2691. border-radius: 0;
  2692. vertical-align: baseline;
  2693. vertical-align: initial;
  2694. line-height: 56px;
  2695. }
  2696. .back-button--material__label {
  2697. display: none;
  2698. font-size: 20px;
  2699. }
  2700. .back-button--material__icon {
  2701. display: -webkit-inline-box;
  2702. display: -webkit-inline-flex;
  2703. display: inline-flex;
  2704. fill: #1e88e5;
  2705. -webkit-box-align: center;
  2706. -webkit-align-items: center;
  2707. align-items: center;
  2708. height: 100%;
  2709. }
  2710. .back-button--material:active {
  2711. opacity: 1;
  2712. }
  2713. :root { /* background color active */
  2714. }
  2715. /*~
  2716. name: Checkbox
  2717. category: Checkbox
  2718. elements: ons-input
  2719. markup: |
  2720. <label class="checkbox">
  2721. <input type="checkbox" class="checkbox__input">
  2722. <div class="checkbox__checkmark"></div>
  2723. OFF
  2724. </label>
  2725. <label class="checkbox">
  2726. <input type="checkbox" class="checkbox__input" checked="checked">
  2727. <div class="checkbox__checkmark"></div>
  2728. ON
  2729. </label>
  2730. <label class="checkbox">
  2731. <input type="checkbox" class="checkbox__input" disabled>
  2732. <div class="checkbox__checkmark"></div>
  2733. Disabled
  2734. </label>
  2735. */
  2736. .checkbox {
  2737. position: relative;
  2738. display: inline-block;
  2739. vertical-align: top;
  2740. cursor: default;
  2741. -webkit-user-select: none;
  2742. -moz-user-select: none;
  2743. -ms-user-select: none;
  2744. user-select: none;
  2745. font-family: -apple-system, 'Helvetica Neue', 'Helvetica', 'Arial', 'Lucida Grande', sans-serif;
  2746. -webkit-font-smoothing: antialiased;
  2747. -moz-osx-font-smoothing: grayscale;
  2748. font-weight: 400;
  2749. line-height: 22px;
  2750. }
  2751. .checkbox__checkmark {
  2752. box-sizing: border-box;
  2753. background-clip: padding-box;
  2754. position: relative;
  2755. display: inline-block;
  2756. vertical-align: top;
  2757. cursor: default;
  2758. -webkit-user-select: none;
  2759. -moz-user-select: none;
  2760. -ms-user-select: none;
  2761. user-select: none;
  2762. font-family: -apple-system, 'Helvetica Neue', 'Helvetica', 'Arial', 'Lucida Grande', sans-serif;
  2763. -webkit-font-smoothing: antialiased;
  2764. -moz-osx-font-smoothing: grayscale;
  2765. font-weight: 400;
  2766. position: relative;
  2767. height: 22px;
  2768. width: 22px;
  2769. pointer-events: none;
  2770. }
  2771. .checkbox__input,
  2772. .checkbox__input:checked {
  2773. position: absolute;
  2774. right: 0;
  2775. top: 0;
  2776. left: 0;
  2777. bottom: 0;
  2778. padding: 0;
  2779. border: 0;
  2780. background-color: transparent;
  2781. z-index: 1;
  2782. vertical-align: top;
  2783. outline: none;
  2784. width: 100%;
  2785. height: 100%;
  2786. margin: 0;
  2787. -webkit-appearance: none;
  2788. -moz-appearance: none;
  2789. appearance: none;
  2790. }
  2791. .checkbox__checkmark:before {
  2792. content: '';
  2793. position: absolute;
  2794. box-sizing: border-box;
  2795. background-clip: padding-box;
  2796. width: 22px;
  2797. height: 22px;
  2798. background: transparent;
  2799. border: 1px solid #c7c7cd;
  2800. border-radius: 22px;
  2801. left: 0;
  2802. }
  2803. /* checkmark's line */
  2804. .checkbox__checkmark:after {
  2805. content: '';
  2806. position: absolute;
  2807. top: 7px;
  2808. left: 5px;
  2809. width: 11px;
  2810. height: 5px;
  2811. background: transparent;
  2812. border: 2px solid #fff;
  2813. border-width: 1px;
  2814. border-top: none;
  2815. border-right: none;
  2816. border-radius: 0;
  2817. -webkit-transform: rotate(-45deg);
  2818. transform: rotate(-45deg);
  2819. opacity: 0;
  2820. }
  2821. :checked + .checkbox__checkmark:before {
  2822. background: #0076ff;
  2823. border: none;
  2824. }
  2825. :checked + .checkbox__checkmark:after {
  2826. opacity: 1;
  2827. }
  2828. :disabled + .checkbox__checkmark {
  2829. opacity: 0.3;
  2830. cursor: default;
  2831. pointer-events: none;
  2832. }
  2833. :disabled:active + .checkbox__checkmark:before { /* FIXME */
  2834. background: transparent;
  2835. }
  2836. /*~
  2837. name: No border Checkbox
  2838. category: Checkbox
  2839. elements: ons-input
  2840. markup: |
  2841. <label class="checkbox--noborder">
  2842. <input type="checkbox" class="checkbox__input checkbox--noborder__input">
  2843. <div class="checkbox__checkmark checkbox--noborder__checkmark"></div>
  2844. OFF
  2845. </label>
  2846. <label class="checkbox--noborder">
  2847. <input type="checkbox" class="checkbox__input checkbox--noborder__input" checked="checked">
  2848. <div class="checkbox__checkmark checkbox--noborder__checkmark"></div>
  2849. ON
  2850. </label>
  2851. <label class="checkbox--noborder">
  2852. <input type="checkbox" class="checkbox__input checkbox--noborder__input" disabled checked="checked">
  2853. <div class="checkbox__checkmark checkbox--noborder__checkmark"></div>
  2854. Disabled
  2855. </label>
  2856. */
  2857. .checkbox--noborder {
  2858. position: relative;
  2859. display: inline-block;
  2860. vertical-align: top;
  2861. cursor: default;
  2862. -webkit-user-select: none;
  2863. -moz-user-select: none;
  2864. -ms-user-select: none;
  2865. user-select: none;
  2866. font-family: -apple-system, 'Helvetica Neue', 'Helvetica', 'Arial', 'Lucida Grande', sans-serif;
  2867. -webkit-font-smoothing: antialiased;
  2868. -moz-osx-font-smoothing: grayscale;
  2869. font-weight: 400;
  2870. line-height: 22px;
  2871. position: relative;
  2872. }
  2873. .checkbox--noborder__input {
  2874. position: absolute;
  2875. right: 0;
  2876. top: 0;
  2877. left: 0;
  2878. bottom: 0;
  2879. padding: 0;
  2880. border: 0;
  2881. background-color: transparent;
  2882. z-index: 1;
  2883. vertical-align: top;
  2884. outline: none;
  2885. width: 100%;
  2886. height: 100%;
  2887. margin: 0;
  2888. -webkit-appearance: none;
  2889. -moz-appearance: none;
  2890. appearance: none;
  2891. }
  2892. .checkbox--noborder__checkmark {
  2893. position: relative;
  2894. display: inline-block;
  2895. vertical-align: top;
  2896. cursor: default;
  2897. -webkit-user-select: none;
  2898. -moz-user-select: none;
  2899. -ms-user-select: none;
  2900. user-select: none;
  2901. box-sizing: border-box;
  2902. background-clip: padding-box;
  2903. width: 22px;
  2904. height: 22px;
  2905. background: transparent;
  2906. border: none;
  2907. }
  2908. .checkbox--noborder__checkmark:before {
  2909. content: '';
  2910. position: absolute;
  2911. width: 22px;
  2912. height: 22px;
  2913. background: transparent;
  2914. border: none;
  2915. border-radius: 22px;
  2916. left: 0;
  2917. }
  2918. /* checkmark's line */
  2919. .checkbox--noborder__checkmark:after {
  2920. content: '';
  2921. position: absolute;
  2922. top: 7px;
  2923. left: 4px;
  2924. opacity: 0;
  2925. width: 11px;
  2926. height: 4px;
  2927. background: transparent;
  2928. border: 2px solid #0076ff;
  2929. border-top: none;
  2930. border-right: none;
  2931. border-radius: 0;
  2932. -webkit-transform: rotate(-45deg);
  2933. transform: rotate(-45deg);
  2934. }
  2935. :checked + .checkbox--noborder__checkmark:before {
  2936. background: transparent;
  2937. border: none;
  2938. }
  2939. :checked + .checkbox--noborder__checkmark:after {
  2940. opacity: 1;
  2941. }
  2942. :focus + .checkbox--noborder__checkmark:before {
  2943. border: none;
  2944. }
  2945. :disabled + .checkbox--noborder__checkmark {
  2946. opacity: 0.3;
  2947. cursor: default;
  2948. pointer-events: none;
  2949. }
  2950. :disabled:active + .checkbox--noborder__checkmark:before {
  2951. background: transparent;
  2952. border: none;
  2953. }
  2954. /*~
  2955. name: Material Checkbox
  2956. category: Checkbox
  2957. elements: ons-input
  2958. markup: |
  2959. <label class="checkbox checkbox--material">
  2960. <input type="checkbox" class="checkbox__input checkbox--material__input">
  2961. <div class="checkbox__checkmark checkbox--material__checkmark"></div>
  2962. OFF
  2963. </label>
  2964. <label class="checkbox checkbox--material">
  2965. <input type="checkbox" class="checkbox__input checkbox--material__input" checked="checked">
  2966. <div class="checkbox__checkmark checkbox--material__checkmark"></div>
  2967. ON
  2968. </label>
  2969. <label class="checkbox checkbox--material">
  2970. <input type="checkbox" class="checkbox__input checkbox--material__input" checked="checked" disabled>
  2971. <div class="checkbox__checkmark checkbox--material__checkmark"></div>
  2972. ON
  2973. </label>
  2974. <label class="checkbox checkbox--material">
  2975. <input type="checkbox" class="checkbox__input checkbox--material__input" disabled>
  2976. <div class="checkbox__checkmark checkbox--material__checkmark"></div>
  2977. Disabled
  2978. </label>
  2979. */
  2980. .checkbox--material {
  2981. line-height: 18px;
  2982. font-family: 'Roboto', 'Noto', sans-serif;
  2983. -webkit-font-smoothing: antialiased;
  2984. font-weight: 400;
  2985. overflow: visible;
  2986. }
  2987. .checkbox--material__checkmark {
  2988. width: 18px;
  2989. height: 18px;
  2990. }
  2991. .checkbox--material__checkmark:before {
  2992. border-radius: 2px;
  2993. height: 18px;
  2994. width: 18px;
  2995. border: 2px solid #717171;
  2996. transition: background-color 0.1s linear 0.2s, border-color 0.1s linear 0.2s;
  2997. background-color: transparent;
  2998. }
  2999. :checked + .checkbox--material__checkmark:before {
  3000. border: 2px solid #37474f;
  3001. background-color: #37474f;
  3002. transition: background-color 0.1s linear, border-color 0.1s linear;
  3003. }
  3004. .checkbox--material__checkmark:after {
  3005. border-color: #ffffff;
  3006. transition: -webkit-transform 0.2s ease 0;
  3007. transition: transform 0.2s ease 0;
  3008. transition: transform 0.2s ease 0, -webkit-transform 0.2s ease 0;
  3009. width: 10px;
  3010. height: 5px;
  3011. top: 4px;
  3012. left: 3px;
  3013. -webkit-transform: scale(0) rotate(-45deg);
  3014. transform: scale(0) rotate(-45deg);
  3015. border-width: 2px;
  3016. }
  3017. :checked + .checkbox--material__checkmark:after {
  3018. transition: -webkit-transform 0.2s ease 0.2s;
  3019. transition: transform 0.2s ease 0.2s;
  3020. transition: transform 0.2s ease 0.2s, -webkit-transform 0.2s ease 0.2s;
  3021. width: 10px;
  3022. height: 5px;
  3023. top: 4px;
  3024. left: 3px;
  3025. -webkit-transform: scale(1) rotate(-45deg);
  3026. transform: scale(1) rotate(-45deg);
  3027. border-width: 2px;
  3028. }
  3029. /* active ring effect */
  3030. .checkbox--material__input:before {
  3031. content: '';
  3032. opacity: 0;
  3033. position: absolute;
  3034. top: 0;
  3035. left: 0;
  3036. width: 18px;
  3037. height: 18px;
  3038. box-shadow: 0 0 0 11px #717171;
  3039. box-sizing: border-box;
  3040. border-radius: 50%;
  3041. background-color: #717171;
  3042. pointer-events: none;
  3043. display: block;
  3044. -webkit-transform: scale3d(0.2, 0.2, 0.2);
  3045. transform: scale3d(0.2, 0.2, 0.2);
  3046. transition: opacity 0.25s ease-out, -webkit-transform 0.1s ease-out;
  3047. transition: opacity 0.25s ease-out, transform 0.1s ease-out;
  3048. transition: opacity 0.25s ease-out, transform 0.1s ease-out, -webkit-transform 0.1s ease-out;
  3049. }
  3050. .checkbox--material__input:checked:before {
  3051. box-shadow: 0 0 0 11px #37474f;
  3052. background-color: #37474f;
  3053. }
  3054. .checkbox--material__input:active:before {
  3055. opacity: .15;
  3056. -webkit-transform: scale3d(1, 1, 1);
  3057. transform: scale3d(1, 1, 1);
  3058. }
  3059. :disabled + .checkbox--material__checkmark {
  3060. opacity: 1;
  3061. }
  3062. :disabled + .checkbox--material__checkmark:before {
  3063. border-color: #afafaf;
  3064. }
  3065. :disabled:checked + .checkbox--material__checkmark:before {
  3066. background-color: #afafaf;
  3067. }
  3068. :disabled:checked + .checkbox--material__checkmark:after {
  3069. border-color: #ffffff;
  3070. }
  3071. /*~
  3072. name: Radio Button
  3073. category: Radio Button
  3074. elements: ons-input
  3075. markup: |
  3076. <label class="radio-button">
  3077. <input type="radio" class="radio-button__input" name="r" checked="checked">
  3078. <div class="radio-button__checkmark"></div>
  3079. Label
  3080. </label>
  3081. <label class="radio-button">
  3082. <input type="radio" class="radio-button__input" name="r">
  3083. <div class="radio-button__checkmark"></div>
  3084. Label
  3085. </label>
  3086. <label class="radio-button">
  3087. <input type="radio" class="radio-button__input" name="r">
  3088. <div class="radio-button__checkmark"></div>
  3089. Label
  3090. </label>
  3091. */
  3092. .radio-button__input {
  3093. position: absolute;
  3094. right: 0;
  3095. top: 0;
  3096. left: 0;
  3097. bottom: 0;
  3098. padding: 0;
  3099. border: 0;
  3100. background-color: transparent;
  3101. z-index: 1;
  3102. vertical-align: top;
  3103. outline: none;
  3104. width: 100%;
  3105. height: 100%;
  3106. margin: 0;
  3107. -webkit-appearance: none;
  3108. -moz-appearance: none;
  3109. appearance: none;
  3110. }
  3111. .radio-button__input:active,
  3112. .radio-button__input:focus {
  3113. outline: 0;
  3114. -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  3115. }
  3116. .radio-button {
  3117. position: relative;
  3118. display: inline-block;
  3119. vertical-align: top;
  3120. cursor: default;
  3121. -webkit-user-select: none;
  3122. -moz-user-select: none;
  3123. -ms-user-select: none;
  3124. user-select: none;
  3125. position: relative;
  3126. line-height: 24px;
  3127. text-align: left;
  3128. }
  3129. .radio-button__checkmark:before {
  3130. content: '';
  3131. position: absolute;
  3132. border-radius: 100%;
  3133. box-sizing: border-box;
  3134. background-clip: padding-box;
  3135. width: 22px;
  3136. height: 22px;
  3137. background: transparent;
  3138. border: none;
  3139. border-radius: 22px;
  3140. left: 0;
  3141. }
  3142. .radio-button__checkmark {
  3143. box-sizing: border-box;
  3144. background-clip: padding-box;
  3145. position: relative;
  3146. display: inline-block;
  3147. vertical-align: top;
  3148. cursor: default;
  3149. -webkit-user-select: none;
  3150. -moz-user-select: none;
  3151. -ms-user-select: none;
  3152. user-select: none;
  3153. font-family: -apple-system, 'Helvetica Neue', 'Helvetica', 'Arial', 'Lucida Grande', sans-serif;
  3154. -webkit-font-smoothing: antialiased;
  3155. -moz-osx-font-smoothing: grayscale;
  3156. font-weight: 400;
  3157. position: relative;
  3158. position: relative;
  3159. width: 24px;
  3160. height: 24px;
  3161. background: transparent;
  3162. pointer-events: none;
  3163. }
  3164. .radio-button__checkmark:after {
  3165. content: '';
  3166. position: absolute;
  3167. top: 7px;
  3168. left: 4px;
  3169. opacity: 0;
  3170. width: 11px;
  3171. height: 4px;
  3172. background: transparent;
  3173. border: 2px solid #0076ff;
  3174. border-top: none;
  3175. border-right: none;
  3176. border-radius: 0;
  3177. -webkit-transform: rotate(-45deg);
  3178. transform: rotate(-45deg);
  3179. }
  3180. :checked + .radio-button__checkmark {
  3181. background: rgba(0, 0, 0, 0);
  3182. }
  3183. :checked + .radio-button__checkmark:after {
  3184. opacity: 1;
  3185. }
  3186. :checked + .radio-button__checkmark:before {
  3187. background: transparent;
  3188. border: none;
  3189. }
  3190. :disabled + .radio-button__checkmark {
  3191. opacity: 0.3;
  3192. cursor: default;
  3193. pointer-events: none;
  3194. }
  3195. /*~
  3196. name: Material Radio Button
  3197. category: Radio Button
  3198. elements: ons-input
  3199. markup: |
  3200. <label class="radio-button radio-button--material">
  3201. <input type="radio" class="radio-button__input radio-button--material__input" name="r" checked="checked">
  3202. <div class="radio-button__checkmark radio-button--material__checkmark"></div>
  3203. Label
  3204. </label>
  3205. <label class="radio-button radio-button--material">
  3206. <input type="radio" class="radio-button__input radio-button--material__input" name="r">
  3207. <div class="radio-button__checkmark radio-button--material__checkmark"></div>
  3208. Label
  3209. </label>
  3210. <label class="radio-button radio-button--material">
  3211. <input type="radio" class="radio-button__input radio-button--material__input" name="s" disabled checked>
  3212. <div class="radio-button__checkmark radio-button--material__checkmark"></div>
  3213. Label
  3214. </label>
  3215. <label class="radio-button radio-button--material">
  3216. <input type="radio" class="radio-button__input radio-button--material__input" name="s" disabled>
  3217. <div class="radio-button__checkmark radio-button--material__checkmark"></div>
  3218. Label
  3219. </label>
  3220. */
  3221. .radio-button--material {
  3222. line-height: 22px;
  3223. font-family: 'Roboto', 'Noto', sans-serif;
  3224. -webkit-font-smoothing: antialiased;
  3225. font-weight: 400;
  3226. }
  3227. .radio-button--material__input:before {
  3228. content: '';
  3229. position: absolute;
  3230. top: 0;
  3231. left: 0;
  3232. opacity: 0;
  3233. width: 20px;
  3234. height: 20px;
  3235. box-shadow: 0 0 0 14px #717171;
  3236. border: none;
  3237. box-sizing: border-box;
  3238. border-radius: 50%;
  3239. background-color: #717171;
  3240. pointer-events: none;
  3241. display: block;
  3242. -webkit-transform: scale3d(0.2, 0.2, 0.2);
  3243. transform: scale3d(0.2, 0.2, 0.2);
  3244. transition: opacity 0.25s ease-out, -webkit-transform 0.1s ease-out;
  3245. transition: opacity 0.25s ease-out, transform 0.1s ease-out;
  3246. transition: opacity 0.25s ease-out, transform 0.1s ease-out, -webkit-transform 0.1s ease-out;
  3247. }
  3248. .radio-button--material__input:checked:before {
  3249. box-shadow: 0 0 0 14px #37474f;
  3250. background-color: #37474f;
  3251. }
  3252. .radio-button--material__input:active:before {
  3253. opacity: .15;
  3254. -webkit-transform: scale3d(1, 1, 1);
  3255. transform: scale3d(1, 1, 1);
  3256. }
  3257. .radio-button--material__checkmark {
  3258. width: 20px;
  3259. height: 20px;
  3260. overflow: visible;
  3261. }
  3262. .radio-button--material__checkmark:before {
  3263. background: transparent;
  3264. border: 2px solid #717171;
  3265. box-sizing: border-box;
  3266. border-radius: 50%;
  3267. width: 20px;
  3268. height: 20px;
  3269. transition: border 0.2s ease;
  3270. }
  3271. .radio-button--material__checkmark:after {
  3272. transition: background 0.2s ease, -webkit-transform 0.2s ease;
  3273. transition: background 0.2s ease, transform 0.2s ease;
  3274. transition: background 0.2s ease, transform 0.2s ease, -webkit-transform 0.2s ease;
  3275. top: 5px;
  3276. left: 5px;
  3277. width: 10px;
  3278. height: 10px;
  3279. border: none;
  3280. border-radius: 50%;
  3281. -webkit-transform: scale(0);
  3282. transform: scale(0);
  3283. }
  3284. :checked + .radio-button--material__checkmark:before {
  3285. background: transparent;
  3286. border: 2px solid #37474f;
  3287. }
  3288. .radio-button--material__input + .radio-button__checkmark:after {
  3289. background: #717171;
  3290. opacity: 1;
  3291. -webkit-transform: scale(0);
  3292. transform: scale(0);
  3293. }
  3294. :checked + .radio-button--material__checkmark:after {
  3295. opacity: 1;
  3296. background: #37474f;
  3297. -webkit-transform: scale(1);
  3298. transform: scale(1);
  3299. }
  3300. :disabled + .radio-button--material__checkmark {
  3301. opacity: 1;
  3302. }
  3303. :disabled + .radio-button--material__checkmark:after {
  3304. background-color: #afafaf;
  3305. border-color: #afafaf;
  3306. }
  3307. :disabled + .radio-button--material__checkmark:before {
  3308. border-color: #afafaf;
  3309. }
  3310. /*~
  3311. name: List
  3312. category: List
  3313. elements: ons-list ons-list-item
  3314. markup: |
  3315. <ul class="list">
  3316. <li class="list-item">
  3317. <div class="list-item__center">Dog</div>
  3318. </li>
  3319. <li class="list-item">
  3320. <div class="list-item__center">Cat</div>
  3321. </li>
  3322. <li class="list-item">
  3323. <div class="list-item__center">Hamster</div>
  3324. </li>
  3325. </ul>
  3326. */
  3327. .list {
  3328. padding: 0;
  3329. margin: 0;
  3330. font: inherit;
  3331. color: inherit;
  3332. background: transparent;
  3333. border: none;
  3334. line-height: normal;
  3335. cursor: default;
  3336. -webkit-user-select: none;
  3337. -moz-user-select: none;
  3338. -ms-user-select: none;
  3339. user-select: none;
  3340. font-family: -apple-system, 'Helvetica Neue', 'Helvetica', 'Arial', 'Lucida Grande', sans-serif;
  3341. -webkit-font-smoothing: antialiased;
  3342. -moz-osx-font-smoothing: grayscale;
  3343. font-weight: 400;
  3344. list-style-type: none;
  3345. text-align: left;
  3346. display: block;
  3347. -webkit-overflow-scrolling: touch;
  3348. overflow: hidden;
  3349. background-image:
  3350. linear-gradient(#ccc, #ccc),
  3351. linear-gradient(#ccc, #ccc);
  3352. background-size: 100% 1px, 100% 1px;
  3353. background-repeat: no-repeat;
  3354. background-position: bottom, top;
  3355. border: none;
  3356. background-color: #fff;
  3357. }
  3358. @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) {
  3359. .list {
  3360. background-image:
  3361. linear-gradient(0deg, #ccc, #ccc 50%, transparent 50%),
  3362. linear-gradient(180deg, #ccc, #ccc 50%, transparent 50%);
  3363. }
  3364. }
  3365. .list-item {
  3366. position: relative;
  3367. width: 100%;
  3368. list-style: none;
  3369. box-sizing: border-box;
  3370. display: -webkit-box;
  3371. display: -webkit-flex;
  3372. display: flex;
  3373. -webkit-box-orient: horizontal;
  3374. -webkit-box-direction: normal;
  3375. -webkit-flex-direction: row;
  3376. flex-direction: row;
  3377. -webkit-box-pack: start;
  3378. -webkit-justify-content: flex-start;
  3379. justify-content: flex-start;
  3380. -webkit-box-align: center;
  3381. -webkit-align-items: center;
  3382. align-items: center;
  3383. padding: 0 0 0 14px;
  3384. margin: 0 0 -1px 0;
  3385. color: #1f1f21;
  3386. transition: background-color 0.2s linear;
  3387. }
  3388. /*~
  3389. name: Expandable List
  3390. category: List
  3391. elements: ons-list ons-list-item
  3392. markup: |
  3393. <ul class="list">
  3394. <li class="list-item list-item--expandable expanded">
  3395. <div class="list-item__top">
  3396. <div class="list-item__center">Item</div>
  3397. <div class="list-item__right">
  3398. <span class="list-item__expand-chevron"></span>
  3399. </div>
  3400. </div>
  3401. <div class="list-item__expandable-content">Expanded content</div>
  3402. </li>
  3403. </ul>
  3404. */
  3405. .list-item__top {
  3406. display: -webkit-box;
  3407. display: -webkit-flex;
  3408. display: flex;
  3409. -webkit-box-orient: horizontal;
  3410. -webkit-box-direction: normal;
  3411. -webkit-flex-direction: row;
  3412. flex-direction: row;
  3413. -webkit-box-pack: start;
  3414. -webkit-justify-content: flex-start;
  3415. justify-content: flex-start;
  3416. -webkit-box-align: center;
  3417. -webkit-align-items: center;
  3418. align-items: center;
  3419. -webkit-box-ordinal-group: 1;
  3420. -webkit-order: 0;
  3421. order: 0;
  3422. width: 100%;
  3423. }
  3424. .list-item--expandable {
  3425. display: -webkit-box;
  3426. display: -webkit-flex;
  3427. display: flex;
  3428. -webkit-box-orient: vertical;
  3429. -webkit-box-direction: normal;
  3430. -webkit-flex-direction: column;
  3431. flex-direction: column;
  3432. border-bottom: none;
  3433. background-size: 100% 1px;
  3434. background-repeat: no-repeat;
  3435. background-position: bottom;
  3436. background-image: linear-gradient(0deg, #ccc, #ccc 100%);
  3437. }
  3438. @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) {
  3439. .list-item--expandable {
  3440. background-image: linear-gradient(0deg, #ccc, #ccc 50%, transparent 50%);
  3441. }
  3442. }
  3443. .list-item--expandable {
  3444. background-position-x: 14px;
  3445. }
  3446. .list-item__expandable-content {
  3447. display: none;
  3448. width: 100%;
  3449. padding: 12px 14px 12px 0;
  3450. box-sizing: border-box;
  3451. -webkit-box-ordinal-group: 2;
  3452. -webkit-order: 1;
  3453. order: 1;
  3454. overflow: hidden;
  3455. }
  3456. .list-item.expanded > .list-item__expandable-content {
  3457. display: block;
  3458. height: auto;
  3459. }
  3460. .list-item__left {
  3461. box-sizing: border-box;
  3462. display: -webkit-box;
  3463. display: -webkit-flex;
  3464. display: flex;
  3465. padding: 12px 14px 12px 0;
  3466. -webkit-box-ordinal-group: 1;
  3467. -webkit-order: 0;
  3468. order: 0;
  3469. -webkit-box-align: center;
  3470. -webkit-align-items: center;
  3471. align-items: center;
  3472. -webkit-align-self: stretch;
  3473. align-self: stretch;
  3474. line-height: 1.2em;
  3475. min-height: 44px;
  3476. }
  3477. .list-item__left:empty {
  3478. width: 0;
  3479. min-width: 0;
  3480. padding: 0;
  3481. margin: 0;
  3482. }
  3483. .list-item__center {
  3484. box-sizing: border-box;
  3485. display: -webkit-box;
  3486. display: -webkit-flex;
  3487. display: flex;
  3488. -webkit-box-flex: 1;
  3489. -webkit-flex-grow: 1;
  3490. flex-grow: 1;
  3491. -webkit-flex-wrap: wrap;
  3492. flex-wrap: wrap;
  3493. -webkit-box-orient: horizontal;
  3494. -webkit-box-direction: normal;
  3495. -webkit-flex-direction: row;
  3496. flex-direction: row;
  3497. -webkit-box-ordinal-group: 2;
  3498. -webkit-order: 1;
  3499. order: 1;
  3500. margin-right: auto;
  3501. -webkit-box-align: center;
  3502. -webkit-align-items: center;
  3503. align-items: center;
  3504. -webkit-align-self: stretch;
  3505. align-self: stretch;
  3506. margin-left: 0;
  3507. border-bottom: none;
  3508. background-size: 100% 1px;
  3509. background-repeat: no-repeat;
  3510. background-position: bottom;
  3511. background-image: linear-gradient(0deg, #ccc, #ccc 100%);
  3512. }
  3513. @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) {
  3514. .list-item__center {
  3515. background-image: linear-gradient(0deg, #ccc, #ccc 50%, transparent 50%);
  3516. }
  3517. }
  3518. .list-item__center {
  3519. padding: 12px 6px 12px 0;
  3520. line-height: 1.2em;
  3521. min-height: 44px;
  3522. }
  3523. .list-item__right {
  3524. box-sizing: border-box;
  3525. display: -webkit-box;
  3526. display: -webkit-flex;
  3527. display: flex;
  3528. margin-left: auto;
  3529. padding: 12px 12px 12px 0;
  3530. -webkit-box-ordinal-group: 3;
  3531. -webkit-order: 2;
  3532. order: 2;
  3533. -webkit-box-align: center;
  3534. -webkit-align-items: center;
  3535. align-items: center;
  3536. -webkit-align-self: stretch;
  3537. align-self: stretch;
  3538. border-bottom: none;
  3539. background-size: 100% 1px;
  3540. background-repeat: no-repeat;
  3541. background-position: bottom;
  3542. background-image: linear-gradient(0deg, #ccc, #ccc 100%);
  3543. }
  3544. @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) {
  3545. .list-item__right {
  3546. background-image: linear-gradient(0deg, #ccc, #ccc 50%, transparent 50%);
  3547. }
  3548. }
  3549. .list-item__right {
  3550. line-height: 1.2em;
  3551. min-height: 44px;
  3552. }
  3553. .list-header {
  3554. margin: 0;
  3555. list-style: none;
  3556. text-align: left;
  3557. display: block;
  3558. box-sizing: border-box;
  3559. padding: 0 0 0 15px;
  3560. font-size: 12px;
  3561. font-weight: 500;
  3562. color: #1f1f21;
  3563. min-height: 24px;
  3564. line-height: 25px;
  3565. text-transform: uppercase;
  3566. position: relative;
  3567. background-color: #eee;
  3568. background-size: 100% 1px;
  3569. background-repeat: no-repeat;
  3570. background-position: top;
  3571. background-image: linear-gradient(0deg, #ccc, #ccc 100%);
  3572. }
  3573. @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) {
  3574. .list-header {
  3575. background-image: linear-gradient(180deg, #ccc, #ccc 50%, transparent 50%);
  3576. }
  3577. }
  3578. /*~
  3579. name: Noborder List
  3580. category: List
  3581. elements: ons-list ons-list-item
  3582. markup: |
  3583. <ul class="list list--noborder">
  3584. <li class="list-item">
  3585. <div class="list-item__center">Item</div>
  3586. </li>
  3587. <li class="list-item">
  3588. <div class="list-item__center">Item</div>
  3589. </li>
  3590. </ul>
  3591. */
  3592. .list--noborder {
  3593. border-top: none;
  3594. border-bottom: none;
  3595. background-image: none;
  3596. }
  3597. /*~
  3598. name: Category List Header
  3599. category: List
  3600. elements: ons-list ons-list-header ons-list-item
  3601. markup: |
  3602. <ul class="list">
  3603. <li class="list-header">
  3604. Header
  3605. </li>
  3606. <li class="list-item">
  3607. <div class="list-item__center">Item</div>
  3608. </li>
  3609. <li class="list-item">
  3610. <div class="list-item__center">Item</div>
  3611. </li>
  3612. <li class="list-item">
  3613. <div class="list-item__center">Item</div>
  3614. </li>
  3615. </ul>
  3616. */
  3617. /*~
  3618. name: Tappable List
  3619. category: List
  3620. elements: ons-list ons-list-item
  3621. markup: |
  3622. <ul class="list">
  3623. <li class="list-item list-item--tappable">
  3624. <div class="list-item__center">Tappable Item</div>
  3625. </li>
  3626. <li class="list-item list-item--tappable">
  3627. <div class="list-item__center">Tappable Item</div>
  3628. </li>
  3629. <li class="list-item list-item--tappable">
  3630. <div class="list-item__center">Tappable Item</div>
  3631. </li>
  3632. </ul>
  3633. */
  3634. .list-item--tappable:active {
  3635. transition: none;
  3636. background-color: #d9d9d9;
  3637. }
  3638. /*~
  3639. name: Switch in List Item
  3640. category: List
  3641. elements: ons-list ons-list-item ons-switch
  3642. markup: |
  3643. <ul class="list">
  3644. <li class="list-item">
  3645. <div class="list-item__center">
  3646. Label
  3647. </div>
  3648. <div class="list-item__right">
  3649. <label class="switch">
  3650. <input type="checkbox" class="switch__input" checked>
  3651. <div class="switch__toggle">
  3652. <div class="switch__handle"></div>
  3653. </div>
  3654. </label>
  3655. </div>
  3656. </li>
  3657. <li class="list-item">
  3658. <div class="list-item__center">
  3659. Label
  3660. </div>
  3661. <div class="list-item__right">
  3662. <label class="switch">
  3663. <input type="checkbox" class="switch__input">
  3664. <div class="switch__toggle">
  3665. <div class="switch__handle"></div>
  3666. </div>
  3667. </label>
  3668. </div>
  3669. </li>
  3670. </ul>
  3671. */
  3672. /*~
  3673. name: Inset List
  3674. category: List
  3675. elements: ons-list ons-list-item
  3676. markup: |
  3677. <ul class="list list--inset">
  3678. <li class="list-item list--inset__item list-item--chevron list-item--tappable">
  3679. <div class="list-item__center">List Item with Chevron</div>
  3680. </li>
  3681. <li class="list-item list--inset__item list-item--chevron list-item--tappable">
  3682. <div class="list-item__center">List Item with Chevron</div>
  3683. </li>
  3684. </ul>
  3685. */
  3686. .list--inset {
  3687. margin: 0 8px;
  3688. border: 1px solid #ccc;
  3689. border-radius: 4px;
  3690. background-image: none;
  3691. }
  3692. /*~
  3693. name: Radio Button in List Item
  3694. category: List
  3695. elements: ons-list ons-list-item ons-input
  3696. markup: |
  3697. <ul class="list">
  3698. <li class="list-item list-item--tappable">
  3699. <div class="list-item__left">
  3700. <label class="radio-button">
  3701. <input type="radio" id="r1" class="radio-button__input" name="r" checked="checked">
  3702. <div class="radio-button__checkmark"></div>
  3703. </label>
  3704. </div>
  3705. <label for="r1" class="list-item__center">
  3706. Radio Button
  3707. </label>
  3708. </li>
  3709. <li class="list-item list-item--tappable">
  3710. <div class="list-item__left">
  3711. <label class="radio-button">
  3712. <input type="radio" id="r2" class="radio-button__input" name="r">
  3713. <div class="radio-button__checkmark"></div>
  3714. </label>
  3715. </div>
  3716. <label for="r2" class="list-item__center">
  3717. Radio Button
  3718. </label>
  3719. </li>
  3720. </ul>
  3721. */
  3722. /*~
  3723. name: Checkbox in List Item
  3724. category: List
  3725. elements: ons-list ons-list-item ons-input
  3726. markup: |
  3727. <ul class="list">
  3728. <li class="list-item list-item--tappable">
  3729. <div class="list-item__left">
  3730. <label class="checkbox">
  3731. <input type="checkbox" id="checkbox1" class="checkbox__input" name="c" checked="checked">
  3732. <div class="checkbox__checkmark"></div>
  3733. </label>
  3734. </div>
  3735. <label for="checkbox1" class="list-item__center">
  3736. Checkbox
  3737. </label>
  3738. </li>
  3739. <li class="list-item list-item--tappable">
  3740. <div class="list-item__left">
  3741. <label class="checkbox">
  3742. <input type="checkbox" id="checkbox2" class="checkbox__input" name="c">
  3743. <div class="checkbox__checkmark"></div>
  3744. </label>
  3745. </div>
  3746. <label for="checkbox2" class="list-item__center">
  3747. Checkbox
  3748. </label>
  3749. </li>
  3750. </ul>
  3751. */
  3752. /*~
  3753. name: No border Checkbox in List Item
  3754. category: List
  3755. elements: ons-list ons-list-item ons-input
  3756. markup: |
  3757. <ul class="list">
  3758. <li class="list-item list-item--tappable">
  3759. <div class="list-item__left">
  3760. <label class="checkbox checkbox--noborder">
  3761. <input id="s1" type="checkbox" class="checkbox__input checkbox--noborder__input">
  3762. <div class="checkbox__checkmark checkbox--noborder checkbox--noborder__checkmark"></div>
  3763. </label>
  3764. </div>
  3765. <label for="s1" class="list-item__center">
  3766. Checkbox
  3767. </label>
  3768. </li>
  3769. <li class="list-item list-item--tappable">
  3770. <div class="list-item__left">
  3771. <label class="checkbox checkbox--noborder">
  3772. <input id="s2" type="checkbox" class="checkbox__input checkbox--noborder__input" checked>
  3773. <div class="checkbox__checkmark checkbox--noborder checkbox--noborder__checkmark"></div>
  3774. </label>
  3775. </div>
  3776. <label for="s2" class="list-item__center">
  3777. Checkbox
  3778. </label>
  3779. </li>
  3780. </ul>
  3781. */
  3782. /*~
  3783. name: Text Input in List Item
  3784. category: List
  3785. elements: ons-list ons-list-item ons-input
  3786. markup: |
  3787. <ul class="list">
  3788. <li class="list-item">
  3789. <div class="list-item__center">
  3790. <input type="text" class="text-input" placeholder="Name">
  3791. </div>
  3792. </li>
  3793. <li class="list-item">
  3794. <div class="list-item__center">
  3795. <input type="text" class="text-input" placeholder="Email">
  3796. </div>
  3797. </li>
  3798. </ul>
  3799. */
  3800. /*~
  3801. name: Textarea in List Item
  3802. category: List
  3803. elements: ons-list ons-list-item
  3804. markup: |
  3805. <ul class="list">
  3806. <li class="list-item">
  3807. <div class="list-item__center">
  3808. <textarea class="textarea textarea--transparent" placeholder="Text message"></textarea>
  3809. </div>
  3810. </li>
  3811. </ul>
  3812. */
  3813. /*~
  3814. name: Right Label in List Item
  3815. category: List
  3816. elements: ons-list ons-list-item
  3817. markup: |
  3818. <ul class="list">
  3819. <li class="list-item">
  3820. <div class="list-item__center">
  3821. Title
  3822. </div>
  3823. <div class="list-item__right">
  3824. <div class="list-item__label">Label</div>
  3825. </div>
  3826. </li>
  3827. </ul>
  3828. */
  3829. .list-item__label {
  3830. font-size: 14px;
  3831. padding: 0 4px;
  3832. opacity: 0.6;
  3833. }
  3834. /*~
  3835. name: List Item with Subtitle
  3836. category: List
  3837. elements: ons-list ons-list-item
  3838. markup: |
  3839. <ul class="list">
  3840. <li class="list-item">
  3841. <div class="list-item__center">
  3842. <div class="list-item__title">
  3843. Title
  3844. </div>
  3845. <div class="list-item__subtitle">
  3846. Subtitle
  3847. </div>
  3848. </div>
  3849. </li>
  3850. </ul>
  3851. */
  3852. .list-item__title {
  3853. -webkit-flex-basis: 100%;
  3854. flex-basis: 100%;
  3855. -webkit-align-self: flex-end;
  3856. align-self: flex-end;
  3857. -webkit-box-ordinal-group: 1;
  3858. -webkit-order: 0;
  3859. order: 0;
  3860. }
  3861. .list-item__subtitle {
  3862. opacity: 0.75;
  3863. font-size: 14px;
  3864. -webkit-box-ordinal-group: 2;
  3865. -webkit-order: 1;
  3866. order: 1;
  3867. -webkit-flex-basis: 100%;
  3868. flex-basis: 100%;
  3869. -webkit-align-self: flex-start;
  3870. align-self: flex-start;
  3871. }
  3872. /*~
  3873. name: List Item with Thumbnail
  3874. category: List
  3875. elements: ons-list ons-list-item
  3876. markup: |
  3877. <ul class="list">
  3878. <li class="list-item">
  3879. <div class="list-item__left">
  3880. <img class="list-item__thumbnail" src="https://placekitten.com/g/40/40" alt="Cute kitten">
  3881. </div>
  3882. <div class="list-item__center">
  3883. <div class="list-item__title">Lily</div>
  3884. <div class="list-item__subtitle">Very friendly cat</div>
  3885. </div>
  3886. </li>
  3887. <li class="list-item">
  3888. <div class="list-item__left">
  3889. <img class="list-item__thumbnail" src="https://placekitten.com/g/40/40" alt="Cute kitten">
  3890. </div>
  3891. <div class="list-item__center">
  3892. <div class="list-item__title">Molly</div>
  3893. <div class="list-item__subtitle">Loves tuna!</div>
  3894. </div>
  3895. </li>
  3896. </ul>
  3897. */
  3898. .list-item__thumbnail {
  3899. width: 40px;
  3900. height: 40px;
  3901. border-radius: 6px;
  3902. display: block;
  3903. margin: 0;
  3904. }
  3905. /*~
  3906. name: List Item with Icon
  3907. category: List
  3908. elements: ons-list ons-list-item
  3909. markup: |
  3910. <ul class="list">
  3911. <li class="list-item">
  3912. <div class="list-item__left">
  3913. <img class="list-item__thumbnail" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAIAAAADnC86AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3wwJCB8v/9zErgAAABl0RVh0Q29tbWVudABDcmVhdGVkIHdpdGggR0lNUFeBDhcAAAAvSURBVFjD7c0BDQAACAMgtX+KJzWGm4MCdJK6MHVELBaLxWKxWCwWi8VisVj8MV7qBgI2A8rYpgAAAABJRU5ErkJggg==">
  3914. </div>
  3915. <div class="list-item__center">
  3916. <div class="list-item__title">Alice</div>
  3917. <div class="list-item__subtitle">Description</div>
  3918. </div>
  3919. <div class="list-item__right">
  3920. <i class="ion-ios-information list-item__icon"></i>
  3921. </div>
  3922. </li>
  3923. <li class="list-item">
  3924. <div class="list-item__left">
  3925. <img class="list-item__thumbnail" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAIAAAADnC86AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3wwJCB8v/9zErgAAABl0RVh0Q29tbWVudABDcmVhdGVkIHdpdGggR0lNUFeBDhcAAAAvSURBVFjD7c0BDQAACAMgtX+KJzWGm4MCdJK6MHVELBaLxWKxWCwWi8VisVj8MV7qBgI2A8rYpgAAAABJRU5ErkJggg==">
  3926. </div>
  3927. <div class="list-item__center">
  3928. <div class="list-item__title">Bob</div>
  3929. <div class="list-item__subtitle">Description</div>
  3930. </div>
  3931. <div class="list-item__right">
  3932. <i class="ion-ios-information list-item__icon"></i>
  3933. </div>
  3934. </li>
  3935. </ul>
  3936. */
  3937. .list-item__icon {
  3938. font-size: 22px;
  3939. padding: 0 6px;
  3940. }
  3941. /*~
  3942. name: Material List
  3943. category: List
  3944. elements: ons-list ons-list-item
  3945. markup: |
  3946. <ul class="list list--material">
  3947. <li class="list-item list-item--material">
  3948. <div class="list-item__center list-item--material__center">
  3949. <div class="list-item__title list-item--material__title">Orange</div>
  3950. <div class="list-item__subtitle list-item--material__subtitle">Sweet fruit that grows on trees.</div>
  3951. </div>
  3952. </li>
  3953. <li class="list-item list-item--material">
  3954. <div class="list-item__center list-item--material__center">
  3955. <div class="list-item__title list-item--material__title">Pear</div>
  3956. <div class="list-item__subtitle list-item--material__subtitle">Funny-shaped fruit.</div>
  3957. </div>
  3958. </li>
  3959. </ul>
  3960. */
  3961. .list--material {
  3962. font-family: 'Roboto', 'Noto', sans-serif;
  3963. -webkit-font-smoothing: antialiased;
  3964. font-weight: 400;
  3965. background-image: none;
  3966. background-color: #fff;
  3967. }
  3968. .list-item--material {
  3969. border: 0;
  3970. padding: 0 0 0 16px;
  3971. line-height: normal;
  3972. }
  3973. .list-item--material__subtitle {
  3974. margin-top: 4px;
  3975. }
  3976. .list-item--material:first-child {
  3977. box-shadow: none;
  3978. }
  3979. .list-item--material__left {
  3980. padding: 14px 0;
  3981. min-width: 56px;
  3982. line-height: 1;
  3983. min-height: 48px;
  3984. }
  3985. .list-item--material__left:empty,
  3986. .list-item--material__center {
  3987. padding: 14px 6px 14px 0;
  3988. border-color: #eee;
  3989. border-bottom: none;
  3990. background-size: 100% 1px;
  3991. background-repeat: no-repeat;
  3992. background-position: bottom;
  3993. background-image: linear-gradient(0deg, #eee, #eee 100%);
  3994. }
  3995. @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) {
  3996. .list-item--material__left:empty,
  3997. .list-item--material__center {
  3998. background-image: linear-gradient(0deg, #eee, #eee 50%, transparent 50%);
  3999. }
  4000. }
  4001. .list-item--material__left:empty,
  4002. .list-item--material__center {
  4003. min-height: 48px;
  4004. }
  4005. .list-item--material__right {
  4006. padding: 14px 16px 14px 0;
  4007. line-height: 1;
  4008. border-color: #eee;
  4009. border-bottom: none;
  4010. background-size: 100% 1px;
  4011. background-repeat: no-repeat;
  4012. background-position: bottom;
  4013. background-image: linear-gradient(0deg, #eee, #eee 100%);
  4014. }
  4015. @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) {
  4016. .list-item--material__right {
  4017. background-image: linear-gradient(0deg, #eee, #eee 50%, transparent 50%);
  4018. }
  4019. }
  4020. .list-item--material__right {
  4021. min-height: 48px;
  4022. }
  4023. .list-item--material.list-item--expandable {
  4024. border-bottom: 1px solid #eee;
  4025. border-bottom: none;
  4026. background-size: 100% 1px;
  4027. background-repeat: no-repeat;
  4028. background-position: bottom;
  4029. background-image: linear-gradient(0deg, #eee, #eee 100%);
  4030. }
  4031. @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) {
  4032. .list-item--material.list-item--expandable {
  4033. background-image: linear-gradient(0deg, #eee, #eee 50%, transparent 50%);
  4034. }
  4035. }
  4036. .list-item--material.list-item--expandable {
  4037. background-position-x: 16px;
  4038. }
  4039. .list-item--material.list-item--longdivider,
  4040. .list-item--material.list-item--expandable.list-item--longdivider
  4041. {
  4042. border-bottom: 1px solid #eee;
  4043. border-bottom: none;
  4044. background-size: 100% 1px;
  4045. background-repeat: no-repeat;
  4046. background-position: bottom;
  4047. background-image: linear-gradient(0deg, #eee, #eee 100%);
  4048. }
  4049. @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) {
  4050. .list-item--material.list-item--longdivider,
  4051. .list-item--material.list-item--expandable.list-item--longdivider
  4052. {
  4053. background-image: linear-gradient(0deg, #eee, #eee 50%, transparent 50%);
  4054. }
  4055. }
  4056. /*~
  4057. name: Material List with Header
  4058. category: List
  4059. elements: ons-list ons-list-item
  4060. markup: |
  4061. <ul class="list list--material">
  4062. <li class="list-header list-header--material">
  4063. Fruits
  4064. </li>
  4065. <li class="list-item list-item--material">
  4066. <div class="list-item__center list-item--material__center">
  4067. <div class="list-item__title list-item--material__title">Orange</div>
  4068. <div class="list-item__subtitle list-item--material__subtitle">Sweet fruit that grows on trees.</div>
  4069. </div>
  4070. </li>
  4071. </ul>
  4072. */
  4073. .list-header--material {
  4074. background: #fff;
  4075. border: none;
  4076. font-size: 14px;
  4077. text-transform: none;
  4078. margin: -1px 0 0 0;
  4079. color: #757575;
  4080. font-weight: 500;
  4081. padding: 8px 16px;
  4082. }
  4083. .list-header--material:not(:first-of-type) {
  4084. border-top: none;
  4085. background-size: 100% 1px;
  4086. background-repeat: no-repeat;
  4087. background-position: top;
  4088. background-image: linear-gradient(180deg, #eee, #eee 100%);
  4089. }
  4090. @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) {
  4091. .list-header--material:not(:first-of-type) {
  4092. background-image: linear-gradient(180deg, #eee, #eee 50%, transparent 50%);
  4093. }
  4094. }
  4095. .list-header--material:not(:first-of-type) {
  4096. padding-top: 16px;
  4097. }
  4098. /*~
  4099. name: Material List with Checkboxes
  4100. category: List
  4101. elements: ons-list ons-list-item ons-input
  4102. markup: |
  4103. <ul class="list list--material">
  4104. <li class="list-item list-item--material">
  4105. <div class="list-item__left list-item--material__left">
  4106. <label class="checkbox checkbox--material">
  4107. <input type="checkbox" id="checkbox3" class="checkbox__input checkbox--material__input">
  4108. <div class="checkbox__checkmark checkbox--material__checkmark"></div>
  4109. </label>
  4110. </div>
  4111. <label for="checkbox3" class="list-item__center list-item--material__center">
  4112. <div class="list-item__title list-item--material__title">Notifications</div>
  4113. <div class="list-item__subtitle list-item--material__subtitle">Allow notifications</div>
  4114. </label>
  4115. </li>
  4116. <li class="list-item list-item--material">
  4117. <div class="list-item__left list-item--material__left">
  4118. <label class="checkbox checkbox--material">
  4119. <input type="checkbox" id="checkbox4" class="checkbox__input checkbox--material__input" checked="checked">
  4120. <div class="checkbox__checkmark checkbox--material__checkmark"></div>
  4121. </label>
  4122. </div>
  4123. <label for="checkbox4" class="list-item__center list-item--material__center">
  4124. <div class="list-item__title list-item--material__title">Sound</div>
  4125. <div class="list-item__subtitle list-item--material__subtitle">Hangouts message</div>
  4126. </label>
  4127. </li>
  4128. </ul>
  4129. */
  4130. /*~
  4131. name: Material List with Thumbnails
  4132. category: List
  4133. markup: |
  4134. <ul class="list list--material">
  4135. <li class="list-item list-item--material">
  4136. <div class="list-item__left list-item--material__left">
  4137. <img class="list-item__thumbnail list-item--material__thumbnail" src="https://placekitten.com/g/42/41" alt="Cute kitten">
  4138. </div>
  4139. <div class="list-item__center list-item--material__center">
  4140. <div class="list-item__title list-item--material__title">Lily</div>
  4141. <div class="list-item__subtitle list-item--material__subtitle">Very friendly cat</div>
  4142. </div>
  4143. </li>
  4144. <li class="list-item list-item--material">
  4145. <div class="list-item__left list-item--material__left">
  4146. <img class="list-item__thumbnail list-item--material__thumbnail" src="https://placekitten.com/g/40/40" alt="Cute kitten">
  4147. </div>
  4148. <div class="list-item__center list-item--material__center">
  4149. <div class="list-item__title list-item--material__title">Molly</div>
  4150. <div class="list-item__subtitle list-item--material__subtitle">Loves tuna!</div>
  4151. </div>
  4152. </li>
  4153. </ul>
  4154. */
  4155. .list-item--material__thumbnail {
  4156. width: 40px;
  4157. height: 40px;
  4158. border-radius: 100%;
  4159. }
  4160. /*~
  4161. name: Material List with Icons
  4162. category: List
  4163. markup: |
  4164. <ul class="list list--material">
  4165. <li class="list-item list-item--material">
  4166. <div class="list-item__left list-item--material__left">
  4167. <img class="list-item__thumbnail list-item--material__thumbnail" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAIAAAADnC86AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3wwJCB8v/9zErgAAABl0RVh0Q29tbWVudABDcmVhdGVkIHdpdGggR0lNUFeBDhcAAAAvSURBVFjD7c0BDQAACAMgtX+KJzWGm4MCdJK6MHVELBaLxWKxWCwWi8VisVj8MV7qBgI2A8rYpgAAAABJRU5ErkJggg==">
  4168. </div>
  4169. <div class="list-item__center list-item--material__center">
  4170. <div class="list-item__title list-item--material__title">Alice</div>
  4171. <div class="list-item__subtitle list-item--material__subtitle">Description</div>
  4172. </div>
  4173. <div class="list-item__right list-item--material__right">
  4174. <i style="color:#ccc" class="list-item__icon list-item--material__icon zmdi zmdi-comment"></i>
  4175. </div>
  4176. </li>
  4177. <li class="list-item list-item--material">
  4178. <div class="list-item__left list-item--material__left">
  4179. <img class="list-item__thumbnail list-item--material__thumbnail" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAIAAAADnC86AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3wwJCB8v/9zErgAAABl0RVh0Q29tbWVudABDcmVhdGVkIHdpdGggR0lNUFeBDhcAAAAvSURBVFjD7c0BDQAACAMgtX+KJzWGm4MCdJK6MHVELBaLxWKxWCwWi8VisVj8MV7qBgI2A8rYpgAAAABJRU5ErkJggg==">
  4180. </div>
  4181. <div class="list-item__center list-item--material__center">
  4182. <div class="list-item__title list-item--material__title">Bob</div>
  4183. <div class="list-item__subtitle list-item--material__subtitle">Description</div>
  4184. </div>
  4185. <div class="list-item__right list-item--material__right">
  4186. <i style="color:#ccc" class="list-item__icon list-item--material__icon zmdi zmdi-comment"></i>
  4187. </div>
  4188. </li>
  4189. </ul>
  4190. */
  4191. .list-item--material__icon {
  4192. font-size: 20px;
  4193. padding: 0 4px;
  4194. }
  4195. /*~
  4196. name: List Item with Chevron
  4197. category: List
  4198. elements: ons-list ons-list-item
  4199. markup: |
  4200. <ul class="list">
  4201. <li class="list-item list-item--chevron">
  4202. <div class="list-item__center">Item A</div>
  4203. </li>
  4204. <li class="list-item list-item--chevron">
  4205. <div class="list-item__center">Item B</div>
  4206. <div class="list-item__right list-item--chevron__right">
  4207. <div class="list-item__label">Label</div>
  4208. </div>
  4209. </li>
  4210. </ul>
  4211. */
  4212. .list-item--chevron:before,
  4213. .list-item__expand-chevron {
  4214. border-right: 2px solid #c7c7cc;
  4215. border-bottom: 2px solid #c7c7cc;
  4216. width: 7px;
  4217. height: 7px;
  4218. background-color: transparent;
  4219. z-index: 5;
  4220. }
  4221. .list-item--chevron:before {
  4222. position: absolute;
  4223. content: '';
  4224. right: 16px;
  4225. top: 50%;
  4226. -webkit-transform: translateY(-50%) rotate(-45deg);
  4227. transform: translateY(-50%) rotate(-45deg);
  4228. }
  4229. .list-item__expand-chevron {
  4230. -webkit-transform: rotate(45deg);
  4231. transform: rotate(45deg);
  4232. margin: 1px; /* this improves alignment with normal chevrons */
  4233. }
  4234. .list-item--expandable.expanded .list-item__expand-chevron {
  4235. -webkit-transform: rotate(225deg);
  4236. transform: rotate(225deg);
  4237. }
  4238. .list-item--chevron__right {
  4239. padding-right: 30px;
  4240. }
  4241. /*~
  4242. name: Nodivider List Item with Chevron
  4243. category: List
  4244. elements: ons-list ons-list-item
  4245. markup: |
  4246. <ul class="list">
  4247. <li class="list-item list-item--nodivider list-item--chevron">
  4248. <div class="list-item__center list-item--nodivider__center">Item A</div>
  4249. </li>
  4250. <li class="list-item list-item--nodivider list-item--chevron">
  4251. <div class="list-item__center list-item--nodivider__center">Item B</div>
  4252. <div class="list-item__right list-item--nodivider__right list-item--chevron__right">
  4253. <div class="list-item__label">Label</div>
  4254. </div>
  4255. </li>
  4256. </ul>
  4257. */
  4258. /*~
  4259. name: List item without divider
  4260. category: List
  4261. markup: |
  4262. <ul class="list">
  4263. <li class="list-item list-item--nodivider">
  4264. <div class="list-item__center list-item--nodivider__center">Item</div>
  4265. </li>
  4266. <li class="list-item list-item--nodivider">
  4267. <div class="list-item__center list-item--nodivider__center">Item</div>
  4268. </li>
  4269. </ul>
  4270. */
  4271. .list-item--nodivider__center,
  4272. .list-item--nodivider__right,
  4273. .list-item--nodivider.list-item--expandable,
  4274. .list-item--expandable .list-item__center,
  4275. .list-item--expandable .list-item__right {
  4276. border: none;
  4277. background-image: none;
  4278. }
  4279. /*~
  4280. name: List item with long divider
  4281. category: List
  4282. markup: |
  4283. <ul class="list">
  4284. <li class="list-item list-item--longdivider">
  4285. <div class="list-item__center list-item--longdivider__center">Item</div>
  4286. </li>
  4287. <li class="list-item list-item--longdivider">
  4288. <div class="list-item__center list-item--longdivider__center">Item</div>
  4289. </li>
  4290. </ul>
  4291. */
  4292. .list-item--longdivider {
  4293. border-bottom: 1px solid #ccc;
  4294. border-bottom: none;
  4295. background-size: 100% 1px;
  4296. background-repeat: no-repeat;
  4297. background-position: bottom;
  4298. background-image: linear-gradient(0deg, #ccc, #ccc 100%);
  4299. }
  4300. @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) {
  4301. .list-item--longdivider {
  4302. background-image: linear-gradient(0deg, #ccc, #ccc 50%, transparent 50%);
  4303. }
  4304. }
  4305. .list-item--longdivider:last-of-type {
  4306. border: none;
  4307. background-image: none;
  4308. }
  4309. .list-item--longdivider__center {
  4310. border: none;
  4311. background-image: none;
  4312. }
  4313. .list-item--longdivider__right {
  4314. border: none;
  4315. background-image: none;
  4316. }
  4317. /*~
  4318. name: List title
  4319. category: List
  4320. markup: |
  4321. <div class="list-title">List Title</div>
  4322. <ul class="list">
  4323. <li class="list-item">
  4324. <div class="list-item__center">Item</div>
  4325. </li>
  4326. <li class="list-item">
  4327. <div class="list-item__center">Item</div>
  4328. </li>
  4329. </ul>
  4330. */
  4331. .list-title {
  4332. padding: 0;
  4333. margin: 0;
  4334. font: inherit;
  4335. color: inherit;
  4336. background: transparent;
  4337. border: none;
  4338. line-height: normal;
  4339. cursor: default;
  4340. -webkit-user-select: none;
  4341. -moz-user-select: none;
  4342. -ms-user-select: none;
  4343. user-select: none;
  4344. font-family: -apple-system, 'Helvetica Neue', 'Helvetica', 'Arial', 'Lucida Grande', sans-serif;
  4345. -webkit-font-smoothing: antialiased;
  4346. -moz-osx-font-smoothing: grayscale;
  4347. font-weight: 400;
  4348. display: block;
  4349. color: #6d6d72;
  4350. text-align: left;
  4351. box-sizing: border-box;
  4352. padding: 0 0 0 16px;
  4353. margin: 0;
  4354. font-size: 13px;
  4355. font-weight: 500;
  4356. line-height: 24px;
  4357. text-transform: uppercase;
  4358. letter-spacing: 0.04em;
  4359. }
  4360. /*~
  4361. name: Material List Title
  4362. category: List
  4363. markup: |
  4364. <h3 class="list-title list-title--material">LIST TITLE</h3>
  4365. <ul class="list list--material">
  4366. <li class="list-item list-item--material">
  4367. <div class="list-item__center list-item--material__center">Item</div>
  4368. </li>
  4369. <li class="list-item list-item--material">
  4370. <div class="list-item__center list-item--material__center">Item</div>
  4371. </li>
  4372. </ul>
  4373. */
  4374. .list-title--material {
  4375. font-family: 'Roboto', 'Noto', sans-serif;
  4376. -webkit-font-smoothing: antialiased;
  4377. font-weight: 400;
  4378. color: #757575;
  4379. font-size: 14px;
  4380. margin: 0;
  4381. padding: 12px 0 12px 16px;
  4382. font-weight: 500;
  4383. line-height: 24px;
  4384. }
  4385. /*~
  4386. name: Search Input
  4387. category: Search Input
  4388. markup: |
  4389. <input type="search" value="" placeholder="Search" class="search-input" style="width: 280px;">
  4390. */
  4391. .search-input {
  4392. box-sizing: border-box;
  4393. background-clip: padding-box;
  4394. padding: 0;
  4395. margin: 0;
  4396. font: inherit;
  4397. color: inherit;
  4398. background: transparent;
  4399. border: none;
  4400. vertical-align: top;
  4401. outline: none;
  4402. line-height: 1;
  4403. font-family: -apple-system, 'Helvetica Neue', 'Helvetica', 'Arial', 'Lucida Grande', sans-serif;
  4404. -webkit-font-smoothing: antialiased;
  4405. -moz-osx-font-smoothing: grayscale;
  4406. font-weight: 400;
  4407. -webkit-appearance: textfield;
  4408. -moz-appearance: textfield;
  4409. appearance: textfield;
  4410. box-sizing: border-box;
  4411. height: 28px;
  4412. font-size: 14px;
  4413. background-color: rgba(3, 3, 3, .09);
  4414. box-shadow: none;
  4415. color: #1f1f21;
  4416. line-height: 1.3;
  4417. padding: 0 8px 0 28px;
  4418. margin: 0;
  4419. border-radius: 5.5px;
  4420. background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTNweCIgaGVpZ2h0PSIxNHB4IiB2aWV3Qm94PSIwIDAgMTMgMTQiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDQyICgzNjc4MSkgLSBodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2ggLS0+CiAgICA8dGl0bGU+aW9zLXNlYXJjaC1pbnB1dC1pY29uPC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGRlZnM+PC9kZWZzPgogICAgPGcgaWQ9ImNvbXBvbmVudHMiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIGlkPSJpb3Mtc2VhcmNoLWlucHV0IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtNDguMDAwMDAwLCAtNDMuMDAwMDAwKSIgZmlsbD0iIzdBNzk3QiI+CiAgICAgICAgICAgIDxnIGlkPSJHcm91cCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNDAuMDAwMDAwLCAzNi4wMDAwMDApIj4KICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0xNi45OTcyNDgyLDE1LjUwNDE0NjYgQzE3LjA3NzM2NTcsMTUuNTQwNTkzOCAxNy4xNTIyNzMxLDE1LjU5MTYxMjkgMTcuMjE3NzUxNiwxNS42NTcwOTE0IEwyMC42NDk5OTEsMTkuMDg5MzMwOCBDMjAuOTQ0ODQ0OSwxOS4zODQxODQ3IDIwLjk0ODQ3NjQsMTkuODU4NjA2IDIwLjY1MzU0MTIsMjAuMTUzNTQxMiBDMjAuMzYwNjQ4LDIwLjQ0NjQzNDQgMTkuODgxMjcxNiwyMC40NDE5MzE3IDE5LjU4OTMzMDgsMjAuMTQ5OTkxIEwxNi4xNTcwOTE0LDE2LjcxNzc1MTYgQzE2LjA5MTM3LDE2LjY1MjAzMDEgMTYuMDQwMTE3MSwxNi41NzczODc0IDE2LjAwMzQxNDEsMTYuNDk3Nzk5NSBDMTUuMTY3MTY5NCwxNy4xMjcwNDExIDE0LjEyNzEzOTMsMTcuNSAxMywxNy41IEMxMC4yMzg1NzYzLDE3LjUgOCwxNS4yNjE0MjM3IDgsMTIuNSBDOCw5LjczODU3NjI1IDEwLjIzODU3NjMsNy41IDEzLDcuNSBDMTUuNzYxNDIzNyw3LjUgMTgsOS43Mzg1NzYyNSAxOCwxMi41IEMxOCwxMy42Mjc0Njg1IDE3LjYyNjgyMzIsMTQuNjY3Nzc2OCAxNi45OTcyNDgyLDE1LjUwNDE0NjYgWiBNMTMsMTYuNSBDMTUuMjA5MTM5LDE2LjUgMTcsMTQuNzA5MTM5IDE3LDEyLjUgQzE3LDEwLjI5MDg2MSAxNS4yMDkxMzksOC41IDEzLDguNSBDMTAuNzkwODYxLDguNSA5LDEwLjI5MDg2MSA5LDEyLjUgQzksMTQuNzA5MTM5IDEwLjc5MDg2MSwxNi41IDEzLDE2LjUgWiIgaWQ9Imlvcy1zZWFyY2gtaW5wdXQtaWNvbiI+PC9wYXRoPgogICAgICAgICAgICA8L2c+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4=');
  4421. background-position: 8px center;
  4422. background-repeat: no-repeat;
  4423. background-size: 13px;
  4424. font-weight: 400;
  4425. display: inline-block;
  4426. text-indent: 0;
  4427. }
  4428. .search-input::-webkit-search-cancel-button {
  4429. -webkit-appearance: textfield;
  4430. appearance: textfield;
  4431. display: none;
  4432. }
  4433. .search-input::-webkit-search-decoration {
  4434. display: none;
  4435. }
  4436. .search-input:focus {
  4437. outline: none;
  4438. }
  4439. .search-input::-webkit-input-placeholder {
  4440. color: #7a797b;
  4441. font-size: 14px;
  4442. text-indent: 0;
  4443. }
  4444. .search-input:-ms-input-placeholder {
  4445. color: #7a797b;
  4446. font-size: 14px;
  4447. text-indent: 0;
  4448. }
  4449. .search-input::-ms-input-placeholder {
  4450. color: #7a797b;
  4451. font-size: 14px;
  4452. text-indent: 0;
  4453. }
  4454. .search-input::placeholder {
  4455. color: #7a797b;
  4456. font-size: 14px;
  4457. text-indent: 0;
  4458. }
  4459. .search-input:placeholder-shown {
  4460. }
  4461. .search-input:disabled {
  4462. opacity: 0.3;
  4463. cursor: default;
  4464. pointer-events: none;
  4465. }
  4466. /*~
  4467. name: Material Search Input
  4468. category: Search Input
  4469. markup: |
  4470. <input type="search" value="" placeholder="Search" class="search-input search-input--material" style="width: 280px;">
  4471. */
  4472. .search-input--material {
  4473. font-family: 'Roboto', 'Noto', sans-serif;
  4474. -webkit-font-smoothing: antialiased;
  4475. font-weight: 400;
  4476. border-radius: 2px;
  4477. height: 48px;
  4478. background-color: #fafafa;
  4479. background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMThweCIgaGVpZ2h0PSIxOHB4IiB2aWV3Qm94PSIwIDAgMTggMTgiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDQzLjIgKDM5MDY5KSAtIGh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaCAtLT4KICAgIDx0aXRsZT5TaGFwZTwvdGl0bGU+CiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4KICAgIDxkZWZzPjwvZGVmcz4KICAgIDxnIGlkPSJQYWdlLTEiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIGlkPSJhbmRyb2lkLXNlYXJjaC1pbnB1dC1pY29uIiBmaWxsLXJ1bGU9Im5vbnplcm8iIGZpbGw9IiM4OTg5ODkiPgogICAgICAgICAgICA8ZyBpZD0iY29tcG9uZW50cyI+CiAgICAgICAgICAgICAgICA8ZyBpZD0ibWF0ZXJpYWwtc2VhcmNoIj4KICAgICAgICAgICAgICAgICAgICA8ZyBpZD0ic2VhcmNoIj4KICAgICAgICAgICAgICAgICAgICAgICAgPGcgaWQ9Ik1hdGVyaWFsL0ljb25zLWJsYWNrL3NlYXJjaCI+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNMTIuNTAyLDYuNDkxIEwxMS43MDgsNi40OTEgTDExLjQzMiw2Ljc2NSBDMTIuNDA3LDcuOTAyIDEzLDkuMzc2IDEzLDEwLjk5MSBDMTMsMTQuNTgxIDEwLjA5LDE3LjQ5MSA2LjUsMTcuNDkxIEMyLjkxLDE3LjQ5MSAwLDE0LjU4MSAwLDEwLjk5MSBDMCw3LjQwMSAyLjkxLDQuNDkxIDYuNSw0LjQ5MSBDOC4xMTUsNC40OTEgOS41ODgsNS4wODMgMTAuNzI1LDYuMDU3IEwxMS4wMDEsNS43ODMgTDExLjAwMSw0Ljk5MSBMMTUuOTk5LDAgTDE3LjQ5LDEuNDkxIEwxMi41MDIsNi40OTEgTDEyLjUwMiw2LjQ5MSBaIE02LjUsNi40OTEgQzQuMDE0LDYuNDkxIDIsOC41MDUgMiwxMC45OTEgQzIsMTMuNDc2IDQuMDE0LDE1LjQ5MSA2LjUsMTUuNDkxIEM4Ljk4NSwxNS40OTEgMTEsMTMuNDc2IDExLDEwLjk5MSBDMTEsOC41MDUgOC45ODUsNi40OTEgNi41LDYuNDkxIEw2LjUsNi40OTEgWiIgaWQ9IlNoYXBlIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg4Ljc0NTAwMCwgOC43NDU1MDApIHNjYWxlKC0xLCAxKSByb3RhdGUoLTE4MC4wMDAwMDApIHRyYW5zbGF0ZSgtOC43NDUwMDAsIC04Ljc0NTUwMCkgIj48L3BhdGg+CiAgICAgICAgICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgIDwvZz4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPg==');
  4480. background-size: 18px;
  4481. background-position: 18px center;
  4482. font-size: 14px;
  4483. padding: 0 24px 0 64px;
  4484. box-shadow: 0 0 2px 0 rgba(0, 0, 0, .12), 0 2px 2px 0 rgba(0, 0, 0, .24), 0 1px 0 0 rgba(255, 255, 255, .06) inset;
  4485. }
  4486. /*~
  4487. name: Text Input
  4488. category: Text Input
  4489. elements: ons-input
  4490. markup: |
  4491. <div><input type="text" class="text-input" placeholder="text" value=""></div>
  4492. <div><input type="text" class="text-input" placeholder="text" value="" disabled></div>
  4493. */
  4494. .text-input {
  4495. box-sizing: border-box;
  4496. background-clip: padding-box;
  4497. padding: 0;
  4498. margin: 0;
  4499. font: inherit;
  4500. color: inherit;
  4501. background: transparent;
  4502. border: none;
  4503. vertical-align: top;
  4504. outline: none;
  4505. line-height: 1;
  4506. font-family: -apple-system, 'Helvetica Neue', 'Helvetica', 'Arial', 'Lucida Grande', sans-serif;
  4507. -webkit-font-smoothing: antialiased;
  4508. -moz-osx-font-smoothing: grayscale;
  4509. font-weight: 400;
  4510. border: none;
  4511. background-color: transparent;
  4512. letter-spacing: 0;
  4513. box-shadow: none;
  4514. color: #1f1f21;
  4515. padding: 0;
  4516. margin: 0;
  4517. width: auto;
  4518. font-size: 16px;
  4519. height: 31px;
  4520. font-weight: 400;
  4521. box-sizing: border-box;
  4522. }
  4523. .text-input::-ms-clear {
  4524. display: none;
  4525. }
  4526. .text-input:disabled {
  4527. opacity: 0.3;
  4528. cursor: default;
  4529. pointer-events: none;
  4530. }
  4531. .text-input::-webkit-input-placeholder {
  4532. color: #999;
  4533. }
  4534. .text-input:-ms-input-placeholder {
  4535. color: #999;
  4536. }
  4537. .text-input::-ms-input-placeholder {
  4538. color: #999;
  4539. }
  4540. .text-input::placeholder {
  4541. color: #999;
  4542. }
  4543. .text-input:disabled::-webkit-input-placeholder {
  4544. border: none;
  4545. background-color: transparent;
  4546. color: #999;
  4547. }
  4548. .text-input:disabled:-ms-input-placeholder {
  4549. border: none;
  4550. background-color: transparent;
  4551. color: #999;
  4552. }
  4553. .text-input:disabled::-ms-input-placeholder {
  4554. border: none;
  4555. background-color: transparent;
  4556. color: #999;
  4557. }
  4558. .text-input:disabled::placeholder {
  4559. border: none;
  4560. background-color: transparent;
  4561. color: #999;
  4562. }
  4563. .text-input:invalid {
  4564. border: none;
  4565. background-color: transparent;
  4566. color: #1f1f21;
  4567. }
  4568. /*~
  4569. name: Underbar Text Input
  4570. category: Text Input
  4571. elements: ons-input
  4572. markup: |
  4573. <div><input type="text" class="text-input text-input--underbar" placeholder="text" value=""></div>
  4574. <div><input type="text" class="text-input text-input--underbar" placeholder="text" value="" disabled></div>
  4575. */
  4576. .text-input--underbar {
  4577. box-sizing: border-box;
  4578. background-clip: padding-box;
  4579. padding: 0;
  4580. margin: 0;
  4581. font: inherit;
  4582. color: inherit;
  4583. background: transparent;
  4584. border: none;
  4585. vertical-align: top;
  4586. outline: none;
  4587. line-height: 1;
  4588. font-family: -apple-system, 'Helvetica Neue', 'Helvetica', 'Arial', 'Lucida Grande', sans-serif;
  4589. -webkit-font-smoothing: antialiased;
  4590. -moz-osx-font-smoothing: grayscale;
  4591. font-weight: 400;
  4592. border: none;
  4593. background-color: transparent;
  4594. letter-spacing: 0;
  4595. box-shadow: none;
  4596. color: #1f1f21;
  4597. padding: 0;
  4598. margin: 0;
  4599. width: auto;
  4600. font-size: 16px;
  4601. height: 31px;
  4602. font-weight: 400;
  4603. box-sizing: border-box;
  4604. border: none;
  4605. background-color: transparent;
  4606. border-bottom: 1px solid #ccc;
  4607. border-radius: 0;
  4608. }
  4609. .text-input--underbar:disabled {
  4610. opacity: 0.3;
  4611. cursor: default;
  4612. pointer-events: none;
  4613. border: none;
  4614. background-color: transparent;
  4615. border-bottom: 1px solid #ccc;
  4616. }
  4617. .text-input--underbar:disabled::-webkit-input-placeholder {
  4618. border: none;
  4619. background-color: transparent;
  4620. color: #999;
  4621. border: none;
  4622. background-color: transparent;
  4623. }
  4624. .text-input--underbar:disabled:-ms-input-placeholder {
  4625. border: none;
  4626. background-color: transparent;
  4627. color: #999;
  4628. border: none;
  4629. background-color: transparent;
  4630. }
  4631. .text-input--underbar:disabled::-ms-input-placeholder {
  4632. border: none;
  4633. background-color: transparent;
  4634. color: #999;
  4635. border: none;
  4636. background-color: transparent;
  4637. }
  4638. .text-input--underbar:disabled::placeholder {
  4639. border: none;
  4640. background-color: transparent;
  4641. color: #999;
  4642. border: none;
  4643. background-color: transparent;
  4644. }
  4645. .text-input--underbar:invalid {
  4646. border: none;
  4647. background-color: transparent;
  4648. color: #1f1f21;
  4649. border: none;
  4650. background-color: transparent;
  4651. border-bottom: 1px solid #ccc;
  4652. }
  4653. /*~
  4654. name: Material Input
  4655. category: Text Input
  4656. elements: ons-input
  4657. markup: |
  4658. <span>
  4659. <div><input class="text-input text-input--material" placeholder="Username" type="text" required></div>
  4660. <br />
  4661. <div><input class="text-input text-input--material" placeholder="Password" type="password" required></div>
  4662. </span>
  4663. */
  4664. .text-input--material {
  4665. box-sizing: border-box;
  4666. background-clip: padding-box;
  4667. padding: 0;
  4668. margin: 0;
  4669. font: inherit;
  4670. color: inherit;
  4671. background: transparent;
  4672. border: none;
  4673. vertical-align: top;
  4674. outline: none;
  4675. line-height: 1;
  4676. font-family: -apple-system, 'Helvetica Neue', 'Helvetica', 'Arial', 'Lucida Grande', sans-serif;
  4677. -webkit-font-smoothing: antialiased;
  4678. -moz-osx-font-smoothing: grayscale;
  4679. font-weight: 400;
  4680. font-family: 'Roboto', 'Noto', sans-serif;
  4681. -webkit-font-smoothing: antialiased;
  4682. font-weight: 400;
  4683. color: #212121;
  4684. background-image: linear-gradient(to top, transparent 1px, #afafaf 1px);
  4685. background-size: 100% 2px;
  4686. background-repeat: no-repeat;
  4687. background-position: center bottom;
  4688. background-color: transparent;
  4689. font-size: 16px;
  4690. font-weight: 400;
  4691. border: none;
  4692. padding-bottom: 2px;
  4693. border-radius: 0;
  4694. height: 24px;
  4695. vertical-align: middle;
  4696. -webkit-transform: translate3d(0, 0, 0); /* FIXME: prevent ios flicker */
  4697. }
  4698. .text-input--material__label {
  4699. font-family: 'Roboto', 'Noto', sans-serif;
  4700. -webkit-font-smoothing: antialiased;
  4701. font-weight: 400;
  4702. color: #afafaf;
  4703. position: absolute;
  4704. left: 0;
  4705. top: 2px;
  4706. font-size: 16px;
  4707. font-weight: 400;
  4708. pointer-events: none;
  4709. }
  4710. .text-input--material__label--active {
  4711. color: #3d5afe;
  4712. -webkit-transform: translate(0, -75%) scale(0.75);
  4713. transform: translate(0, -75%) scale(0.75);
  4714. -webkit-transform-origin: left top;
  4715. transform-origin: left top;
  4716. transition: color 0.1s ease-in, -webkit-transform 0.1s ease-in;
  4717. transition: transform 0.1s ease-in, color 0.1s ease-in;
  4718. transition: transform 0.1s ease-in, color 0.1s ease-in, -webkit-transform 0.1s ease-in;
  4719. }
  4720. .text-input--material:focus {
  4721. background-image:
  4722. linear-gradient(#3d5afe, #3d5afe),
  4723. linear-gradient(to top, transparent 1px, #afafaf 1px);
  4724. -webkit-animation: material-text-input-animate 0.3s forwards;
  4725. animation: material-text-input-animate 0.3s forwards;
  4726. }
  4727. .text-input--material::-webkit-input-placeholder {
  4728. color: #afafaf;
  4729. line-height: 20px;
  4730. }
  4731. .text-input--material:-ms-input-placeholder {
  4732. color: #afafaf;
  4733. line-height: 20px;
  4734. }
  4735. .text-input--material::-ms-input-placeholder {
  4736. color: #afafaf;
  4737. line-height: 20px;
  4738. }
  4739. .text-input--material::placeholder {
  4740. color: #afafaf;
  4741. line-height: 20px;
  4742. }
  4743. @-webkit-keyframes material-text-input-animate {
  4744. 0% {
  4745. background-size: 0% 2px, 100% 2px;
  4746. }
  4747. 100% {
  4748. background-size: 100% 2px, 100% 2px;
  4749. }
  4750. }
  4751. @keyframes material-text-input-animate {
  4752. 0% {
  4753. background-size: 0% 2px, 100% 2px;
  4754. }
  4755. 100% {
  4756. background-size: 100% 2px, 100% 2px;
  4757. }
  4758. }
  4759. /*~
  4760. name: Textarea
  4761. category: Textarea
  4762. markup: |
  4763. <textarea class="textarea" rows="3" placeholder="Textarea"></textarea>
  4764. */
  4765. .textarea {
  4766. box-sizing: border-box;
  4767. background-clip: padding-box;
  4768. padding: 0;
  4769. margin: 0;
  4770. font: inherit;
  4771. color: inherit;
  4772. background: transparent;
  4773. border: none;
  4774. line-height: normal;
  4775. font-family: -apple-system, 'Helvetica Neue', 'Helvetica', 'Arial', 'Lucida Grande', sans-serif;
  4776. -webkit-font-smoothing: antialiased;
  4777. -moz-osx-font-smoothing: grayscale;
  4778. font-weight: 400;
  4779. vertical-align: top;
  4780. resize: none;
  4781. outline: none;
  4782. padding: 5px 5px 5px 5px;
  4783. font-size: 16px;
  4784. font-weight: 400;
  4785. border-radius: 4px;
  4786. border: 1px solid #ccc;
  4787. background-color: #efeff4;
  4788. color: #1f1f21;
  4789. letter-spacing: 0;
  4790. box-shadow: none;
  4791. -webkit-appearance: none;
  4792. -moz-appearance: none;
  4793. appearance: none;
  4794. width: auto;
  4795. }
  4796. .textarea:disabled {
  4797. opacity: 0.3;
  4798. cursor: default;
  4799. pointer-events: none;
  4800. }
  4801. .textarea::-webkit-input-placeholder {
  4802. color: #999;
  4803. }
  4804. .textarea:-ms-input-placeholder {
  4805. color: #999;
  4806. }
  4807. .textarea::-ms-input-placeholder {
  4808. color: #999;
  4809. }
  4810. .textarea::placeholder {
  4811. color: #999;
  4812. }
  4813. /*~
  4814. name: Textarea Transparent
  4815. category: Textarea
  4816. markup: |
  4817. <textarea class="textarea textarea--transparent" rows="3" placeholder="Textarea"></textarea>
  4818. */
  4819. .textarea--transparent {
  4820. box-sizing: border-box;
  4821. background-clip: padding-box;
  4822. padding: 0;
  4823. margin: 0;
  4824. font: inherit;
  4825. color: inherit;
  4826. background: transparent;
  4827. border: none;
  4828. line-height: normal;
  4829. font-family: -apple-system, 'Helvetica Neue', 'Helvetica', 'Arial', 'Lucida Grande', sans-serif;
  4830. -webkit-font-smoothing: antialiased;
  4831. -moz-osx-font-smoothing: grayscale;
  4832. font-weight: 400;
  4833. vertical-align: top;
  4834. resize: none;
  4835. outline: none;
  4836. padding: 5px 5px 5px 5px;
  4837. padding-left: 0;
  4838. padding-right: 0;
  4839. font-size: 16px;
  4840. font-weight: 400;
  4841. border-radius: 4px;
  4842. border: none;
  4843. background-color: transparent;
  4844. color: #1f1f21;
  4845. letter-spacing: 0;
  4846. box-shadow: none;
  4847. -webkit-appearance: none;
  4848. -moz-appearance: none;
  4849. appearance: none;
  4850. width: auto;
  4851. }
  4852. .textarea--transparent:disabled {
  4853. opacity: 0.3;
  4854. cursor: default;
  4855. pointer-events: none;
  4856. }
  4857. .textarea--transparent::-webkit-input-placeholder {
  4858. color: #999;
  4859. }
  4860. .textarea--transparent:-ms-input-placeholder {
  4861. color: #999;
  4862. }
  4863. .textarea--transparent::-ms-input-placeholder {
  4864. color: #999;
  4865. }
  4866. .textarea--transparent::placeholder {
  4867. color: #999;
  4868. }
  4869. /*~
  4870. name: Dialog
  4871. category: Dialog
  4872. elements: ons-dialog
  4873. markup: |
  4874. <div class="dialog-mask"></div>
  4875. <div class="dialog">
  4876. <div class="dialog-container">
  4877. <p style="text-align:center;margin-top:40px;opacity:0.4;">Content</p>
  4878. </div>
  4879. </div>
  4880. */
  4881. .dialog {
  4882. box-sizing: border-box;
  4883. background-clip: padding-box;
  4884. padding: 0;
  4885. margin: 0;
  4886. font: inherit;
  4887. color: inherit;
  4888. background: transparent;
  4889. border: none;
  4890. line-height: normal;
  4891. cursor: default;
  4892. -webkit-user-select: none;
  4893. -moz-user-select: none;
  4894. -ms-user-select: none;
  4895. user-select: none;
  4896. font-family: -apple-system, 'Helvetica Neue', 'Helvetica', 'Arial', 'Lucida Grande', sans-serif;
  4897. -webkit-font-smoothing: antialiased;
  4898. -moz-osx-font-smoothing: grayscale;
  4899. font-weight: 400;
  4900. position: absolute;
  4901. top: 50%;
  4902. left: 50%;
  4903. -webkit-transform: translate(-50%, -50%);
  4904. transform: translate(-50%, -50%);
  4905. margin: auto auto;
  4906. overflow: hidden;
  4907. min-width: 270px;
  4908. min-height: 100px;
  4909. text-align: left;
  4910. }
  4911. .dialog-container {
  4912. height: inherit;
  4913. min-height: inherit;
  4914. overflow: hidden;
  4915. border-radius: 4px;
  4916. background-color: #f4f4f4;
  4917. -webkit-mask-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC');
  4918. color: #1f1f21;
  4919. }
  4920. .dialog-mask {
  4921. padding: 0;
  4922. margin: 0;
  4923. font: inherit;
  4924. color: inherit;
  4925. background: transparent;
  4926. border: none;
  4927. line-height: normal;
  4928. cursor: default;
  4929. -webkit-user-select: none;
  4930. -moz-user-select: none;
  4931. -ms-user-select: none;
  4932. user-select: none;
  4933. position: absolute;
  4934. top: 0;
  4935. right: 0;
  4936. left: 0;
  4937. bottom: 0;
  4938. background-color: rgba(0, 0, 0, .2);
  4939. }
  4940. /*~
  4941. name: Material Dialog
  4942. category: Dialog
  4943. elements: ons-dialog
  4944. markup: |
  4945. <div class="dialog-mask dialog-mask--material"></div>
  4946. <div class="dialog dialog--material">
  4947. <div class="dialog dialog-container--material">
  4948. <p style="margin-left:24px;margin-right:24px">The quick brown fox jumps over the lazy dog.</p>
  4949. </div>
  4950. </div>
  4951. */
  4952. .dialog--material {
  4953. font-family: 'Roboto', 'Noto', sans-serif;
  4954. -webkit-font-smoothing: antialiased;
  4955. font-weight: 400;
  4956. text-align: left;
  4957. box-shadow:
  4958. 0 16px 24px 2px rgba(0, 0, 0, .14),
  4959. 0 6px 30px 5px rgba(0, 0, 0, .12),
  4960. 0 8px 10px -5px rgba(0, 0, 0, .4);
  4961. }
  4962. .dialog-container--material {
  4963. border-radius: 2px;
  4964. background-color: #ffffff;
  4965. color: #1f1f21;
  4966. }
  4967. .dialog-mask--material {
  4968. background-color: rgba(0, 0, 0, .3);
  4969. }
  4970. /*~
  4971. name: Alert Dialog
  4972. category: Alert Dialog
  4973. elements: ons-alert-dialog
  4974. markup: |
  4975. <div class="alert-dialog-mask"></div>
  4976. <div class="alert-dialog">
  4977. <div class="alert-dialog-container">
  4978. <div class="alert-dialog-title">Alert</div>
  4979. <div class="alert-dialog-content">
  4980. Hello World!
  4981. </div>
  4982. <div class="alert-dialog-footer">
  4983. <button class="alert-dialog-button alert-dialog-button--primal">OK</button>
  4984. </div>
  4985. </div>
  4986. </div>
  4987. */
  4988. .alert-dialog {
  4989. box-sizing: border-box;
  4990. background-clip: padding-box;
  4991. padding: 0;
  4992. margin: 0;
  4993. font: inherit;
  4994. color: inherit;
  4995. background: transparent;
  4996. border: none;
  4997. line-height: normal;
  4998. cursor: default;
  4999. -webkit-user-select: none;
  5000. -moz-user-select: none;
  5001. -ms-user-select: none;
  5002. user-select: none;
  5003. font-family: -apple-system, 'Helvetica Neue', 'Helvetica', 'Arial', 'Lucida Grande', sans-serif;
  5004. -webkit-font-smoothing: antialiased;
  5005. -moz-osx-font-smoothing: grayscale;
  5006. font-weight: 400;
  5007. position: absolute;
  5008. top: 50%;
  5009. left: 50%;
  5010. -webkit-transform: translate(-50%, -50%);
  5011. transform: translate(-50%, -50%);
  5012. width: 270px;
  5013. margin: auto;
  5014. background-color: #f4f4f4;
  5015. border-radius: 8px;
  5016. overflow: visible;
  5017. max-width: 95%;
  5018. color: #1f1f21;
  5019. }
  5020. .alert-dialog-container {
  5021. height: inherit;
  5022. padding-top: 16px;
  5023. overflow: hidden;
  5024. }
  5025. .alert-dialog-title {
  5026. font-family: -apple-system, 'Helvetica Neue', 'Helvetica', 'Arial', 'Lucida Grande', sans-serif;
  5027. -webkit-font-smoothing: antialiased;
  5028. -moz-osx-font-smoothing: grayscale;
  5029. font-weight: 400;
  5030. font-size: 17px;
  5031. font-weight: 500;
  5032. padding: 0 8px;
  5033. text-align: center;
  5034. color: #1f1f21;
  5035. }
  5036. .alert-dialog-content {
  5037. box-sizing: border-box;
  5038. background-clip: padding-box;
  5039. padding: 4px 12px 8px;
  5040. font-size: 14px;
  5041. min-height: 36px;
  5042. text-align: center;
  5043. color: #1f1f21;
  5044. }
  5045. .alert-dialog-footer {
  5046. width: 100%;
  5047. }
  5048. .alert-dialog-button {
  5049. box-sizing: border-box;
  5050. background-clip: padding-box;
  5051. padding: 0;
  5052. margin: 0;
  5053. font: inherit;
  5054. color: inherit;
  5055. background: transparent;
  5056. border: none;
  5057. line-height: normal;
  5058. font-family: -apple-system, 'Helvetica Neue', 'Helvetica', 'Arial', 'Lucida Grande', sans-serif;
  5059. -webkit-font-smoothing: antialiased;
  5060. -moz-osx-font-smoothing: grayscale;
  5061. font-weight: 400;
  5062. cursor: default;
  5063. -webkit-user-select: none;
  5064. -moz-user-select: none;
  5065. -ms-user-select: none;
  5066. user-select: none;
  5067. text-overflow: ellipsis;
  5068. white-space: nowrap;
  5069. overflow: hidden;
  5070. text-decoration: none;
  5071. letter-spacing: 0;
  5072. vertical-align: middle;
  5073. border: none;
  5074. border-top: 1px solid #ddd;
  5075. font-size: 16px;
  5076. padding: 0 8px;
  5077. margin: 0;
  5078. display: block;
  5079. width: 100%;
  5080. background-color: transparent;
  5081. text-align: center;
  5082. height: 44px;
  5083. line-height: 44px;
  5084. outline: none;
  5085. color: #0076ff;
  5086. }
  5087. @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) {
  5088. .alert-dialog-button {
  5089. border-top: none;
  5090. background-size: 100% 1px;
  5091. background-repeat: no-repeat;
  5092. background-position: top;
  5093. background-image: linear-gradient(180deg, #ddd, #ddd 50%, transparent 50%);
  5094. }
  5095. }
  5096. .alert-dialog-button:active {
  5097. background-color: rgba(0, 0, 0, .05);
  5098. }
  5099. .alert-dialog-button--primal {
  5100. font-weight: 500;
  5101. }
  5102. .alert-dialog-footer--rowfooter {
  5103. white-space: nowrap;
  5104. display: -webkit-box;
  5105. display: -webkit-flex;
  5106. display: flex;
  5107. -webkit-flex-wrap: wrap;
  5108. flex-wrap: wrap;
  5109. }
  5110. .alert-dialog-button--rowfooter {
  5111. -webkit-box-flex: 1;
  5112. -webkit-flex: 1;
  5113. flex: 1;
  5114. display: block;
  5115. width: 100%;
  5116. border-left: 1px solid #ddd;
  5117. }
  5118. @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) {
  5119. .alert-dialog-button--rowfooter {
  5120. border-top: none;
  5121. border-left: none;
  5122. background-size: 100% 1px, 1px 100%;
  5123. background-repeat: no-repeat;
  5124. background-position: top, left;
  5125. background-image:
  5126. linear-gradient(0deg, transparent, transparent 50%, #ddd 50%),
  5127. linear-gradient(90deg, transparent, transparent 50%, #ddd 50%);
  5128. }
  5129. }
  5130. .alert-dialog-button--rowfooter:first-child {
  5131. border-left: none;
  5132. }
  5133. @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) {
  5134. .alert-dialog-button--rowfooter:first-child {
  5135. border-top: none;
  5136. background-size: 100% 1px;
  5137. background-repeat: no-repeat;
  5138. background-position: top, left;
  5139. background-image: linear-gradient(0deg, transparent, transparent 50%, #ddd 50%);
  5140. }
  5141. }
  5142. .alert-dialog-mask {
  5143. padding: 0;
  5144. margin: 0;
  5145. font: inherit;
  5146. color: inherit;
  5147. background: transparent;
  5148. border: none;
  5149. line-height: normal;
  5150. cursor: default;
  5151. -webkit-user-select: none;
  5152. -moz-user-select: none;
  5153. -ms-user-select: none;
  5154. user-select: none;
  5155. position: absolute;
  5156. top: 0;
  5157. right: 0;
  5158. left: 0;
  5159. bottom: 0;
  5160. background-color: rgba(0, 0, 0, .2);
  5161. }
  5162. /*~
  5163. name: Alert Dialog without Title
  5164. category: Alert Dialog
  5165. elements: ons-alert-dialog
  5166. markup: |
  5167. <div class="alert-dialog-mask"></div>
  5168. <div class="alert-dialog">
  5169. <div class="alert-dialog-container">
  5170. <div class="alert-dialog-content">
  5171. Hello World!
  5172. </div>
  5173. <div class="alert-dialog-footer">
  5174. <button class="alert-dialog-button alert-dialog-button--primal">OK</button>
  5175. </div>
  5176. </div>
  5177. </div>
  5178. */
  5179. /*~
  5180. name: Alert Dialog with Multiple Buttons
  5181. category: Alert Dialog
  5182. elements: ons-alert-dialog
  5183. markup: |
  5184. <div class="alert-dialog-mask"></div>
  5185. <div class="alert-dialog">
  5186. <div class="alert-dialog-container">
  5187. <div class="alert-dialog-content">
  5188. Hello World!
  5189. </div>
  5190. <div class="alert-dialog-footer">
  5191. <button class="alert-dialog-button">Cancel</button>
  5192. <button class="alert-dialog-button alert-dialog-button--primal">OK</button>
  5193. </div>
  5194. </div>
  5195. </div>
  5196. */
  5197. /*~
  5198. name: Alert Dialog with Multiple Buttons 2
  5199. category: Alert Dialog
  5200. elements: ons-alert-dialog
  5201. markup: |
  5202. <div class="alert-dialog-mask"></div>
  5203. <div class="alert-dialog">
  5204. <div class="alert-dialog-container">
  5205. <div class="alert-dialog-title">Alert</div>
  5206. <div class="alert-dialog-content">
  5207. Hello World!
  5208. </div>
  5209. <div class="alert-dialog-footer alert-dialog-footer--rowfooter">
  5210. <button class="alert-dialog-button alert-dialog-button--rowfooter">Left</button>
  5211. <button class="alert-dialog-button alert-dialog-button--primal alert-dialog-button--rowfooter">Center</button>
  5212. <button class="alert-dialog-button alert-dialog-button--rowfooter">Right</button>
  5213. </div>
  5214. </div>
  5215. </div>
  5216. */
  5217. /*~
  5218. name: Material Alert Dialog
  5219. category: Alert Dialog
  5220. elements: ons-alert-dialog
  5221. markup: |
  5222. <div class="alert-dialog-mask alert-dialog-mask--material"></div>
  5223. <div class="alert-dialog alert-dialog--material">
  5224. <div class="alert-dialog-container alert-dialog-container--material">
  5225. <div class="alert-dialog-title alert-dialog-title--material">
  5226. Dialog title
  5227. </div>
  5228. <div class="alert-dialog-content alert-dialog-content--material">
  5229. Some dialog content.
  5230. </div>
  5231. <div class="alert-dialog-footer alert-dialog-footer--material">
  5232. <button class="alert-dialog-button alert-dialog-button--material">OK</button>
  5233. <button class="alert-dialog-button alert-dialog-button--material">CANCEL</button>
  5234. </div>
  5235. </div>
  5236. </div>
  5237. */
  5238. .alert-dialog--material {
  5239. border-radius: 2px;
  5240. background-color: #ffffff;
  5241. }
  5242. .alert-dialog-container--material {
  5243. padding: 22px 0 0 0;
  5244. box-shadow:
  5245. 0 16px 24px 2px rgba(0, 0, 0, .14),
  5246. 0 6px 30px 5px rgba(0, 0, 0, .12),
  5247. 0 8px 10px -5px rgba(0, 0, 0, .4);
  5248. }
  5249. .alert-dialog-title--material {
  5250. font-family: 'Roboto', 'Noto', sans-serif;
  5251. -webkit-font-smoothing: antialiased;
  5252. font-weight: 400;
  5253. text-align: left;
  5254. font-size: 20px;
  5255. font-weight: 500;
  5256. padding: 0 24px;
  5257. color: #31313a;
  5258. }
  5259. .alert-dialog-content--material {
  5260. font-family: 'Roboto', 'Noto', sans-serif;
  5261. -webkit-font-smoothing: antialiased;
  5262. font-weight: 400;
  5263. text-align: left;
  5264. font-size: 16px;
  5265. font-weight: 400;
  5266. line-height: 20px;
  5267. padding: 0 24px;
  5268. margin: 24px 0 10px 0;
  5269. min-height: 0;
  5270. color: rgba(49, 49, 58, .85);
  5271. }
  5272. .alert-dialog-footer--material {
  5273. display: block;
  5274. padding: 0;
  5275. height: 52px;
  5276. box-sizing: border-box;
  5277. margin: 0;
  5278. line-height: 1;
  5279. }
  5280. .alert-dialog-button--material {
  5281. font-family: 'Roboto', 'Noto', sans-serif;
  5282. -webkit-font-smoothing: antialiased;
  5283. font-weight: 400;
  5284. text-transform: uppercase;
  5285. display: inline-block;
  5286. width: auto;
  5287. float: right;
  5288. background: none;
  5289. border: none;
  5290. border-radius: 2px;
  5291. font-size: 14px;
  5292. font-weight: 500;
  5293. outline: none;
  5294. height: 36px;
  5295. line-height: 36px;
  5296. padding: 0 8px;
  5297. margin: 8px 8px 8px 0;
  5298. box-sizing: border-box;
  5299. min-width: 50px;
  5300. color: #37474f;
  5301. }
  5302. @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) {
  5303. .alert-dialog-button--material {
  5304. background: none;
  5305. }
  5306. }
  5307. .alert-dialog-button--material:active {
  5308. background-color: transparent;
  5309. background-color: initial;
  5310. }
  5311. /* stylelint-disable */
  5312. .alert-dialog-button--rowfooter--material,
  5313. .alert-dialog-button--rowfooter--material:first-child { /* stylelint-enable */
  5314. border: 0;
  5315. }
  5316. @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) {
  5317. .alert-dialog-button--rowfooter--material,
  5318. .alert-dialog-button--rowfooter--material:first-child {
  5319. background: none;
  5320. }
  5321. }
  5322. /* stylelint-disable */
  5323. .alert-dialog-button--primal--material { /* stylelint-enable */
  5324. font-weight: 500;
  5325. }
  5326. @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) {
  5327. .alert-dialog-button--primal--material {
  5328. background: none;
  5329. }
  5330. }
  5331. .alert-dialog-mask--material {
  5332. background-color: rgba(0, 0, 0, .3);
  5333. }
  5334. /*~
  5335. name: Popover
  5336. category: Popover
  5337. elements: ons-popover
  5338. markup: |
  5339. <div class="popover-mask"></div>
  5340. <div class="popover popover--bottom" style="bottom: 20px; left: 65px;">
  5341. <div class="popover__arrow popover--bottom__arrow" style="left: 110px;"></div>
  5342. <div class="popover__content popover--bottom__content">
  5343. <div style="text-align:center;opacity:0.8;margin-top:40px">Content</div>
  5344. </div>
  5345. </div>
  5346. */
  5347. /*~
  5348. name: Popover(top)
  5349. category: Popover
  5350. elements: ons-popover
  5351. markup: |
  5352. <div class="popover-mask"></div>
  5353. <div class="popover popover--top" style="top: 20px; left: 50px;">
  5354. <div class="popover__arrow popover--top__arrow" style="margin-left: 110px;"></div>
  5355. <div class="popover__content popover--top__content">
  5356. <div style="text-align: center; opacity: 0.8; margin-top: 40px">Content</div>
  5357. </div>
  5358. </div>
  5359. */
  5360. /*~
  5361. name: Popover(left)
  5362. category: Popover
  5363. elements: ons-popover
  5364. markup: |
  5365. <div class="popover-mask"></div>
  5366. <div class="popover popover--right" style="top: 20px; right: 20px;">
  5367. <div class="popover__arrow popover--right__arrow" style="bottom: 50px;"></div>
  5368. <div class="popover__content popover--right__content">
  5369. <div style="text-align: center; opacity: 0.8; margin-top: 40px">Content</div>
  5370. </div>
  5371. </div>
  5372. */
  5373. /*~
  5374. name: Popover(right)
  5375. category: Popover
  5376. elements: ons-popover
  5377. markup: |
  5378. <div class="popover-mask"></div>
  5379. <div class="popover popover--left" style="top: 20px;left: 20px;">
  5380. <div class="popover__arrow popover--left__arrow" style="top: 50px;"></div>
  5381. <div class="popover__content popover--left__content">
  5382. <div style="text-align: center; opacity: 0.8; margin-top: 40px">Content</div>
  5383. </div>
  5384. </div>
  5385. */
  5386. .popover {
  5387. position: absolute;
  5388. z-index: 20001;
  5389. }
  5390. .popover--bottom {
  5391. bottom: 0;
  5392. }
  5393. .popover--top {
  5394. top: 0;
  5395. }
  5396. .popover--left {
  5397. left: 0;
  5398. }
  5399. .popover--right {
  5400. right: 0;
  5401. }
  5402. .popover-mask {
  5403. left: 0;
  5404. right: 0;
  5405. top: 0;
  5406. bottom: 0;
  5407. background-color: rgba(0, 0, 0, .2);
  5408. position: absolute;
  5409. z-index: 19999;
  5410. }
  5411. .popover__content {
  5412. box-sizing: border-box;
  5413. background-clip: padding-box;
  5414. padding: 0;
  5415. margin: 0;
  5416. font: inherit;
  5417. color: inherit;
  5418. background: transparent;
  5419. border: none;
  5420. line-height: normal;
  5421. cursor: default;
  5422. -webkit-user-select: none;
  5423. -moz-user-select: none;
  5424. -ms-user-select: none;
  5425. user-select: none;
  5426. font-family: -apple-system, 'Helvetica Neue', 'Helvetica', 'Arial', 'Lucida Grande', sans-serif;
  5427. -webkit-font-smoothing: antialiased;
  5428. -moz-osx-font-smoothing: grayscale;
  5429. font-weight: 400;
  5430. display: block;
  5431. width: 220px;
  5432. overflow: auto;
  5433. min-height: 100px;
  5434. max-height: 100%;
  5435. background-color: white;
  5436. border-radius: 8px;
  5437. color: #1f1f21;
  5438. pointer-events: auto;
  5439. }
  5440. .popover--top__content {
  5441. }
  5442. .popover--bottom__content {
  5443. }
  5444. .popover--left__content {
  5445. }
  5446. .popover--right__content {
  5447. }
  5448. .popover__arrow {
  5449. position: absolute;
  5450. width: 18px;
  5451. height: 18px;
  5452. -webkit-transform-origin: 50% 50% 0;
  5453. transform-origin: 50% 50% 0;
  5454. background-color: transparent;
  5455. background-image: linear-gradient(45deg, white, white 50%, transparent 50%);
  5456. border-radius: 0 0 0 4px;
  5457. margin: 0;
  5458. z-index: 20001;
  5459. }
  5460. /* NOTE: If you changed this properties, you should check if ons-popover is broken. */
  5461. .popover--bottom__arrow {
  5462. -webkit-transform: translateY(6px) translateX(-9px) rotate(-45deg);
  5463. transform: translateY(6px) translateX(-9px) rotate(-45deg);
  5464. bottom: 0;
  5465. margin-right: -18px;
  5466. }
  5467. .popover--top__arrow {
  5468. -webkit-transform: translateY(-6px) translateX(-9px) rotate(135deg);
  5469. transform: translateY(-6px) translateX(-9px) rotate(135deg);
  5470. top: 0;
  5471. margin-right: -18px;
  5472. }
  5473. .popover--left__arrow {
  5474. -webkit-transform: translateX(-6px) translateY(-9px) rotate(45deg);
  5475. transform: translateX(-6px) translateY(-9px) rotate(45deg);
  5476. left: 0;
  5477. margin-bottom: -18px;
  5478. }
  5479. .popover--right__arrow {
  5480. -webkit-transform: translateX(6px) translateY(-9px) rotate(225deg);
  5481. transform: translateX(6px) translateY(-9px) rotate(225deg);
  5482. right: 0;
  5483. margin-bottom: -18px;
  5484. }
  5485. /*~
  5486. name: Material Popover
  5487. category: Popover
  5488. elements: ons-popover
  5489. markup: |
  5490. <div class="popover-mask popover-mask--material"></div>
  5491. <div class="popover popover--material popover--left" style="top: 50px; left: 65px;">
  5492. <div class="popover__arrow popover--material__arrow popover--left__arrow"></div>
  5493. <div class="popover__content popover--material__content popover--left__content">
  5494. <div style="text-align: center; opacity: 0.8; margin-top: 40px">Content</div>
  5495. </div>
  5496. </div>
  5497. */
  5498. .popover--material {
  5499. }
  5500. .popover-mask--material {
  5501. background-color: transparent;
  5502. }
  5503. .popover--material__content {
  5504. background-color: #fafafa;
  5505. border-radius: 2px;
  5506. color: #1f1f21;
  5507. box-shadow:
  5508. 0 2px 2px 0 rgba(0, 0, 0, .14),
  5509. 0 1px 5px 0 rgba(0, 0, 0, .12),
  5510. 0 3px 1px -2px rgba(0, 0, 0, .2);
  5511. }
  5512. .popover--material__arrow {
  5513. display: none;
  5514. }
  5515. /*~
  5516. name: Progress Bar
  5517. category: Progress Bar
  5518. elements: ons-progress-bar
  5519. markup: |
  5520. <div class="progress-bar">
  5521. <div class="progress-bar__primary" style="width: 30%"></div>
  5522. </div>
  5523. <br />
  5524. <div class="progress-bar">
  5525. <div class="progress-bar__primary" style="width:20%"></div>
  5526. <div class="progress-bar__secondary" style="width:76%"></div>
  5527. </div>
  5528. <br />
  5529. <div class="progress-bar progress-bar--indeterminate">
  5530. </div>
  5531. */
  5532. .progress-bar {
  5533. position: relative;
  5534. height: 2px;
  5535. display: block;
  5536. width: 100%;
  5537. background-color: transparent;
  5538. background-clip: padding-box;
  5539. margin: 0;
  5540. overflow: hidden;
  5541. border-radius: 4px;
  5542. }
  5543. .progress-bar__primary,
  5544. .progress-bar__secondary {
  5545. position: absolute;
  5546. background-color: #0076ff;
  5547. top: 0;
  5548. bottom: 0;
  5549. transition: width .3s linear;
  5550. z-index: 100;
  5551. border-radius: 4px;
  5552. }
  5553. .progress-bar__secondary {
  5554. background-color: #65adff;
  5555. z-index: 0;
  5556. }
  5557. .progress-bar--indeterminate:before {
  5558. content: '';
  5559. position: absolute;
  5560. background-color: #0076ff;
  5561. top: 0;
  5562. left: 0;
  5563. bottom: 0;
  5564. will-change: left, right;
  5565. -webkit-animation: progress-bar__indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
  5566. animation: progress-bar__indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
  5567. border-radius: 4px;
  5568. }
  5569. .progress-bar--indeterminate:after {
  5570. content: '';
  5571. position: absolute;
  5572. background-color: #0076ff;
  5573. top: 0;
  5574. left: 0;
  5575. bottom: 0;
  5576. will-change: left, right;
  5577. -webkit-animation: progress-bar__indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
  5578. animation: progress-bar__indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
  5579. -webkit-animation-delay: 1.15s;
  5580. animation-delay: 1.15s;
  5581. border-radius: 4px;
  5582. }
  5583. @-webkit-keyframes progress-bar__indeterminate {
  5584. 0% {
  5585. left: -35%;
  5586. right: 100%;
  5587. }
  5588. 60% {
  5589. left: 100%;
  5590. right: -90%;
  5591. }
  5592. 100% {
  5593. left: 100%;
  5594. right: -90%;
  5595. }
  5596. }
  5597. @keyframes progress-bar__indeterminate {
  5598. 0% {
  5599. left: -35%;
  5600. right: 100%;
  5601. }
  5602. 60% {
  5603. left: 100%;
  5604. right: -90%;
  5605. }
  5606. 100% {
  5607. left: 100%;
  5608. right: -90%;
  5609. }
  5610. }
  5611. @-webkit-keyframes progress-bar__indeterminate-short {
  5612. 0% {
  5613. left: -200%;
  5614. right: 100%;
  5615. }
  5616. 60% {
  5617. left: 107%;
  5618. right: -8%;
  5619. }
  5620. 100% {
  5621. left: 107%;
  5622. right: -8%;
  5623. }
  5624. }
  5625. @keyframes progress-bar__indeterminate-short {
  5626. 0% {
  5627. left: -200%;
  5628. right: 100%;
  5629. }
  5630. 60% {
  5631. left: 107%;
  5632. right: -8%;
  5633. }
  5634. 100% {
  5635. left: 107%;
  5636. right: -8%;
  5637. }
  5638. }
  5639. /*~
  5640. name: Material Progress Bar
  5641. category: Progress Bar
  5642. elements: ons-progress-bar
  5643. markup: |
  5644. <div class="progress-bar progress-bar--material">
  5645. <div class="progress-bar__primary progress-bar--material__primary" style="width: 30%"></div>
  5646. </div>
  5647. <br />
  5648. <div class="progress-bar progress-bar--material">
  5649. <div class="progress-bar__primary progress-bar--material__primary" style="width:20%"></div>
  5650. <div class="progress-bar__secondary progress-bar--material__secondary" style="width:76%"></div>
  5651. </div>
  5652. <br />
  5653. <div class="progress-bar progress-bar--material progress-bar--indeterminate">
  5654. </div>
  5655. */
  5656. .progress-bar--material {
  5657. height: 4px;
  5658. background-color: transparent;
  5659. border-radius: 0;
  5660. }
  5661. .progress-bar--material__primary,
  5662. .progress-bar--material__secondary {
  5663. background-color: #37474f;
  5664. border-radius: 0;
  5665. }
  5666. .progress-bar--material__secondary {
  5667. background-color: #548ba7;
  5668. z-index: 0;
  5669. }
  5670. .progress-bar--material.progress-bar--indeterminate:before { /* FIXME */
  5671. background-color: #37474f;
  5672. border-radius: 0;
  5673. }
  5674. .progress-bar--material.progress-bar--indeterminate:after { /* FIXME */
  5675. background-color: #37474f;
  5676. border-radius: 0;
  5677. }
  5678. /*~
  5679. name: Progress Circle
  5680. category: Progress Circle
  5681. elements: ons-progress-circular
  5682. markup: |
  5683. <svg class="progress-circular progress-circular--indeterminate">
  5684. <circle class="progress-circular__background"/>
  5685. <circle class="progress-circular__primary progress-circular--indeterminate__primary"/>
  5686. <circle class="progress-circular__secondary progress-circular--indeterminate__secondary"/>
  5687. </svg>
  5688. <svg class="progress-circular">
  5689. <circle class="progress-circular__background"/>
  5690. <circle class="progress-circular__secondary" style="stroke-dasharray: 140%, 251.32%"/>
  5691. <circle class="progress-circular__primary" style="stroke-dasharray: 100%, 251.32%"/>
  5692. </svg>
  5693. <svg class="progress-circular">
  5694. <circle class="progress-circular__background"/>
  5695. <circle class="progress-circular__primary" style="stroke-dasharray: 80%, 251.32%"/>
  5696. </svg>
  5697. */
  5698. .progress-circular {
  5699. height: 32px;
  5700. position: relative;
  5701. width: 32px;
  5702. -webkit-transform: rotate(270deg);
  5703. transform: rotate(270deg);
  5704. -webkit-animation: none;
  5705. animation: none;
  5706. }
  5707. .progress-circular__background,
  5708. .progress-circular__primary,
  5709. .progress-circular__secondary {
  5710. cx: 50%;
  5711. cy: 50%;
  5712. r: 40%;
  5713. -webkit-animation: none;
  5714. animation: none;
  5715. fill: none;
  5716. stroke-width: 5%;
  5717. stroke-miterlimit: 10;
  5718. }
  5719. .progress-circular__background {
  5720. stroke: transparent;
  5721. }
  5722. .progress-circular__primary {
  5723. stroke-dasharray: 1, 200;
  5724. stroke-dashoffset: 0;
  5725. stroke: #0076ff;
  5726. transition: all 1s cubic-bezier(0.4, 0, 0.2, 1);
  5727. }
  5728. .progress-circular__secondary {
  5729. stroke: #65adff;
  5730. }
  5731. .progress-circular--indeterminate {
  5732. -webkit-animation: progress__rotate 2s linear infinite;
  5733. animation: progress__rotate 2s linear infinite;
  5734. -webkit-transform: none;
  5735. transform: none;
  5736. }
  5737. .progress-circular--indeterminate__primary {
  5738. -webkit-animation: progress__dash 1.5s ease-in-out infinite;
  5739. animation: progress__dash 1.5s ease-in-out infinite;
  5740. }
  5741. .progress-circular--indeterminate__secondary {
  5742. display: none;
  5743. }
  5744. @-webkit-keyframes progress__rotate {
  5745. 100% {
  5746. -webkit-transform: rotate(360deg);
  5747. transform: rotate(360deg);
  5748. }
  5749. }
  5750. @keyframes progress__rotate {
  5751. 100% {
  5752. -webkit-transform: rotate(360deg);
  5753. transform: rotate(360deg);
  5754. }
  5755. }
  5756. @-webkit-keyframes progress__dash {
  5757. 0% {
  5758. stroke-dasharray: 10%, 241.32%;
  5759. stroke-dashoffset: 0;
  5760. }
  5761. 50% {
  5762. stroke-dasharray: 201%, 50.322%;
  5763. stroke-dashoffset: -100%;
  5764. }
  5765. 100% {
  5766. stroke-dasharray: 10%, 241.32%;
  5767. stroke-dashoffset: -251.32%;
  5768. }
  5769. }
  5770. @keyframes progress__dash {
  5771. 0% {
  5772. stroke-dasharray: 10%, 241.32%;
  5773. stroke-dashoffset: 0;
  5774. }
  5775. 50% {
  5776. stroke-dasharray: 201%, 50.322%;
  5777. stroke-dashoffset: -100%;
  5778. }
  5779. 100% {
  5780. stroke-dasharray: 10%, 241.32%;
  5781. stroke-dashoffset: -251.32%;
  5782. }
  5783. }
  5784. /*~
  5785. name: Material Progress Circle
  5786. category: Progress Circle
  5787. elements: ons-progress-circular
  5788. markup: |
  5789. <svg class="progress-circular progress-circular--material progress-circular--indeterminate">
  5790. <circle class="progress-circular__background progress-circular--material__background"/>
  5791. <circle class="progress-circular__primary progress-circular--material__primary progress-circular--indeterminate__primary"/>
  5792. <circle class="progress-circular__secondary progress-circular--material__secondary progress-circular--indeterminate__secondary"/>
  5793. </svg>
  5794. <svg class="progress-circular progress-circular--material">
  5795. <circle class="progress-circular__background progress-circular--material__background"/>
  5796. <circle class="progress-circular__secondary progress-circular--material__secondary" style="stroke-dasharray: 140%, 251.32%"/>
  5797. <circle class="progress-circular__primary progress-circular--material__primary" style="stroke-dasharray: 100%, 251.32%"/>
  5798. </svg>
  5799. <svg class="progress-circular progress-circular--material">
  5800. <circle class="progress-circular__background progress-circular--material__background"/>
  5801. <circle class="progress-circular__primary progress-circular--material__primary" style="stroke-dasharray: 80%, 251.32%"/>
  5802. </svg>
  5803. */
  5804. .progress-circular--material__background,
  5805. .progress-circular--material__primary,
  5806. .progress-circular--material__secondary {
  5807. stroke-width: 9%;
  5808. }
  5809. .progress-circular--material__background {
  5810. stroke: transparent;
  5811. }
  5812. .progress-circular--material__primary {
  5813. stroke: #37474f;
  5814. }
  5815. .progress-circular--material__secondary {
  5816. stroke: #548ba7;
  5817. }
  5818. /*~
  5819. name: Fab
  5820. category: Fab
  5821. elements: ons-fab
  5822. markup: |
  5823. <button class="fab"><i class="zmdi zmdi-car"></i></button>
  5824. <button class="fab" disabled><i class="zmdi zmdi-car"></i></button>
  5825. */
  5826. /* stylelint-disable */
  5827. ons-fab.fab, ons-speed-dial-item.fab, button.fab {
  5828. position: relative;
  5829. display: inline-block;
  5830. box-sizing: border-box;
  5831. background-clip: padding-box;
  5832. padding: 0;
  5833. margin: 0;
  5834. font: inherit;
  5835. color: inherit;
  5836. background: transparent;
  5837. border: none;
  5838. line-height: normal;
  5839. font-family: -apple-system, 'Helvetica Neue', 'Helvetica', 'Arial', 'Lucida Grande', sans-serif;
  5840. -webkit-font-smoothing: antialiased;
  5841. -moz-osx-font-smoothing: grayscale;
  5842. font-weight: 400;
  5843. cursor: default;
  5844. -webkit-user-select: none;
  5845. -moz-user-select: none;
  5846. -ms-user-select: none;
  5847. user-select: none;
  5848. width: 56px;
  5849. height: 56px;
  5850. text-decoration: none;
  5851. font-size: 25px;
  5852. line-height: 56px;
  5853. letter-spacing: 0;
  5854. color: #ffffff;
  5855. vertical-align: middle;
  5856. text-align: center;
  5857. background-color: #0076ff;
  5858. border: 0 solid currentColor;
  5859. border-radius: 50%;
  5860. overflow: hidden;
  5861. box-shadow: 0 3px 6px rgba(0, 0, 0, .12);
  5862. transition: all 0.1s linear;
  5863. }
  5864. ons-fab.fab:active, ons-speed-dial-item.fab:active, button.fab:active {
  5865. box-shadow: 0 3px 6 rgba(0, 0, 0, .12);
  5866. background-color: rgba(0, 118, 255, 0.7);
  5867. transition: all 0.2s ease;
  5868. box-shadow: 0 0 6 rgba(0, 0, 0, .12);
  5869. }
  5870. ons-fab.fab:focus, ons-speed-dial-item.fab:focus, button.fab:focus {
  5871. outline: 0;
  5872. }
  5873. ons-fab.fab:disabled,
  5874. ons-fab.fab[disabled],
  5875. ons-speed-dial-item.fab:disabled,
  5876. ons-speed-dial-item.fab[disabled],
  5877. button.fab:disabled,
  5878. button.fab[disabled] {
  5879. background-color: rgba(0, 0, 0, 0.5);
  5880. box-shadow: none;
  5881. opacity: 0.3;
  5882. cursor: default;
  5883. pointer-events: none;
  5884. }
  5885. ons-fab.fab__icon, ons-speed-dial-item.fab__icon, button.fab__icon {
  5886. position: relative;
  5887. overflow: hidden;
  5888. height: 100%;
  5889. width: 100%;
  5890. display: block;
  5891. border-radius: 100%;
  5892. padding: 0;
  5893. z-index: 100;
  5894. line-height: 56px;
  5895. }
  5896. /* stylelint-enable */
  5897. /*~
  5898. name: Material Fab
  5899. category: Fab
  5900. elements: ons-fab
  5901. markup: |
  5902. <button class="fab fab--material"><i class="zmdi zmdi-car"></i></button>
  5903. <button class="fab fab--material" disabled><i class="zmdi zmdi-car"></i></button>
  5904. */
  5905. /* stylelint-disable */
  5906. ons-fab.fab--material, ons-speed-dial-item.fab--material, button.fab--material {
  5907. position: relative;
  5908. display: inline-block;
  5909. box-sizing: border-box;
  5910. background-clip: padding-box;
  5911. padding: 0;
  5912. margin: 0;
  5913. font: inherit;
  5914. color: inherit;
  5915. background: transparent;
  5916. border: none;
  5917. line-height: normal;
  5918. font-family: -apple-system, 'Helvetica Neue', 'Helvetica', 'Arial', 'Lucida Grande', sans-serif;
  5919. -webkit-font-smoothing: antialiased;
  5920. -moz-osx-font-smoothing: grayscale;
  5921. font-weight: 400;
  5922. cursor: default;
  5923. -webkit-user-select: none;
  5924. -moz-user-select: none;
  5925. -ms-user-select: none;
  5926. user-select: none;
  5927. width: 56px;
  5928. height: 56px;
  5929. text-decoration: none;
  5930. font-size: 25px;
  5931. line-height: 56px;
  5932. letter-spacing: 0;
  5933. color: #ffffff;
  5934. vertical-align: middle;
  5935. text-align: center;
  5936. background-color: #0076ff;
  5937. border: 0 solid currentColor;
  5938. border-radius: 50%;
  5939. overflow: hidden;
  5940. box-shadow: 0 3px 6px rgba(0, 0, 0, .12);
  5941. transition: all 0.1s linear;
  5942. font-family: 'Roboto', 'Noto', sans-serif;
  5943. -webkit-font-smoothing: antialiased;
  5944. font-weight: 400;
  5945. width: 56px;
  5946. height: 56px;
  5947. text-decoration: none;
  5948. font-size: 25px;
  5949. line-height: 56px;
  5950. color: #31313a;
  5951. background-color: #ffffff;
  5952. box-shadow:
  5953. 0 4px 5px 0 rgba(0, 0, 0, .14),
  5954. 0 1px 10px 0 rgba(0, 0, 0, .12),
  5955. 0 2px 4px -1px rgba(0, 0, 0, .4);
  5956. transition: all 0.2s ease-in-out;
  5957. }
  5958. ons-fab.fab--material:active, ons-speed-dial-item.fab--material:active, button.fab--material:active {
  5959. box-shadow:
  5960. 0 8px 10px 1px rgba(0, 0, 0, .14),
  5961. 0 3px 14px 2px rgba(0, 0, 0, .12),
  5962. 0 5px 5px -3px rgba(0, 0, 0, .4);
  5963. background-color: rgba(255, 255, 255, .75);
  5964. transition: all 0.2s ease;
  5965. }
  5966. ons-fab.fab--material:focus, ons-speed-dial-item.fab--material:focus, button.fab--material:focus {
  5967. outline: 0;
  5968. }
  5969. ons-fab.fab--material__icon, ons-speed-dial-item.fab--material__icon, button.fab--material__icon {
  5970. position: relative;
  5971. overflow: hidden;
  5972. height: 100%;
  5973. width: 100%;
  5974. display: block;
  5975. border-radius: 100%;
  5976. padding: 0;
  5977. z-index: 100;
  5978. line-height: 56px;
  5979. }
  5980. ons-fab.fab--material:disabled,
  5981. ons-fab.fab--material[disabled],
  5982. ons-speed-dial-item.fab--material:disabled,
  5983. ons-speed-dial-item.fab--material[disabled],
  5984. button.fab--material:disabled,
  5985. button.fab--material[disabled] {
  5986. background-color: rgba(0, 0, 0, 0.5);
  5987. box-shadow: none;
  5988. opacity: 0.3;
  5989. cursor: default;
  5990. pointer-events: none;
  5991. }
  5992. /* stylelint-enable */
  5993. /*~
  5994. name: Fab Mini
  5995. category: Fab
  5996. elements: ons-fab
  5997. markup: |
  5998. <button class="fab fab--mini"><i class="zmdi zmdi-plus"></i></button>
  5999. <button class="fab fab--mini" disabled><i class="zmdi zmdi-plus"></i></button>
  6000. */
  6001. /*~
  6002. name: Material Fab Mini
  6003. category: Fab
  6004. elements: ons-fab
  6005. markup: |
  6006. <button class="fab fab--material fab--mini"><i class="zmdi zmdi-plus"></i></button>
  6007. <button class="fab fab--material fab--mini" disabled><i class="zmdi zmdi-plus"></i></button>
  6008. */
  6009. /* stylelint-disable */
  6010. ons-fab.fab--mini, ons-speed-dial-item.fab--mini, button.fab--mini {
  6011. width: 40px;
  6012. height: 40px;
  6013. line-height: 40px;
  6014. }
  6015. ons-fab.fab--mini__icon, ons-speed-dial-item.fab--mini__icon, button.fab--mini__icon {
  6016. line-height: 40px;
  6017. }
  6018. ons-fab.speed-dial__item, ons-speed-dial-item.speed-dial__item, button.speed-dial__item {
  6019. position: absolute;
  6020. -webkit-transform: scale(0);
  6021. transform: scale(0);
  6022. }
  6023. /* stylelint-enable */
  6024. /* stylelint-disable */
  6025. ons-fab.fab--top__right, button.fab--top__right, .speed-dial.fab--top__right {
  6026. top: 20px;
  6027. bottom: auto;
  6028. right: 20px;
  6029. left: auto;
  6030. position: absolute;
  6031. }
  6032. ons-fab.fab--bottom__right, button.fab--bottom__right, .speed-dial.fab--bottom__right {
  6033. top: auto;
  6034. bottom: 20px;
  6035. right: 20px;
  6036. left: auto;
  6037. position: absolute;
  6038. }
  6039. ons-fab.fab--top__left, button.fab--top__left, .speed-dial.fab--top__left {
  6040. top: 20px;
  6041. bottom: auto;
  6042. right: auto;
  6043. left: 20px;
  6044. position: absolute;
  6045. }
  6046. ons-fab.fab--bottom__left, button.fab--bottom__left, .speed-dial.fab--bottom__left {
  6047. top: auto;
  6048. bottom: 20px;
  6049. right: auto;
  6050. left: 20px;
  6051. position: absolute;
  6052. }
  6053. ons-fab.fab--top__center, button.fab--top__center, .speed-dial.fab--top__center {
  6054. top: 20px;
  6055. bottom: auto;
  6056. margin-left: -28px;
  6057. left: 50%;
  6058. right: auto;
  6059. position: absolute;
  6060. }
  6061. ons-fab.fab--bottom__center, button.fab--bottom__center, .speed-dial.fab--bottom__center {
  6062. top: auto;
  6063. bottom: 20px;
  6064. margin-left: -28px;
  6065. left: 50%;
  6066. right: auto;
  6067. position: absolute;
  6068. }
  6069. /* stylelint-enable */
  6070. /*~
  6071. name: Modal
  6072. category: Modal
  6073. elements: ons-modal
  6074. markup: |
  6075. <div class="modal">
  6076. <div class="modal__content">
  6077. Message Text
  6078. </div>
  6079. </div>
  6080. */
  6081. .modal {
  6082. box-sizing: border-box;
  6083. background-clip: padding-box;
  6084. white-space: nowrap;
  6085. overflow: hidden;
  6086. word-spacing: 0;
  6087. padding: 0;
  6088. margin: 0;
  6089. font: inherit;
  6090. color: inherit;
  6091. background: transparent;
  6092. border: none;
  6093. line-height: normal;
  6094. box-sizing: border-box;
  6095. background-clip: padding-box;
  6096. font-family: -apple-system, 'Helvetica Neue', 'Helvetica', 'Arial', 'Lucida Grande', sans-serif;
  6097. -webkit-font-smoothing: antialiased;
  6098. -moz-osx-font-smoothing: grayscale;
  6099. font-weight: 400;
  6100. overflow: hidden;
  6101. background-color: rgba(0, 0, 0, .7);
  6102. position: absolute;
  6103. left: 0;
  6104. right: 0;
  6105. top: 0;
  6106. bottom: 0;
  6107. width: 100%;
  6108. height: 100%;
  6109. display: table;
  6110. z-index: 2147483647;
  6111. }
  6112. .modal__content {
  6113. box-sizing: border-box;
  6114. background-clip: padding-box;
  6115. white-space: nowrap;
  6116. overflow: hidden;
  6117. word-spacing: 0;
  6118. padding: 0;
  6119. margin: 0;
  6120. font: inherit;
  6121. color: inherit;
  6122. background: transparent;
  6123. border: none;
  6124. line-height: normal;
  6125. box-sizing: border-box;
  6126. background-clip: padding-box;
  6127. font-family: -apple-system, 'Helvetica Neue', 'Helvetica', 'Arial', 'Lucida Grande', sans-serif;
  6128. -webkit-font-smoothing: antialiased;
  6129. -moz-osx-font-smoothing: grayscale;
  6130. font-weight: 400;
  6131. display: table-cell;
  6132. vertical-align: middle;
  6133. text-align: center;
  6134. color: #fff;
  6135. white-space: normal;
  6136. }
  6137. /*~
  6138. name: Select Input
  6139. category: Select Input
  6140. markup: |
  6141. <select class="select-input">
  6142. <option>Option 1</option>
  6143. <option>Option 2</option>
  6144. <option>Option 3</option>
  6145. </select>
  6146. &nbsp;
  6147. <select class="select-input" disabled>
  6148. <option>Option 1</option>
  6149. <option>Option 2</option>
  6150. <option>Option 3</option>
  6151. </select>
  6152. */
  6153. .select-input {
  6154. box-sizing: border-box;
  6155. background-clip: padding-box;
  6156. padding: 0;
  6157. margin: 0;
  6158. font: inherit;
  6159. color: inherit;
  6160. background: transparent;
  6161. border: none;
  6162. vertical-align: top;
  6163. outline: none;
  6164. line-height: 1;
  6165. font-family: -apple-system, 'Helvetica Neue', 'Helvetica', 'Arial', 'Lucida Grande', sans-serif;
  6166. -webkit-font-smoothing: antialiased;
  6167. -moz-osx-font-smoothing: grayscale;
  6168. font-weight: 400;
  6169. border: none;
  6170. background-color: transparent;
  6171. position: relative;
  6172. font-size: 17px;
  6173. height: 32px;
  6174. line-height: 32px;
  6175. border-color: #ccc;
  6176. color: #1f1f21;
  6177. -webkit-appearance: none;
  6178. -moz-appearance: none;
  6179. appearance: none;
  6180. display: inline-block;
  6181. border-radius: 0;
  6182. border: none;
  6183. padding: 0 20px 0 0;
  6184. background-color: transparent;
  6185. background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTBweCIgaGVpZ2h0PSI1cHgiIHZpZXdCb3g9IjAgMCAxMCA1IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCA0My4yICgzOTA2OSkgLSBodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2ggLS0+CiAgICA8dGl0bGU+c2VsZWN0LWFsbG93PC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGRlZnM+PC9kZWZzPgogICAgPGcgaWQ9InNlbGVjdCIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPGcgaWQ9Imlvcy1zZWxlY3QiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xOTguMDAwMDAwLCAtMTE0LjAwMDAwMCkiIGZpbGw9IiM3NTc1NzUiPgogICAgICAgICAgICA8ZyBpZD0ibWVudS1iYXItKy1vcGVuLW1lbnUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEyMy4wMDAwMDAsIDEwMC4wMDAwMDApIj4KICAgICAgICAgICAgICAgIDxnIGlkPSJtZW51LWJhciI+CiAgICAgICAgICAgICAgICAgICAgPHBvbHlnb24gaWQ9InNlbGVjdC1hbGxvdyIgcG9pbnRzPSI3NSAxNCA4MCAxOSA4NSAxNCI+PC9wb2x5Z29uPgogICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICA8L2c+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4=');
  6186. background-repeat: no-repeat;
  6187. background-position: right center;
  6188. border-bottom: none;
  6189. }
  6190. .select-input::-ms-clear {
  6191. display: none;
  6192. }
  6193. .select-input::-webkit-input-placeholder {
  6194. color: #999;
  6195. }
  6196. .select-input:-ms-input-placeholder {
  6197. color: #999;
  6198. }
  6199. .select-input::-ms-input-placeholder {
  6200. color: #999;
  6201. }
  6202. .select-input::placeholder {
  6203. color: #999;
  6204. }
  6205. .select-input:disabled {
  6206. opacity: 0.3;
  6207. cursor: default;
  6208. pointer-events: none;
  6209. border: none;
  6210. background-color: transparent;
  6211. }
  6212. .select-input:disabled::-webkit-input-placeholder {
  6213. border: none;
  6214. background-color: transparent;
  6215. color: #999;
  6216. }
  6217. .select-input:disabled:-ms-input-placeholder {
  6218. border: none;
  6219. background-color: transparent;
  6220. color: #999;
  6221. }
  6222. .select-input:disabled::-ms-input-placeholder {
  6223. border: none;
  6224. background-color: transparent;
  6225. color: #999;
  6226. }
  6227. .select-input:disabled::placeholder {
  6228. border: none;
  6229. background-color: transparent;
  6230. color: #999;
  6231. }
  6232. .select-input:invalid {
  6233. border: none;
  6234. background-color: transparent;
  6235. color: #1f1f21;
  6236. }
  6237. .select-input[multiple] {
  6238. height: 64px;
  6239. }
  6240. /*~
  6241. name: Material Select Input
  6242. category: Select Input
  6243. markup: |
  6244. <select class="select-input select-input--material">
  6245. <option>Option 1</option>
  6246. <option>Option 2</option>
  6247. <option>Option 3</option>
  6248. </select>
  6249. &nbsp;
  6250. <select class="select-input select-input--material" disabled>
  6251. <option>Option 1</option>
  6252. <option>Option 2</option>
  6253. <option>Option 3</option>
  6254. </select>
  6255. */
  6256. .select-input--material {
  6257. font-family: 'Roboto', 'Noto', sans-serif;
  6258. -webkit-font-smoothing: antialiased;
  6259. font-weight: 400;
  6260. color: #1f1f21;
  6261. font-size: 15px;
  6262. background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTBweCIgaGVpZ2h0PSI1cHgiIHZpZXdCb3g9IjAgMCAxMCA1IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCA0My4yICgzOTA2OSkgLSBodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2ggLS0+CiAgICA8dGl0bGU+c2VsZWN0LWFsbG93PC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGRlZnM+PC9kZWZzPgogICAgPGcgaWQ9InNlbGVjdCIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPGcgaWQ9Imlvcy1zZWxlY3QiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xOTguMDAwMDAwLCAtMTE0LjAwMDAwMCkiIGZpbGw9IiM3NTc1NzUiPgogICAgICAgICAgICA8ZyBpZD0ibWVudS1iYXItKy1vcGVuLW1lbnUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEyMy4wMDAwMDAsIDEwMC4wMDAwMDApIj4KICAgICAgICAgICAgICAgIDxnIGlkPSJtZW51LWJhciI+CiAgICAgICAgICAgICAgICAgICAgPHBvbHlnb24gaWQ9InNlbGVjdC1hbGxvdyIgcG9pbnRzPSI3NSAxNCA4MCAxOSA4NSAxNCI+PC9wb2x5Z29uPgogICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICA8L2c+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4='), linear-gradient(to top, rgba(0, 0, 0, 0.12) 50%, rgba(0, 0, 0, 0.12) 50%);
  6263. background-size: auto, 100% 1px;
  6264. background-repeat: no-repeat;
  6265. background-position: right center, left bottom;
  6266. border: none;
  6267. font-weight: 400;
  6268. -webkit-transform: translate3d(0, 0, 0);
  6269. transform: translate3d(0, 0, 0); /* prevent ios flicker */
  6270. }
  6271. .select-input--material__label {
  6272. font-family: 'Roboto', 'Noto', sans-serif;
  6273. -webkit-font-smoothing: antialiased;
  6274. font-weight: 400;
  6275. color: rgba(0, 0, 0, .81);
  6276. position: absolute;
  6277. left: 0;
  6278. top: 2px;
  6279. font-size: 16px;
  6280. pointer-events: none;
  6281. }
  6282. .select-input--material__label--active {
  6283. color: rgba(0, 0, 0, .15);
  6284. -webkit-transform: translate(0, -75%) scale(0.75);
  6285. transform: translate(0, -75%) scale(0.75);
  6286. -webkit-transform-origin: left top;
  6287. transform-origin: left top;
  6288. transition: color 0.1s ease-in, -webkit-transform 0.1s ease-in;
  6289. transition: transform 0.1s ease-in, color 0.1s ease-in;
  6290. transition: transform 0.1s ease-in, color 0.1s ease-in, -webkit-transform 0.1s ease-in;
  6291. }
  6292. .select-input--material::-webkit-input-placeholder {
  6293. color: rgba(0, 0, 0, .81);
  6294. line-height: 20px;
  6295. }
  6296. .select-input--material:-ms-input-placeholder {
  6297. color: rgba(0, 0, 0, .81);
  6298. line-height: 20px;
  6299. }
  6300. .select-input--material::-ms-input-placeholder {
  6301. color: rgba(0, 0, 0, .81);
  6302. line-height: 20px;
  6303. }
  6304. .select-input--material::placeholder {
  6305. color: rgba(0, 0, 0, .81);
  6306. line-height: 20px;
  6307. }
  6308. @-webkit-keyframes material-select-input-animate {
  6309. 0% {
  6310. background-size: 0% 2px, 100% 2px;
  6311. }
  6312. 100% {
  6313. background-size: 100% 2px, 100% 2px;
  6314. }
  6315. }
  6316. @keyframes material-select-input-animate {
  6317. 0% {
  6318. background-size: 0% 2px, 100% 2px;
  6319. }
  6320. 100% {
  6321. background-size: 100% 2px, 100% 2px;
  6322. }
  6323. }
  6324. /*~
  6325. name: Underbar Select Input
  6326. category: Select Input
  6327. markup: |
  6328. <select class="select-input select-input--underbar">
  6329. <option>Option 1</option>
  6330. <option>Option 2</option>
  6331. <option>Option 3</option>
  6332. </select>
  6333. &nbsp;
  6334. <select class="select-input select-input--underbar" disabled>
  6335. <option>Option 1</option>
  6336. <option>Option 2</option>
  6337. <option>Option 3</option>
  6338. </select>
  6339. */
  6340. .select-input--underbar {
  6341. border: none;
  6342. border-bottom: 1px solid #ccc;
  6343. }
  6344. .select-input--underbar:disabled {
  6345. opacity: 0.3;
  6346. cursor: default;
  6347. pointer-events: none;
  6348. border: none;
  6349. background-color: transparent;
  6350. border: none;
  6351. background-color: transparent;
  6352. border-bottom: 1px solid #ccc;
  6353. }
  6354. .select-input--underbar:disabled::-webkit-input-placeholder {
  6355. border: none;
  6356. background-color: transparent;
  6357. color: #999;
  6358. border: none;
  6359. background-color: transparent;
  6360. }
  6361. .select-input--underbar:disabled:-ms-input-placeholder {
  6362. border: none;
  6363. background-color: transparent;
  6364. color: #999;
  6365. border: none;
  6366. background-color: transparent;
  6367. }
  6368. .select-input--underbar:disabled::-ms-input-placeholder {
  6369. border: none;
  6370. background-color: transparent;
  6371. color: #999;
  6372. border: none;
  6373. background-color: transparent;
  6374. }
  6375. .select-input--underbar:disabled::placeholder {
  6376. border: none;
  6377. background-color: transparent;
  6378. color: #999;
  6379. border: none;
  6380. background-color: transparent;
  6381. }
  6382. .select-input--underbar:invalid {
  6383. border: none;
  6384. background-color: transparent;
  6385. color: #1f1f21;
  6386. border: none;
  6387. background-color: transparent;
  6388. border-bottom: 1px solid #ccc;
  6389. }
  6390. /*~
  6391. name: Action Sheet
  6392. category: Action Sheet
  6393. markup: |
  6394. <div class="action-sheet-mask"></div>
  6395. <div class="action-sheet">
  6396. <div class="action-sheet-title">Title</div>
  6397. <button class="action-sheet-button">Label</button>
  6398. <button class="action-sheet-button">Cancel</button>
  6399. </div>
  6400. */
  6401. /*~
  6402. name: Action Sheet with Delete Label
  6403. category: Action Sheet
  6404. markup: |
  6405. <div class="action-sheet-mask"></div>
  6406. <div class="action-sheet">
  6407. <button class="action-sheet-button">Label</button>
  6408. <button class="action-sheet-button action-sheet-button--destructive">Delete Label</button>
  6409. <button class="action-sheet-button">Cancel</button>
  6410. </div>
  6411. */
  6412. .action-sheet {
  6413. font-family: -apple-system, 'Helvetica Neue', 'Helvetica', 'Arial', 'Lucida Grande', sans-serif;
  6414. -webkit-font-smoothing: antialiased;
  6415. -moz-osx-font-smoothing: grayscale;
  6416. font-weight: 400;
  6417. cursor: default;
  6418. position: absolute;
  6419. left: 10px; /* iOS 9, 10, 11 */
  6420. right: 10px; /* iOS 9, 10, 11 */
  6421. bottom: 10px; /* iOS 9, 10, 11 */
  6422. z-index: 2;
  6423. }
  6424. .action-sheet-button {
  6425. box-sizing: border-box;
  6426. height: 56px;
  6427. font-size: 20px;
  6428. text-align: center;
  6429. color: #0076ff;
  6430. background-color: rgba(255, 255, 255, .9);
  6431. border-radius: 0;
  6432. line-height: 56px;
  6433. border: none;
  6434. -webkit-appearance: none;
  6435. -moz-appearance: none;
  6436. appearance: none;
  6437. display: block;
  6438. width: 100%;
  6439. text-overflow: ellipsis;
  6440. white-space: nowrap;
  6441. overflow: hidden;
  6442. background-size: 100% 1px;
  6443. background-repeat: no-repeat;
  6444. background-position: bottom;
  6445. background-image: linear-gradient(0deg, rgba(0, 0, 0, .1), rgba(0, 0, 0, .1) 100%);
  6446. }
  6447. @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) {
  6448. .action-sheet-button {
  6449. background-image: linear-gradient(0deg, rgba(0, 0, 0, .1), rgba(0, 0, 0, .1) 50%, transparent 50%);
  6450. }
  6451. }
  6452. .action-sheet-button:first-child {
  6453. border-top-left-radius: 12px;
  6454. border-top-right-radius: 12px;
  6455. }
  6456. .action-sheet-button:active {
  6457. background-color: #e9e9e9;
  6458. background-image: none;
  6459. }
  6460. .action-sheet-button:focus {
  6461. outline: none;
  6462. }
  6463. .action-sheet-button:nth-last-of-type(2) {
  6464. border-bottom-right-radius: 12px;
  6465. border-bottom-left-radius: 12px;
  6466. background-image: none;
  6467. }
  6468. .action-sheet-button:last-of-type {
  6469. border-radius: 12px;
  6470. margin: 8px 0 0 0; /* iOS 9, 10, 11 */
  6471. background-color: #fff;
  6472. background-image: none;
  6473. font-weight: 600;
  6474. }
  6475. .action-sheet-button:last-of-type:active {
  6476. background-color: #e9e9e9;
  6477. }
  6478. .action-sheet-button--destructive {
  6479. color: #fe3824;
  6480. }
  6481. .action-sheet-title {
  6482. box-sizing: border-box;
  6483. height: 56px;
  6484. font-size: 13px;
  6485. color: #8f8e94;
  6486. text-align: center;
  6487. background-color: rgba(255, 255, 255, .9);
  6488. line-height: 56px;
  6489. text-overflow: ellipsis;
  6490. white-space: nowrap;
  6491. overflow: hidden;
  6492. background-size: 100% 1px;
  6493. background-repeat: no-repeat;
  6494. background-position: bottom;
  6495. background-image: linear-gradient(0deg, rgba(0, 0, 0, .1), rgba(0, 0, 0, .1) 100%);
  6496. }
  6497. @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) {
  6498. .action-sheet-title {
  6499. background-image: linear-gradient(0deg, rgba(0, 0, 0, .1), rgba(0, 0, 0, .1) 50%, transparent 50%);
  6500. }
  6501. }
  6502. .action-sheet-title:first-child {
  6503. border-top-left-radius: 12px;
  6504. border-top-right-radius: 12px;
  6505. }
  6506. .action-sheet-icon {
  6507. display: none;
  6508. }
  6509. .action-sheet-mask {
  6510. position: absolute;
  6511. left: 0;
  6512. top: 0;
  6513. right: 0;
  6514. bottom: 0;
  6515. background-color: rgba(0, 0, 0, .1);
  6516. z-index: 1;
  6517. }
  6518. /*~
  6519. name: Material Action Sheet
  6520. category: Action Sheet
  6521. markup: |
  6522. <div class="action-sheet-mask action-sheet-mask--material"></div>
  6523. <div class="action-sheet action-sheet--material">
  6524. <button class="action-sheet-button action-sheet-button--material"><i class="ion-android-checkbox-blank action-sheet-icon--material"></i>Label</button>
  6525. <button class="action-sheet-button action-sheet-button--material"><i class="ion-android-checkbox-blank action-sheet-icon--material"></i>Label</button>
  6526. <button class="action-sheet-button action-sheet-button--material"><i class="ion-android-close action-sheet-icon--material"></i>Cancel</button>
  6527. </div>
  6528. */
  6529. /*~
  6530. name: Material Action Sheet with Title
  6531. category: Action Sheet
  6532. markup: |
  6533. <div class="action-sheet-mask action-sheet-mask--material"></div>
  6534. <div class="action-sheet action-sheet--material">
  6535. <div class="action-sheet-title action-sheet-title--material">Title</div>
  6536. <button class="action-sheet-button action-sheet-button--material"><i class="ion-android-checkbox-blank action-sheet-icon--material"></i>Label</button>
  6537. <button class="action-sheet-button action-sheet-button--material"><i class="ion-android-close action-sheet-icon--material"></i>Cancel</button>
  6538. </div>
  6539. */
  6540. .action-sheet--material {
  6541. left: 0;
  6542. right: 0;
  6543. bottom: 0;
  6544. box-shadow:
  6545. 0 16px 24px 2px rgba(0, 0, 0, .14),
  6546. 0 6px 30px 5px rgba(0, 0, 0, .12),
  6547. 0 8px 10px -5px rgba(0, 0, 0, .4);
  6548. }
  6549. .action-sheet-title--material {
  6550. font-family: 'Roboto', 'Noto', sans-serif;
  6551. -webkit-font-smoothing: antialiased;
  6552. font-weight: 400;
  6553. border-radius: 0;
  6554. background-image: none;
  6555. text-align: left;
  6556. height: 56px;
  6557. line-height: 56px;
  6558. font-size: 16px;
  6559. padding: 0 0 0 16px;
  6560. color: #686868;
  6561. background-color: white;
  6562. font-weight: 400;
  6563. }
  6564. .action-sheet-title--material:first-child {
  6565. border-radius: 0;
  6566. }
  6567. .action-sheet-button--material {
  6568. font-family: 'Roboto', 'Noto', sans-serif;
  6569. -webkit-font-smoothing: antialiased;
  6570. font-weight: 400;
  6571. border-radius: 0;
  6572. background-image: none;
  6573. height: 52px;
  6574. line-height: 52px;
  6575. text-align: left;
  6576. font-size: 16px;
  6577. padding: 0 0 0 16px;
  6578. color: #686868;
  6579. font-weight: 400;
  6580. background-color: white;
  6581. }
  6582. .action-sheet-button--material:first-child {
  6583. border-radius: 0;
  6584. }
  6585. .action-sheet-button--material:nth-last-of-type(2) {
  6586. border-radius: 0;
  6587. }
  6588. .action-sheet-button--material:last-of-type {
  6589. margin: 0;
  6590. border-radius: 0;
  6591. font-weight: 400;
  6592. background-color: white;
  6593. }
  6594. .action-sheet-icon--material {
  6595. display: inline-block;
  6596. float: left;
  6597. height: 52px;
  6598. line-height: 52px;
  6599. margin-right: 32px;
  6600. font-size: 26px;
  6601. width: 0.8em;
  6602. text-align: center;
  6603. }
  6604. .action-sheet-mask--material {
  6605. background-color: rgba(0, 0, 0, .2);
  6606. }
  6607. /*~
  6608. name: Card
  6609. category: Card
  6610. markup: |
  6611. <div style="height: 200px; padding: 1px 0 0 0;">
  6612. <div class="card">
  6613. <div class="card__content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
  6614. </div>
  6615. </div>
  6616. */
  6617. .card {
  6618. font-family: -apple-system, 'Helvetica Neue', 'Helvetica', 'Arial', 'Lucida Grande', sans-serif;
  6619. -webkit-font-smoothing: antialiased;
  6620. -moz-osx-font-smoothing: grayscale;
  6621. font-weight: 400;
  6622. box-shadow: 0 1px 2px rgba(0, 0, 0, .12);
  6623. border-radius: 8px;
  6624. background-color: white;
  6625. box-sizing: border-box;
  6626. display: block;
  6627. margin: 8px;
  6628. padding: 16px;
  6629. text-align: left;
  6630. word-wrap: break-word;
  6631. }
  6632. .card__content {
  6633. margin: 0;
  6634. font-size: 14px;
  6635. line-height: 1.4;
  6636. color: #030303;
  6637. }
  6638. /*~
  6639. name: Card with Title
  6640. category: Card
  6641. markup: |
  6642. <div style="height: 200px; padding: 1px 0 0 0;">
  6643. <div class="card">
  6644. <h2 class="card__title">Card Title</h2>
  6645. <div class="card__content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
  6646. </div>
  6647. </div>
  6648. */
  6649. .card__title {
  6650. font-family: -apple-system, 'Helvetica Neue', 'Helvetica', 'Arial', 'Lucida Grande', sans-serif;
  6651. -webkit-font-smoothing: antialiased;
  6652. -moz-osx-font-smoothing: grayscale;
  6653. font-weight: 400;
  6654. font-weight: 400;
  6655. font-size: 20px;
  6656. margin: 4px 0 8px 0;
  6657. padding: 0;
  6658. display: block;
  6659. box-sizing: border-box;
  6660. }
  6661. /*~
  6662. name: Material Card
  6663. category: Card
  6664. markup: |
  6665. <div style="height: 200px; padding: 1px 0 0 0;">
  6666. <div class="card card--material">
  6667. <div class="card__content card--material__content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
  6668. </div>
  6669. </div>
  6670. */
  6671. .card--material {
  6672. background-color: white;
  6673. border-radius: 2px;
  6674. box-shadow:
  6675. 0 2px 2px 0 rgba(0, 0, 0, .14),
  6676. 0 1px 5px 0 rgba(0, 0, 0, .12),
  6677. 0 3px 1px -2px rgba(0, 0, 0, .2);
  6678. font-family: 'Roboto', 'Noto', sans-serif;
  6679. -webkit-font-smoothing: antialiased;
  6680. font-weight: 400;
  6681. }
  6682. .card--material__content {
  6683. font-size: 14px;
  6684. line-height: 1.4;
  6685. color: rgba(0, 0, 0, .54);
  6686. }
  6687. /*~
  6688. name: Material Card with Title
  6689. category: Card
  6690. markup: |
  6691. <div style="height: 200px; padding: 1px 0 0 0;">
  6692. <div class="card card--material">
  6693. <div class="card__title card--material__title">Card Title</div>
  6694. <div class="card__content card--material__content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
  6695. </div>
  6696. </div>
  6697. */
  6698. .card--material__title {
  6699. font-family: 'Roboto', 'Noto', sans-serif;
  6700. -webkit-font-smoothing: antialiased;
  6701. font-weight: 400;
  6702. font-size: 24px;
  6703. margin: 8px 0 12px 0;
  6704. }
  6705. /*~
  6706. name: Toast
  6707. category: Toast
  6708. markup: |
  6709. <div class="toast">
  6710. <div class="toast__message">Message Message Message Message Message Message</div>
  6711. <button class="toast__button">ACTION</button>
  6712. </div>
  6713. */
  6714. .toast {
  6715. font-family: -apple-system, 'Helvetica Neue', 'Helvetica', 'Arial', 'Lucida Grande', sans-serif;
  6716. -webkit-font-smoothing: antialiased;
  6717. -moz-osx-font-smoothing: grayscale;
  6718. font-weight: 400;
  6719. position: absolute;
  6720. z-index: 2;
  6721. left: 8px;
  6722. right: 8px;
  6723. bottom: 0;
  6724. margin: 8px 0;
  6725. border-radius: 8px;
  6726. background-color: rgba(0, 0, 0, .8);
  6727. display: -webkit-box;
  6728. display: -webkit-flex;
  6729. display: flex;
  6730. min-height: 48px;
  6731. line-height: 1.5;
  6732. box-sizing: border-box;
  6733. padding: 16px 16px;
  6734. }
  6735. .toast__message {
  6736. font-size: 14px;
  6737. color: white;
  6738. -webkit-box-flex: 1;
  6739. -webkit-flex-grow: 1;
  6740. flex-grow: 1;
  6741. text-align: left;
  6742. margin: 0 16px 0 0;
  6743. white-space: normal;
  6744. }
  6745. .toast__button {
  6746. font-size: 14px;
  6747. color: white;
  6748. -webkit-box-flex: 0;
  6749. -webkit-flex-grow: 0;
  6750. flex-grow: 0;
  6751. -webkit-appearance: none;
  6752. -moz-appearance: none;
  6753. appearance: none;
  6754. border: none;
  6755. background-color: transparent;
  6756. cursor: default;
  6757. text-transform: uppercase;
  6758. }
  6759. .toast__button:focus {
  6760. outline: none;
  6761. }
  6762. .toast__button:active {
  6763. opacity: 0.4;
  6764. }
  6765. /*~
  6766. name: Material Toast
  6767. category: Toast
  6768. markup: |
  6769. <div class="toast toast--material">
  6770. <div class="toast__message toast--material__message">Message Message Message Message Message Message</div>
  6771. <button class="toast__button toast--material__button">ACTION</button>
  6772. </div>
  6773. */
  6774. .toast--material {
  6775. left: 0;
  6776. right: 0;
  6777. bottom: 0;
  6778. margin: 0;
  6779. background-color: rgba(0, 0, 0, .8);
  6780. border-radius: 0;
  6781. padding: 16px 24px;
  6782. }
  6783. .toast--material__message {
  6784. font-family: 'Roboto', 'Noto', sans-serif;
  6785. -webkit-font-smoothing: antialiased;
  6786. font-weight: 400;
  6787. margin: 0 24px 0 0;
  6788. }
  6789. .toast--material__button {
  6790. font-family: 'Roboto', 'Noto', sans-serif;
  6791. -webkit-font-smoothing: antialiased;
  6792. font-weight: 400;
  6793. color: #bbdefb;
  6794. }
  6795. /* ------- */
  6796. /* Default */
  6797. /* ------- */
  6798. /* All toolbar */
  6799. .toolbar {
  6800. top: 0;
  6801. box-sizing: border-box;
  6802. padding-top: 0;
  6803. }
  6804. .bottom-bar {
  6805. bottom: 0;
  6806. box-sizing: border-box;
  6807. padding-bottom: 0;
  6808. }
  6809. /* All page__background with a ordinal toolbar */
  6810. .toolbar+.page__background {
  6811. top: 44px;
  6812. }
  6813. /* All page__content without toolbars */
  6814. .page__content {
  6815. top: 0;
  6816. padding-top: 0;
  6817. bottom: 0;
  6818. }
  6819. /* All page__content with a toolbar */
  6820. .toolbar+.page__background+.page__content {
  6821. top: 44px;
  6822. padding-top: 0;
  6823. }
  6824. /* All page__content with a bottom-bar */
  6825. .page-with-bottom-toolbar > .page__content {
  6826. bottom: 44px;
  6827. }
  6828. /* -------- */
  6829. /* Material */
  6830. /* -------- */
  6831. /* All page__background with a material toolbar */
  6832. .toolbar.toolbar--material+.page__background {
  6833. top: 56px;
  6834. }
  6835. /* All page__content with a material toolbar */
  6836. .toolbar.toolbar--material+.page__background+.page__content {
  6837. top: 56px;
  6838. padding-top: 0;
  6839. }
  6840. /* -------- */
  6841. /* Others */
  6842. /* -------- */
  6843. /* All page__background with a transparent toolbar */
  6844. .toolbar.toolbar--transparent+.page__background {
  6845. top: 0;
  6846. }
  6847. /* All page__content with a transparent cover-content toolbar and its direct descendant page_content */
  6848. .toolbar.toolbar--transparent.toolbar--cover-content+.page__background+.page__content,
  6849. .toolbar.toolbar--transparent.toolbar--cover-content+.page__background+.page__content .page_content {
  6850. top: 0;
  6851. padding-top: 44px;
  6852. }
  6853. /* All page__content with a material transparent cover-content toolbar and its direct descendant page_content */
  6854. .toolbar.toolbar--material.toolbar--transparent.toolbar--cover-content+.page__background+.page__content,
  6855. .toolbar.toolbar--material.toolbar--transparent.toolbar--cover-content+.page__background+.page__content .page_content {
  6856. top: 0;
  6857. padding-top: 56px;
  6858. }
  6859. /* -------- */
  6860. /* Tabbar */
  6861. /* -------- */
  6862. /* All top tabbar */
  6863. .tabbar--top {
  6864. padding-top: 0;
  6865. }
  6866. /* All bottom tabbar */
  6867. .tabbar:not(.tabbar--top) {
  6868. padding-bottom: 0;
  6869. }
  6870. /* non BEM */
  6871. /* @import './util.css'; */
  6872. @media (orientation: landscape) {
  6873. html[onsflag-iphonex-landscape] .page__content {
  6874. padding-left: 44px;
  6875. padding-right: 44px;
  6876. }
  6877. /* Ignore if the page is in dialogs or modals */
  6878. html[onsflag-iphonex-landscape] .dialog .page__content,
  6879. html[onsflag-iphonex-landscape] .modal .page__content {
  6880. padding-left: 0;
  6881. padding-right: 0;
  6882. }
  6883. }
  6884. /* @import './switch.css'; */
  6885. /* @import './range.css'; */
  6886. /* @import './notification.css'; */
  6887. @media (orientation: landscape) {
  6888. html[onsflag-iphonex-landscape] .toolbar__left {
  6889. padding-left: 44px;
  6890. }
  6891. html[onsflag-iphonex-landscape] .toolbar__right {
  6892. padding-right: 44px;
  6893. }
  6894. html[onsflag-iphonex-landscape] .bottom-bar {
  6895. padding-right: 44px;
  6896. padding-left: 44px;
  6897. }
  6898. }
  6899. /* @import './button.css'; */
  6900. /* @import './button-bar.css'; */
  6901. /* @import './segment.css'; */
  6902. @media (orientation: landscape) {
  6903. html[onsflag-iphonex-landscape] .tabbar {
  6904. padding-left: 44px;
  6905. padding-right: 44px;
  6906. width: calc(100% - 88px);
  6907. }
  6908. }
  6909. /* @import './toolbar-button.css'; */
  6910. /* @import './checkbox.css'; */
  6911. /* @import './radio-button.css'; */
  6912. /* @import './list.css'; */
  6913. /* @import './search-input.css'; */
  6914. /* @import './text-input.css'; */
  6915. /* @import './textarea.css'; */
  6916. /* @import './dialog.css'; */
  6917. /* @import './alert-dialog.css'; */
  6918. /* @import './popover.css'; */
  6919. /* @import './progress-bar.css'; */
  6920. /* @import './progress-circular.css'; */
  6921. @media (orientation: portrait) {
  6922. /* For top safe area */
  6923. html[onsflag-iphonex-portrait] .fab--top__left,
  6924. html[onsflag-iphonex-portrait] .fab--top__center,
  6925. html[onsflag-iphonex-portrait] .fab--top__right {
  6926. top: 64px;
  6927. }
  6928. /* For bottom safe area */
  6929. html[onsflag-iphonex-portrait] .fab--bottom__left,
  6930. html[onsflag-iphonex-portrait] .fab--bottom__center,
  6931. html[onsflag-iphonex-portrait] .fab--bottom__right {
  6932. bottom: 34px; /* Omit 20px space */
  6933. }
  6934. }
  6935. @media (orientation: landscape) {
  6936. /* For bottom safe area */
  6937. html[onsflag-iphonex-landscape] .fab--bottom__left,
  6938. html[onsflag-iphonex-landscape] .fab--bottom__center,
  6939. html[onsflag-iphonex-landscape] .fab--bottom__right {
  6940. bottom: 21px; /* Omit 20px space */
  6941. }
  6942. /* For left safe area */
  6943. html[onsflag-iphonex-landscape] .fab--top__left,
  6944. html[onsflag-iphonex-landscape] .fab--bottom__left {
  6945. left: 44px; /* Omit 20px space */
  6946. }
  6947. /* For right safe area */
  6948. html[onsflag-iphonex-landscape] .fab--top__right,
  6949. html[onsflag-iphonex-landscape] .fab--bottom__right {
  6950. right: 44px; /* Omit 20px space */
  6951. }
  6952. }
  6953. /* @import './modal.css'; */
  6954. /* @import './select.css'; */
  6955. @media (orientation: portrait) {
  6956. html[onsflag-iphonex-portrait] .action-sheet {
  6957. bottom: 48px; /* bottom safe area + 14 pt (extra bottom margin) */
  6958. }
  6959. }
  6960. @media (orientation: landscape) {
  6961. html[onsflag-iphonex-landscape] .action-sheet {
  6962. /* The width in landscape mode is the same as the width in portrait mode */
  6963. left: calc((100vw - 100vh + 20px) / 2);
  6964. right: calc((100vw - 100vh + 20px) / 2);
  6965. bottom: 33px; /* bottom safe area + 12 pt (extra bottom margin) */
  6966. }
  6967. }
  6968. /* @import './card.css'; */
  6969. @media (orientation: portrait) {
  6970. html[onsflag-iphonex-portrait] .toast {
  6971. bottom: 34px;
  6972. }
  6973. }
  6974. @media (orientation: landscape) {
  6975. html[onsflag-iphonex-landscape] .toast {
  6976. left: 52px;
  6977. right: 52px;
  6978. bottom: 21px;
  6979. }
  6980. }
  6981. /*
  6982. Note:
  6983. :not(X) does not work if X is a complex selector like `.foo .bar` due to the spec of :not(X).
  6984. Instead we have to use the following form for representing A:not(X A):not(Y A):not(Z A),
  6985. which means `A which does not have any X, Y and Z as its ancestors`.
  6986. // Equivalent to A:not(X A):not(Y A):not(Z A) { foo: bar; }
  6987. A {
  6988. // Apply styles for A
  6989. foo: bar;
  6990. }
  6991. X A,
  6992. Y A,
  6993. Z A {
  6994. // Subtract `X A`, `Y A` and `Z A`
  6995. // (Restore original styles of A)
  6996. }
  6997. */
  6998. /*
  6999. Note:
  7000. @apply has been deprecated as of Oct, 2017.
  7001. Please do not use @apply to restore original styles.
  7002. */
  7003. /* Bars and page contents */
  7004. @media (orientation: portrait) {
  7005. /* Outermost toolbar */
  7006. html[onsflag-iphonex-portrait] .toolbar {
  7007. top: 0;
  7008. box-sizing: content-box;
  7009. padding-top: 44px;
  7010. }
  7011. /* Non-outermost */
  7012. html[onsflag-iphonex-portrait] .dialog .toolbar, /* if wrapped with dialogs */
  7013. html[onsflag-iphonex-portrait] .toolbar:not(.toolbar--cover-content)+.page__background+.page__content .toolbar, /* if wrapped with a page with a toolbar */
  7014. html[onsflag-iphonex-portrait] .tabbar--top__content .toolbar { /* if wrapped with a top tabbar */
  7015. /* Restore original styles */
  7016. top: 0;
  7017. box-sizing: border-box;
  7018. padding-top: 0;
  7019. }
  7020. /* Outermost bottom-bar */
  7021. html[onsflag-iphonex-portrait] .bottom-bar {
  7022. bottom: 0;
  7023. box-sizing: content-box;
  7024. padding-bottom: 34px;
  7025. }
  7026. /* Non-outermost */
  7027. html[onsflag-iphonex-portrait] .dialog .bottom-bar, /* if wrapped with dialogs */
  7028. html[onsflag-iphonex-portrait] .page-with-bottom-toolbar > .page__content .bottom-bar, /* if wrapped with a page with a bottom-bar */
  7029. html[onsflag-iphonex-portrait] .tabbar__content:not(.tabbar--top__content) .bottom-bar { /* if wrapped with a bottom tabbar */
  7030. /* Restore original styles */
  7031. bottom: 0;
  7032. box-sizing: border-box;
  7033. padding-bottom: 0;
  7034. }
  7035. /* Outermost page__content without toolbars or bottom-bars */
  7036. html[onsflag-iphonex-portrait] .page__content {
  7037. top: 0;
  7038. padding-top: 44px;
  7039. bottom: 0;
  7040. padding-bottom: 34px;
  7041. }
  7042. /* Non-outermost */
  7043. html[onsflag-iphonex-portrait] .dialog .page__content, /* if wrapped with dialogs */
  7044. html[onsflag-iphonex-portrait] .toolbar:not(.toolbar--cover-content)+.page__background+.page__content .page__content, /* if wrapped with a page with a toolbar */
  7045. html[onsflag-iphonex-portrait] .tabbar--top__content .page__content, /* if wrapped with a top tabbar */
  7046. html[onsflag-iphonex-portrait] .toolbar:not(.toolbar--cover-content)+.page__background+.page__content { /* if the page has a toolbar */
  7047. /* Restore original styles */
  7048. top: 0;
  7049. padding-top: 0;
  7050. }
  7051. html[onsflag-iphonex-portrait] .dialog .page__content, /* if wrapped with dialogs */
  7052. html[onsflag-iphonex-portrait] .page-with-bottom-toolbar > .page__content .page__content, /* if wrapped with a page with a bottom-bar */
  7053. html[onsflag-iphonex-portrait] .tabbar__content:not(.tabbar--top__content) .page__content, /* if wrapped with a bottom tabbar */
  7054. html[onsflag-iphonex-portrait] .page-with-bottom-toolbar > .page__content { /* if the page has a bottom-bar */
  7055. /* Restore original styles */
  7056. bottom: 0;
  7057. padding-bottom: 0;
  7058. }
  7059. /* Outermost page__content with a toolbar */
  7060. html[onsflag-iphonex-portrait] .toolbar:not(.toolbar--cover-content)+.page__background,
  7061. html[onsflag-iphonex-portrait] .toolbar:not(.toolbar--cover-content)+.page__background+.page__content {
  7062. top: 88px;
  7063. padding-top: 0;
  7064. }
  7065. /* Non-outermost */
  7066. html[onsflag-iphonex-portrait] .dialog .toolbar:not(.toolbar--cover-content)+.page__background,
  7067. html[onsflag-iphonex-portrait] .dialog .toolbar:not(.toolbar--cover-content)+.page__background+.page__content, /* if wrapped with dialogs */
  7068. html[onsflag-iphonex-portrait] .toolbar:not(.toolbar--cover-content)+.page__background+.page__content .toolbar:not(.toolbar--cover-content)+.page__background,
  7069. html[onsflag-iphonex-portrait] .toolbar:not(.toolbar--cover-content)+.page__background+.page__content .toolbar:not(.toolbar--cover-content)+.page__background+.page__content, /* if wrapped with a page with a toolbar */
  7070. html[onsflag-iphonex-portrait] .tabbar--top__content .toolbar:not(.toolbar--cover-content)+.page__background,
  7071. html[onsflag-iphonex-portrait] .tabbar--top__content .toolbar:not(.toolbar--cover-content)+.page__background+.page__content { /* if wrapped with a top tabbar */
  7072. /* Restore original styles */
  7073. top: 44px;
  7074. padding-top: 0;
  7075. }
  7076. /* Outermost page__content with a bottom-bar */
  7077. html[onsflag-iphonex-portrait] .page-with-bottom-toolbar > .page__content {
  7078. bottom: 78px;
  7079. padding-bottom: 0;
  7080. }
  7081. /* Non-outermost */
  7082. html[onsflag-iphonex-portrait] .dialog .page-with-bottom-toolbar > .page__content, /* if wrapped with dialogs */
  7083. html[onsflag-iphonex-portrait] .page-with-bottom-toolbar > .page__content .page-with-bottom-toolbar > .page__content, /* if wrapped with a page with a bottom-bar */
  7084. html[onsflag-iphonex-portrait] .tabbar__content:not(.tabbar--top__content) .page-with-bottom-toolbar > .page__content { /* if wrapped with a bottom tabbar */
  7085. /* Restore original styles */
  7086. bottom: 44px;
  7087. padding-bottom: 0;
  7088. }
  7089. /* Outermost page__content with a transparent cover-content toolbar and its direct descendant page_content */
  7090. html[onsflag-iphonex-portrait] .toolbar.toolbar--transparent.toolbar--cover-content+.page__background+.page__content,
  7091. html[onsflag-iphonex-portrait] .toolbar.toolbar--transparent.toolbar--cover-content+.page__background+.page__content .page_content {
  7092. top: 0;
  7093. padding-top: 88px;
  7094. }
  7095. /* Non-outermost */
  7096. html[onsflag-iphonex-portrait] .dialog .toolbar.toolbar--transparent.toolbar--cover-content+.page__background+.page__content, /* if wrapped with dialogs */
  7097. html[onsflag-iphonex-portrait] .dialog .toolbar.toolbar--transparent.toolbar--cover-content+.page__background+.page__content .page_content,
  7098. html[onsflag-iphonex-portrait] .toolbar:not(.toolbar--cover-content)+.page__background+.page__content .toolbar.toolbar--transparent.toolbar--cover-content+.page__background+.page__content, /* if wrapped with a page with a toolbar */
  7099. html[onsflag-iphonex-portrait] .toolbar:not(.toolbar--cover-content)+.page__background+.page__content .toolbar.toolbar--transparent.toolbar--cover-content+.page__background+.page__content .page__content,
  7100. html[onsflag-iphonex-portrait] .tabbar--top__content .toolbar.toolbar--transparent.toolbar--cover-content+.page__background+.page__content,
  7101. html[onsflag-iphonex-portrait] .tabbar--top__content .toolbar.toolbar--transparent.toolbar--cover-content+.page__background+.page__content .page_content { /* if wrapped with a top tabbar */
  7102. /* Restore original styles */
  7103. top: 0;
  7104. padding-top: 44px;
  7105. }
  7106. /* Outermost top tabbar */
  7107. html[onsflag-iphonex-portrait] .tabbar--top {
  7108. padding-top: 44px;
  7109. }
  7110. /* Non-outermost */
  7111. html[onsflag-iphonex-portrait] .dialog .tabbar--top, /* if wrapped with dialogs */
  7112. html[onsflag-iphonex-portrait] .toolbar:not(.toolbar--cover-content)+.page__background+.page__content .tabbar--top, /* if wrapped with a page with a toolbar */
  7113. html[onsflag-iphonex-portrait] .tabbar--top__content .tabbar--top { /* if wrapped with a top tabbar */
  7114. /* Restore original styles */
  7115. padding-top: 0;
  7116. }
  7117. /* Outermost tabbar--top__content */
  7118. html[onsflag-iphonex-portrait] .tabbar--top__content {
  7119. top: 93px;
  7120. }
  7121. /* Non-outermost */
  7122. html[onsflag-iphonex-portrait] .dialog .tabbar--top__content, /* if wrapped with dialogs */
  7123. html[onsflag-iphonex-portrait] .toolbar:not(.toolbar--cover-content)+.page__background+.page__content .tabbar--top__content, /* if wrapped with a page with a toolbar */
  7124. html[onsflag-iphonex-portrait] .tabbar--top__content .tabbar--top__content { /* if wrapped with a top tabbar */
  7125. /* Restore original styles */
  7126. top: 49px;
  7127. }
  7128. /* Outermost bottom tabbar */
  7129. html[onsflag-iphonex-portrait] .tabbar:not(.tabbar--top):not(.tabbar--top) {
  7130. padding-bottom: 34px;
  7131. }
  7132. /* Non-outermost */
  7133. html[onsflag-iphonex-portrait] .dialog .tabbar:not(.tabbar--top):not(.tabbar--top), /* if wrapped with dialogs */
  7134. html[onsflag-iphonex-portrait] .page-with-bottom-toolbar > .page__content .tabbar:not(.tabbar--top), /* if wrapped with a page with a bottom-bar */
  7135. html[onsflag-iphonex-portrait] .tabbar__content:not(.tabbar--top__content) .tabbar:not(.tabbar--top) { /* if wrapped with a bottom tabbar */
  7136. /* Restore original styles */
  7137. padding-bottom: 0;
  7138. }
  7139. /* Outermost.tabbar__content:not(.tabbar--top__content) */
  7140. html[onsflag-iphonex-portrait] .tabbar__content:not(.tabbar--top__content) {
  7141. bottom: 83px;
  7142. }
  7143. /* Non-outermost */
  7144. html[onsflag-iphonex-portrait] .dialog .tabbar__content:not(.tabbar--top__content), /* if wrapped with dialogs */
  7145. html[onsflag-iphonex-portrait] .page-with-bottom-toolbar > .page__content .tabbar__content:not(.tabbar--top__content), /* if wrapped with a page with a bottom-bar */
  7146. html[onsflag-iphonex-portrait] .tabbar__content:not(.tabbar--top__content) .tabbar__content:not(.tabbar--top__content) { /* if wrapped with a bottom tabbar */
  7147. /* Restore original styles */
  7148. bottom: 49px;
  7149. }
  7150. }
  7151. @media (orientation: landscape) {
  7152. /* Outermost bottom-bar */
  7153. html[onsflag-iphonex-landscape] .bottom-bar {
  7154. bottom: 0;
  7155. box-sizing: content-box;
  7156. padding-bottom: 21px;
  7157. }
  7158. /* Non-outermost */
  7159. html[onsflag-iphonex-landscape] .dialog .bottom-bar, /* if wrapped with dialogs */
  7160. html[onsflag-iphonex-landscape] .page-with-bottom-toolbar > .page__content .bottom-bar, /* if wrapped with a page with a bottom-bar */
  7161. html[onsflag-iphonex-landscape] .tabbar__content:not(.tabbar--top__content) .bottom-bar { /* if wrapped with a bottom tabbar */
  7162. /* Restore original styles */
  7163. bottom: 0;
  7164. box-sizing: border-box;
  7165. padding-bottom: 0;
  7166. }
  7167. /* Outermost page__content without bottom-bars */
  7168. html[onsflag-iphonex-landscape] .page__content {
  7169. bottom: 0;
  7170. padding-bottom: 21px;
  7171. }
  7172. /* Non-outermost */
  7173. html[onsflag-iphonex-landscape] .dialog .page__content, /* if wrapped with dialogs */
  7174. html[onsflag-iphonex-landscape] .page-with-bottom-toolbar > .page__content .page__content, /* if wrapped with a page with a bottom-bar */
  7175. html[onsflag-iphonex-landscape] .tabbar__content:not(.tabbar--top__content) .page__content, /* if wrapped with a bottom tabbar */
  7176. html[onsflag-iphonex-landscape] .page-with-bottom-toolbar > .page__content { /* if the page has a bottom-bar */
  7177. /* Restore original styles */
  7178. bottom: 0;
  7179. padding-bottom: 0;
  7180. }
  7181. /* Outermost page__content with a bottom-bar */
  7182. html[onsflag-iphonex-landscape] .page-with-bottom-toolbar > .page__content {
  7183. bottom: 65px;
  7184. padding-bottom: 0;
  7185. }
  7186. /* Non-outermost */
  7187. html[onsflag-iphonex-landscape] .dialog .page-with-bottom-toolbar > .page__content, /* if wrapped with dialogs */
  7188. html[onsflag-iphonex-landscape] .page-with-bottom-toolbar > .page__content .page-with-bottom-toolbar > .page__content, /* if wrapped with a page with a bottom-bar */
  7189. html[onsflag-iphonex-landscape] .tabbar__content:not(.tabbar--top__content) .page-with-bottom-toolbar > .page__content { /* if wrapped with a bottom tabbar */
  7190. /* Restore original styles */
  7191. bottom: 44px;
  7192. padding-bottom: 0;
  7193. }
  7194. /* Outermost bottom tabbar */
  7195. html[onsflag-iphonex-landscape] .tabbar:not(.tabbar--top) {
  7196. padding-bottom: 21px;
  7197. }
  7198. /* Non-outermost */
  7199. html[onsflag-iphonex-landscape] .dialog .tabbar:not(.tabbar--top), /* if wrapped with dialogs */
  7200. html[onsflag-iphonex-landscape] .page-with-bottom-toolbar > .page__content .tabbar:not(.tabbar--top), /* if wrapped with a page with a bottom-bar */
  7201. html[onsflag-iphonex-landscape] .tabbar__content:not(.tabbar--top__content) .tabbar:not(.tabbar--top) { /* if wrapped with a bottom tabbar */
  7202. /* Restore original styles */
  7203. padding-bottom: 0;
  7204. }
  7205. /* Outermost.tabbar__content:not(.tabbar--top__content) */
  7206. html[onsflag-iphonex-landscape] .tabbar__content:not(.tabbar--top__content) {
  7207. bottom: 70px;
  7208. }
  7209. /* Non-outermost */
  7210. html[onsflag-iphonex-landscape] .dialog .tabbar__content:not(.tabbar--top__content), /* if wrapped with dialogs */
  7211. html[onsflag-iphonex-landscape] .page-with-bottom-toolbar > .page__content .tabbar__content:not(.tabbar--top__content), /* if wrapped with a page with a bottom-bar */
  7212. html[onsflag-iphonex-landscape] .tabbar__content:not(.tabbar--top__content) .tabbar__content:not(.tabbar--top__content) { /* if wrapped with a bottom tabbar */
  7213. /* Restore original styles */
  7214. bottom: 49px;
  7215. }
  7216. }
  7217. /* Lists in .page__content */
  7218. @media (orientation: landscape) {
  7219. /* Only patching lists just under .page__content */
  7220. html[onsflag-iphonex-landscape] .page__content > .list:not(.list--inset) {
  7221. margin-left: -44px;
  7222. margin-right: -44px;
  7223. }
  7224. /* For left safe area */
  7225. html[onsflag-iphonex-landscape] .page__content > .list:not(.list--inset) > .list-header {
  7226. padding-left: 59px;
  7227. }
  7228. html[onsflag-iphonex-landscape] .page__content > .list:not(.list--inset) > .list-item {
  7229. /* margin-left is not suitable for iPhone X patch. Using padding-left here. */
  7230. padding-left: 58px;
  7231. }
  7232. /* For right safe area */
  7233. html[onsflag-iphonex-landscape] .page__content > .list:not(.list--inset) > .list-item--chevron:before {
  7234. right: 60px;
  7235. }
  7236. html[onsflag-iphonex-landscape] .page__content > .list:not(.list--inset) > .list-item > .list-item__center:last-child {
  7237. padding-right: 50px;
  7238. }
  7239. html[onsflag-iphonex-landscape] .page__content > .list:not(.list--inset) > .list-item > .list-item__right {
  7240. padding-right: 56px;
  7241. }
  7242. html[onsflag-iphonex-landscape] .page__content > .list:not(.list--inset) > .list-item > .list-item--chevron__right {
  7243. padding-right: 74px;
  7244. }
  7245. }
  7246. /* Lists in .page__content in dialogs and modals */
  7247. @media (orientation: landscape) {
  7248. /* Only patching lists just under .page__content */
  7249. html[onsflag-iphonex-landscape] .dialog .page__content > .list:not(.list--inset) {
  7250. margin-left: 0;
  7251. margin-right: 0;
  7252. }
  7253. /* For left safe area */
  7254. html[onsflag-iphonex-landscape] .dialog .page__content > .list:not(.list--inset) > .list-header {
  7255. padding-left: 15px;
  7256. }
  7257. html[onsflag-iphonex-landscape] .dialog .page__content > .list:not(.list--inset) > .list-item {
  7258. padding-left: 14px;
  7259. }
  7260. /* For right safe area */
  7261. html[onsflag-iphonex-landscape] .dialog .page__content > .list:not(.list--inset) > .list-item--chevron:before {
  7262. right: 16px;
  7263. }
  7264. html[onsflag-iphonex-landscape] .dialog .page__content > .list:not(.list--inset) > .list-item > .list-item__center:last-child {
  7265. padding-right: 6px;
  7266. }
  7267. html[onsflag-iphonex-landscape] .dialog .page__content > .list:not(.list--inset) > .list-item > .list-item__right {
  7268. padding-right: 12px;
  7269. }
  7270. html[onsflag-iphonex-landscape] .dialog .page__content > .list:not(.list--inset) > .list-item > .list-item--chevron__right {
  7271. padding-right: 30px;
  7272. }
  7273. }
  7274. /* non BEM */