paragraphs.formatter.css 

.paragraphs-badge {
  display: inline-block;
  padding: 0.15em 0.3em;
  background: #787878;
  border-radius: 4px;
  color: #fff;
  cursor: default;
  font-size: 90%;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  margin: 3px 0;
}

.paragraphs-badge:empty {
  display: none;
}

.js .paragraphs-description .paragraphs-content-wrapper,
.js .paragraphs-description .paragraphs-plugin-wrapper {
  position: relative;
  height: 1.538em;
  overflow: hidden;
  word-break: break-all;
  line-height: 1.538em;
  text-overflow: ellipsis;
}

.js .paragraphs-description .summary-plugin-label::after {
  content: ": ";
}

.js .paragraphs-description .summary-content {
  color: #666666;
}

.js .paragraphs-description .summary-plugin {
  display: inline-block;
  padding-right: 5px;
  font-size: 0.7rem;
  color: #888888;
}

.js .paragraphs-description .summary-plugin:not(:last-child) {
  border-right: 2px solid #e5e3de;
}

.js .paragraphs-description .summary-plugin:not(:first-child) {
  padding: 0 5px;
}

.js .behavior-active .paragraphs-expanded-description .paragraphs-plugin-wrapper,
.js .behavior-active .paragraphs-content {
  display: none;
}

.js .behavior-active .paragraphs-behavior {
  display: block;
}

.js .content-active .paragraphs-expanded-description .paragraphs-content-wrapper {
  display: none;
}

.paragraph-formatter {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: auto 1fr;
      grid-template-columns: auto 1fr;
  -ms-grid-rows: auto;
      grid-template-rows: auto;
  grid-gap: 5px 5px;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}

.paragraph-formatter .paragraph-info {
  grid-column: 1 / 2;
  -ms-grid-column: 2;
  -ms-grid-row-span: 1;
  -ms-grid-row: 1;
  grid-row: 1 / span 1;
}

.paragraph-formatter .paragraph-summary {
  grid-column: 1 / 2;
  -ms-grid-column: 3;
  -ms-grid-column-span: 1;
  -ms-grid-row-span: 1;
  -ms-grid-row: 1;
  grid-row: 2 / span 1;
}

@media (min-width: 600px) {
  .paragraph-formatter .paragraph-summary {
    grid-column: 2 / 2;
    -ms-grid-column: 3;
    -ms-grid-column-span: 1;
    -ms-grid-row-span: 1;
    -ms-grid-row: 1;
    grid-row: 1 / span 1;
  }
}

File

paragraphs/css/paragraphs.formatter.css
View source
  1. .paragraphs-badge {

  2.   display: inline-block;

  3.   padding: 0.15em 0.3em;

  4.   background: #787878;

  5.   border-radius: 4px;

  6.   color: #fff;

  7.   cursor: default;

  8.   font-size: 90%;

  9.   line-height: 1;

  10.   text-align: center;

  11.   white-space: nowrap;

  12.   vertical-align: baseline;

  13.   margin: 3px 0;

  14. }

  15. 

  16. .paragraphs-badge:empty {

  17.   display: none;

  18. }

  19. 

  20. .js .paragraphs-description .paragraphs-content-wrapper,

  21. .js .paragraphs-description .paragraphs-plugin-wrapper {

  22.   position: relative;

  23.   height: 1.538em;

  24.   overflow: hidden;

  25.   word-break: break-all;

  26.   line-height: 1.538em;

  27.   text-overflow: ellipsis;

  28. }

  29. 

  30. .js .paragraphs-description .summary-plugin-label::after {

  31.   content: ": ";

  32. }

  33. 

  34. .js .paragraphs-description .summary-content {

  35.   color: #666666;

  36. }

  37. 

  38. .js .paragraphs-description .summary-plugin {

  39.   display: inline-block;

  40.   padding-right: 5px;

  41.   font-size: 0.7rem;

  42.   color: #888888;

  43. }

  44. 

  45. .js .paragraphs-description .summary-plugin:not(:last-child) {

  46.   border-right: 2px solid #e5e3de;

  47. }

  48. 

  49. .js .paragraphs-description .summary-plugin:not(:first-child) {

  50.   padding: 0 5px;

  51. }

  52. 

  53. .js .behavior-active .paragraphs-expanded-description .paragraphs-plugin-wrapper,

  54. .js .behavior-active .paragraphs-content {

  55.   display: none;

  56. }

  57. 

  58. .js .behavior-active .paragraphs-behavior {

  59.   display: block;

  60. }

  61. 

  62. .js .content-active .paragraphs-expanded-description .paragraphs-content-wrapper {

  63.   display: none;

  64. }

  65. 

  66. .paragraph-formatter {

  67.   display: -ms-grid;

  68.   display: grid;

  69.   -ms-grid-columns: auto 1fr;

  70.       grid-template-columns: auto 1fr;

  71.   -ms-grid-rows: auto;

  72.       grid-template-rows: auto;

  73.   grid-gap: 5px 5px;

  74.   -webkit-box-align: center;

  75.   -webkit-align-items: center;

  76.       -ms-flex-align: center;

  77.           align-items: center;

  78. }

  79. 

  80. .paragraph-formatter .paragraph-info {

  81.   grid-column: 1 / 2;

  82.   -ms-grid-column: 2;

  83.   -ms-grid-row-span: 1;

  84.   -ms-grid-row: 1;

  85.   grid-row: 1 / span 1;

  86. }

  87. 

  88. .paragraph-formatter .paragraph-summary {

  89.   grid-column: 1 / 2;

  90.   -ms-grid-column: 3;

  91.   -ms-grid-column-span: 1;

  92.   -ms-grid-row-span: 1;

  93.   -ms-grid-row: 1;

  94.   grid-row: 2 / span 1;

  95. }

  96. 

  97. @media (min-width: 600px) {

  98.   .paragraph-formatter .paragraph-summary {

  99.     grid-column: 2 / 2;

  100.     -ms-grid-column: 3;

  101.     -ms-grid-column-span: 1;

  102.     -ms-grid-row-span: 1;

  103.     -ms-grid-row: 1;

  104.     grid-row: 1 / span 1;

  105.   }

  106. }