ran prettier on stylesheets and global wizard javascripts (#95)

2021-04-12 12:05:15 +05:30 · 2021-04-12 12:05:15 +05:30 · 2788e8026e
Commit 2788e8026e
--- a/assets/javascripts/wizard-custom-guest.js
+++ b/assets/javascripts/wizard-custom-guest.js
@ -1,4 +1,4 @@
 (function () {
-  document.cookie = 'destination_url=' + window.location.href + ';path=/';
-  window.location.href = '/login';
+  document.cookie = "destination_url=" + window.location.href + ";path=/";
+  window.location.href = "/login";
 })();
--- a/assets/javascripts/wizard-custom-start.js
+++ b/assets/javascripts/wizard-custom-start.js
@ -1,4 +1,4 @@
-(function() {
-  let wizard = require('discourse/plugins/discourse-custom-wizard/wizard/custom-wizard').default.create();
+(function () {
+  let wizard = require("discourse/plugins/discourse-custom-wizard/wizard/custom-wizard").default.create();
  wizard.start();
 })();
--- a/assets/stylesheets/common/wizard-admin.scss
+++ b/assets/stylesheets/common/wizard-admin.scss
@ -1,7 +1,7 @@
-@import 'wizard-mapper';
-@import 'wizard-manager';
-@import 'wizard-api';
-@import 'common/components/buttons';
+@import "wizard-mapper";
+@import "wizard-manager";
+@import "wizard-api";
+@import "common/components/buttons";

 .admin-wizard-controls {
  display: flex;
@ -9,7 +9,7 @@
  justify-content: space-between;
  margin-bottom: 20px;

-  &+ .wizard-message + div {
+  & + .wizard-message + div {
    margin-top: 20px;
  }
 }
@ -63,8 +63,6 @@
  & + div {
    margin-top: 30px;
  }
-  
-  
 }

 .wizard-submissions {
@ -217,8 +215,7 @@
 }

 .admin-wizard-container.settings {
-  
-  [class~='setting'] {
+  [class~="setting"] {
    display: inline-flex;
    align-items: flex-start;
    width: 48%;
@ -254,7 +251,8 @@
        display: block;
      }

-      input[type="text"], textarea {
+      input[type="text"],
+      textarea {
        width: 100%;
        box-sizing: border-box;
        margin-bottom: 0;
@ -300,13 +298,15 @@
        margin: 5px 7px 0 0;
      }

-      .input .select-kit, > .select-kit {
+      .input .select-kit,
+      > .select-kit {
        max-width: 250px !important;
        min-width: 250px !important;
      }
    }

-    &.full, &.full-inline {
+    &.full,
+    &.full-inline {
      width: 100%;

      .setting-value {
@ -364,12 +364,12 @@
    width: 100%;
    margin-top: 30px;

-    [class~='setting']:first-of-type {
+    [class~="setting"]:first-of-type {
      border-top: none;
    }
  }

-  .wizard-custom-action > [class~='setting']:first-of-type {
+  .wizard-custom-action > [class~="setting"]:first-of-type {
    margin-bottom: 0;
  }

@ -455,7 +455,7 @@
      position: absolute;
      padding: 10px;
      background-color: $secondary;
-      box-shadow: shadow('card');
+      box-shadow: shadow("card");
      z-index: 200;
      top: 40px;
    }
@ -574,7 +574,9 @@
  width: 100%;
 }

-.add-mapper-input .btn, .btn-after-time, .wizard-editor-gutter .btn {
+.add-mapper-input .btn,
+.btn-after-time,
+.wizard-editor-gutter .btn {
  background-color: $secondary;
  border: 1px solid $primary-medium;
 }
--- a/assets/stylesheets/common/wizard-api.scss
+++ b/assets/stylesheets/common/wizard-api.scss
@ -17,7 +17,8 @@
    text-align: right;
    vertical-align: middle;

-    > .d-icon, > .spinner {
+    > .d-icon,
+    > .spinner {
      margin-right: 7px;
    }

@ -104,7 +105,8 @@
  .endpoint {
    margin-top: 20px;

-    .top, .bottom {
+    .top,
+    .bottom {
      display: flex;
    }

@ -138,6 +140,6 @@
  margin-bottom: 20px;
 }

-.wizard-step-contents{
+.wizard-step-contents {
  height: unset !important;
 }
--- a/assets/stylesheets/common/wizard-mapper.scss
+++ b/assets/stylesheets/common/wizard-mapper.scss
@ -26,7 +26,7 @@
  }
 }

-[class~='mapper-input'] {
+[class~="mapper-input"] {
  display: flex;
  align-items: flex-start;
  width: min-content;
@ -68,7 +68,8 @@
    border: 2px solid $primary-low;
  }

-  &.association, &.validation {
+  &.association,
+  &.validation {
    padding-right: 27px;
  }
 }
@ -106,7 +107,10 @@
  min-width: 250px;
  position: relative;

-  > input, .select-kit, .ac-wrap, .autocomplete.ac-user {
+  > input,
+  .select-kit,
+  .ac-wrap,
+  .autocomplete.ac-user {
    width: 250px !important;
  }

@ -143,7 +147,7 @@
  }

  .selector-types {
-    box-shadow: shadow('dropdown');
+    box-shadow: shadow("dropdown");
    position: absolute;
    display: flex;
    background: $secondary;
--- a/assets/stylesheets/wizard/custom/autocomplete.scss
+++ b/assets/stylesheets/wizard/custom/autocomplete.scss
@ -129,7 +129,8 @@ img.avatar {
    top: 30px !important;
    box-sizing: border-box;

-    li, .no-results {
+    li,
+    .no-results {
      padding: 10px;
    }

@ -151,7 +152,8 @@ img.avatar {
  background-color: var(--secondary);
  display: flex;

-  &:hover, &.selected {
+  &:hover,
+  &.selected {
    background-color: var(--tertiary);
    color: white;

--- a/assets/stylesheets/wizard/custom/composer.scss
+++ b/assets/stylesheets/wizard/custom/composer.scss
@ -8,12 +8,12 @@
  position: absolute;
  background-color: black;
  opacity: 0.8;
-  z-index: z("modal","overlay");
+  z-index: z("modal", "overlay");
 }

 .d-editor-modals {
  position: absolute;
-  z-index: z("modal","content");
+  z-index: z("modal", "content");
 }

 .d-editor {
@ -217,7 +217,8 @@
  }
 }

-.hide-hyperlink-box, .add-link {
+.hide-hyperlink-box,
+.add-link {
  display: inline;
 }

@ -231,7 +232,7 @@

 .bottom-bar {
  display: flex;
-  justify-content:space-between;
+  justify-content: space-between;
  margin-top: 20px;
  align-items: center;
 }
--- a/assets/stylesheets/wizard/custom/events.scss
+++ b/assets/stylesheets/wizard/custom/events.scss
@ -41,7 +41,8 @@
      flex: 1;
    }

-    .select-kit, .ac-wrap {
+    .select-kit,
+    .ac-wrap {
      width: 100% !important;
      max-width: 330px;
    }
@ -78,7 +79,16 @@
      padding-left: 20px;

      &.disabled {
-        span, label, .pika-label, .pika-table th, .pika-button, .pika-prev, .pika-next, input, .pika-lendar, .is-selected .pika-button {
+        span,
+        label,
+        .pika-label,
+        .pika-table th,
+        .pika-button,
+        .pika-prev,
+        .pika-next,
+        input,
+        .pika-lendar,
+        .is-selected .pika-button {
          color: var(--primary-low);
          background-image: initial;
          background: initial;
@ -87,7 +97,8 @@
          pointer-events: none;
        }

-        input, .pika-lendar {
+        input,
+        .pika-lendar {
          border: 1px solid var(--primary-low) !important;
        }
      }
@ -161,7 +172,6 @@
  }

  .rsvp-controls {
-    
    .rsvp-container {
      display: flex;
      flex-flow: wrap;
@ -196,7 +206,7 @@ $pd-title-bg: var(--secondary) !default;
 $pd-picker-bg: var(--secondary) !default;
 $pd-picker-border: var(--primary-low) !default;
 $pd-picker-border-bottom: var(--primary-low) !default;
-$pd-picker-shadow: rgba(0,0,0,.5) !default;
+$pd-picker-shadow: rgba(0, 0, 0, 0.5) !default;
 $pd-th-color: var(--primary) !default;
 $pd-day-color: var(--primary) !default;
 $pd-day-bg: var(--secondary) !default;
@ -212,289 +222,293 @@ $pd-week-color: var(--primary) !default;
 // Font
 $pd-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !default;

-
 .pika-single {
-    z-index: 9999;
-    display: block;
-    position: relative;
-    color: $pd-text-color;
-    background: $pd-picker-bg;
-    border: 1px solid $pd-picker-border;
-    border-bottom-color: $pd-picker-border-bottom;
-    font-family: $pd-font-family;
+  z-index: 9999;
+  display: block;
+  position: relative;
+  color: $pd-text-color;
+  background: $pd-picker-bg;
+  border: 1px solid $pd-picker-border;
+  border-bottom-color: $pd-picker-border-bottom;
+  font-family: $pd-font-family;

-    &.is-hidden {
-        display: none;
-    }
+  &.is-hidden {
+    display: none;
+  }

-    &.is-bound {
-        position: absolute;
-        box-shadow: 0 5px 15px -5px $pd-picker-shadow;
-    }
+  &.is-bound {
+    position: absolute;
+    box-shadow: 0 5px 15px -5px $pd-picker-shadow;
+  }
 }

 // clear child float (pika-lendar), using the famous micro clearfix hack
 // http://nicolasgallagher.com/micro-clearfix-hack/
 .pika-single {
-    &:before,
-    &:after {
-        content: " ";
-        display: table;
-    }
+  &:before,
+  &:after {
+    content: " ";
+    display: table;
+  }

-    &:after { clear: both }
+  &:after {
+    clear: both;
+  }
 }

 .pika-lendar {
-    float: left;
-    width: 240px;
-    margin: 8px;
+  float: left;
+  width: 240px;
+  margin: 8px;
 }

 .pika-title {
-    position: relative;
-    text-align: center;
+  position: relative;
+  text-align: center;

-    select {
-        cursor: pointer;
-        position: absolute;
-        z-index: 9998;
-        margin: 0;
-        left: 0;
-        top: 5px;
-        filter: alpha(opacity=0);
-        opacity: 0;
-    }
+  select {
+    cursor: pointer;
+    position: absolute;
+    z-index: 9998;
+    margin: 0;
+    left: 0;
+    top: 5px;
+    filter: alpha(opacity=0);
+    opacity: 0;
+  }
 }

 .pika-label {
-    display: inline-block;
-    position: relative;
-    z-index: 9999;
-    overflow: hidden;
-    margin: 0;
-    padding: 5px 3px;
-    font-size: 14px;
-    line-height: 20px;
-    font-weight: bold;
-    color: $pd-title-color;
-    background-color: $pd-title-bg;
+  display: inline-block;
+  position: relative;
+  z-index: 9999;
+  overflow: hidden;
+  margin: 0;
+  padding: 5px 3px;
+  font-size: 14px;
+  line-height: 20px;
+  font-weight: bold;
+  color: $pd-title-color;
+  background-color: $pd-title-bg;
 }

 .pika-prev,
 .pika-next {
-    display: block;
-    cursor: pointer;
-    position: relative;
-    outline: none;
-    border: 0;
-    padding: 0;
-    width: 20px;
-    height: 30px;
-    text-indent: 20px; // hide text using text-indent trick, using width value (it's enough)
-    white-space: nowrap;
-    overflow: hidden;
-    background-color: transparent;
-    background-position: center center;
-    background-repeat: no-repeat;
-    background-size: 75% 75%;
-    opacity: .5;
-    @if (lightness($secondary) < 50) { // invert the black png if the background is dark
-        filter: invert(1); 
-    } 
+  display: block;
+  cursor: pointer;
+  position: relative;
+  outline: none;
+  border: 0;
+  padding: 0;
+  width: 20px;
+  height: 30px;
+  text-indent: 20px; // hide text using text-indent trick, using width value (it's enough)
+  white-space: nowrap;
+  overflow: hidden;
+  background-color: transparent;
+  background-position: center center;
+  background-repeat: no-repeat;
+  background-size: 75% 75%;
+  opacity: 0.5;
+  @if (lightness($secondary) < 50) {
+    // invert the black png if the background is dark
+    filter: invert(1);
+  }

-    &:hover {
-        opacity: 1;
-    }
+  &:hover {
+    opacity: 1;
+  }

-    &.is-disabled {
-        cursor: default;
-        opacity: .2;
-    }
+  &.is-disabled {
+    cursor: default;
+    opacity: 0.2;
+  }
 }

 .pika-prev,
 .is-rtl .pika-next {
-    float: left;
-    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAeCAYAAAAsEj5rAAAAUklEQVR42u3VMQoAIBADQf8Pgj+OD9hG2CtONJB2ymQkKe0HbwAP0xucDiQWARITIDEBEnMgMQ8S8+AqBIl6kKgHiXqQqAeJepBo/z38J/U0uAHlaBkBl9I4GwAAAABJRU5ErkJggg==');
+  float: left;
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAeCAYAAAAsEj5rAAAAUklEQVR42u3VMQoAIBADQf8Pgj+OD9hG2CtONJB2ymQkKe0HbwAP0xucDiQWARITIDEBEnMgMQ8S8+AqBIl6kKgHiXqQqAeJepBo/z38J/U0uAHlaBkBl9I4GwAAAABJRU5ErkJggg==");
 }

 .pika-next,
 .is-rtl .pika-prev {
-    float: right;
-    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAeCAYAAAAsEj5rAAAAU0lEQVR42u3VOwoAMAgE0dwfAnNjU26bYkBCFGwfiL9VVWoO+BJ4Gf3gtsEKKoFBNTCoCAYVwaAiGNQGMUHMkjGbgjk2mIONuXo0nC8XnCf1JXgArVIZAQh5TKYAAAAASUVORK5CYII=');
+  float: right;
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAeCAYAAAAsEj5rAAAAU0lEQVR42u3VOwoAMAgE0dwfAnNjU26bYkBCFGwfiL9VVWoO+BJ4Gf3gtsEKKoFBNTCoCAYVwaAiGNQGMUHMkjGbgjk2mIONuXo0nC8XnCf1JXgArVIZAQh5TKYAAAAASUVORK5CYII=");
 }

 .pika-select {
-    display: inline-block;
+  display: inline-block;
 }

 .pika-table {
-    width: 100%;
-    border-collapse: collapse;
-    border-spacing: 0;
-    border: 0;
+  width: 100%;
+  border-collapse: collapse;
+  border-spacing: 0;
+  border: 0;

-    th,
-    td {
-        width: 14.285714285714286%;
-        padding: 0;
-    }
+  th,
+  td {
+    width: 14.285714285714286%;
+    padding: 0;
+  }

-    th {
-        color: $pd-th-color;
-        font-size: 12px;
-        line-height: 25px;
-        font-weight: bold;
-        text-align: center;
-    }
+  th {
+    color: $pd-th-color;
+    font-size: 12px;
+    line-height: 25px;
+    font-weight: bold;
+    text-align: center;
+  }

-    abbr {
-        border-bottom: none;
-        cursor: help;
-    }
+  abbr {
+    border-bottom: none;
+    cursor: help;
+  }
 }

 .pika-button {
-    cursor: pointer;
-    display: block;
-    -moz-box-sizing: border-box;
-    box-sizing: border-box;
-    outline: none;
-    border: 0;
-    margin: 0;
-    width: 100%;
-    padding: 5px;
-    color: $pd-day-color;
-    font-size: 12px;
-    line-height: 15px;
-    text-align: right;
-    background: $pd-day-bg;
+  cursor: pointer;
+  display: block;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  outline: none;
+  border: 0;
+  margin: 0;
+  width: 100%;
+  padding: 5px;
+  color: $pd-day-color;
+  font-size: 12px;
+  line-height: 15px;
+  text-align: right;
+  background: $pd-day-bg;

-    .is-today & {
-        color: $pd-day-today-color;
-        font-weight: bold;
-    }
+  .is-today & {
+    color: $pd-day-today-color;
+    font-weight: bold;
+  }

-    .is-selected & {
-        color: $pd-day-selected-color;
-        font-weight: bold;
-        background: $pd-day-selected-bg;
-        box-shadow: inset 0 1px 3px $pd-day-selected-shadow;
-        border-radius: 3px;
-    }
+  .is-selected & {
+    color: $pd-day-selected-color;
+    font-weight: bold;
+    background: $pd-day-selected-bg;
+    box-shadow: inset 0 1px 3px $pd-day-selected-shadow;
+    border-radius: 3px;
+  }

-    .is-disabled &,
-    .is-outside-current-month & {
-        pointer-events: none;
-        cursor: default;
-        color: $pd-day-disabled-color;
-        opacity: .3;
-    }
+  .is-disabled &,
+  .is-outside-current-month & {
+    pointer-events: none;
+    cursor: default;
+    color: $pd-day-disabled-color;
+    opacity: 0.3;
+  }

-    &:hover {
-        color: $pd-day-hover-color;
-        background: $pd-day-hover-bg;
-        box-shadow: none;
-        border-radius: 3px;
-    }
+  &:hover {
+    color: $pd-day-hover-color;
+    background: $pd-day-hover-bg;
+    box-shadow: none;
+    border-radius: 3px;
+  }
 }

 .pika-week {
-    font-size: 11px;
-    color: $pd-week-color;
+  font-size: 11px;
+  color: $pd-week-color;
 }

 .is-inrange .pika-button {
-    background: #D5E9F7;
+  background: #d5e9f7;
 }

 .is-startrange .pika-button {
-    color: var(--secondary);
-    background: #6CB31D;
-    box-shadow: none;
-    border-radius: 3px;
+  color: var(--secondary);
+  background: #6cb31d;
+  box-shadow: none;
+  border-radius: 3px;
 }

 .is-endrange .pika-button {
-    color: var(--secondary);
-    background: var(--tertiary);
-    box-shadow: none;
-    border-radius: 3px;
+  color: var(--secondary);
+  background: var(--tertiary);
+  box-shadow: none;
+  border-radius: 3px;
 }

-
 // timepicker

 .ui-timepicker-wrapper {
-	overflow-y: auto;
-	max-height: 150px;
-	width: 6.5em;
-	background: #fff;
-	border: 1px solid #ddd;
-	-webkit-box-shadow:0 5px 10px rgba(0,0,0,0.2);
-	-moz-box-shadow:0 5px 10px rgba(0,0,0,0.2);
-	box-shadow:0 5px 10px rgba(0,0,0,0.2);
-	outline: none;
-	z-index: 10001;
-	margin: 0;
+  overflow-y: auto;
+  max-height: 150px;
+  width: 6.5em;
+  background: #fff;
+  border: 1px solid #ddd;
+  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
+  -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
+  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
+  outline: none;
+  z-index: 10001;
+  margin: 0;
 }

 .ui-timepicker-wrapper.ui-timepicker-with-duration {
-	width: 13em;
+  width: 13em;
 }

 .ui-timepicker-wrapper.ui-timepicker-with-duration.ui-timepicker-step-30,
 .ui-timepicker-wrapper.ui-timepicker-with-duration.ui-timepicker-step-60 {
-	width: 11em;
+  width: 11em;
 }

 .ui-timepicker-list {
-	margin: 0;
-	padding: 0;
-	list-style: none;
+  margin: 0;
+  padding: 0;
+  list-style: none;
 }

 .ui-timepicker-duration {
-	margin-left: 5px; color: #888;
+  margin-left: 5px;
+  color: #888;
 }

 .ui-timepicker-list:hover .ui-timepicker-duration {
-	color: #888;
+  color: #888;
 }

 .ui-timepicker-list li {
-	padding: 3px 0 3px 5px;
-	cursor: pointer;
-	white-space: nowrap;
-	color: #000;
-	list-style: none;
-	margin: 0;
+  padding: 3px 0 3px 5px;
+  cursor: pointer;
+  white-space: nowrap;
+  color: #000;
+  list-style: none;
+  margin: 0;
 }

 .ui-timepicker-list:hover .ui-timepicker-selected {
-	background: #fff; color: #000;
+  background: #fff;
+  color: #000;
 }

 li.ui-timepicker-selected,
 .ui-timepicker-list li:hover,
 .ui-timepicker-list .ui-timepicker-selected:hover {
-	background: #1980EC; color: #fff;
+  background: #1980ec;
+  color: #fff;
 }

 li.ui-timepicker-selected .ui-timepicker-duration,
 .ui-timepicker-list li:hover .ui-timepicker-duration {
-	color: #ccc;
+  color: #ccc;
 }

 .ui-timepicker-list li.ui-timepicker-disabled,
 .ui-timepicker-list li.ui-timepicker-disabled:hover,
 .ui-timepicker-list li.ui-timepicker-selected.ui-timepicker-disabled {
-	color: #888;
-	cursor: default;
+  color: #888;
+  cursor: default;
 }

 .ui-timepicker-list li.ui-timepicker-disabled:hover,
 .ui-timepicker-list li.ui-timepicker-selected.ui-timepicker-disabled {
-	background: #f2f2f2;
+  background: #f2f2f2;
 }
--- a/assets/stylesheets/wizard/custom/field.scss
+++ b/assets/stylesheets/wizard/custom/field.scss
@ -33,7 +33,10 @@
    }

    &.invalid {
-      textarea, input[type=text], input[type=checkbox], .select-kit {
+      textarea,
+      input[type="text"],
+      input[type="checkbox"],
+      .select-kit {
        outline: 4px solid var(--danger);
      }
    }
@ -43,7 +46,7 @@
    display: flex;
    align-items: center;

-    &> .input-area {
+    & > .input-area {
      order: 0;
      margin: 15px 20px !important;

@ -54,12 +57,12 @@
      }
    }

-    &> label.field-label {
+    & > label.field-label {
      order: 1;
      font-weight: 400;
    }

-    &> .field-description {
+    & > .field-description {
      margin-top: 0;
      order: 2;
    }
@ -83,7 +86,7 @@
    }
  }

-  .wizard-image-preview  {
+  .wizard-image-preview {
    margin-top: 10px;
    max-width: 500px;
    max-height: 500px;
--- a/assets/stylesheets/wizard/custom/locations.scss
+++ b/assets/stylesheets/wizard/custom/locations.scss
@ -72,7 +72,8 @@
  }
 }

-input.input-location, div.input-location {
+input.input-location,
+div.input-location {
  max-height: 150px;
  background-color: var(--secondary);
  box-shadow: none;
@ -111,7 +112,8 @@ input.input-location, div.input-location {
      top: 30px !important;
      box-sizing: border-box;

-      li, .no-results {
+      li,
+      .no-results {
        padding: 10px;
      }

@ -128,7 +130,8 @@ input.input-location, div.input-location {
  background-color: var(--secondary);
  display: flex;

-  &:hover, &.selected {
+  &:hover,
+  &.selected {
    background-color: var(--tertiary);
    color: white;

--- a/assets/stylesheets/wizard/custom/step.scss
+++ b/assets/stylesheets/wizard/custom/step.scss
@ -70,7 +70,7 @@

    img.large {
      width: 150;
-      padding: 25px;;
+      padding: 25px;
    }

    img.small {
@ -119,7 +119,7 @@

  .step-message {
    text-align: center;
-    transition: all .2s;
+    transition: all 0.2s;
    z-index: 2;
    padding: 20px;

--- a/assets/stylesheets/wizard/custom/wizard.scss
+++ b/assets/stylesheets/wizard/custom/wizard.scss
@ -11,7 +11,7 @@
    }

    .wizard-column-contents h1 {
-      margin: 0
+      margin: 0;
    }

    .wizard-footer {
@ -19,7 +19,9 @@
    }
  }

-  .wizard-buttons > a, .wizard-buttons > button, .spinner {
+  .wizard-buttons > a,
+  .wizard-buttons > button,
+  .spinner {
    display: inline-block;
    vertical-align: middle;
  }
@ -59,7 +61,7 @@

 /* IE11 hacks */

-@media all and (-ms-high-contrast:none) {
+@media all and (-ms-high-contrast: none) {
  .custom-wizard {
    div.wizard-step-contents {
      display: block;