X-Git-Url: http://www.aleph1.co.uk/gitweb/?p=yaffs-website;a=blobdiff_plain;f=web%2Fmodules%2Fcontrib%2Fparagraphs%2Fcss%2Fparagraphs.widget.scss;fp=web%2Fmodules%2Fcontrib%2Fparagraphs%2Fcss%2Fparagraphs.widget.scss;h=0000000000000000000000000000000000000000;hp=609bef9116e7abb2f02cc52c344bdc7f12c7a7bf;hb=059867c3f96750652c80f39e44c442a58c2549ee;hpb=f8fc16ae6b862bef59baaad5d051dd37b7ff11b2 diff --git a/web/modules/contrib/paragraphs/css/paragraphs.widget.scss b/web/modules/contrib/paragraphs/css/paragraphs.widget.scss deleted file mode 100644 index 609bef911..000000000 --- a/web/modules/contrib/paragraphs/css/paragraphs.widget.scss +++ /dev/null @@ -1,266 +0,0 @@ -// -// @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; -}