diff options
Diffstat (limited to 'catalog-ui/app/styles/modal.less')
| -rw-r--r-- | catalog-ui/app/styles/modal.less | 356 |
1 files changed, 356 insertions, 0 deletions
diff --git a/catalog-ui/app/styles/modal.less b/catalog-ui/app/styles/modal.less new file mode 100644 index 0000000000..7c8bcd7c1d --- /dev/null +++ b/catalog-ui/app/styles/modal.less @@ -0,0 +1,356 @@ +/* ----------------------------------------------------- +OVERRIDE BOOTSTRAP TO CENTER MODAL VERTICALLY. +----------------------------------------------------- */ +.modal { + text-align: center; + padding: 0!important; +} + +.modal:before { + content: ''; + display: inline-block; + height: 100%; + vertical-align: middle; + margin-right: -4px; +} + +/* ----------------------------------------------------- +MODAL SIZES +----------------------------------------------------- */ +.modal-dialog.modal-sdc-xl { + width: 1200px; +} + +.modal-dialog.modal-sdc-l { + width: 875px; +} + +.modal-dialog.modal-sdc-md { + width: 650px; +} + +.modal-dialog.modal-sdc-sm { + width: 552px; +} + +.modal-dialog.modal-sdc-xsm { + width: 432px; +} + +/* ----------------------------------------------------- +MODAL WRAPPER +----------------------------------------------------- */ +.modal-dialog { + /* + margin-top: 110px; + width: 1000px; + */ + display: inline-block; + text-align: left; + vertical-align: middle; +} + +.modal-content { + /*.border-radius(4px); + background-color: #ffffff; + box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.5); + min-height: 200px;*/ +} + +.modal-backdrop.in { + // opacity: .8; +} + +.modal-backdrop { + background-color: #111922; //TODO: Replace the color +} + +/* ----------------------------------------------------- +PREVIOUS MODAL +----------------------------------------------------- */ +/*.w-sdc-modal, +.modal-dialog, +.w-sdc-modal-confirmation { + + .w-sdc-modal-head { + .s_18_r; + height: 48px; + line-height: 48px; + text-align: center; + } + + .w-sdc-modal-body { + height: auto; + padding: 20px 40px 20px 40px; + border-bottom: solid 1px @color_a; + position: relative; + } + + .w-sdc-modal-body-content { + .b_1; + padding: 10px 0 0 0; + } + + .w-sdc-modal-icon { + display: inline-block; + } + + .w-sdc-modal-icon-DEBUG { .sprite; .message-DEBUG;} + .w-sdc-modal-icon-INFO { .sprite; .message-INFO;} + .w-sdc-modal-icon-WARNING { .sprite; .message-WARNING;} + .w-sdc-modal-icon-ERROR { .sprite; .message-ERROR;} + + .w-sdc-modal-caption { + .a_6; + display: inline-block; + padding: 0 0 0 25px; + vertical-align: top; + } + + .w-sdc-modal-action { + height: 99px; + text-align: center; + vertical-align: middle; + line-height: 105px; + } + + .sdc-resource-viewer-modal-head { + .c_2; + border-radius: 6px 6px 0 0; + height: 30px; + line-height: 30px; + text-align: center; + } + + .w-sdc-modal-close { + background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAANCAYAAACdKY9CAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDE0IDc5LjE1Njc5NywgMjAxNC8wOC8yMC0wOTo1MzowMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkZDQUM1MUVFMDg1NDExRTVBMzdBQ0IxMzM2OTYwNjM2IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkZDQUM1MUVGMDg1NDExRTVBMzdBQ0IxMzM2OTYwNjM2Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6RkNBQzUxRUMwODU0MTFFNUEzN0FDQjEzMzY5NjA2MzYiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6RkNBQzUxRUQwODU0MTFFNUEzN0FDQjEzMzY5NjA2MzYiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4EGRD0AAAAhElEQVR42mL8/+8fAxAIAvF7BvwArIYJSKQB8V0gNsajGKEGaMMZIP4PxO+A2BhkIxpOg8qDcAdIQBCPJmTFM8HOh0pg04ShGFkDNk0YitE1wDTdRVK8Ct1P+DyINSAY8HgQa0DgDA1coYdLMc7QQ464mVgiDV0TPOLKcShG1gRWAxBgACObyGI1tr+eAAAAAElFTkSuQmCC'); + color: #3499F7; //TODO: Replace the color, should be sprite + .hand; + position: absolute; + right: 20px; + top: 20px; + display: block; + height: 13px; + width: 12px; + border-radius: 50%; + } + + .w-sdc-resource-viewer-modal-close { + color: #3499F7; //TODO: Replace the color, should be sprite + .hand; + position: absolute; + right: 20px; + top: 5px; + display: block; + line-height: normal; + font-size: 18px; + font-weight: bold; + } + +}*/ + +/* ----------------------------------------------------- +NEW DESIGN MODAL +----------------------------------------------------- */ +.modal-type-standard.w-sdc-classic-modal { + .w-sdc-modal-head { + border-bottom: solid 3px @main_color_a; + } +} +.modal-type-error.w-sdc-classic-modal { + .w-sdc-modal-head { + border-bottom: solid 3px @func_color_q; + } +} +.modal-type-alert.w-sdc-classic-modal { + .w-sdc-modal-head { + border-bottom: solid 3px @main_color_h; + } +} + +.w-sdc-classic-modal { + + display: flex; + flex-direction: column; + .border-radius(4px); + background-color: #ffffff; + box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.5); + min-height: 165px; + min-width: 430px; + + .w-sdc-modal-head { + flex-grow: 1; + .s_18_m; + height: 48px; + line-height: 48px; + display: flex; + text-align: left; + border-bottom: solid 3px @main_color_a; + align-items: center; + + .w-sdc-modal-head-text { + .s_18_m; + flex-grow: 999; + } + + .w-sdc-modal-close { + flex-grow: 1; + .sprite; + .sprite.x-btn-black; + cursor: pointer; + } + } + + .w-sdc-modal-body { + flex-grow: 999; + .m_14_r; + padding-top: 20px; + position: relative; + border-bottom: none; + } + + .w-sdc-modal-footer { + clear: both; + flex-grow: 1; + display: flex; + align-items: center; + justify-content: flex-end; + border-radius: 6px; + background-color: #f8f8f8; + + button { + display: block; + margin-right: 11px; + } + + button:last-child { + margin-right: 0; + } + + } + +} + +.w-sdc-classic-top-line-modal { + + display: flex; + flex-direction: column; + background-color: #ffffff; + box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.5); + min-height: 165px; + min-width: 430px; + border-top: solid 3px @main_color_a; + + .w-sdc-modal-head { + flex-grow: 1; + .s_18_r; + height: 48px; + line-height: 48px; + display: flex; + text-align: left; + align-items: center; + + .w-sdc-modal-head-text { + .s_18_m; + flex-grow: 999; + } + + .w-sdc-modal-close { + flex-grow: 1; + .sprite; + .sprite.x-btn-black; + cursor: pointer; + } + } + + .w-sdc-modal-body { + flex-grow: 999; + .m_14_r; + padding-top: 10px; + position: relative; + border-bottom: none; + } + + .w-sdc-modal-footer { + flex-grow: 1; + display: flex; + align-items: center; + justify-content: flex-end; + + button { + display: block; + margin-right: 11px; + } + + button:last-child { + margin-right: 0; + } + + } + +} + +.modal-sdc-xl { + .w-sdc-classic-modal { + padding: 0 40px; + + .w-sdc-modal-head { + .b_15; + height: 60px; + line-height: 60px; + + .w-sdc-modal-head-text { + flex-grow: 999; + } + + .w-sdc-modal-close { + top: 27px; + right: 41px; + } + } + + .w-sdc-modal-footer { + height: 80px; + margin: 0 -40px; + padding: 0 40px; + background-color: #f2f2f2; + } + + } +} + +.modal-sdc-xl, +.modal-sdc-l, +.modal-sdc-md, +.modal-sdc-sm, +.modal-sdc-xsm { + + .w-sdc-classic-top-line-modal { + padding: 0 30px; + + .w-sdc-modal-footer { + margin: 0 -30px; + padding: 17px 30px; + } + } + + .w-sdc-classic-modal { + padding: 0 30px; + + .w-sdc-modal-head { + .b_19; + height: 50px; + line-height: 50px; + + .w-sdc-modal-close { + top: 21px; + right: 30px; + } + } + + .w-sdc-modal-footer { + margin: 0 -30px; + padding: 17px 30px; + } + } +} |