108 lines
No EOL
2.2 KiB
Sass
108 lines
No EOL
2.2 KiB
Sass
.bg-mask
|
|
background-color: black
|
|
z-index: 1
|
|
filter: opacity(20%)
|
|
position: fixed
|
|
width: 100%
|
|
height: 100%
|
|
left: 0
|
|
top: 0
|
|
display: none
|
|
|
|
@mixin modal
|
|
z-index: 2
|
|
display: none
|
|
position: fixed
|
|
width: 500px
|
|
top: 50%
|
|
left: 50%
|
|
transform: translate(-50%, -50%)
|
|
background-color: $color-bright
|
|
padding: 20px 20px 10px 20px
|
|
color: $color-secondary
|
|
& &__head
|
|
margin-bottom: 30px
|
|
&::after
|
|
@include clear
|
|
|
|
& &__title
|
|
font-weight: bold
|
|
font-size: 1.2em
|
|
float: left
|
|
|
|
& &__close-button
|
|
float: right
|
|
|
|
& &__body
|
|
|
|
& &__confirm-button
|
|
float: right
|
|
|
|
.mark-modal
|
|
@include modal
|
|
& input[type="radio"]
|
|
margin-right: 0
|
|
|
|
& &__rating-star
|
|
display: inline
|
|
float: left
|
|
position: relative
|
|
left: -3px
|
|
|
|
& &__status-radio
|
|
float: right
|
|
& ul
|
|
margin-bottom: 0
|
|
& li, & label
|
|
display: inline
|
|
& input[type="radio"]
|
|
position: relative
|
|
top: 1px
|
|
|
|
& &__clear
|
|
@include clear
|
|
|
|
& &__content-input, & form textarea
|
|
height: 200px
|
|
width: 100%
|
|
margin-top: 5px
|
|
margin-bottom: 5px
|
|
resize: vertical
|
|
|
|
& &__option
|
|
margin-bottom: 24px
|
|
&::after
|
|
@include clear
|
|
|
|
& &__visibility-radio
|
|
float: left
|
|
& ul, & li, & label
|
|
display: inline
|
|
& label
|
|
font-size: normal
|
|
& input[type="radio"]
|
|
position: relative
|
|
top: 2px
|
|
|
|
& &__share-checkbox
|
|
float: right
|
|
& input[type="checkbox"]
|
|
position: relative
|
|
top: 2px
|
|
|
|
.confirm-modal
|
|
@include modal
|
|
|
|
// Small devices (landscape phones, 576px and up)
|
|
@media (max-width: $small-devices)
|
|
.mark-modal, .confirm-modal
|
|
width: 100%
|
|
// Medium devices (tablets, 768px and up)
|
|
@media (max-width: $medium-devices)
|
|
pass
|
|
// Large devices (desktops, 992px and up)
|
|
@media (max-width: $large-devices)
|
|
pass
|
|
// Extra large devices (large desktops, 1200px and up)
|
|
@media (max-width: $x-large-devices)
|
|
pass |