off-canvas.reset.pcss.css

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

Reset most HTML elements styles for the off-canvas dialog.

This is a generic reset. Drupal-specific classes are reset in components.

File

core/themes/stable/css/core/dialog/off-canvas.reset.pcss.css

View source
  1. /**
  2. * @file
  3. * Reset most HTML elements styles for the off-canvas dialog.
  4. *
  5. * This is a generic reset. Drupal-specific classes are reset in components.
  6. */
  7. /**
  8. * All HTML elements that could be used in off-canvas except div, bdo, bdi,
  9. * data, svg, map and math.
  10. *
  11. * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element
  12. */
  13. #drupal-off-canvas {
  14. & span,
  15. & applet,
  16. & object,
  17. & iframe,
  18. & h1,
  19. & h2,
  20. & h3,
  21. & h4,
  22. & h5,
  23. & h6,
  24. & p,
  25. & blockquote,
  26. & pre,
  27. & a,
  28. & abbr,
  29. & acronym,
  30. & address,
  31. & big,
  32. & button,
  33. & cite,
  34. & code,
  35. & del,
  36. & dfn,
  37. & em,
  38. & img,
  39. & ins,
  40. & kbd,
  41. & q,
  42. & s,
  43. & samp,
  44. & small,
  45. & strike,
  46. & strong,
  47. & sub,
  48. & sup,
  49. & tt,
  50. & var,
  51. & b,
  52. & u,
  53. & i,
  54. & center,
  55. & dl,
  56. & dt,
  57. & dd,
  58. & ol,
  59. & ul,
  60. & li,
  61. & fieldset,
  62. & form,
  63. & label,
  64. & legend,
  65. & table,
  66. & caption,
  67. & tbody,
  68. & tfoot,
  69. & thead,
  70. & tr,
  71. & th,
  72. & td,
  73. & article,
  74. & aside,
  75. & canvas,
  76. & details,
  77. & embed,
  78. & figure,
  79. & figcaption,
  80. & footer,
  81. & header,
  82. & hgroup,
  83. & main,
  84. & menu,
  85. & meter,
  86. & nav,
  87. & output,
  88. & progress,
  89. & ruby,
  90. & section,
  91. & summary,
  92. & time,
  93. & mark,
  94. & audio,
  95. & video,
  96. & input,
  97. & select,
  98. & textarea {
  99. all: initial;
  100. box-sizing: border-box;
  101. text-shadow: none;
  102. -webkit-font-smoothing: antialiased;
  103. -webkit-tap-highlight-color: initial;
  104. &:after,
  105. &:before {
  106. all: initial;
  107. box-sizing: border-box;
  108. text-shadow: none;
  109. -webkit-font-smoothing: antialiased;
  110. -webkit-tap-highlight-color: initial;
  111. }
  112. }
  113. }
  114. /* Reset size and position on elements. */
  115. #drupal-off-canvas a,
  116. #drupal-off-canvas abbr,
  117. #drupal-off-canvas acronym,
  118. #drupal-off-canvas address,
  119. #drupal-off-canvas applet,
  120. #drupal-off-canvas article,
  121. #drupal-off-canvas aside,
  122. #drupal-off-canvas audio,
  123. #drupal-off-canvas b,
  124. #drupal-off-canvas big,
  125. #drupal-off-canvas blockquote,
  126. #drupal-off-canvas body,
  127. #drupal-off-canvas canvas,
  128. #drupal-off-canvas caption,
  129. #drupal-off-canvas cite,
  130. #drupal-off-canvas code,
  131. #drupal-off-canvas dd,
  132. #drupal-off-canvas del,
  133. #drupal-off-canvas dfn,
  134. #drupal-off-canvas dialog,
  135. #drupal-off-canvas dl,
  136. #drupal-off-canvas dt,
  137. #drupal-off-canvas em,
  138. #drupal-off-canvas embed,
  139. #drupal-off-canvas fieldset,
  140. #drupal-off-canvas figcaption,
  141. #drupal-off-canvas figure,
  142. #drupal-off-canvas footer,
  143. #drupal-off-canvas form,
  144. #drupal-off-canvas h1,
  145. #drupal-off-canvas h2,
  146. #drupal-off-canvas h3,
  147. #drupal-off-canvas h4,
  148. #drupal-off-canvas h5,
  149. #drupal-off-canvas h6,
  150. #drupal-off-canvas header,
  151. #drupal-off-canvas hgroup,
  152. #drupal-off-canvas hr,
  153. #drupal-off-canvas html,
  154. #drupal-off-canvas i,
  155. #drupal-off-canvas iframe,
  156. #drupal-off-canvas img,
  157. #drupal-off-canvas ins,
  158. #drupal-off-canvas kbd,
  159. #drupal-off-canvas label,
  160. #drupal-off-canvas legend,
  161. #drupal-off-canvas li,
  162. #drupal-off-canvas main,
  163. #drupal-off-canvas mark,
  164. #drupal-off-canvas menu,
  165. #drupal-off-canvas meter,
  166. #drupal-off-canvas nav,
  167. #drupal-off-canvas object,
  168. #drupal-off-canvas ol,
  169. #drupal-off-canvas output,
  170. #drupal-off-canvas p,
  171. #drupal-off-canvas pre,
  172. #drupal-off-canvas progress,
  173. #drupal-off-canvas q,
  174. #drupal-off-canvas rp,
  175. #drupal-off-canvas rt,
  176. #drupal-off-canvas s,
  177. #drupal-off-canvas samp,
  178. #drupal-off-canvas section,
  179. #drupal-off-canvas small,
  180. #drupal-off-canvas span,
  181. #drupal-off-canvas strike,
  182. #drupal-off-canvas strong,
  183. #drupal-off-canvas sub,
  184. #drupal-off-canvas sup,
  185. #drupal-off-canvas table,
  186. #drupal-off-canvas tbody,
  187. #drupal-off-canvas td,
  188. #drupal-off-canvas tfoot,
  189. #drupal-off-canvas th,
  190. #drupal-off-canvas thead,
  191. #drupal-off-canvas time,
  192. #drupal-off-canvas tr,
  193. #drupal-off-canvas tt,
  194. #drupal-off-canvas u,
  195. #drupal-off-canvas ul,
  196. #drupal-off-canvas var,
  197. #drupal-off-canvas video,
  198. #drupal-off-canvas xmp {
  199. margin: 0;
  200. padding: 0;
  201. border: 0;
  202. font-size: 100%;
  203. }
  204. /*
  205. * Override the default (display: inline) for browsers that do not recognize HTML5 tags.
  206. * IE8 (and lower) requires a shiv: http://ejohn.org/blog/html5-shiv
  207. */
  208. #drupal-off-canvas article,
  209. #drupal-off-canvas aside,
  210. #drupal-off-canvas figcaption,
  211. #drupal-off-canvas figure,
  212. #drupal-off-canvas footer,
  213. #drupal-off-canvas header,
  214. #drupal-off-canvas hgroup,
  215. #drupal-off-canvas main,
  216. #drupal-off-canvas menu,
  217. #drupal-off-canvas nav,
  218. #drupal-off-canvas section {
  219. display: block;
  220. border-radius: 0;
  221. line-height: normal;
  222. }
  223. /*
  224. * Makes browsers agree.
  225. * IE + Opera = font-weight: bold.
  226. * Gecko + WebKit = font-weight: bolder.
  227. */
  228. #drupal-off-canvas b,
  229. #drupal-off-canvas strong {
  230. font-weight: bold;
  231. }
  232. #drupal-off-canvas em,
  233. #drupal-off-canvas i {
  234. font-style: italic;
  235. }
  236. #drupal-off-canvas img {
  237. vertical-align: middle;
  238. color: transparent;
  239. font-size: 0;
  240. }
  241. #drupal-off-canvas ul,
  242. #drupal-off-canvas ol {
  243. list-style: none;
  244. }
  245. /* reset table styling. */
  246. #drupal-off-canvas table {
  247. border-spacing: 0;
  248. border-collapse: collapse;
  249. }
  250. #drupal-off-canvas table thead,
  251. #drupal-off-canvas table tbody,
  252. #drupal-off-canvas table tbody tr:nth-child(even),
  253. #drupal-off-canvas table tbody tr:nth-child(odd),
  254. #drupal-off-canvas table tfoot {
  255. border: 0;
  256. background: transparent none;
  257. }
  258. #drupal-off-canvas th,
  259. #drupal-off-canvas td,
  260. #drupal-off-canvas caption {
  261. font-weight: normal;
  262. }
  263. #drupal-off-canvas q {
  264. quotes: none;
  265. }
  266. #drupal-off-canvas q:before,
  267. #drupal-off-canvas q:after {
  268. content: none;
  269. }
  270. #drupal-off-canvas sub,
  271. #drupal-off-canvas sup,
  272. #drupal-off-canvas small {
  273. font-size: 75%;
  274. }
  275. #drupal-off-canvas sub,
  276. #drupal-off-canvas sup {
  277. position: relative;
  278. vertical-align: baseline;
  279. line-height: 0;
  280. }
  281. #drupal-off-canvas sub {
  282. bottom: -0.25em;
  283. }
  284. #drupal-off-canvas sup {
  285. top: -0.5em;
  286. }
  287. /*
  288. * For IE9. Without, occasionally draws shapes
  289. * outside the boundaries of rectangle.
  290. */
  291. #drupal-off-canvas svg {
  292. overflow: hidden;
  293. }
  294. /* Specific resets for inputs. */
  295. #drupal-off-canvas input[type="search"]::-webkit-search-decoration {
  296. display: none;
  297. }
  298. #drupal-off-canvas input {
  299. margin: 0;
  300. padding: 0;
  301. }
  302. #drupal-off-canvas input[type="checkbox"],
  303. #drupal-off-canvas input[type="radio"] {
  304. position: static;
  305. margin: 0;
  306. }
  307. #drupal-off-canvas input:invalid,
  308. #drupal-off-canvas button:invalid,
  309. #drupal-off-canvas select:invalid,
  310. #drupal-off-canvas textarea:invalid,
  311. #drupal-off-canvas input:focus,
  312. #drupal-off-canvas button:focus,
  313. #drupal-off-canvas select:focus,
  314. #drupal-off-canvas textarea:focus,
  315. #drupal-off-canvas input[type="file"]:focus,
  316. #drupal-off-canvas input[type="file"]:active,
  317. #drupal-off-canvas input[type="radio"]:focus,
  318. #drupal-off-canvas input[type="radio"]:active,
  319. #drupal-off-canvas input[type="checkbox"]:focus,
  320. #drupal-off-canvas input[type="checkbox"]:active {
  321. z-index: 1;
  322. box-shadow: none;
  323. }
  324. #drupal-off-canvas input[role="button"] {
  325. cursor: pointer;
  326. }
  327. #drupal-off-canvas button,
  328. #drupal-off-canvas input[type="reset"],
  329. #drupal-off-canvas input[type="submit"],
  330. #drupal-off-canvas input[type="button"] {
  331. display: inline-block;
  332. overflow: visible;
  333. cursor: pointer;
  334. vertical-align: middle;
  335. text-decoration: none;
  336. border: 0;
  337. outline: 0;
  338. background-image: none;
  339. text-shadow: none;
  340. -webkit-appearance: none;
  341. -moz-appearance: none;
  342. }
  343. #drupal-off-canvas button:hover,
  344. #drupal-off-canvas input[type="reset"]:hover,
  345. #drupal-off-canvas input[type="submit"]:hover,
  346. #drupal-off-canvas input[type="button"]:hover {
  347. text-decoration: none;
  348. background-image: none;
  349. }
  350. #drupal-off-canvas button:active,
  351. #drupal-off-canvas input[type="reset"]:active,
  352. #drupal-off-canvas input[type="submit"]:active,
  353. #drupal-off-canvas input[type="button"]:active {
  354. border-color: grey;
  355. background-image: none;
  356. box-shadow: none;
  357. }
  358. #drupal-off-canvas button::-moz-focus-inner,
  359. #drupal-off-canvas input[type="reset"]::-moz-focus-inner,
  360. #drupal-off-canvas input[type="submit"]::-moz-focus-inner,
  361. #drupal-off-canvas input[type="button"]::-moz-focus-inner {
  362. padding: 0;
  363. border: 0;
  364. }
  365. #drupal-off-canvas textarea,
  366. #drupal-off-canvas select,
  367. #drupal-off-canvas input[type="date"],
  368. #drupal-off-canvas input[type="datetime"],
  369. #drupal-off-canvas input[type="datetime-local"],
  370. #drupal-off-canvas input[type="email"],
  371. #drupal-off-canvas input[type="month"],
  372. #drupal-off-canvas input[type="number"],
  373. #drupal-off-canvas input[type="password"],
  374. #drupal-off-canvas input[type="search"],
  375. #drupal-off-canvas input[type="tel"],
  376. #drupal-off-canvas input[type="text"],
  377. #drupal-off-canvas input[type="time"],
  378. #drupal-off-canvas input[type="url"],
  379. #drupal-off-canvas input[type="week"] {
  380. height: auto;
  381. vertical-align: middle;
  382. border-radius: 0;
  383. }
  384. #drupal-off-canvas textarea[disabled],
  385. #drupal-off-canvas select[disabled],
  386. #drupal-off-canvas input[type="date"][disabled],
  387. #drupal-off-canvas input[type="datetime"][disabled],
  388. #drupal-off-canvas input[type="datetime-local"][disabled],
  389. #drupal-off-canvas input[type="email"][disabled],
  390. #drupal-off-canvas input[type="month"][disabled],
  391. #drupal-off-canvas input[type="number"][disabled],
  392. #drupal-off-canvas input[type="password"][disabled],
  393. #drupal-off-canvas input[type="search"][disabled],
  394. #drupal-off-canvas input[type="tel"][disabled],
  395. #drupal-off-canvas input[type="text"][disabled],
  396. #drupal-off-canvas input[type="time"][disabled],
  397. #drupal-off-canvas input[type="url"][disabled],
  398. #drupal-off-canvas input[type="week"][disabled] {
  399. background-color: grey;
  400. }
  401. #drupal-off-canvas input[type="hidden"] {
  402. visibility: hidden;
  403. }
  404. #drupal-off-canvas button[disabled],
  405. #drupal-off-canvas input[disabled],
  406. #drupal-off-canvas select[disabled],
  407. #drupal-off-canvas select[disabled] option,
  408. #drupal-off-canvas select[disabled] optgroup,
  409. #drupal-off-canvas textarea[disabled] {
  410. cursor: default;
  411. -webkit-user-select: none;
  412. -moz-user-select: none;
  413. -ms-user-select: none;
  414. user-select: none;
  415. box-shadow: none;
  416. }
  417. #drupal-off-canvas input:placeholder,
  418. #drupal-off-canvas textarea:placeholder {
  419. color: grey;
  420. }
  421. #drupal-off-canvas textarea,
  422. #drupal-off-canvas select[size],
  423. #drupal-off-canvas select[multiple] {
  424. height: auto;
  425. }
  426. #drupal-off-canvas select[size="0"],
  427. #drupal-off-canvas select[size="1"] {
  428. height: auto;
  429. }
  430. #drupal-off-canvas textarea {
  431. overflow: auto;
  432. width: 100%;
  433. min-height: 40px;
  434. resize: vertical;
  435. }
  436. #drupal-off-canvas optgroup {
  437. color: black;
  438. font-weight: normal;
  439. font-style: normal;
  440. }
  441. #drupal-off-canvas optgroup::-moz-focus-inner {
  442. padding: 0;
  443. border: 0;
  444. }
  445. #drupal-off-canvas * button {
  446. overflow: visible;
  447. width: auto;
  448. padding: 0;
  449. vertical-align: middle;
  450. text-decoration: none;
  451. color: black;
  452. border: 1px solid grey;
  453. background: none;
  454. }
  455. #drupal-off-canvas * textarea,
  456. #drupal-off-canvas * select,
  457. #drupal-off-canvas *:not(div) textarea,
  458. #drupal-off-canvas *:not(div) select {
  459. padding: 0;
  460. vertical-align: top;
  461. color: black;
  462. border: 1px solid grey;
  463. background: white;
  464. }
  465. /* To standardize off-canvas selection color. */
  466. #drupal-off-canvas ::-moz-selection,
  467. #drupal-off-canvas ::selection {
  468. color: inherit;
  469. background-color: rgba(175, 175, 175, 0.5);
  470. }

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