|
|
@@ -0,0 +1,75 @@
|
|
|
+@import '~mixins';
|
|
|
+@import '~variables';
|
|
|
+
|
|
|
+.annoy-button-wrapper {
|
|
|
+ height: 100px;
|
|
|
+ text-align: center;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .button-annoy {
|
|
|
+ display: block;
|
|
|
+ margin: 0 auto;
|
|
|
+ background: none;
|
|
|
+ outline: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ &:not(.loading) {
|
|
|
+ .button-annoy {
|
|
|
+ $grey: desaturate(#800015, 90%);
|
|
|
+
|
|
|
+ font-size: 2em;
|
|
|
+ outline: none;
|
|
|
+ color: white;
|
|
|
+ text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.7), 1px 1px 1px rgba(255, 255, 255, 0.3);
|
|
|
+ display: block;
|
|
|
+ padding: 23px 37px 25px 35px;
|
|
|
+ cursor: pointer;
|
|
|
+ background-color: #2e050c;
|
|
|
+ background-image: linear-gradient(273deg, #eb4763 30%, #e6193c 40%);
|
|
|
+ border: none;
|
|
|
+ border-radius: 16px;
|
|
|
+ box-shadow:
|
|
|
+ inset 0px 0px 1px 1px rgba(138, 15, 36, 0.9),
|
|
|
+ inset 0px 0px 2px 3px rgba(230, 25, 60, 0.9),
|
|
|
+ inset 1px 1px 1px 4px rgba(255, 255, 255, 0.8),
|
|
|
+ inset 0px 0px 2px 7px rgba(235, 71, 99, 0.8),
|
|
|
+ inset 0px 0px 4px 10px rgba(230, 25, 60, 0.9),
|
|
|
+ 8px 10px 2px 6px rgba(92, 10, 24, 0.55),
|
|
|
+ 0px 0px 3px 2px rgba(184, 20, 48, 0.9),
|
|
|
+ 0px 0px 2px 6px rgba(230, 25, 60, 0.9),
|
|
|
+ -1px -px 1px 6px rgba(255, 255, 255, 0.9),
|
|
|
+ 0px 0px 2px 11px rgba(230, 25, 60, 0.9),
|
|
|
+ 0px 0px 1px 12px rgba(184, 20, 48, 0.9),
|
|
|
+ 1px 3px 14px 14px rgba(0, 0, 0, 0.4);
|
|
|
+
|
|
|
+ &:active {
|
|
|
+ color: rgb(217, 217, 217);
|
|
|
+ padding: 26px 34px 22px 38px;
|
|
|
+ background-image: linear-gradient(273deg, rgb(230, 25, 60) 50%, rgb(232, 48, 79) 60%);
|
|
|
+ box-shadow:
|
|
|
+ inset 3px 4px 3px 2px hsla(350,80%,20%,0.55),
|
|
|
+ inset 0px 0px 1px 1px hsla(350,80%,30%,0.9),
|
|
|
+ inset -1px -1px 2px 3px hsla(350,80%,50%,0.9),
|
|
|
+ inset -2px -2px 1px 3px hsla(350,80%,100%,0.8),
|
|
|
+ inset 0px 0px 2px 7px hsla(350,80%,60%,0.8),
|
|
|
+ inset 0px 0px 3px 10px hsla(350,80%,50%,0.9),
|
|
|
+
|
|
|
+ 0px 0px 3px 2px hsla(350,80%,40%,0.9),
|
|
|
+ 0px 0px 2px 6px hsla(350,80%,50%,0.9),
|
|
|
+ /*0px 0px 2px 3px hsla(350,80%,60%,0.9),*/
|
|
|
+ -1px -1px 1px 6px hsla(350,80%,100%,0.9),
|
|
|
+ /*0px 0px 2px 8px hsla(350,80%,60%,0.9),*/
|
|
|
+ 0px 0px 2px 11px hsla(350,80%,50%,0.9),
|
|
|
+ 0px 0px 1px 12px hsla(350,80%,40%,0.9),
|
|
|
+ 1px 3px 14px 14px hsla(350,80%,0%,0.4);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &.loading {
|
|
|
+ .button-annoy {
|
|
|
+ @include loading-spinner(86px, red, 1/6);
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
