zammad.scss 156 KB

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