You are here

Home » API reference » Entity Reference with Layout 8

erl-widget.css in Entity Reference with Layout 8 

fieldset.erl-field {
  background: #f5f5f3;
  border: none;
  margin: 30px 0;
  padding: 60px 30px;
}
fieldset.erl-field > legend {
  line-height: 30px;
  top: 15px;
}

.erl-layout-wrapper {
  margin-top: 20px;
}

.erl-field .erl-layout {
  margin-bottom: 30px;
  position: relative;
  padding: 40px 0 0 0;
}
.erl-field .erl-layout__content {
  padding: 0 30px 15px 30px;
}
.erl-field .erl-layout__regions,
.erl-field .erl-disabled-wrapper {
  background: #fff;
}

.erl-field .erl-layout-select .form-radios {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
}
.erl-field .layout-radio-item {
  padding: 5px;
  background: none;
  cursor: pointer;
  margin: 10px 10px 10px 0;
  text-align: left;
  width: 150px;
}
.erl-field .layout-radio-item input[type=radio] {
  display: none;
}
.erl-field .layout-radio-item .form-item {
  margin-top: 0;
}
.erl-field .layout-radio-item label {
  font-size: small;
}
.erl-field .layout-radio-item .layout-icon-wrapper {
  float: left;
  margin-right: 5px;
}
.erl-field .layout-radio-item.active {
  background: #fff;
  outline: 2px dotted blue;
}
.erl-field .layout-radio-item .layout-icon {
  float: left;
  margin: 0;
}
.erl-field .erl-add-item {
  text-align: center;
}

.erl-field .erl-layout.erl-item::before {
  content: "";
  top: 20px;
  height: 1px;
  background-color: #ccc;
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
}
.erl-field .erl-layout .erl-item,
.erl-field .erl-disabled-items .erl-item {
  border: 1px solid #ffffff;
  box-sizing: border-box;
  padding: 30px;
  transition: all .15s linear;
  position: relative;
}
.erl-field .reversed .erl-item {
  border-color: rgba(0, 0, 0, .25);
}
.erl-field .erl-item .erl-actions .form-wrapper {
  background: none;
}
.erl-field .erl-layout-region:hover {
  border: 1px solid #ccc;
}
.erl-field .erl-layout .erl-item:hover {
  border-color: #0074bd;
}
.erl-field .reversed .erl-item:hover {
  border-color: #fff;
}
.erl-field .erl-item:hover:before {
  opacity: 1;
}
.erl-field .erl-layout-region {
  box-sizing: border-box;
  position: relative;
  border: 1px dashed #e5e5e3;
  transition: all .15s linear;
  min-height: 30px;
  padding: 30px;
}

/* -- Warnings -- */
.erl-field .is_translating_warning {
  padding: 10px 0;
  color: orange;
}

/* -- Layout Controls -- */

.erl-field .erl-layout .layout-controls,
.erl-field .erl-layout .erl-actions {
  background: #f5f5f3;
}
.erl-field .erl-layout .erl-item .layout-controls,
.erl-field .erl-layout .erl-item .erl-actions {
  background: none;
}
.erl-field .layout-controls {
  height: 30px;
  left: 0;
  position: absolute;
  top: 0;
  width: 90px;
  opacity: 0;
}

.erl-field .erl-item:hover > .layout-controls {
  opacity: 1;
}
.erl-field .erl-layout-section .erl-item:hover > .layout-controls {
  opacity: 1;
}
.erl-field .erl-layout-section .erl-item .layout-controls {
  background: none;
}
.layout-handle,
.layout-down,
.layout-up {
  cursor: pointer;
  height: 30px;
  left: 0;
  overflow: hidden;
  opacity: .75;
  position: absolute;
  top: 0;
  text-indent: 100%;
  width: 30px;
}
.layout-handle:hover,
.layout-down:hover,
.layout-up:hover {
  opacity: 1;
  cursor: pointer;
}
.layout-handle {
  background: url(../img/icon-move.png) 0 0 no-repeat;
  background-size: cover;
  display: none;
}
.reversed .layout-handle {
  background-image: url(../img/icon-move--reversed.png);
}
.dragula-enabled .layout-handle {
  display: block;
}
.layout-down {
  background: url(../img/icon-down.png) 0 0 no-repeat;
  background-size: cover;
  left: 60px;
}
.reversed .layout-down {
  background-image: url(../img/icon-down--reversed.png);
}
.layout-up {
  background: url(../img/icon-up.png) 0 0 no-repeat;
  background-size: cover;
  left: 30px;
}
.reversed .layout-up {
  background-image: url(../img/icon-up--reversed.png);
}
.erl-field .erl-layout:first-child > .layout-controls .layout-up,
.erl-field .erl-layout:first-child .erl-item:first-child .layout-up {
  pointer-events: none;
  opacity: .15;
}
.erl-field .erl-layout:first-child .erl-item:first-child .layout-up {
  pointer-events: none;
  opacity: .15;
}
.erl-field .erl-layout:last-child > .layout-controls .layout-down,
.erl-field .erl-layout:last-child .erl-item:nth-last-child(2) .layout-down {
  pointer-events: none;
  opacity: .15;
}
.gu-mirror .layout-down,
.gu-mirror .layout-up {
  opacity: .25;
}

