yaffs.net Git - yaffs-website/blob - web/modules/contrib/paragraphs/css/paragraphs.widget.scss

   1 //
   2 // @file
   3 // Experimental paragraphs widget CSS.
   4 //
   5
   6 @import "variables";
   7
   8 .paragraphs {
   9   // Paragraphs state information icons.
  10   &-icon {
  11     display: inline-block;
  12     height: $info-size;
  13     width: $info-size;
  14     background: no-repeat center;
  15     background-size: $info-icon-size $info-icon-size;
  16
  17     $icons: view edit-info edit-disabled delete delete-disabled lock changed collapse warning error;
  18     @each $icon in $icons {
  19       &-#{$icon} {
  20         background-image: url('../icons/icon-#{$icon}.svg');
  21       }
  22     }
  23   }
  24 }
  25
  26 // Paragraphs button icon support for small screens.
  27 @media (max-width: map-get($grid-breakpoints, 'md')) {
  28   .button.paragraphs-icon-button {
  29     padding: 0;
  30     width: $action-size-big !important;
  31     height: $action-size-big;
  32     // We need important flag here to easily override many specific rules from
  33     // seven buttons.css.
  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;
  38     text-indent: -9999em;
  39
  40     $icons: collapse edit;
  41     @each $icon in $icons {
  42       &-#{$icon},
  43       &-#{$icon}:active,
  44       &-#{$icon}:hover,
  45       &-#{$icon}:focus {
  46         background-image: url('../icons/icon-#{$icon}.svg');
  47       }
  48
  49       &-#{$icon}:disabled,
  50       &-#{$icon}:disabled:active {
  51         background-image: url('../icons/icon-#{$icon}-disabled.svg');
  52       }
  53     }
  54   }
  55 }
  56
  57 .paragraph-type-info {
  58   display: flex;
  59 }
  60
  61 .paragraphs-tabs-wrapper {
  62   .paragraphs-tabs {
  63     display: none;
  64   }
  65 }
  66
  67 // We are using .js prefix here mainly because we want to apply this style rules
  68 // only for JS version of a widget.
  69 .js {
  70   .field--widget-paragraphs {
  71     th .paragraphs-actions {
  72       float: right;
  73       // Table th padding is 12px but for some weird reason here we need to do
  74       // -11px to return it back.
  75       margin-right: -11px;
  76     }
  77
  78     .paragraphs-dropbutton-wrapper {
  79       // We are using inline-flex here so 'Add type' dropdown button is inline
  80       // and aligned 'to type' text.
  81       display: inline-flex;
  82     }
  83
  84     .dropbutton-wrapper {
  85       // Override 600px breakpoint from core, needed again so 'to type' is in
  86       // the same line with add dropdown button.
  87       width: auto;
  88
  89       // Reset some CSS that are coming from core.
  90       margin-right: 0;
  91       padding-right: 0;
  92     }
  93
  94     // Reset some CSS that are coming from core.
  95     .dropbutton-widget {
  96       position: static;
  97     }
  98
  99     .field-multiple-table {
 100       margin-bottom: 10px;
 101     }
 102
 103     td { // stylelint-disable-line selector-no-type
 104       padding: 10px 0;
 105     }
 106
 107     .field-multiple-drag {
 108       vertical-align: top;
 109     }
 110
 111     .draggable .tabledrag-handle {
 112       margin-left: 0;
 113     }
 114
 115     .tabledrag-handle .handle {
 116       height: 22px;
 117     }
 118
 119     .delta-order {
 120       padding-right: 10px;
 121       text-align: right;
 122     }
 123   }
 124
 125   .paragraph-type-top {
 126     display: grid;
 127     grid-template-columns: 100px auto 1fr auto;
 128     grid-template-rows: auto;
 129     grid-gap: $gutter-top $gutter-top;
 130     align-items: center;
 131
 132     .paragraph-type-title {
 133       grid-column: 1 / 2;
 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.
 137       -ms-grid-column: 1;
 138       grid-row: 1 / span 1;
 139     }
 140
 141     .paragraph-type-info {
 142       grid-column: 2 / 3;
 143       -ms-grid-column: 2;
 144       grid-row: 1 / span 1;
 145     }
 146
 147     .paragraph-type-summary {
 148       grid-column: 1 / 5;
 149       -ms-grid-column: 1;
 150       -ms-grid-column-span: 5;
 151       grid-row: 2 / span 1;
 152
 153       @media (min-width: map-get($grid-breakpoints, 'sm')) {
 154         grid-column: 3 / 4;
 155         -ms-grid-column: 3;
 156         -ms-grid-column-span: 1;
 157         grid-row: 1 / span 1;
 158       }
 159     }
 160
 161     .paragraphs-actions {
 162       grid-column: 3 / 5;
 163       -ms-grid-column: 3;
 164       -ms-grid-column-span: 2;
 165       grid-row: 1 / span 1;
 166       justify-self: end;
 167       -ms-grid-column-align: end;
 168
 169       @media (min-width: map-get($grid-breakpoints, 'sm')) {
 170         grid-column: 4 / 5;
 171         -ms-grid-column: 4;
 172         -ms-grid-column-span: 1;
 173       }
 174     }
 175   }
 176
 177   .paragraphs-subform {
 178     margin-top: 5px;
 179   }
 180
 181   .paragraphs-collapsed-description {
 182     position: relative;
 183     height: 1.538em;
 184     overflow: hidden;
 185     color: #777;
 186     word-break: break-all;
 187
 188     // Fade out text element.
 189     &::after {
 190       display: block;
 191       position: absolute;
 192       top: 0;
 193       right: 0;
 194       width: 3em;
 195       background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, #fff 100%);
 196       content: "\00a0";
 197     }
 198
 199     @at-root .draggable:hover .paragraphs-collapsed-description {
 200       &::after {
 201         background: linear-gradient(to right, rgba(247, 252, 255, 0) 0%, #f7fcff 100%);
 202       }
 203     }
 204
 205     @at-root .drag-previous .paragraphs-collapsed-description {
 206       &::after {
 207         background: linear-gradient(to right, rgba(255, 255, 221, 0) 0%, #ffd 100%);
 208       }
 209     }
 210
 211     @at-root tr:hover .paragraphs-collapsed-description {
 212       &::after {
 213         background: linear-gradient(to right, rgba(255, 255, 221, 0) 0%, #f7fcff 100%);
 214       }
 215     }
 216   }
 217
 218   .paragraph-type {
 219     &-title {
 220       display: flex;
 221       flex-basis: 100px;
 222       min-width: 100px;
 223     }
 224
 225     &-icon {
 226       padding-right: $gutter-top;
 227       height: $info-icon-size;
 228       width: $info-icon-size;
 229     }
 230
 231     &-label {
 232       text-overflow: ellipsis;
 233       white-space: nowrap;
 234       overflow: hidden;
 235     }
 236   }
 237
 238   @media (min-width: map-get($grid-breakpoints, 'sm')) {
 239     .paragraph-type-add-modal {
 240       width: 100%;
 241       padding: 10px 0;
 242       height: 30px;
 243       margin-top: -1.8em;
 244       margin-bottom: -0.2em;
 245       display: inline;
 246     }
 247   }
 248
 249   .paragraph-type-add-modal-button {
 250     display: inline-block;
 251     margin: 0 auto;
 252   }
 253
 254   .paragraph-type-add-modal-button:hover {
 255     color: #ffffff;
 256     background: #057ec7 none;
 257   }
 258 }
 259
 260 .paragraph--view-mode--preview {
 261   padding-right: 1em;
 262 }
 263
 264 .is-horizontal .paragraphs-tabs .tabs__tab {
 265   border-bottom: 0;
 266 }