Difference between revisions of "Template:Valencia UPV/custom.css"

Line 208: Line 208:
 
}
 
}
  
 +
 +
/* MATERIAL MODAL */
 +
 +
 +
$modal-z = 1000
 +
$modal-bg = #FFEBEE
 +
$modal-width = 600px
 +
 +
$space = 2.4rem
 +
$red = #F44336
 +
 +
$t = .5s
 +
 +
$ease($s = $t)
 +
transition all $s cubic-bezier(0.23, 1, 0.32, 1)
 +
 +
*
 +
box-sizing border-box
 +
 +
body
 +
line-height 1.5
 +
font-family 'Lato'
 +
-webkit-font-smoothing antialiased
 +
overflow-x hidden
 +
 +
h1, h2, h3, p
 +
font-weight 300
 +
margin 0 0 ($space) 0
 +
 +
h1, h2, h3
 +
line-height 1.3
 +
 +
a
 +
text-decoration none
 +
color inherit
 +
font-weight 400
 +
 +
/**
 +
* Material Modal CSS
 +
*/
 +
 +
.modal
 +
will-change visibility, opacity
 +
display flex
 +
align-items center
 +
justify-content center
 +
position fixed
 +
top 0
 +
left 0
 +
right 0
 +
bottom 0
 +
overflow-y auto
 +
overflow-x hidden
 +
z-index $modal-z
 +
// hide modal
 +
visibility hidden
 +
opacity 0
 +
$ease()
 +
transition-delay $modal-delay
 +
 +
&--active
 +
// reveal modal
 +
visibility visible
 +
opacity 1
 +
 +
&--align-top
 +
// align to top of window, useful if modal has a lot of content
 +
align-items flex-start
 +
 +
&__bg
 +
// background color can be added as a backdrop for the modal
 +
background transparent
 +
 +
&__dialog
 +
// controls the width and padding of modal
 +
max-width $modal-width
 +
padding ($space / 2)
 +
 +
&__content
 +
will-change transform, opacity
 +
position relative
 +
padding $space
 +
background $modal-bg
 +
background-clip padding-box
 +
box-shadow 0 12px 15px 0 rgba(black, 0.25)
 +
opacity 0
 +
$ease(.25s)
 +
 +
&--active
 +
opacity 1
 +
 +
&__close
 +
z-index $modal-z+100
 +
cursor pointer
 +
 +
&__trigger
 +
// modal trigger button
 +
position relative
 +
display inline-block;
 +
padding ($space / 2) $space
 +
color: rgba(black, 0.7)
 +
line-height 1
 +
cursor pointer
 +
background $modal-bg
 +
box-shadow 0 2px 5px 0 rgba(black, 0.26)
 +
-webkit-tap-highlight-color: rgba(0,0,0,0); user-select none
 +
$ease()
 +
 +
&--active
 +
z-index 10
 +
 +
&:hover
 +
background mix(black, $modal-bg, 10)
 +
 +
 +
#modal__temp
 +
// this is the div that expands when the button is clicked
 +
will-change transform, opacity
 +
position absolute
 +
top 0
 +
left 0
 +
right 0
 +
bottom 0
 +
background $modal-bg
 +
transform none
 +
opacity 1
 +
transition opacity 0.1s ease-out, transform $t cubic-bezier(0.23, 1, 0.32, 1)
 +
 +
/**
 +
* Demo specific CSS
 +
*/
 +
 +
body
 +
height 100vh
 +
background $red
 +
 +
img
 +
max-width 100%
 +
 +
.demo-btns
 +
 +
header
 +
padding 7vh 10vw
 +
background $modal-bg
 +
display flex
 +
align-items center
 +
 +
h1
 +
margin 0
 +
color rgba(black, 0.54)
 +
font-weight 300
 +
 +
.info
 +
background $red
 +
padding 3vh 10vw
 +
height 70vh
 +
display flex
 +
align-items center
 +
justify-content center
 +
flex-flow column wrap
 +
 +
p
 +
text-align: center
 +
color white
 +
 +
.link
 +
font-size 20px
 +
 +
.modal__trigger
 +
margin-right 3px
 +
@media (max-width 640px)
 +
margin-bottom ($space / 3)
 +
 +
.demo-close
 +
position absolute
 +
top 0
 +
right 0
 +
margin: ($space / 2)
 +
padding: ($space / 4)
 +
background rgba(black, 0.3)
 +
border-radius 50%
 +
$ease()
 +
 +
svg
 +
width 24px
 +
fill: white
 +
pointer-events none
 +
vertical-align top
 +
 +
&:hover
 +
background rgba(black, 0.6);
 +
 +
.logo
 +
position: fixed
 +
bottom: 3vh
 +
right: 3vw
 +
z-index: 2
 +
 +
img
 +
width: 45px
 +
transform: rotate(0)
 +
$ease()
 +
 +
&:hover
 +
transform: rotate(180deg) scale(1.1)
  
  

Revision as of 17:18, 10 September 2018