/* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- layout/modal/index.less -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ & when (@modal-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Body -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ body.modal-open { overflow: hidden; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Modal Backdrop -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .modal-backdrop { position: fixed; top: 0; right: 0; bottom: 0; left: 0; cursor: pointer; z-index: @z-index-modal; background-color: @modal-backdrop-background-color; &.fade { transition: e('all @{modal-backdrop-transition-duration} ease'); opacity: 0.0; &.in { opacity: 1.0; } } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Modal -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .modal { position: fixed; top: 50%; left: @modal-margin-horizontal; right: @modal-margin-horizontal; display: block; width: @modal-width; max-height: 100%; margin: 0px; z-index: @z-index-modal + 1; box-sizing: @modal-box-sizing; .background-clip(@modal-background-clip); .modal-element-variant('modal'); &:hover, &:focus, &:active { outline: 0; } &.fade { transition: e('all @{modal-transition-duration} ease'); opacity: 0.0; .scale3d(0.5, 0.5, 0.5); .modal-close { .rotate(-360deg); } &.in { opacity: 1.0; .scale3d(1.0, 1.0, 1.0); .modal-close { .rotate(0deg); } } } /* ----------------------------------------------------------------------------- Container ----------------------------------------------------------------------------- */ .container { width: auto; margin-left: 0px; margin-right: 0px; &.container-fluid { margin-left: 0px; margin-right: 0px; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Modal Content -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .modal-content { position: relative; &:before { content: ''; position: fixed; top: 0px; left: 0px; width: 100%; height: (2 * (@modal-header-padding-vertical * 0.5)) + @button-large-height; display: block; @color-top: @modal-background-color; @color-top-red: red(color(@color-top)); @color-top-green: green(color(@color-top)); @color-top-blue: blue(color(@color-top)); @color-bottom: rgba(@color-top-red, @color-top-green, @color-top-blue, 0.0); #gradient > .vertical-three-colors(@color-top, 0%, @color-top, 80%, @color-bottom, 100%); z-index: 2; } .ps-scrollbar-x-rail, .ps-scrollbar-y-rail { position: fixed; z-index: 3; } .modal-content-inner { position: relative; padding-top: (2 * (@modal-header-padding-vertical * 0.5)) + @button-large-height; width: 100%; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Modal Close -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .modal-close { display: block; position: fixed; top: @modal-header-padding-vertical * 0.5; left: 50%; z-index: @z-index-modal + 2; width: @button-large-height; height: @button-large-height; margin-left: -(@button-large-height) * 0.5; cursor: pointer; transition: e('all 0.15s ease'); border-radius: 50%; box-sizing: content-box; border: 1px solid hsla(hue(color(color-lighten(@neutral, 0))), saturation(color(color-lighten(@neutral, 0))), lightness(color(color-lighten(@neutral, 0))), 0.2); span { display: none; } &:before, &:after { content: ''; display: block; width: @button-large-height * 0.5; height: 2px; position: absolute; top: (@button-large-height * 0.5) - 1px; left: 50%; margin-left: -(@button-large-height * 0.5) * 0.5; .rotate(45deg); background-color: @neutral; opacity: 0.8; } &:after { .rotate(-45deg); } &:hover { border: 1px solid hsla(hue(color(color-lighten(@neutral, 0))), saturation(color(color-lighten(@neutral, 0))), lightness(color(color-lighten(@neutral, 0))), 0.6); .rotate(90deg); &:before, &:after { opacity: 0.8; } } &:active { border: 1px solid @body-text-link-text-color; background: @body-text-link-text-color; .rotate(0deg); &:before, &:after { background-color: @white; } } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Modal Header -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .modal-header { padding: @modal-header-padding-vertical @modal-header-padding-horizontal; .modal-element-variant('modal-header'); } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Modal Body -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .modal-body { padding: @modal-body-padding-vertical @modal-body-padding-horizontal; .modal-element-variant('modal-body'); } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Modal footer -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .modal-footer { padding: @modal-footer-padding-vertical @modal-footer-padding-horizontal; .modal-element-variant('modal-footer'); } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Modal (Fullscreen) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ &.modal-fullscreen { width: 100% !important; height: 100% !important; margin: 0px !important; top: 0px !important; left: 0px !important; /* ----------------------------------------------------------------------------- Modal Content ----------------------------------------------------------------------------- */ .modal-content { .modal-content-inner { padding-top: (2 * (@modal-header-padding-vertical * 0.5)) + @button-large-height; padding-bottom: (2 * (@modal-header-padding-vertical * 0.5)) + @button-large-height; } } /* ----------------------------------------------------------------------------- Modal Close ----------------------------------------------------------------------------- */ .modal-close { top: @modal-header-padding-vertical * 0.5; border: 1px solid hsla(hue(color(color-lighten(@neutral, 0))), saturation(color(color-lighten(@neutral, 0))), lightness(color(color-lighten(@neutral, 0))), 0.2); &:before, &:after { background-color: @neutral; opacity: 0.8; } &:hover { border: 1px solid hsla(hue(color(color-lighten(@neutral, 0))), saturation(color(color-lighten(@neutral, 0))), lightness(color(color-lighten(@neutral, 0))), 0.6); &:before, &:after { opacity: 0.8; } } &:active { border: 1px solid @body-text-link-text-color; background: @body-text-link-text-color; &:before, &:after { background-color: @white; } } } /* ----------------------------------------------------------------------------- Container ----------------------------------------------------------------------------- */ .container { margin-left: auto; margin-right: auto; width: @modal-fullscreen-container; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Modal Content -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .modal-content { height: 100% !important; display: flex; flex-direction: row; align-items: center; .modal-content-inner { max-height: 100%; } } } } } & when (@modal-enabled) and (@screen-mini-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Mini (@screen-mini) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media (min-width: @screen-mini) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Modal -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .modal { } } } & when (@modal-enabled) and (@screen-small-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Small (@screen-small) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media (min-width: @screen-small) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Modal -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .modal { left: 50%; width: @modal-width-screen-small; margin: 0px 0px 0px (-1 * @modal-width-screen-small * 0.5); /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Modal Close -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .modal-close { top: -(@modal-header-padding-vertical-screen-small + (@button-large-height * @button-large-height-scale-screen-small)); width: @button-large-height * @button-large-height-scale-screen-small; height: @button-large-height * @button-large-height-scale-screen-small; margin-left: -(@button-large-height * @button-large-height-scale-screen-small) * 0.5; border: 1px solid rgba(255, 255, 255, 0.6); &:before, &:after { width: @button-large-height * @button-large-height-scale-screen-small * 0.5; top: (@button-large-height * @button-large-height-scale-screen-small * 0.5) - 1px; margin-left: -(@button-large-height * @button-large-height-scale-screen-small * 0.5) * 0.5; background-color: @white; } &:hover { border: 1px solid rgba(255, 255, 255, 1.0); &:before, &:after { color: @body-text-link-hover-text-color; } } &:active { border: 1px solid @body-text-link-text-color; background: @body-text-link-text-color; &:before, &:after { color: @body-text-link-active-text-color; } } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Modal Header -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .modal-content { &:before { display: none; } .modal-content-inner { padding-top: 0px; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Modal Header -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .modal-header { padding: @modal-header-padding-vertical-screen-small @modal-header-padding-horizontal-screen-small; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Modal Body -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .modal-body { padding: @modal-body-padding-vertical-screen-small @modal-body-padding-horizontal-screen-small; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Modal footer -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .modal-footer { padding: @modal-footer-padding-vertical-screen-small @modal-footer-padding-horizontal-screen-small; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Modal (Fullscreen) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ &.modal-fullscreen { /* ----------------------------------------------------------------------------- Modal Content ----------------------------------------------------------------------------- */ .modal-content { &:before { display: block; height: (2 * (@modal-header-padding-vertical-screen-small * 0.5)) + (@button-large-height * @button-large-height-scale-screen-small) - ( @modal-header-padding-vertical-screen-small * 0.5); } .modal-content-inner { padding-top: (2 * (@modal-header-padding-vertical-screen-small * 0.5)) + (@button-large-height * @button-large-height-scale-screen-small) - ( @modal-header-padding-vertical-screen-small * 0.5); padding-bottom: (2 * (@modal-header-padding-vertical-screen-small * 0.5)) + (@button-large-height * @button-large-height-scale-screen-small) - ( @modal-header-padding-vertical-screen-small * 0.5); } } /* ----------------------------------------------------------------------------- Modal Close ----------------------------------------------------------------------------- */ .modal-close { top: @modal-header-padding-vertical-screen-small * 0.5;; } /* ----------------------------------------------------------------------------- Container ----------------------------------------------------------------------------- */ .container { width: @modal-fullscreen-container-screen-small; } } } } } & when (@modal-enabled) and (@screen-medium-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Medium (@screen-medium) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media (min-width: @screen-medium) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Modal -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .modal { width: @modal-width-screen-medium; margin: 0px 0px 0px (-1 * @modal-width-screen-medium * 0.5); /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Modal Close -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .modal-close { top: -(@modal-header-padding-vertical-screen-medium + (@button-large-height * @button-large-height-scale-screen-medium)); width: @button-large-height * @button-large-height-scale-screen-medium; height: @button-large-height * @button-large-height-scale-screen-medium; margin-left: -(@button-large-height * @button-large-height-scale-screen-medium) * 0.5; &:before, &:after { width: @button-large-height * @button-large-height-scale-screen-medium * 0.5; top: (@button-large-height * @button-large-height-scale-screen-medium * 0.5) - 1px; margin-left: -(@button-large-height * @button-large-height-scale-screen-medium * 0.5) * 0.5; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Modal Header -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .modal-header { padding: @modal-header-padding-vertical-screen-medium @modal-header-padding-horizontal-screen-medium; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Modal Body -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .modal-body { padding: @modal-body-padding-vertical-screen-medium @modal-body-padding-horizontal-screen-medium; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Modal footer -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .modal-footer { padding: @modal-footer-padding-vertical-screen-medium @modal-footer-padding-horizontal-screen-medium; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Modal (Fullscreen) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ &.modal-fullscreen { /* ----------------------------------------------------------------------------- Modal Content ----------------------------------------------------------------------------- */ .modal-content { &:before { height: (2 * (@modal-header-padding-vertical-screen-medium * 0.5)) + (@button-large-height * @button-large-height-scale-screen-medium) - ( @modal-header-padding-vertical-screen-medium * 0.5); } .modal-content-inner { padding-top: (2 * (@modal-header-padding-vertical-screen-medium * 0.5)) + (@button-large-height * @button-large-height-scale-screen-medium) - ( @modal-header-padding-vertical-screen-medium * 0.5); padding-bottom: (2 * (@modal-header-padding-vertical-screen-medium * 0.5)) + (@button-large-height * @button-large-height-scale-screen-medium) - ( @modal-header-padding-vertical-screen-medium * 0.5); } } /* ----------------------------------------------------------------------------- Modal Close ----------------------------------------------------------------------------- */ .modal-close { top: @modal-header-padding-vertical-screen-medium * 0.5;; } /* ----------------------------------------------------------------------------- Container ----------------------------------------------------------------------------- */ .container { width: @modal-fullscreen-container-screen-medium; } } } } } & when (@modal-enabled) and (@screen-large-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: large (@screen-large) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media (min-width: @screen-large) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Modal -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .modal { width: @modal-width-screen-large; margin: 0px 0px 0px (-1 * @modal-width-screen-large * 0.5); /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Modal Close -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .modal-close { top: -(@modal-header-padding-vertical-screen-large + (@button-large-height * @button-large-height-scale-screen-large)); width: @button-large-height * @button-large-height-scale-screen-large; height: @button-large-height * @button-large-height-scale-screen-large; margin-left: -(@button-large-height * @button-large-height-scale-screen-large) * 0.5; &:before, &:after { width: @button-large-height * @button-large-height-scale-screen-large * 0.5; top: (@button-large-height * @button-large-height-scale-screen-large * 0.5) - 1px; margin-left: -(@button-large-height * @button-large-height-scale-screen-large * 0.5) * 0.5; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Modal Header -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .modal-header { padding: @modal-header-padding-vertical-screen-large @modal-header-padding-horizontal-screen-large; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Modal Body -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .modal-body { padding: @modal-body-padding-vertical-screen-large @modal-body-padding-horizontal-screen-large; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Modal footer -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .modal-footer { padding: @modal-footer-padding-vertical-screen-large @modal-footer-padding-horizontal-screen-large; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Modal (Fullscreen) -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ &.modal-fullscreen { /* ----------------------------------------------------------------------------- Modal Content ----------------------------------------------------------------------------- */ .modal-content { &:before { height: (2 * (@modal-header-padding-vertical-screen-large * 0.5)) + (@button-large-height * @button-large-height-scale-screen-large); } .modal-content-inner { padding-top: (2 * (@modal-header-padding-vertical-screen-large * 0.5)) + (@button-large-height * @button-large-height-scale-screen-large); padding-bottom: (2 * (@modal-header-padding-vertical-screen-large * 0.5)) + (@button-large-height * @button-large-height-scale-screen-large); } } /* ----------------------------------------------------------------------------- Modal Close ----------------------------------------------------------------------------- */ .modal-close { top: @modal-header-padding-vertical-screen-large * 0.5;; } /* ----------------------------------------------------------------------------- Container ----------------------------------------------------------------------------- */ .container { width: @modal-fullscreen-container-screen-large; } } } } } & when (@modal-enabled) and (@screen-resolution-2x-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Resolution: 2x -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media only screen and (-webkit-min-device-pixel-ratio: 2) { } } & when (@modal-enabled) and (@screen-resolution-3x-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Resolution: 3x -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media only screen and (-webkit-min-device-pixel-ratio: 3) { } }