+++ /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