diff --git a/djangocms_text/static/djangocms_text/css/cms.text.css b/djangocms_text/static/djangocms_text/css/cms.text.css index 0ca2162c..184ff125 100644 --- a/djangocms_text/static/djangocms_text/css/cms.text.css +++ b/djangocms_text/static/djangocms_text/css/cms.text.css @@ -16,3 +16,155 @@ display: none; } } + + +#cms-top dialog.cms-dialog { + padding: 0; + resize: both; + top: 50%; + left: 50%; + inset-inline-start: 50%; + inset-inline-end: unset; + transform: translate(calc(-50% + 250px), calc(-50% + 121px)); + width: 32rem; + height: 24rem; + min-height: 16rem; + min-width: 16rem; + .cms-modal-foot { + margin-inline-end: 1rem; + .cms-modal-buttons { + padding-inline-end: 10px; + } + } + .cms-modal-body iframe { + width: 100%; + height: 100%; + border: none; + } +} + +[dir="rtl"] dialog.cms-dialog { + inset-inline-start: unset; + inset-inline-end: 50%; +} + +dialog.cms-form-dialog { + &::before { + position: absolute; + background: var(--dca-white); + border: 1px solid var(--dca-gray-light); + box-shadow: 0 0 10px rgba(var(--dca-shadow), .25); + height: 10px; + width: 10px; + left: 24px; + top: 8px; + transform: rotate(-135deg); + transform-origin: 0 0; + content: ""; + } + &.right::before { + right: 24px; + left: auto; + } + &::after { + position: absolute; + background: var(--dca-white); + height: 10px; + left: 10px; + top: 0; + width: 40px; + content: ""; + } + &.right::after { + right: 10px; + left: auto; + } + .dropback { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: -1; + cursor: unset; /* browser default */ + } + z-index: 1001; + position: fixed; + margin: unset; + left: auto; + transform: translate(-50%, -50%); + min-width: 200px; + padding: 10px 15px; + background-color: var(--dca-white); + border: 1px solid var(--dca-gray-light); + border-radius: 5px; + box-shadow: 0 0 10px rgba(var(--dca-shadow), .25); + form { + display: flex; + flex-flow: row; + justify-content: space-between; + align-content: baseline; + align-items: center; + } + .cancel { + display: inline-flex; + color: #f00; + margin-left: 0.5em; + margin-right: 0.5em; + cursor: pointer; + } + .submit { + display: inline-flex; + color: #693; + cursor: pointer; + } +} + + +form.cms-form { + display: flex; + flex-flow: row; + justify-content: space-between; + align-content: baseline; + align-items: center; + text-align: start; + zoom: 1; + input, select { + min-width: 200px; + width: 100%; + margin-bottom: 3px; + font-size: 0.8rem; + min-height: 1rem; + line-height: unset; + height: unset; + padding: 3px 6px !important; + } + select { /* !important for djangocms-admin-style */ + background: var(--dca-white) url('data:image/svg+xml;utf8,') no-repeat right center !important; + background-size: auto 1em !important; + appearance: none; + } + label { + font-size: 0.7rem; + padding-bottom: 4px; + } + hr { + margin: 0.3em -1em; + } + .cms-form-buttons { + display: inline-flex; + margin-inline-start: 1em; + .cancel { + color: #f00; + cursor: pointer; + zoom: 1.2; + } + .submit { + margin-left: 0.5em; + margin-right: 0.5em; + color: #693; + cursor: pointer; + zoom: 1.2; + } + } +} diff --git a/private/css/cms.dialog.css b/private/css/cms.dialog.css deleted file mode 100644 index 078c3a89..00000000 --- a/private/css/cms.dialog.css +++ /dev/null @@ -1,151 +0,0 @@ - -#cms-top dialog.cms-dialog { - padding: 0; - resize: both; - top: 50%; - left: 50%; - inset-inline-start: 50%; - inset-inline-end: unset; - transform: translate(calc(-50% + 250px), calc(-50% + 121px)); - width: 32rem; - height: 24rem; - min-height: 16rem; - min-width: 16rem; - .cms-modal-foot { - margin-inline-end: 1rem; - .cms-modal-buttons { - padding-inline-end: 10px; - } - } - .cms-modal-body iframe { - width: 100%; - height: 100%; - border: none; - } -} - -[dir="rtl"] dialog.cms-dialog { - inset-inline-start: unset; - inset-inline-end: 50%; -} - -dialog.cms-form-dialog { - &::before { - position: absolute; - background: var(--dca-white); - border: 1px solid var(--dca-gray-light); - box-shadow: 0 0 10px rgba(var(--dca-shadow), .25); - height: 10px; - width: 10px; - left: 24px; - top: 8px; - transform: rotate(-135deg); - transform-origin: 0 0; - content: ""; - } - &.right::before { - right: 24px; - left: auto; - } - &::after { - position: absolute; - background: var(--dca-white); - height: 10px; - left: 10px; - top: 0; - width: 40px; - content: ""; - } - &.right::after { - right: 10px; - left: auto; - } - .dropback { - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100%; - z-index: -1; - cursor: unset; /* browser default */ - } - z-index: 1001; - position: fixed; - margin: unset; - left: auto; - transform: translate(-50%, -50%); - min-width: 200px; - padding: 10px 15px; - background-color: var(--dca-white); - border: 1px solid var(--dca-gray-light); - border-radius: 5px; - box-shadow: 0 0 10px rgba(var(--dca-shadow), .25); - form { - display: flex; - flex-flow: row; - justify-content: space-between; - align-content: baseline; - align-items: center; - } - .cancel { - display: inline-flex; - color: #f00; - margin-left: 0.5em; - margin-right: 0.5em; - cursor: pointer; - } - .submit { - display: inline-flex; - color: #693; - cursor: pointer; - } -} - - -form.cms-form { - display: flex; - flex-flow: row; - justify-content: space-between; - align-content: baseline; - align-items: center; - text-align: start; - zoom: 1; - input, select { - min-width: 200px; - width: 100%; - margin-bottom: 3px; - font-size: 0.8rem; - min-height: 1rem; - line-height: unset; - height: unset; - padding: 3px 6px !important; - } - select { /* !important for djangocms-admin-style */ - background: var(--dca-white) url('data:image/svg+xml;utf8,') no-repeat right center !important; - background-size: auto 1em !important; - appearance: none; - } - label { - font-size: 0.7rem; - padding-bottom: 4px; - } - hr { - margin: 0.3em -1em; - } - .cms-form-buttons { - display: inline-flex; - margin-inline-start: 1em; - .cancel { - color: #f00; - cursor: pointer; - zoom: 1.2; - } - .submit { - margin-left: 0.5em; - margin-right: 0.5em; - color: #693; - cursor: pointer; - zoom: 1.2; - } - } -} diff --git a/private/js/cms.dialog.js b/private/js/cms.dialog.js index 6ada08d6..bea2521c 100644 --- a/private/js/cms.dialog.js +++ b/private/js/cms.dialog.js @@ -2,8 +2,6 @@ /* jshint esversion: 6 */ /* global document, window, console */ -import "../css/cms.dialog.css"; - class CmsDialog { /** * Constructor for creating an instance of the class whowing a django CMS modal in a