artabro/wire/modules/Jquery/JqueryUI/vex/styles/vex-theme-default.sass

129 lines
3.2 KiB
Sass
Raw Permalink Normal View History

2024-08-27 11:35:37 +02:00
@import mixins
@import keyframes
+keyframes-vex-flyin
+keyframes-vex-flyout
+keyframes-vex-pulse
$blue: #3288e6
.vex.vex-theme-default
padding-top: 160px
padding-bottom: 160px
&.vex-closing .vex-content
animation: vex-flyout .5s forwards
.vex-content
animation: vex-flyin .5s
.vex-content
border-radius: 5px
font-family: "Helvetica Neue", sans-serif
background: #f0f0f0
color: #444
padding: 1em
position: relative
margin: 0 auto
max-width: 100%
width: 450px
font-size: 1.1em
line-height: 1.5em
h1, h2, h3, h4, h5, h6, p, ul, li
color: inherit
.vex-close
border-radius: 5px
position: absolute
top: 0
right: 0
cursor: pointer
&:before
border-radius: 3px
position: absolute
content: "\00D7"
font-size: 26px
font-weight: normal
line-height: 31px
height: 30px
width: 30px
text-align: center
top: 3px
right: 3px
color: #bbb
background: transparent
&:hover:before, &:active:before
color: #777
background: #e0e0e0
.vex-dialog-form
.vex-dialog-message
margin-bottom: .5em
.vex-dialog-input
margin-bottom: 1em
select, textarea, input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="email"], input[type="month"], input[type="number"], input[type="password"], input[type="search"], input[type="tel"], input[type="text"], input[type="time"], input[type="url"], input[type="week"]
border-radius: 3px
background: #fff
width: 100%
padding: .25em .67em
border: 0
font-family: inherit
font-weight: inherit
font-size: inherit
min-height: 2.5em
margin: 0 0 .25em
&:focus
box-shadow: inset 0 0 0 2px lighten($blue, 20%)
outline: none
.vex-dialog-buttons
+pie-clearfix()
.vex-dialog-button
border-radius: 3px
border: 0
float: right
margin: 0 0 0 .5em
font-family: inherit
text-transform: uppercase
letter-spacing: .1em
font-size: .8em
line-height: 1em
padding: .75em 2em
&.vex-last
margin-left: 0
&:focus
animation: vex-pulse 1.1s infinite
outline: none
// vex-pulse uses -webkit-filter which
// doesn't play so nice in mobile webkit
@media (max-width: 568px)
animation: none
&.vex-dialog-button-primary
background: $blue
color: #fff
&.vex-dialog-button-secondary
background: #e0e0e0
color: #777
.vex-loading-spinner.vex-theme-default
box-shadow: 0 0 0 .5em #f0f0f0, 0 0 1px .5em rgba(0, 0, 0, 0.3)
border-radius: 100%
background: #f0f0f0
border: .2em solid transparent
border-top-color: #bbb
top: -1.1em
bottom: auto