You are here

field.css in AT Tools 8.3

@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: 1rem;
}

.field__label {
  font-family: inherit;
  font-weight: 600;
  font-size: 1rem;
  margin: 0;
}

.field-label-inline .field__label {
  margin: 0;
  display: inline-block;
  padding: 0 0.375rem 0 0;
}

.field-label-inline .field__label:after {
  content: ":";
}

[dir="rtl"] .field-label-inline .field__label {
  padding: 0 0 0 0.375rem;
}

.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: 1rem;
}

.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 screen and (max-width: 45em) {
  .field-type-image [class*="align-"] {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    float: none;
    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: 0.5rem;
  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: "";
}

.form-managed-file .file {
  background-image: none;
  padding-left: 0;
}

/**
 * Field Language Display
 ============================================================================ */
[id*="field-language-display"] {
  margin-bottom: 1rem;
}

[id*="field-language-display"] .form-item {
  margin: 0;
}
/*# sourceMappingURL=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: 1rem;
  10. }
  11. .field__label {
  12. font-family: inherit;
  13. font-weight: 600;
  14. font-size: 1rem;
  15. margin: 0;
  16. }
  17. .field-label-inline .field__label {
  18. margin: 0;
  19. display: inline-block;
  20. padding: 0 0.375rem 0 0;
  21. }
  22. .field-label-inline .field__label:after {
  23. content: ":";
  24. }
  25. [dir="rtl"] .field-label-inline .field__label {
  26. padding: 0 0 0 0.375rem;
  27. }
  28. .field-label-inline .field__items,
  29. .field-label-inline .field__item {
  30. display: inline-block;
  31. }
  32. .field-label-above .field__label,
  33. .field-label-above .field__items {
  34. display: block;
  35. }
  36. /**
  37. * Field Image
  38. ============================================================================ */
  39. .field-type-image {
  40. margin: 0;
  41. padding: 0;
  42. }
  43. .field-type-image figure {
  44. margin-bottom: 1rem;
  45. }
  46. .field-type-image .float-none {
  47. float: none !important;
  48. margin-right: 0 !important;
  49. margin-left: 0 !important;
  50. }
  51. .field-type-image + .field-type-image .field__label {
  52. clear: both;
  53. }
  54. @media screen and (max-width: 45em) {
  55. .field-type-image [class*="align-"] {
  56. text-align: center;
  57. margin-left: auto;
  58. margin-right: auto;
  59. float: none;
  60. margin-bottom: 1rem;
  61. }
  62. .field-type-image figure[class*="align-"] {
  63. display: block;
  64. }
  65. }
  66. /**
  67. * File icons
  68. * - AT unsets Drupal core file field CSS for image icons and replaces them
  69. * with FontAwesome icons.
  70. ============================================================================ */
  71. .file {
  72. display: block;
  73. }
  74. .file a {
  75. text-decoration: none;
  76. word-break: break-all;
  77. -webkit-hyphens: auto;
  78. -ms-hyphens: auto;
  79. hyphens: auto;
  80. }
  81. .file a:before {
  82. font-family: FontAwesome, sans-serif;
  83. content: "";
  84. padding-right: 0.5rem;
  85. display: none;
  86. }
  87. .fa-loaded .file a:before {
  88. display: inline-block;
  89. }
  90. .file--package-x-generic a:before {
  91. content: "";
  92. }
  93. .file--x-office-spreadsheet a:before,
  94. .file [href$='.numbers']:before {
  95. content: "";
  96. }
  97. .file--x-office-document a:before,
  98. .file [href$='.pages']:before {
  99. content: "";
  100. }
  101. .file--x-office-presentation a:before,
  102. .file [href$='.key']:before {
  103. content: "";
  104. }
  105. .file--text-x-script:before,
  106. .file--text-html:before,
  107. .file [href*='.js']:before,
  108. .file [href*='.css']:before,
  109. .file [href*='.scss']:before,
  110. .file [href*='.sass']:before,
  111. .file [href*='.less']:before,
  112. .file [href*='.rb']:before,
  113. .file [href*='.php']:before,
  114. .file [href*='.inc']:before,
  115. .file [href*='.htm']:before,
  116. .file [href*='.html']:before,
  117. .file [href*='.xml']:before,
  118. .file [href*='.twig']:before,
  119. .file [href*='.theme']:before,
  120. .file [href*='.module']:before,
  121. .file [href*='.config']:before,
  122. .file [href*='.install']:before,
  123. .file [href*='.yml']:before,
  124. .file [href*='.json']:before,
  125. .file [href*='.sh']:before {
  126. content: "";
  127. }
  128. .file--text a:before,
  129. .file--text-plain a:before {
  130. content: "";
  131. }
  132. .file--application-pdf a:before {
  133. content: "";
  134. }
  135. .file--audio a:before {
  136. content: "";
  137. }
  138. .file--video a:before {
  139. content: "";
  140. }
  141. .file--image a:before {
  142. content: "";
  143. }
  144. .form-managed-file .file {
  145. background-image: none;
  146. padding-left: 0;
  147. }
  148. /**
  149. * Field Language Display
  150. ============================================================================ */
  151. [id*="field-language-display"] {
  152. margin-bottom: 1rem;
  153. }
  154. [id*="field-language-display"] .form-item {
  155. margin: 0;
  156. }
  157. /*# sourceMappingURL=field.css.map */