/* -- Item Actions (Edit and Delete Buttons) -- */
.erl-field .erl-actions,
.gu-mirror .erl-actions {
  position: absolute;
  right: 0;
  top: 0;
  padding: 0;
  margin: 0;
  visibility: hidden;
}
.erl-field .erl-item:hover > .erl-actions {
  visibility: visible;
}
.erl-field .erl-actions input.erl-edit,
.erl-field .erl-actions input.erl-remove {
  cursor: pointer;
  height: 30px;
  width: 30px;
  margin: 0;
  text-indent: 100%;
  overflow: hidden;
  border: none;
  padding: 0;
  opacity: .5;
  transition: none;
}
.erl-field .erl-actions input.erl-edit {
  background: url(../img/icon-edit.png) 0 0 no-repeat;
  background-size: cover;
}
.erl-field .reversed .erl-actions input.erl-edit {
  background-image: url(../img/icon-edit--reversed.png);
}
.erl-field .erl-actions input.erl-remove {
  background: url(../img/icon-delete.png) 0 0 no-repeat;
  background-size: cover;
}
.erl-field .reversed .erl-actions input.erl-remove {
  background-image: url(../img/icon-delete--reversed.png);
}
.erl-field .erl-actions input.erl-edit:hover,
.erl-field .erl-actions input.erl-remove:hover {
  opacity: 1;
  box-shadow: none;
}

/* -- Add content and add section buttons. -- */
.erl-add-content-wrapper {
  position: relative;
}
.erl-add-content__container {
  position: absolute;
  left: 0;
  top: 100%;
  width: 100%;
}
.erl-add-content__toggle {
  position: absolute;
  bottom: 0;
  left: 50%;
  margin-left: -15px;
  border: none;
  color: #fff;
  font-weight: bold;
  z-index: 10;
  line-height: 1;
  padding: 0;
  opacity: 0;
  font-size: large;
  width: 30px;
  height: 30px;
  text-indent: 100%;
  overflow: hidden;
  background: url(../img/icon-add.png) 0 0 no-repeat;
  background-size: cover;
  transition: all .15s linear;
  -webkit-appearance: none;
  outline: none;
  border-radius: 50%;
}
.reversed .erl-add-content__toggle {
  background-image: url(../img/icon-add--reversed.png);
}
.erl-add-content__toggle.active {
  transform: rotate(45deg);
}
.erl-layout-region:hover button.erl-add-content__toggle {
  opacity: .75;
}
.erl-layout-region:hover button.erl-add-content__toggle:hover,
.erl-layout-region:hover button.erl-add-content__toggle.active,
.erl-layout-region button.erl-add-content__toggle.active {
  opacity: 1;
}

