summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorAlex Pott2015-06-12 14:55:37 (GMT)
committerAlex Pott2015-06-12 14:55:37 (GMT)
commitac521b9a272fe63163038749e3d943af06912528 (patch)
treec6f122eb06db81a9daf29753ea788a6ecbab82b9
parentc97bf91150a0e5db86e245f55240b7f4c67db1b0 (diff)
Issue #2408525 by MathieuSpil, cosmicdreams, Manjit.Singh, njbarrett, kamalpreetkaur, LewisNyman, axe312, dawehner: Rewrite Views UI CSS inline with our CSS standards - Part 1
-rw-r--r--core/modules/views_ui/admin.inc4
-rw-r--r--core/modules/views_ui/css/views_ui.admin.css141
-rw-r--r--core/modules/views_ui/css/views_ui.admin.theme.css591
-rw-r--r--core/modules/views_ui/css/views_ui.contextual.css52
-rw-r--r--core/modules/views_ui/src/Form/Ajax/AddHandler.php4
-rw-r--r--core/modules/views_ui/src/Form/Ajax/RearrangeFilter.php3
-rw-r--r--core/modules/views_ui/src/ViewEditForm.php21
-rw-r--r--core/modules/views_ui/src/ViewPreviewForm.php5
-rw-r--r--core/modules/views_ui/templates/views-ui-display-tab-bucket.html.twig2
9 files changed, 157 insertions, 666 deletions
diff --git a/core/modules/views_ui/admin.inc b/core/modules/views_ui/admin.inc
index 64b9077..bc80703 100644
--- a/core/modules/views_ui/admin.inc
+++ b/core/modules/views_ui/admin.inc
@@ -223,7 +223,7 @@ function views_ui_standard_display_dropdown(&$form, FormStateInterface $form_sta
// @todo Move this to a separate function if it's needed on any forms that
// don't have the display dropdown.
$form['override'] = array(
- '#prefix' => '<div class="views-override clearfix form--inline" data-drupal-views-offset="top">',
+ '#prefix' => '<div class="views-override clearfix form--inline views-offset-top" data-drupal-views-offset="top">',
'#suffix' => '</div>',
'#weight' => -1000,
'#tree' => TRUE,
@@ -231,7 +231,7 @@ function views_ui_standard_display_dropdown(&$form, FormStateInterface $form_sta
// Add the "2 of 3" progress indicator.
if ($form_progress = $view->getFormProgress()) {
- $form['progress']['#markup'] = '<div id="views-progress-indicator">' . t('@current of @total', array('@current' => $form_progress['current'], '@total' => $form_progress['total'])) . '</div>';
+ $form['progress']['#markup'] = '<div id="views-progress-indicator" class="views-progress-indicator">' . t('@current of @total', array('@current' => $form_progress['current'], '@total' => $form_progress['total'])) . '</div>';
$form['progress']['#weight'] = -1001;
}
diff --git a/core/modules/views_ui/css/views_ui.admin.css b/core/modules/views_ui/css/views_ui.admin.css
index ebcacc5..e932af1 100644
--- a/core/modules/views_ui/css/views_ui.admin.css
+++ b/core/modules/views_ui/css/views_ui.admin.css
@@ -1,30 +1,19 @@
/**
+ * @file
* The .admin.css file is intended to only contain positioning and size
* declarations. For example: display, position, float, clear, and overflow.
*/
-/* @group Resets */
-
.views-admin ul,
.views-admin menu,
.views-admin dir {
- padding-left: 0; /* LTR for IE */
- /* padding-start is used so that RTL works out of the box */
- -moz-padding-start: 0;
- -webkit-padding-start: 0;
- padding-start: 0;
+ padding: 0;
}
-
.views-admin pre {
margin-bottom: 0;
margin-top: 0;
white-space: pre-wrap;
}
-
-/* @end */
-
-/* @group Columns */
-
.views-left-25 {
float: left; /* LTR */
width: 25%;
@@ -32,7 +21,6 @@
[dir="rtl"] .views-left-25 {
float: right;
}
-
.views-left-30 {
float: left; /* LTR */
width: 30%;
@@ -40,7 +28,6 @@
[dir="rtl"] .views-left-30 {
float: right;
}
-
.views-left-40 {
float: left; /* LTR */
width: 40%;
@@ -48,7 +35,6 @@
[dir="rtl"] .views-left-40 {
float: right;
}
-
.views-left-50 {
float: left; /* LTR */
width: 50%;
@@ -56,7 +42,6 @@
[dir="rtl"] .views-left-50 {
float: right;
}
-
.views-left-75 {
float: left; /* LTR */
width: 75%;
@@ -64,7 +49,6 @@
[dir="rtl"] .views-left-75 {
float: right;
}
-
.views-right-50 {
float: right; /* LTR */
width: 50%;
@@ -72,7 +56,6 @@
[dir="rtl"] .views-right-50 {
float: left;
}
-
.views-right-60 {
float: right; /* LTR */
width: 60%;
@@ -80,7 +63,6 @@
[dir="rtl"] .views-right-60 {
float: left;
}
-
.views-right-70 {
float: right; /* LTR */
width: 70%;
@@ -88,16 +70,12 @@
[dir="rtl"] .views-right-70 {
float: left;
}
-
.views-group-box .form-item {
margin-left: 3px;
margin-right: 3px;
}
-/* @end */
-
-/* @group Attachment details
- *
+/*
* The attachment details section, its tabs for each section and the buttons
* to add a new section
*/
@@ -105,104 +83,66 @@
clear: both;
}
-/* @end */
-
-/* @group Attachment details tabs
- *
- * The tabs that switch between sections
- */
- .views-displays .secondary {
- border-bottom: 0 none;
- margin: 0;
- overflow: visible;
- padding: 0;
- }
-
-.views-displays .secondary > li {
+/* The tabs that switch between sections */
+.views-displays .tabs {
+ border-bottom: 0 none;
+ margin: 0;
+ overflow: visible;
+ padding: 0;
+}
+.views-displays .tabs > li {
border-right: 0 none; /* LTR */
- display: inline-block;
float: left; /* LTR */
padding: 0;
}
-[dir="rtl"] .views-displays .secondary > li {
+[dir="rtl"] .views-displays .tabs > li {
float: right;
border-left: 0 none;
border-right: 1px solid #bfbfbf;
}
-
-.views-displays .secondary .open > a {
+.views-displays .tabs .open > a {
position: relative;
z-index: 51;
}
-
-.views-displays .secondary .views-display-deleted-link {
+.views-displays .tabs .views-display-deleted-link {
text-decoration: line-through;
}
-
.views-display-deleted > details > summary,
.views-display-deleted .details-wrapper > .views-ui-display-tab-bucket > *,
.views-display-deleted .views-display-columns {
opacity: 0.25;
}
-
.views-display-disabled > details > summary,
.views-display-disabled .details-wrapper > .views-ui-display-tab-bucket > *,
.views-display-disabled .views-display-columns {
opacity: 0.5;
}
-
.views-display-tab .details-wrapper > .views-ui-display-tab-bucket .actions {
opacity: 1.0;
}
-
-.js .views-ui-display-tab-bucket:first-of-type {
- border-top: none;
-}
-
-/* @end */
-
-/* @group Attachment details new section button */
-
-.views-displays .secondary li.add {
+.views-displays .tabs .add {
position: relative;
}
-
-.views-displays .secondary .action-list {
+.views-displays .tabs .action-list {
left: 0; /* LTR */
margin: 0;
position: absolute;
top: 23px;
z-index: 50;
}
-[dir="rtl"] .views-displays .secondary .action-list {
+[dir="rtl"] .views-displays .tabs .action-list {
left: auto;
right: 0;
}
-
-.views-displays .secondary .action-list li {
+.views-displays .tabs .action-list li {
display: block;
}
-
-/* @end */
-
-/* @group Attachment collapsible details */
-
.views-display-columns .details-wrapper {
padding: 0;
}
-
.views-display-column {
box-sizing: border-box;
}
-
-.js .views-display-column details.collapsed {
- height: auto;
-}
-
-/* @end */
-
-/* @group Attachment configuration columns */
-
.views-display-columns > * {
margin-bottom: 2em;
}
@@ -219,7 +159,6 @@
margin-left: 0;
margin-right: 2%;
}
-
.views-display-columns > *:first-child {
margin-left: 0; /* LTR */
}
@@ -228,32 +167,14 @@
}
}
-/* @end */
-
-.views-ui-dialog #views-ajax-popup {
- padding: 0;
- overflow: hidden;
-}
-
-.views-ui-dialog #views-ajax-body {
- margin: 0;
- padding: 0;
-}
-
-.views-ui-dialog #views-ajax-popup {
- overflow: hidden;
-}
-
.views-ui-dialog .scroll {
overflow: auto;
padding: 1em;
}
-
-#views-filterable-options-controls {
+.views-filterable-options-controls {
display: none;
}
-
-.views-ui-dialog #views-filterable-options-controls {
+.views-ui-dialog .views-filterable-options-controls {
display: inline;
}
@@ -262,46 +183,26 @@
max-height: 200px;
overflow: auto;
}
-
-/* @end */
-
-/* @group Settings forms */
-
.views-display-setting .label,
.views-display-setting .views-ajax-link {
- display: inline-block;
float: left; /* LTR */
}
[dir="rtl"] .views-display-setting .label,
[dir="rtl"] .views-display-setting .views-ajax-link {
float: right;
}
-
-/* @end */
-
-/* @group Filter Settings form */
-
-div.form-item-options-value-all {
+.form-item-options-value-all {
display: none;
}
-/* @end */
-
-/* @group Javascript dependent styling */
-
.js-only {
display: none;
}
-
html.js .js-only {
display: inherit;
}
-
html.js span.js-only {
display: inline;
}
-
-/* @end */
-
.js .views-edit-view .dropbutton-wrapper {
width: auto;
}
diff --git a/core/modules/views_ui/css/views_ui.admin.theme.css b/core/modules/views_ui/css/views_ui.admin.theme.css
index 4c7f083..6e7f1e0 100644
--- a/core/modules/views_ui/css/views_ui.admin.theme.css
+++ b/core/modules/views_ui/css/views_ui.admin.theme.css
@@ -1,41 +1,27 @@
/**
+ * @file
* The .admin.theme.css file is intended to contain presentation declarations
* including images, borders, colors, and fonts.
*/
-/* @group Reset */
-
.views-admin .links {
list-style: none outside none;
margin: 0;
}
-
.views-admin a:hover {
text-decoration: none;
}
-
-/* @end */
-
-/* @group Layout */
-
.box-padding {
padding-left: 12px;
padding-right: 12px;
}
-
.box-margin {
margin: 12px 12px 0 12px;
}
-
-/* @end */
-
-/* @group Icons */
-
.views-admin .icon {
height: 16px;
width: 16px;
}
-
.views-admin .icon,
.views-admin .icon-text {
background-attachment: scroll;
@@ -47,54 +33,30 @@
[dir="rtl"] .views-admin .icon-text {
background-position: right top;
}
-
.views-admin a.icon {
- background-image:
- url(../images/sprites.png),
- -webkit-gradient(
- linear,
- left top,
- left bottom,
- color-stop(0.0, rgba(255, 255, 255, 1.0)),
- color-stop(1.0, rgba(232, 232, 232, 1.0))
- );
- background-image:
- url(../images/sprites.png),
- -webkit-linear-gradient(
- -90deg,
- #fff 0,
- #e8e8e8 100%);
- background-repeat: no-repeat, repeat-y;
+ background: linear-gradient(-90deg, #fff 0, #e8e8e8 100%) no-repeat, repeat-y;
border: 1px solid #ddd;
border-radius: 4px;
box-shadow: 0 0 0 rgba(0,0,0,0.3333) inset;
}
-
.views-admin a.icon:hover {
border-color: #d0d0d0;
box-shadow: 0 0 1px rgba(0,0,0,0.3333) inset;
}
-
.views-admin a.icon:active {
border-color: #c0c0c0;
}
-
-/**
- * Targets a <span> element inside an <a> element.
- * This assumes no visible text from the span.
- */
.views-admin span.icon {
- display: inline-block;
float: left; /* LTR */
position: relative;
}
[dir="rtl"] .views-admin span.icon {
float: right;
}
-
.views-admin .icon.compact {
display: block;
overflow: hidden;
+ direction: ltr;
text-indent: -9999px;
}
@@ -106,98 +68,68 @@
padding-left: 0;
padding-right: 19px;
}
-
.views-admin .icon.linked {
background-position: center -153px;
}
-
.views-admin .icon.unlinked {
background-position: center -195px;
}
-
.views-admin .icon.add {
background-position: center 3px;
}
-
.views-admin a.icon.add {
background-position: center 3px, left top; /* LTR */
}
[dir="rtl"] .views-admin a.icon.add {
background-position: center 3px, right top;
}
-
.views-admin .icon.delete {
background-position: center -52px;
}
-
.views-admin a.icon.delete {
background-position: center -52px, left top; /* LTR */
}
[dir="rtl"] .views-admin a.icon.delete {
background-position: center -52px, right top;
}
-
.views-admin .icon.rearrange {
background-position: center -111px;
}
-
.views-admin a.icon.rearrange {
background-position: center -111px, left top; /* LTR */
}
[dir="rtl"] .views-admin a.icon.rearrange {
background-position: center -111px, right top;
}
-
-.views-displays .secondary a:hover > .icon.add {
+.views-displays .tabs a:hover > .icon.add {
background-position: center -25px;
}
-
-.views-displays .secondary .open a:hover > .icon.add {
+.views-displays .tabs .open a:hover > .icon.add {
background-position: center 3px;
}
-
-/* @end */
-
-/* @group Forms */
-
details.box-padding {
border: none;
}
-
.views-admin details details {
margin-bottom: 0;
}
-
.form-item {
margin-top: 9px;
padding-bottom: 0;
padding-top: 0;
}
-
.form-type-checkbox {
margin-top: 6px;
}
-
-input.form-checkbox,
-input.form-radio {
+.form-checkbox,
+.form-radio {
vertical-align: baseline;
}
-.form-submit:not(.js-hide) + .form-submit,
-.views-admin a.button:not(.js-hide) + a.button {
- margin-left: 1em; /* LTR */
-}
-[dir="rtl"] .form-submit:not(.js-hide) + .form-submit,
-[dir="rtl"] .views-admin a.button:not(.js-hide) + a.button {
- margin-left: 0;
- margin-right: 1em;
-}
-
.container-inline {
padding-top: 15px;
padding-bottom: 15px;
}
-
.container-inline > * + *,
.container-inline .details-wrapper > * + * {
padding-left: 4px; /* LTR */
@@ -207,17 +139,14 @@ input.form-radio {
padding-left: 0;
padding-right: 4px;
}
-
.views-admin details details.container-inline {
margin-bottom: 1em;
margin-top: 1em;
padding-top: 0;
}
-
.views-admin details details.container-inline > .details-wrapper {
padding-bottom: 0;
}
-
/* Indent form elements so they're directly underneath the label of the checkbox that reveals them */
.views-admin .form-type-checkbox + .form-wrapper {
margin-left: 16px; /* LTR */
@@ -237,91 +166,54 @@ input.form-radio {
.views-admin .form-type-radio label {
line-height: 2;
}
-
-/* @group Dependent options */
-
.views-admin-dependent .form-item {
margin-bottom: 6px;
margin-top: 6px;
}
-
-/* @end */
-
-/* @end */
-
-/* @group Lists */
-
.views-ui-view-title {
font-weight: bold;
margin-top: 0;
}
-
-/* @end */
-
-/* @group Messages */
-
.view-changed {
margin-bottom: 21px;
}
-
-/* @end */
-
-/* @group Headings */
-
-/* Intentionally targeting h1 */
-.views-admin h1.unit-title {
+.views-admin .unit-title {
font-size: 15px;
line-height: 1.6154;
margin-bottom: 0;
margin-top: 18px;
}
-/* @end */
-
-/* @group List views */
-
/* These header classes are ambiguous and should be scoped to th elements */
-
-th.views-ui-name {
+.views-ui-name {
width: 18%;
}
-
-th.views-ui-description {
+.views-ui-description {
width: 26%;
}
-
-th.views-ui-tag {
+.views-ui-tag {
width: 8%;
}
-
-th.views-ui-path {
+.views-ui-path {
width: auto;
}
-
-th.views-ui-operations {
+.views-ui-operations {
width: 24%;
}
-/* @end */
-
-/* @group Add view */
-
/**
* I wish this didn't have to be so specific
*/
.form-item-description-enable + .form-item-description {
margin-top: 0;
}
-
.form-item-description-enable label {
font-weight: bold;
}
-
.form-item-page-create,
.form-item-block-create {
margin-top: 13px;
}
-
.form-item-page-create label,
.form-item-block-create label,
.form-item-rest-export-create label {
@@ -333,49 +225,37 @@ th.views-ui-operations {
.form-item-block-style-style-plugin > label {
display: block;
}
-
.views-attachment .options-set label {
font-weight: normal;
}
-/* @end */
-
-/* @group Rearrange filters
- *
- * Styling for the form that allows views filters to be rearranged.
- */
-
+/* Styling for the form that allows views filters to be rearranged. */
.group-populated {
display: none;
}
-
td.group-title {
font-weight: bold;
}
-
.views-ui-dialog td.group-title {
margin: 0;
padding: 0;
}
-
.views-ui-dialog td.group-title span {
display: block;
height: 1px;
overflow: hidden;
}
-
.group-message .form-submit,
.views-remove-group-link,
-#views-add-group {
+.views-add-group {
float: right; /* LTR */
clear: both;
}
[dir="rtl"] .group-message .form-submit,
[dir="rtl"] .views-remove-group-link,
-[dir="rtl"] #views-add-group {
+[dir="rtl"] .views-add-group {
float: left;
}
-
.views-operator-label {
font-style: italic;
font-weight: bold;
@@ -386,7 +266,6 @@ td.group-title {
padding-left: 0;
padding-right: 0.5em;
}
-
.grouped-description,
.exposed-description {
float: left; /* LTR */
@@ -399,60 +278,39 @@ td.group-title {
padding-left: 10px;
padding-right: 0;
}
-
-#edit-options-more {
- clear: both;
-}
-
-/* @end */
-
-/* @group Attachments */
-
.views-displays {
border: 1px solid #ccc;
padding-bottom: 36px;
}
-
.views-display-top {
background-color: #e1e2dc;
border-bottom: 1px solid #ccc;
- padding: 8px 8px 8px; /* LTR */
+ padding: 8px 8px 3px;
position: relative;
}
-[dir="rtl"] .views-display-top {
- padding: 8px 8px 8px;
-}
-
-.views-display-top .secondary {
+.views-display-top .tabs {
margin-right: 18em; /* LTR */
}
-[dir="rtl"] .views-display-top .secondary {
+[dir="rtl"] .views-display-top .tabs {
margin-left: 18em;
margin-right: 0;
}
-
-.views-display-top .secondary > li {
+.views-display-top .tabs > li {
margin-right: 6px; /* LTR */
padding-left: 0; /* LTR */
}
-[dir="rtl"] .views-display-top .secondary > li {
+[dir="rtl"] .views-display-top .tabs > li {
margin-left: 6px;
margin-right: 0.3em;
padding-right: 0;
}
-
-.views-display-top .secondary > li:last-child {
+.views-display-top .tabs > li:last-child {
margin-right: 0; /* LTR */
}
-[dir="rtl"] .views-display-top .secondary > li:last-child {
+[dir="rtl"] .views-display-top .tabs > li:last-child {
margin-left: 0;
margin-right: 0.3em;
}
-
-.views-display-top #views-display-top {
- max-width: 180px;
-}
-
.form-edit .form-actions {
background-color: #e1e2dc;
border-right: 1px solid #ccc;
@@ -461,14 +319,6 @@ td.group-title {
margin-top: 0;
padding: 8px 12px;
}
-
-/* @end */
-
-/* @group Attachment details tabs
- *
- * The tabs that switch between sections
- */
-
.views-displays .tabs.secondary {
margin-right: 200px; /* LTR */
border: 0;
@@ -477,41 +327,34 @@ td.group-title {
margin-left: 200px;
margin-right: 0;
}
-
.views-displays .tabs.secondary li,
.views-displays .tabs.secondary li.is-active {
background: transparent;
- margin-bottom: 5px;
border: 0;
padding: 0;
width: auto;
}
-
-.views-displays .tabs.secondary li.add ul.action-list li{
+.views-displays .tabs li.add ul.action-list li{
margin: 0;
}
-
.views-displays .tabs.secondary li {
- margin: 0 5px 0 6px; /* LTR */
+ margin: 0 5px 5px 6px; /* LTR */
}
[dir="rtl"] .views-displays .tabs.secondary li {
margin-left: 5px;
margin-right: 6px;
}
-
.views-displays .tabs.secondary .tabs__tab + .tabs__tab {
border-top: 0;
}
-
-.views-displays .tabs.secondary li.tabs__tab:hover {
+.views-displays .tabs li.tabs__tab:hover {
border: 0;
padding-left: 0; /* LTR */
}
-[dir="rtl"] .views-displays .tabs.secondary li.tabs__tab:hover {
+[dir="rtl"] .views-displays .tabs li.tabs__tab:hover {
padding-left: 15px;
padding-right: 0;
}
-
.views-displays .tabs.secondary a {
border: 1px solid #cbcbcb;
border-radius: 7px;
@@ -521,90 +364,66 @@ td.group-title {
padding: 3px 7px;
}
-/**
- * Display a red border if the display doesn't validate.
- */
-.views-displays .tabs.secondary li.is-active a.is-active.error,
-.views-displays .tabs.secondary a.error {
+/* Display a red border if the display doesn't validate. */
+.views-displays .tabs li.is-active a.is-active.error,
+.views-displays .tabs .error {
border: 2px solid #ed541d;
padding: 1px 6px;
}
-
-.views-displays .tabs.secondary a:focus {
+.views-displays .tabs a:focus {
outline: none;
+ text-decoration: underline;
}
-
.views-displays .tabs.secondary li a {
background-color: #fff;
}
-
-.views-displays .tabs.secondary li a:hover,
-.views-displays .tabs.secondary li.is-active a,
-.views-displays .tabs.secondary li.is-active a.is-active {
+.views-displays .tabs li a:hover,
+.views-displays .tabs li.is-active a,
+.views-displays .tabs li.is-active a.is-active {
background-color: #555;
color: #fff;
}
-
-.views-displays .tabs.secondary .open > a {
+.views-displays .tabs .open > a {
background-color: #f1f1f1;
border-bottom: 1px solid transparent;
position: relative;
}
-
-.views-displays .tabs.secondary .open > a:hover {
+.views-displays .tabs .open > a:hover {
color: #0074bd;
background-color: #f1f1f1;
}
-
-.views-displays .tabs.secondary .action-list li {
+.views-displays .tabs .action-list li {
background-color: #f1f1f1;
border-color: #cbcbcb;
border-style: solid;
border-width: 0 1px;
padding: 2px 9px;
}
-
-.views-displays .tabs.secondary .action-list li:first-child {
+.views-displays .tabs .action-list li:first-child {
border-width: 1px 1px 0;
}
-
-.views-displays .secondary .action-list li:last-child {
+.views-displays .action-list li:last-child {
border-width: 0 1px 1px;
}
-
-.views-displays .tabs.secondary .action-list li:last-child {
+.views-displays .tabs .action-list li:last-child {
border-width: 0 1px 1px;
}
-
-.views-displays .tabs.secondary .action-list input.form-submit {
+.views-displays .tabs .action-list input.form-submit {
background: none repeat scroll 0 0 transparent;
border: medium none;
margin: 0;
padding: 0;
}
-.views-displays .tabs.secondary .action-list input.form-submit:hover {
+.views-displays .tabs .action-list input.form-submit:hover {
box-shadow: none;
}
-
-.views-displays .tabs.secondary .action-list li:hover {
+.views-displays .tabs .action-list li:hover {
background-color: #ddd;
}
-
-/* @end */
-
-/* @group Attachment details */
-#edit-display-settings {
+.edit-display-settings {
margin: 12px 12px 0 12px
}
-
-
-#edit-display-settings-title {
- font-size: 14px;
- line-height: 1.5;
- margin: 0;
-}
-
-#edit-display-settings-top {
+.edit-display-settings-top.views-ui-display-tab-bucket {
border: 1px solid #f3f3f3;
line-height: 20px;
margin: 0 0 15px 0;
@@ -612,185 +431,114 @@ td.group-title {
padding-bottom: 4px;
position: relative;
}
-
-#edit-displays-settings-settings-content {
- margin-top: 12px;
-}
-
-/* @end */
-
-/* @group Attachment columns
- *
- * The columns that contain the option buckets e.g. Format and Basic Settings
- */
-
.views-display-column {
border: 1px solid #f3f3f3;
}
-
.views-display-column + .views-display-column {
- margin-top: 0;
- }
-
-/* @end */
-
-/* @group Auto preview
- *
- * The auto-preview checkbox line.
- */
-
-#views-ui-preview-form .form-type-checkbox {
- margin-top: 2px;
- margin-left: 2px; /* LTR */
-}
-[dir="rtl"] #views-ui-preview-form .form-type-checkbox {
- margin-left: 0;
- margin-right: 2px;
+ margin-top: 0;
}
-
-#views-ui-preview-form .form-item-view-args, #views-ui-preview-form .form-actions {
+.view-preview-form .form-item-view-args,
+.view-preview-form .form-actions {
margin-top: 5px;
}
-
-#views-ui-preview-form .arguments-preview {
+.view-preview-form .arguments-preview {
font-size: 1em;
}
-
-#views-ui-preview-form .arguments-preview,
-#views-ui-preview-form .form-item-view-args {
+.view-preview-form .arguments-preview,
+.view-preview-form .form-item-view-args {
margin-left: 10px; /* LTR */
}
-[dir="rtl"] #views-ui-preview-form .arguments-preview,
-[dir="rtl"] #views-ui-preview-form .form-item-view-args {
+[dir="rtl"] .view-preview-form .arguments-preview,
+[dir="rtl"] .view-preview-form .form-item-view-args {
margin-left: 0;
margin-right: 10px;
}
-
-#views-ui-preview-form .form-item-view-args label {
- display: inline-block;
+.view-preview-form .form-item-view-args label {
float: left; /* LTR */
font-weight: normal;
height: 6ex;
margin-right: 0.75em; /* LTR */
}
-[dir="rtl"] #views-ui-preview-form .form-item-view-args label {
+[dir="rtl"] .view-preview-form .form-item-view-args label {
float: right;
margin-left: 0.75em;
margin-right: 0.2em;
}
-
.form-item-live-preview,
.form-item-view-args,
-#preview-submit-wrapper {
+.preview-submit-wrapper {
display: inline-block;
}
-
.form-item-live-preview,
-#preview-submit-wrapper {
+.view-preview-form .form-actions {
vertical-align: top;
}
-
@media screen and (min-width:45em) { /* 720px */
- #views-ui-preview-form .form-type-textfield .description {
+ .view-preview-form .form-type-textfield .description {
white-space: nowrap;
}
}
-/* @end */
-
-/* @group Attachment buckets
- *
- * These are the individual "buckets," or boxes, inside the display settings area
- */
-
+/* These are the individual "buckets," or boxes, inside the display settings area */
.views-ui-display-tab-bucket {
border-bottom: 1px solid #f3f3f3;
line-height: 20px;
margin: 0;
padding-top: 4px;
+ position: relative;
}
-
.views-ui-display-tab-bucket:last-of-type {
border-bottom: none;
}
-
.views-ui-display-tab-bucket + .views-ui-display-tab-bucket {
border-top: medium none;
}
-
-.views-ui-display-tab-bucket > h3,
+.views-ui-display-tab-bucket__title,
.views-ui-display-tab-bucket > .views-display-setting {
padding: 2px 6px 4px;
}
-
-.views-ui-display-tab-bucket h3 {
+.views-ui-display-tab-bucket__title {
font-size: small;
margin: 0;
}
-
.views-ui-display-tab-bucket.access {
padding-top: 0;
}
-
.views-ui-display-tab-bucket.page-settings {
border-bottom: medium none;
}
-
.views-display-setting .views-ajax-link {
margin-left: 0.2083em;
margin-right: 0.2083em;
}
-/* @end */
-
-/* @group Attachment bucket overridden
- *
- * Applies an overridden(italics) font style to overridden buckets.
+/** Applies an overridden(italics) font style to overridden buckets.
* The better way to implement this would be to add the overridden class
* to the bucket header when the bucket is overridden and style it as a
* generic icon classed element. For the moment, we'll style the bucket
* header specifically with the overridden font style.
*/
-
.views-ui-display-tab-setting.overridden,
-.views-ui-display-tab-bucket.overridden > h3 {
+.views-ui-display-tab-bucket.overridden .views-ui-display-tab-bucket__title {
font-style: italic;
}
-/* @end */
-
-/* @group Attachment bucket drop button */
-
-.views-ui-display-tab-bucket {
- position: relative;
-}
-
-/* @end */
-
-/* @group Attachment bucket rows
- *
- * This is each row within one of the "boxes."
- */
-
+/* This is each row within one of the "boxes." */
.views-ui-display-tab-bucket .views-display-setting {
color: #666;
font-size: 12px;
padding-bottom: 2px;
}
-
.views-ui-display-tab-bucket .views-display-setting:nth-of-type(even) {
background-color: #f3f5ee;
}
-
.views-ui-display-tab-actions.views-ui-display-tab-bucket .views-display-setting {
background-color: transparent;
}
-
.views-ui-display-tab-bucket .views-group-text {
margin-top: 6px;
margin-bottom: 6px;
}
-
.views-display-setting .label {
margin-right: 3px; /* LTR */
}
@@ -798,136 +546,90 @@ td.group-title {
margin-left: 3px;
margin-right: 0;
}
-
-/* @end */
-
.views-edit-view {
margin-bottom: 15px;
}
-/* @group Modal dialog box
- *
- * The contents of the popup dialog on the views edit form.
- */
-
+/* The contents of the popup dialog on the views edit form. */
.views-filterable-options .form-type-checkbox {
border: 1px solid #ccc;
padding: 5px 8px;
border-top: none;
}
-
.views-filterable-options {
border-top: 1px solid #ccc;
}
-
.views-filterable-options .filterable-option.odd .form-type-checkbox {
background-color: #f3f4ee;
}
-
.filterable-option .form-item {
margin-bottom: 0;
margin-top: 0;
}
-
.views-filterable-options .form-type-checkbox .description {
margin-top: 0;
margin-bottom: 0;
}
-
-#views-filterable-options-controls {
- margin: 1em 0;
-}
-
-#views-filterable-options-controls .form-item {
+.views-filterable-options-controls .form-item {
width: 30%;
margin: 0 0 0 2%; /* LTR */
}
-}
-[dir="rtl"] #views-filterable-options-controls .form-item {
+[dir="rtl"] .views-filterable-options-controls .form-item {
margin: 0 2% 0 0;
}
-
-#views-filterable-options-controls input,
-#views-filterable-options-controls select {
+.views-filterable-options-controls input,
+.views-filterable-options-controls select {
width: 100%;
}
-
.views-ui-dialog .ui-dialog-content {
padding: 0;
}
-
.views-ui-dialog .views-filterable-options {
margin-bottom: 10px;
}
-
.views-ui-dialog .views-add-form-selected.container-inline {
padding: 0;
}
-
.views-ui-dialog .views-add-form-selected.container-inline > div {
display: block;
}
-
-.views-ui-dialog #edit-selected {
+.views-ui-dialog .form-item-selected {
margin: 0;
padding: 6px 16px;
}
-
-.views-ui-dialog #views-ajax-title,
.views-ui-dialog .views-override {
background-color: #f3f4ee;
+ padding: 8px 13px;
}
-
.views-ui-dialog.views-ui-dialog-scroll .ui-dialog-titlebar {
border: none;
}
-
-.views-ui-dialog .views-override {
- padding: 8px 13px;
+.views-ui-dialog .views-offset-top {
+ border-bottom: 1px solid #CCC;
}
-
-.views-ui-dialog [data-drupal-views-offset] {
- border: 1px solid #ccc;
-}
-
-.views-ui-dialog [data-drupal-views-offset="top"] {
- border-width: 0 0 1px;
+.views-ui-dialog .views-offset-bottom {
+ border-top: 1px solid #CCC;
}
-
-.views-ui-dialog [data-drupal-views-offset="bottom"] {
- border-width: 1px 0 0;
-}
-
.views-ui-dialog .views-override > * {
margin: 0;
}
-
-.views-ui-dialog #views-ajax-title h2 {
- font-size: 15px;
- padding: 8px 13px;
- margin: 0;
-}
-
-.views-ui-dialog #views-progress-indicator {
+.views-ui-dialog .views-progress-indicator {
color: #fff;
font-size: 11px;
position: absolute;
right: 10px; /* LTR */
top: 32px;
}
-[dir="rtl"] .views-ui-dialog #views-progress-indicator {
+[dir="rtl"] .views-ui-dialog .views-progress-indicator {
left: 10px;
right: auto;
}
-
-.views-ui-dialog #views-progress-indicator:before {
+.views-ui-dialog .views-progress-indicator:before {
content: "\003C\00A0";
}
-
-.views-ui-dialog #views-progress-indicator:after {
+.views-ui-dialog .views-progress-indicator:after {
content: "\00A0\003E";
}
-
.views-ui-dialog details .item-list {
padding-left: 2em; /* LTR */
}
@@ -935,38 +637,14 @@ td.group-title {
padding-left: 0;
padding-right: 2em;
}
-/* @end */
-
-/* @group Configure filter criteria */
-
-/* @todo the width and border info could be moved into a more generic class */
-/* @todo Make this a class to be used anywhere there's node types? */
-.form-type-checkboxes #edit-options-value,
-.form-type-checkboxes #edit-options-validate-options-node-types {
- border-color: #ccc;
- border-style: solid;
- border-width: 1px;
- max-height: 210px;
- overflow: auto;
- margin-top: 5px;
- padding: 0 5px;
- width: 190px;
-}
-
-/* @end */
-
-/* @group Rearrange filter criteria */
-
.views-ui-rearrange-filter-form table {
border-collapse: collapse;
}
-
.views-ui-rearrange-filter-form tr td[rowspan] {
border-color: #cdcdcd;
border-style: solid;
border-width: 0 1px 1px 1px;
}
-
.views-ui-rearrange-filter-form tr[id^="views-row"] {
border-right: 1px solid #cdcdcd; /* LTR */
}
@@ -974,23 +652,15 @@ td.group-title {
border-left: 1px solid #cdcdcd;
border-right: 0;
}
-
-.views-ui-rearrange-filter-form tr[id^="views-row"].even td {
+.views-ui-rearrange-filter-form .even td {
background-color: #f3f4ed;
}
-
.views-ui-rearrange-filter-form .views-group-title {
border-top: 1px solid #cdcdcd;
}
-
.views-ui-rearrange-filter-form .group-empty {
border-bottom: 1px solid #cdcdcd;
}
-
-/* @end */
-
-/* @group Expose filter form items */
-
.form-item-options-expose-required,
.form-item-options-expose-label,
.form-item-options-expose-description {
@@ -1004,15 +674,9 @@ td.group-title {
margin-left: 0;
margin-right: 18px;
}
-
-/* @end */
-
-/* @group Live preview elements */
-
-#views-preview-wrapper {
+.views-preview-wrapper {
border: 1px solid #ccc;
}
-
.view-preview-form {
position: relative;
}
@@ -1026,21 +690,22 @@ td.group-title {
position: absolute;
right: 12px;
top: 3px;
+ margin-top: 2px;
+ margin-left: 2px; /* LTR */
}
[dir="rtl"] .view-preview-form .form-item-live-preview {
right: auto;
left: 12px;
+ margin-left: 0;
+ margin-right: 2px;
}
-#views-live-preview {
+.views-live-preview {
padding: 12px;
}
-
-#views-live-preview .views-query-info {
+.views-live-preview .views-query-info {
overflow: auto;
}
-
-/* Intentionally targeting h1 */
-#views-live-preview h1.section-title {
+.views-live-preview .section-title {
color: #818181;
display: inline-block;
font-size: 13px;
@@ -1049,99 +714,40 @@ td.group-title {
margin-bottom: 0;
margin-top: 0;
}
-
-#views-live-preview .view > * {
+.views-live-preview .view > * {
margin-top: 18px;
}
-
-#views-live-preview .preview-section {
+.views-live-preview .preview-section {
border: 1px dashed #dedede;
margin: 0 -5px;
padding: 3px 5px;
}
-
-#views-live-preview li.views-row + li.views-row {
+.views-live-preview li.views-row + li.views-row {
margin-top: 18px;
}
/* The div.views-row is intentional and excludes li.views-row, for example */
-#views-live-preview div.views-row + div.views-row {
+.views-live-preview div.views-row + div.views-row {
margin-top: 36px;
}
-
-/* @group Query info table */
-
.views-query-info table {
border-collapse: separate;
border-color: #ddd;
border-spacing: 0;
margin: 10px 0;
}
-
.views-query-info table tr {
background-color: #f9f9f9;
}
-
.views-query-info table th,
.views-query-info table td {
color: #666;
padding: 4px 10px;
}
-
-/* @end */
-
-/* @group Grid */
-
-#views-live-preview .views-view-grid th,
-#views-live-preview .views-view-grid td {
- vertical-align: top;
-}
-
-/* @end */
-
-/* @group HTML list */
-
-#views-live-preview .view-content > .item-list > ul {
- list-style-position: outside;
- padding-left: 21px; /* LTR */
-}
-[dir="rtl"] #views-live-preview .view-content > .item-list > ul {
- padding-left: 0;
- padding-right: 21px;
-}
-
-/* @end */
-
-/* @end */
-
-/* @group Add/edit argument form */
-
-#edit-options-default-action {
- width: 300px;
- float: left;
-}
-
-#edit-options-exception {
- float: right;
- width: 250px;
- margin-top: -2px;
-}
-
-/* @end */
-
-/* @group Drupal
- *
- * Overrides to Drupal system CSS
- */
-div.messages {
+.messages {
margin-bottom: 18px;
line-height: 1.4555;
}
-
-/* @end */
-
-/* @group Buttons */
-
.dropbutton-multiple {
position: absolute;
}
@@ -1195,11 +801,9 @@ div.messages {
left: 5px;
right: auto;
}
-
.views-ui-display-tab-bucket .dropbutton-wrapper .dropbutton-widget .dropbutton-action a {
width: auto;
}
-
.views-ui-display-tab-actions .dropbutton-wrapper li a,
.views-ui-display-tab-actions .dropbutton-wrapper input {
background: none;
@@ -1214,18 +818,13 @@ div.messages {
padding-left: 0.5em;
padding-right: 12px;
}
-
.views-ui-display-tab-actions .dropbutton-wrapper input:hover {
background: none;
border: none;
}
-
-/* @end */
-
.views-list-section {
margin-bottom: 2em;
}
-
.form-textarea-wrapper,
.form-item-options-content {
width: 100%;
diff --git a/core/modules/views_ui/css/views_ui.contextual.css b/core/modules/views_ui/css/views_ui.contextual.css
index fe276d2..13db2d2 100644
--- a/core/modules/views_ui/css/views_ui.contextual.css
+++ b/core/modules/views_ui/css/views_ui.contextual.css
@@ -1,77 +1,57 @@
/**
+ * @file
* The .contextual.css file is intended to contain styles that override declarations
* in the Contextual module.
*/
-/* @group Wrapper */
-
-#views-live-preview .contextual-region-active {
+.views-live-preview .contextual-region-active {
outline: medium none;
}
-
-#views-live-preview div.contextual {
+.views-live-preview .contextual {
right: auto; /* LTR */
top: auto;
}
-[dir="rtl"] #views-live-preview div.contextual {
+[dir="rtl"] .views-live-preview .contextual {
left: auto;
}
-
-html.js #views-live-preview div.contextual {
+.js .views-live-preview .contextual {
display: inline;
}
-
-/* @end */
-
-/* @group Trigger */
-
-#views-live-preview a.contextual-links-trigger {
+.views-live-preview .contextual-links-trigger {
display: block;
}
-
-/* @end */
-
-/* @group List */
-
-div.contextual ul.contextual-links {
+.contextual .contextual-links {
border-radius: 0 4px 4px 4px; /* LTR */
min-width: 10em;
padding: 6px 6px 9px 6px;
right: auto; /* LTR */
}
-[dir="rtl"] div.contextual ul.contextual-links {
+[dir="rtl"] .contextual .contextual-links {
border-radius: 4px 0 4px 4px;
left: auto;
}
-
-ul.contextual-links li a,
-ul.contextual-links li span {
+.contextual-links li a,
+.contextual-links li span {
padding-bottom: 0.25em;
padding-right: 0.1667em; /* LTR */
padding-top: 0.25em;
}
-[dir="rtl"] ul.contextual-links li a,
-[dir="rtl"] ul.contextual-links li span {
+[dir="rtl"] .contextual-links li a,
+[dir="rtl"] .contextual-links li span {
padding-left: 0.1667em;
padding-right: 0;
}
-
-ul.contextual-links li span {
+.contextual-links li span {
font-weight: bold;
}
-
-ul.contextual-links li a {
- color: #666 !important;
+.contextual-links li a {
margin: 0.25em 0;
padding-left: 1em; /* LTR */
}
-[dir="rtl"] ul.contextual-links li a {
+[dir="rtl"] .contextual-links li a {
padding-left: 0.1667em;
padding-right: 1em;
}
-
-ul.contextual-links li a:hover {
+.contextual-links li a:hover {
background-color: #badbec;
}
-
-/* @end */
diff --git a/core/modules/views_ui/src/Form/Ajax/AddHandler.php b/core/modules/views_ui/src/Form/Ajax/AddHandler.php
index da54d50..a60da37 100644
--- a/core/modules/views_ui/src/Form/Ajax/AddHandler.php
+++ b/core/modules/views_ui/src/Form/Ajax/AddHandler.php
@@ -90,7 +90,7 @@ class AddHandler extends ViewsFormBase {
$form['override']['controls'] = array(
'#theme_wrappers' => array('container'),
'#id' => 'views-filterable-options-controls',
- '#attributes' => ['class' => ['form--inline']],
+ '#attributes' => ['class' => ['form--inline', 'views-filterable-options-controls']],
);
$form['override']['controls']['options_search'] = array(
'#type' => 'textfield',
@@ -171,7 +171,7 @@ class AddHandler extends ViewsFormBase {
'#markup' => '<span class="views-ui-view-title">' . $this->t('Selected:') . '</span> ' . '<div class="views-selected-options"></div>',
'#theme_wrappers' => array('form_element', 'views_ui_container'),
'#attributes' => array(
- 'class' => array('container-inline', 'views-add-form-selected'),
+ 'class' => array('container-inline', 'views-add-form-selected', 'views-offset-bottom'),
'data-drupal-views-offset' => 'bottom',
),
);
diff --git a/core/modules/views_ui/src/Form/Ajax/RearrangeFilter.php b/core/modules/views_ui/src/Form/Ajax/RearrangeFilter.php
index c5dd637..06bbd0a 100644
--- a/core/modules/views_ui/src/Form/Ajax/RearrangeFilter.php
+++ b/core/modules/views_ui/src/Form/Ajax/RearrangeFilter.php
@@ -215,6 +215,9 @@ class RearrangeFilter extends ViewsFormBase {
'#value' => $this->t('Create new filter group'),
'#id' => 'views-add-group',
'#group' => 'add',
+ '#attributes' => array(
+ 'class' => array('views-add-group'),
+ ),
'#ajax' => ['url' => NULL],
);
diff --git a/core/modules/views_ui/src/ViewEditForm.php b/core/modules/views_ui/src/ViewEditForm.php
index bf7fdcf..782a271 100644
--- a/core/modules/views_ui/src/ViewEditForm.php
+++ b/core/modules/views_ui/src/ViewEditForm.php
@@ -123,9 +123,9 @@ class ViewEditForm extends ViewFormBase {
$form['#attached']['library'][] = 'views_ui/admin.styling';
$form['#attached']['drupalSettings']['views']['ajax'] = [
- 'id' => '#views-ajax-body',
- 'title' => '#views-ajax-title',
- 'popup' => '#views-ajax-popup',
+ 'id' => '.views-ajax-body',
+ 'title' => '.views-ajax-title',
+ 'popup' => '.views-ajax-popup',
'defaultForm' => $view->getDefaultAJAXMessage(),
];
@@ -190,6 +190,9 @@ class ViewEditForm extends ViewFormBase {
$form['displays']['settings'] = array(
'#type' => 'container',
'#id' => 'edit-display-settings',
+ '#attributes' => array(
+ 'class' => array('edit-display-settings'),
+ ),
);
// Add a text that the display is disabled.
@@ -222,14 +225,18 @@ class ViewEditForm extends ViewFormBase {
// The content of the popup dialog.
$form['ajax-area'] = array(
'#type' => 'container',
- '#id' => 'views-ajax-popup',
+ '#attributes' => array(
+ 'class' => array('views-ajax-popup'),
+ ),
);
$form['ajax-area']['ajax-title'] = array(
- '#markup' => '<div id="views-ajax-title"></div>',
+ '#markup' => '<div class="views-ajax-title"></div>',
);
$form['ajax-area']['ajax-body'] = array(
'#type' => 'container',
- '#id' => 'views-ajax-body',
+ '#attributes' => array(
+ 'class' => array('views-ajax-body'),
+ ),
);
}
@@ -404,7 +411,7 @@ class ViewEditForm extends ViewFormBase {
if ($display['id'] != 'default') {
$build['top']['#theme_wrappers'] = array('container');
$build['top']['#attributes']['id'] = 'edit-display-settings-top';
- $build['top']['#attributes']['class'] = array('views-ui-display-tab-actions', 'views-ui-display-tab-bucket', 'clearfix');
+ $build['top']['#attributes']['class'] = array('views-ui-display-tab-actions', 'edit-display-settings-top', 'views-ui-display-tab-bucket', 'clearfix');
// The Delete, Duplicate and Undo Delete buttons.
$build['top']['actions'] = array(
diff --git a/core/modules/views_ui/src/ViewPreviewForm.php b/core/modules/views_ui/src/ViewPreviewForm.php
index 513ab28..006810e 100644
--- a/core/modules/views_ui/src/ViewPreviewForm.php
+++ b/core/modules/views_ui/src/ViewPreviewForm.php
@@ -21,7 +21,7 @@ class ViewPreviewForm extends ViewFormBase {
public function form(array $form, FormStateInterface $form_state) {
$view = $this->entity;
- $form['#prefix'] = '<div id="views-preview-wrapper" class="views-admin clearfix">';
+ $form['#prefix'] = '<div id="views-preview-wrapper" class="views-preview-wrapper views-admin clearfix">';
$form['#suffix'] = '</div>';
$form['#id'] = 'views-ui-preview-form';
@@ -61,7 +61,7 @@ class ViewPreviewForm extends ViewFormBase {
$form['preview'] = array(
'#weight' => 110,
'#theme_wrappers' => array('container'),
- '#attributes' => array('id' => 'views-live-preview'),
+ '#attributes' => array('id' => 'views-live-preview', 'class' => 'views-live-preview'),
'preview' => $view->renderPreview($this->displayID, $args),
);
}
@@ -80,6 +80,7 @@ class ViewPreviewForm extends ViewFormBase {
return array(
'#attributes' => array(
'id' => 'preview-submit-wrapper',
+ 'class' => array('preview-submit-wrapper')
),
'button' => array(
'#type' => 'submit',
diff --git a/core/modules/views_ui/templates/views-ui-display-tab-bucket.html.twig b/core/modules/views_ui/templates/views-ui-display-tab-bucket.html.twig
index 3cde0f2..88ab1bd 100644
--- a/core/modules/views_ui/templates/views-ui-display-tab-bucket.html.twig
+++ b/core/modules/views_ui/templates/views-ui-display-tab-bucket.html.twig
@@ -26,7 +26,7 @@
%}
<div{{ attributes.addClass(classes) }}>
{% if title -%}
- <h3>{{ title }}</h3>
+ <h3 class="views-ui-display-tab-bucket__title">{{ title }}</h3>
{%- endif %}
{% if actions -%}
{{ actions }}