off-canvas.base.css

Same filename in this branch
  1. 9 core/misc/dialog/off-canvas.base.css
  2. 9 core/themes/stable/css/core/dialog/off-canvas.base.css
Same filename in other branches
  1. 8.9.x core/misc/dialog/off-canvas.base.css
  2. 8.9.x core/themes/stable/css/core/dialog/off-canvas.base.css

Set base styles for the off-canvas dialog.

File

core/themes/stable9/css/core/dialog/off-canvas.base.css

View source
  1. /*
  2. * DO NOT EDIT THIS FILE.
  3. * See the following change record for more information,
  4. * https://www.drupal.org/node/3084859
  5. * @preserve
  6. */
  7. /**
  8. * @file
  9. * Set base styles for the off-canvas dialog.
  10. */
  11. /* Set some global attributes. */
  12. #drupal-off-canvas {
  13. color: #ddd;
  14. background: #444;
  15. }
  16. /**
  17. * All HTML elements that could be used in off-canvas except div, bdo, bdi,
  18. * data, svg, map and math.
  19. *
  20. * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element
  21. */
  22. #drupal-off-canvas span,
  23. #drupal-off-canvas applet,
  24. #drupal-off-canvas object,
  25. #drupal-off-canvas iframe,
  26. #drupal-off-canvas h1,
  27. #drupal-off-canvas h2,
  28. #drupal-off-canvas h3,
  29. #drupal-off-canvas h4,
  30. #drupal-off-canvas h5,
  31. #drupal-off-canvas h6,
  32. #drupal-off-canvas p,
  33. #drupal-off-canvas blockquote,
  34. #drupal-off-canvas pre,
  35. #drupal-off-canvas a,
  36. #drupal-off-canvas abbr,
  37. #drupal-off-canvas acronym,
  38. #drupal-off-canvas address,
  39. #drupal-off-canvas big,
  40. #drupal-off-canvas button,
  41. #drupal-off-canvas cite,
  42. #drupal-off-canvas code,
  43. #drupal-off-canvas del,
  44. #drupal-off-canvas dfn,
  45. #drupal-off-canvas em,
  46. #drupal-off-canvas img,
  47. #drupal-off-canvas ins,
  48. #drupal-off-canvas kbd,
  49. #drupal-off-canvas q,
  50. #drupal-off-canvas s,
  51. #drupal-off-canvas samp,
  52. #drupal-off-canvas small,
  53. #drupal-off-canvas strike,
  54. #drupal-off-canvas strong,
  55. #drupal-off-canvas sub,
  56. #drupal-off-canvas sup,
  57. #drupal-off-canvas tt,
  58. #drupal-off-canvas var,
  59. #drupal-off-canvas b,
  60. #drupal-off-canvas u,
  61. #drupal-off-canvas i,
  62. #drupal-off-canvas center,
  63. #drupal-off-canvas dl,
  64. #drupal-off-canvas dt,
  65. #drupal-off-canvas dd,
  66. #drupal-off-canvas ol,
  67. #drupal-off-canvas ul,
  68. #drupal-off-canvas li,
  69. #drupal-off-canvas fieldset,
  70. #drupal-off-canvas form,
  71. #drupal-off-canvas label,
  72. #drupal-off-canvas legend,
  73. #drupal-off-canvas table,
  74. #drupal-off-canvas caption,
  75. #drupal-off-canvas tbody,
  76. #drupal-off-canvas tfoot,
  77. #drupal-off-canvas thead,
  78. #drupal-off-canvas tr,
  79. #drupal-off-canvas th,
  80. #drupal-off-canvas td,
  81. #drupal-off-canvas article,
  82. #drupal-off-canvas aside,
  83. #drupal-off-canvas canvas,
  84. #drupal-off-canvas details,
  85. #drupal-off-canvas embed,
  86. #drupal-off-canvas figure,
  87. #drupal-off-canvas figcaption,
  88. #drupal-off-canvas footer,
  89. #drupal-off-canvas header,
  90. #drupal-off-canvas hgroup,
  91. #drupal-off-canvas main,
  92. #drupal-off-canvas menu,
  93. #drupal-off-canvas meter,
  94. #drupal-off-canvas nav,
  95. #drupal-off-canvas output,
  96. #drupal-off-canvas progress,
  97. #drupal-off-canvas ruby,
  98. #drupal-off-canvas section,
  99. #drupal-off-canvas summary,
  100. #drupal-off-canvas time,
  101. #drupal-off-canvas mark,
  102. #drupal-off-canvas audio,
  103. #drupal-off-canvas video,
  104. #drupal-off-canvas input,
  105. #drupal-off-canvas select,
  106. #drupal-off-canvas textarea {
  107. color: inherit;
  108. background: inherit;
  109. font-family: "Lucida Grande", "Lucida Sans Unicode", "liberation sans", sans-serif;
  110. }
  111. /* Generic elements. */
  112. #drupal-off-canvas a,
  113. #drupal-off-canvas .link {
  114. cursor: pointer;
  115. transition: color 0.5s ease;
  116. text-decoration: none;
  117. color: #85bef4;
  118. border-bottom: none;
  119. font-family: "Lucida Grande", "Lucida Sans Unicode", "liberation sans", sans-serif;
  120. font-size: inherit;
  121. font-weight: normal;
  122. }
  123. #drupal-off-canvas a:focus,
  124. #drupal-off-canvas .link:focus,
  125. #drupal-off-canvas a:hover,
  126. #drupal-off-canvas .link:hover {
  127. text-decoration: underline;
  128. }
  129. #drupal-off-canvas hr {
  130. height: 1px;
  131. background: #ccc;
  132. }
  133. #drupal-off-canvas summary,
  134. #drupal-off-canvas .fieldgroup:not(.form-composite) > legend {
  135. font-weight: bold;
  136. }
  137. #drupal-off-canvas h1,
  138. #drupal-off-canvas .heading-a {
  139. display: block;
  140. font-size: 1.625em;
  141. font-weight: bold;
  142. line-height: 1.875em;
  143. }
  144. #drupal-off-canvas h2,
  145. #drupal-off-canvas .heading-b {
  146. display: block;
  147. margin: 0.625rem 0;
  148. font-size: 1.385em;
  149. font-weight: bold;
  150. }
  151. #drupal-off-canvas h3,
  152. #drupal-off-canvas .heading-c {
  153. display: block;
  154. margin: 0.625rem 0;
  155. font-size: 1.231em;
  156. font-weight: bold;
  157. }
  158. #drupal-off-canvas h4,
  159. #drupal-off-canvas .heading-d {
  160. display: block;
  161. margin: 0.625rem 0;
  162. font-size: 1.154em;
  163. font-weight: bold;
  164. }
  165. #drupal-off-canvas h5,
  166. #drupal-off-canvas .heading-e {
  167. display: block;
  168. margin: 0.625rem 0;
  169. font-size: 1.077em;
  170. font-weight: bold;
  171. }
  172. #drupal-off-canvas h6,
  173. #drupal-off-canvas .heading-f {
  174. display: block;
  175. margin: 0.625rem 0;
  176. font-size: 1.077em;
  177. font-weight: bold;
  178. }
  179. #drupal-off-canvas p {
  180. margin: 1em 0;
  181. }
  182. #drupal-off-canvas dl {
  183. margin: 0 0 1.25rem;
  184. }
  185. #drupal-off-canvas dl dd,
  186. #drupal-off-canvas dl dl {
  187. margin-bottom: 0.625rem;
  188. margin-left: 1.25rem; /* LTR */
  189. }
  190. [dir="rtl"] #drupal-off-canvas dl dd,
  191. [dir="rtl"] #drupal-off-canvas dl dl {
  192. margin-right: 1.25rem;
  193. }
  194. #drupal-off-canvas blockquote {
  195. margin: 1em 2.5rem;
  196. }
  197. #drupal-off-canvas address {
  198. font-style: italic;
  199. }
  200. #drupal-off-canvas u,
  201. #drupal-off-canvas ins {
  202. text-decoration: underline;
  203. }
  204. #drupal-off-canvas s,
  205. #drupal-off-canvas strike,
  206. #drupal-off-canvas del {
  207. text-decoration: line-through;
  208. }
  209. #drupal-off-canvas big {
  210. font-size: larger;
  211. }
  212. #drupal-off-canvas small {
  213. font-size: smaller;
  214. }
  215. #drupal-off-canvas sub {
  216. vertical-align: sub;
  217. font-size: smaller;
  218. line-height: normal;
  219. }
  220. #drupal-off-canvas sup {
  221. vertical-align: super;
  222. font-size: smaller;
  223. line-height: normal;
  224. }
  225. #drupal-off-canvas abbr,
  226. #drupal-off-canvas acronym {
  227. border-bottom: dotted 1px;
  228. background: transparent;
  229. }
  230. #drupal-off-canvas ul {
  231. list-style-type: disc;
  232. list-style-image: none;
  233. }
  234. [dir="rtl"] #drupal-off-canvas .messages__list {
  235. margin-right: 0;
  236. }
  237. #drupal-off-canvas ol {
  238. list-style-type: decimal;
  239. }
  240. #drupal-off-canvas ul li,
  241. #drupal-off-canvas ol li {
  242. display: block;
  243. padding: 0.3125rem 0;
  244. border-bottom: 1px solid #333;
  245. }
  246. #drupal-off-canvas ul li:last-child,
  247. #drupal-off-canvas ol li:last-child {
  248. padding-bottom: 0;
  249. border-bottom: none;
  250. }
  251. #drupal-off-canvas blockquote,
  252. #drupal-off-canvas code {
  253. margin: 1.25rem 0;
  254. }
  255. #drupal-off-canvas pre {
  256. margin: 1.25rem 0;
  257. white-space: pre-wrap;
  258. }
  259. #drupal-off-canvas details {
  260. display: block;
  261. }
  262. #drupal-off-canvas summary {
  263. display: list-item;
  264. }
  265. #drupal-off-canvas select::-ms-expand {
  266. display: block;
  267. }
  268. /* Classes for hidden and visually hidden elements. See hidden.module.css. */
  269. #drupal-off-canvas .hidden {
  270. display: none;
  271. }
  272. #drupal-off-canvas .visually-hidden {
  273. position: absolute !important;
  274. }
  275. #drupal-off-canvas .visually-hidden {
  276. overflow: hidden;
  277. clip: rect(1px, 1px, 1px, 1px);
  278. width: 1px;
  279. height: 1px;
  280. word-wrap: normal;
  281. }
  282. #drupal-off-canvas .visually-hidden.focusable:active,
  283. #drupal-off-canvas .visually-hidden.focusable:focus {
  284. position: static !important;
  285. }
  286. #drupal-off-canvas .visually-hidden.focusable:active,
  287. #drupal-off-canvas .visually-hidden.focusable:focus {
  288. overflow: visible;
  289. clip: auto;
  290. width: auto;
  291. height: auto;
  292. }
  293. #drupal-off-canvas .invisible {
  294. visibility: hidden;
  295. }
  296. /* Some system classes. See system.admin.css. */
  297. #drupal-off-canvas .panel {
  298. padding: 0.3125rem 0.3125rem 0.9375rem;
  299. }
  300. #drupal-off-canvas .panel__description {
  301. margin: 0 0 0.1875rem;
  302. padding: 2px 0 0.1875rem 0;
  303. }
  304. #drupal-off-canvas .compact-link {
  305. margin: 0 0 0.625rem 0;
  306. }
  307. #drupal-off-canvas small .admin-link:before {
  308. content: " [";
  309. }
  310. #drupal-off-canvas small .admin-link:after {
  311. content: "]";
  312. }
  313. /* Override jQuery UI */
  314. #drupal-off-canvas .ui-widget-content a {
  315. color: #85bef4 !important;
  316. }
  317. /* Message styles */
  318. #drupal-off-canvas .messages {
  319. background: no-repeat 0.625rem 1.0625rem;
  320. }
  321. [dir="rtl"] #drupal-off-canvas .messages {
  322. background-position: right 10px top 17px;
  323. }
  324. #drupal-off-canvas .messages abbr {
  325. color: #444;
  326. }
  327. #drupal-off-canvas .messages--status {
  328. color: #325e1c;
  329. background-color: #f3faef;
  330. background-image: url(../icons/73b355/check.svg);
  331. }
  332. #drupal-off-canvas .messages--warning {
  333. color: #734c00;
  334. background-color: #fdf8ed;
  335. background-image: url(../icons/e29700/warning.svg);
  336. }
  337. #drupal-off-canvas .messages--error {
  338. color: #a51b00;
  339. background-color: #fcf4f2;
  340. background-image: url(../icons/e32700/error.svg);
  341. }
  342. #drupal-off-canvas .messages--error div[role="alert"] {
  343. color: inherit;
  344. background: transparent;
  345. }

Buggy or inaccurate documentation? Please file an issue. Need support? Need help programming? Connect with the Drupal community.