Template:UCopenhagen/CSS protocols temp

$white: rgba(254,255,250,1) $grey: rgba(220,231,235,1) $red: rgba(255,104,115,1) $black: rgba(48,69,92,0.8) $sans: 'Titillium Web', sans-serif

.transition

 transition: all 0.25s ease-in-out

.flipIn

 animation: flipdown 0.5s ease both

.no-select

 -webkit-tap-highlight-color: rgba(0,0,0,0)
 -webkit-touch-callout: none
 -webkit-user-select: none
 -khtml-user-select: none
 -moz-user-select: none
 -ms-user-select: none
 user-select: none

html

 width: 100%
 height: 100%
 perspective: 900
 overflow-y: scroll
 background-color: $grey
 font-family: $sans
 color: $black

body

 min-height: 0
 display: inline-block
 position: relative
 left: 50%
 margin: 90px 0
 transform: translate( -50% , 0 )
 box-shadow: 0 10px 0 0 $red inset
 background-color: $white
 max-width: 450px
 padding: 30px

 @media ( max-width:550px )
   box-sizing: border-box
   transform: translate( 0 , 0 )
   max-width: 100%
   min-height: 100%
   margin: 0
   left: 0

h1 , h2

 color: $red

h1

 text-transform: uppercase
 font-size: 36px
 line-height: 42px
 letter-spacing: 3px
 font-weight: 100
 @extend .flipIn

h2

 font-size: 26px
 line-height: 34px
 font-weight: 300
 letter-spacing: 1px
 display: block
 background-color: $white
 margin: 0
 cursor: pointer
 @extend .no-select

p

 color: $black
 font-size: 17px
 line-height: 26px
 letter-spacing: 1px
 position: relative
 overflow: hidden
 max-height: 800px
 @extend .transition
 opacity: 1
 transform: translate( 0 , 0 )
 margin-top: 14px
 z-index: 2

ul

 list-style: none
 perspective: 900
 padding: 0
 margin: 0

 li
   position: relative
   padding: 0
   margin: 0
   padding-bottom: 4px
   padding-top: 18px
   border-top: 1px dotted $grey
   @extend .flipIn

   &:nth-of-type(1)
     animation-delay: 0.5s

   &:nth-of-type(2)
     animation-delay: 0.75s

   &:nth-of-type(3)
     animation-delay: 1.0s

   &:last-of-type
     padding-bottom: 0

   i
     position: absolute
     transform: translate( -6px , 0 )
     margin-top: 16px
     right: 0

     &:before , &:after
       content: ""
       @extend .transition
       position: absolute
       background-color: $red
       width: 3px
       height: 9px

     &:before
       transform: translate( -2px , 0 ) rotate( 45deg )

     &:after
       transform: translate( 2px , 0 ) rotate( -45deg )

   input[type=checkbox]
     position: absolute
     cursor: pointer
     width: 100%
     height: 100%
     z-index: 1
     opacity: 0

     &:checked
       &~p
         margin-top: 0
         max-height: 0
         opacity: 0
         transform: translate( 0 , 50% )

       &~i
         &:before
           transform: translate( 2px , 0 ) rotate( 45deg )

         &:after
           transform: translate( -2px , 0 ) rotate( -45deg )

@keyframes flipdown

 0%
   opacity: 0
   transform-origin: top center
   transform: rotateX(-90deg)
 5%
   opacity: 1
 80%
   transform: rotateX(8deg)
 83%
   transform: rotateX(6deg)
 92%
   transform: rotateX(-3deg)
 100%
   transform-origin: top center
   transform: rotateX(0deg)