diff --git a/core/modules/system/css/ajax-progress.module.css b/core/modules/system/css/ajax-progress.module.css new file mode 100644 index 0000000..050aab6 --- /dev/null +++ b/core/modules/system/css/ajax-progress.module.css @@ -0,0 +1,41 @@ +/* Throbber */ +.ajax-progress { + display: inline-block; + padding: 1px 5px 2px 5px; +} +[dir="rtl"] .ajax-progress { + float: right; +} +.ajax-progress-throbber .throbber { + background: transparent url(../../../misc/throbber-active.gif) no-repeat 0px center; + display: inline; + padding: 1px 5px 2px; +} +.ajax-progress-throbber .message { + display: inline; + padding: 1px 5px 2px; +} +tr .ajax-progress-throbber .throbber { + margin: 0 2px; +} +.ajax-progress-bar { + width: 16em; +} + +/* Full screen throbber */ +.ajax-progress-fullscreen { + /* Can't do center:50% middle: 50%, so approximate it for a typical window size. */ + left: 49%; + position: fixed; + top: 48.5%; + z-index: 1000; + background-color: #232323; + background-image: url("../../../misc/loading-small.gif"); + background-position: center center; + background-repeat: no-repeat; + border-radius: 7px; + height: 24px; + opacity: 0.9; + padding: 4px; + width: 24px; +} diff --git a/core/modules/system/css/align.module.css b/core/modules/system/css/align.module.css new file mode 100644 index 0000000..d92476f --- /dev/null +++ b/core/modules/system/css/align.module.css @@ -0,0 +1,30 @@ +/** + * Text alignment classes. + */ +.text-align-left { + text-align: left; +} +.text-align-right { + text-align: right; +} +.text-align-center { + text-align: center; +} +.text-align-justify { + text-align: justify; +} + +/** + * Alignment classes (images, videos, blockquotes …). + */ +.align-left { + float: left; +} +.align-right { + float: right; +} +.align-center { + display: block; + margin-left: auto; + margin-right: auto; +} diff --git a/core/modules/system/css/clearfix.module.css b/core/modules/system/css/clearfix.module.css new file mode 100644 index 0000000..a2b800b --- /dev/null +++ b/core/modules/system/css/clearfix.module.css @@ -0,0 +1,13 @@ +/** + * Float clearing. + * + * Based on the micro clearfix hack by Nicolas Gallagher, with the :before + * pseudo selector removed to allow normal top margin collapse. + * + * @see http://nicolasgallagher.com/micro-clearfix-hack + */ +.clearfix:after { + content: ""; + display: table; + clear: both; +} diff --git a/core/modules/system/css/components/link.theme.css b/core/modules/system/css/components/link.theme.css new file mode 100644 index 0000000..636af77 --- /dev/null +++ b/core/modules/system/css/components/link.theme.css @@ -0,0 +1,11 @@ +button.link { + background: transparent; + border: 0; + cursor: pointer; + margin: 0; + padding: 0; + font-size: 1em; +} +label button.link { + font-weight: bold; +} diff --git a/core/modules/system/css/components/links.theme.css b/core/modules/system/css/components/links.theme.css index 0a8e2c3..cfafd96 100644 --- a/core/modules/system/css/components/links.theme.css +++ b/core/modules/system/css/components/links.theme.css @@ -16,14 +16,3 @@ ul.inline li { ul.links a.is-active { color: #000; } -button.link { - background: transparent; - border: 0; - cursor: pointer; - margin: 0; - padding: 0; - font-size: 1em; -} -label button.link { - font-weight: bold; -} diff --git a/core/modules/system/css/container-inline.module.css b/core/modules/system/css/container-inline.module.css new file mode 100644 index 0000000..33fe778 --- /dev/null +++ b/core/modules/system/css/container-inline.module.css @@ -0,0 +1,11 @@ +/** + * Inline items. + */ +.container-inline div, +.container-inline label { + display: inline; +} +/* Details contents always need to be rendered as block. */ +.container-inline .details-wrapper { + display: block; +} diff --git a/core/modules/system/css/details.module.css b/core/modules/system/css/details.module.css new file mode 100644 index 0000000..e8e8dd6 --- /dev/null +++ b/core/modules/system/css/details.module.css @@ -0,0 +1,8 @@ +/** + * Collapsible details. + * + * @see collapse.js + */ +.js details:not([open]) .details-wrapper { + display: none; +} diff --git a/core/modules/system/css/form--inline.module.css b/core/modules/system/css/form--inline.module.css new file mode 100644 index 0000000..f67aba6 --- /dev/null +++ b/core/modules/system/css/form--inline.module.css @@ -0,0 +1,25 @@ +/* Display form elements horizontally. */ +.form--inline .form-item { + float: left; /* LTR */ + margin-right: 0.5em; /* LTR */ +} +[dir="rtl"] .form--inline .form-item { + float: right; + margin-right: 0; + margin-left: 0.5em; +} +.form--inline .form-item-separator { + margin-top: 2.3em; + margin-right: 1em; /* LTR */ + margin-left: 0.5em; /* LTR */ +} +[dir="rtl"] .form--inline .form-item-separator { + margin-right: 0.5em; + margin-left: 1em; +} +.form--inline .form-actions { + clear: left; /* LTR */ +} +[dir="rtl"] .form--inline .form-actions { + clear: right; +} diff --git a/core/modules/system/css/hidden.module.css b/core/modules/system/css/hidden.module.css new file mode 100644 index 0000000..d291101 --- /dev/null +++ b/core/modules/system/css/hidden.module.css @@ -0,0 +1,48 @@ +/** + * Hide elements from all users. + * + * Used for elements which should not be immediately displayed to any user. An + * example would be collapsible details that will be expanded with a click + * from a user. The effect of this class can be toggled with the jQuery show() + * and hide() functions. + */ +.hidden { + display: none; +} + +/** + * Hide elements visually, but keep them available for screen readers. + * + * Used for information required for screen reader users to understand and use + * the site where visual display is undesirable. Information provided in this + * manner should be kept concise, to avoid unnecessary burden on the user. + * "!important" is used to prevent unintentional overrides. + */ +.visually-hidden { + position: absolute !important; + clip: rect(1px, 1px, 1px, 1px); + overflow: hidden; + height: 1px; + width: 1px; + word-wrap: normal; +} + +/** + * The .focusable class extends the .visually-hidden class to allow + * the element to be focusable when navigated to via the keyboard. + */ +.visually-hidden.focusable:active, +.visually-hidden.focusable:focus { + position: static !important; + clip: auto; + overflow: visible; + height: auto; + width: auto; +} + +/** + * Hide visually and from screen readers, but maintain layout. + */ +.invisible { + visibility: hidden; +} diff --git a/core/modules/system/css/js.module.css b/core/modules/system/css/js.module.css new file mode 100644 index 0000000..cdbea3d --- /dev/null +++ b/core/modules/system/css/js.module.css @@ -0,0 +1,17 @@ +/** + * For anything you want to hide on page load when JS is enabled, so + * that you can use the JS to control visibility and avoid flicker. + */ +.js .js-hide { + display: none; +} + +/** + * For anything you want to show on page load only when JS is enabled. + */ +.js-show { + display: none; +} +.js .js-show { + display: block; +} diff --git a/core/modules/system/css/nowrap.module.css b/core/modules/system/css/nowrap.module.css new file mode 100644 index 0000000..4950d3e --- /dev/null +++ b/core/modules/system/css/nowrap.module.css @@ -0,0 +1,6 @@ +/** + * Prevent text wrapping. + */ +.nowrap { + white-space: nowrap; +} diff --git a/core/modules/system/css/position-container.module.css b/core/modules/system/css/position-container.module.css new file mode 100644 index 0000000..a1bc293 --- /dev/null +++ b/core/modules/system/css/position-container.module.css @@ -0,0 +1,6 @@ +/* + * Contain positioned elements. + */ +.position-container { + position: relative; +} diff --git a/core/modules/system/css/progress.module.css b/core/modules/system/css/progress.module.css new file mode 100644 index 0000000..d845c82 --- /dev/null +++ b/core/modules/system/css/progress.module.css @@ -0,0 +1,48 @@ +/** + * Progress behavior. + * + * @see progress.js + */ +.progress { + position: relative; +} +.progress__track { + background-color: #fff; + border: 1px solid; + margin-top: 5px; + max-width: 100%; + min-width: 100px; + height: 16px; +} +.progress__bar { + background-color: #000; + height: 1.5em; + min-width: 3%; + max-width: 100%; +} +.progress__description, +.progress__percentage { + color: #555; + overflow: hidden; + font-size: .875em; + margin-top: 0.2em; +} +.progress__description { + float: left; /* LTR */ +} +[dir="rtl"] .progress__description { + float: right; +} +.progress__percentage { + float: right; /* LTR */ +} +[dir="rtl"] .progress__percentage { + float: left; +} +.progress--small .progress__track { + height: 7px; +} +.progress--small .progress__bar { + height: 7px; + background-size: 20px 20px; +} diff --git a/core/modules/system/css/reset-appearance.module.css b/core/modules/system/css/reset-appearance.module.css new file mode 100644 index 0000000..d76a199 --- /dev/null +++ b/core/modules/system/css/reset-appearance.module.css @@ -0,0 +1,13 @@ +/* + * Remove browser styles, especially for and so on. + */ +.reset-appearance { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + border: 0 none; + background: transparent; + padding: 0; + margin: 0; + line-height: inherit; +} diff --git a/core/modules/system/css/resize.module.css b/core/modules/system/css/resize.module.css new file mode 100644 index 0000000..7f61e6d --- /dev/null +++ b/core/modules/system/css/resize.module.css @@ -0,0 +1,25 @@ +/** + * Resizable textareas. + */ +.form-textarea-wrapper textarea { + display: block; + margin: 0; + width: 100%; + box-sizing: border-box; +} +.resize-none { + resize: none; +} +.resize-vertical { + resize: vertical; + min-height: 2em; +} +.resize-horizontal { + resize: horizontal; + max-width: 100%; +} +.resize-both { + resize: both; + max-width: 100%; + min-height: 2em; +} diff --git a/core/modules/system/css/sticky-header.css b/core/modules/system/css/sticky-header.css new file mode 100644 index 0000000..d777e4f --- /dev/null +++ b/core/modules/system/css/sticky-header.css @@ -0,0 +1,11 @@ +/** + * TableHeader behavior. + * + * @see tableheader.js + */ +table.sticky-header { + background-color: #fff; + margin-top: 0; + z-index: 500; + top: 0; +} diff --git a/core/modules/system/css/system.module.css b/core/modules/system/css/system.module.css index 993ea52..3571f32 100644 --- a/core/modules/system/css/system.module.css +++ b/core/modules/system/css/system.module.css @@ -3,118 +3,6 @@ * Generic theme-independent base styles. */ -/** - * Collapsible details. - * - * @see collapse.js - */ -.js details:not([open]) .details-wrapper { - display: none; -} - -/** - * Resizable textareas. - */ -.form-textarea-wrapper textarea { - display: block; - margin: 0; - width: 100%; - box-sizing: border-box; -} -.resize-none { - resize: none; -} -.resize-vertical { - resize: vertical; - min-height: 2em; -} -.resize-horizontal { - resize: horizontal; - max-width: 100%; -} -.resize-both { - resize: both; - max-width: 100%; - min-height: 2em; -} - -/** - * TableDrag behavior. - * - * @see tabledrag.js - */ -body.drag { - cursor: move; -} -tr.region-title { - font-weight: bold; -} -tr.region-message { - color: #999; -} -tr.region-populated { - display: none; -} -tr.add-new .tabledrag-changed { - display: none; -} -.draggable a.tabledrag-handle { - cursor: move; - float: left; /* LTR */ - height: 1.7em; - margin-left: -1em; /* LTR */ - overflow: hidden; - text-decoration: none; -} -[dir="rtl"] .draggable a.tabledrag-handle { - float: right; - margin-right: -1em; - margin-left: 0; -} -a.tabledrag-handle:hover { - text-decoration: none; -} -a.tabledrag-handle .handle { - background: url(../../../misc/icons/787878/move.svg) no-repeat 6px 7px; - height: 14px; - margin: -0.4em 0.5em 0; - padding: 0.42em 0.5em; - width: 14px; -} -a.tabledrag-handle:hover .handle, -a.tabledrag-handle:focus .handle { - background-image: url(../../../misc/icons/000000/move.svg); -} -.touch .draggable td { - padding: 0 10px; -} -.touch .draggable .menu-item__link { - display: inline-block; - padding: 10px 0; -} -.touch a.tabledrag-handle { - height: 44px; - width: 40px; -} -.touch a.tabledrag-handle .handle { - background-position: 40% 19px; - height: 21px; -} -.touch .draggable.drag a.tabledrag-handle .handle { - background-position: 50% -32px; -} -.indentation { - float: left; /* LTR */ - height: 1.7em; - margin: -0.4em 0.2em -0.4em -0.4em; /* LTR */ - padding: 0.42em 0 0.42em 0.6em; /* LTR */ - width: 20px; -} -[dir="rtl"] .indentation { - float: right; - margin: -0.4em -0.4em -0.4em 0.2em; - padding: 0.42em 0.6em 0.42em 0; -} div.tree-child { background: url(../../../misc/tree.png) no-repeat 11px center; /* LTR */ } @@ -134,284 +22,3 @@ div.tree-child-horizontal { [dir="rtl"] .tabledrag-toggle-weight-wrapper { text-align: left; } - -/** - * TableHeader behavior. - * - * @see tableheader.js - */ -table.sticky-header { - background-color: #fff; - margin-top: 0; - z-index: 500; - top: 0; -} - -/** - * Progress behavior. - * - * @see progress.js - */ -.progress { - position: relative; -} -.progress__track { - background-color: #fff; - border: 1px solid; - margin-top: 5px; - max-width: 100%; - min-width: 100px; - height: 16px; -} -.progress__bar { - background-color: #000; - height: 1.5em; - min-width: 3%; - max-width: 100%; -} -.progress__description, -.progress__percentage { - color: #555; - overflow: hidden; - font-size: .875em; - margin-top: 0.2em; -} -.progress__description { - float: left; /* LTR */ -} -[dir="rtl"] .progress__description { - float: right; -} -.progress__percentage { - float: right; /* LTR */ -} -[dir="rtl"] .progress__percentage { - float: left; -} -.progress--small .progress__track { - height: 7px; -} -.progress--small .progress__bar { - height: 7px; - background-size: 20px 20px; -} - -/* Throbber */ -.ajax-progress { - display: inline-block; - padding: 1px 5px 2px 5px; -} -[dir="rtl"] .ajax-progress { - float: right; -} -.ajax-progress-throbber .throbber { - background: transparent url(../../../misc/throbber-active.gif) no-repeat 0px center; - display: inline; - padding: 1px 5px 2px; -} -.ajax-progress-throbber .message { - display: inline; - padding: 1px 5px 2px; -} -tr .ajax-progress-throbber .throbber { - margin: 0 2px; -} -.ajax-progress-bar { - width: 16em; -} - -/* Full screen throbber */ -.ajax-progress-fullscreen { - /* Can't do center:50% middle: 50%, so approximate it for a typical window size. */ - left: 49%; - position: fixed; - top: 48.5%; - z-index: 1000; - background-color: #232323; - background-image: url("../../../misc/loading-small.gif"); - background-position: center center; - background-repeat: no-repeat; - border-radius: 7px; - height: 24px; - opacity: 0.9; - padding: 4px; - width: 24px; -} - -/** - * Inline items. - */ -.container-inline div, -.container-inline label { - display: inline; -} -/* Details contents always need to be rendered as block. */ -.container-inline .details-wrapper { - display: block; -} -/* Display form elements horizontally. */ -.form--inline .form-item { - float: left; /* LTR */ - margin-right: 0.5em; /* LTR */ -} -[dir="rtl"] .form--inline .form-item { - float: right; - margin-right: 0; - margin-left: 0.5em; -} -.form--inline .form-item-separator { - margin-top: 2.3em; - margin-right: 1em; /* LTR */ - margin-left: 0.5em; /* LTR */ -} -[dir="rtl"] .form--inline .form-item-separator { - margin-right: 0.5em; - margin-left: 1em; -} -.form--inline .form-actions { - clear: left; /* LTR */ -} -[dir="rtl"] .form--inline .form-actions { - clear: right; -} - - -/** - * Prevent text wrapping. - */ -.nowrap { - white-space: nowrap; -} - -/** - * For anything you want to hide on page load when JS is enabled, so - * that you can use the JS to control visibility and avoid flicker. - */ -.js .js-hide { - display: none; -} - -/** - * For anything you want to show on page load only when JS is enabled. - */ -.js-show { - display: none; -} -.js .js-show { - display: block; -} - -/** - * Hide elements from all users. - * - * Used for elements which should not be immediately displayed to any user. An - * example would be collapsible details that will be expanded with a click - * from a user. The effect of this class can be toggled with the jQuery show() - * and hide() functions. - */ -.hidden { - display: none; -} - -/** - * Hide elements visually, but keep them available for screen readers. - * - * Used for information required for screen reader users to understand and use - * the site where visual display is undesirable. Information provided in this - * manner should be kept concise, to avoid unnecessary burden on the user. - * "!important" is used to prevent unintentional overrides. - */ -.visually-hidden { - position: absolute !important; - clip: rect(1px, 1px, 1px, 1px); - overflow: hidden; - height: 1px; - width: 1px; - word-wrap: normal; -} - -/** - * The .focusable class extends the .visually-hidden class to allow - * the element to be focusable when navigated to via the keyboard. - */ -.visually-hidden.focusable:active, -.visually-hidden.focusable:focus { - position: static !important; - clip: auto; - overflow: visible; - height: auto; - width: auto; -} - -/** - * Hide visually and from screen readers, but maintain layout. - */ -.invisible { - visibility: hidden; -} - -/** - * Float clearing. - * - * Based on the micro clearfix hack by Nicolas Gallagher, with the :before - * pseudo selector removed to allow normal top margin collapse. - * - * @see http://nicolasgallagher.com/micro-clearfix-hack - */ -.clearfix:after { - content: ""; - display: table; - clear: both; -} - -/** - * Text alignment classes. - */ -.text-align-left { - text-align: left; -} -.text-align-right { - text-align: right; -} -.text-align-center { - text-align: center; -} -.text-align-justify { - text-align: justify; -} - -/** - * Alignment classes (images, videos, blockquotes …). - */ -.align-left { - float: left; -} -.align-right { - float: right; -} -.align-center { - display: block; - margin-left: auto; - margin-right: auto; -} - -/* - * Remove browser styles, especially for and so on. - */ -.reset-appearance { - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - border: 0 none; - background: transparent; - padding: 0; - margin: 0; - line-height: inherit; -} - -/* - * Contain positioned elements. - */ -.position-container { - position: relative; -} diff --git a/core/modules/system/css/tabledrag.module.css b/core/modules/system/css/tabledrag.module.css new file mode 100644 index 0000000..f5596ef --- /dev/null +++ b/core/modules/system/css/tabledrag.module.css @@ -0,0 +1,78 @@ + +/** + * TableDrag behavior. + * + * @see tabledrag.js + */ +body.drag { + cursor: move; +} +tr.region-title { + font-weight: bold; +} +tr.region-message { + color: #999; +} +tr.region-populated { + display: none; +} +tr.add-new .tabledrag-changed { + display: none; +} +.draggable a.tabledrag-handle { + cursor: move; + float: left; /* LTR */ + height: 1.7em; + margin-left: -1em; /* LTR */ + overflow: hidden; + text-decoration: none; +} +[dir="rtl"] .draggable a.tabledrag-handle { + float: right; + margin-right: -1em; + margin-left: 0; +} +a.tabledrag-handle:hover { + text-decoration: none; +} +a.tabledrag-handle .handle { + background: url(../../../misc/icons/787878/move.svg) no-repeat 6px 7px; + height: 14px; + margin: -0.4em 0.5em 0; + padding: 0.42em 0.5em; + width: 14px; +} +a.tabledrag-handle:hover .handle, +a.tabledrag-handle:focus .handle { + background-image: url(../../../misc/icons/000000/move.svg); +} +.touch .draggable td { + padding: 0 10px; +} +.touch .draggable .menu-item__link { + display: inline-block; + padding: 10px 0; +} +.touch a.tabledrag-handle { + height: 44px; + width: 40px; +} +.touch a.tabledrag-handle .handle { + background-position: 40% 19px; + height: 21px; +} +.touch .draggable.drag a.tabledrag-handle .handle { + background-position: 50% -32px; +} +.indentation { + float: left; /* LTR */ + height: 1.7em; + margin: -0.4em 0.2em -0.4em -0.4em; /* LTR */ + padding: 0.42em 0 0.42em 0.6em; /* LTR */ + width: 20px; +} +[dir="rtl"] .indentation { + float: right; + margin: -0.4em -0.4em -0.4em 0.2em; + padding: 0.42em 0.6em 0.42em 0; +} diff --git a/core/modules/system/system.libraries.yml b/core/modules/system/system.libraries.yml index 757c3d3..88fd3ca 100644 --- a/core/modules/system/system.libraries.yml +++ b/core/modules/system/system.libraries.yml @@ -3,9 +3,24 @@ base: css: # Adjust the weights to load these early. component: - css/system.module.css: { every_page: true, weight: -10, } + css/ajax-progress.module.css: { every_page: true, weight: -10, } + css/align.module.css: { every_page: true, weight: -10, } css/components/animated-throbber.module.css: {} css/components/fieldgroup.module.css: {} + css/container-inline.module.css: { every_page: true, weight: -10, } + css/clearfix.module.css: { every_page: true, weight: -10, } + css/details.module.css: { every_page: true, weight: -10, } + css/form--inline.module.css: { every_page: true, weight: -10, } + css/hidden.module.css: { every_page: true, weight: -10, } + css/js.module.css: { every_page: true, weight: -10, } + css/nowrap.module.css: { every_page: true, weight: -10, } + css/position-container.module.css: { every_page: true, weight: -10, } + css/progress.module.css: { every_page: true, weight: -10, } + css/reset-appearance.module.css: { every_page: true, weight: -10, } + css/resize.module.css: { every_page: true, weight: -10, } + css/sticky-header.css: {} + css/system.module.css: { every_page: true, weight: -10, } + css/tabledrag.module.css: { every_page: true, weight: -10, } theme: css/components/action-links.theme.css: {} css/components/breadcrumbs.theme.css: {} @@ -19,6 +34,7 @@ base: css/components/icons.theme.css: {} css/components/inline-form.theme.css: {} css/components/item-list.theme.css: {} + css/components/link.theme.css: {} css/components/links.theme.css: {} css/components/menu.theme.css: {} css/components/messages.theme.css: {}