twisterarmy
/
theme_nin
mirror of https://github.com/twisterarmy/theme_nin.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

More cleaning & templating

nin-v2
Mylene 9 years ago
parent
87d65143a1
commit
b6bc99aade
11 changed files with 633 additions and 518 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 608
      css/style.css
  2. 32
      js/theme_option.js
  3. 15
      sass/base/_commons.sass
  4. 22
      sass/base/_utils.sass
  5. 10
      sass/base/_var.sass
  6. 31
      sass/layout/_dm.sass
  7. 6
      sass/layout/_menu.sass
  8. 66
      sass/layout/_modal.sass
  9. 43
      sass/layout/_postboard.sass
  10. 15
      sass/layout/_profile.sass
  11. 287
      sass/style.sass

608
css/style.css
View File

File diff suppressed because it is too large Load Diff

32
js/theme_option.js
Unescape View File

@ -1,26 +1,27 @@
$(document).ready(function()
$(window).resize(function()
{ {
var windowHeight = $(window).height();
//$('.right').css('height', windowHeight - 100);
$('.module.who-to-follow').detach().appendTo($('.dashboard.right')); $('.module.who-to-follow').detach().appendTo($('.dashboard.right'));
$('.module.twistday-reminder').detach().appendTo($('.dashboard.right')); $('.module.twistday-reminder').detach().appendTo($('.dashboard.right'));
}); });
$(window).resize(function()
$(document).ready(function()
{ {
var windowHeight = $(window).height();
//$('.right').css('height', windowHeight - 100);
$('.module.who-to-follow').detach().appendTo($('.dashboard.right')); $('.module.who-to-follow').detach().appendTo($('.dashboard.right'));
$('.module.twistday-reminder').detach().appendTo($('.dashboard.right')); $('.module.twistday-reminder').detach().appendTo($('.dashboard.right'));
});
$(function(){
var windowHeight = $(window).height(); var windowHeight = $(window).height();
$('.modal-close').html(''); $('.modal-close').html('');
//$('.right').css('height', windowHeight - 100); //$('.mini-profile .open-following-page').parent('li').detach().appendTo($('.mini-profile-indicators'));
$('.mini-profile .open-following-page').parent('li').detach().appendTo($('.mini-profile-indicators'));
$('.modal-back').html(''); $('.modal-back').html('');
$('.twister-user-remove').html(''); $('.twister-user-remove').html('');
$('.profile-card-main').attr('style', ''); $('.profile-card-main').attr('style', '');
@ -40,6 +41,7 @@ $(function(){
$( ".promoted-posts-only").click(function() { $( ".promoted-posts-only").click(function() {
// modify the way promoted posts are shown // modify the way promoted posts are shown
//active promoted posts tab //active promoted posts tab
@ -66,6 +68,10 @@ $(function(){
$(document).ready(localizeLabels); $(document).ready(localizeLabels);
$('<div></div>').appendTo('.postboard-loading');
$('<div></div>').appendTo('.postboard-loading');
$('<div></div>').appendTo('.postboard-loading');
}); });
@ -100,7 +106,9 @@ function openModal(modal) {
.append(modal.content); .append(modal.content);
else else
modal.content = modal.self.find('.modal-content'); modal.content = modal.self.find('.modal-content');
modal.self.prependTo('body').fadeIn('fast'); modal.postboard = modal.self.find('.postboard-posts');
modal.self.prependTo('body').fadeIn('slow');
if (modal.classBase === '.modal-wrapper') { if (modal.classBase === '.modal-wrapper') {

15
sass/base/_commons.sass
Unescape View File

@ -14,7 +14,7 @@ html, body
html html
font-size: $global-font-size font-size: $global-font-size
background-color: $main-background-color background-color: $main-background-color
+background-image(linear-gradient(to top right, #fff, $main-background-color, #fff) ) //+background-image(linear-gradient(to top right, #fff, $main-background-color, #fff) )
background-attachment: fixed background-attachment: fixed
body body
@ -22,6 +22,7 @@ body
line-height : $main-line-height line-height : $main-line-height
font-family : $main-font-family font-family : $main-font-family
font-weight: 400 font-weight: 400
overflow-y: scroll
@ -71,6 +72,18 @@ textarea, input
display: block display: block
border: none border: none
samp
background: #eee
font-size: .9rem
line-height: .9rem
display: inline-block
padding: 5px 8px
+border-radius(2px)
color: #333
font-weight: 500
font-family: monospace
/* isFollowing */ /* isFollowing */
.isFollowing:after .isFollowing:after

22
sass/base/_utils.sass
Unescape View File

@ -2,7 +2,8 @@
.box-shadow .box-shadow
+box-shadow(0 8px 13px rgba(#333, .1)) +box-shadow(0 8px 13px rgba(#111, 0))
.clear-fix .clear-fix
&:after // clearfix &:after // clearfix
@ -21,7 +22,6 @@ button, a.button
letter-spacing: 0.07rem letter-spacing: 0.07rem
font-size: .75rem font-size: .75rem
position: relative position: relative
z-index: 10
font-weight: 300 font-weight: 300
margin: 2px margin: 2px
text-transform: uppercase text-transform: uppercase
@ -42,21 +42,21 @@ button, a.button
color: #666 color: #666
+box-shadow(1px 1px 0 rgba(#444, .3)) +box-shadow(1px 1px 0 rgba(#444, .3))
&.color-1 &.color-1
background: $main-color-color background: #5E80A2
border-color: darken($main-color-color, 5%) border-color: darken(#5E80A2, 5%)
color: white color: white
font-weight: 500 font-weight: 500
&:hover &:hover
border-color: darken($main-color-color, 15%) border-color: darken(#5E80A2, 15%)
&.color-2 &.color-2
background: #C3C3C3 background: #64676C
border-color: darken(#C3C3C3, 5%) border-color: darken(#64676C, 5%)
color: white color: white
font-weight: 500 font-weight: 500
&:hover &:hover
border-color: darken(#C3C3C3, 15%) border-color: darken(#64676C, 15%)
&.small &.small
padding: .3rem .5rem padding: .5rem
font-weight: 700 font-weight: 700
font-size: .6rem font-size: .7rem
line-height: .6rem line-height: .7rem

10
sass/base/_var.sass
Unescape View File

@ -32,7 +32,7 @@ $space : 1rem
// colors // colors
$light-grey: #C3C3C3 $light-grey: #C3C3C3
$color-green: #B4C669 $color-green: #A1B775
$color-red: #EF5D43 $color-red: #EF5D43
$color-blue: #39434F $color-blue: #39434F
$dark-grey : #444 $dark-grey : #444
@ -41,14 +41,14 @@ $dark-grey : #444
$main-color-light: #aaa $main-color-light: #aaa
$main-color-dark: #222 $main-color-dark: #222
$main-color-color: $color-green $main-color-color: $color-green
$main-background-color: lighten($light-grey, 10% ) $main-background-color: #EBEBEB
$bloc-light-color : lighten($light-grey, 20% ) $bloc-light-color : #FDFCFA
$bloc-background-color: white $bloc-background-color: #EBEBEB
$defaut-font-color: $dark-grey $defaut-font-color: $dark-grey
$global-font-size : 15px $global-font-size : 14px
$main-font-size : 1rem $main-font-size : 1rem
$main-line-height : 1.4rem $main-line-height : 1.4rem

31
sass/layout/_dm.sass
Unescape View File

@ -6,11 +6,11 @@
.post-area-new .post-area-new
display: none display: none
z-index: 5 z-index: 5
background: $main-background-color background: $main-color-dark !important
position: absolute position: absolute
bottom: 0 bottom: 0
width: 100% width: 100% !important
padding: 0!important padding: 20px!important
.modal-header .modal-header
h3 span h3 span
display: inline-block!important display: inline-block!important
@ -21,14 +21,14 @@
.modal-content .modal-content
+box-sizing(border-box) +box-sizing(border-box)
width: 100% width: 100%
background: #f0f0f0
.post-photo .post-photo
height: 48px height: 48px
width: 48px width: 48px
.post-text .post-text
margin-left: 58px margin-left: 58px
font-size: .9em font-size: .9rem
.post-info-name .post-info-name
float: none float: none
.post-info-tag .post-info-tag
@ -60,13 +60,19 @@
.direct-messages-list .direct-messages-list
.post:hover:after .post:hover:after
display: block display: block
.post:hover
background: white
li li
position: relative position: relative
border-bottom: 1px solid $main-background-color border-bottom: 1px solid $main-background-color
.direct-messages-thread .direct-messages-thread
padding-bottom: 150px padding-bottom: 180px
max-width: 420px
margin: auto
li li
position: relative position: relative!important
.post .post
@extend .clear-fix @extend .clear-fix
background: none background: none
@ -78,7 +84,8 @@
display: block display: block
text-align: center text-align: center
font-size: 10px font-size: 10px
margin: 10px 0 padding-top: 10px
margin-bottom: 10px
cursor: default cursor: default
position: static position: static
&:hover &:hover
@ -108,18 +115,18 @@
position: relative position: relative
display: inline-block display: inline-block
max-width: 300px max-width: 300px
font-size: .9em font-size: .9rem
padding: 5px 10px padding: 5px 10px
z-index: 4 z-index: 4
float: left float: left
word-wrap: break-word word-wrap: break-word
max-width: 60% max-width: 70%
min-height: 15px min-height: 48px
.post-photo .post-photo
position: absolute position: absolute
left: 0 left: 0
top: 10px top: 35px

6
sass/layout/_menu.sass
Unescape View File

@ -9,15 +9,15 @@ $menu-font-color: white
height: $menu-height height: $menu-height
left: 0 left: 0
margin: 0 margin: 0
background-color: lighten($main-color-dark,10%) background-color: #64676C
//+background-image(radial-gradient(at top , $color-green,$color-blue) ) //+background-image(linear-gradient(to left , $color-green, $color-green, #5E80A2) )
z-index: 2 z-index: 2
ul ul
@extend .clear-fix @extend .clear-fix
+box-sizing(border-box) +box-sizing(border-box)
width: 100% width: 100%
max-width: 75% max-width: 70%
margin: 0 margin: 0
background: image-url("logo.png") no-repeat 50% 50% background: image-url("logo.png") no-repeat 50% 50%
background-size: 20px background-size: 20px

66
sass/layout/_modal.sass
Unescape View File

@ -9,9 +9,9 @@ $header-modal-height : $menu-height
.modal-wrapper .modal-wrapper
background: white background: $bloc-background-color
z-index: 3000 z-index: 3000
width: 25% width: 30%
position: fixed position: fixed
+box-sizing(border-box) +box-sizing(border-box)
@extend .box-shadow @extend .box-shadow
@ -19,6 +19,11 @@ $header-modal-height : $menu-height
right: 0 right: 0
bottom: 0 bottom: 0
overflow: hidden overflow: hidden
.postboard
border: none
padding: 0
.post-area-new .post-area-new
padding: 10px padding: 10px
@ -36,14 +41,15 @@ $header-modal-height : $menu-height
overflow: hidden overflow: hidden
overflow-y: auto overflow-y: auto
.postboard-news .postboard-news
position: absolute position: fixed
display: block display: block
right: 0 right: 2px
z-index: 20 top: $header-modal-height +2
z-index: 2000
@extend .color-1 @extend .color-1
h2 span h2 span
display: none display: none
background: $bloc-light-color background: $bloc-background-color
@ -51,7 +57,7 @@ $header-modal-height : $menu-height
.modal-header .modal-header
position: relative position: relative
background: $main-color-dark background: darken(#64676C,12%)
height: $header-modal-height height: $header-modal-height
+box-sizing(border-box) +box-sizing(border-box)
@extend .clear-fix @extend .clear-fix
@ -102,19 +108,12 @@ $header-modal-height : $menu-height
position: relative position: relative
width: 100% width: 100%
margin: auto margin: auto
background: $main-background-color background: $bloc-background-color
h2 h2
display: block display: block
.post-text
margin: 0 0 0 40px
.post-photo
width: 30px
height: 30px
img
width: 100%
height: 100%
//+border-radius(50%)
@ -132,8 +131,7 @@ $header-modal-height : $menu-height
.modal-buttons .modal-buttons
padding: 10px padding: 10px
text-align: right text-align: right
button:last-child
padding: 5px 20px
/************ FOLLOWING-CONFIG MODAL **********/ /************ FOLLOWING-CONFIG MODAL **********/
@ -167,6 +165,12 @@ $header-modal-height : $menu-height
.post-expand, .post-interactions .post-expand, .post-interactions
display: none display: none
.post-info-time
position: static
float: right
.post-text
margin-top: 10px
margin-bottom: 10px
/********* REPLY POSTS MODAL***************/ /********* REPLY POSTS MODAL***************/
@ -233,8 +237,9 @@ $header-modal-height : $menu-height
width: 100% width: 100%
@extend .clear-fix @extend .clear-fix
color: $defaut-font-color color: $defaut-font-color
&:hover
background: $bloc-background-color background: $bloc-background-color
&:hover
background: $bloc-light-color
.mini-profile-photo .mini-profile-photo
height: 48px height: 48px
width: 48px width: 48px
@ -250,18 +255,21 @@ $header-modal-height : $menu-height
/******* WHO TO FOLLOW MODAL*******/ /******* WHO TO FOLLOW MODAL*******/
.modal-wrapper.who-to-follow-modal .modal-wrapper.who-to-follow-modal
.modal-content
padding: 15px
+box-sizing(border-box)
ol
margin: 5px
.open-profile-modal .open-profile-modal
&:hover &:hover
text-decoration: none text-decoration: none
.twister-user
position: relative
padding: 5px
a.twister-user-name
color: $defaut-font-color
span
padding-bottom: .5rem
font-size: 1rem
line-height: 1rem
color: $defaut-font-color
font-weight: 500
opacity: 1
letter-spacing: 0
.twister-user-info .twister-user-info
text-align: left text-align: left
font-size: .8rem font-size: .8rem
@ -275,4 +283,4 @@ $header-modal-height : $menu-height
.bio .bio
color: rgba(0, 0, 0, 0.6) color: rgba(0, 0, 0, 0.6)
font-style: italic font-style: italic
padding: .5rem padding-bottom: .5rem

43
sass/layout/_postboard.sass
Unescape View File

@ -3,11 +3,12 @@
// vars for postboard // vars for postboard
$avatar-width : 48px $avatar-width : 45px
.postboard .postboard
width: 100% width: 40%
margin-left: 30%
padding: 20px padding: 20px
h2 h2
display: none display: none
@ -20,13 +21,13 @@ $avatar-width : 48px
display: none display: none
.post .post
background: $bloc-background-color background: $bloc-light-color
position: relative position: relative
margin-bottom: 1px margin-bottom: 1px
@extend .box-shadow
+transition-property(margin) +transition-property(margin)
+transition-duration(.4s) +transition-duration(.5s)
+transition-timing-function(ease-out) +transition-timing-function(ease-out)
.post, .original.post, .post.open .post, .original.post, .post.open
position: relative position: relative
@ -48,10 +49,11 @@ $avatar-width : 48px
.postboard-posts > .post .postboard-posts > .post
+border-radius(2px)
&.open &.open
margin-top: $space margin-top: $space
margin-bottom: $space margin-bottom: $space
+border-radius(2px)
&:after &:after
content: "" content: ""
@ -71,7 +73,7 @@ $avatar-width : 48px
.open .open
background: none!important background: none!important
@extend .box-shadow
.post-photo .post-photo
margin: 0 margin: 0
@ -79,13 +81,9 @@ $avatar-width : 48px
float: left float: left
vertical-align: middle vertical-align: middle
width: $avatar-width width: $avatar-width
height: $avatar-width
overflow: hidden
img img
width: 100% width: 100%
height: 100% height: auto!important
//+border-radius(50%)
.post-info-name .post-info-name
font-weight: 600 font-weight: 600
@ -120,18 +118,9 @@ $avatar-width : 48px
.post-text .post-text
margin: 0 0 0 ($avatar-width +10) margin: 0 0 0 ($avatar-width +10)
word-wrap: break-word word-wrap: break-word
min-height: $avatar-width min-height: $avatar-width - 20
padding: 0 padding: 0
samp
background: #eee
font-size: .9rem
line-height: .9rem
display: inline-block
padding: 5px 8px
+border-radius(2px)
color: #333
font-weight: 500
font-family: monospace
.post-context .post-context
@ -244,13 +233,14 @@ $avatar-width : 48px
padding: 5px 5px 0 5px padding: 5px 5px 0 5px
@extend .clear-fix @extend .clear-fix
.image-preview .image-preview
width: 100% max-width: 100%
width: auto
display: block display: block
margin: auto margin: auto
.preview-container .preview-container
max-height: 500px
width: 100% width: 100%
text-align: center text-align: center
overflow-y: auto overflow-y: auto
@ -304,6 +294,5 @@ $avatar-width : 48px
display: inline-block display: inline-block
.post-replies .sub-replies .post-replies .sub-replies
border-left: solid 3px $main-color-color border-left: solid 18px $main-background-color
margin-left: 1px

15
sass/layout/_profile.sass
Unescape View File

@ -26,13 +26,14 @@ $modal-postboard-post-height: 100%
.postboard .postboard
width: 100% width: 100%
height: 100% height: 100%
position: relative position: absolute
.postboard-posts .postboard-posts
display: block display: block
height: $modal-postboard-post-height height: $modal-postboard-post-height
overflow-y: auto overflow: auto
.postboard-posts .post .postboard-posts .post
padding: 0 padding: 0
margin-bottom: 1px margin-bottom: 1px
@ -41,6 +42,8 @@ $modal-postboard-post-height: 100%
.profile-card .profile-card
margin: 0 margin: 0
padding: 0 padding: 0
.profile-data
background: none
.profile-modal .profile-modal
h2.profile-screen-name h2.profile-screen-name
@ -58,7 +61,7 @@ $modal-postboard-post-height: 100%
.profile-card .profile-card
width: 100% width: 100%
background: white background: $bloc-light-color
padding: $modal-gut padding: $modal-gut
.profile-card-main .profile-card-main
position: relative position: relative
@ -122,11 +125,7 @@ $modal-postboard-post-height: 100%
.twister-user-info
@extend .clear-fix
text-align: center
width: 100%
padding: 0

287
sass/style.sass
Unescape View File

@ -1,4 +1,7 @@
@import '../css/jquery.mCustomScrollbar.css'
@import compass @import compass
@import 'compass/reset' @import 'compass/reset'
@import 'compass/utilities' @import 'compass/utilities'
@ -26,7 +29,6 @@
.promoted-posts-only .promoted-posts-only
margin: 0 0 margin: 0 0
@extend .clear-fix @extend .clear-fix
@ -56,7 +58,7 @@
/* Wrapper and blocks */ /* Wrapper and blocks */
.wrapper .wrapper
width: 50% width: 100%
max-width: 100% max-width: 100%
margin: auto margin: auto
padding-top: $menu-height padding-top: $menu-height
@ -65,21 +67,32 @@
.dashboard .dashboard
&.left &.left
position: fixed position: absolute
top: $menu-height top: $menu-height
left: 0 left: 0
height: 100vh width: 30%
overflow: hidden > .module
width: 25% float: right
&.right &.right
position: fixed position: fixed
right: 0 right: 0
top: $menu-height top: $menu-height
overflow: hidden overflow: hidden
width: 25% width: 30%
> .module
max-width: 320px
margin-bottom: 20px
background: $bloc-light-color
width: 100%
@extend .box-shadow
h3
float: left
padding: 20px
h4
clear: left
border-top: 1px solid $main-background-color
padding: 10px
@ -176,10 +189,7 @@ ul.userMenu-search-profiles
.mini-profile .mini-profile
@extend .box-shadow @extend .box-shadow
.mini-profile-info .mini-profile-info
position: relative
text-align: center
background: $bloc-background-color
padding: 20px 0
a.button a.button
background: $main-color-light background: $main-color-light
@ -212,17 +222,21 @@ ul.userMenu-search-profiles
font-size: .8em font-size: .8em
width: 25% width: 25%
float: left float: left
text-align: center
border-right: 1px solid $main-background-color border-right: 1px solid $main-background-color
&:last-child &:last-child
border: none border: none
a a
color: $dark-grey color: lighten($dark-grey,20%)
display: block display: block
padding: 1em 0 padding: 1rem 0
&:hover &:hover
text-decoration: underline color: $dark-grey
&:before
display: block!important
width: 100%!important
font-size: 1.4rem!important
.userMenu-connections a .userMenu-connections a
@extend .icon-bell @extend .icon-bell
@ -349,11 +363,11 @@ ul.userMenu-search-profiles
-moz-transition: height 0.3s linear -moz-transition: height 0.3s linear
-o-transition: height 0.3s linear -o-transition: height 0.3s linear
-ms-transition: height 0.3s linear -ms-transition: height 0.3s linear
height: 28px height: 48px
border: none border: none
background: rgba(255, 255, 255, 1) background: rgba(255, 255, 255, 1)
border: 1px solid rgba(0, 0, 0, 0.1) border: 1px solid rgba(0, 0, 0, 0.1)
padding: 3px padding: 5px
margin: 5px 0 margin: 5px 0
&:focus &:focus
border-bottom: solid 1px $main-color-color border-bottom: solid 1px $main-color-color
@ -398,6 +412,13 @@ ul.userMenu-search-profiles
margin: 0 0 10px 0 margin: 0 0 10px 0
#post-preview
background: $bloc-background-color
border: 1px solid $main-background-color
padding: 15px
+transition-property(all)
+transition-duration(.1s)
width: 100%!important
@ -438,31 +459,25 @@ textarea.splited-post
.who-to-follow .who-to-follow
&.module &.module
margin-bottom: 20px
background: white
padding: 20px
width: 100%
@extend .box-shadow
li li
width: 100%
min-height: auto
border-bottom: 1px solid $main-background-color
margin: 0
padding-bottom: 10px
margin-top: 10px
&:last-child
border: none
@extend .clear-fix
button button
position: absolute position: absolute
right: 0 right: 10px
top: 20% top: 10px
@extend .small
display: none
&:hover button
display: block
.bio
text-align: left!important
small small
display: none display: none
h3 h3
float: left float: left
padding: 20px
ol ol
@extend .clear-fix @extend .clear-fix
clear: both clear: both
@ -470,27 +485,29 @@ textarea.splited-post
.twister-user .twister-user
position: relative position: relative
box-sizing: border-box box-sizing: border-box
background: $bloc-background-color background: $bloc-light-color
@extend .clear-fix @extend .clear-fix
@extend .col border-top: 1px solid $main-background-color
@extend .col-3
width: 100% width: 100%
min-height: auto min-height: auto
&:nth-child(4n) padding: 10px 0
@extend .last clear: left
+transition-property(background)
+transition-duration(.1s)
@extend .clear-fix
&:hover
background: white
img.twister-user-photo img.twister-user-photo
+border-radius(50%)
float: left float: left
vertical-align: middle
display: block display: block
float: left float: left
vertical-align: middle
width: 48px width: 48px
height: 48px height: auto
margin: 10px margin: 0 10px
background: $main-background-color background: $main-background-color
@ -609,97 +626,117 @@ ol.toptrends-list
/********* TWISTDAY REMINDER *******/ /********* TWISTDAY REMINDER *******/
.twistday-reminder .twistday-reminder
width: 100%
background: white
@extend .box-shadow
@extend .clear-fix
padding: 20px
small small
display: none display: none
.twister-user
background: $bloc-light-color
position: relative
+transition-property(background)
+transition-duration(.1s)
&:hover
background: white
.twister-user-full, .twister-user-tag
padding: 0 0 .5rem 0
font-size: 1rem
line-height: 1rem
color: $defaut-font-color
font-weight: 500
opacity: 1
letter-spacing: 0
display: inline-block
.twisterday
font-size: 12px
/******* LOADER *************/ /******* LOADER *************/
.postboard-loading, .loading-roller .postboard-loading, .loading-roller
clear: both font-size: 100px
text-align: center width: .4em
div height: .4em
display: inline-block
width: 120px
height: 10px
background-color: $main-color-light
position: relative position: relative
margin: 10px 0 0 0 list-style: none
&:after border-radius: 50%
content: "" margin: 100px auto
display: none
div
width: .1em
height: .1em
position: absolute position: absolute
background-color: white border-radius: 50%
left: 2px
top: 2px &:nth-child(1)
bottom: 2px background: #62839F
z-index: 999 top: 0
animation-name: slide left: 50%
animation-duration: 1.5s margin-left: -.05em
animation-easing-function: linear transform-origin: 50% 250%
animation-iteration-count: infinite animation: rota 1.13s linear infinite, opa 3.67s ease-in-out infinite alternate
-webkit-animation-name: slide
-webkit-animation-duration: 1.5s
-webkit-animation-easing-function: linear &:nth-child(2)
-webkit-animation-iteration-count: infinite background: #749294
-moz-animation-name: slide top: 50%
-moz-animation-duration: 1.5s right: 0
-moz-animation-easing-function: linear margin-top: -.05em
-moz-animation-iteration-count: infinite transform-origin: -150% 50%
animation: rota 1.86s linear infinite, opa 4.29s ease-in-out infinite alternate
@keyframes slide
0%
right: 60px &:nth-child(3)
left: 2px background: #94AC7E
5% bottom: 0
left: 2px left: 50%
50% margin-left: -.05em
right: 2px transform-origin: 50% -150%
left: 60px animation: rota 1.45s linear infinite, opa 5.12s ease-in-out infinite alternate
55%
right: 2px
100% &:nth-child(4)
right: 60px background: #B4C669
left: 2px top: 50%
left: 0
margin-top: -.05em
@-webkit-keyframes slide transform-origin: 250% 50%
0% animation: rota 1.72s linear infinite, opa 5.25s ease-in-out infinite alternate
right: 100px
left: 2px @keyframes rota
5% to
left: 2px transform: rotate(360deg)
50%
right: 2px
left: 100px @keyframes opa
55% 12.0%
right: 2px opacity: 0.80
100% 19.5%
right: 100px opacity: 0.88
left: 2px 37.2%
opacity: 0.64
40.5%
@-moz-keyframes slide opacity: 0.52
0% 52.7%
right: 60px opacity: 0.69
left: 2px 60.2%
5% opacity: 0.60
left: 2px 66.6%
50% opacity: 0.52
right: 2px 70.0%
left: 60px opacity: 0.63
55% 79.9%
right: 2px opacity: 0.60
100% 84.2%
right: 60px opacity: 0.75
left: 2px 91.0%
opacity: 0.87
/* Options*/ /* Options*/

Write Preview
Loading…
Cancel
Save