zammad.scss 143 KB

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