You are here

Home » API reference » Image Widget Crop 8.2

image_widget_crop.css in Image Widget Crop 8.2

Same filename and directory in other branches
  1. 8 css/image_widget_crop.css
.crop-preview-wrapper__preview-image {
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: 1em;
}

.image-data__crop-wrapper .crop-preview-wrapper__crop-reset {
  margin-top: 1em;
}

.cropper--width-soft-limit-reached .point-n,
.cropper--width-soft-limit-reached .point-s,
.cropper--width-soft-limit-reached .point-ne,
.cropper--width-soft-limit-reached .point-se,
.cropper--width-soft-limit-reached .point-sw,
.cropper--width-soft-limit-reached .point-nw {
  background-color: #a51b00;
}

.cropper--height-soft-limit-reached .point-w,
.cropper--height-soft-limit-reached .point-e,
.cropper--height-soft-limit-reached .point-ne,
.cropper--height-soft-limit-reached .point-se,
.cropper--height-soft-limit-reached .point-nw,
.cropper--height-soft-limit-reached .point-sw {
  background-color: #a51b00;
}

.cropper--width-soft-limit-reached .cropper-point {
  background-color: #a51b00;
}

.cropper--height-soft-limit-reached .line-w {
  background-color: #ff0000;
  opacity: 1;
  width: 1px;
  left: -1px;
}

.cropper--height-soft-limit-reached .line-e {
  background-color: #ff0000;
  opacity: 1;
  width: 1px;
  right: -1px;
}

.cropper--width-soft-limit-reached .line-n {
  background-color: #ff0000;
  opacity: 1;
  height: 1px;
  top: -1px;
}

.cropper--width-soft-limit-reached .line-s {
  background-color: #ff0000;
  opacity: 1;
  height: 1px;
  bottom: -1px;
}

@media screen and (max-width: 480px) {
  .details-wrapper th {
    display: none;
  }

  .details-wrapper table,
  .details-wrapper thead,
  .details-wrapper tbody,
  .details-wrapper tr,
  .details-wrapper td,
  .details-wrapper th:first-child {
    display: block;
  }

  .details-wrapper tr {
    position: relative;
    padding: 0;
  }

  .details-wrapper td {
    padding: 10px 0;
  }

  .details-wrapper td  .button.js-form-submit.form-submit {
    position: absolute;
    left: 10px;
    bottom: 10px;
    max-width: 265px;
  }
}

@media screen and (min-width: 641px) and (max-width: 1250px) {
  .responsive-enabled--opened th {
    display: none;
  }

  .responsive-enabled--opened,
  .responsive-enabled--opened thead,
  .responsive-enabled--opened tbody,
  .responsive-enabled--opened tr,
  .responsive-enabled--opened td,
  .responsive-enabled--opened th:first-child {
    display: block;
  }

  .responsive-enabled--opened tr {
    position: relative;
    width: 100%;
    padding-left: 0;
    padding-right: 0;
  }

  .responsive-enabled--opened td > .button.js-form-submit.form-submit {
    position: absolute;
    left: 10px;
    bottom: 10px;
    max-width: 265px;
  }

  .responsive-enabled--opened .vertical-tabs__menu {
    width: 206px;
  }

  .responsive-enabled--opened .vertical-tabs__panes {
    margin-left: 205px;
  }
}

File

css/image_widget_crop.css
View source 
  1. .crop-preview-wrapper__preview-image {

  2.   display: block;

  3.   width: 100%;

  4.   height: auto;

  5.   margin-bottom: 1em;

  6. }

  7. 

  8. .image-data__crop-wrapper .crop-preview-wrapper__crop-reset {

  9.   margin-top: 1em;

  10. }

  11. 

  12. .cropper--width-soft-limit-reached .point-n,

  13. .cropper--width-soft-limit-reached .point-s,

  14. .cropper--width-soft-limit-reached .point-ne,

  15. .cropper--width-soft-limit-reached .point-se,

  16. .cropper--width-soft-limit-reached .point-sw,

  17. .cropper--width-soft-limit-reached .point-nw {

  18.   background-color: #a51b00;

  19. }

  20. 

  21. .cropper--height-soft-limit-reached .point-w,

  22. .cropper--height-soft-limit-reached .point-e,

  23. .cropper--height-soft-limit-reached .point-ne,

  24. .cropper--height-soft-limit-reached .point-se,

  25. .cropper--height-soft-limit-reached .point-nw,

  26. .cropper--height-soft-limit-reached .point-sw {

  27.   background-color: #a51b00;

  28. }

  29. 

  30. .cropper--width-soft-limit-reached .cropper-point {

  31.   background-color: #a51b00;

  32. }

  33. 

  34. .cropper--height-soft-limit-reached .line-w {

  35.   background-color: #ff0000;

  36.   opacity: 1;

  37.   width: 1px;

  38.   left: -1px;

  39. }

  40. 

  41. .cropper--height-soft-limit-reached .line-e {

  42.   background-color: #ff0000;

  43.   opacity: 1;

  44.   width: 1px;

  45.   right: -1px;

  46. }

  47. 

  48. .cropper--width-soft-limit-reached .line-n {

  49.   background-color: #ff0000;

  50.   opacity: 1;

  51.   height: 1px;

  52.   top: -1px;

  53. }

  54. 

  55. .cropper--width-soft-limit-reached .line-s {

  56.   background-color: #ff0000;

  57.   opacity: 1;

  58.   height: 1px;

  59.   bottom: -1px;

  60. }

  61. 

  62. @media screen and (max-width: 480px) {

  63.   .details-wrapper th {

  64.     display: none;

  65.   }

  66. 

  67.   .details-wrapper table,

  68.   .details-wrapper thead,

  69.   .details-wrapper tbody,

  70.   .details-wrapper tr,

  71.   .details-wrapper td,

  72.   .details-wrapper th:first-child {

  73.     display: block;

  74.   }

  75. 

  76.   .details-wrapper tr {

  77.     position: relative;

  78.     padding: 0;

  79.   }

  80. 

  81.   .details-wrapper td {

  82.     padding: 10px 0;

  83.   }

  84. 

  85.   .details-wrapper td  .button.js-form-submit.form-submit {

  86.     position: absolute;

  87.     left: 10px;

  88.     bottom: 10px;

  89.     max-width: 265px;

  90.   }

  91. }

  92. 

  93. @media screen and (min-width: 641px) and (max-width: 1250px) {

  94.   .responsive-enabled--opened th {

  95.     display: none;

  96.   }

  97. 

  98.   .responsive-enabled--opened,

  99.   .responsive-enabled--opened thead,

  100.   .responsive-enabled--opened tbody,

  101.   .responsive-enabled--opened tr,

  102.   .responsive-enabled--opened td,

  103.   .responsive-enabled--opened th:first-child {

  104.     display: block;

  105.   }

  106. 

  107.   .responsive-enabled--opened tr {

  108.     position: relative;

  109.     width: 100%;

  110.     padding-left: 0;

  111.     padding-right: 0;

  112.   }

  113. 

  114.   .responsive-enabled--opened td > .button.js-form-submit.form-submit {

  115.     position: absolute;

  116.     left: 10px;

  117.     bottom: 10px;

  118.     max-width: 265px;

  119.   }

  120. 

  121.   .responsive-enabled--opened .vertical-tabs__menu {

  122.     width: 206px;

  123.   }

  124. 

  125.   .responsive-enabled--opened .vertical-tabs__panes {

  126.     margin-left: 205px;

  127.   }

  128. }