You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
474 lines
13 KiB
474 lines
13 KiB
//==============
|
|
//== modal
|
|
$ax5modal-z-index: 2000 !default;
|
|
$ax5modal-box-model: border-box !default;
|
|
$ax5modal-bg: #fff !default;
|
|
$ax5modal-border: 1px solid #ddd !default;
|
|
$ax5modal-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.60) !default;
|
|
$ax5modal-body-padding: 0px !default;
|
|
$ax5modal-header-padding: 10px 15px !default;
|
|
|
|
$ax5modal-header-addon-padding: 10px 10px !default;
|
|
$ax5modal-header-addon-btn-padding: 0px 2px !default;
|
|
|
|
$ax5modal-border-radius: 4px !default;
|
|
$ax5modal-easing-time-open: 0.3s !default;
|
|
$ax5modal-easing-time-close: 0.3s !default;
|
|
$ax5modal-easing-open: $ease-out-back !default;
|
|
$ax5modal-easing-close: $ease-out-back !default;
|
|
|
|
//== modal resizer
|
|
$ax5modal-resizer-bg: #ccc !default;
|
|
$ax5modal-resizer-border: 1px solid #ff0000 !default;
|
|
$ax5modal-resizer-box-shaodw: 0px 0px 5px 0px rgba(0, 0, 0, 0.60) !default;
|
|
$ax5modal-resizer-opacity : 0.3 !default;
|
|
|
|
//** Border color for elements within dialog
|
|
$ax5modal-default-text: #222 !default;
|
|
$ax5modal-default-border: 1px solid #ddd !default;
|
|
$ax5modal-default-header-bg: #f5f5f5 !default;
|
|
|
|
@mixin ax-modal() {
|
|
box-sizing: border-box;
|
|
*,
|
|
*:before,
|
|
*:after {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
background-color: $ax5modal-bg;
|
|
border: $ax5modal-border;
|
|
|
|
@include ax-border-radius($ax5modal-border-radius);
|
|
@include box-shadow($ax5modal-box-shadow);
|
|
|
|
z-index: $ax5modal-z-index;
|
|
position: fixed;
|
|
left: 0px;
|
|
top: 0px;
|
|
//overflow: hidden;
|
|
box-sizing: content-box;
|
|
}
|
|
|
|
@mixin ax-modal-section() {
|
|
.ax-modal-header {
|
|
user-select: none;
|
|
//font-size: 1em;
|
|
font-weight: 600;
|
|
padding: $ax5modal-header-padding;
|
|
border-bottom: 1px solid transparent;
|
|
border-top-left-radius: $ax5modal-border-radius;
|
|
border-top-right-radius: $ax5modal-border-radius;
|
|
|
|
cursor: move;
|
|
.ax-modal-header-addon{
|
|
position: absolute;
|
|
right: 0px;
|
|
top: 0px;
|
|
padding: $ax5modal-header-addon-padding;
|
|
[data-modal-header-btn]{
|
|
border: 0;
|
|
padding: $ax5modal-header-addon-btn-padding;
|
|
background: transparent;
|
|
display: inline-block;
|
|
text-align: center;
|
|
cursor: pointer;
|
|
outline: 0;
|
|
}
|
|
}
|
|
}
|
|
.ax-modal-body {
|
|
border-bottom-left-radius: $ax5modal-border-radius;
|
|
border-bottom-right-radius: $ax5modal-border-radius;
|
|
|
|
padding: $ax5modal-body-padding;
|
|
text-align: center;
|
|
@include flex(1);
|
|
position: relative;
|
|
overflow: hidden;
|
|
|
|
iframe {
|
|
border: 0 none;
|
|
}
|
|
|
|
.fadeIn{
|
|
@include animation(ax-modal-fade-in $ax5modal-easing-time-open $ease-out-back forwards);
|
|
}
|
|
.fadeOut{
|
|
@include animation(ax-modal-fade-out $ax5modal-easing-time-open $ease-out-back forwards);
|
|
}
|
|
}
|
|
}
|
|
|
|
@mixin modal-variant($text-color, $border, $header-bg-color) {
|
|
.ax-modal-header {
|
|
color: $text-color;
|
|
background: $header-bg-color;
|
|
.ax-modal-header-addon{
|
|
a{
|
|
color: $text-color;
|
|
outline: 0;
|
|
}
|
|
}
|
|
}
|
|
.ax-modal-body {
|
|
|
|
}
|
|
}
|
|
|
|
@include keyframes(ax-modal) {
|
|
0% {
|
|
opacity: 0.0;
|
|
//@include transform(translateY(20%));
|
|
@include transform(scale(0.8));
|
|
}
|
|
100% {
|
|
opacity: 1.0;
|
|
@include transform(scale(1.0));
|
|
}
|
|
/*
|
|
0% {
|
|
opacity: 0.0;
|
|
-webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
|
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
|
}
|
|
0.1% {
|
|
opacity: 1.0;
|
|
-webkit-transform: matrix3d(0.5, 0, 0, 0, 0, 0.5, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
|
transform: matrix3d(0.5, 0, 0, 0, 0, 0.5, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
|
}
|
|
5.9% {
|
|
-webkit-transform: matrix3d(0.711, 0, 0, 0, 0, 0.742, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
|
transform: matrix3d(0.711, 0, 0, 0, 0, 0.742, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
|
}
|
|
7.7% {
|
|
-webkit-transform: matrix3d(0.768, 0, 0, 0, 0, 0.812, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
|
transform: matrix3d(0.768, 0, 0, 0, 0, 0.812, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
|
}
|
|
11.5% {
|
|
-webkit-transform: matrix3d(0.869, 0, 0, 0, 0, 0.935, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
|
transform: matrix3d(0.869, 0, 0, 0, 0, 0.935, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
|
}
|
|
11.7% {
|
|
-webkit-transform: matrix3d(0.873, 0, 0, 0, 0, 0.94, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
|
transform: matrix3d(0.873, 0, 0, 0, 0, 0.94, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
|
}
|
|
15.2% {
|
|
-webkit-transform: matrix3d(0.941, 0, 0, 0, 0, 1.014, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
|
transform: matrix3d(0.941, 0, 0, 0, 0, 1.014, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
|
}
|
|
17.5% {
|
|
-webkit-transform: matrix3d(0.973, 0, 0, 0, 0, 1.045, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
|
transform: matrix3d(0.973, 0, 0, 0, 0, 1.045, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
|
}
|
|
19% {
|
|
-webkit-transform: matrix3d(0.99, 0, 0, 0, 0, 1.058, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
|
transform: matrix3d(0.99, 0, 0, 0, 0, 1.058, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
|
}
|
|
22.8% {
|
|
-webkit-transform: matrix3d(1.019, 0, 0, 0, 0, 1.071, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
|
transform: matrix3d(1.019, 0, 0, 0, 0, 1.071, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
|
}
|
|
23.2% {
|
|
-webkit-transform: matrix3d(1.021, 0, 0, 0, 0, 1.071, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
|
transform: matrix3d(1.021, 0, 0, 0, 0, 1.071, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
|
}
|
|
30.3% {
|
|
-webkit-transform: matrix3d(1.036, 0, 0, 0, 0, 1.049, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
|
transform: matrix3d(1.036, 0, 0, 0, 0, 1.049, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
|
}
|
|
30.4% {
|
|
-webkit-transform: matrix3d(1.036, 0, 0, 0, 0, 1.049, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
|
transform: matrix3d(1.036, 0, 0, 0, 0, 1.049, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
|
}
|
|
37.5% {
|
|
-webkit-transform: matrix3d(1.028, 0, 0, 0, 0, 1.016, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
|
transform: matrix3d(1.028, 0, 0, 0, 0, 1.016, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
|
}
|
|
44.6% {
|
|
-webkit-transform: matrix3d(1.016, 0, 0, 0, 0, 0.997, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
|
transform: matrix3d(1.016, 0, 0, 0, 0, 0.997, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
|
}
|
|
50.3% {
|
|
-webkit-transform: matrix3d(1.008, 0, 0, 0, 0, 0.992, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
|
transform: matrix3d(1.008, 0, 0, 0, 0, 0.992, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
|
}
|
|
51.7% {
|
|
-webkit-transform: matrix3d(1.006, 0, 0, 0, 0, 0.992, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
|
transform: matrix3d(1.006, 0, 0, 0, 0, 0.992, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
|
}
|
|
70.3% {
|
|
-webkit-transform: matrix3d(0.998, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
|
transform: matrix3d(0.998, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
|
}
|
|
80.3% {
|
|
-webkit-transform: matrix3d(0.999, 0, 0, 0, 0, 1.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
|
transform: matrix3d(0.999, 0, 0, 0, 0, 1.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
|
}
|
|
100% {
|
|
-webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
|
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
|
}
|
|
*/
|
|
}
|
|
|
|
@include keyframes(ax-modal-destroy) {
|
|
/*
|
|
from {
|
|
@include transform(scale(1));
|
|
opacity: 1.0;
|
|
}
|
|
to {
|
|
@include transform(scale(0.5));
|
|
opacity: 0.0;
|
|
}
|
|
*/
|
|
100% {
|
|
opacity: 0.0;
|
|
@include transform(translateY(20%));
|
|
}
|
|
0% {
|
|
opacity: 1.0;
|
|
@include transform(translateY(0));
|
|
}
|
|
|
|
}
|
|
|
|
@include keyframes(ax-modal-fullscreen) {
|
|
0% {
|
|
@include transform(translateY(20%));
|
|
}
|
|
100% {
|
|
@include transform(translateY(0));
|
|
}
|
|
}
|
|
|
|
@include keyframes(ax-modal-fullscreen-destroy) {
|
|
0% {
|
|
@include transform(translateY(0));
|
|
}
|
|
100% {
|
|
@include transform(translateY(100%));
|
|
}
|
|
}
|
|
|
|
@include keyframes(ax-modal-fade-in){
|
|
0% {
|
|
opacity: 0.0;
|
|
}
|
|
100% {
|
|
opacity: 1.0;
|
|
}
|
|
}
|
|
|
|
@include keyframes(ax-modal-fade-out){
|
|
0% {
|
|
opacity: 1.0;
|
|
}
|
|
100% {
|
|
opacity: 0.0;
|
|
}
|
|
}
|
|
|
|
// mixins --------------------------------------------- end
|
|
|
|
.ax5modal {
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
*:before,
|
|
*:after {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
@include animation(ax-modal $ax5modal-easing-time-open $ax5modal-easing-open forwards);
|
|
@include transform(translateZ(0px));
|
|
//@include transition(all $ax5modal-easing-time-open linear);
|
|
|
|
@include ax-modal();
|
|
@include ax-modal-section();
|
|
@include modal-variant($ax5modal-default-text, $ax5modal-default-border, $ax5modal-default-header-bg);
|
|
|
|
&.destroy {
|
|
@include animation(ax-modal-destroy $ax5modal-easing-time-close $ax5modal-easing-close forwards);
|
|
}
|
|
|
|
&.fullscreen {
|
|
border: 0px none;
|
|
@include ax-border-radius(0px);
|
|
@include box-shadow(none);
|
|
@include animation(ax-modal-fullscreen $ax5modal-easing-time-open $ease-out-back forwards);
|
|
|
|
&.destroy {
|
|
@include animation(ax-modal-fullscreen-destroy $ax5modal-easing-time-close $ease-out-expo forwards);
|
|
}
|
|
}
|
|
|
|
&.draged{
|
|
.ax-modal-header {
|
|
opacity: 0.5;
|
|
}
|
|
.ax-modal-body {
|
|
opacity: 0.5;
|
|
}
|
|
}
|
|
[data-ax5modal-resizer]{
|
|
position: absolute;
|
|
display: block;
|
|
&:before{
|
|
position: absolute;
|
|
content: ' ';
|
|
display: block;
|
|
width: auto;
|
|
height: auto;
|
|
left: auto;
|
|
top: auto;
|
|
right: auto;
|
|
bottom: auto;
|
|
//background: #ff3300;
|
|
//opacity: 0.3;
|
|
}
|
|
|
|
&[data-ax5modal-resizer="top"]{
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 0;
|
|
|
|
&:before{
|
|
width: 100%;
|
|
height: 8px;
|
|
left: 0;
|
|
top: -4px;
|
|
cursor: row-resize;
|
|
}
|
|
}
|
|
&[data-ax5modal-resizer="bottom"]{
|
|
left: 0;
|
|
bottom: 0;
|
|
width: 100%;
|
|
height: 0;
|
|
|
|
&:before{
|
|
width: 100%;
|
|
height: 8px;
|
|
left: 0;
|
|
top: -4px;
|
|
cursor: row-resize;
|
|
}
|
|
}
|
|
&[data-ax5modal-resizer="left"]{
|
|
left: 0;
|
|
top: 0;
|
|
width: 0;
|
|
height: 100%;
|
|
|
|
&:before{
|
|
width: 8px;
|
|
height: 100%;
|
|
left: -4px;
|
|
top: 0;
|
|
cursor: col-resize;
|
|
}
|
|
}
|
|
&[data-ax5modal-resizer="right"]{
|
|
right: 0;
|
|
top: 0;
|
|
width: 0;
|
|
height: 100%;
|
|
|
|
&:before{
|
|
width: 8px;
|
|
height: 100%;
|
|
left: -4px;
|
|
top: 0;
|
|
cursor: col-resize;
|
|
}
|
|
}
|
|
&[data-ax5modal-resizer="top-left"]{
|
|
left: 0;
|
|
top: 0;
|
|
width: 0;
|
|
height: 0;
|
|
|
|
&:before{
|
|
width: 8px;
|
|
height: 8px;
|
|
left: -4px;
|
|
top: -4px;
|
|
cursor: nwse-resize;
|
|
}
|
|
}
|
|
&[data-ax5modal-resizer="top-right"]{
|
|
right: 0;
|
|
top: 0;
|
|
width: 0;
|
|
height: 0;
|
|
|
|
&:before{
|
|
width: 8px;
|
|
height: 8px;
|
|
left: -4px;
|
|
top: -4px;
|
|
cursor: nesw-resize;
|
|
}
|
|
}
|
|
&[data-ax5modal-resizer="bottom-left"]{
|
|
left: 0;
|
|
bottom: 0;
|
|
width: 0;
|
|
height: 0;
|
|
|
|
&:before{
|
|
width: 8px;
|
|
height: 8px;
|
|
left: -4px;
|
|
top: -4px;
|
|
cursor: nesw-resize;
|
|
}
|
|
}
|
|
&[data-ax5modal-resizer="bottom-right"]{
|
|
right: 0;
|
|
bottom: 0;
|
|
width: 0;
|
|
height: 0;
|
|
|
|
&:before{
|
|
width: 8px;
|
|
height: 8px;
|
|
left: -4px;
|
|
top: -4px;
|
|
cursor: nwse-resize;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// resizer가 활성화 되면 리사이저 백그라운드도 함께 활성화 됩니다. 백그라운드는 페이지 전체를 투명 레이어로 덮어 리사이저가 자유롭게 활동 하도록 도와 줍니다.
|
|
.ax5modal-resizer-background{
|
|
position: fixed;
|
|
left: 0px;
|
|
top: 0px;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: transparent;
|
|
z-index: $ax5modal-z-index;
|
|
//opacity: 0.1;
|
|
cursor: move;
|
|
}
|
|
.ax5modal-resizer{
|
|
position: absolute;
|
|
left: 0px;
|
|
top: 0px;
|
|
|
|
z-index: $ax5modal-z-index + 1;
|
|
cursor: move;
|
|
|
|
box-sizing: $ax5modal-box-model;
|
|
background-color: $ax5modal-resizer-bg;
|
|
border: $ax5modal-resizer-border;
|
|
opacity: $ax5modal-resizer-opacity;
|
|
|
|
@include ax-border-radius($ax5modal-border-radius);
|
|
@include box-shadow($ax5modal-box-shadow);
|
|
}
|