Skip to content

Instantly share code, notes, and snippets.

@flymke

flymke/input.scss

Created April 12, 2021 23:03
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save flymke/808ed3a425f6e272b5eabfe741191380 to your computer and use it in GitHub Desktop.
Save flymke/808ed3a425f6e272b5eabfe741191380 to your computer and use it in GitHub Desktop.
Download ZIP
Generated by SassMeister.com.
Raw
input.scss
$primary: '#555';
$grey: '#eee';
$grid-breakpoints: (
xs: 0,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px
);
@function breakpoint-min($name, $breakpoints: $grid-breakpoints) {
$min: map-get($breakpoints, $name);
@return if($min != 0, $min, null);
}
@function breakpoint-max($name, $breakpoints: $grid-breakpoints) {
$max: map-get($breakpoints, $name);
@return if($max and $max > 0, $max - .02, null);
}
// Media of at least the minimum breakpoint width. No query for the smallest breakpoint.
// Makes the @content apply to the given breakpoint and wider.
@mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) {
$min: breakpoint-min($name, $breakpoints);
@if $min {
@media (min-width: $min) {
@content;
}
} @else {
@content;
}
}
// Media of at most the maximum breakpoint width. No query for the largest breakpoint.
// Makes the @content apply to the given breakpoint and narrower.
@mixin media-breakpoint-down($name, $breakpoints: $grid-breakpoints) {
$max: breakpoint-max($name, $breakpoints);
@if $max {
@media (max-width: $max) {
@content;
}
} @else {
@content;
}
}
/* START */
/* Single Termin */
.single-termin .entry-content {
h2 {
@extend h1;
font-weight:300 !important;
color:$primary !important;
strong {
font-weight:500;
}
}
h1 {
font-weight:400;
color:$grey;
span {
color:$grey !important;
}
}
h1 + .subtitle {
margin-top: -30px;
font-size: 28px;
color:$primary;
margin-bottom: 30px;
}
p strong {
color:$primary;
}
@include media-breakpoint-down(lg) {
.img-fluid {
max-width:100% !important;
}
}
.table-termine {
margin-bottom:40px;
}
}
.termin-content {
h4 {
margin:0 0 3px 0;
font-size:16px;
}
}
.termin-expert_bild {
float:left;
max-width:240px;
margin-right:25px;
@include media-breakpoint-down(sm) {
float:none;
margin-bottom:15px;
}
}
.termin-expert_titel {
text-transform:uppercase;
color:$primary;
}
.termin-expert_name {
font-weight:300;
margin-top:25px;
}
.termin-meta {
text-align: right;
display: inline-block;
float: right;
border-bottom: 1px solid $primary;
padding-bottom: 20px;
@include media-breakpoint-down(md) {
float: none;
text-align:center;
display: flex;
flex-direction: column;
}
@include media-breakpoint-down(sm) {
text-align:left;
display:block;
}
.cat {
text-transform:uppercase;
}
h2.title {
font-size:inherit;
font-weight:500 !important;
margin-bottom:0 !important;
}
}
.termin-btn {
background-color: #4990e2;
color: #fff;
text-transform: uppercase;
box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.12), 0 2px 2px 0 rgba(0, 0, 0, 0.24);
border-radius: 0;
border: 0;
display: inline-block;
text-align: center;
line-height: normal;
width: 100%;
padding: 10px;
margin-bottom: 15px;
min-width:210px;
&:hover {
text-decoration:none;
color:#fff;
}
}
.termin-cat-thumb {
position:relative;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
> span {
position:absolute;
display: inline-block;
color: #fff;
font-weight: 400;
text-transform: uppercase;
font-size: 32px;
border-bottom: 2px solid $primary;
}
}
h5.anmeldung-titel {
text-align: left !important;
text-transform: none !important;
width: 100% !important;
}
h5 + .subtitle {
margin-top: 5px;
font-size: 20px;
color: #ff760f;
margin-bottom: 30px;
}
.single-termin .mauticform_wrapper {
max-width:100%;
margin-top:35px;
}
/* Table termine */
.sortable {
position:relative;
&:after {
content: "\f0dc";
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
position:absolute;
right:5px;
top:8px;
}
&.descending {
&:after {
content: "\f0dd";
}
}
&.ascending {
&:after {
content: "\f0de";
}
}
}
.table-termine {
margin-bottom:25px;
@include media-breakpoint-up(md) {
display:table !important;
}
th {
background: rgb(254, 240, 229);
color:$primary;
border:0 !important;
border-right:2px solid #fff !important;
padding: 4px 17px 4px 10px;
font-size:14px;
&.last-child {
border-right:0 !important;
}
text-transform:uppercase;
}
td {
border:0;
padding: 15px 0 5px 10px;
font-weight:300;
border-bottom: 1px solid #ff760f;
h2 {
font-size: inherit;
margin-bottom: 0;
line-height:inherit;
a {
color:inherit;
}
}
}
.termin-cat-thumb {
width:122px;
margin-left:-10px;
> span {
font-size:13px;
}
overflow:hidden;
img {
transition:all 300ms linear;
}
&:hover img {
transform:scale(1.1);
}
}
.termin-btn {
margin-bottom:5px;
&.termin-btn-mobile {
padding: 5px 10px;
margin: 10px 0 0 -10px;
font-size: 13px;
min-width: 1px;
width: auto;
}
}
.termin-btn-linkonly {
margin-bottom:5px;
display:block;
text-align:center;
}
.termin-teaser-content {
min-height:104px;
padding-right:10px;
}
.d-lg-block {
@include media-breakpoint-up(lg) {
display:table-cell !important;
}
}
}
// SWIPE ELEMENT ------------
.swipe {
display: inline-block;
@include media-breakpoint-up(md) {
display:none;
}
color: $primary;
margin:0 0 5px 5px;
font-size:20px;
-moz-animation-name: swipe;
-webkit-animation-name: swipe;
animation-name: swipe;
-moz-animation-duration: 2700ms;
-webkit-animation-duration: 2700ms;
animation-duration: 2700ms;
-moz-animation-delay: 250ms;
-webkit-animation-delay: 250ms;
animation-delay: 250ms;
-moz-animation-timing-function: linear;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-moz-animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
.swipe .fa-long-arrow-left,
.swipe .fa-long-arrow-right {
font-size: 0.65em;
color: $primary;
}
.swipe .fa-long-arrow-left {
-moz-transform: scaleX(0.75) skew(20deg) translateY(-0.9em) translateX(1.25em);
-ms-transform: scaleX(0.75) skew(20deg) translateY(-0.9em) translateX(1.25em);
-webkit-transform: scaleX(0.75) skew(20deg) translateY(-0.9em) translateX(1.25em);
transform: scaleX(0.75) skew(20deg) translateY(-0.9em) translateX(1.25em);
}
.swipe .fa-long-arrow-right {
-moz-transform: scaleX(0.75) skew(20deg) translateY(-0.9em) translateX(-0.95em);
-ms-transform: scaleX(0.75) skew(20deg) translateY(-0.9em) translateX(-0.95em);
-webkit-transform: scaleX(0.75) skew(20deg) translateY(-0.9em) translateX(-0.95em);
transform: scaleX(0.75) skew(20deg) translateY(-0.9em) translateX(-0.95em);
}
.swipe .fa-hand-o-up {
-moz-transform: scaleY(1.2);
-ms-transform: scaleY(1.2);
-webkit-transform: scaleY(1.2);
transform: scaleY(1.2);
-moz-animation-name: swipe-rotate;
-webkit-animation-name: swipe-rotate;
animation-name: swipe-rotate;
-moz-animation-duration: 2700ms;
-webkit-animation-duration: 2700ms;
animation-duration: 2700ms;
-moz-animation-delay: 250ms;
-webkit-animation-delay: 250ms;
animation-delay: 250ms;
-moz-animation-timing-function: linear;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-moz-animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
@-moz-keyframes swipe {
0% {
-moz-transform: translateX(0);
transform: translateX(0);
}
10% {
-moz-transform: translateX(-0.1em);
transform: translateX(-0.1em);
}
20% {
-moz-transform: translateX(0.1em);
transform: translateX(0.1em);
}
30% {
-moz-transform: translateX(-0.1em);
transform: translateX(-0.1em);
}
40% {
-moz-transform: translateX(0.1em);
transform: translateX(0.1em);
}
50% {
-moz-transform: translateX(0);
transform: translateX(0);
}
100% {
-moz-transform: translateX(0);
transform: translateX(0);
}
}
@-webkit-keyframes swipe {
0% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
10% {
-webkit-transform: translateX(-0.1em);
transform: translateX(-0.1em);
}
20% {
-webkit-transform: translateX(0.1em);
transform: translateX(0.1em);
}
30% {
-webkit-transform: translateX(-0.1em);
transform: translateX(-0.1em);
}
40% {
-webkit-transform: translateX(0.1em);
transform: translateX(0.1em);
}
50% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
@keyframes swipe {
0% {
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-webkit-transform: translateX(0);
transform: translateX(0);
}
10% {
-moz-transform: translateX(-0.1em);
-ms-transform: translateX(-0.1em);
-webkit-transform: translateX(-0.1em);
transform: translateX(-0.1em);
}
20% {
-moz-transform: translateX(0.1em);
-ms-transform: translateX(0.1em);
-webkit-transform: translateX(0.1em);
transform: translateX(0.1em);
}
30% {
-moz-transform: translateX(-0.1em);
-ms-transform: translateX(-0.1em);
-webkit-transform: translateX(-0.1em);
transform: translateX(-0.1em);
}
40% {
-moz-transform: translateX(0.1em);
-ms-transform: translateX(0.1em);
-webkit-transform: translateX(0.1em);
transform: translateX(0.1em);
}
50% {
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-webkit-transform: translateX(0);
transform: translateX(0);
}
100% {
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
@-moz-keyframes swipe-rotate {
0% {
-moz-transform: scaleY(1.2) skew(0);
transform: scaleY(1.2) skew(0);
}
10% {
-moz-transform: scaleY(1.2) skew(5deg);
transform: scaleY(1.2) skew(5deg);
}
20% {
-moz-transform: scaleY(1.2) skew(-5deg);
transform: scaleY(1.2) skew(-5deg);
}
30% {
-moz-transform: scaleY(1.2) skew(5deg);
transform: scaleY(1.2) skew(5deg);
}
40% {
-moz-transform: scaleY(1.2) skew(-5deg);
transform: scaleY(1.2) skew(-5deg);
}
50% {
-moz-transform: scaleY(1.2) skew(0);
transform: scaleY(1.2) skew(0);
}
100% {
-moz-transform: scaleY(1.2) skew(0);
transform: scaleY(1.2) skew(0);
}
}
@-webkit-keyframes swipe-rotate {
0% {
-webkit-transform: scaleY(1.2) skew(0);
transform: scaleY(1.2) skew(0);
}
10% {
-webkit-transform: scaleY(1.2) skew(5deg);
transform: scaleY(1.2) skew(5deg);
}
20% {
-webkit-transform: scaleY(1.2) skew(-5deg);
transform: scaleY(1.2) skew(-5deg);
}
30% {
-webkit-transform: scaleY(1.2) skew(5deg);
transform: scaleY(1.2) skew(5deg);
}
40% {
-webkit-transform: scaleY(1.2) skew(-5deg);
transform: scaleY(1.2) skew(-5deg);
}
50% {
-webkit-transform: scaleY(1.2) skew(0);
transform: scaleY(1.2) skew(0);
}
100% {
-webkit-transform: scaleY(1.2) skew(0);
transform: scaleY(1.2) skew(0);
}
}
@keyframes swipe-rotate {
0% {
-moz-transform: scaleY(1.2) skew(0);
-ms-transform: scaleY(1.2) skew(0);
-webkit-transform: scaleY(1.2) skew(0);
transform: scaleY(1.2) skew(0);
}
10% {
-moz-transform: scaleY(1.2) skew(5deg);
-ms-transform: scaleY(1.2) skew(5deg);
-webkit-transform: scaleY(1.2) skew(5deg);
transform: scaleY(1.2) skew(5deg);
}
20% {
-moz-transform: scaleY(1.2) skew(-5deg);
-ms-transform: scaleY(1.2) skew(-5deg);
-webkit-transform: scaleY(1.2) skew(-5deg);
transform: scaleY(1.2) skew(-5deg);
}
30% {
-moz-transform: scaleY(1.2) skew(5deg);
-ms-transform: scaleY(1.2) skew(5deg);
-webkit-transform: scaleY(1.2) skew(5deg);
transform: scaleY(1.2) skew(5deg);
}
40% {
-moz-transform: scaleY(1.2) skew(-5deg);
-ms-transform: scaleY(1.2) skew(-5deg);
-webkit-transform: scaleY(1.2) skew(-5deg);
transform: scaleY(1.2) skew(-5deg);
}
50% {
-moz-transform: scaleY(1.2) skew(0);
-ms-transform: scaleY(1.2) skew(0);
-webkit-transform: scaleY(1.2) skew(0);
transform: scaleY(1.2) skew(0);
}
100% {
-moz-transform: scaleY(1.2) skew(0);
-ms-transform: scaleY(1.2) skew(0);
-webkit-transform: scaleY(1.2) skew(0);
transform: scaleY(1.2) skew(0);
}
}
Raw
output.css
@charset "UTF-8";
/* START */
/* Single Termin */
.single-termin .entry-content h2 {
font-weight: 300 !important;
color: "#555" !important;
}
.single-termin .entry-content h2 strong {
font-weight: 500;
}
.single-termin .entry-content h1, .single-termin .entry-content h2 {
font-weight: 400;
color: "#eee";
}
.single-termin .entry-content h1 span, .single-termin .entry-content h2 span {
color: "#eee" !important;
}
.single-termin .entry-content h1 + .subtitle, .single-termin .entry-content h2 + .subtitle {
margin-top: -30px;
font-size: 28px;
color: "#555";
margin-bottom: 30px;
}
.single-termin .entry-content p strong {
color: "#555";
}
@media (max-width: 991.98px) {
.single-termin .entry-content .img-fluid {
max-width: 100% !important;
}
}
.single-termin .entry-content .table-termine {
margin-bottom: 40px;
}
.termin-content h4 {
margin: 0 0 3px 0;
font-size: 16px;
}
.termin-expert_bild {
float: left;
max-width: 240px;
margin-right: 25px;
}
@media (max-width: 575.98px) {
.termin-expert_bild {
float: none;
margin-bottom: 15px;
}
}
.termin-expert_titel {
text-transform: uppercase;
color: "#555";
}
.termin-expert_name {
font-weight: 300;
margin-top: 25px;
}
.termin-meta {
text-align: right;
display: inline-block;
float: right;
border-bottom: 1px solid "#555";
padding-bottom: 20px;
}
@media (max-width: 767.98px) {
.termin-meta {
float: none;
text-align: center;
display: flex;
flex-direction: column;
}
}
@media (max-width: 575.98px) {
.termin-meta {
text-align: left;
display: block;
}
}
.termin-meta .cat {
text-transform: uppercase;
}
.termin-meta h2.title {
font-size: inherit;
font-weight: 500 !important;
margin-bottom: 0 !important;
}
.termin-btn {
background-color: #4990e2;
color: #fff;
text-transform: uppercase;
box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.12), 0 2px 2px 0 rgba(0, 0, 0, 0.24);
border-radius: 0;
border: 0;
display: inline-block;
text-align: center;
line-height: normal;
width: 100%;
padding: 10px;
margin-bottom: 15px;
min-width: 210px;
}
.termin-btn:hover {
text-decoration: none;
color: #fff;
}
.termin-cat-thumb {
position: relative;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
.termin-cat-thumb > span {
position: absolute;
display: inline-block;
color: #fff;
font-weight: 400;
text-transform: uppercase;
font-size: 32px;
border-bottom: 2px solid "#555";
}
h5.anmeldung-titel {
text-align: left !important;
text-transform: none !important;
width: 100% !important;
}
h5 + .subtitle {
margin-top: 5px;
font-size: 20px;
color: #ff760f;
margin-bottom: 30px;
}
.single-termin .mauticform_wrapper {
max-width: 100%;
margin-top: 35px;
}
/* Table termine */
.sortable {
position: relative;
}
.sortable:after {
content: "";
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
position: absolute;
right: 5px;
top: 8px;
}
.sortable.descending:after {
content: "";
}
.sortable.ascending:after {
content: "";
}
.table-termine {
margin-bottom: 25px;
}
@media (min-width: 768px) {
.table-termine {
display: table !important;
}
}
.table-termine th {
background: #fef0e5;
color: "#555";
border: 0 !important;
border-right: 2px solid #fff !important;
padding: 4px 17px 4px 10px;
font-size: 14px;
text-transform: uppercase;
}
.table-termine th.last-child {
border-right: 0 !important;
}
.table-termine td {
border: 0;
padding: 15px 0 5px 10px;
font-weight: 300;
border-bottom: 1px solid #ff760f;
}
.table-termine td h2 {
font-size: inherit;
margin-bottom: 0;
line-height: inherit;
}
.table-termine td h2 a {
color: inherit;
}
.table-termine .termin-cat-thumb {
width: 122px;
margin-left: -10px;
overflow: hidden;
}
.table-termine .termin-cat-thumb > span {
font-size: 13px;
}
.table-termine .termin-cat-thumb img {
transition: all 300ms linear;
}
.table-termine .termin-cat-thumb:hover img {
transform: scale(1.1);
}
.table-termine .termin-btn {
margin-bottom: 5px;
}
.table-termine .termin-btn.termin-btn-mobile {
padding: 5px 10px;
margin: 10px 0 0 -10px;
font-size: 13px;
min-width: 1px;
width: auto;
}
.table-termine .termin-btn-linkonly {
margin-bottom: 5px;
display: block;
text-align: center;
}
.table-termine .termin-teaser-content {
min-height: 104px;
padding-right: 10px;
}
@media (min-width: 992px) {
.table-termine .d-lg-block {
display: table-cell !important;
}
}
.swipe {
display: inline-block;
color: "#555";
margin: 0 0 5px 5px;
font-size: 20px;
-moz-animation-name: swipe;
-webkit-animation-name: swipe;
animation-name: swipe;
-moz-animation-duration: 2700ms;
-webkit-animation-duration: 2700ms;
animation-duration: 2700ms;
-moz-animation-delay: 250ms;
-webkit-animation-delay: 250ms;
animation-delay: 250ms;
-moz-animation-timing-function: linear;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-moz-animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
@media (min-width: 768px) {
.swipe {
display: none;
}
}
.swipe .fa-long-arrow-left,
.swipe .fa-long-arrow-right {
font-size: 0.65em;
color: "#555";
}
.swipe .fa-long-arrow-left {
-moz-transform: scaleX(0.75) skew(20deg) translateY(-0.9em) translateX(1.25em);
-ms-transform: scaleX(0.75) skew(20deg) translateY(-0.9em) translateX(1.25em);
-webkit-transform: scaleX(0.75) skew(20deg) translateY(-0.9em) translateX(1.25em);
transform: scaleX(0.75) skew(20deg) translateY(-0.9em) translateX(1.25em);
}
.swipe .fa-long-arrow-right {
-moz-transform: scaleX(0.75) skew(20deg) translateY(-0.9em) translateX(-0.95em);
-ms-transform: scaleX(0.75) skew(20deg) translateY(-0.9em) translateX(-0.95em);
-webkit-transform: scaleX(0.75) skew(20deg) translateY(-0.9em) translateX(-0.95em);
transform: scaleX(0.75) skew(20deg) translateY(-0.9em) translateX(-0.95em);
}
.swipe .fa-hand-o-up {
-moz-transform: scaleY(1.2);
-ms-transform: scaleY(1.2);
-webkit-transform: scaleY(1.2);
transform: scaleY(1.2);
-moz-animation-name: swipe-rotate;
-webkit-animation-name: swipe-rotate;
animation-name: swipe-rotate;
-moz-animation-duration: 2700ms;
-webkit-animation-duration: 2700ms;
animation-duration: 2700ms;
-moz-animation-delay: 250ms;
-webkit-animation-delay: 250ms;
animation-delay: 250ms;
-moz-animation-timing-function: linear;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-moz-animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
@-moz-keyframes swipe {
0% {
-moz-transform: translateX(0);
transform: translateX(0);
}
10% {
-moz-transform: translateX(-0.1em);
transform: translateX(-0.1em);
}
20% {
-moz-transform: translateX(0.1em);
transform: translateX(0.1em);
}
30% {
-moz-transform: translateX(-0.1em);
transform: translateX(-0.1em);
}
40% {
-moz-transform: translateX(0.1em);
transform: translateX(0.1em);
}
50% {
-moz-transform: translateX(0);
transform: translateX(0);
}
100% {
-moz-transform: translateX(0);
transform: translateX(0);
}
}
@-webkit-keyframes swipe {
0% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
10% {
-webkit-transform: translateX(-0.1em);
transform: translateX(-0.1em);
}
20% {
-webkit-transform: translateX(0.1em);
transform: translateX(0.1em);
}
30% {
-webkit-transform: translateX(-0.1em);
transform: translateX(-0.1em);
}
40% {
-webkit-transform: translateX(0.1em);
transform: translateX(0.1em);
}
50% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
@keyframes swipe {
0% {
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-webkit-transform: translateX(0);
transform: translateX(0);
}
10% {
-moz-transform: translateX(-0.1em);
-ms-transform: translateX(-0.1em);
-webkit-transform: translateX(-0.1em);
transform: translateX(-0.1em);
}
20% {
-moz-transform: translateX(0.1em);
-ms-transform: translateX(0.1em);
-webkit-transform: translateX(0.1em);
transform: translateX(0.1em);
}
30% {
-moz-transform: translateX(-0.1em);
-ms-transform: translateX(-0.1em);
-webkit-transform: translateX(-0.1em);
transform: translateX(-0.1em);
}
40% {
-moz-transform: translateX(0.1em);
-ms-transform: translateX(0.1em);
-webkit-transform: translateX(0.1em);
transform: translateX(0.1em);
}
50% {
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-webkit-transform: translateX(0);
transform: translateX(0);
}
100% {
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
@-moz-keyframes swipe-rotate {
0% {
-moz-transform: scaleY(1.2) skew(0);
transform: scaleY(1.2) skew(0);
}
10% {
-moz-transform: scaleY(1.2) skew(5deg);
transform: scaleY(1.2) skew(5deg);
}
20% {
-moz-transform: scaleY(1.2) skew(-5deg);
transform: scaleY(1.2) skew(-5deg);
}
30% {
-moz-transform: scaleY(1.2) skew(5deg);
transform: scaleY(1.2) skew(5deg);
}
40% {
-moz-transform: scaleY(1.2) skew(-5deg);
transform: scaleY(1.2) skew(-5deg);
}
50% {
-moz-transform: scaleY(1.2) skew(0);
transform: scaleY(1.2) skew(0);
}
100% {
-moz-transform: scaleY(1.2) skew(0);
transform: scaleY(1.2) skew(0);
}
}
@-webkit-keyframes swipe-rotate {
0% {
-webkit-transform: scaleY(1.2) skew(0);
transform: scaleY(1.2) skew(0);
}
10% {
-webkit-transform: scaleY(1.2) skew(5deg);
transform: scaleY(1.2) skew(5deg);
}
20% {
-webkit-transform: scaleY(1.2) skew(-5deg);
transform: scaleY(1.2) skew(-5deg);
}
30% {
-webkit-transform: scaleY(1.2) skew(5deg);
transform: scaleY(1.2) skew(5deg);
}
40% {
-webkit-transform: scaleY(1.2) skew(-5deg);
transform: scaleY(1.2) skew(-5deg);
}
50% {
-webkit-transform: scaleY(1.2) skew(0);
transform: scaleY(1.2) skew(0);
}
100% {
-webkit-transform: scaleY(1.2) skew(0);
transform: scaleY(1.2) skew(0);
}
}
@keyframes swipe-rotate {
0% {
-moz-transform: scaleY(1.2) skew(0);
-ms-transform: scaleY(1.2) skew(0);
-webkit-transform: scaleY(1.2) skew(0);
transform: scaleY(1.2) skew(0);
}
10% {
-moz-transform: scaleY(1.2) skew(5deg);
-ms-transform: scaleY(1.2) skew(5deg);
-webkit-transform: scaleY(1.2) skew(5deg);
transform: scaleY(1.2) skew(5deg);
}
20% {
-moz-transform: scaleY(1.2) skew(-5deg);
-ms-transform: scaleY(1.2) skew(-5deg);
-webkit-transform: scaleY(1.2) skew(-5deg);
transform: scaleY(1.2) skew(-5deg);
}
30% {
-moz-transform: scaleY(1.2) skew(5deg);
-ms-transform: scaleY(1.2) skew(5deg);
-webkit-transform: scaleY(1.2) skew(5deg);
transform: scaleY(1.2) skew(5deg);
}
40% {
-moz-transform: scaleY(1.2) skew(-5deg);
-ms-transform: scaleY(1.2) skew(-5deg);
-webkit-transform: scaleY(1.2) skew(-5deg);
transform: scaleY(1.2) skew(-5deg);
}
50% {
-moz-transform: scaleY(1.2) skew(0);
-ms-transform: scaleY(1.2) skew(0);
-webkit-transform: scaleY(1.2) skew(0);
transform: scaleY(1.2) skew(0);
}
100% {
-moz-transform: scaleY(1.2) skew(0);
-ms-transform: scaleY(1.2) skew(0);
-webkit-transform: scaleY(1.2) skew(0);
transform: scaleY(1.2) skew(0);
}
}
Raw
settings.json
{
"sass": {
"compiler": "dart-sass/1.26.11",
"extensions": {},
"syntax": "SCSS",
"outputStyle": "expanded"
},
"autoprefixer": false
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment