3 // Experimental paragraphs widget CSS.
9 // Paragraphs state information icons.
11 display: inline-block;
14 background: no-repeat center;
15 background-size: $info-icon-size $info-icon-size;
17 $icons: view edit-info edit-disabled delete delete-disabled lock changed collapse warning error;
18 @each $icon in $icons {
20 background-image: url('../icons/icon-#{$icon}.svg');
26 // Paragraphs button icon support for small screens.
27 @media (max-width: map-get($grid-breakpoints, 'md')) {
28 .button.paragraphs-icon-button {
30 width: $action-size-big !important;
31 height: $action-size-big;
32 // We need important flag here to easily override many specific rules from
34 background-position: center !important;
35 background-repeat: no-repeat !important;
36 background-size: $action-icon-size $action-icon-size;
37 border-radius: $action-border-radius;
40 $icons: collapse edit;
41 @each $icon in $icons {
46 background-image: url('../icons/icon-#{$icon}.svg');
50 &-#{$icon}:disabled:active {
51 background-image: url('../icons/icon-#{$icon}-disabled.svg');
57 .paragraph-type-info {
61 .paragraphs-tabs-wrapper {
67 // We are using .js prefix here mainly because we want to apply this style rules
68 // only for JS version of a widget.
70 .field--widget-paragraphs {
71 th .paragraphs-actions {
73 // Table th padding is 12px but for some weird reason here we need to do
74 // -11px to return it back.
78 .paragraphs-dropbutton-wrapper {
79 // We are using inline-flex here so 'Add type' dropdown button is inline
80 // and aligned 'to type' text.
85 // Override 600px breakpoint from core, needed again so 'to type' is in
86 // the same line with add dropdown button.
89 // Reset some CSS that are coming from core.
94 // Reset some CSS that are coming from core.
99 .field-multiple-table {
103 td { // stylelint-disable-line selector-no-type
107 .field-multiple-drag {
111 .draggable .tabledrag-handle {
115 .tabledrag-handle .handle {
125 .paragraph-type-top {
127 grid-template-columns: 100px auto 1fr auto;
128 grid-template-rows: auto;
129 grid-gap: $gutter-top $gutter-top;
132 .paragraph-type-title {
134 // PostCSS autoprefixer does not support -ms-grid-column and some other
135 // attributes that we need. This support will not be improved so we need
136 // to do it manually for IE.
138 grid-row: 1 / span 1;
141 .paragraph-type-info {
144 grid-row: 1 / span 1;
147 .paragraph-type-summary {
150 -ms-grid-column-span: 5;
151 grid-row: 2 / span 1;
153 @media (min-width: map-get($grid-breakpoints, 'sm')) {
156 -ms-grid-column-span: 1;
157 grid-row: 1 / span 1;
161 .paragraphs-actions {
164 -ms-grid-column-span: 2;
165 grid-row: 1 / span 1;
167 -ms-grid-column-align: end;
169 @media (min-width: map-get($grid-breakpoints, 'sm')) {
172 -ms-grid-column-span: 1;
177 .paragraphs-subform {
181 .paragraphs-collapsed-description {
186 word-break: break-all;
188 // Fade out text element.
195 background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, #fff 100%);
199 @at-root .draggable:hover .paragraphs-collapsed-description {
201 background: linear-gradient(to right, rgba(247, 252, 255, 0) 0%, #f7fcff 100%);
205 @at-root .drag-previous .paragraphs-collapsed-description {
207 background: linear-gradient(to right, rgba(255, 255, 221, 0) 0%, #ffd 100%);
211 @at-root tr:hover .paragraphs-collapsed-description {
213 background: linear-gradient(to right, rgba(255, 255, 221, 0) 0%, #f7fcff 100%);
226 padding-right: $gutter-top;
227 height: $info-icon-size;
228 width: $info-icon-size;
232 text-overflow: ellipsis;
238 @media (min-width: map-get($grid-breakpoints, 'sm')) {
239 .paragraph-type-add-modal {
244 margin-bottom: -0.2em;
249 .paragraph-type-add-modal-button {
250 display: inline-block;
254 .paragraph-type-add-modal-button:hover {
256 background: #057ec7 none;
260 .paragraph--view-mode--preview {
264 .is-horizontal .paragraphs-tabs .tabs__tab {