ionic.material.css 71 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460146114621463146414651466146714681469147014711472147314741475147614771478147914801481148214831484148514861487148814891490149114921493149414951496149714981499150015011502150315041505150615071508150915101511151215131514151515161517151815191520152115221523152415251526152715281529153015311532153315341535153615371538153915401541154215431544154515461547154815491550155115521553155415551556155715581559156015611562156315641565156615671568156915701571157215731574157515761577157815791580158115821583158415851586158715881589159015911592159315941595159615971598159916001601160216031604160516061607160816091610161116121613161416151616161716181619162016211622162316241625162616271628162916301631163216331634163516361637163816391640164116421643164416451646164716481649165016511652165316541655165616571658165916601661166216631664166516661667166816691670167116721673167416751676167716781679168016811682168316841685168616871688168916901691169216931694169516961697169816991700170117021703170417051706170717081709171017111712171317141715171617171718171917201721172217231724172517261727172817291730173117321733173417351736173717381739174017411742174317441745174617471748174917501751175217531754175517561757175817591760176117621763176417651766176717681769177017711772177317741775177617771778177917801781178217831784178517861787178817891790179117921793179417951796179717981799180018011802180318041805180618071808180918101811181218131814181518161817181818191820182118221823182418251826182718281829183018311832183318341835183618371838183918401841184218431844184518461847184818491850185118521853185418551856185718581859186018611862186318641865186618671868186918701871187218731874187518761877187818791880188118821883188418851886188718881889189018911892189318941895189618971898189919001901190219031904190519061907190819091910191119121913191419151916191719181919192019211922192319241925192619271928192919301931193219331934193519361937193819391940194119421943194419451946194719481949195019511952195319541955195619571958195919601961196219631964196519661967196819691970197119721973197419751976197719781979198019811982198319841985198619871988198919901991199219931994199519961997199819992000200120022003200420052006200720082009201020112012201320142015201620172018201920202021202220232024202520262027202820292030203120322033203420352036203720382039204020412042204320442045204620472048204920502051205220532054205520562057205820592060206120622063206420652066206720682069207020712072207320742075207620772078207920802081208220832084208520862087208820892090209120922093209420952096209720982099210021012102210321042105210621072108210921102111211221132114211521162117211821192120212121222123212421252126212721282129213021312132213321342135213621372138213921402141214221432144214521462147214821492150215121522153215421552156215721582159216021612162216321642165216621672168216921702171217221732174217521762177217821792180218121822183218421852186218721882189219021912192219321942195219621972198219922002201220222032204220522062207220822092210221122122213221422152216221722182219222022212222222322242225222622272228222922302231223222332234223522362237223822392240224122422243224422452246224722482249225022512252225322542255225622572258225922602261226222632264226522662267226822692270227122722273227422752276227722782279228022812282228322842285228622872288228922902291229222932294229522962297229822992300230123022303230423052306230723082309231023112312231323142315231623172318231923202321232223232324232523262327232823292330233123322333233423352336233723382339234023412342234323442345234623472348234923502351235223532354235523562357235823592360236123622363236423652366236723682369237023712372237323742375237623772378237923802381238223832384238523862387238823892390239123922393239423952396239723982399240024012402240324042405240624072408240924102411241224132414241524162417241824192420242124222423242424252426242724282429243024312432243324342435243624372438243924402441244224432444244524462447244824492450245124522453245424552456245724582459246024612462246324642465246624672468246924702471247224732474247524762477247824792480248124822483248424852486248724882489249024912492249324942495249624972498249925002501250225032504250525062507250825092510251125122513251425152516251725182519252025212522252325242525252625272528252925302531253225332534253525362537253825392540254125422543254425452546254725482549255025512552255325542555255625572558255925602561256225632564256525662567256825692570257125722573257425752576257725782579258025812582258325842585258625872588258925902591259225932594259525962597259825992600260126022603260426052606260726082609261026112612261326142615261626172618261926202621262226232624262526262627262826292630263126322633263426352636263726382639264026412642264326442645264626472648264926502651265226532654265526562657265826592660266126622663266426652666266726682669267026712672267326742675267626772678267926802681268226832684268526862687268826892690269126922693269426952696269726982699270027012702270327042705270627072708270927102711271227132714271527162717271827192720272127222723272427252726272727282729273027312732273327342735273627372738273927402741274227432744274527462747274827492750275127522753275427552756275727582759276027612762276327642765276627672768276927702771277227732774277527762777277827792780278127822783278427852786278727882789279027912792279327942795279627972798279928002801280228032804280528062807280828092810281128122813281428152816281728182819282028212822282328242825282628272828282928302831283228332834283528362837283828392840284128422843284428452846284728482849285028512852285328542855285628572858285928602861286228632864286528662867286828692870287128722873287428752876287728782879288028812882288328842885288628872888288928902891289228932894289528962897289828992900290129022903290429052906290729082909291029112912291329142915291629172918291929202921292229232924292529262927292829292930293129322933
  1. /* Directives : MD Label
  2. ==================================*/
  3. .item-md-label {
  4. display: block;
  5. background: transparent;
  6. box-shadow: none;
  7. margin-left: 12px;
  8. margin-right: 12px;
  9. padding: 30px 0 0; }
  10. .item-md-label .input-label {
  11. position: absolute;
  12. padding: 5px 0 0;
  13. z-index: 2;
  14. -webkit-transform: translate3d(0, -30px, 0) scale(1);
  15. transform: translate3d(0, -30px, 0) scale(1);
  16. -webkit-transition: all 0.2s ease;
  17. transition: all 0.2s ease;
  18. color: #fff;
  19. opacity: 0.5;
  20. filter: alpha(opacity=50);
  21. -webkit-transform-origin: 0;
  22. -ms-transform-origin: 0;
  23. transform-origin: 0; }
  24. .item-md-label input {
  25. background-color: rgba(0, 0, 0, 0.6);
  26. bottom: 0;
  27. color: #fff;
  28. letter-spacing: 0.25rem;
  29. padding: 20px 10px;
  30. position: relative;
  31. z-index: 1; }
  32. .item-md-label .highlight {
  33. position: absolute;
  34. bottom: 0;
  35. height: 2px;
  36. left: 0;
  37. width: 100%;
  38. -webkit-transform: translate3d(-100%, 0, 0);
  39. transform: translate3d(-100%, 0, 0);
  40. -webkit-transition: all 0.15s ease;
  41. transition: all 0.15s ease;
  42. z-index: 1; }
  43. .item-md-label .highlight-light {
  44. background: #fff; }
  45. .item-md-label .highlight-stable {
  46. background: #f8f8f8; }
  47. .item-md-label .highlight-positive {
  48. background: #387ef5; }
  49. .item-md-label .highlight-calm {
  50. background: #11c1f3; }
  51. .item-md-label .highlight-balanced {
  52. background: #33cd5f; }
  53. .item-md-label .highlight-energized {
  54. background: #ffc900; }
  55. .item-md-label .highlight-assertive {
  56. background: #ef473a; }
  57. .item-md-label .highlight-royal {
  58. background: #886aea; }
  59. .item-md-label .highlight-dark {
  60. background: #444; }
  61. .item-md-label .input-label {
  62. letter-spacing: 0.25rem;
  63. padding: 0 10px; }
  64. .item-md-label input:focus ~ .input-label, .item-md-label input.used ~ .input-label {
  65. font-weight: bold;
  66. opacity: 0.7;
  67. filter: alpha(opacity=70);
  68. padding: 0;
  69. text-transform: uppercase;
  70. -webkit-transform: translate3d(0, -60px, 0) scale(0.9);
  71. transform: translate3d(0, -60px, 0) scale(0.9); }
  72. .item-md-label input:focus ~ .highlight {
  73. -webkit-transform: translate3d(0, 0, 0);
  74. transform: translate3d(0, 0, 0); }
  75. /* Bar - Header - Expanded
  76. ==================================*/
  77. .expanded .bar.bar-header,
  78. .bar.bar-header.expanded {
  79. height: 75px; }
  80. .expanded.bar.bar-header .title,
  81. .bar.bar-header.expanded .title {
  82. bottom: 0;
  83. top: initial;
  84. padding-left: 16px; }
  85. .expanded .bar.bar-header .title.fab-left,
  86. .bar.bar-header.expanded .title.fab-left {
  87. bottom: 0;
  88. left: 90px;
  89. position: absolute;
  90. right: initial;
  91. top: initial; }
  92. .expanded .bar.bar-header .title.fab-right,
  93. .bar.bar-header.expanded .title.fab-right {
  94. bottom: 0;
  95. left: 4px;
  96. position: absolute;
  97. top: initial;
  98. right: initial; }
  99. .expanded .bar.bar-header + .button-fab,
  100. .bar.bar-header.expanded + .button-fab {
  101. top: 50px; }
  102. .expanded .bar.bar-header.push-down,
  103. .bar.bar-header.expanded.push-down {
  104. height: 44px;
  105. overflow: hidden; }
  106. .expanded .bar.bar-header,
  107. .bar.bar-header.expanded {
  108. -webkit-transition: height 1s cubic-bezier(0.55, 0, 0.1, 1);
  109. transition: height 1s cubic-bezier(0.55, 0, 0.1, 1);
  110. -webkit-transform: translate3d(0, 0, 0);
  111. transform: translate3d(0, 0, 0); }
  112. .expanded .bar.bar-header + .button-fab,
  113. .bar.bar-header.expanded + .button-fab {
  114. -webkit-transition: all 1.1s cubic-bezier(0.55, 0, 0.1, 1);
  115. transition: all 1.1s cubic-bezier(0.55, 0, 0.1, 1);
  116. -webkit-transform: translate3d(0, 0, 0) scale(1);
  117. transform: translate3d(0, 0, 0) scale(1); }
  118. .expanded .bar.bar-header.push-down + .button-fab,
  119. .bar.bar-header.expanded.push-down + .button-fab {
  120. top: 0;
  121. -webkit-transform: translate3d(-100px, -100px, 0) scale(2.5);
  122. transform: translate3d(-100px, -100px, 0) scale(2.5); }
  123. .expanded .bar.bar-header.push-down .title,
  124. .bar.bar-header.expanded.push-down .title {
  125. opacity: 0;
  126. filter: alpha(opacity=0);
  127. left: initial;
  128. right: initial; }
  129. .expanded .bar.bar-header .title,
  130. .bar.bar-header.expanded .title {
  131. opacity: 1;
  132. filter: alpha(opacity=100);
  133. -webkit-transition: all 2s cubic-bezier(0.55, 0, 0.1, 1);
  134. transition: all 2s cubic-bezier(0.55, 0, 0.1, 1); }
  135. .expanded .bar.bar-header .title, .bar.bar-header.expanded .title {
  136. bottom: 0;
  137. left: 42px !important;
  138. top: initial; }
  139. .expanded.has-header-fab-left .bar.bar-header .title, .bar.bar-header.expanded.has-header-fab-left .title {
  140. left: 76px !important; }
  141. /* Bar
  142. ==================================*/
  143. .bar {
  144. z-index: 2;
  145. font-size: 1.3em;
  146. width: 100%;
  147. box-shadow: 0px 2px 5px 0 rgba(0, 0, 0, 0.26); }
  148. .bar .button {
  149. min-width: 38px;
  150. z-index: 3; }
  151. .bar .no-text span.back-text {
  152. display: none; }
  153. .bar .title sup {
  154. opacity: 0.7; }
  155. .bar.bar-header .button + .title {
  156. text-align: left;
  157. left: 35px;
  158. line-height: 46px; }
  159. /* Button Bar
  160. ==================================*/
  161. .button-bar {
  162. box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.15); }
  163. .button-bar > .button {
  164. box-shadow: none;
  165. /* line-height: initial; */ }
  166. .button-bar > .button .icon:before,
  167. .button-bar > .button:before {
  168. line-height: initial; }
  169. .bar-footer .button-fab {
  170. position: absolute;
  171. top: -26px;
  172. bottom: initial; }
  173. .bar-footer .buttons-left .button-fab {
  174. left: 8px; }
  175. .bar-footer .buttons-right .button-fab {
  176. right: 8px; }
  177. .bar .button.button-clear {
  178. box-shadow: none; }
  179. .left-buttons .button-fab {
  180. left: 8px;
  181. top: 16px; }
  182. .right-buttons .button-fab {
  183. right: 8px;
  184. top: 16px; }
  185. .fab-left.title-left,
  186. .fab-left.title.title-left {
  187. left: 68px; }
  188. /* Button : FAB
  189. ==================================*/
  190. .button.button-fab,
  191. .bar .button.button-fab {
  192. box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  193. z-index: 9999;
  194. width: 56px;
  195. height: 56px;
  196. max-height: initial;
  197. max-width: initial;
  198. border-radius: 50%;
  199. border-radius: 50%;
  200. overflow: hidden;
  201. padding: 0;
  202. -webkit-transform: translate3d(0, 0, 0);
  203. transform: translate3d(0, 0, 0);
  204. -webkit-transition: 0.3s fade-in-out;
  205. transition: 0.3s fade-in-out;
  206. -webkit-transition-property: -webkit-transform, box-shadow;
  207. transition-property: transform, box-shadow; }
  208. .button.button-fab.button-fab-bottom-right,
  209. .bar .button.button-fab.button-fab-bottom-right {
  210. top: auto;
  211. right: 16px;
  212. bottom: 16px;
  213. left: auto;
  214. position: absolute; }
  215. .button.button-fab.button-fab-bottom-left,
  216. .bar .button.button-fab.button-fab-bottom-left {
  217. top: auto;
  218. right: auto;
  219. bottom: 16px;
  220. left: 16px;
  221. position: absolute; }
  222. .button.button-fab.button-fab-top-right,
  223. .bar .button.button-fab.button-fab-top-right {
  224. top: 32px;
  225. right: 16px;
  226. bottom: auto;
  227. left: auto;
  228. position: absolute; }
  229. .button.button-fab.button-fab-top-left,
  230. .bar .button.button-fab.button-fab-top-left {
  231. top: 32px;
  232. right: auto;
  233. bottom: auto;
  234. left: 16px;
  235. position: absolute; }
  236. .button.button-fab.button-fab-top-left.expanded,
  237. .button.button-fab.button-fab-top-right.expanded,
  238. .bar .button.button-fab.button-fab-top-left.expanded,
  239. .bar .button.button-fab.button-fab-top-right.expanded {
  240. top: 48px; }
  241. .button.button-fab i,
  242. .bar .button.button-fab i {
  243. font-size: 2.5rem;
  244. margin-top: 0; }
  245. .button.button-fab.mini,
  246. .bar .button.button-fab.mini {
  247. width: 40px;
  248. height: 40px; }
  249. .button.button-fab.mini i,
  250. .bar .button.button-fab.mini i {
  251. font-size: 2rem; }
  252. /* Motion */
  253. .motion {
  254. -webkit-transition: all 0.5s ease-out;
  255. transition: all 0.5s ease-out; }
  256. .fade {
  257. opacity: 0;
  258. filter: alpha(opacity=0);
  259. -webkit-backface-visibility: hidden !important;
  260. backface-visibility: hidden !important;
  261. -webkit-transition: all 0.1s ease-out !important;
  262. transition: all 0.1s ease-out !important; }
  263. .spin-back {
  264. -webkit-backface-visibility: hidden !important;
  265. backface-visibility: hidden !important;
  266. -webkit-transform: translateZ(0) rotate(360deg) scale(0) !important;
  267. transform: translateZ(0) rotate(360deg) scale(0) !important;
  268. -webkit-transition: all 0.1s ease-out !important;
  269. transition: all 0.1s ease-out !important; }
  270. .spiral {
  271. -webkit-backface-visibility: hidden !important;
  272. backface-visibility: hidden !important;
  273. -webkit-transform: translateZ(0) rotate(-360deg) scale(0) translate(-120px) !important;
  274. transform: translateZ(0) rotate(-360deg) scale(0) translate(-120px) !important;
  275. -webkit-transition: all 0.1s ease-out !important;
  276. transition: all 0.1s ease-out !important; }
  277. .spiral-back {
  278. -webkit-backface-visibility: hidden !important;
  279. backface-visibility: hidden !important;
  280. -webkit-transform: translateZ(0) rotate(360deg) scale(0) translate(120px) !important;
  281. transform: translateZ(0) rotate(360deg) scale(0) translate(120px) !important;
  282. -webkit-transition: all 0.1s ease-out !important;
  283. transition: all 0.1s ease-out !important; }
  284. .menu-open .avatar {
  285. opacity: 1;
  286. filter: alpha(opacity=100);
  287. -webkit-transform: translateZ(0) rotate(0) scale(1) !important;
  288. transform: translateZ(0) rotate(0) scale(1) !important;
  289. -webkit-transition: all 0.3s ease-out !important;
  290. transition: all 0.3s ease-out !important; }
  291. .button.button-fab.button-fab-top-left.motion {
  292. -webkit-backface-visibility: hidden;
  293. backface-visibility: hidden;
  294. -webkit-transform: translate3d(-120px, 60px, 0);
  295. transform: translate3d(-120px, 60px, 0);
  296. -webkit-transition: all 0.1s ease-out;
  297. transition: all 0.1s ease-out; }
  298. .button.button-fab.button-fab-top-right.motion {
  299. -webkit-backface-visibility: hidden;
  300. backface-visibility: hidden;
  301. -webkit-transform: translate3d(120px, 60px, 0);
  302. transform: translate3d(120px, 60px, 0);
  303. -webkit-transition: all 0.1s ease-out;
  304. transition: all 0.1s ease-out; }
  305. .button.button-fab.button-fab-bottom-left.motion {
  306. -webkit-backface-visibility: hidden;
  307. backface-visibility: hidden;
  308. -webkit-transform: translate3d(-120px, 60px, 0);
  309. transform: translate3d(-120px, 60px, 0);
  310. -webkit-transition: all 0.1s ease-out;
  311. transition: all 0.1s ease-out; }
  312. .button.button-fab.button-fab-bottom-right.motion {
  313. -webkit-backface-visibility: hidden;
  314. backface-visibility: hidden;
  315. -webkit-transform: translate3d(120px, 60px, 0);
  316. transform: translate3d(120px, 60px, 0);
  317. -webkit-transition: all 0.1s ease-out;
  318. transition: all 0.1s ease-out; }
  319. .spin {
  320. -webkit-backface-visibility: hidden !important;
  321. backface-visibility: hidden !important;
  322. -webkit-transform: translateZ(0) rotate(0) scale(0) !important;
  323. transform: translateZ(0) rotate(0) scale(0) !important;
  324. -webkit-transition: all 0.3s ease-out !important;
  325. transition: all 0.3s ease-out !important; }
  326. .spin.on {
  327. -webkit-transform: translateZ(0) rotate(-360deg) scale(1) !important;
  328. transform: translateZ(0) rotate(-360deg) scale(1) !important; }
  329. .flap {
  330. -webkit-backface-visibility: hidden !important;
  331. backface-visibility: hidden !important;
  332. -webkit-transform: translateZ(0) rotateX(0) scale(0) translate(-120px) !important;
  333. transform: translateZ(0) rotateX(0) scale(0) translate(-120px) !important;
  334. -webkit-transition: all 0.5s ease-out !important;
  335. transition: all 0.5s ease-out !important; }
  336. .flap.on {
  337. -webkit-transform: translateZ(0) rotateX(-720deg) scale(1) translate(0) !important;
  338. transform: translateZ(0) rotateX(-720deg) scale(1) translate(0) !important;
  339. -webkit-transition: all 0.5s ease-out !important;
  340. transition: all 0.5s ease-out !important; }
  341. .drop {
  342. -webkit-backface-visibility: hidden !important;
  343. backface-visibility: hidden !important;
  344. -webkit-transform: translateZ(0) scale(3) !important;
  345. transform: translateZ(0) scale(3) !important;
  346. -webkit-transition: all 0.5s ease-out !important;
  347. transition: all 0.5s ease-out !important; }
  348. .drop.on {
  349. -webkit-transform: translateZ(0) scale(1) !important;
  350. transform: translateZ(0) scale(1) !important;
  351. -webkit-transition: all 0.5s ease-out !important;
  352. transition: all 0.5s ease-out !important; }
  353. .flip {
  354. -webkit-backface-visibility: hidden !important;
  355. backface-visibility: hidden !important;
  356. -webkit-transform: translateZ(0) rotateY(0) scale(0) !important;
  357. transform: translateZ(0) rotateY(0) scale(0) !important;
  358. -webkit-transition: all 0.5s ease-out !important;
  359. transition: all 0.5s ease-out !important; }
  360. .flip.on {
  361. -webkit-transform: translateZ(0) rotateY(-720deg) scale(1) !important;
  362. transform: translateZ(0) rotateY(-720deg) scale(1) !important;
  363. -webkit-transition: all 0.5s ease-out !important;
  364. transition: all 0.5s ease-out !important; }
  365. /* Button : Floating
  366. ==================================*/
  367. .button.button-floating, .bar .button.button-floating {
  368. display: inline-block;
  369. color: #FFF;
  370. position: relative;
  371. z-index: 1;
  372. width: 37px;
  373. height: 37px;
  374. line-height: 37px;
  375. padding: 0;
  376. border-radius: 50%;
  377. background-clip: padding-box;
  378. -webkit-transition: 0.3s;
  379. transition: 0.3s;
  380. cursor: pointer; }
  381. .button.button-floating i, .bar .button.button-floating i {
  382. width: inherit;
  383. display: inline-block;
  384. text-align: center;
  385. color: #FFF;
  386. font-size: 1.6rem;
  387. line-height: 37px; }
  388. .button.button-floating.button-large, .bar .button.button-floating.button-large {
  389. width: 55.5px;
  390. height: 55.5px; }
  391. .button.button-floating.button-large i, .bar .button.button-floating.button-large i {
  392. line-height: 55.5px; }
  393. /* Button
  394. ==================================*/
  395. .button,
  396. .button.button-large,
  397. .button.button-flat,
  398. .bar .button,
  399. .bar .button.button-large,
  400. .bar .button.button-flat {
  401. box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  402. display: inline-block;
  403. height: 36px;
  404. padding: 0 2rem;
  405. border-radius: 2px;
  406. background-clip: padding-box;
  407. text-transform: uppercase;
  408. border: none;
  409. outline: 0;
  410. -webkit-tap-highlight-color: transparent; }
  411. .button.disabled,
  412. .button.disabled.button-large,
  413. .button.button-floating.disabled,
  414. .button.button-large.disabled,
  415. .button.button:disabled,
  416. .button.button-large:disabled,
  417. .button.button-large:disabled,
  418. .button.button-floating:disabled,
  419. .bar .button.disabled,
  420. .bar .button.disabled.button-large,
  421. .bar .button.button-floating.disabled,
  422. .bar .button.button-large.disabled,
  423. .bar .button.button:disabled,
  424. .bar .button.button-large:disabled,
  425. .bar .button.button-large:disabled,
  426. .bar .button.button-floating:disabled {
  427. background-color: #DFDFDF;
  428. box-shadow: none;
  429. color: #9F9F9F; }
  430. .button.disabled:hover,
  431. .button.disabled.button-large:hover,
  432. .button.button-floating.disabled:hover,
  433. .button.button-large.disabled:hover,
  434. .button.button:disabled:hover,
  435. .button.button-large:disabled:hover,
  436. .button.button-large:disabled:hover,
  437. .button.button-floating:disabled:hover,
  438. .bar .button.disabled:hover,
  439. .bar .button.disabled.button-large:hover,
  440. .bar .button.button-floating.disabled:hover,
  441. .bar .button.button-large.disabled:hover,
  442. .bar .button.button:disabled:hover,
  443. .bar .button.button-large:disabled:hover,
  444. .bar .button.button-large:disabled:hover,
  445. .bar .button.button-floating:disabled:hover {
  446. background-color: #DFDFDF;
  447. color: #9F9F9F; }
  448. .button i,
  449. .button.button-large i,
  450. .button.button-floating i,
  451. .button.button-large i,
  452. .button.button-flat i,
  453. .bar .button i,
  454. .bar .button.button-large i,
  455. .bar .button.button-floating i,
  456. .bar .button.button-large i,
  457. .bar .button.button-flat i {
  458. font-size: 1.3rem; }
  459. .button-bar .button {
  460. border-radius: 0; }
  461. .button,
  462. .button-large,
  463. .bar .button,
  464. .bar .button-large {
  465. text-decoration: none;
  466. text-align: center;
  467. letter-spacing: 0.5px;
  468. -webkit-transition: 0.2s ease-out;
  469. transition: 0.2s ease-out;
  470. cursor: pointer; }
  471. .button {
  472. -webkit-user-select: none;
  473. -moz-user-select: none;
  474. -ms-user-select: none;
  475. user-select: none;
  476. position: relative;
  477. outline: none;
  478. margin: 0;
  479. /* background: transparent; */
  480. white-space: nowrap;
  481. text-align: center;
  482. text-transform: uppercase;
  483. font-weight: 500;
  484. font-style: inherit;
  485. font-variant: inherit;
  486. font-size: inherit;
  487. text-decoration: none;
  488. cursor: pointer;
  489. overflow: hidden;
  490. -webkit-transition: box-shadow 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), background-color 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), -webkit-transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  491. transition: box-shadow 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), background-color 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); }
  492. .button:focus {
  493. outline: none; }
  494. .button.ng-hide {
  495. -webkit-transition: none;
  496. transition: none; }
  497. .button.cornered {
  498. border-radius: 0; }
  499. .button.raised {
  500. -webkit-transform: translate3d(0, 0, 0);
  501. transform: translate3d(0, 0, 0); }
  502. .button-outline,
  503. .button-outline:hover,
  504. .button-outline:active {
  505. border-style: solid;
  506. border-width: 1px; }
  507. .button.button-outline.button-assertive,
  508. .button.button-outline.button-balanced,
  509. .button.button-outline.button-calm,
  510. .button.button-outline.button-dark,
  511. .button.button-outline.button-energized,
  512. .button.button-outline.button-light,
  513. .button.button-outline.button-positive,
  514. .button.button-outline.button-royal,
  515. .button.button-outline.button-stable,
  516. .button.button-outline {
  517. border-color: rgba(0, 0, 0, 0.1); }
  518. .button-flat,
  519. .bar .button-flat {
  520. box-shadow: none;
  521. background-color: transparent;
  522. color: #343434;
  523. cursor: pointer; }
  524. .button.button-flat.disabled,
  525. .bar .button.button-flat.disabled {
  526. color: #b3b3b3; }
  527. .button.button-large i,
  528. .bar .button.button-large i {
  529. font-size: 1.6rem; }
  530. .button-pin-header.button-floating {
  531. position: absolute;
  532. z-index: 1000; }
  533. .button-pin-header.button-pin-left {
  534. left: 24px;
  535. top: -24px; }
  536. .button-pin-header.button-pin-right {
  537. right: 24px;
  538. top: -24px; }
  539. .button:not([disabled]).raised:focus,
  540. .button:not([disabled]).raised:hover,
  541. .button:not([disabled]).floating:focus,
  542. .button:not([disabled]).floating:hover {
  543. -webkit-transform: translate3d(0, -1px, 0);
  544. transform: translate3d(0, -1px, 0); }
  545. .button.button-flat {
  546. box-shadow: none;
  547. /* background: transparent; */
  548. color: inherit; }
  549. .button.button-flat:hover {
  550. color: inherit; }
  551. .button.button-flat,
  552. .button.button-flat:hover,
  553. .button.button-flat:active {
  554. color: #fff; }
  555. .button.button-clear,
  556. .button.button-clear:hover,
  557. .button.button-clear:active {
  558. background: transparent; }
  559. .button-full.ink,
  560. .button-block.ink {
  561. display: block; }
  562. /* Card
  563. ==================================*/
  564. .card-item.item {
  565. border: none;
  566. padding-bottom: 4px;
  567. padding-top: 4px; }
  568. .card-item.item:first-child {
  569. padding-top: 16px; }
  570. .card {
  571. box-shadow: 0px 2px 5px 0 rgba(0, 0, 0, 0.26);
  572. display: block;
  573. margin: 8px;
  574. padding: 0;
  575. position: relative; }
  576. .card .image {
  577. display: block;
  578. margin-top: 10px;
  579. margin-bottom: 5px; }
  580. .card img {
  581. box-shadow: 0px 2px 5px 0 rgba(0, 0, 0, 0.26);
  582. display: block;
  583. max-width: 100%;
  584. max-height: initial;
  585. position: static; }
  586. .card.card-gallery img {
  587. border: none;
  588. box-shadow: none;
  589. display: block; }
  590. .card .card-footer {
  591. font-size: 90%;
  592. opacity: 0.8;
  593. filter: alpha(opacity=80);
  594. padding-top: 10px; }
  595. .card > .item {
  596. border: none; }
  597. .card.card-gallery > .item {
  598. background: inherit; }
  599. .card .icon + .icon {
  600. padding-left: 1rem; }
  601. .card.animate-fade-in {
  602. opacity: 0;
  603. filter: alpha(opacity=0);
  604. -webkit-transform: translate3d(-30px, 1px, 0);
  605. -webkit-transition: all 1s ease-in-out; }
  606. .card.animate-fade-in.done {
  607. opacity: 1;
  608. filter: alpha(opacity=100);
  609. -webkit-transform: translate3d(0, 0, 0); }
  610. .card .item.item-avatar {
  611. min-height: 88px;
  612. padding-left: 88px; }
  613. /* Hero
  614. ==================================*/
  615. .hero {
  616. background-size: cover;
  617. box-shadow: 0px 2px 5px 0 rgba(0, 0, 0, 0.26);
  618. color: #fff;
  619. height: 200px;
  620. position: relative;
  621. text-align: center;
  622. -webkit-transition: all 1s cubic-bezier(0.55, 0, 0.1, 1);
  623. transition: all 1s cubic-bezier(0.55, 0, 0.1, 1);
  624. -webkit-transform: translate3d(0, 0, 0);
  625. transform: translate3d(0, 0, 0);
  626. width: 100%; }
  627. .hero > * {
  628. -webkit-transition: opacity 2.5s cubic-bezier(0.55, 0, 0.1, 1);
  629. transition: opacity 2.5s cubic-bezier(0.55, 0, 0.1, 1);
  630. opacity: 1;
  631. filter: alpha(opacity=100); }
  632. .hero + .mid-bar {
  633. -webkit-transform: translate3d(0, 0, 0);
  634. transform: translate3d(0, 0, 0);
  635. -webkit-transition: all 1s cubic-bezier(0.55, 0, 0.1, 1);
  636. transition: all 1s cubic-bezier(0.55, 0, 0.1, 1);
  637. height: initial;
  638. opacity: 1;
  639. filter: alpha(opacity=100); }
  640. .hero .hero-icon {
  641. box-shadow: 0px 0 2px 0 rgba(0, 0, 0, 0.26);
  642. border-radius: 50%;
  643. display: inline-block;
  644. font-size: 65px;
  645. height: 150px;
  646. padding: 10px 30px;
  647. line-height: 136px;
  648. width: 150px; }
  649. .hero.no-header {
  650. height: 244px; }
  651. .hero > .content {
  652. bottom: 0;
  653. position: absolute;
  654. text-align: center;
  655. width: 100%;
  656. z-index: 1; }
  657. .hero > .content > .avatar {
  658. background-position: center;
  659. background-size: cover;
  660. border: solid 1px rgba(255, 255, 255, 0.8);
  661. border-radius: 50%;
  662. display: inline-block;
  663. height: 88px;
  664. left: auto;
  665. margin-bottom: 10px;
  666. position: relative;
  667. width: 88px; }
  668. .hero h1 .hero h2, .hero h3, .hero h4, .hero h5, .hero h6 {
  669. color: #fff;
  670. margin: 0; }
  671. .hero h4 {
  672. color: rgba(255, 255, 255, 0.7);
  673. margin: 3px 0 16px; }
  674. .hero h1 > a, .hero h2 > a, .hero h3 > a, .hero h4 > a, .hero h5 > a, .hero h6 > a {
  675. text-decoration: none; }
  676. .hero + .button-bar {
  677. border-radius: 0;
  678. margin-top: 0; }
  679. .hero + .button-bar > .button:first-child, .hero + .button-bar > .button:last-child {
  680. border-radius: 0; }
  681. .hero .hero-icon {
  682. color: #fff;
  683. font-size: 96px; }
  684. .hero .hero-icon + h1 {
  685. color: white;
  686. letter-spacing: 0.15rem; }
  687. .hero .button, .hero .button.button-large, .hero .button.button-flat {
  688. margin: 0; }
  689. .hero h1.title {
  690. color: #fff;
  691. font-size: 23px;
  692. margin: 0;
  693. text-align: left;
  694. padding-left: 80px;
  695. line-height: 59px; }
  696. .hero + .mid-bar {
  697. -webkit-transform: translate3d(0, 0, 0);
  698. transform: translate3d(0, 0, 0);
  699. -webkit-transition: all 1s cubic-bezier(0.55, 0, 0.1, 1);
  700. transition: all 1s cubic-bezier(0.55, 0, 0.1, 1);
  701. height: initial;
  702. opacity: 1;
  703. filter: alpha(opacity=100); }
  704. .hero > * {
  705. -webkit-transition: opacity 2.5s cubic-bezier(0.55, 0, 0.1, 1);
  706. transition: opacity 2.5s cubic-bezier(0.55, 0, 0.1, 1);
  707. opacity: 1;
  708. filter: alpha(opacity=100); }
  709. /* Item
  710. ==================================*/
  711. .item {
  712. font-size: 14px;
  713. width: 100%; }
  714. .item-icon-left .icon {
  715. left: 16px; }
  716. .item-icon-right .icon {
  717. right: 16px; }
  718. /*
  719. .list .item.item-icon-right {
  720. padding-right: 60px;
  721. }
  722. */
  723. .item-thumbnail-left > img:first-child, .item-thumbnail-left .item-image, .item-thumbnail-left .item-content > img:first-child, .item-thumbnail-left .item-content .item-image {
  724. border-radius: 50%; }
  725. .tab-item.activated {
  726. height: calc(100% + 3px);
  727. /* Stretch */ }
  728. /* List
  729. ==================================*/
  730. .content + .list {
  731. padding-top: 0; }
  732. .list .item {
  733. border: none;
  734. /*
  735. padding-left: 16px;
  736. padding-right: 16px;
  737. */
  738. min-height: 48px;
  739. text-align: left; }
  740. .list .item.tabs {
  741. padding: initial; }
  742. .list .item.item-bg-image {
  743. max-height: 150px;
  744. min-height: 150px; }
  745. .list .item.item-bg-image > img {
  746. height: 100%;
  747. left: 0;
  748. max-width: initial;
  749. opacity: 0.65;
  750. filter: alpha(opacity=65);
  751. position: absolute;
  752. top: 0;
  753. width: 100%;
  754. z-index: 0; }
  755. .list a.item {
  756. opacity: 1;
  757. filter: alpha(opacity=100); }
  758. .list .item.item-bg-image h1, .list .item.item-bg-image h2, .list .item.item-bg-image h3, .list .item.item-bg-image h4, .list .item.item-bg-image h5, .list .item.item-bg-image h6 {
  759. color: #fff;
  760. font-weight: bold;
  761. position: relative;
  762. text-shadow: 0 0 3px rgba(0, 0, 0, 0.95);
  763. z-index: 1; }
  764. .list .item.item-bg-image h2 {
  765. font-size: 24px; }
  766. .list .item.item-bg-image h2 {
  767. font-size: 24px; }
  768. .list .item.item-bg-image p {
  769. color: white;
  770. font-size: 17px;
  771. position: relative;
  772. text-shadow: 0 0 4px rgba(0, 0, 0, 0.95);
  773. z-index: 1; }
  774. .item-avatar, .item-avatar .item-content, .item-avatar-left, .item-avatar-left .item-content {
  775. min-height: 80px; }
  776. /* List: Thumbnails
  777. ==================================*/
  778. .item-thumbnail-left, .card > .item.item-thumbnail-left, .item-thumbnail-left .item-content {
  779. padding-left: 106px; }
  780. .item-thumbnail-right, .card > .item.item-thumbnail-right, .item-thumbnail-right .item-content {
  781. padding-right: 106px; }
  782. /* List: Avatar
  783. ==================================*/
  784. .item-avatar > img:first-child, .item-avatar .item-image, .item-avatar .item-content > img:first-child, .item-avatar .item-content .item-image, .item-avatar-left > img:first-child, .item-avatar-left .item-image, .item-avatar-left .item-content > img:first-child, .item-avatar-left .item-content .item-image {
  785. border-radius: 50%;
  786. left: 16px;
  787. max-height: 40px;
  788. max-width: 40px; }
  789. /*
  790. .item-avatar, .list .item-avatar {
  791. padding-left: 100px;
  792. }
  793. */
  794. .avatar, .item-avatar .avatar {
  795. background-position: center;
  796. background-size: cover;
  797. border-radius: 50%;
  798. display: inline-block;
  799. height: 56px;
  800. left: 16px;
  801. position: absolute;
  802. width: 56px; }
  803. /* List: Gallery
  804. ==================================*/
  805. .list.half {
  806. display: inline-block;
  807. float: left;
  808. margin: 0;
  809. padding: 0;
  810. width: 50%; }
  811. .list.half:first-child {
  812. padding: 16px 8px 16px 16px; }
  813. .list.half:last-child {
  814. padding: 16px 16px 16px 8px; }
  815. .list.half:first-child .card.card-gallery {
  816. margin-left: 0;
  817. margin-right: 0; }
  818. .list.half:last-child .card.card-gallery {
  819. margin-left: 0;
  820. margin-right: 0; }
  821. .list.condensed-space > .card, .list.condensed-space > .item {
  822. margin: 0px 0px 2px; }
  823. .list .card.card-gallery {
  824. display: block;
  825. float: left;
  826. margin: 0 0 0 13px;
  827. padding: 0;
  828. width: auto; }
  829. .list.half .item {
  830. width: 100%; }
  831. .list.half .item.card {
  832. margin-bottom: 16px; }
  833. .list .card.card-gallery.item h2 {
  834. padding: 12px; }
  835. .list .item.item-gallery img {
  836. width: 100%; }
  837. .item.item-divider {
  838. border-top: solid 1px rgba(0, 0, 0, 0.12);
  839. font-size: 14px;
  840. font-weight: bold;
  841. height: 48px;
  842. line-height: 48px;
  843. color: rgba(0, 0, 0, 0.54); }
  844. .item.item-divider:first-child {
  845. border: none; }
  846. .item-avatar, .item-avatar .item-content, .item-avatar-left, .item-avatar-left .item-content, .card > .item-avatar {
  847. padding-left: 72px; }
  848. .item.active, .item.activated, .item-complex.active .item-content, .item-complex.activated .item-content, .item .item-content.active, .item .item-content.activated {
  849. background-color: transparent; }
  850. .list-inset {
  851. margin: 20px 30px;
  852. border-left: solid 1px #ccc;
  853. border-radius: 0;
  854. background-color: #fff; }
  855. .list .item.item-floating-label,
  856. .item-floating-label {
  857. border-bottom: solid 1px #ccc; }
  858. .loader {
  859. position: relative;
  860. margin: 0px auto;
  861. width: 100px;
  862. height: 100px;
  863. zoom: 1.7; }
  864. .circular {
  865. -webkit-animation: rotate 2s linear infinite;
  866. animation: rotate 2s linear infinite;
  867. height: 100px;
  868. position: relative;
  869. width: 100px; }
  870. .path {
  871. stroke-dasharray: 1,200;
  872. stroke-dashoffset: 0;
  873. -webkit-animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
  874. animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
  875. stroke-linecap: round; }
  876. @-webkit-keyframes rotate {
  877. 100% {
  878. -webkit-transform: rotate(360deg);
  879. transform: rotate(360deg); } }
  880. @keyframes rotate {
  881. 100% {
  882. -webkit-transform: rotate(360deg);
  883. transform: rotate(360deg); } }
  884. @-webkit-keyframes dash {
  885. 0% {
  886. stroke-dasharray: 1,200;
  887. stroke-dashoffset: 0; }
  888. 50% {
  889. stroke-dasharray: 89,200;
  890. stroke-dashoffset: -35; }
  891. 100% {
  892. stroke-dasharray: 89,200;
  893. stroke-dashoffset: -124; } }
  894. @keyframes dash {
  895. 0% {
  896. stroke-dasharray: 1,200;
  897. stroke-dashoffset: 0; }
  898. 50% {
  899. stroke-dasharray: 89,200;
  900. stroke-dashoffset: -35; }
  901. 100% {
  902. stroke-dasharray: 89,200;
  903. stroke-dashoffset: -124; } }
  904. @-webkit-keyframes color {
  905. 100%, 0% {
  906. stroke: #d62d20; }
  907. 40% {
  908. stroke: #0057e7; }
  909. 66% {
  910. stroke: #008744; }
  911. 80%, 90% {
  912. stroke: #ffa700; } }
  913. @keyframes color {
  914. 100%, 0% {
  915. stroke: #d62d20; }
  916. 40% {
  917. stroke: #0057e7; }
  918. 66% {
  919. stroke: #008744; }
  920. 80%, 90% {
  921. stroke: #ffa700; } }
  922. /* Layouts: Login
  923. ==================================*/
  924. .login {
  925. background-position: 25% 25%;
  926. background-size: 180% 180%;
  927. height: 100%;
  928. -webkit-transition: all 1.5s ease-in-out;
  929. transition: all 1.5s ease-in-out; }
  930. .login .item {
  931. margin: 0 12px;
  932. padding-left: 0;
  933. padding-right: 0;
  934. width: initial; }
  935. .login .button-bar {
  936. bottom: 0;
  937. margin: 28px 12px 0;
  938. width: initial; }
  939. .login .light-bg {
  940. background-color: #fff; }
  941. .icon.hero-icon:before {
  942. line-height: 130px; }
  943. /* Mask
  944. ==================================*/
  945. .hero.has-mask:after, .item.has-mask:after, .card.has-mask:after {
  946. content: '';
  947. background: -webkit-linear-gradient(top, transparent 0%, rgba(0, 0, 0, 0.6) 100%);
  948. height: 100%;
  949. left: 0;
  950. position: absolute;
  951. top: 0;
  952. z-index: 0;
  953. width: 100%; }
  954. .hero.has-mask-reverse:after, .item.has-mask-reverse:after, .card.has-mask-reverse:after {
  955. content: '';
  956. background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.6) 0%, transparent 100%);
  957. height: 100%;
  958. left: 0;
  959. position: absolute;
  960. top: 0;
  961. z-index: 0;
  962. width: 100%; }
  963. /* Menu */
  964. .menu-bottom {
  965. bottom: 16px;
  966. left: 16px;
  967. right: 16px;
  968. position: absolute; }
  969. .menu-top {
  970. top: 16px;
  971. left: 16px;
  972. right: 16px;
  973. position: absolute; }
  974. .menu .avatar {
  975. top: 16px;
  976. left: 16px;
  977. height: 65px;
  978. width: 65px; }
  979. .menu .bar.bar-header.expanded {
  980. box-shadow: none;
  981. min-height: 150px;
  982. color: #fff; }
  983. .menu-open .bar.bar-header.expanded {
  984. background-position: 0;
  985. background-size: 100%; }
  986. .has-expanded-header {
  987. top: 150px !important; }
  988. .motion {
  989. -webkit-transition: all 0.5s ease-out;
  990. transition: all 0.5s ease-out; }
  991. .fade {
  992. opacity: 0;
  993. filter: alpha(opacity=0);
  994. -webkit-backface-visibility: hidden !important;
  995. backface-visibility: hidden !important;
  996. -webkit-transition: all 0.1s ease-out !important;
  997. transition: all 0.1s ease-out !important; }
  998. .spin-back {
  999. -webkit-backface-visibility: hidden !important;
  1000. backface-visibility: hidden !important;
  1001. -webkit-transform: translateZ(0) rotate(360deg) scale(0) !important;
  1002. transform: translateZ(0) rotate(360deg) scale(0) !important;
  1003. -webkit-transition: all 0.1s ease-out !important;
  1004. transition: all 0.1s ease-out !important; }
  1005. .spiral {
  1006. -webkit-backface-visibility: hidden !important;
  1007. backface-visibility: hidden !important;
  1008. -webkit-transform: translateZ(0) rotate(-360deg) scale(0) translate(-120px) !important;
  1009. transform: translateZ(0) rotate(-360deg) scale(0) translate(-120px) !important;
  1010. -webkit-transition: all 0.1s ease-out !important;
  1011. transition: all 0.1s ease-out !important; }
  1012. .spiral-back {
  1013. -webkit-backface-visibility: hidden !important;
  1014. backface-visibility: hidden !important;
  1015. -webkit-transform: translateZ(0) rotate(360deg) scale(0) translate(120px) !important;
  1016. transform: translateZ(0) rotate(360deg) scale(0) translate(120px) !important;
  1017. -webkit-transition: all 0.1s ease-out !important;
  1018. transition: all 0.1s ease-out !important; }
  1019. .menu-open .avatar {
  1020. opacity: 1;
  1021. filter: alpha(opacity=100);
  1022. -webkit-transform: translateZ(0) rotate(0) scale(1) !important;
  1023. transform: translateZ(0) rotate(0) scale(1) !important;
  1024. -webkit-transition: all 0.3s ease-out !important;
  1025. transition: all 0.3s ease-out !important; }
  1026. .spin {
  1027. -webkit-backface-visibility: hidden !important;
  1028. backface-visibility: hidden !important;
  1029. -webkit-transform: translateZ(0) rotate(0) scale(0) !important;
  1030. transform: translateZ(0) rotate(0) scale(0) !important;
  1031. -webkit-transition: all 0.3s ease-out !important;
  1032. transition: all 0.3s ease-out !important; }
  1033. .spin.on {
  1034. -webkit-transform: translateZ(0) rotate(-360deg) scale(1) !important;
  1035. transform: translateZ(0) rotate(-360deg) scale(1) !important; }
  1036. .flap {
  1037. -webkit-backface-visibility: hidden !important;
  1038. backface-visibility: hidden !important;
  1039. -webkit-transform: translateZ(0) rotateX(0) scale(0) translate(-120px) !important;
  1040. transform: translateZ(0) rotateX(0) scale(0) translate(-120px) !important;
  1041. -webkit-transition: all 0.5s ease-out !important;
  1042. transition: all 0.5s ease-out !important; }
  1043. .flap.on {
  1044. -webkit-transform: translateZ(0) rotateX(-720deg) scale(1) translate(0) !important;
  1045. transform: translateZ(0) rotateX(-720deg) scale(1) translate(0) !important;
  1046. -webkit-transition: all 0.5s ease-out !important;
  1047. transition: all 0.5s ease-out !important; }
  1048. .drop {
  1049. -webkit-backface-visibility: hidden !important;
  1050. backface-visibility: hidden !important;
  1051. -webkit-transform: translateZ(0) scale(3) !important;
  1052. transform: translateZ(0) scale(3) !important;
  1053. -webkit-transition: all 0.5s ease-out !important;
  1054. transition: all 0.5s ease-out !important; }
  1055. .drop.on {
  1056. -webkit-transform: translateZ(0) scale(1) !important;
  1057. transform: translateZ(0) scale(1) !important;
  1058. -webkit-transition: all 0.5s ease-out !important;
  1059. transition: all 0.5s ease-out !important; }
  1060. .flip {
  1061. -webkit-backface-visibility: hidden !important;
  1062. backface-visibility: hidden !important;
  1063. -webkit-transform: translateZ(0) rotateY(0) scale(0) !important;
  1064. transform: translateZ(0) rotateY(0) scale(0) !important;
  1065. -webkit-transition: all 0.5s ease-out !important;
  1066. transition: all 0.5s ease-out !important; }
  1067. .flip.on {
  1068. -webkit-transform: translateZ(0) rotateY(-720deg) scale(1) !important;
  1069. transform: translateZ(0) rotateY(-720deg) scale(1) !important;
  1070. -webkit-transition: all 0.5s ease-out !important;
  1071. transition: all 0.5s ease-out !important; }
  1072. /* Utilities
  1073. ==================================*/
  1074. .bold {
  1075. font-weight: bold; }
  1076. .static {
  1077. position: static; }
  1078. .pull-left {
  1079. float: left; }
  1080. .pull-right {
  1081. float: right; }
  1082. .double-padding, .ionic-content.double-padding {
  1083. padding: 16px; }
  1084. .double-padding-x {
  1085. padding-left: 16px;
  1086. padding-right: 16px; }
  1087. .double-padding-y {
  1088. padding-top: 16px;
  1089. padding-bottom: 16px; }
  1090. .outline {
  1091. border-style: solid;
  1092. border-width: 1px; }
  1093. .border-top {
  1094. border-top: solid 1px #ccc;
  1095. padding-top: 30px; }
  1096. .no-border {
  1097. border: none; }
  1098. .circle {
  1099. border-radius: 50%; }
  1100. .no-padding, .list.no-padding, .bar.no-padding, .button-bar.no-padding, .card.no-padding, .button.no-padding, .item.no-padding {
  1101. padding: 0; }
  1102. .flat, .flat.tabs, .flat.button, .flat.button.icon, .flat.hero {
  1103. box-shadow: none;
  1104. -webkit-box-shadow: none; }
  1105. /* Utilities : Padding
  1106. ==================================*/
  1107. .im-wrapper, .padding {
  1108. padding: 16px !important; }
  1109. .padding-bottom {
  1110. padding-bottom: 16px !important; }
  1111. .padding-top {
  1112. padding-top: 16px !important; }
  1113. .padding-left {
  1114. padding-left: 16px !important; }
  1115. .padding-right {
  1116. padding-right: 16px !important; }
  1117. .no-padding-bottom {
  1118. padding-bottom: 0 !important; }
  1119. .no-padding-top {
  1120. padding-top: 0 !important; }
  1121. .no-padding-left {
  1122. padding-left: 0 !important; }
  1123. .no-padding-right {
  1124. padding-right: 0 !important; }
  1125. /* Utilities : Depth
  1126. ==================================*/
  1127. .z1 {
  1128. box-shadow: 0px 2px 5px 0 rgba(0, 0, 0, 0.26); }
  1129. /* Utilities : Color
  1130. ==================================*/
  1131. .bar.bar-positive.darker {
  1132. background-color: #164FAB; }
  1133. /* TODO: Expand to other colors */
  1134. .bar.bar-positive.dark-positive-bg {
  1135. background-color: #2C5CAD; }
  1136. /* TODO: Expand to other colors */
  1137. .muted {
  1138. color: #C3C3C3; }
  1139. .clear-bg {
  1140. background: transparent; }
  1141. /* Motion: Blinds
  1142. ==================================*/
  1143. .animate-blinds .item,
  1144. .animate-blinds .item {
  1145. visibility: hidden; }
  1146. .animate-blinds .item,
  1147. .animate-blinds .item {
  1148. -ms-transform: scale3d(0.8, 0, 1);
  1149. -webkit-transform: scale3d(0.8, 0, 1);
  1150. transform: scale3d(0.8, 0, 1);
  1151. -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.55, 0, 0.1, 1);
  1152. transition: transform 0.3s cubic-bezier(0.55, 0, 0.1, 1); }
  1153. .animate-blinds .item-bg-image > img.background,
  1154. .animate-blinds .item-bg-image > img.background {
  1155. box-shadow: none;
  1156. -ms-transform: scale3d(1, 1, 1);
  1157. -webkit-transform: scale3d(1, 1, 1);
  1158. transform: scale3d(1, 1, 1); }
  1159. .animate-blinds .in,
  1160. .animate-blinds.done > *,
  1161. .animate-blinds .in,
  1162. .animate-blinds.done > * {
  1163. -ms-transform: translate3d(0, 0, 0);
  1164. -webkit-transform: translate3d(0, 0, 0);
  1165. transform: translate3d(0, 0, 0); }
  1166. .animate-blinds .in,
  1167. .animate-blinds.done .item,
  1168. .animate-blinds .in,
  1169. .animate-blinds.done .item {
  1170. visibility: visible; }
  1171. .animate-blinds .item,
  1172. .animate-blinds .item {
  1173. visibility: hidden; }
  1174. .animate-blinds .item,
  1175. .animate-blinds .item {
  1176. opacity: 0;
  1177. filter: alpha(opacity=0); }
  1178. .animate-blinds .in,
  1179. .animate-blinds.done,
  1180. .animate-blinds .in,
  1181. .animate-blinds.done {
  1182. -ms-transform: scale3d(1, 1, 1);
  1183. -webkit-transform: scale3d(1, 1, 1);
  1184. transform: scale3d(1, 1, 1);
  1185. -webkit-transition: all 0.3s ease-in-out;
  1186. transition: all 0.3s ease-in-out;
  1187. opacity: 1;
  1188. filter: alpha(opacity=100); }
  1189. .animate-blinds .in,
  1190. .animate-blinds.done,
  1191. .animate-blinds .in,
  1192. .animate-blinds.done {
  1193. visibility: visible; }
  1194. .animate-blinds.done .in,
  1195. .animate-blinds.done .in {
  1196. opacity: 1;
  1197. filter: alpha(opacity=100); }
  1198. .animate-blinds .has-mask-reverse:after,
  1199. .animate-blinds .has-mask-reverse:after {
  1200. opacity: 0;
  1201. filter: alpha(opacity=0);
  1202. -webkit-transition: all 0.3s ease-in-out;
  1203. transition: all 0.3s ease-in-out; }
  1204. .animate-blinds.done .has-mask-reverse:after,
  1205. .animate-blinds.done .has-mask-reverse:after {
  1206. opacity: 1;
  1207. filter: alpha(opacity=100); }
  1208. .animate-blinds .out,
  1209. .animate-blinds .out {
  1210. -ms-transform: scale3d(0, 0, 1);
  1211. -webkit-transform: scale3d(0, 0, 1);
  1212. transform: scale3d(0, 0, 1); }
  1213. /* Motion: Pan In Left
  1214. ==================================*/
  1215. .animate-pan-in-left,
  1216. .animate-pan-in-left {
  1217. background-position: 0% 0%; }
  1218. /* Motion: Ripple
  1219. ==================================*/
  1220. .animate-ripple .done,
  1221. .animate-ripple .done {
  1222. visibility: hidden; }
  1223. .animate-ripple .done,
  1224. .animate-ripple .done {
  1225. -ms-transform: scale3d(0.8, 0, 1);
  1226. -webkit-transform: scale3d(0.8, 0, 1);
  1227. transform: scale3d(0.8, 0, 1);
  1228. -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.55, 0, 0.1, 1);
  1229. transition: transform 0.3s cubic-bezier(0.55, 0, 0.1, 1); }
  1230. .animate-ripple .item-bg-image img.background,
  1231. .animate-ripple .item-bg-image img.background {
  1232. box-shadow: none;
  1233. -ms-transform: scale3d(1, 1, 1);
  1234. -webkit-transform: scale3d(1, 1, 1);
  1235. transform: scale3d(1, 1, 1); }
  1236. .animate-ripple .in, .animate-ripple.done,
  1237. .animate-ripple .in, .animate-ripple.done {
  1238. -ms-transform: scale3d(1, 1, 1);
  1239. -webkit-transform: scale3d(1, 1, 1);
  1240. transform: scale3d(1, 1, 1); }
  1241. .animate-ripple .in, .animate-ripple.done,
  1242. .animate-ripple .in, .animate-ripple.done {
  1243. visibility: visible; }
  1244. .animate-ripple .item {
  1245. -ms-transform: scale3d(0, 0, 1);
  1246. -webkit-transform: scale3d(0, 0, 1);
  1247. transform: scale3d(0, 0, 1);
  1248. opacity: 0;
  1249. filter: alpha(opacity=0); }
  1250. .animate-ripple .item.in {
  1251. opacity: 1;
  1252. filter: alpha(opacity=100); }
  1253. .animate-ripple .done {
  1254. visibility: hidden; }
  1255. .animate-ripple .done,
  1256. .animate-ripple .done {
  1257. -ms-transform: scale3d(0.8, 0, 1);
  1258. -webkit-transform: scale3d(0.8, 0, 1);
  1259. transform: scale3d(0.8, 0, 1);
  1260. -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.55, 0, 0.1, 1);
  1261. transition: transform 0.3s cubic-bezier(0.55, 0, 0.1, 1); }
  1262. /* Uncomment if you want images to fade in after the card
  1263. .animate-ripple .in .item-bg-image img:last-child,
  1264. .animate-ripple .in .item-bg-image img:last-child {
  1265. opacity: 0;
  1266. }
  1267. .animate-ripple.done .item-bg-image img:last-child,
  1268. .animate-ripple.done .item-bg-image img:last-child {
  1269. opacity: 1;
  1270. -moz-transition: all 1s ease-in-out;
  1271. -o-transition: all 1s ease-in-out;
  1272. -webkit-transition: all 1s ease-in-out;
  1273. transition: all 1s ease-in-out;
  1274. }
  1275. .animate-ripple .item-bg-image img:last-child,
  1276. .animate-ripple .item-bg-image img:last-child {
  1277. box-shadow: none;
  1278. -moz-transform: scale3d(1, 1, 1);
  1279. -ms-transform: scale3d(1, 1, 1);
  1280. -webkit-transform: scale3d(1, 1, 1);
  1281. transform: scale3d(1, 1, 1);
  1282. }
  1283. .animate-ripple .in .item-bg-image img:last-child,
  1284. .animate-ripple .in .item-bg-image img:last-child {
  1285. opacity: 0;
  1286. }
  1287. .animate-ripple.done .item-bg-image img:last-child,
  1288. .animate-ripple.done .item-bg-image img:last-child {
  1289. opacity: 1;
  1290. -moz-transition: all 0.3s ease-in-out;
  1291. -o-transition: all 0.3s ease-in-out;
  1292. -webkit-transition: all 0.3s ease-in-out;
  1293. transition: all 0.3s ease-in-out;
  1294. }
  1295. .animate-ripple .in,
  1296. .animate-ripple .in {
  1297. opacity: 0.6;
  1298. }
  1299. */
  1300. .animate-ripple .in, .animate-ripple.done, .animate-ripple .in, .animate-ripple.done {
  1301. -ms-transform: scale3d(1, 1, 1);
  1302. -webkit-transform: scale3d(1, 1, 1);
  1303. transform: scale3d(1, 1, 1);
  1304. -webkit-transition: all 0.3s ease-in-out;
  1305. transition: all 0.3s ease-in-out; }
  1306. .animate-ripple .in, .animate-ripple.done, .animate-ripple .in, .animate-ripple.done {
  1307. visibility: visible; }
  1308. .animate-ripple.done .in, .animate-ripple.done .in {
  1309. opacity: 1;
  1310. filter: alpha(opacity=100); }
  1311. .animate-ripple .has-mask-reverse:after, .animate-ripple .has-mask-reverse:after {
  1312. opacity: 0;
  1313. filter: alpha(opacity=0);
  1314. -webkit-transition: all 0.3s ease-in-out;
  1315. transition: all 0.3s ease-in-out; }
  1316. .animate-ripple.done .has-mask-reverse:after, .animate-ripple.done .has-mask-reverse:after {
  1317. opacity: 1;
  1318. filter: alpha(opacity=100); }
  1319. .animate-ripple .out, .animate-ripple .out {
  1320. -ms-transform: scale3d(0, 0, 1);
  1321. -webkit-transform: scale3d(0, 0, 1);
  1322. transform: scale3d(0, 0, 1); }
  1323. /* Motion: Slide / Fade In
  1324. ==================================*/
  1325. .animate-fade-slide-in .item,
  1326. .animate-fade-slide-in .item {
  1327. visibility: hidden; }
  1328. .animate-fade-slide-in .item,
  1329. .animate-fade-slide-in .item {
  1330. -ms-transform: scale3d(0.8, 0, 1);
  1331. -webkit-transform: scale3d(0.8, 0, 1);
  1332. transform: scale3d(0.8, 0, 1);
  1333. -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.55, 0, 0.1, 1);
  1334. transition: transform 0.3s cubic-bezier(0.55, 0, 0.1, 1); }
  1335. .animate-fade-slide-in .item-bg-image img.background,
  1336. .animate-fade-slide-in .item-bg-image img.background {
  1337. box-shadow: none;
  1338. -ms-transform: scale3d(1, 1, 1);
  1339. -webkit-transform: scale3d(1, 1, 1);
  1340. transform: scale3d(1, 1, 1); }
  1341. .animate-fade-slide-in .in,
  1342. .animate-fade-slide-in.done .item,
  1343. .animate-fade-slide-in .in,
  1344. .animate-fade-slide-in.done .item {
  1345. -ms-transform: translate3d(0, 0, 0);
  1346. -webkit-transform: translate3d(0, 0, 0);
  1347. transform: translate3d(0, 0, 0); }
  1348. .animate-fade-slide-in .in,
  1349. .animate-fade-slide-in.done .item,
  1350. .animate-fade-slide-in .in,
  1351. .animate-fade-slide-in.done .item {
  1352. visibility: visible; }
  1353. .list .item.item-bg-image,
  1354. .list .item.item-bg-image {
  1355. max-height: 150px; }
  1356. .animate-fade-slide-in .item,
  1357. .animate-fade-slide-in .item {
  1358. visibility: hidden; }
  1359. .animate-fade-slide-in .item,
  1360. .animate-fade-slide-in .item {
  1361. -ms-transform: translate3d(-250px, 250px, 0);
  1362. -webkit-transform: translate3d(-250px, 250px, 0);
  1363. transform: translate3d(-250px, 250px, 0);
  1364. -webkit-transition: -webkit-transform 0.5s cubic-bezier(0.55, 0, 0.1, 1);
  1365. transition: transform 0.5s cubic-bezier(0.55, 0, 0.1, 1);
  1366. opacity: 0;
  1367. filter: alpha(opacity=0); }
  1368. .animate-fade-slide-in .in,
  1369. .animate-fade-slide-in.done,
  1370. .animate-fade-slide-in .in,
  1371. .animate-fade-slide-in.done {
  1372. -ms-transform: scale3d(1, 1, 1);
  1373. -webkit-transform: scale3d(1, 1, 1);
  1374. transform: scale3d(1, 1, 1);
  1375. -webkit-transition: all 0.5s ease-in-out;
  1376. transition: all 0.5s ease-in-out;
  1377. opacity: 1;
  1378. filter: alpha(opacity=100); }
  1379. .animate-fade-slide-in .in,
  1380. .animate-fade-slide-in.done,
  1381. .animate-fade-slide-in .in,
  1382. .animate-fade-slide-in.done {
  1383. visibility: visible; }
  1384. .animate-fade-slide-in.done .in,
  1385. .animate-fade-slide-in.done .in {
  1386. opacity: 1;
  1387. filter: alpha(opacity=100); }
  1388. .animate-fade-slide-in .has-mask-reverse:after,
  1389. .animate-fade-slide-in .has-mask-reverse:after {
  1390. opacity: 0;
  1391. filter: alpha(opacity=0);
  1392. -webkit-transition: all 0.3s ease-in-out;
  1393. transition: all 0.3s ease-in-out; }
  1394. .animate-fade-slide-in.done .has-mask-reverse:after,
  1395. .animate-fade-slide-in.done .has-mask-reverse:after {
  1396. opacity: 1;
  1397. filter: alpha(opacity=100); }
  1398. .animate-fade-slide-in .out,
  1399. .animate-fade-slide-in .out {
  1400. -ms-transform: scale3d(0, 0, 1);
  1401. -webkit-transform: scale3d(0, 0, 1);
  1402. transform: scale3d(0, 0, 1); }
  1403. /* Motion: Slide In Right
  1404. ==================================*/
  1405. .animate-fade-slide-in-right .item,
  1406. .animate-fade-slide-in-right .item {
  1407. visibility: hidden; }
  1408. .animate-fade-slide-in-right .item,
  1409. .animate-fade-slide-in-right .item {
  1410. -ms-transform: scale3d(0.8, 0, 1);
  1411. -webkit-transform: scale3d(0.8, 0, 1);
  1412. transform: scale3d(0.8, 0, 1);
  1413. -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.55, 0, 0.1, 1);
  1414. transition: transform 0.3s cubic-bezier(0.55, 0, 0.1, 1); }
  1415. .animate-fade-slide-in-right .item-bg-image > img.background,
  1416. .animate-fade-slide-in-right .item-bg-image > img.background {
  1417. box-shadow: none;
  1418. -ms-transform: scale3d(1, 1, 1);
  1419. -webkit-transform: scale3d(1, 1, 1);
  1420. transform: scale3d(1, 1, 1); }
  1421. .animate-fade-slide-in-right .in,
  1422. .animate-fade-slide-in-right.done > *,
  1423. .animate-fade-slide-in-right .in,
  1424. .animate-fade-slide-in-right.done > * {
  1425. -ms-transform: translate3d(0, 0, 0);
  1426. -webkit-transform: translate3d(0, 0, 0);
  1427. transform: translate3d(0, 0, 0); }
  1428. .animate-fade-slide-in-right .in,
  1429. .animate-fade-slide-in-right.done .item,
  1430. .animate-fade-slide-in-right .in,
  1431. .animate-fade-slide-in-right.done .item {
  1432. visibility: visible; }
  1433. .animate-fade-slide-in-right .item,
  1434. .animate-fade-slide-in-right .item {
  1435. visibility: hidden; }
  1436. .animate-fade-slide-in-right .item,
  1437. .animate-fade-slide-in-right .item {
  1438. -ms-transform: translate3d(250px, 250px, 0);
  1439. -webkit-transform: translate3d(250px, 250px, 0);
  1440. transform: translate3d(250px, 250px, 0);
  1441. -webkit-transition: -webkit-transform 0.5s cubic-bezier(0.55, 0, 0.1, 1);
  1442. transition: transform 0.5s cubic-bezier(0.55, 0, 0.1, 1);
  1443. opacity: 0;
  1444. filter: alpha(opacity=0); }
  1445. .animate-fade-slide-in-right .in,
  1446. .animate-fade-slide-in-right.done,
  1447. .animate-fade-slide-in-right .in,
  1448. .animate-fade-slide-in-right.done {
  1449. -ms-transform: scale3d(1, 1, 1);
  1450. -webkit-transform: scale3d(1, 1, 1);
  1451. transform: scale3d(1, 1, 1);
  1452. -webkit-transition: all 0.3s ease-in-out;
  1453. transition: all 0.3s ease-in-out;
  1454. opacity: 1;
  1455. filter: alpha(opacity=100); }
  1456. .animate-fade-slide-in-right .in,
  1457. .animate-fade-slide-in-right.done,
  1458. .animate-fade-slide-in-right .in,
  1459. .animate-fade-slide-in-right.done {
  1460. visibility: visible; }
  1461. .animate-fade-slide-in-right.done .in,
  1462. .animate-fade-slide-in-right.done .in {
  1463. opacity: 1;
  1464. filter: alpha(opacity=100); }
  1465. .animate-fade-slide-in-right .has-mask-reverse:after,
  1466. .animate-fade-slide-in-right .has-mask-reverse:after {
  1467. opacity: 0;
  1468. filter: alpha(opacity=0);
  1469. -webkit-transition: all 0.3s ease-in-out;
  1470. transition: all 0.3s ease-in-out; }
  1471. .animate-fade-slide-in-right.done .has-mask-reverse:after,
  1472. .animate-fade-slide-in-right.done .has-mask-reverse:after {
  1473. opacity: 1;
  1474. filter: alpha(opacity=100); }
  1475. .animate-fade-slide-in-right .out,
  1476. .animate-fade-slide-in-right .out {
  1477. -ms-transform: scale3d(0, 0, 1);
  1478. -webkit-transform: scale3d(0, 0, 1);
  1479. transform: scale3d(0, 0, 1); }
  1480. /* Motion: Slide Up
  1481. ==================================*/
  1482. .slide-up,
  1483. .slide-up,
  1484. .hero.slide-up {
  1485. height: 100%;
  1486. overflow: hidden;
  1487. text-align: center; }
  1488. .slide-up {
  1489. -webkit-transition: all 1s cubic-bezier(0.55, 0, 0.1, 1);
  1490. transition: all 1s cubic-bezier(0.55, 0, 0.1, 1);
  1491. -webkit-transform: translate3d(0, 0, 0);
  1492. transform: translate3d(0, 0, 0); }
  1493. .slide-up *,
  1494. .slide-up *,
  1495. .hero.slide-up * {
  1496. opacity: 0;
  1497. filter: alpha(opacity=0); }
  1498. .hero.slide-up + .mid-bar,
  1499. .slide-up + .mid-bar,
  1500. .slide-up + .mid-bar {
  1501. height: 100%;
  1502. opacity: 0.7;
  1503. filter: alpha(opacity=70);
  1504. -webkit-transform: translate3d(100%, -240px, 0);
  1505. transform: translate3d(100%, -240px, 0); }
  1506. /*!
  1507. * Waves v0.5.4
  1508. * http://fian.my.id/Waves
  1509. *
  1510. * Copyright 2014 Alfiana E. Sibuea and other contributors
  1511. * Forked by Zach Fitzgerald and other contributors for Ionic Material
  1512. *
  1513. * Released under the MIT license
  1514. * https://github.com/fians/Waves/blob/master/LICENSE
  1515. *
  1516. */
  1517. .ink, .button-fab, .button-flat, .button-raised, .button-clear, .popup .button {
  1518. position: relative;
  1519. cursor: pointer;
  1520. /*display: inline-block;*/
  1521. overflow: hidden;
  1522. -webkit-user-select: none;
  1523. -moz-user-select: none;
  1524. -ms-user-select: none;
  1525. user-select: none;
  1526. -webkit-tap-highlight-color: transparent;
  1527. -webkit-transition: all 0.3s ease-out;
  1528. -moz-transition: all 0.3s ease-out;
  1529. -o-transition: all 0.3s ease-out;
  1530. transition: all 0.3s ease-out; }
  1531. .ink-ripple {
  1532. position: absolute;
  1533. border-radius: 50%;
  1534. width: 100px;
  1535. height: 100px;
  1536. margin-top: -50px;
  1537. margin-left: -50px;
  1538. opacity: 0;
  1539. background-color: rgba(255, 255, 255, 0.4);
  1540. -webkit-transition: all 0.5s ease-out;
  1541. -moz-transition: all 0.5s ease-out;
  1542. -o-transition: all 0.5s ease-out;
  1543. transition: all 0.5s ease-out;
  1544. -webkit-transition-property: -webkit-transform, opacity;
  1545. -moz-transition-property: -moz-transform, opacity;
  1546. -o-transition-property: -o-transform, opacity;
  1547. transition-property: transform, opacity;
  1548. -webkit-transform: scale(0);
  1549. -moz-transform: scale(0);
  1550. -ms-transform: scale(0);
  1551. -o-transform: scale(0);
  1552. transform: scale(0);
  1553. pointer-events: none; }
  1554. .ink-notransition {
  1555. -webkit-transition: none !important;
  1556. -moz-transition: none !important;
  1557. -o-transition: none !important;
  1558. transition: none !important; }
  1559. .button-fab,
  1560. .button-flat,
  1561. .button-clear,
  1562. .button-raised,
  1563. .ink-button,
  1564. .ink-circle {
  1565. -webkit-transform: translateZ(0);
  1566. -moz-transform: translateZ(0);
  1567. -ms-transform: translateZ(0);
  1568. -o-transform: translateZ(0);
  1569. transform: translateZ(0); }
  1570. .button-fab.activated,
  1571. .button-flat.activated,
  1572. .button-raised.activated,
  1573. .button-clear.activated,
  1574. .ink-button.activated,
  1575. .ink.activated,
  1576. .ink-circle.activated,
  1577. .popup .button.activated,
  1578. .button-fab:active,
  1579. .button-flat:active,
  1580. .button-raised:active,
  1581. .button-clear:active,
  1582. .ink-button:active,
  1583. .ink:active,
  1584. .ink-circle:active,
  1585. .popup .button:active {
  1586. -webkit-mask-image: -webkit-radial-gradient(circle, #ffffff 100%, #000000 100%); }
  1587. .ink-button,
  1588. .ink-button:visited,
  1589. .ink-button:link,
  1590. .button-fab,
  1591. .button-fab:visited,
  1592. .button-fab:link,
  1593. .button-flat,
  1594. .button-flat:visited,
  1595. .button-flat:link,
  1596. .button-raised,
  1597. .button-raised:visited,
  1598. .button-raised:link,
  1599. .button-clear,
  1600. .button-clear:visited,
  1601. .button-clear:link,
  1602. .ink-button-input {
  1603. white-space: nowrap;
  1604. vertical-align: middle;
  1605. cursor: pointer;
  1606. border: none;
  1607. outline: none;
  1608. /* color: inherit; */
  1609. /* background-color: rgba(0, 0, 0, 0); */
  1610. font-size: 14px;
  1611. text-align: center;
  1612. text-decoration: none;
  1613. z-index: 1; }
  1614. .ink-button {
  1615. padding: 10px 15px;
  1616. border-radius: 2px; }
  1617. .ink-button-input {
  1618. margin: 0;
  1619. padding: 10px 15px; }
  1620. .ink-input-wrapper {
  1621. border-radius: 2px;
  1622. vertical-align: bottom; }
  1623. .ink-input-wrapper.ink-button {
  1624. padding: 0; }
  1625. .ink-input-wrapper .ink-button-input {
  1626. position: relative;
  1627. top: 0;
  1628. left: 0;
  1629. z-index: 1; }
  1630. .ink-circle {
  1631. text-align: center;
  1632. width: 2.5em;
  1633. height: 2.5em;
  1634. line-height: 2.5em;
  1635. border-radius: 50%; }
  1636. .ink-float {
  1637. -webkit-mask-image: none;
  1638. -webkit-box-shadow: 0px 1px 1.5px 1px rgba(0, 0, 0, 0.12);
  1639. box-shadow: 0px 1px 1.5px 1px rgba(0, 0, 0, 0.12); }
  1640. .ink-float:active {
  1641. -webkit-box-shadow: 0px 8px 20px 1px rgba(0, 0, 0, 0.3);
  1642. box-shadow: 0px 8px 20px 1px rgba(0, 0, 0, 0.3); }
  1643. .ink-block {
  1644. display: block; }
  1645. .ink-ripple {
  1646. z-index: 0;
  1647. /* Firefox Bug: link not triggered unless -1 z-index */ }
  1648. /* Handled elsewhere
  1649. .button-fab,.button-raised,.button-flat,.ink-circle,.list a.item {
  1650. -webkit-mask-image: none;
  1651. }
  1652. */
  1653. .button-clear .ink-ripple,
  1654. *[class$="-clear"] > .ink-ripple,
  1655. *[class$="-light"] > .ink-ripple,
  1656. *[class$="-stable"] > .ink-ripple,
  1657. *[class$="-100"] > .ink-ripple,
  1658. .list .ink-ripple,
  1659. .ink-dark .ink-ripple {
  1660. background-color: rgba(0, 0, 0, 0.2); }
  1661. .tab-item {
  1662. position: relative;
  1663. /* for Ink */ }
  1664. /* Ionic Overrides
  1665. ==================================*/
  1666. * {
  1667. font-family: "RobotoDraft","Roboto","Helvetica Neue", "Segoe UI", sans-serif; }
  1668. .rounded {
  1669. border-radius: 4px; }
  1670. a {
  1671. cursor: pointer; }
  1672. .has-header.expanded {
  1673. /* Expanded modifier */
  1674. top: 76px; }
  1675. /* Bar Overrides
  1676. ==================================*/
  1677. .bar {
  1678. border-bottom: none;
  1679. padding: 0; }
  1680. .bar .button {
  1681. min-height: 44px;
  1682. min-width: 44px;
  1683. max-width: 48px;
  1684. margin-bottom: 0;
  1685. max-height: 44px;
  1686. width: 48px; }
  1687. .bar .title + .buttons.buttons-right {
  1688. right: 0;
  1689. top: 0; }
  1690. /* Title Overrides
  1691. ==================================*/
  1692. .title-left,
  1693. .title.title-left {
  1694. left: 48px; }
  1695. .title-right,
  1696. .title.title-right {
  1697. left: 48px; }
  1698. /* Background Colors
  1699. ==================================*/
  1700. .positive-bg,
  1701. .button-positive,
  1702. .bar .button-positive,
  1703. .header-positive,
  1704. .button-bar-positive,
  1705. .bar-positive,
  1706. .positive-border,
  1707. .positive-bg:hover,
  1708. .bar .button-positive:hover,
  1709. .button-positive:hover,
  1710. .header-positive:hover,
  1711. .button-bar-positive:hover,
  1712. .bar-positive:hover,
  1713. .positive-border:hover,
  1714. .positive-bg:active,
  1715. .bar .button-positive:active,
  1716. .button-positive:active,
  1717. .header-positive:active,
  1718. .button-bar-positive:active,
  1719. .bar-positive:active,
  1720. .positive-border:active,
  1721. .positive-bg.activated,
  1722. .bar .button-positive.activated,
  1723. .button-positive.activated,
  1724. .header-positive.activated,
  1725. .button-bar-positive.activated,
  1726. .bar-positive.activated,
  1727. .positive-border.activated {
  1728. background-color: #3F51B5;
  1729. color: #fff; }
  1730. .positive-900-bg,
  1731. .button-positive-900,
  1732. .bar .button-positive-900,
  1733. .header-positive-900,
  1734. .button-bar-positive-900,
  1735. .bar-positive-900,
  1736. .positive-900-border,
  1737. .positive-900-bg:hover,
  1738. .button-positive-900:hover,
  1739. .bar .button-positive-900:hover,
  1740. .header-positive-900:hover,
  1741. .button-bar-positive-900:hover,
  1742. .bar-positive-900:hover,
  1743. .positive-900-border:hover,
  1744. .positive-900-bg:active,
  1745. .bar .button-positive-900:active,
  1746. .button-positive-900:active,
  1747. .header-positive-900:active,
  1748. .button-bar-positive-900:active,
  1749. .bar-positive-900:active,
  1750. .positive-900-border:active,
  1751. .positive-900-bg.activated,
  1752. .button-positive-900.activated,
  1753. .bar .button-positive-900.activated,
  1754. .header-positive-900.activated,
  1755. .button-bar-positive-900.activated,
  1756. .bar-positive-900.activated,
  1757. .positive-900-border.activated {
  1758. background-color: #1A237E;
  1759. color: #fff; }
  1760. .positive-100-bg,
  1761. .button-positive-100,
  1762. .bar .button-positive-100,
  1763. .header-positive-100,
  1764. .button-bar-positive-100,
  1765. .bar-positive-100,
  1766. .positive-100-border,
  1767. .positive-100-bg:hover,
  1768. .button-positive-100:hover,
  1769. .bar .button-positive-100:hover,
  1770. .header-positive-100:hover,
  1771. .button-bar-positive-100:hover,
  1772. .bar-positive-100:hover,
  1773. .positive-100-border:hover,
  1774. .positive-100-bg:active,
  1775. .button-positive-100:active,
  1776. .bar .button-positive-100:active,
  1777. .header-positive-100:active,
  1778. .button-bar-positive-100:active,
  1779. .bar-positive-100:active,
  1780. .positive-100-border:active,
  1781. .positive-100-bg.activated,
  1782. .button-positive-100.activated,
  1783. .bar .button-positive-100.activated,
  1784. .header-positive-100.activated,
  1785. .button-bar-positive-100.activated,
  1786. .bar-positive-100.activated,
  1787. .positive-100-border.activated {
  1788. background-color: #C5CAE9;
  1789. color: #fff; }
  1790. .calm-bg,
  1791. .button-calm,
  1792. .bar .button-calm,
  1793. .header-calm,
  1794. .button-bar-calm,
  1795. .bar-calm,
  1796. .calm-border,
  1797. .calm-bg:hover,
  1798. .button-calm:hover,
  1799. .bar .button-calm:hover,
  1800. .header-calm:hover,
  1801. .button-bar-calm:hover,
  1802. .bar-calm:hover,
  1803. .calm-border:hover,
  1804. .calm-bg:active,
  1805. .button-calm:active,
  1806. .bar .button-calm:active,
  1807. .header-calm:active,
  1808. .button-bar-calm:active,
  1809. .bar-calm:active,
  1810. .calm-border:active,
  1811. .calm-bg.activated,
  1812. .button-calm.activated,
  1813. .bar .button-calm.activated,
  1814. .header-calm.activated,
  1815. .button-bar-calm.activated,
  1816. .bar-calm.activated,
  1817. .calm-border.activated {
  1818. background-color: #2196F3;
  1819. color: #fff; }
  1820. .calm-900-bg,
  1821. .button-calm-900,
  1822. .bar .button-calm-900,
  1823. .header-calm-900,
  1824. .button-bar-calm-900,
  1825. .bar-calm-900,
  1826. .calm-900-border,
  1827. .calm-900-bg:hover,
  1828. .button-calm-900:hover,
  1829. .bar .button-calm-900:hover,
  1830. .header-calm-900:hover,
  1831. .button-bar-calm-900:hover,
  1832. .bar-calm-900:hover,
  1833. .calm-900-border:hover,
  1834. .calm-900-bg:active,
  1835. .button-calm-900:active,
  1836. .bar .button-calm-900:active,
  1837. .header-calm-900:active,
  1838. .button-bar-calm-900:active,
  1839. .bar-calm-900:active,
  1840. .calm-900-border:active,
  1841. .calm-900-bg.activated,
  1842. .button-calm-900.activated,
  1843. .bar .button-calm-900.activated,
  1844. .header-calm-900.activated,
  1845. .button-bar-calm-900.activated,
  1846. .bar-calm-900.activated,
  1847. .calm-900-border.activated {
  1848. background-color: #0D47A1;
  1849. color: #fff; }
  1850. .calm-100-bg,
  1851. .button-calm-100,
  1852. .bar .button-calm-100,
  1853. .header-calm-100,
  1854. .button-bar-calm-100,
  1855. .bar-calm-100,
  1856. .calm-100-border,
  1857. .calm-100-bg:hover,
  1858. .button-calm-100:hover,
  1859. .bar .button-calm-100:hover,
  1860. .header-calm-100:hover,
  1861. .button-bar-calm-100:hover,
  1862. .bar-calm-100:hover,
  1863. .calm-100-border:hover,
  1864. .calm-100-bg:active,
  1865. .button-calm-100:active,
  1866. .bar .button-calm-100:active,
  1867. .header-calm-100:active,
  1868. .button-bar-calm-100:active,
  1869. .bar-calm-100:active,
  1870. .calm-100-border:active,
  1871. .calm-100-bg.activated,
  1872. .button-calm-100.activated,
  1873. .bar .button-calm-100.activated,
  1874. .header-calm-100.activated,
  1875. .button-bar-calm-100.activated,
  1876. .bar-calm-100.activated,
  1877. .calm-100-border.activated {
  1878. background-color: #BBDEFB;
  1879. color: #fff; }
  1880. .royal-bg,
  1881. .button-royal,
  1882. .bar .button-royal,
  1883. .header-royal,
  1884. .button-bar-royal,
  1885. .bar-royal,
  1886. .royal-border,
  1887. .royal-bg:hover,
  1888. .button-royal:hover,
  1889. .bar .button-royal:hover,
  1890. .header-royal:hover,
  1891. .button-bar-royal:hover,
  1892. .bar-royal:hover,
  1893. .royal-border:hover,
  1894. .royal-bg:active,
  1895. .button-royal:active,
  1896. .bar .button-royal:active,
  1897. .header-royal:active,
  1898. .button-bar-royal:active,
  1899. .bar-royal:active,
  1900. .royal-border:active,
  1901. .royal-bg.activated,
  1902. .button-royal.activated,
  1903. .bar .button-royal.activated,
  1904. .header-royal.activated,
  1905. .button-bar-royal.activated,
  1906. .bar-royal.activated,
  1907. .royal-border.activated {
  1908. background-color: #673AB7;
  1909. color: #fff; }
  1910. .royal-900-bg,
  1911. .button-royal-900,
  1912. .bar .button-royal-900,
  1913. .header-royal-900,
  1914. .button-bar-royal-900,
  1915. .bar-royal-900,
  1916. .royal-900-border,
  1917. .royal-900-bg:hover,
  1918. .button-royal-900:hover,
  1919. .bar .button-royal-900:hover,
  1920. .header-royal-900:hover,
  1921. .button-bar-royal-900:hover,
  1922. .bar-royal-900:hover,
  1923. .royal-900-border:hover,
  1924. .royal-900-bg:active,
  1925. .button-royal-900:active,
  1926. .bar .button-royal-900:active,
  1927. .header-royal-900:active,
  1928. .button-bar-royal-900:active,
  1929. .bar-royal-900:active,
  1930. .royal-900-border:active,
  1931. .royal-900-bg.activated,
  1932. .button-royal-900.activated,
  1933. .bar .button-royal-900.activated,
  1934. .header-royal-900.activated,
  1935. .button-bar-royal-900.activated,
  1936. .bar-royal-900.activated,
  1937. .royal-900-border.activated {
  1938. background-color: #311B92;
  1939. color: #fff; }
  1940. .royal-100-bg,
  1941. .button-royal-100,
  1942. .bar .button-royal-100,
  1943. .header-royal-100,
  1944. .button-bar-royal-100,
  1945. .bar-royal-100,
  1946. .royal-100-border,
  1947. .royal-100-bg:hover,
  1948. .button-royal-100:hover,
  1949. .bar .button-royal-100:hover,
  1950. .header-royal-100:hover,
  1951. .button-bar-royal-100:hover,
  1952. .bar-royal-100:hover,
  1953. .royal-100-border:hover,
  1954. .royal-100-bg:active,
  1955. .button-royal-100:active,
  1956. .bar .button-royal-100:active,
  1957. .header-royal-100:active,
  1958. .button-bar-royal-100:active,
  1959. .bar-royal-100:active,
  1960. .royal-100-border:active,
  1961. .royal-100-bg.activated,
  1962. .button-royal-100.activated,
  1963. .bar .button-royal-100.activated,
  1964. .header-royal-100.activated,
  1965. .button-bar-royal-100.activated,
  1966. .bar-royal-100.activated,
  1967. .royal-100-border.activated {
  1968. background-color: #D1C4E9;
  1969. color: #fff; }
  1970. .balanced-bg,
  1971. .button-balanced,
  1972. .bar .button-balanced,
  1973. .header-balanced,
  1974. .button-bar-balanced,
  1975. .bar-balanced,
  1976. .balanced-border,
  1977. .balanced-bg:hover,
  1978. .button-balanced:hover,
  1979. .bar .button-balanced:hover,
  1980. .header-balanced:hover,
  1981. .button-bar-balanced:hover,
  1982. .bar-balanced:hover,
  1983. .balanced-border:hover,
  1984. .balanced-bg:active,
  1985. .button-balanced:active,
  1986. .bar .button-balanced:active,
  1987. .header-balanced:active,
  1988. .button-bar-balanced:active,
  1989. .bar-balanced:active,
  1990. .balanced-border:active,
  1991. .balanced-bg.activated,
  1992. .button-balanced.activated,
  1993. .bar .button-balanced.activated,
  1994. .header-balanced.activated,
  1995. .button-bar-balanced.activated,
  1996. .bar-balanced.activated,
  1997. .balanced-border.activated {
  1998. background-color: #4CAF50;
  1999. color: #fff; }
  2000. .balanced-900-bg,
  2001. .button-balanced-900,
  2002. .bar .button-balanced-900,
  2003. .header-balanced-900,
  2004. .button-bar-balanced-900,
  2005. .bar-balanced-900,
  2006. .balanced-900-border,
  2007. .balanced-900-bg:hover,
  2008. .button-balanced-900:hover,
  2009. .bar .button-balanced-900:hover,
  2010. .header-balanced-900:hover,
  2011. .button-bar-balanced-900:hover,
  2012. .bar-balanced-900:hover,
  2013. .balanced-900-border:hover,
  2014. .balanced-900-bg:active,
  2015. .button-balanced-900:active,
  2016. .bar .button-balanced-900:active,
  2017. .header-balanced-900:active,
  2018. .button-bar-balanced-900:active,
  2019. .bar-balanced-900:active,
  2020. .balanced-900-border:active,
  2021. .balanced-900-bg.activated,
  2022. .button-balanced-900.activated,
  2023. .bar .button-balanced-900.activated,
  2024. .header-balanced-900.activated,
  2025. .button-bar-balanced-900.activated,
  2026. .bar-balanced-900.activated,
  2027. .balanced-900-border.activated {
  2028. background-color: #1B5E20;
  2029. color: #fff; }
  2030. .balanced-100-bg,
  2031. .button-balanced-100,
  2032. .bar .button-balanced-100,
  2033. .header-balanced-100,
  2034. .button-bar-balanced-100,
  2035. .bar-balanced-100,
  2036. .balanced-100-border,
  2037. .balanced-100-bg:hover,
  2038. .button-balanced-100:hover,
  2039. .bar .balanced-100-bg:hover,
  2040. .header-balanced-100:hover,
  2041. .button-bar-balanced-100:hover,
  2042. .bar-balanced-100:hover,
  2043. .balanced-100-border:hover,
  2044. .balanced-100-bg:active,
  2045. .button-balanced-100:active,
  2046. .bar .button-balanced-100:active,
  2047. .header-balanced-100:active,
  2048. .button-bar-balanced-100:active,
  2049. .bar-balanced-100:active,
  2050. .balanced-100-border:active,
  2051. .balanced-100-bg.activated,
  2052. .button-balanced-100.activated,
  2053. .bar .button-balanced-100.activated,
  2054. .header-balanced-100.activated,
  2055. .button-bar-balanced-100.activated,
  2056. .bar-balanced-100.activated,
  2057. .balanced-100-border.activated {
  2058. background-color: #C8E6C9;
  2059. color: #fff; }
  2060. .energized-bg,
  2061. .button-energized,
  2062. .bar .button-energized,
  2063. .header-energized,
  2064. .button-bar-energized,
  2065. .bar-energized,
  2066. .energized-border,
  2067. .energized-bg:hover,
  2068. .button-energized:hover,
  2069. .bar .button-energized:hover,
  2070. .header-energized:hover,
  2071. .button-bar-energized:hover,
  2072. .bar-energized:hover,
  2073. .energized-border:hover,
  2074. .energized-bg:active,
  2075. .button-energized:active,
  2076. .bar .button-energized:active,
  2077. .header-energized:active,
  2078. .button-bar-energized:active,
  2079. .bar-energized:active,
  2080. .energized-border:active,
  2081. .energized-bg.activated,
  2082. .button-energized.activated,
  2083. .bar .button-energized.activated,
  2084. .header-energized.activated,
  2085. .button-bar-energized.activated,
  2086. .bar-energized.activated,
  2087. .energized-border.activated {
  2088. background-color: #FF9800;
  2089. color: #fff; }
  2090. .energized-900-bg,
  2091. .button-energized-900,
  2092. .bar .button-energized-900,
  2093. .header-energized-900,
  2094. .button-bar-energized-900,
  2095. .bar-energized-900,
  2096. .energized-900-border,
  2097. .energized-900-bg:hover,
  2098. .button-energized-900:hover,
  2099. .bar .button-energized-900:hover,
  2100. .header-energized-900:hover,
  2101. .button-bar-energized-900:hover,
  2102. .bar-energized-900:hover,
  2103. .energized-900-border:hover,
  2104. .energized-900-bg:active,
  2105. .button-energized-900:active,
  2106. .bar .button-energized-900:active,
  2107. .header-energized-900:active,
  2108. .button-bar-energized-900:active,
  2109. .bar-energized-900:active,
  2110. .energized-900-border:active,
  2111. .energized-900-bg.activated,
  2112. .button-energized-900.activated,
  2113. .bar .button-energized-900.activated,
  2114. .header-energized-900.activated,
  2115. .button-bar-energized-900.activated,
  2116. .bar-energized-900.activated,
  2117. .energized-900-border.activated {
  2118. background-color: #E65100;
  2119. color: #fff; }
  2120. .energized-100-bg,
  2121. .button-energized-100,
  2122. .bar .button-energized-100,
  2123. .header-energized-100,
  2124. .button-bar-energized-100,
  2125. .bar-energized-100,
  2126. .energized-100-border,
  2127. .energized-100-bg:hover,
  2128. .button-energized-100:hover,
  2129. .bar .button-energized-100:hover,
  2130. .header-energized-100:hover,
  2131. .button-bar-energized-100:hover,
  2132. .bar-energized-100:hover,
  2133. .energized-100-border:hover,
  2134. .energized-100-bg:active,
  2135. .button-energized-100:active,
  2136. .bar .button-energized-100:active,
  2137. .header-energized-100:active,
  2138. .button-bar-energized-100:active,
  2139. .bar-energized-100:active,
  2140. .energized-100-border:active,
  2141. .energized-100-bg.activated,
  2142. .button-energized-100.activated,
  2143. .bar .button-energized-100.activated,
  2144. .header-energized-100.activated,
  2145. .button-bar-energized-100.activated,
  2146. .bar-energized-100.activated,
  2147. .energized-100-border.activated {
  2148. background-color: #FFE0B2; }
  2149. .assertive-bg,
  2150. .button-assertive,
  2151. .bar .button-assertive,
  2152. .header-assertive,
  2153. .button-bar-assertive,
  2154. .bar-assertive,
  2155. .assertive-border,
  2156. .assertive-bg:hover,
  2157. .button-assertive:hover,
  2158. .bar .button-assertive:hover,
  2159. .header-assertive:hover,
  2160. .button-bar-assertive:hover,
  2161. .bar-assertive:hover,
  2162. .assertive-border:hover,
  2163. .assertive-bg:active,
  2164. .button-assertive:active,
  2165. .bar .button-assertive:active,
  2166. .header-assertive:active,
  2167. .button-bar-assertive:active,
  2168. .bar-assertive:active,
  2169. .assertive-border:active,
  2170. .assertive-bg.activated,
  2171. .button-assertive.activated,
  2172. .bar .button-assertive.activated,
  2173. .header-assertive.activated,
  2174. .button-bar-assertive.activated,
  2175. .bar-assertive.activated,
  2176. .assertive-border.activated {
  2177. background-color: #F44336;
  2178. color: #fff; }
  2179. .assertive-900-bg,
  2180. .button-assertive-900,
  2181. .bar .button-assertive-900,
  2182. .header-assertive-900,
  2183. .button-bar-assertive-900,
  2184. .bar-assertive-900,
  2185. .assertive-900-border,
  2186. .assertive-900-bg:hover,
  2187. .button-assertive-900:hover,
  2188. .bar .button-assertive-900:hover,
  2189. .header-assertive-900:hover,
  2190. .button-bar-assertive-900:hover,
  2191. .bar-assertive-900:hover,
  2192. .assertive-900-border:hover,
  2193. .assertive-900-bg:active,
  2194. .button-assertive-900:active,
  2195. .bar .button-assertive-900:active,
  2196. .header-assertive-900:active,
  2197. .button-bar-assertive-900:active,
  2198. .bar-assertive-900:active,
  2199. .assertive-900-border:active,
  2200. .assertive-900-bg.activated,
  2201. .button-assertive-900.activated,
  2202. .bar .button-assertive-900.activated,
  2203. .header-assertive-900.activated,
  2204. .button-bar-assertive-900.activated,
  2205. .bar-assertive-900.activated,
  2206. .assertive-900-border.activated {
  2207. background-color: #B71C1C;
  2208. color: #fff; }
  2209. .assertive-100-bg,
  2210. .button-assertive-100,
  2211. .bar .button-assertive-100,
  2212. .header-assertive-100,
  2213. .button-bar-assertive-100,
  2214. .bar-assertive-100,
  2215. .assertive-100-border,
  2216. .assertive-100-bg:hover,
  2217. .button-assertive-100:hover,
  2218. .bar .button-assertive-100:hover,
  2219. .header-assertive-100:hover,
  2220. .button-bar-assertive-100:hover,
  2221. .bar-assertive-100:hover,
  2222. .assertive-100-border:hover,
  2223. .assertive-100-bg:active,
  2224. .button-assertive-100:active,
  2225. .bar .button-assertive-100:active,
  2226. .header-assertive-100:active,
  2227. .button-bar-assertive-100:active,
  2228. .bar-assertive-100:active,
  2229. .assertive-100-border:active,
  2230. .assertive-100-bg.activated,
  2231. .bar .button-assertive-100.activated,
  2232. .button-assertive-100.activated,
  2233. .header-assertive-100.activated,
  2234. .button-bar-assertive-100.activated,
  2235. .bar-assertive-100.activated,
  2236. .assertive-100-border.activated {
  2237. background-color: #FFCDD2;
  2238. color: #fff; }
  2239. .stable-bg,
  2240. .button-stable,
  2241. .bar .button-stable,
  2242. .header-stable,
  2243. .button-bar-stable,
  2244. .bar-stable,
  2245. .stable-border,
  2246. .stable-bg:hover,
  2247. .button-stable:hover,
  2248. .bar .button-stable:hover,
  2249. .header-stable:hover,
  2250. .button-bar-stable:hover,
  2251. .bar-stable:hover,
  2252. .stable-border:hover,
  2253. .stable-bg:active,
  2254. .button-stable:active,
  2255. .bar .button-stable:active,
  2256. .header-stable:active,
  2257. .button-bar-stable:active,
  2258. .bar-stable:active,
  2259. .stable-border:active,
  2260. .stable-bg.activated,
  2261. .button-stable.activated,
  2262. .bar .button-stable.activated,
  2263. .header-stable.activated,
  2264. .button-bar-stable.activated,
  2265. .bar-stable.activated,
  2266. .stable-border.activated {
  2267. background-color: #E0E0E0;
  2268. color: #fff; }
  2269. /* Text Colors
  2270. ==================================*/
  2271. .positive,
  2272. .positive *,
  2273. *.positive,
  2274. .positive:hover,
  2275. .positive:hover *,
  2276. *.positive:hover,
  2277. .positive:active,
  2278. .positive:active *,
  2279. *.positive:active {
  2280. color: #3F51B5; }
  2281. .positive-900,
  2282. .positive-900 *,
  2283. *.positive-900,
  2284. .positive-900:hover,
  2285. .positive-900:hover *,
  2286. *.positive-900:hover,
  2287. .positive-900:active,
  2288. .positive-900:active *,
  2289. *.positive-900:active {
  2290. color: #3F51B5; }
  2291. .positive-100,
  2292. .positive-100 *,
  2293. *.positive-100,
  2294. .positive-100:hover,
  2295. .positive-100:hover *,
  2296. *.positive-100:hover,
  2297. .positive-100:active,
  2298. .positive-100:active *,
  2299. *.positive-100:active {
  2300. color: #C5CAE9; }
  2301. .calm-100,
  2302. .calm-100 *,
  2303. *.calm-100,
  2304. .calm-100:hover,
  2305. .calm-100:hover *,
  2306. *.calm-100:hover,
  2307. .calm-100:active,
  2308. .calm-100:active *,
  2309. *.calm-100:active {
  2310. color: #2196F3; }
  2311. .calm-900,
  2312. .calm-900 *,
  2313. *.calm-900,
  2314. .calm-900:hover,
  2315. .calm-900:hover *,
  2316. *.calm-900:hover,
  2317. .calm-900:active,
  2318. .calm-900:active *,
  2319. *.calm-900:active {
  2320. color: #0D47A1; }
  2321. .calm-100,
  2322. .calm-100 *,
  2323. *.calm-100,
  2324. .calm-100:hover,
  2325. .calm-100:hover *,
  2326. *.calm-100:hover,
  2327. .calm-100:active,
  2328. .calm-100:active *,
  2329. *.calm-100:active {
  2330. color: #BBDEFB; }
  2331. .royal,
  2332. .royal *,
  2333. *.royal,
  2334. .royal:hover,
  2335. .royal:hover *,
  2336. *.royal:hover,
  2337. .royal:active,
  2338. .royal:active *,
  2339. *.royal:active {
  2340. color: #673AB7; }
  2341. .royal-900,
  2342. .royal-900 *,
  2343. *.royal-900,
  2344. .royal-900:hover,
  2345. .royal-900:hover *,
  2346. *.royal-900:hover,
  2347. .royal-900:active,
  2348. .royal-900:active *,
  2349. *.royal-900:active {
  2350. color: #311B92; }
  2351. .royal-100,
  2352. .royal-100 *,
  2353. *.royal-100,
  2354. .royal-100:hover,
  2355. .royal-100:hover *,
  2356. *.royal-100:hover,
  2357. .royal-100:active,
  2358. .royal-100:active *,
  2359. *.royal-100:active {
  2360. color: #D1C4E9; }
  2361. .balanced,
  2362. .balanced *,
  2363. *.balanced,
  2364. .balanced:hover,
  2365. .balanced:hover *,
  2366. *.balanced:hover,
  2367. .balanced:active,
  2368. .balanced:active *,
  2369. *.balanced:active {
  2370. color: #4CAF50; }
  2371. .balanced-900,
  2372. .balanced-900 *,
  2373. *.balanced-900,
  2374. .balanced-900:hover,
  2375. .balanced-900:hover *,
  2376. *.balanced-900:hover,
  2377. .balanced-900:active,
  2378. .balanced-900:active *,
  2379. *.balanced-900:active {
  2380. color: #1B5E20; }
  2381. .balanced-100,
  2382. .balanced-100 *,
  2383. *.balanced-100,
  2384. .balanced-100:hover,
  2385. .balanced-100:hover *,
  2386. *.balanced-100:hover,
  2387. .balanced-100:active,
  2388. .balanced-100:active *,
  2389. *.balanced-100:active {
  2390. color: #C8E6C9; }
  2391. .energized,
  2392. .energized *,
  2393. *.energized,
  2394. .energized:hover,
  2395. .energized:hover *,
  2396. *.energized:hover,
  2397. .energized:active,
  2398. .energized:active *,
  2399. *.energized:active {
  2400. color: #FF9800; }
  2401. .energized-900,
  2402. .energized-900 *,
  2403. *.energized-900,
  2404. .energized-900:hover,
  2405. .energized-900:hover *,
  2406. *.energized-900:hover,
  2407. .energized-900:active,
  2408. .energized-900:active *,
  2409. *.energized-900:active {
  2410. color: #E65100; }
  2411. .energized-100,
  2412. .energized-100 *,
  2413. *.energized-100,
  2414. .energized-100:hover,
  2415. .energized-100:hover *,
  2416. *.energized-100:hover,
  2417. .energized-100:active,
  2418. .energized-100:active *,
  2419. *.energized-100:active {
  2420. color: #FFE0B2; }
  2421. .assertive,
  2422. .assertive *,
  2423. *.assertive,
  2424. .assertive:hover,
  2425. .assertive:hover *,
  2426. *.assertive:hover,
  2427. .assertive:active,
  2428. .assertive:active *,
  2429. *.assertive:active {
  2430. color: #F44336; }
  2431. .assertive-900,
  2432. .assertive-900 *,
  2433. *.assertive-900,
  2434. .assertive-900:hover,
  2435. .assertive-900:hover *,
  2436. *.assertive-900:hover,
  2437. .assertive-900:active,
  2438. .assertive-900:active *,
  2439. *.assertive-900:active {
  2440. color: #B71C1C; }
  2441. .assertive-100,
  2442. .assertive-100 *,
  2443. *.assertive-100,
  2444. .assertive-100:hover,
  2445. .assertive-100:hover *,
  2446. *.assertive-100:hover,
  2447. .assertive-100:active,
  2448. .assertive-100:active *,
  2449. *.assertive-100:active {
  2450. color: #FFCDD2; }
  2451. .stable,
  2452. .stable *,
  2453. *.stable,
  2454. .stable:hover,
  2455. .stable:hover *,
  2456. *.stable:hover,
  2457. .stable:active,
  2458. .stable:active *,
  2459. *.stable:active {
  2460. color: #E0E0E0; }
  2461. .light,
  2462. .light *,
  2463. *.light,
  2464. .light:hover,
  2465. .light:hover *,
  2466. *.light:hover,
  2467. .light:active,
  2468. .light:active *,
  2469. *.light:active {
  2470. color: #fff; }
  2471. .dark,
  2472. .dark *,
  2473. *.dark,
  2474. .dark:hover,
  2475. .dark:hover *,
  2476. *.dark:hover,
  2477. .dark:active,
  2478. .dark:active *,
  2479. *.dark:active {
  2480. color: #444; }
  2481. .light-border {
  2482. border-color: #ddd; }
  2483. .navbar-default .navbar-nav > li > a {
  2484. margin: 0;
  2485. padding-right: 26px;
  2486. padding-left: 26px;
  2487. border-top: 3px solid transparent;
  2488. color: #BFD5C9;
  2489. opacity: 1; }
  2490. /* Mid-Bar
  2491. ==================================*/
  2492. .mid-bar {
  2493. padding: 16px; }
  2494. .mid-bar h1,
  2495. .mid-bar h2,
  2496. .mid-bar h3,
  2497. .mid-bar h4,
  2498. .mid-bar h5,
  2499. .mid-bar h6 {
  2500. color: #fff;
  2501. margin-bottom: 5px; }
  2502. .mid-bar p {
  2503. color: rgba(255, 255, 255, 0.5);
  2504. margin-bottom: 0; }
  2505. /* Item
  2506. ==================================*/
  2507. .item-avatar,
  2508. .item-avatar .item-content,
  2509. .item-avatar-left,
  2510. .item-avatar-left .item-content,
  2511. .card > .item-avatar {
  2512. padding-left: 95px; }
  2513. .item,
  2514. .item-complex .item-content,
  2515. .item-radio .item-content {
  2516. background-color: transparent; }
  2517. .dark-bg h2,
  2518. .item.dark-bg h2 {
  2519. color: #fff; }
  2520. .tabs-striped .tabs {
  2521. box-shadow: 0px 2px 5px 0 rgba(0, 0, 0, 0.26); }
  2522. .bar .button.button-clear {
  2523. color: #fff; }
  2524. .bar .button.button-icon .icon:before,
  2525. .bar .button.button-icon.icon-left:before,
  2526. .bar .button.button-icon.icon-right:before,
  2527. .bar .button.button-icon:before {
  2528. vertical-align: top;
  2529. font-size: 24px; }
  2530. .menu {
  2531. background-color: transparent; }
  2532. .button-icon.button.active,
  2533. .button-icon.button.activated {
  2534. opacity: initial; }
  2535. /* Popover
  2536. ==================================*/
  2537. .popover {
  2538. opacity: 0;
  2539. position: absolute;
  2540. right: 8px;
  2541. transform: translate(50%, -50%) scale(0, 0);
  2542. transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
  2543. top: 8px; }
  2544. .popover.ng-enter {
  2545. opacity: 1;
  2546. transform: translate(0, -14px) scale(1, 1);
  2547. transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out; }
  2548. .popover.ng-leave {
  2549. opacity: 0;
  2550. transform: translate(50%, -50%) scale(0, 0);
  2551. transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out; }
  2552. /* Button
  2553. ==================================*/
  2554. .button {
  2555. overflow: hidden !important; }