/* Box colors */ .bg-1 { background:#ECEFF1; color:#37474f; } /* Common button styles */ .button { float:left; min-width:150px; max-width:250px; display:block; margin:1em; padding:1em 2em; border:none; background:none; color:inherit; vertical-align:middle; position:relative; z-index:1; -webkit-backface-visibility:hidden; -moz-osx-font-smoothing:grayscale; } .button:focus { outline:none; } .button > span { vertical-align:middle; } /* Text color adjustments (we could stick to the "inherit" but that does not work well in Safari) */ .bg-1 .button { color:#37474f; border-color:#37474f; } .button--round-s { border-radius:5px; } .button--quidel { background:#aebbff; color:#7986cb; overflow:hidden; -webkit-transition:color 0.3s; transition:color 0.3s; -webkit-transition-timing-function:cubic-bezier(0.75,0,0.125,1); transition-timing-function:cubic-bezier(0.75,0,0.125,1); } .button--quidel.button--inverted { background:#fff; color:#fff; } .button--quidel::before,.button--quidel::after { content:''; position:absolute; z-index:-1; border-radius:inherit; } .button--quidel::after { top:2px; left:2px; right:2px; bottom:2px; background:#fff; } .button--quidel.button--inverted::after { background:#37474f; } .button--quidel::before { background:#37474f; top:0; left:0; width:100%; height:100%; -webkit-transform:translate3d(0,100%,0); transform:translate3d(0,100%,0); -webkit-transition:-webkit-transform 0.3s; transition:transform 0.3s; -webkit-transition-timing-function:cubic-bezier(0.75,0,0.125,1); transition-timing-function:cubic-bezier(0.75,0,0.125,1); } .button--quidel.button--inverted::before { background:#7986cb; } .button--round-s.button--quidel::after { border-radius:3px; } .button--round-m.button--quidel::after { border-radius:13px; } .button--round-l.button--quidel::after { border-radius:40px; } .button--quidel > span { padding-left:0.35em; } .button--quidel:hover { color:#37474f; } .button--quidel.button--inverted:hover { color:#7986cb; } .button--quidel:hover::before { -webkit-transform:translate3d(0,0,0); transform:translate3d(0,0,0); }