You are here

image_widget_crop.css in Image Widget Crop 8

Same filename and directory in other branches
  1. 8.2 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--height-soft-limit-reached .cropper-point,
.cropper--width-soft-limit-reached .cropper-point {
  background-color: #a51b00;
}
.cropper--height-soft-limit-reached .line-w,
.cropper--height-soft-limit-reached .line-e {
  background-color: #ff0000;
  opacity: 0.2;
}
.cropper--width-soft-limit-reached .line-n,
.cropper--width-soft-limit-reached .line-s {
  background-color: #ff0000;
  opacity: 0.2;
}

@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. .image-data__crop-wrapper .crop-preview-wrapper__crop-reset {
  8. margin-top: 1em;
  9. }
  10. .cropper--height-soft-limit-reached .cropper-point,
  11. .cropper--width-soft-limit-reached .cropper-point {
  12. background-color: #a51b00;
  13. }
  14. .cropper--height-soft-limit-reached .line-w,
  15. .cropper--height-soft-limit-reached .line-e {
  16. background-color: #ff0000;
  17. opacity: 0.2;
  18. }
  19. .cropper--width-soft-limit-reached .line-n,
  20. .cropper--width-soft-limit-reached .line-s {
  21. background-color: #ff0000;
  22. opacity: 0.2;
  23. }
  24. @media screen and (max-width: 480px) {
  25. .details-wrapper th {
  26. display: none;
  27. }
  28. .details-wrapper table,
  29. .details-wrapper thead,
  30. .details-wrapper tbody,
  31. .details-wrapper tr,
  32. .details-wrapper td,
  33. .details-wrapper th:first-child {
  34. display: block;
  35. }
  36. .details-wrapper tr {
  37. position: relative;
  38. padding: 0;
  39. }
  40. .details-wrapper td {
  41. padding: 10px 0;
  42. }
  43. .details-wrapper td .button.js-form-submit.form-submit {
  44. position: absolute;
  45. left: 10px;
  46. bottom: 10px;
  47. max-width: 265px;
  48. }
  49. }
  50. @media screen and (min-width: 641px) and (max-width: 1250px) {
  51. .responsive-enabled--opened th {
  52. display: none;
  53. }
  54. .responsive-enabled--opened,
  55. .responsive-enabled--opened thead,
  56. .responsive-enabled--opened tbody,
  57. .responsive-enabled--opened tr,
  58. .responsive-enabled--opened td,
  59. .responsive-enabled--opened th:first-child {
  60. display: block;
  61. }
  62. .responsive-enabled--opened tr {
  63. position: relative;
  64. width: 100%;
  65. padding-left: 0;
  66. padding-right: 0;
  67. }
  68. .responsive-enabled--opened td > .button.js-form-submit.form-submit {
  69. position: absolute;
  70. left: 10px;
  71. bottom: 10px;
  72. max-width: 265px;
  73. }
  74. .responsive-enabled--opened .vertical-tabs__menu {
  75. width: 206px;
  76. }
  77. .responsive-enabled--opened .vertical-tabs__panes {
  78. margin-left: 205px;
  79. }
  80. }