You are here

Home » API reference » AT Tools 8

field.css in AT Tools 8

Same filename and directory in other branches
  1. 8.3 at_theme_generator/starterkits/starterkit/styles/css/components/field.css
  2. 8.2 at_theme_generator/starterkits/starterkit/styles/css/components/field.css
@charset "UTF-8";
/**
 * Fields
 * Common styles for field templates.
 * SEE: image and taxonomy field styles as these both have unique
 * template html markup and selectors.
 ============================================================================ */
.field {
  margin-bottom: 16px;
  margin-bottom: 1rem;
}

.field__label {
  font-family: inherit;
  font-weight: 600;
  font-size: 16px;
  font-size: 1rem;
  line-height: 21px;
  line-height: 1.3125rem;
  margin: 0;
}

.field-label-inline .field__label {
  margin: 0;
  display: inline-block;
  padding: 0 4px 0 0;
  padding: 0 0.25rem 0 0;
}
.field-label-inline .field__label:after {
  content: ":";
}
[dir="rtl"] .field-label-inline .field__label {
  padding: 0 0 0 4px;
  padding: 0 0 0 0.25rem;
}
.field-label-inline .field__items,
.field-label-inline .field__item {
  display: inline-block;
}

.field-label-above .field__label,
.field-label-above .field__items {
  display: block;
}

/**
 * Field Image
 ============================================================================ */
.field-type-image {
  margin: 0;
  padding: 0;
}
.field-type-image figure {
  margin-bottom: 16px;
  margin-bottom: 1rem;
}
.field-type-image .align-left {
  margin: 0 16px 16px 0;
  margin: 0 1rem 1rem 0;
}
.field-type-image .align-none figcaption,
.field-type-image .align-left figcaption {
  text-align: left;
}
.field-type-image .align-center {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 16px;
  margin-bottom: 1rem;
}
.field-type-image figure.align-center {
  display: block;
}
.field-type-image .align-right {
  margin: 0 0 16px 16px;
  margin: 0 0 1rem 1rem;
}
.field-type-image .align-right figcaption {
  text-align: left;
}
.field-type-image .float-none {
  float: none !important;
  margin-right: 0 !important;
  margin-left: 0 !important;
}
.field-type-image + .field-type-image .field__label {
  clear: both;
}

@media all and (max-width: 45em) {
  .field-type-image [class*="align-"] {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    float: none;
    margin-bottom: 16px;
    margin-bottom: 1rem;
  }

  .field-type-image figure[class*="align-"] {
    display: block;
  }
}
/**
 * File icons
 *  - AT unsets Drupal core file field CSS for image icons and replaces them
 *    with FontAwesome icons.
 ============================================================================ */
.file {
  display: block;
}
.file a {
  text-decoration: none;
  word-break: break-all;
  -webkit-hyphens: auto;
      -ms-hyphens: auto;
          hyphens: auto;
}
.file a:before {
  font-family: FontAwesome, sans-serif;
  content: "";
  padding-right: 7px;
  padding-right: 0.4375rem;
  display: none;
}
.fa-loaded .file a:before {
  display: inline-block;
}

.file--package-x-generic a:before {
  content: "";
}

.file--x-office-spreadsheet a:before,
.file [href$='.numbers']:before {
  content: "";
}

.file--x-office-document a:before,
.file [href$='.pages']:before {
  content: "";
}

.file--x-office-presentation a:before,
.file [href$='.key']:before {
  content: "";
}

.file--text-x-script:before,
.file--text-html:before,
.file [href*='.js']:before,
.file [href*='.css']:before,
.file [href*='.scss']:before,
.file [href*='.sass']:before,
.file [href*='.less']:before,
.file [href*='.rb']:before,
.file [href*='.php']:before,
.file [href*='.inc']:before,
.file [href*='.htm']:before,
.file [href*='.html']:before,
.file [href*='.xml']:before,
.file [href*='.twig']:before,
.file [href*='.theme']:before,
.file [href*='.module']:before,
.file [href*='.config']:before,
.file [href*='.install']:before,
.file [href*='.yml']:before,
.file [href*='.json']:before,
.file [href*='.sh']:before {
  content: "";
}

.file--text a:before,
.file--text-plain a:before {
  content: "";
}

.file--application-pdf a:before {
  content: "";
}

.file--audio a:before {
  content: "";
}

.file--video a:before {
  content: "";
}

.file--image a:before {
  content: "";
}

/**
 * Field Language Display
 ============================================================================ */
[id*="field-language-display"] {
  margin-bottom: 16px;
  margin-bottom: 1rem;
}
[id*="field-language-display"] .form-item {
  margin: 0;
}

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

File

at_theme_generator/starterkits/starterkit/styles/css/components/field.css
View source 
  1. @charset "UTF-8";

  2. /**

  3.  * Fields

  4.  * Common styles for field templates.

  5.  * SEE: image and taxonomy field styles as these both have unique

  6.  * template html markup and selectors.

  7.  ============================================================================ */

  8. .field {

  9.   margin-bottom: 16px;

  10.   margin-bottom: 1rem;

  11. }

  12. 

  13. .field__label {

  14.   font-family: inherit;

  15.   font-weight: 600;

  16.   font-size: 16px;

  17.   font-size: 1rem;

  18.   line-height: 21px;

  19.   line-height: 1.3125rem;

  20.   margin: 0;

  21. }

  22. 

  23. .field-label-inline .field__label {

  24.   margin: 0;

  25.   display: inline-block;

  26.   padding: 0 4px 0 0;

  27.   padding: 0 0.25rem 0 0;

  28. }

  29. .field-label-inline .field__label:after {

  30.   content: ":";

  31. }

  32. [dir="rtl"] .field-label-inline .field__label {

  33.   padding: 0 0 0 4px;

  34.   padding: 0 0 0 0.25rem;

  35. }

  36. .field-label-inline .field__items,

  37. .field-label-inline .field__item {

  38.   display: inline-block;

  39. }

  40. 

  41. .field-label-above .field__label,

  42. .field-label-above .field__items {

  43.   display: block;

  44. }

  45. 

  46. /**

  47.  * Field Image

  48.  ============================================================================ */

  49. .field-type-image {

  50.   margin: 0;

  51.   padding: 0;

  52. }

  53. .field-type-image figure {

  54.   margin-bottom: 16px;

  55.   margin-bottom: 1rem;

  56. }

  57. .field-type-image .align-left {

  58.   margin: 0 16px 16px 0;

  59.   margin: 0 1rem 1rem 0;

  60. }

  61. .field-type-image .align-none figcaption,

  62. .field-type-image .align-left figcaption {

  63.   text-align: left;

  64. }

  65. .field-type-image .align-center {

  66.   text-align: center;

  67.   margin-left: auto;

  68.   margin-right: auto;

  69.   margin-bottom: 16px;

  70.   margin-bottom: 1rem;

  71. }

  72. .field-type-image figure.align-center {

  73.   display: block;

  74. }

  75. .field-type-image .align-right {

  76.   margin: 0 0 16px 16px;

  77.   margin: 0 0 1rem 1rem;

  78. }

  79. .field-type-image .align-right figcaption {

  80.   text-align: left;

  81. }

  82. .field-type-image .float-none {

  83.   float: none !important;

  84.   margin-right: 0 !important;

  85.   margin-left: 0 !important;

  86. }

  87. .field-type-image + .field-type-image .field__label {

  88.   clear: both;

  89. }

  90. 

  91. @media all and (max-width: 45em) {

  92.   .field-type-image [class*="align-"] {

  93.     text-align: center;

  94.     margin-left: auto;

  95.     margin-right: auto;

  96.     float: none;

  97.     margin-bottom: 16px;

  98.     margin-bottom: 1rem;

  99.   }

  100. 

  101.   .field-type-image figure[class*="align-"] {

  102.     display: block;

  103.   }

  104. }

  105. /**

  106.  * File icons

  107.  *  - AT unsets Drupal core file field CSS for image icons and replaces them

  108.  *    with FontAwesome icons.

  109.  ============================================================================ */

  110. .file {

  111.   display: block;

  112. }

  113. .file a {

  114.   text-decoration: none;

  115.   word-break: break-all;

  116.   -webkit-hyphens: auto;

  117.       -ms-hyphens: auto;

  118.           hyphens: auto;

  119. }

  120. .file a:before {

  121.   font-family: FontAwesome, sans-serif;

  122.   content: "";

  123.   padding-right: 7px;

  124.   padding-right: 0.4375rem;

  125.   display: none;

  126. }

  127. .fa-loaded .file a:before {

  128.   display: inline-block;

  129. }

  130. 

  131. .file--package-x-generic a:before {

  132.   content: "";

  133. }

  134. 

  135. .file--x-office-spreadsheet a:before,

  136. .file [href$='.numbers']:before {

  137.   content: "";

  138. }

  139. 

  140. .file--x-office-document a:before,

  141. .file [href$='.pages']:before {

  142.   content: "";

  143. }

  144. 

  145. .file--x-office-presentation a:before,

  146. .file [href$='.key']:before {

  147.   content: "";

  148. }

  149. 

  150. .file--text-x-script:before,

  151. .file--text-html:before,

  152. .file [href*='.js']:before,

  153. .file [href*='.css']:before,

  154. .file [href*='.scss']:before,

  155. .file [href*='.sass']:before,

  156. .file [href*='.less']:before,

  157. .file [href*='.rb']:before,

  158. .file [href*='.php']:before,

  159. .file [href*='.inc']:before,

  160. .file [href*='.htm']:before,

  161. .file [href*='.html']:before,

  162. .file [href*='.xml']:before,

  163. .file [href*='.twig']:before,

  164. .file [href*='.theme']:before,

  165. .file [href*='.module']:before,

  166. .file [href*='.config']:before,

  167. .file [href*='.install']:before,

  168. .file [href*='.yml']:before,

  169. .file [href*='.json']:before,

  170. .file [href*='.sh']:before {

  171.   content: "";

  172. }

  173. 

  174. .file--text a:before,

  175. .file--text-plain a:before {

  176.   content: "";

  177. }

  178. 

  179. .file--application-pdf a:before {

  180.   content: "";

  181. }

  182. 

  183. .file--audio a:before {

  184.   content: "";

  185. }

  186. 

  187. .file--video a:before {

  188.   content: "";

  189. }

  190. 

  191. .file--image a:before {

  192.   content: "";

  193. }

  194. 

  195. /**

  196.  * Field Language Display

  197.  ============================================================================ */

  198. [id*="field-language-display"] {

  199.   margin-bottom: 16px;

  200.   margin-bottom: 1rem;

  201. }

  202. [id*="field-language-display"] .form-item {

  203.   margin: 0;

  204. }

  205. 

  206. /*# sourceMappingURL=maps/field.css.map */