You are here

Home » API reference » AT Tools 8

image.css in AT Tools 8

Same filename and directory in other branches
  1. 8.3 at_theme_generator/starterkits/starterkit/styles/css/components/image.css
  2. 8.2 at_theme_generator/starterkits/starterkit/styles/css/components/image.css
/**
 * Images
 ============================================================================ */
@media all and (min-width: 60.063em) {
  img.align-left,
  figure.align-left,
  .field-type-image__figure.align-left {
    margin: 0 16px 16px 0;
    margin: 0 1rem 1rem 0;
  }
  img.align-right,
  figure.align-right,
  .field-type-image__figure.align-right {
    margin: 0 0 16px 16px;
    margin: 0 0 1rem 1rem;
  }
}
@media all and (max-width: 60em) {
  img.align-left, img.align-right,
  figure.align-left,
  figure.align-right,
  .field-type-image__figure.align-left,
  .field-type-image__figure.align-right {
    float: none;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 16px;
    margin-bottom: 1rem;
  }
}
img.align-center,
figure.align-center,
.field-type-image__figure.align-center {
  margin-bottom: 16px;
  margin-bottom: 1rem;
}
img.align-center figcaption,
figure.align-center figcaption,
.field-type-image__figure.align-center figcaption {
  text-align: center;
}
img[class*="align-"],
figure[class*="align-"],
.field-type-image__figure[class*="align-"] {
  clear: both;
}

.cke_widget_wrapper.align-left {
  margin: 0 16px 16px 0;
  margin: 0 1rem 1rem 0;
}
.cke_widget_wrapper.align-right {
  margin: 0 0 16px 16px;
  margin: 0 0 1rem 1rem;
}
.cke_widget_wrapper.align-center {
  margin-bottom: 16px;
  margin-bottom: 1rem;
}
.cke_widget_wrapper.align-center figcaption {
  text-align: center;
}
.cke_widget_wrapper[class*="align-"] {
  clear: both;
}

/**
 * Image upload widget.
 ============================================================================ */
.image-widget .form-file {
  padding: 0;
}

.image-widget-data {
  float: left;
}
.image-widget-data .text-field {
  width: auto;
}

.image-preview {
  float: left;
  padding: 0 16px 16px 0;
  padding: 0 1rem 1rem 0;
}
[dir="rtl"] .image-preview {
  padding: 0 0 16px 16px;
  padding: 0 0 1rem 1rem;
}

/*# sourceMappingURL=maps/image.css.map */

File

at_theme_generator/starterkits/starterkit/styles/css/components/image.css
View source 
  1. /**

  2.  * Images

  3.  ============================================================================ */

  4. @media all and (min-width: 60.063em) {

  5.   img.align-left,

  6.   figure.align-left,

  7.   .field-type-image__figure.align-left {

  8.     margin: 0 16px 16px 0;

  9.     margin: 0 1rem 1rem 0;

  10.   }

  11.   img.align-right,

  12.   figure.align-right,

  13.   .field-type-image__figure.align-right {

  14.     margin: 0 0 16px 16px;

  15.     margin: 0 0 1rem 1rem;

  16.   }

  17. }

  18. @media all and (max-width: 60em) {

  19.   img.align-left, img.align-right,

  20.   figure.align-left,

  21.   figure.align-right,

  22.   .field-type-image__figure.align-left,

  23.   .field-type-image__figure.align-right {

  24.     float: none;

  25.     text-align: center;

  26.     margin-left: auto;

  27.     margin-right: auto;

  28.     margin-bottom: 16px;

  29.     margin-bottom: 1rem;

  30.   }

  31. }

  32. img.align-center,

  33. figure.align-center,

  34. .field-type-image__figure.align-center {

  35.   margin-bottom: 16px;

  36.   margin-bottom: 1rem;

  37. }

  38. img.align-center figcaption,

  39. figure.align-center figcaption,

  40. .field-type-image__figure.align-center figcaption {

  41.   text-align: center;

  42. }

  43. img[class*="align-"],

  44. figure[class*="align-"],

  45. .field-type-image__figure[class*="align-"] {

  46.   clear: both;

  47. }

  48. 

  49. .cke_widget_wrapper.align-left {

  50.   margin: 0 16px 16px 0;

  51.   margin: 0 1rem 1rem 0;

  52. }

  53. .cke_widget_wrapper.align-right {

  54.   margin: 0 0 16px 16px;

  55.   margin: 0 0 1rem 1rem;

  56. }

  57. .cke_widget_wrapper.align-center {

  58.   margin-bottom: 16px;

  59.   margin-bottom: 1rem;

  60. }

  61. .cke_widget_wrapper.align-center figcaption {

  62.   text-align: center;

  63. }

  64. .cke_widget_wrapper[class*="align-"] {

  65.   clear: both;

  66. }

  67. 

  68. /**

  69.  * Image upload widget.

  70.  ============================================================================ */

  71. .image-widget .form-file {

  72.   padding: 0;

  73. }

  74. 

  75. .image-widget-data {

  76.   float: left;

  77. }

  78. .image-widget-data .text-field {

  79.   width: auto;

  80. }

  81. 

  82. .image-preview {

  83.   float: left;

  84.   padding: 0 16px 16px 0;

  85.   padding: 0 1rem 1rem 0;

  86. }

  87. [dir="rtl"] .image-preview {

  88.   padding: 0 0 16px 16px;

  89.   padding: 0 0 1rem 1rem;

  90. }

  91. 

  92. /*# sourceMappingURL=maps/image.css.map */