paragraphs.actions.css 

.paragraphs-actions {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}

.paragraphs-actions > .button {
  margin-left: 5px;
  margin-right: 0;
}

.paragraphs-actions > .button + .paragraphs-dropdown {
  margin-left: 5px;
}

.paragraphs-actions .paragraphs-icon {
  margin-left: 5px;
  margin-right: 5px;
}

.paragraphs-dropdown {
  position: relative;
}

.paragraphs-dropdown-toggle {
  display: block;
  height: 36px;
  width: 36px;
  background: url("../icons/icon-actions.svg") no-repeat center;
  background-size: 26px 26px;
  border: 1px solid transparent;
  border-radius: 4px;
  -webkit-transition: all 0.1s;
  transition: all 0.1s;
}

@media (min-width: 768px) {
  .paragraphs-dropdown-toggle {
    height: 26px;
    width: 26px;
  }
}

.paragraphs-dropdown-toggle:hover, .paragraphs-dropdown-toggle:focus {
  background-color: #f9f8f6;
  border: 1px solid #a6a6a6;
  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.125);
          box-shadow: 0 1px 2px rgba(0, 0, 0, 0.125);
  outline: none;
}

.paragraphs-dropdown-actions {
  display: none;
  overflow: hidden;
  position: absolute;
  right: 0;
  top: 36px;
  z-index: 100;
  background: #f9f8f6;
  border: 1px solid #a6a6a6;
  border-radius: 5px 0 5px 5px;
  -webkit-box-shadow: 0 2px 6px 0 #aaa;
          box-shadow: 0 2px 6px 0 #aaa;
}

@media (min-width: 768px) {
  .paragraphs-dropdown-actions {
    top: 26px;
  }
}

.item-list .paragraphs-dropdown-actions {
  list-style: none;
}

.item-list .paragraphs-dropdown-actions li {
  margin: 0;
  list-style: none;
}

.paragraphs-dropdown.open .paragraphs-dropdown-actions {
  display: block;
}

.paragraphs-dropdown-action {
  width: 100%;
}

.paragraphs-dropdown-action.button {
  margin-right: 0;
  margin-left: 0;
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: 0;
  font-weight: 600;
  line-height: 18px;
  white-space: nowrap;
}

.paragraphs-dropdown-action.button:focus {
  border: none;
  -webkit-box-shadow: none;
          box-shadow: none;
  outline: none;
}

.form-wrapper .paragraphs-dropdown-action.button {
  margin-top: 0;
  margin-bottom: 0;
}

@media (max-width: 768px) {
  .form-wrapper .paragraphs-dropdown-action.button {
    padding-top: 10px;
    padding-bottom: 10px;
  }
}

.paragraphs-actions-item-icon {
  height: 20px;
  padding: 0 10px;
}

File

paragraphs/css/paragraphs.actions.css
View source
  1. .paragraphs-actions {

  2.   display: -webkit-box;

  3.   display: -webkit-flex;

  4.   display: -ms-flexbox;

  5.   display: flex;

  6.   -webkit-box-align: center;

  7.   -webkit-align-items: center;

  8.       -ms-flex-align: center;

  9.           align-items: center;

  10. }

  11. 

  12. .paragraphs-actions > .button {

  13.   margin-left: 5px;

  14.   margin-right: 0;

  15. }

  16. 

  17. .paragraphs-actions > .button + .paragraphs-dropdown {

  18.   margin-left: 5px;

  19. }

  20. 

  21. .paragraphs-actions .paragraphs-icon {

  22.   margin-left: 5px;

  23.   margin-right: 5px;

  24. }

  25. 

  26. .paragraphs-dropdown {

  27.   position: relative;

  28. }

  29. 

  30. .paragraphs-dropdown-toggle {

  31.   display: block;

  32.   height: 36px;

  33.   width: 36px;

  34.   background: url("../icons/icon-actions.svg") no-repeat center;

  35.   background-size: 26px 26px;

  36.   border: 1px solid transparent;

  37.   border-radius: 4px;

  38.   -webkit-transition: all 0.1s;

  39.   transition: all 0.1s;

  40. }

  41. 

  42. @media (min-width: 768px) {

  43.   .paragraphs-dropdown-toggle {

  44.     height: 26px;

  45.     width: 26px;

  46.   }

  47. }

  48. 

  49. .paragraphs-dropdown-toggle:hover, .paragraphs-dropdown-toggle:focus {

  50.   background-color: #f9f8f6;

  51.   border: 1px solid #a6a6a6;

  52.   -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.125);

  53.           box-shadow: 0 1px 2px rgba(0, 0, 0, 0.125);

  54.   outline: none;

  55. }

  56. 

  57. .paragraphs-dropdown-actions {

  58.   display: none;

  59.   overflow: hidden;

  60.   position: absolute;

  61.   right: 0;

  62.   top: 36px;

  63.   z-index: 100;

  64.   background: #f9f8f6;

  65.   border: 1px solid #a6a6a6;

  66.   border-radius: 5px 0 5px 5px;

  67.   -webkit-box-shadow: 0 2px 6px 0 #aaa;

  68.           box-shadow: 0 2px 6px 0 #aaa;

  69. }

  70. 

  71. @media (min-width: 768px) {

  72.   .paragraphs-dropdown-actions {

  73.     top: 26px;

  74.   }

  75. }

  76. 

  77. .item-list .paragraphs-dropdown-actions {

  78.   list-style: none;

  79. }

  80. 

  81. .item-list .paragraphs-dropdown-actions li {

  82.   margin: 0;

  83.   list-style: none;

  84. }

  85. 

  86. .paragraphs-dropdown.open .paragraphs-dropdown-actions {

  87.   display: block;

  88. }

  89. 

  90. .paragraphs-dropdown-action {

  91.   width: 100%;

  92. }

  93. 

  94. .paragraphs-dropdown-action.button {

  95.   margin-right: 0;

  96.   margin-left: 0;

  97.   text-align: left;

  98.   background: transparent;

  99.   border: 0;

  100.   border-radius: 0;

  101.   font-weight: 600;

  102.   line-height: 18px;

  103.   white-space: nowrap;

  104. }

  105. 

  106. .paragraphs-dropdown-action.button:focus {

  107.   border: none;

  108.   -webkit-box-shadow: none;

  109.           box-shadow: none;

  110.   outline: none;

  111. }

  112. 

  113. .form-wrapper .paragraphs-dropdown-action.button {

  114.   margin-top: 0;

  115.   margin-bottom: 0;

  116. }

  117. 

  118. @media (max-width: 768px) {

  119.   .form-wrapper .paragraphs-dropdown-action.button {

  120.     padding-top: 10px;

  121.     padding-bottom: 10px;

  122.   }

  123. }

  124. 

  125. .paragraphs-actions-item-icon {

  126.   height: 20px;

  127.   padding: 0 10px;

  128. }