/** Variables **/ $white: #FFF; $black: #252525; $light-grey: #EEE; $grey: #CCC; $dark-grey: #999; $light-blue: #79bde6; $blue: #4591bf; $dark-blue: #366988; $light-red: #ff7575; $red: #da4242; $dark-red: #af3535; $light-green: #6ed06c; $green: #51cc50; $dark-green: #409c3f; $br: 2px; body { font-family: sans-serif; } * { box-sizing: border-box; } #pb-container, .pb-backdrop { transition: ease 0.25s; a, button, input, textarea, select, div { transition: ease 0.25s; } } .pb-toast { transition: ease 0.25s; a, button, input, textarea, select, div { transition: ease 0.25s; } } .pb-backdrop { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 97; opacity: 0; background: rgba(0, 0, 0, 0.8); &[data-show] { opacity: 1; } } #pb-container { display: inline-block; position: fixed; top: 40vh; left: 0; right: 0; max-width: 375px; transform: scale(0); margin: { top: -50px; right: auto; left: auto; } padding: 1em; border-radius: $br; background: $white; border-bottborder-bottom: 4px solid $grey; z-index: 99; &.absolute { margin-top: 40vh; } input { display: block; width: 100%; padding: 0.5em; margin-bottom: 1em; border: 1px solid $light-grey; font-size: 1em; border-radius: $br; &:focus, &:active { outline: none; border-color: $grey; } } &[data-show] { transform: scale(1); } } .pb-toast { display: inline-block; position: fixed; left: 0; right: 0; transform: scale(0); width: 400px; margin: { right: auto; left: auto; } padding: 1em; color: $white; border-radius: $br; text-align: center; z-index: 98; &.top { top: 0.25em; } &.bottom { bottom: 0.25em; } &.success { background: $blue; } &.error { background: $red; } &.info { color: $black; background: $light-grey; } &.show { transform: scale(1); } &.gone { transform: scale(0); } &[data-close="true"] { padding-right: 3em; } .toast-close { position: absolute;; right: 0.75em; top: 50%; margin-top: -13.5px; text-decoration: none; font-size: 24px; color: rgba(0, 0, 0, 0.5); } } .pb-message { font-size: 1.05em; margin: 0 0 0.75em; } .pb-buttons { button { display: inline-block; background: $light-grey; border-radius: $br; border: none; padding: 0.5em 1em; color: #222; font-size: 1em; outline: none; overflow: hidden; cursor: pointer; box-shadow: none; font-size: 14px; &:focus { box-shadow: 0 0 0 3px #FFFFFF, 0 0 0px 5px rgba(0, 0, 0, 0.2); } &:hover { background: $grey; } &:not(:only-of-type):last-of-type { float: right; background: $blue; color: $white; &:focus { box-shadow: 0 0 0 3px #FFFFFF, 0 0 0px 5px rgba(69, 145, 191, 0.5); } &:hover { background: $dark-blue; } &[disabled] { opacity: 0.5; background: none; border-color: $grey; color: $dark-grey; cursor: not-allowed; } } } }