--- /dev/null
+//
+// @file
+// Experimental paragraphs widget CSS.
+//
+
+@import "variables";
+
+.paragraphs {
+ // Paragraphs state information icons.
+ &-icon {
+ display: inline-block;
+ height: $info-size;
+ width: $info-size;
+ background: no-repeat center;
+ background-size: $info-icon-size $info-icon-size;
+
+ $icons: view edit-info edit-disabled delete delete-disabled lock changed collapse warning error;
+ @each $icon in $icons {
+ &-#{$icon} {
+ background-image: url('../icons/icon-#{$icon}.svg');
+ }
+ }
+ }
+}
+
+// Paragraphs button icon support for small screens.
+@media (max-width: map-get($grid-breakpoints, 'md')) {
+ .button.paragraphs-icon-button {
+ padding: 0;
+ width: $action-size-big !important;
+ height: $action-size-big;
+ // We need important flag here to easily override many specific rules from
+ // seven buttons.css.
+ background-position: center !important;
+ background-repeat: no-repeat !important;
+ background-size: $action-icon-size $action-icon-size;
+ border-radius: $action-border-radius;
+ text-indent: -9999em;
+
+ $icons: collapse edit;
+ @each $icon in $icons {
+ &-#{$icon},
+ &-#{$icon}:active,
+ &-#{$icon}:hover,
+ &-#{$icon}:focus {
+ background-image: url('../icons/icon-#{$icon}.svg');
+ }
+
+ &-#{$icon}:disabled,
+ &-#{$icon}:disabled:active {
+ background-image: url('../icons/icon-#{$icon}-disabled.svg');
+ }
+ }
+ }
+}
+
+.paragraph-type-info {
+ display: flex;
+}
+
+.paragraphs-tabs-wrapper {
+ .paragraphs-tabs {
+ display: none;
+ }
+}
+
+// We are using .js prefix here mainly because we want to apply this style rules
+// only for JS version of a widget.
+.js {
+ .field--widget-paragraphs {
+ th .paragraphs-actions {
+ float: right;
+ // Table th padding is 12px but for some weird reason here we need to do
+ // -11px to return it back.
+ margin-right: -11px;
+ }
+
+ .paragraphs-dropbutton-wrapper {
+ // We are using inline-flex here so 'Add type' dropdown button is inline
+ // and aligned 'to type' text.
+ display: inline-flex;
+ }
+
+ .dropbutton-wrapper {
+ // Override 600px breakpoint from core, needed again so 'to type' is in
+ // the same line with add dropdown button.
+ width: auto;
+
+ // Reset some CSS that are coming from core.
+ margin-right: 0;
+ padding-right: 0;
+ }
+
+ // Reset some CSS that are coming from core.
+ .dropbutton-widget {
+ position: static;
+ }
+
+ .field-multiple-table {
+ margin-bottom: 10px;
+ }
+
+ td { // stylelint-disable-line selector-no-type
+ padding: 10px 0;
+ }
+
+ .field-multiple-drag {
+ vertical-align: top;
+ }
+
+ .draggable .tabledrag-handle {
+ margin-left: 0;
+ }
+
+ .tabledrag-handle .handle {
+ height: 22px;
+ }
+
+ .delta-order {
+ padding-right: 10px;
+ text-align: right;
+ }
+ }
+
+ .paragraph-type-top {
+ display: grid;
+ grid-template-columns: 100px auto 1fr auto;
+ grid-template-rows: auto;
+ grid-gap: $gutter-top $gutter-top;
+ align-items: center;
+
+ .paragraph-type-title {
+ grid-column: 1 / 2;
+ // PostCSS autoprefixer does not support -ms-grid-column and some other
+ // attributes that we need. This support will not be improved so we need
+ // to do it manually for IE.
+ -ms-grid-column: 1;
+ grid-row: 1 / span 1;
+ }
+
+ .paragraph-type-info {
+ grid-column: 2 / 3;
+ -ms-grid-column: 2;
+ grid-row: 1 / span 1;
+ }
+
+ .paragraph-type-summary {
+ grid-column: 1 / 5;
+ -ms-grid-column: 1;
+ -ms-grid-column-span: 5;
+ grid-row: 2 / span 1;
+
+ @media (min-width: map-get($grid-breakpoints, 'sm')) {
+ grid-column: 3 / 4;
+ -ms-grid-column: 3;
+ -ms-grid-column-span: 1;
+ grid-row: 1 / span 1;
+ }
+ }
+
+ .paragraphs-actions {
+ grid-column: 3 / 5;
+ -ms-grid-column: 3;
+ -ms-grid-column-span: 2;
+ grid-row: 1 / span 1;
+ justify-self: end;
+ -ms-grid-column-align: end;
+
+ @media (min-width: map-get($grid-breakpoints, 'sm')) {
+ grid-column: 4 / 5;
+ -ms-grid-column: 4;
+ -ms-grid-column-span: 1;
+ }
+ }
+ }
+
+ .paragraphs-subform {
+ margin-top: 5px;
+ }
+
+ .paragraphs-collapsed-description {
+ position: relative;
+ height: 1.538em;
+ overflow: hidden;
+ color: #777;
+ word-break: break-all;
+
+ // Fade out text element.
+ &::after {
+ display: block;
+ position: absolute;
+ top: 0;
+ right: 0;
+ width: 3em;
+ background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, #fff 100%);
+ content: "\00a0";
+ }
+
+ @at-root .draggable:hover .paragraphs-collapsed-description {
+ &::after {
+ background: linear-gradient(to right, rgba(247, 252, 255, 0) 0%, #f7fcff 100%);
+ }
+ }
+
+ @at-root .drag-previous .paragraphs-collapsed-description {
+ &::after {
+ background: linear-gradient(to right, rgba(255, 255, 221, 0) 0%, #ffd 100%);
+ }
+ }
+
+ @at-root tr:hover .paragraphs-collapsed-description {
+ &::after {
+ background: linear-gradient(to right, rgba(255, 255, 221, 0) 0%, #f7fcff 100%);
+ }
+ }
+ }
+
+ .paragraph-type {
+ &-title {
+ display: flex;
+ flex-basis: 100px;
+ min-width: 100px;
+ }
+
+ &-icon {
+ padding-right: $gutter-top;
+ height: $info-icon-size;
+ width: $info-icon-size;
+ }
+
+ &-label {
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ overflow: hidden;
+ }
+ }
+
+ @media (min-width: map-get($grid-breakpoints, 'sm')) {
+ .paragraph-type-add-modal {
+ width: 100%;
+ padding: 10px 0;
+ height: 30px;
+ margin-top: -1.8em;
+ margin-bottom: -0.2em;
+ display: inline;
+ }
+ }
+
+ .paragraph-type-add-modal-button {
+ display: inline-block;
+ margin: 0 auto;
+ }
+
+ .paragraph-type-add-modal-button:hover {
+ color: #ffffff;
+ background: #057ec7 none;
+ }
+}
+
+.paragraph--view-mode--preview {
+ padding-right: 1em;
+}
+
+.is-horizontal .paragraphs-tabs .tabs__tab {
+ border-bottom: 0;
+}
projects / yaffs-website / blobdiff