.erl-add-content__group {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  max-width: 800px;
  transform: translateX(-50%);
  position: absolute;
  left: 50%;
  top: 100%;
  background: #fff;
  z-index: 12;
  border: none;
  padding: 0;
  text-align: left;
  margin-left: -15px;
  box-shadow: 0 1px 5px rgba(0, 0, 0, .25);
  max-height: 480px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.erl-add-content__group.hidden {
  visibility: hidden !important;
}
.erl-add-content__group .erl-add-content__search {
  width: 100%;
  padding: 12px;
  position: sticky;
  top: 0;
  background: #fafbfd;
  border-bottom: 1px solid rgba(216, 217, 224, 0.8);
}
.erl-add-content__group .erl-add-content__input {
  width: 100%;
}
.erl-add-content__item {
  display: block;
  text-align: left;
  width: 100%;
  border: none;
  color: #0074bd;
  flex-basis: 25%;
  padding: 9px 18px;
  margin-bottom: 16px;
}
.erl-add-content__group--has-icons button {
  text-align: center;
}
.erl-add-content__item {
  display: block;
  text-align: left;
}
.erl-add-content__group button {
  background: none;
  display: block;
  width: 100%;
  border: none;
  color: #0074bd;
  text-align: left;
  padding: 9px 18px;
}
.erl-add-content__group button img {
  width: 24px;
  height: 24px;
  display: block;
  margin: 8px auto;
}

@media (min-width: 1024px) {
  .erl-add-content__group button img {
    width: 48px;
    height: 48px;
  }
}
.erl-add-content__group button:hover {
  background: #e5f1f8;
  color: #0074bd;
  display: block;
  width: 100%;
  border: none;
}
.erl-add-content--single {
  width: 160px;
  left: 50%;
  margin-left: -80px;
  padding: 0;
  text-align: center;
  position: absolute;
  z-index: 10;
}
.erl-item > .erl-add-content--single {
  opacity: 0;
  bottom: -52px;
}
.erl-item:hover > .erl-add-content--single {
  opacity: 1;
}
.erl-empty {
  position: relative;
}
.erl-add-content--single button {
  background: none;
  border: none;
  box-shadow: none;
  text-transform: uppercase;
  font-size: small;
  font-weight: bold;
  color: #9b9b9b;
  height: 60px;
  width: 100%;
}
.erl-add-content--single button:hover {
  color: #5e5e5e;
  text-decoration: underline;
}
.erl-add-content--single button .icon {
  font-weight: bold;
  font-size: large;
}
.erl-add-more-menu {
  width: 300px;
  position: absolute;
  left: 50%;
  top: 100%;
  background: #fff;
  z-index: 1000;
  border: none;
  box-shadow: 0 0 10px rgba(0, 0, 0, .25);
  outline: 1px solid #eee;
}
.erl-add-more-menu.beneath::before,
.erl-add-more-menu.above::after {
  content: " ";
  width: 16px;
  height: 16px;
  display: block;
  left: 50%;
  margin-top: -8px;
  margin-left: -8px;
  position: absolute;
  background: #fff;
  transform: rotate(45deg);
}
.erl-loading div.loading {
  background: rgba(255, 255, 255, .8);
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1005;
}
.erl-loading div.spinner {
  text-indent: -9999px;
  opacity: 1;
  width: 49px;
  height: 49px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -25px;
  margin-top: -27px;
  border: 3px solid #0074bd;
  border-radius: 50%;
  border-left-color: transparent;
  border-right-color: transparent;
  animation: cssload-spin 575ms infinite linear;
  -o-animation: cssload-spin 575ms infinite linear;
  -webkit-animation: cssload-spin 575ms infinite linear;
  -moz-animation: cssload-spin 575ms infinite linear;
}

@keyframes cssload-spin {
  100% {
    transform: rotate(360deg);
  }
}

@-o-keyframes cssload-spin {
  100% {
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@-ms-keyframes cssload-spin {
  100% {
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@-webkit-keyframes cssload-spin {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@-moz-keyframes cssload-spin {
  100% {
    -moz-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
.erl-add-more-menu.fade-in {
  animation: fadeIn ease .25s;
  -webkit-animation: fadeIn ease .25s;
  -moz-animation: fadeIn ease .25s;
  -o-animation: fadeIn ease .25s;
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-moz-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-o-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-ms-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.erl-add-more-menu__search {
  padding: 20px;
  background: #fff;
  border-bottom: 1px solid #e7e7e7;
}
.erl-add-more-menu__search input {
  font-size: 14px;
  padding: 10px;
  display: block;
  box-sizing: border-box;
  width: 100%;
  border-radius: 3px;
  border: none;
  box-shadow: 0 0 0 1px #666;
}
.erl-add-more-menu__search input:focus {
  box-shadow: 0 0 0 1px #5f89db;
  outline: none;
}
.erl-add-more-menu__group {
  display: flex;
  flex-wrap: wrap;
  max-height: 480px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.erl-add-more-menu__item {
  text-align: center;
  width: 33%;
}
.erl-add-more-menu__item a {
  text-align: center;
  display: block;
  padding: 10px 0;
  margin: 10px;
  text-decoration: none;
  font-size: 14px;
  color: #0074bd;
}
.erl-add-more-menu__item a:hover {
  background-color: #e7f1f7;
}
.erl-add-more-menu__item img {
  width: 24px;
  height: 24px;
}
/**
 * Disabled items.
 */
.erl-disabled-items.form-item.form-wrapper {
  color: gray;
  position: relative;
  margin-top: 60px;
  border: 1px dashed #e5e5e3;
}
.erl-disabled-items .fieldset-wrapper {
  margin-top: 10px;
}
.erl-disabled-items__title {
  margin: 0;
  padding: 10px;
}
.erl-disabled-items__description {
  position: absolute;
  width: 100%;
  margin: 20px 0 0 0;
  top: 0;
  left: 0;
  text-align: center;
}
.erl-disabled-wrapper {
  position: relative;
  min-height: 60px;
  padding-bottom: 0;
  padding-top: 0;
  border: 1px dashed #e5e5e3;
}

/* -- Dragula Specific Styles -- */
.gu-mirror {
  background: #fff;
  border: 1px solid #0074bd;
  box-shadow: 0 1px 5px rgba(0, 0, 0, .25);
  cursor: grabbing;
  padding: 30px;
  box-sizing: border-box;
  overflow: hidden;
}
.gu-mirror:before {
  content: "";
  position: absolute;
  height: 30px;
  width: 30px;
  left: 0;
  top: 0;
  background: url(../img/icon-move.png) 0 0 no-repeat;
  background-size: cover;
}
.reversed .gu-mirror:before {
  background-image: url(../img/icon-move--reversed.png);
}
.erl-field .erl-item.gu-transit {
  background: #0074bd;
}
.erl-field .erl-item.gu-transit > * {
  visibility: hidden;
}

.paragraph-type-label {
  position: absolute;
  bottom: 0;
  right: 0;
  padding: 5px;
  margin: 0;
  border-top: 1px dashed #e5e5e3;
  border-left: 1px dashed #e5e5e3;
  font-style: italic;
  font-weight: normal !important;
  color: darkgray;
}

.paragraph-layout-label {
  position: absolute;
  top: 0;
  left: 50%;
  padding: 0;
  margin: auto;
  font-style: italic;
  font-weight: normal !important;
  color: darkgray;
}

/* -- Un-Published Layout and Items. -- */
.erl-field .erl-layout .erl-item--unpublished,
.erl-field .erl-layout.erl-item--unpublished {
  background: #fff4f4;
  border: lightgray dashed 1px;
  opacity: 0.7;
}

File

css/erl-widget.css
View source 
  1. fieldset.erl-field {

  2.   background: #f5f5f3;

  3.   border: none;

  4.   margin: 30px 0;

  5.   padding: 60px 30px;

  6. }

  7. fieldset.erl-field > legend {

  8.   line-height: 30px;

  9.   top: 15px;

  10. }

  11. 

  12. .erl-layout-wrapper {

  13.   margin-top: 20px;

  14. }

  15. 

  16. .erl-field .erl-layout {

  17.   margin-bottom: 30px;

  18.   position: relative;

  19.   padding: 40px 0 0 0;

  20. }

  21. .erl-field .erl-layout__content {

  22.   padding: 0 30px 15px 30px;

  23. }

  24. .erl-field .erl-layout__regions,

  25. .erl-field .erl-disabled-wrapper {

  26.   background: #fff;

  27. }

  28. 

  29. .erl-field .erl-layout-select .form-radios {

  30.   display: flex;

  31.   flex-wrap: wrap;

  32.   align-content: flex-start;

  33. }

  34. .erl-field .layout-radio-item {

  35.   padding: 5px;

  36.   background: none;

  37.   cursor: pointer;

  38.   margin: 10px 10px 10px 0;

  39.   text-align: left;

  40.   width: 150px;

  41. }

  42. .erl-field .layout-radio-item input[type=radio] {

  43.   display: none;

  44. }

  45. .erl-field .layout-radio-item .form-item {

  46.   margin-top: 0;

  47. }

  48. .erl-field .layout-radio-item label {

  49.   font-size: small;

  50. }

  51. .erl-field .layout-radio-item .layout-icon-wrapper {

  52.   float: left;

  53.   margin-right: 5px;

  54. }

  55. .erl-field .layout-radio-item.active {

  56.   background: #fff;

  57.   outline: 2px dotted blue;

  58. }

  59. .erl-field .layout-radio-item .layout-icon {

  60.   float: left;

  61.   margin: 0;

  62. }

  63. .erl-field .erl-add-item {

  64.   text-align: center;

  65. }

  66. 

  67. .erl-field .erl-layout.erl-item::before {

  68.   content: "";

  69.   top: 20px;

  70.   height: 1px;

  71.   background-color: #ccc;

  72.   position: absolute;

  73.   left: 0;

  74.   right: 0;

  75.   width: 100%;

  76. }

  77. .erl-field .erl-layout .erl-item,

  78. .erl-field .erl-disabled-items .erl-item {

  79.   border: 1px solid #ffffff;

  80.   box-sizing: border-box;

  81.   padding: 30px;

  82.   transition: all .15s linear;

  83.   position: relative;

  84. }

  85. .erl-field .reversed .erl-item {

  86.   border-color: rgba(0, 0, 0, .25);

  87. }

  88. .erl-field .erl-item .erl-actions .form-wrapper {

  89.   background: none;

  90. }

  91. .erl-field .erl-layout-region:hover {

  92.   border: 1px solid #ccc;

  93. }

  94. .erl-field .erl-layout .erl-item:hover {

  95.   border-color: #0074bd;

  96. }

  97. .erl-field .reversed .erl-item:hover {

  98.   border-color: #fff;

  99. }

  100. .erl-field .erl-item:hover:before {

  101.   opacity: 1;

  102. }

  103. .erl-field .erl-layout-region {

  104.   box-sizing: border-box;

  105.   position: relative;

  106.   border: 1px dashed #e5e5e3;

  107.   transition: all .15s linear;

  108.   min-height: 30px;

  109.   padding: 30px;

  110. }

  111. 

  112. /* -- Warnings -- */

  113. .erl-field .is_translating_warning {

  114.   padding: 10px 0;

  115.   color: orange;

  116. }

  117. 

  118. /* -- Layout Controls -- */

  119. 

  120. .erl-field .erl-layout .layout-controls,

  121. .erl-field .erl-layout .erl-actions {

  122.   background: #f5f5f3;

  123. }

  124. .erl-field .erl-layout .erl-item .layout-controls,

  125. .erl-field .erl-layout .erl-item .erl-actions {

  126.   background: none;

  127. }

  128. .erl-field .layout-controls {

  129.   height: 30px;

  130.   left: 0;

  131.   position: absolute;

  132.   top: 0;

  133.   width: 90px;

  134.   opacity: 0;

  135. }

  136. 

  137. .erl-field .erl-item:hover > .layout-controls {

  138.   opacity: 1;

  139. }

  140. .erl-field .erl-layout-section .erl-item:hover > .layout-controls {

  141.   opacity: 1;

  142. }

  143. .erl-field .erl-layout-section .erl-item .layout-controls {

  144.   background: none;

  145. }

  146. .layout-handle,

  147. .layout-down,

  148. .layout-up {

  149.   cursor: pointer;

  150.   height: 30px;

  151.   left: 0;

  152.   overflow: hidden;

  153.   opacity: .75;

  154.   position: absolute;

  155.   top: 0;

  156.   text-indent: 100%;

  157.   width: 30px;

  158. }

  159. .layout-handle:hover,

  160. .layout-down:hover,

  161. .layout-up:hover {

  162.   opacity: 1;

  163.   cursor: pointer;

  164. }

  165. .layout-handle {

  166.   background: url(../img/icon-move.png) 0 0 no-repeat;

  167.   background-size: cover;

  168.   display: none;

  169. }

  170. .reversed .layout-handle {

  171.   background-image: url(../img/icon-move--reversed.png);

  172. }

  173. .dragula-enabled .layout-handle {

  174.   display: block;

  175. }

  176. .layout-down {

  177.   background: url(../img/icon-down.png) 0 0 no-repeat;

  178.   background-size: cover;

  179.   left: 60px;

  180. }

  181. .reversed .layout-down {

  182.   background-image: url(../img/icon-down--reversed.png);

  183. }

  184. .layout-up {

  185.   background: url(../img/icon-up.png) 0 0 no-repeat;

  186.   background-size: cover;

  187.   left: 30px;

  188. }

  189. .reversed .layout-up {

  190.   background-image: url(../img/icon-up--reversed.png);

  191. }

  192. .erl-field .erl-layout:first-child > .layout-controls .layout-up,

  193. .erl-field .erl-layout:first-child .erl-item:first-child .layout-up {

  194.   pointer-events: none;

  195.   opacity: .15;

  196. }

  197. .erl-field .erl-layout:first-child .erl-item:first-child .layout-up {

  198.   pointer-events: none;

  199.   opacity: .15;

  200. }

  201. .erl-field .erl-layout:last-child > .layout-controls .layout-down,

  202. .erl-field .erl-layout:last-child .erl-item:nth-last-child(2) .layout-down {

  203.   pointer-events: none;

  204.   opacity: .15;

  205. }

  206. .gu-mirror .layout-down,

  207. .gu-mirror .layout-up {

  208.   opacity: .25;

  209. }

  210. 

  211. /* -- Item Actions (Edit and Delete Buttons) -- */

  212. .erl-field .erl-actions,

  213. .gu-mirror .erl-actions {

  214.   position: absolute;

  215.   right: 0;

  216.   top: 0;

  217.   padding: 0;

  218.   margin: 0;

  219.   visibility: hidden;

  220. }

  221. .erl-field .erl-item:hover > .erl-actions {

  222.   visibility: visible;

  223. }

  224. .erl-field .erl-actions input.erl-edit,

  225. .erl-field .erl-actions input.erl-remove {

  226.   cursor: pointer;

  227.   height: 30px;

  228.   width: 30px;

  229.   margin: 0;

  230.   text-indent: 100%;

  231.   overflow: hidden;

  232.   border: none;

  233.   padding: 0;

  234.   opacity: .5;

  235.   transition: none;

  236. }

  237. .erl-field .erl-actions input.erl-edit {

  238.   background: url(../img/icon-edit.png) 0 0 no-repeat;

  239.   background-size: cover;

  240. }

  241. .erl-field .reversed .erl-actions input.erl-edit {

  242.   background-image: url(../img/icon-edit--reversed.png);

  243. }

  244. .erl-field .erl-actions input.erl-remove {

  245.   background: url(../img/icon-delete.png) 0 0 no-repeat;

  246.   background-size: cover;

  247. }

  248. .erl-field .reversed .erl-actions input.erl-remove {

  249.   background-image: url(../img/icon-delete--reversed.png);

  250. }

  251. .erl-field .erl-actions input.erl-edit:hover,

  252. .erl-field .erl-actions input.erl-remove:hover {

  253.   opacity: 1;

  254.   box-shadow: none;

  255. }

  256. 

  257. /* -- Add content and add section buttons. -- */

  258. .erl-add-content-wrapper {

  259.   position: relative;

  260. }

  261. .erl-add-content__container {

  262.   position: absolute;

  263.   left: 0;

  264.   top: 100%;

  265.   width: 100%;

  266. }

  267. .erl-add-content__toggle {

  268.   position: absolute;

  269.   bottom: 0;

  270.   left: 50%;

  271.   margin-left: -15px;

  272.   border: none;

  273.   color: #fff;

  274.   font-weight: bold;

  275.   z-index: 10;

  276.   line-height: 1;

  277.   padding: 0;

  278.   opacity: 0;

  279.   font-size: large;

  280.   width: 30px;

  281.   height: 30px;

  282.   text-indent: 100%;

  283.   overflow: hidden;

  284.   background: url(../img/icon-add.png) 0 0 no-repeat;

  285.   background-size: cover;

  286.   transition: all .15s linear;

  287.   -webkit-appearance: none;

  288.   outline: none;

  289.   border-radius: 50%;

  290. }

  291. .reversed .erl-add-content__toggle {

  292.   background-image: url(../img/icon-add--reversed.png);

  293. }

  294. .erl-add-content__toggle.active {

  295.   transform: rotate(45deg);

  296. }

  297. .erl-layout-region:hover button.erl-add-content__toggle {

  298.   opacity: .75;

  299. }

  300. .erl-layout-region:hover button.erl-add-content__toggle:hover,

  301. .erl-layout-region:hover button.erl-add-content__toggle.active,

  302. .erl-layout-region button.erl-add-content__toggle.active {

  303.   opacity: 1;

  304. }

  305. 

  306. .erl-add-content__group {

  307.   display: flex;

  308.   flex-wrap: wrap;

  309.   width: 100%;

  310.   max-width: 800px;

  311.   transform: translateX(-50%);

  312.   position: absolute;

  313.   left: 50%;

  314.   top: 100%;

  315.   background: #fff;

  316.   z-index: 12;

  317.   border: none;

  318.   padding: 0;

  319.   text-align: left;

  320.   margin-left: -15px;

  321.   box-shadow: 0 1px 5px rgba(0, 0, 0, .25);

  322.   max-height: 480px;

  323.   overflow-y: auto;

  324.   -webkit-overflow-scrolling: touch;

  325. }

  326. .erl-add-content__group.hidden {

  327.   visibility: hidden !important;

  328. }

  329. .erl-add-content__group .erl-add-content__search {

  330.   width: 100%;

  331.   padding: 12px;

  332.   position: sticky;

  333.   top: 0;

  334.   background: #fafbfd;

  335.   border-bottom: 1px solid rgba(216, 217, 224, 0.8);

  336. }

  337. .erl-add-content__group .erl-add-content__input {

  338.   width: 100%;

  339. }

  340. .erl-add-content__item {

  341.   display: block;

  342.   text-align: left;

  343.   width: 100%;

  344.   border: none;

  345.   color: #0074bd;

  346.   flex-basis: 25%;

  347.   padding: 9px 18px;

  348.   margin-bottom: 16px;

  349. }

  350. .erl-add-content__group--has-icons button {

  351.   text-align: center;

  352. }

  353. .erl-add-content__item {

  354.   display: block;

  355.   text-align: left;

  356. }

  357. .erl-add-content__group button {

  358.   background: none;

  359.   display: block;

  360.   width: 100%;

  361.   border: none;

  362.   color: #0074bd;

  363.   text-align: left;

  364.   padding: 9px 18px;

  365. }

  366. .erl-add-content__group button img {

  367.   width: 24px;

  368.   height: 24px;

  369.   display: block;

  370.   margin: 8px auto;

  371. }

  372. 

  373. @media (min-width: 1024px) {

  374.   .erl-add-content__group button img {

  375.     width: 48px;

  376.     height: 48px;

  377.   }

  378. }

  379. .erl-add-content__group button:hover {

  380.   background: #e5f1f8;

  381.   color: #0074bd;

  382.   display: block;

  383.   width: 100%;

  384.   border: none;

  385. }

  386. .erl-add-content--single {

  387.   width: 160px;

  388.   left: 50%;

  389.   margin-left: -80px;

  390.   padding: 0;

  391.   text-align: center;

  392.   position: absolute;

  393.   z-index: 10;

  394. }

  395. .erl-item > .erl-add-content--single {

  396.   opacity: 0;

  397.   bottom: -52px;

  398. }

  399. .erl-item:hover > .erl-add-content--single {

  400.   opacity: 1;

  401. }

  402. .erl-empty {

  403.   position: relative;

  404. }

  405. .erl-add-content--single button {

  406.   background: none;

  407.   border: none;

  408.   box-shadow: none;

  409.   text-transform: uppercase;

  410.   font-size: small;

  411.   font-weight: bold;

  412.   color: #9b9b9b;

  413.   height: 60px;

  414.   width: 100%;

  415. }

  416. .erl-add-content--single button:hover {

  417.   color: #5e5e5e;

  418.   text-decoration: underline;

  419. }

  420. .erl-add-content--single button .icon {

  421.   font-weight: bold;

  422.   font-size: large;

  423. }

  424. .erl-add-more-menu {

  425.   width: 300px;

  426.   position: absolute;

  427.   left: 50%;

  428.   top: 100%;

  429.   background: #fff;

  430.   z-index: 1000;

  431.   border: none;

  432.   box-shadow: 0 0 10px rgba(0, 0, 0, .25);

  433.   outline: 1px solid #eee;

  434. }

  435. .erl-add-more-menu.beneath::before,

  436. .erl-add-more-menu.above::after {

  437.   content: " ";

  438.   width: 16px;

  439.   height: 16px;

  440.   display: block;

  441.   left: 50%;

  442.   margin-top: -8px;

  443.   margin-left: -8px;

  444.   position: absolute;

  445.   background: #fff;

  446.   transform: rotate(45deg);

  447. }

  448. .erl-loading div.loading {

  449.   background: rgba(255, 255, 255, .8);

  450.   position: absolute;

  451.   width: 100%;

  452.   height: 100%;

  453.   top: 0;

  454.   left: 0;

  455.   z-index: 1005;

  456. }

  457. .erl-loading div.spinner {

  458.   text-indent: -9999px;

  459.   opacity: 1;

  460.   width: 49px;

  461.   height: 49px;

  462.   position: absolute;

  463.   top: 50%;

  464.   left: 50%;

  465.   margin-left: -25px;

  466.   margin-top: -27px;

  467.   border: 3px solid #0074bd;

  468.   border-radius: 50%;

  469.   border-left-color: transparent;

  470.   border-right-color: transparent;

  471.   animation: cssload-spin 575ms infinite linear;

  472.   -o-animation: cssload-spin 575ms infinite linear;

  473.   -webkit-animation: cssload-spin 575ms infinite linear;

  474.   -moz-animation: cssload-spin 575ms infinite linear;

  475. }

  476. 

  477. @keyframes cssload-spin {

  478.   100% {

  479.     transform: rotate(360deg);

  480.   }

  481. }

  482. 

  483. @-o-keyframes cssload-spin {

  484.   100% {

  485.     -o-transform: rotate(360deg);

  486.     transform: rotate(360deg);

  487.   }

  488. }

  489. 

  490. @-ms-keyframes cssload-spin {

  491.   100% {

  492.     -ms-transform: rotate(360deg);

  493.     transform: rotate(360deg);

  494.   }

  495. }

  496. 

  497. @-webkit-keyframes cssload-spin {

  498.   100% {

  499.     -webkit-transform: rotate(360deg);

  500.     transform: rotate(360deg);

  501.   }

  502. }

  503. 

  504. @-moz-keyframes cssload-spin {

  505.   100% {

  506.     -moz-transform: rotate(360deg);

  507.     transform: rotate(360deg);

  508.   }

  509. }

  510. .erl-add-more-menu.fade-in {

  511.   animation: fadeIn ease .25s;

  512.   -webkit-animation: fadeIn ease .25s;

  513.   -moz-animation: fadeIn ease .25s;

  514.   -o-animation: fadeIn ease .25s;

  515. }

  516. @keyframes fadeIn {

  517.   0% {

  518.     opacity: 0;

  519.   }

  520.   100% {

  521.     opacity: 1;

  522.   }

  523. }

  524. @-moz-keyframes fadeIn {

  525.   0% {

  526.     opacity: 0;

  527.   }

  528.   100% {

  529.     opacity: 1;

  530.   }

  531. }

  532. @-webkit-keyframes fadeIn {

  533.   0% {

  534.     opacity: 0;

  535.   }

  536.   100% {

  537.     opacity: 1;

  538.   }

  539. }

  540. @-o-keyframes fadeIn {

  541.   0% {

  542.     opacity: 0;

  543.   }

  544.   100% {

  545.     opacity: 1;

  546.   }

  547. }

  548. @-ms-keyframes fadeIn {

  549.   0% {

  550.     opacity: 0;

  551.   }

  552.   100% {

  553.     opacity: 1;

  554.   }

  555. }

  556. .erl-add-more-menu__search {

  557.   padding: 20px;

  558.   background: #fff;

  559.   border-bottom: 1px solid #e7e7e7;

  560. }

  561. .erl-add-more-menu__search input {

  562.   font-size: 14px;

  563.   padding: 10px;

  564.   display: block;

  565.   box-sizing: border-box;

  566.   width: 100%;

  567.   border-radius: 3px;

  568.   border: none;

  569.   box-shadow: 0 0 0 1px #666;

  570. }

  571. .erl-add-more-menu__search input:focus {

  572.   box-shadow: 0 0 0 1px #5f89db;

  573.   outline: none;

  574. }

  575. .erl-add-more-menu__group {

  576.   display: flex;

  577.   flex-wrap: wrap;

  578.   max-height: 480px;

  579.   overflow-y: auto;

  580.   -webkit-overflow-scrolling: touch;

  581. }

  582. .erl-add-more-menu__item {

  583.   text-align: center;

  584.   width: 33%;

  585. }

  586. .erl-add-more-menu__item a {

  587.   text-align: center;

  588.   display: block;

  589.   padding: 10px 0;

  590.   margin: 10px;

  591.   text-decoration: none;

  592.   font-size: 14px;

  593.   color: #0074bd;

  594. }

  595. .erl-add-more-menu__item a:hover {

  596.   background-color: #e7f1f7;

  597. }

  598. .erl-add-more-menu__item img {

  599.   width: 24px;

  600.   height: 24px;

  601. }

  602. /**

  603.  * Disabled items.

  604.  */

  605. .erl-disabled-items.form-item.form-wrapper {

  606.   color: gray;

  607.   position: relative;

  608.   margin-top: 60px;

  609.   border: 1px dashed #e5e5e3;

  610. }

  611. .erl-disabled-items .fieldset-wrapper {

  612.   margin-top: 10px;

  613. }

  614. .erl-disabled-items__title {

  615.   margin: 0;

  616.   padding: 10px;

  617. }

  618. .erl-disabled-items__description {

  619.   position: absolute;

  620.   width: 100%;

  621.   margin: 20px 0 0 0;

  622.   top: 0;

  623.   left: 0;

  624.   text-align: center;

  625. }

  626. .erl-disabled-wrapper {

  627.   position: relative;

  628.   min-height: 60px;

  629.   padding-bottom: 0;

  630.   padding-top: 0;

  631.   border: 1px dashed #e5e5e3;

  632. }

  633. 

  634. /* -- Dragula Specific Styles -- */

  635. .gu-mirror {

  636.   background: #fff;

  637.   border: 1px solid #0074bd;

  638.   box-shadow: 0 1px 5px rgba(0, 0, 0, .25);

  639.   cursor: grabbing;

  640.   padding: 30px;

  641.   box-sizing: border-box;

  642.   overflow: hidden;

  643. }

  644. .gu-mirror:before {

  645.   content: "";

  646.   position: absolute;

  647.   height: 30px;

  648.   width: 30px;

  649.   left: 0;

  650.   top: 0;

  651.   background: url(../img/icon-move.png) 0 0 no-repeat;

  652.   background-size: cover;

  653. }

  654. .reversed .gu-mirror:before {

  655.   background-image: url(../img/icon-move--reversed.png);

  656. }

  657. .erl-field .erl-item.gu-transit {

  658.   background: #0074bd;

  659. }

  660. .erl-field .erl-item.gu-transit > * {

  661.   visibility: hidden;

  662. }

  663. 

  664. .paragraph-type-label {

  665.   position: absolute;

  666.   bottom: 0;

  667.   right: 0;

  668.   padding: 5px;

  669.   margin: 0;

  670.   border-top: 1px dashed #e5e5e3;

  671.   border-left: 1px dashed #e5e5e3;

  672.   font-style: italic;

  673.   font-weight: normal !important;

  674.   color: darkgray;

  675. }

  676. 

  677. .paragraph-layout-label {

  678.   position: absolute;

  679.   top: 0;

  680.   left: 50%;

  681.   padding: 0;

  682.   margin: auto;

  683.   font-style: italic;

  684.   font-weight: normal !important;

  685.   color: darkgray;

  686. }

  687. 

  688. /* -- Un-Published Layout and Items. -- */

  689. .erl-field .erl-layout .erl-item--unpublished,

  690. .erl-field .erl-layout.erl-item--unpublished {

  691.   background: #fff4f4;

  692.   border: lightgray dashed 1px;

  693.   opacity: 0.7;

  694. }