off-canvas.base.css

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

Set base styles for the off-canvas dialog.

File

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

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