Vortrag für GIT angefangen.
This commit is contained in:
Tim Schumacher
parent
61165635cd
commit
40e34e4a91
60 changed files with 8603 additions and 0 deletions
43
git/themes/transition/fade.css
Normal file
43
git/themes/transition/fade.css
Normal file
|
|
@ -0,0 +1,43 @@
|
|||
.csstransitions.csstransforms .deck-container .slide {
|
||||
-webkit-transition: opacity 500ms ease-in-out 0ms;
|
||||
-moz-transition: opacity 500ms ease-in-out 0ms;
|
||||
-ms-transition: opacity 500ms ease-in-out 0ms;
|
||||
-o-transition: opacity 500ms ease-in-out 0ms;
|
||||
transition: opacity 500ms ease-in-out 0ms;
|
||||
}
|
||||
.csstransitions.csstransforms .deck-container:not(.deck-menu) > .slide {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
padding: 0 48px;
|
||||
}
|
||||
.csstransitions.csstransforms .deck-container:not(.deck-menu) > .slide .slide {
|
||||
position: relative;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
.csstransitions.csstransforms .deck-container:not(.deck-menu) > .slide .deck-next, .csstransitions.csstransforms .deck-container:not(.deck-menu) > .slide .deck-after {
|
||||
opacity: 0;
|
||||
}
|
||||
.csstransitions.csstransforms .deck-container:not(.deck-menu) > .slide .deck-current {
|
||||
opacity: 1;
|
||||
}
|
||||
.csstransitions.csstransforms .deck-container:not(.deck-menu) > .deck-previous, .csstransitions.csstransforms .deck-container:not(.deck-menu) > .deck-before, .csstransitions.csstransforms .deck-container:not(.deck-menu) > .deck-next, .csstransitions.csstransforms .deck-container:not(.deck-menu) > .deck-after {
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
.csstransitions.csstransforms .deck-container:not(.deck-menu) > .deck-before .slide, .csstransitions.csstransforms .deck-container:not(.deck-menu) > .deck-previous .slide {
|
||||
visibility: visible;
|
||||
}
|
||||
.csstransitions.csstransforms .deck-container:not(.deck-menu) > .deck-child-current {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
pointer-events: auto;
|
||||
}
|
||||
.csstransitions.csstransforms .deck-container:not(.deck-menu) > .deck-child-current .deck-next, .csstransitions.csstransforms .deck-container:not(.deck-menu) > .deck-child-current .deck-after {
|
||||
visibility: hidden;
|
||||
}
|
||||
69
git/themes/transition/fade.scss
Normal file
69
git/themes/transition/fade.scss
Normal file
|
|
@ -0,0 +1,69 @@
|
|||
@mixin translate($x: 0, $y: 0, $z: 0) {
|
||||
-webkit-transform:translate3d($x, $y, $z);
|
||||
-moz-transform:translate($x, $y);
|
||||
-ms-transform:translate($x, $y);
|
||||
-o-transform:translate($x, $y);
|
||||
transform:translate3d($x, $y, $z);
|
||||
}
|
||||
|
||||
@mixin transition($prop, $duration, $easing: ease-in-out, $delay: 0ms) {
|
||||
-webkit-transition:$prop $duration $easing $delay;
|
||||
-moz-transition:$prop $duration $easing $delay;
|
||||
-ms-transition:$prop $duration $easing $delay;
|
||||
-o-transition:$prop $duration $easing $delay;
|
||||
transition:$prop $duration $easing $delay;
|
||||
}
|
||||
|
||||
.csstransitions.csstransforms {
|
||||
.deck-container .slide {
|
||||
@include transition(opacity, 500ms);
|
||||
}
|
||||
|
||||
.deck-container:not(.deck-menu) {
|
||||
> .slide {
|
||||
position:absolute;
|
||||
top:0;
|
||||
left:0;
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
width:100%;
|
||||
padding:0 48px;
|
||||
|
||||
.slide {
|
||||
position:relative;
|
||||
left:0;
|
||||
top:0;
|
||||
}
|
||||
|
||||
.deck-next, .deck-after {
|
||||
opacity:0;
|
||||
}
|
||||
|
||||
.deck-current {
|
||||
opacity:1;
|
||||
}
|
||||
}
|
||||
|
||||
> .deck-previous, > .deck-before, > .deck-next, > .deck-after {
|
||||
opacity:0;
|
||||
pointer-events:none;
|
||||
}
|
||||
|
||||
> .deck-before, > .deck-previous {
|
||||
.slide {
|
||||
visibility:visible;
|
||||
}
|
||||
}
|
||||
|
||||
> .deck-child-current {
|
||||
opacity:1;
|
||||
visibility:visible;
|
||||
pointer-events:auto;
|
||||
|
||||
.deck-next, .deck-after {
|
||||
visibility:hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
76
git/themes/transition/horizontal-slide.css
Normal file
76
git/themes/transition/horizontal-slide.css
Normal file
|
|
@ -0,0 +1,76 @@
|
|||
.csstransitions.csstransforms {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
.csstransitions.csstransforms .deck-container > .slide {
|
||||
-webkit-transition: -webkit-transform 500ms ease-in-out;
|
||||
-moz-transition: -moz-transform 500ms ease-in-out;
|
||||
-ms-transition: -ms-transform 500ms ease-in-out;
|
||||
-o-transition: -o-transform 500ms ease-in-out;
|
||||
transition: transform 500ms ease-in-out;
|
||||
}
|
||||
.csstransitions.csstransforms .deck-container:not(.deck-menu) > .slide {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
padding: 0 48px;
|
||||
}
|
||||
.csstransitions.csstransforms .deck-container:not(.deck-menu) > .slide .slide {
|
||||
position: relative;
|
||||
left: 0;
|
||||
top: 0;
|
||||
-webkit-transition: -webkit-transform 500ms ease-in-out, opacity 500ms ease-in-out;
|
||||
-moz-transition: -moz-transform 500ms ease-in-out, opacity 500ms ease-in-out;
|
||||
-ms-transition: -ms-transform 500ms ease-in-out, opacity 500ms ease-in-out;
|
||||
-o-transition: -o-transform 500ms ease-in-out, opacity 500ms ease-in-out;
|
||||
transition: -webkit-transform 500ms ease-in-out, opacity 500ms ease-in-out;
|
||||
}
|
||||
.csstransitions.csstransforms .deck-container:not(.deck-menu) > .slide .deck-next, .csstransitions.csstransforms .deck-container:not(.deck-menu) > .slide .deck-after {
|
||||
visibility: visible;
|
||||
-webkit-transform: translate3d(200%, 0, 0);
|
||||
-moz-transform: translate(200%, 0);
|
||||
-ms-transform: translate(200%, 0);
|
||||
-o-transform: translate(200%, 0);
|
||||
transform: translate3d(200%, 0, 0);
|
||||
}
|
||||
.csstransitions.csstransforms .deck-container:not(.deck-menu) > .deck-previous {
|
||||
-webkit-transform: translate3d(-200%, 0, 0);
|
||||
-moz-transform: translate(-200%, 0);
|
||||
-ms-transform: translate(-200%, 0);
|
||||
-o-transform: translate(-200%, 0);
|
||||
transform: translate3d(-200%, 0, 0);
|
||||
}
|
||||
.csstransitions.csstransforms .deck-container:not(.deck-menu) > .deck-before {
|
||||
-webkit-transform: translate3d(-400%, 0, 0);
|
||||
-moz-transform: translate(-400%, 0);
|
||||
-ms-transform: translate(-400%, 0);
|
||||
-o-transform: translate(-400%, 0);
|
||||
transform: translate3d(-400%, 0, 0);
|
||||
}
|
||||
.csstransitions.csstransforms .deck-container:not(.deck-menu) > .deck-next {
|
||||
-webkit-transform: translate3d(200%, 0, 0);
|
||||
-moz-transform: translate(200%, 0);
|
||||
-ms-transform: translate(200%, 0);
|
||||
-o-transform: translate(200%, 0);
|
||||
transform: translate3d(200%, 0, 0);
|
||||
}
|
||||
.csstransitions.csstransforms .deck-container:not(.deck-menu) > .deck-after {
|
||||
-webkit-transform: translate3d(400%, 0, 0);
|
||||
-moz-transform: translate(400%, 0);
|
||||
-ms-transform: translate(400%, 0);
|
||||
-o-transform: translate(400%, 0);
|
||||
transform: translate3d(400%, 0, 0);
|
||||
}
|
||||
.csstransitions.csstransforms .deck-container:not(.deck-menu) > .deck-before .slide, .csstransitions.csstransforms .deck-container:not(.deck-menu) > .deck-previous .slide {
|
||||
visibility: visible;
|
||||
}
|
||||
.csstransitions.csstransforms .deck-container:not(.deck-menu) > .deck-child-current {
|
||||
-webkit-transform: none;
|
||||
-moz-transform: none;
|
||||
-ms-transform: none;
|
||||
-o-transform: none;
|
||||
transform: none;
|
||||
}
|
||||
90
git/themes/transition/horizontal-slide.scss
Normal file
90
git/themes/transition/horizontal-slide.scss
Normal file
|
|
@ -0,0 +1,90 @@
|
|||
@mixin translate($x: 0, $y: 0, $z: 0) {
|
||||
-webkit-transform:translate3d($x, $y, $z);
|
||||
-moz-transform:translate($x, $y);
|
||||
-ms-transform:translate($x, $y);
|
||||
-o-transform:translate($x, $y);
|
||||
transform:translate3d($x, $y, $z);
|
||||
}
|
||||
|
||||
@mixin transition($prop, $duration, $easing: ease-in-out, $delay: 0ms) {
|
||||
-webkit-transition:$prop $duration $easing $delay;
|
||||
-moz-transition:$prop $duration $easing $delay;
|
||||
-ms-transition:$prop $duration $easing $delay;
|
||||
-o-transition:$prop $duration $easing $delay;
|
||||
transition:$prop $duration $easing $delay;
|
||||
}
|
||||
|
||||
@mixin transform($val) {
|
||||
-webkit-transform:$val;
|
||||
-moz-transform:$val;
|
||||
-ms-transform:$val;
|
||||
-o-transform:$val;
|
||||
transform:$val;
|
||||
}
|
||||
|
||||
.csstransitions.csstransforms {
|
||||
overflow-x:hidden;
|
||||
|
||||
.deck-container > .slide {
|
||||
-webkit-transition:-webkit-transform 500ms ease-in-out;
|
||||
-moz-transition:-moz-transform 500ms ease-in-out;
|
||||
-ms-transition:-ms-transform 500ms ease-in-out;
|
||||
-o-transition:-o-transform 500ms ease-in-out;
|
||||
transition:transform 500ms ease-in-out;
|
||||
}
|
||||
|
||||
.deck-container:not(.deck-menu) {
|
||||
> .slide {
|
||||
position:absolute;
|
||||
top:0;
|
||||
left:0;
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
width:100%;
|
||||
padding:0 48px;
|
||||
|
||||
.slide {
|
||||
position:relative;
|
||||
left:0;
|
||||
top:0;
|
||||
-webkit-transition:-webkit-transform 500ms ease-in-out, opacity 500ms ease-in-out;
|
||||
-moz-transition:-moz-transform 500ms ease-in-out, opacity 500ms ease-in-out;
|
||||
-ms-transition:-ms-transform 500ms ease-in-out, opacity 500ms ease-in-out;
|
||||
-o-transition:-o-transform 500ms ease-in-out, opacity 500ms ease-in-out;
|
||||
transition:-webkit-transform 500ms ease-in-out, opacity 500ms ease-in-out;
|
||||
}
|
||||
|
||||
.deck-next, .deck-after {
|
||||
visibility:visible;
|
||||
@include translate(200%);
|
||||
}
|
||||
}
|
||||
|
||||
> .deck-previous {
|
||||
@include translate(-200%);
|
||||
}
|
||||
|
||||
> .deck-before {
|
||||
@include translate(-400%);
|
||||
}
|
||||
|
||||
> .deck-next {
|
||||
@include translate(200%);
|
||||
}
|
||||
|
||||
> .deck-after {
|
||||
@include translate(400%);
|
||||
}
|
||||
|
||||
> .deck-before, > .deck-previous {
|
||||
.slide {
|
||||
visibility:visible;
|
||||
}
|
||||
}
|
||||
|
||||
> .deck-child-current {
|
||||
@include transform(none);
|
||||
}
|
||||
}
|
||||
}
|
||||
94
git/themes/transition/vertical-slide.css
Normal file
94
git/themes/transition/vertical-slide.css
Normal file
|
|
@ -0,0 +1,94 @@
|
|||
.csstransitions.csstransforms .deck-container {
|
||||
overflow-y: hidden;
|
||||
}
|
||||
.csstransitions.csstransforms .deck-container > .slide {
|
||||
-webkit-transition: -webkit-transform 500ms ease-in-out;
|
||||
-moz-transition: -moz-transform 500ms ease-in-out;
|
||||
-ms-transition: -ms-transform 500ms ease-in-out;
|
||||
-o-transition: -o-transform 500ms ease-in-out;
|
||||
transition: transform 500ms ease-in-out;
|
||||
}
|
||||
.csstransitions.csstransforms .deck-container:not(.deck-menu) > .slide {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
padding: 0 48px;
|
||||
}
|
||||
.csstransitions.csstransforms .deck-container:not(.deck-menu) > .slide .slide {
|
||||
position: relative;
|
||||
left: 0;
|
||||
top: 0;
|
||||
-webkit-transition: -webkit-transform 500ms ease-in-out, opacity 500ms ease-in-out;
|
||||
-moz-transition: -moz-transform 500ms ease-in-out, opacity 500ms ease-in-out;
|
||||
-ms-transition: -ms-transform 500ms ease-in-out, opacity 500ms ease-in-out;
|
||||
-o-transition: -o-transform 500ms ease-in-out, opacity 500ms ease-in-out;
|
||||
transition: -webkit-transform 500ms ease-in-out, opacity 500ms ease-in-out;
|
||||
}
|
||||
.csstransitions.csstransforms .deck-container:not(.deck-menu) > .slide .deck-next, .csstransitions.csstransforms .deck-container:not(.deck-menu) > .slide .deck-after {
|
||||
visibility: visible;
|
||||
-webkit-transform: translate3d(0, 1600px, 0);
|
||||
-moz-transform: translate(0, 1600px);
|
||||
-ms-transform: translate(0, 1600px);
|
||||
-o-transform: translate(0, 1600px);
|
||||
transform: translate3d(0, 1600px, 0);
|
||||
}
|
||||
.csstransitions.csstransforms .deck-container:not(.deck-menu) > .deck-previous {
|
||||
-webkit-transform: translate3d(0, -200%, 0);
|
||||
-moz-transform: translate(0, -200%);
|
||||
-ms-transform: translate(0, -200%);
|
||||
-o-transform: translate(0, -200%);
|
||||
transform: translate3d(0, -200%, 0);
|
||||
}
|
||||
.csstransitions.csstransforms .deck-container:not(.deck-menu) > .deck-before {
|
||||
-webkit-transform: translate3d(0, -400%, 0);
|
||||
-moz-transform: translate(0, -400%);
|
||||
-ms-transform: translate(0, -400%);
|
||||
-o-transform: translate(0, -400%);
|
||||
transform: translate3d(0, -400%, 0);
|
||||
}
|
||||
.csstransitions.csstransforms .deck-container:not(.deck-menu) > .deck-next {
|
||||
-webkit-transform: translate3d(0, 200%, 0);
|
||||
-moz-transform: translate(0, 200%);
|
||||
-ms-transform: translate(0, 200%);
|
||||
-o-transform: translate(0, 200%);
|
||||
transform: translate3d(0, 200%, 0);
|
||||
}
|
||||
.csstransitions.csstransforms .deck-container:not(.deck-menu) > .deck-after {
|
||||
-webkit-transform: translate3d(0, 400%, 0);
|
||||
-moz-transform: translate(0, 400%);
|
||||
-ms-transform: translate(0, 400%);
|
||||
-o-transform: translate(0, 400%);
|
||||
transform: translate3d(0, 400%, 0);
|
||||
}
|
||||
.csstransitions.csstransforms .deck-container:not(.deck-menu) > .deck-before .slide, .csstransitions.csstransforms .deck-container:not(.deck-menu) > .deck-previous .slide {
|
||||
visibility: visible;
|
||||
}
|
||||
.csstransitions.csstransforms .deck-container:not(.deck-menu) > .deck-child-current {
|
||||
-webkit-transform: none;
|
||||
-moz-transform: none;
|
||||
-ms-transform: none;
|
||||
-o-transform: none;
|
||||
transform: none;
|
||||
}
|
||||
.csstransitions.csstransforms .deck-prev-link {
|
||||
left: auto;
|
||||
right: 8px;
|
||||
top: 59px;
|
||||
-webkit-transform: rotate(90deg);
|
||||
-moz-transform: rotate(90deg);
|
||||
-ms-transform: rotate(90deg);
|
||||
-o-transform: rotate(90deg);
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
.csstransitions.csstransforms .deck-next-link {
|
||||
top: 99px;
|
||||
-webkit-transform: rotate(90deg);
|
||||
-moz-transform: rotate(90deg);
|
||||
-ms-transform: rotate(90deg);
|
||||
-o-transform: rotate(90deg);
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
112
git/themes/transition/vertical-slide.scss
Normal file
112
git/themes/transition/vertical-slide.scss
Normal file
|
|
@ -0,0 +1,112 @@
|
|||
@mixin translate($x: 0, $y: 0, $z: 0) {
|
||||
-webkit-transform:translate3d($x, $y, $z);
|
||||
-moz-transform:translate($x, $y);
|
||||
-ms-transform:translate($x, $y);
|
||||
-o-transform:translate($x, $y);
|
||||
transform:translate3d($x, $y, $z);
|
||||
}
|
||||
|
||||
@mixin rotate($deg) {
|
||||
-webkit-transform:rotate($deg);
|
||||
-moz-transform:rotate($deg);
|
||||
-ms-transform:rotate($deg);
|
||||
-o-transform:rotate($deg);
|
||||
transform:rotate($deg);
|
||||
}
|
||||
|
||||
@mixin transition($prop, $duration, $easing: ease-in-out, $delay: 0ms) {
|
||||
-webkit-transition:$prop $duration $easing $delay;
|
||||
-moz-transition:$prop $duration $easing $delay;
|
||||
-ms-transition:$prop $duration $easing $delay;
|
||||
-o-transition:$prop $duration $easing $delay;
|
||||
transition:$prop $duration $easing $delay;
|
||||
}
|
||||
|
||||
@mixin transform($val) {
|
||||
-webkit-transform:$val;
|
||||
-moz-transform:$val;
|
||||
-ms-transform:$val;
|
||||
-o-transform:$val;
|
||||
transform:$val;
|
||||
}
|
||||
|
||||
.csstransitions.csstransforms {
|
||||
.deck-container {
|
||||
overflow-y:hidden;
|
||||
|
||||
> .slide {
|
||||
-webkit-transition:-webkit-transform 500ms ease-in-out;
|
||||
-moz-transition:-moz-transform 500ms ease-in-out;
|
||||
-ms-transition:-ms-transform 500ms ease-in-out;
|
||||
-o-transition:-o-transform 500ms ease-in-out;
|
||||
transition:transform 500ms ease-in-out;
|
||||
}
|
||||
}
|
||||
|
||||
.deck-container:not(.deck-menu) {
|
||||
> .slide {
|
||||
position:absolute;
|
||||
top:0;
|
||||
left:0;
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
width:100%;
|
||||
padding:0 48px;
|
||||
|
||||
.slide {
|
||||
position:relative;
|
||||
left:0;
|
||||
top:0;
|
||||
-webkit-transition:-webkit-transform 500ms ease-in-out, opacity 500ms ease-in-out;
|
||||
-moz-transition:-moz-transform 500ms ease-in-out, opacity 500ms ease-in-out;
|
||||
-ms-transition:-ms-transform 500ms ease-in-out, opacity 500ms ease-in-out;
|
||||
-o-transition:-o-transform 500ms ease-in-out, opacity 500ms ease-in-out;
|
||||
transition:-webkit-transform 500ms ease-in-out, opacity 500ms ease-in-out;
|
||||
}
|
||||
|
||||
.deck-next, .deck-after {
|
||||
visibility:visible;
|
||||
@include translate(0, 1600px);
|
||||
}
|
||||
}
|
||||
|
||||
> .deck-previous {
|
||||
@include translate(0, -200%);
|
||||
}
|
||||
|
||||
> .deck-before {
|
||||
@include translate(0, -400%);
|
||||
}
|
||||
|
||||
> .deck-next {
|
||||
@include translate(0, 200%);
|
||||
}
|
||||
|
||||
> .deck-after {
|
||||
@include translate(0, 400%);
|
||||
}
|
||||
|
||||
> .deck-before, > .deck-previous {
|
||||
.slide {
|
||||
visibility:visible;
|
||||
}
|
||||
}
|
||||
|
||||
> .deck-child-current {
|
||||
@include transform(none);
|
||||
}
|
||||
}
|
||||
|
||||
.deck-prev-link {
|
||||
left:auto;
|
||||
right:8px;
|
||||
top:59px;
|
||||
@include rotate(90deg);
|
||||
}
|
||||
|
||||
.deck-next-link {
|
||||
top:99px;
|
||||
@include rotate(90deg);
|
||||
}
|
||||
}
|
||||
Reference in a new issue