off-canvas.base.css

Same filename in this branch
  1. 9 core/themes/stable9/css/core/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/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/3084859

  5.  * @preserve

  6.  */

  7. 

  8. /**

  9.  * @file

  10.  * Set base styles for the off-canvas dialog.

  11.  */

  12. 

  13. /* Set some global attributes. */

  14. 

  15. #drupal-off-canvas {

  16.   color: #ddd;

  17.   background: #444;

  18. }

  19. 

  20. /**

  21.  * All HTML elements that could be used in off-canvas except div, bdo, bdi,

  22.  * data, svg, map and math.

  23.  *

  24.  * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element

  25.  */

  26. 

  27. #drupal-off-canvas span,

  28. #drupal-off-canvas applet,

  29. #drupal-off-canvas object,

  30. #drupal-off-canvas iframe,

  31. #drupal-off-canvas h1,

  32. #drupal-off-canvas h2,

  33. #drupal-off-canvas h3,

  34. #drupal-off-canvas h4,

  35. #drupal-off-canvas h5,

  36. #drupal-off-canvas h6,

  37. #drupal-off-canvas p,

  38. #drupal-off-canvas blockquote,

  39. #drupal-off-canvas pre,

  40. #drupal-off-canvas a,

  41. #drupal-off-canvas abbr,

  42. #drupal-off-canvas acronym,

  43. #drupal-off-canvas address,

  44. #drupal-off-canvas big,

  45. #drupal-off-canvas button,

  46. #drupal-off-canvas cite,

  47. #drupal-off-canvas code,

  48. #drupal-off-canvas del,

  49. #drupal-off-canvas dfn,

  50. #drupal-off-canvas em,

  51. #drupal-off-canvas img,

  52. #drupal-off-canvas ins,

  53. #drupal-off-canvas kbd,

  54. #drupal-off-canvas q,

  55. #drupal-off-canvas s,

  56. #drupal-off-canvas samp,

  57. #drupal-off-canvas small,

  58. #drupal-off-canvas strike,

  59. #drupal-off-canvas strong,

  60. #drupal-off-canvas sub,

  61. #drupal-off-canvas sup,

  62. #drupal-off-canvas tt,

  63. #drupal-off-canvas var,

  64. #drupal-off-canvas b,

  65. #drupal-off-canvas u,

  66. #drupal-off-canvas i,

  67. #drupal-off-canvas center,

  68. #drupal-off-canvas dl,

  69. #drupal-off-canvas dt,

  70. #drupal-off-canvas dd,

  71. #drupal-off-canvas ol,

  72. #drupal-off-canvas ul,

  73. #drupal-off-canvas li,

  74. #drupal-off-canvas fieldset,

  75. #drupal-off-canvas form,

  76. #drupal-off-canvas label,

  77. #drupal-off-canvas legend,

  78. #drupal-off-canvas table,

  79. #drupal-off-canvas caption,

  80. #drupal-off-canvas tbody,

  81. #drupal-off-canvas tfoot,

  82. #drupal-off-canvas thead,

  83. #drupal-off-canvas tr,

  84. #drupal-off-canvas th,

  85. #drupal-off-canvas td,

  86. #drupal-off-canvas article,

  87. #drupal-off-canvas aside,

  88. #drupal-off-canvas canvas,

  89. #drupal-off-canvas details,

  90. #drupal-off-canvas embed,

  91. #drupal-off-canvas figure,

  92. #drupal-off-canvas figcaption,

  93. #drupal-off-canvas footer,

  94. #drupal-off-canvas header,

  95. #drupal-off-canvas hgroup,

  96. #drupal-off-canvas main,

  97. #drupal-off-canvas menu,

  98. #drupal-off-canvas meter,

  99. #drupal-off-canvas nav,

  100. #drupal-off-canvas output,

  101. #drupal-off-canvas progress,

  102. #drupal-off-canvas ruby,

  103. #drupal-off-canvas section,

  104. #drupal-off-canvas summary,

  105. #drupal-off-canvas time,

  106. #drupal-off-canvas mark,

  107. #drupal-off-canvas audio,

  108. #drupal-off-canvas video,

  109. #drupal-off-canvas input,

  110. #drupal-off-canvas select,

  111. #drupal-off-canvas textarea {

  112.   color: inherit;

  113.   background: inherit;

  114.   font-family: "Lucida Grande", "Lucida Sans Unicode", "liberation sans", sans-serif;

  115. }

  116. 

  117. /* Generic elements. */

  118. 

  119. #drupal-off-canvas a,

  120. #drupal-off-canvas .link {

  121.   cursor: pointer;

  122.   transition: color 0.5s ease;

  123.   text-decoration: none;

  124.   color: #85bef4;

  125.   border-bottom: none;

  126.   font-family: "Lucida Grande", "Lucida Sans Unicode", "liberation sans", sans-serif;

  127.   font-size: inherit;

  128.   font-weight: normal;

  129. }

  130. 

  131. #drupal-off-canvas a:focus,

  132. #drupal-off-canvas .link:focus,

  133. #drupal-off-canvas a:hover,

  134. #drupal-off-canvas .link:hover {

  135.   text-decoration: underline;

  136. }

  137. 

  138. #drupal-off-canvas hr {

  139.   height: 1px;

  140.   background: #ccc;

  141. }

  142. 

  143. #drupal-off-canvas summary,

  144. #drupal-off-canvas .fieldgroup:not(.form-composite) > legend {

  145.   font-weight: bold;

  146. }

  147. 

  148. #drupal-off-canvas h1,

  149. #drupal-off-canvas .heading-a {

  150.   display: block;

  151.   font-size: 1.625em;

  152.   font-weight: bold;

  153.   line-height: 1.875em;

  154. }

  155. 

  156. #drupal-off-canvas h2,

  157. #drupal-off-canvas .heading-b {

  158.   display: block;

  159.   margin: 0.625rem 0;

  160.   font-size: 1.385em;

  161.   font-weight: bold;

  162. }

  163. 

  164. #drupal-off-canvas h3,

  165. #drupal-off-canvas .heading-c {

  166.   display: block;

  167.   margin: 0.625rem 0;

  168.   font-size: 1.231em;

  169.   font-weight: bold;

  170. }

  171. 

  172. #drupal-off-canvas h4,

  173. #drupal-off-canvas .heading-d {

  174.   display: block;

  175.   margin: 0.625rem 0;

  176.   font-size: 1.154em;

  177.   font-weight: bold;

  178. }

  179. 

  180. #drupal-off-canvas h5,

  181. #drupal-off-canvas .heading-e {

  182.   display: block;

  183.   margin: 0.625rem 0;

  184.   font-size: 1.077em;

  185.   font-weight: bold;

  186. }

  187. 

  188. #drupal-off-canvas h6,

  189. #drupal-off-canvas .heading-f {

  190.   display: block;

  191.   margin: 0.625rem 0;

  192.   font-size: 1.077em;

  193.   font-weight: bold;

  194. }

  195. 

  196. #drupal-off-canvas p {

  197.   margin: 1em 0;

  198. }

  199. 

  200. #drupal-off-canvas dl {

  201.   margin: 0 0 1.25rem;

  202. }

  203. 

  204. #drupal-off-canvas dl dd,

  205. #drupal-off-canvas dl dl {

  206.   margin-bottom: 0.625rem;

  207.   margin-left: 1.25rem; /* LTR */

  208. }

  209. 

  210. [dir="rtl"] #drupal-off-canvas dl dd,

  211. [dir="rtl"] #drupal-off-canvas dl dl {

  212.   margin-right: 1.25rem;

  213. }

  214. 

  215. #drupal-off-canvas blockquote {

  216.   margin: 1em 2.5rem;

  217. }

  218. 

  219. #drupal-off-canvas address {

  220.   font-style: italic;

  221. }

  222. 

  223. #drupal-off-canvas u,

  224. #drupal-off-canvas ins {

  225.   text-decoration: underline;

  226. }

  227. 

  228. #drupal-off-canvas s,

  229. #drupal-off-canvas strike,

  230. #drupal-off-canvas del {

  231.   text-decoration: line-through;

  232. }

  233. 

  234. #drupal-off-canvas big {

  235.   font-size: larger;

  236. }

  237. 

  238. #drupal-off-canvas small {

  239.   font-size: smaller;

  240. }

  241. 

  242. #drupal-off-canvas sub {

  243.   vertical-align: sub;

  244.   font-size: smaller;

  245.   line-height: normal;

  246. }

  247. 

  248. #drupal-off-canvas sup {

  249.   vertical-align: super;

  250.   font-size: smaller;

  251.   line-height: normal;

  252. }

  253. 

  254. #drupal-off-canvas abbr,

  255. #drupal-off-canvas acronym {

  256.   border-bottom: dotted 1px;

  257.   background: transparent;

  258. }

  259. 

  260. #drupal-off-canvas ul {

  261.   list-style-type: disc;

  262.   list-style-image: none;

  263. }

  264. 

  265. [dir="rtl"] #drupal-off-canvas .messages__list {

  266.   margin-right: 0;

  267. }

  268. 

  269. #drupal-off-canvas ol {

  270.   list-style-type: decimal;

  271. }

  272. 

  273. #drupal-off-canvas ul li,

  274. #drupal-off-canvas ol li {

  275.   display: block;

  276.   padding: 0.3125rem 0;

  277.   border-bottom: 1px solid #333;

  278. }

  279. 

  280. #drupal-off-canvas ul li:last-child,

  281. #drupal-off-canvas ol li:last-child {

  282.   padding-bottom: 0;

  283.   border-bottom: none;

  284. }

  285. 

  286. #drupal-off-canvas blockquote,

  287. #drupal-off-canvas code {

  288.   margin: 1.25rem 0;

  289. }

  290. 

  291. #drupal-off-canvas pre {

  292.   margin: 1.25rem 0;

  293.   white-space: pre-wrap;

  294. }

  295. 

  296. #drupal-off-canvas details {

  297.   display: block;

  298. }

  299. 

  300. #drupal-off-canvas summary {

  301.   display: list-item;

  302. }

  303. 

  304. #drupal-off-canvas select::-ms-expand {

  305.   display: block;

  306. }

  307. 

  308. /* Classes for hidden and visually hidden elements. See hidden.module.css. */

  309. 

  310. #drupal-off-canvas .hidden {

  311.   display: none;

  312. }

  313. 

  314. #drupal-off-canvas .visually-hidden {

  315.   position: absolute !important;

  316. }

  317. 

  318. #drupal-off-canvas .visually-hidden {

  319.   overflow: hidden;

  320.   clip: rect(1px, 1px, 1px, 1px);

  321.   width: 1px;

  322.   height: 1px;

  323.   word-wrap: normal;

  324. }

  325. 

  326. #drupal-off-canvas .visually-hidden.focusable:active,

  327. #drupal-off-canvas .visually-hidden.focusable:focus {

  328.   position: static !important;

  329. }

  330. 

  331. #drupal-off-canvas .visually-hidden.focusable:active,

  332. #drupal-off-canvas .visually-hidden.focusable:focus {

  333.   overflow: visible;

  334.   clip: auto;

  335.   width: auto;

  336.   height: auto;

  337. }

  338. 

  339. #drupal-off-canvas .invisible {

  340.   visibility: hidden;

  341. }

  342. 

  343. /* Some system classes. See system.admin.css. */

  344. 

  345. #drupal-off-canvas .panel {

  346.   padding: 0.3125rem 0.3125rem 0.9375rem;

  347. }

  348. 

  349. #drupal-off-canvas .panel__description {

  350.   margin: 0 0 0.1875rem;

  351.   padding: 2px 0 0.1875rem 0;

  352. }

  353. 

  354. #drupal-off-canvas .compact-link {

  355.   margin: 0 0 0.625rem 0;

  356. }

  357. 

  358. #drupal-off-canvas small .admin-link:before {

  359.   content: " [";

  360. }

  361. 

  362. #drupal-off-canvas small .admin-link:after {

  363.   content: "]";

  364. }

  365. 

  366. /* Override jQuery UI */

  367. 

  368. #drupal-off-canvas .ui-widget-content a {

  369.   color: #85bef4 !important;

  370. }

  371. 

  372. /* Message styles */

  373. 

  374. #drupal-off-canvas .messages {

  375.   background: no-repeat 0.625rem 1.0625rem;

  376. }

  377. 

  378. [dir="rtl"] #drupal-off-canvas .messages {

  379.   background-position: right 10px top 17px;

  380. }

  381. 

  382. #drupal-off-canvas .messages abbr {

  383.   color: #444;

  384. }

  385. 

  386. #drupal-off-canvas .messages--status {

  387.   color: #325e1c;

  388.   background-color: #f3faef;

  389.   background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%2373b355'%3e%3cpath d='M6.464 13.676c-.194.194-.513.194-.707 0l-4.96-4.955c-.194-.193-.194-.513 0-.707l1.405-1.407c.194-.195.512-.195.707 0l2.849 2.848c.194.193.513.193.707 0l6.629-6.626c.195-.194.514-.194.707 0l1.404 1.404c.193.194.193.513 0 .707l-8.741 8.736z'/%3e%3c/svg%3e");

  390. }

  391. 

  392. #drupal-off-canvas .messages--warning {

  393.   color: #734c00;

  394.   background-color: #fdf8ed;

  395.   background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23e29700'%3e%3cpath d='M14.66 12.316l-5.316-10.633c-.738-1.476-1.946-1.476-2.685 0l-5.317 10.633c-.738 1.477.008 2.684 1.658 2.684h10.002c1.65 0 2.396-1.207 1.658-2.684zm-7.66-8.316h2.002v5h-2.002v-5zm2.252 8.615c0 .344-.281.625-.625.625h-1.25c-.345 0-.626-.281-.626-.625v-1.239c0-.344.281-.625.626-.625h1.25c.344 0 .625.281.625.625v1.239z'/%3e%3c/svg%3e");

  396. }

  397. 

  398. #drupal-off-canvas .messages--error {

  399.   color: #a51b00;

  400.   background-color: #fcf4f2;

  401.   background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23e32700'%3e%3cpath d='M8.002 1c-3.868 0-7.002 3.134-7.002 7s3.134 7 7.002 7c3.865 0 7-3.134 7-7s-3.135-7-7-7zm4.025 9.284c.062.063.1.149.1.239 0 .091-.037.177-.1.24l-1.262 1.262c-.064.062-.15.1-.24.1s-.176-.036-.24-.1l-2.283-2.283-2.286 2.283c-.064.062-.15.1-.24.1s-.176-.036-.24-.1l-1.261-1.262c-.063-.062-.1-.148-.1-.24 0-.088.036-.176.1-.238l2.283-2.285-2.283-2.284c-.063-.064-.1-.15-.1-.24s.036-.176.1-.24l1.262-1.262c.063-.063.149-.1.24-.1.089 0 .176.036.24.1l2.285 2.284 2.283-2.284c.064-.063.15-.1.24-.1s.176.036.24.1l1.262 1.262c.062.063.1.149.1.24 0 .089-.037.176-.1.24l-2.283 2.284 2.283 2.284z'/%3e%3c/svg%3e");

  402. }

  403. 

  404. #drupal-off-canvas .messages--error div[role="alert"] {

  405.   color: inherit;

  406.   background: transparent;

  407. }

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