www.aleph1.co.uk Git - yaffs-website/blob - web/modules/contrib/paragraphs/css/paragraphs.widget.css

   1 .paragraphs-icon {
   2   display: inline-block;
   3   height: 20px;
   4   width: 20px;
   5   background: no-repeat center;
   6   background-size: 16px 16px;
   7 }
   8
   9 .paragraphs-icon-view {
  10   background-image: url("../icons/icon-view.svg");
  11 }
  12
  13 .paragraphs-icon-edit-info {
  14   background-image: url("../icons/icon-edit-info.svg");
  15 }
  16
  17 .paragraphs-icon-edit-disabled {
  18   background-image: url("../icons/icon-edit-disabled.svg");
  19 }
  20
  21 .paragraphs-icon-delete {
  22   background-image: url("../icons/icon-delete.svg");
  23 }
  24
  25 .paragraphs-icon-delete-disabled {
  26   background-image: url("../icons/icon-delete-disabled.svg");
  27 }
  28
  29 .paragraphs-icon-lock {
  30   background-image: url("../icons/icon-lock.svg");
  31 }
  32
  33 .paragraphs-icon-changed {
  34   background-image: url("../icons/icon-changed.svg");
  35 }
  36
  37 .paragraphs-icon-collapse {
  38   background-image: url("../icons/icon-collapse.svg");
  39 }
  40
  41 .paragraphs-icon-warning {
  42   background-image: url("../icons/icon-warning.svg");
  43 }
  44
  45 .paragraphs-icon-error {
  46   background-image: url("../icons/icon-error.svg");
  47 }
  48
  49 @media (max-width: 768px) {
  50   .button.paragraphs-icon-button {
  51     padding: 0;
  52     width: 36px !important;
  53     height: 36px;
  54     background-position: center !important;
  55     background-repeat: no-repeat !important;
  56     background-size: 24px 24px;
  57     border-radius: 4px;
  58     text-indent: -9999em;
  59   }
  60   .button.paragraphs-icon-button-collapse, .button.paragraphs-icon-button-collapse:active, .button.paragraphs-icon-button-collapse:hover, .button.paragraphs-icon-button-collapse:focus {
  61     background-image: url("../icons/icon-collapse.svg");
  62   }
  63   .button.paragraphs-icon-button-collapse:disabled, .button.paragraphs-icon-button-collapse:disabled:active {
  64     background-image: url("../icons/icon-collapse-disabled.svg");
  65   }
  66   .button.paragraphs-icon-button-edit, .button.paragraphs-icon-button-edit:active, .button.paragraphs-icon-button-edit:hover, .button.paragraphs-icon-button-edit:focus {
  67     background-image: url("../icons/icon-edit.svg");
  68   }
  69   .button.paragraphs-icon-button-edit:disabled, .button.paragraphs-icon-button-edit:disabled:active {
  70     background-image: url("../icons/icon-edit-disabled.svg");
  71   }
  72 }
  73
  74 .paragraph-type-info {
  75   display: -webkit-box;
  76   display: -webkit-flex;
  77   display: -ms-flexbox;
  78   display: flex;
  79 }
  80
  81 .paragraphs-tabs-wrapper .paragraphs-tabs {
  82   display: none;
  83 }
  84
  85 .js .field--widget-paragraphs th .paragraphs-actions {
  86   float: right;
  87   margin-right: -11px;
  88 }
  89
  90 .js .field--widget-paragraphs .paragraphs-dropbutton-wrapper {
  91   display: -webkit-inline-box;
  92   display: -webkit-inline-flex;
  93   display: -ms-inline-flexbox;
  94   display: inline-flex;
  95 }
  96
  97 .js .field--widget-paragraphs .dropbutton-wrapper {
  98   width: auto;
  99   margin-right: 0;
 100   padding-right: 0;
 101 }
 102
 103 .js .field--widget-paragraphs .dropbutton-widget {
 104   position: static;
 105 }
 106
 107 .js .field--widget-paragraphs .field-multiple-table {
 108   margin-bottom: 10px;
 109 }
 110
 111 .js .field--widget-paragraphs td {
 112   padding: 10px 0;
 113 }
 114
 115 .js .field--widget-paragraphs .field-multiple-drag {
 116   vertical-align: top;
 117 }
 118
 119 .js .field--widget-paragraphs .draggable .tabledrag-handle {
 120   margin-left: 0;
 121 }
 122
 123 .js .field--widget-paragraphs .tabledrag-handle .handle {
 124   height: 22px;
 125 }
 126
 127 .js .field--widget-paragraphs .delta-order {
 128   padding-right: 10px;
 129   text-align: right;
 130 }
 131
 132 .js .paragraph-type-top {
 133   display: -ms-grid;
 134   display: grid;
 135   -ms-grid-columns: 100px auto 1fr auto;
 136       grid-template-columns: 100px auto 1fr auto;
 137   -ms-grid-rows: auto;
 138       grid-template-rows: auto;
 139   grid-gap: 5px 5px;
 140   -webkit-box-align: center;
 141   -webkit-align-items: center;
 142       -ms-flex-align: center;
 143           align-items: center;
 144 }
 145
 146 .js .paragraph-type-top .paragraph-type-title {
 147   grid-column: 1 / 2;
 148   -ms-grid-row-span: 1;
 149   -ms-grid-row: 1;
 150       grid-row: 1 / span 1;
 151 }
 152
 153 .js .paragraph-type-top .paragraph-type-info {
 154   grid-column: 2 / 3;
 155   -ms-grid-column: 2;
 156   -ms-grid-row-span: 1;
 157   -ms-grid-row: 1;
 158       grid-row: 1 / span 1;
 159 }
 160
 161 .js .paragraph-type-top .paragraph-type-summary {
 162   grid-column: 1 / 5;
 163   -ms-grid-column: 1;
 164   -ms-grid-column-span: 5;
 165   -ms-grid-row-span: 1;
 166   -ms-grid-row: 2;
 167       grid-row: 2 / span 1;
 168 }
 169
 170 @media (min-width: 600px) {
 171   .js .paragraph-type-top .paragraph-type-summary {
 172     grid-column: 3 / 4;
 173     -ms-grid-column: 3;
 174     -ms-grid-column-span: 1;
 175     -ms-grid-row-span: 1;
 176     -ms-grid-row: 1;
 177         grid-row: 1 / span 1;
 178   }
 179 }
 180
 181 .js .paragraph-type-top .paragraphs-actions {
 182   grid-column: 3 / 5;
 183   -ms-grid-column: 3;
 184   -ms-grid-column-span: 2;
 185   -ms-grid-row-span: 1;
 186   -ms-grid-row: 1;
 187       grid-row: 1 / span 1;
 188   justify-self: end;
 189   -ms-grid-column-align: end;
 190 }
 191
 192 @media (min-width: 600px) {
 193   .js .paragraph-type-top .paragraphs-actions {
 194     grid-column: 4 / 5;
 195     -ms-grid-column: 4;
 196     -ms-grid-column-span: 1;
 197   }
 198 }
 199
 200 .js .paragraphs-subform {
 201   margin-top: 5px;
 202 }
 203
 204 .js .paragraphs-collapsed-description {
 205   position: relative;
 206   height: 1.538em;
 207   overflow: hidden;
 208   color: #777;
 209   word-break: break-all;
 210 }
 211
 212 .js .paragraphs-collapsed-description::after {
 213   display: block;
 214   position: absolute;
 215   top: 0;
 216   right: 0;
 217   width: 3em;
 218   background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(#fff));
 219   background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, #fff 100%);
 220   content: "\00a0";
 221 }
 222
 223 .draggable:hover .paragraphs-collapsed-description::after {
 224   background: -webkit-gradient(linear, left top, right top, from(rgba(247, 252, 255, 0)), to(#f7fcff));
 225   background: linear-gradient(to right, rgba(247, 252, 255, 0) 0%, #f7fcff 100%);
 226 }
 227
 228 .drag-previous .paragraphs-collapsed-description::after {
 229   background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 221, 0)), to(#ffd));
 230   background: linear-gradient(to right, rgba(255, 255, 221, 0) 0%, #ffd 100%);
 231 }
 232
 233 tr:hover .paragraphs-collapsed-description::after {
 234   background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 221, 0)), to(#f7fcff));
 235   background: linear-gradient(to right, rgba(255, 255, 221, 0) 0%, #f7fcff 100%);
 236 }
 237
 238 .js .paragraph-type-title {
 239   display: -webkit-box;
 240   display: -webkit-flex;
 241   display: -ms-flexbox;
 242   display: flex;
 243   -webkit-flex-basis: 100px;
 244       -ms-flex-preferred-size: 100px;
 245           flex-basis: 100px;
 246   min-width: 100px;
 247 }
 248
 249 .js .paragraph-type-icon {
 250   padding-right: 5px;
 251   height: 16px;
 252   width: 16px;
 253 }
 254
 255 .js .paragraph-type-label {
 256   text-overflow: ellipsis;
 257   white-space: nowrap;
 258   overflow: hidden;
 259 }
 260
 261 @media (min-width: 600px) {
 262   .js .paragraph-type-add-modal {
 263     width: 100%;
 264     padding: 10px 0;
 265     height: 30px;
 266     margin-top: -1.8em;
 267     margin-bottom: -0.2em;
 268     display: inline;
 269   }
 270 }
 271
 272 .js .paragraph-type-add-modal-button {
 273   display: inline-block;
 274   margin: 0 auto;
 275 }
 276
 277 .js .paragraph-type-add-modal-button:hover {
 278   color: #ffffff;
 279   background: #057ec7 none;
 280 }
 281
 282 .paragraph--view-mode--preview {
 283   padding-right: 1em;
 284 }
 285
 286 .is-horizontal .paragraphs-tabs .tabs__tab {
 287   border-bottom: 0;
 288 }