[sass] StPageFlip

Viewer

copydownloadembedprintName: StPageFlip
  1. .flip-book 
  2.         box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.5)
  3.         display: none
  4.         background-size: cover
  5.  
  6. .page 
  7.         padding: 20px
  8.         background-color: hsl(35, 55, 98)
  9.         color: hsl(35, 35, 35)
  10.         border: solid 1px hsl(35, 20, 70)
  11.         overflow: hidden
  12.         width: 100%
  13.         height: 100%
  14.         display: flex
  15.         flex-direction: column
  16.         justify-content: space-between
  17.         align-items: stretch
  18.         height: 30px
  19.         font-size: 100%
  20.         text-transform: uppercase
  21.         text-align: center
  22.         &-image 
  23.                 height: 100%
  24.                 background-size: contain
  25.                 background-position: center center
  26.                 background-repeat: no-repeat
  27.        
  28.         &-text 
  29.                 height: 100%
  30.                 flex-grow: 1
  31.                 font-size: 80%
  32.                 text-align: justify
  33.                 margin-top: 10px
  34.                 padding-top: 10px
  35.                 box-sizing: border-box
  36.                 border-top: solid 1px hsl(35, 55, 90)
  37.        
  38.         &-footer 
  39.                 height: 30px
  40.                 border-top: solid 1px hsl(35, 55, 90)
  41.                 font-size: 80%
  42.                 color: hsl(35, 20, 50)
  43.        
  44.         &-cover 
  45.                 background-color: hsl(35, 45, 80)
  46.                 color: hsl(35, 35, 35)
  47.                 border: solid 1px hsl(35, 20, 50)
  48.                 text-align: center
  49.                 padding-top: 50%
  50.                 font-size: 210%
  51.                 &-top 
  52.                         box-shadow: inset 0px 0 30px 0px rgba(36, 10, 3, 0.5), -2px 0 5px 2px rgba(0, 0, 0, 0.4)
  53.                
  54.                 &-bottom 
  55.                         box-shadow: inset 0px 0 30px 0px rgba(36, 10, 3, 0.5), 10px 0 8px 0px rgba(0, 0, 0, 0.4)
  56.                
  57.        
  58.  
  59. .--left 
  60.         border-right: 0
  61.         box-shadow: inset -7px 0 30px -7px rgba(0, 0, 0, 0.4)
  62.  
  63. .--right 
  64.         border-left: 0
  65.         box-shadow: inset 7px 0 30px -7px rgba(0, 0, 0, 0.4)
  66.         text-align: right
  67.  
  68. .hard 
  69.         background-color: hsl(35, 50, 90)
  70.         border: solid 1px hsl(35, 20, 50)
  71.  
  72.  

Editor

You can edit this paste and save as new:


File Description
  • StPageFlip
  • Paste Code
  • 24 Jan-2022
  • 1.52 Kb
You can Share it: