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 57d461a..f72ecb7 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,7 +33,6 @@
 [dir="rtl"] .views-admin .icon-text {
   background-position: right top;
 }
-
 .views-admin a.icon {
   background-image:
     url(../images/sprites.png),
@@ -69,32 +54,24 @@
   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 +83,77 @@
   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 */
+  margin-left: 0;/* LTR */
+  margin-top: 6px;
 }
 [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 +163,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 +190,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 +249,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 +290,6 @@ td.group-title {
   padding-left: 0;
   padding-right: 0.5em;
 }
-
 .grouped-description,
 .exposed-description {
   float: left; /* LTR */
@@ -399,60 +302,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 +343,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,42 +351,35 @@ 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 {
+.views-displays .tabs a {
   border: 1px solid #cbcbcb;
   border-radius: 7px;
   display: inline-block;
@@ -521,90 +388,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 {
+.views-displays .tabs 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 +455,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 {
-  margin-top: 5px;
+.view-preview-form .form-item-view-args,
+.view-preview-form .form-actions {
+  margin: 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 +570,101 @@ 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 {
+.views-ui-dialog .views-override .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-ajax-title,
 .views-ui-dialog .views-override {
   background-color: #f3f4ee;
 }
-
 .views-ui-dialog.views-ui-dialog-scroll .ui-dialog-titlebar {
   border: none;
 }
-
 .views-ui-dialog .views-override {
   padding: 8px 13px;
 }
-
-.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-top {
+  border-bottom: 1px solid #CCC;
 }
-
-.views-ui-dialog [data-drupal-views-offset="bottom"] {
-  border-width: 1px 0 0;
+.views-ui-dialog .views-offset-bottom {
+  border-top: 1px solid #CCC;
 }
-
 .views-ui-dialog .views-override > * {
   margin: 0;
 }
-
-.views-ui-dialog #views-ajax-title h2 {
+.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 +672,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 +687,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 +709,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 +725,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 +749,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;
+  margin: 0;
+  padding: 3px 0;
 }
-
-#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 {
   margin-bottom: 18px;
   line-height: 1.4555;
 }
-
-/* @end */
-
-/* @group Buttons */
-
 .dropbutton-multiple {
   position: absolute;
 }
@@ -1195,11 +836,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 +853,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 @@ public function buildForm(array $form, FormStateInterface $form_state) {
       $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 @@ public function buildForm(array $form, FormStateInterface $form_state) {
       '#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 1b8e18d..465ad90 100644
--- a/core/modules/views_ui/src/Form/Ajax/RearrangeFilter.php
+++ b/core/modules/views_ui/src/Form/Ajax/RearrangeFilter.php
@@ -208,6 +208,9 @@ public function buildForm(array $form, FormStateInterface $form_state) {
       '#value' => $this->t('Create new filter group'),
       '#id' => 'views-add-group',
       '#group' => 'add',
+      '#attributes' => array(
+        'class' => array('views-add-group'),
+      ),
     );
 
     return $form;
diff --git a/core/modules/views_ui/src/ViewEditForm.php b/core/modules/views_ui/src/ViewEditForm.php
index 221528c..9a1a54d 100644
--- a/core/modules/views_ui/src/ViewEditForm.php
+++ b/core/modules/views_ui/src/ViewEditForm.php
@@ -190,6 +190,9 @@ public function form(array $form, FormStateInterface $form_state) {
       $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.
@@ -225,7 +228,7 @@ public function form(array $form, FormStateInterface $form_state) {
         '#id' => 'views-ajax-popup',
       );
       $form['ajax-area']['ajax-title'] = array(
-        '#markup' => '<div id="views-ajax-title"></div>',
+        '#markup' => '<div id="views-ajax-title" class="views-ajax-title"></div>',
       );
       $form['ajax-area']['ajax-body'] = array(
         '#type' => 'container',
@@ -404,7 +407,7 @@ public function getDisplayDetails($view, $display) {
     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 @@ public function form(array $form, FormStateInterface $form_state) {
       $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 @@ protected function actions(array $form, FormStateInterface $form_state) {
     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 }}