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. /**

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

  10.  * data, svg, map and math.

  11.  *

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

  13.  */

  14. #drupal-off-canvas {

  15.   & span,

  16.   & applet,

  17.   & object,

  18.   & iframe,

  19.   & h1,

  20.   & h2,

  21.   & h3,

  22.   & h4,

  23.   & h5,

  24.   & h6,

  25.   & p,

  26.   & blockquote,

  27.   & pre,

  28.   & a,

  29.   & abbr,

  30.   & acronym,

  31.   & address,

  32.   & big,

  33.   & button,

  34.   & cite,

  35.   & code,

  36.   & del,

  37.   & dfn,

  38.   & em,

  39.   & img,

  40.   & ins,

  41.   & kbd,

  42.   & q,

  43.   & s,

  44.   & samp,

  45.   & small,

  46.   & strike,

  47.   & strong,

  48.   & sub,

  49.   & sup,

  50.   & tt,

  51.   & var,

  52.   & b,

  53.   & u,

  54.   & i,

  55.   & center,

  56.   & dl,

  57.   & dt,

  58.   & dd,

  59.   & ol,

  60.   & ul,

  61.   & li,

  62.   & fieldset,

  63.   & form,

  64.   & label,

  65.   & legend,

  66.   & table,

  67.   & caption,

  68.   & tbody,

  69.   & tfoot,

  70.   & thead,

  71.   & tr,

  72.   & th,

  73.   & td,

  74.   & article,

  75.   & aside,

  76.   & canvas,

  77.   & details,

  78.   & embed,

  79.   & figure,

  80.   & figcaption,

  81.   & footer,

  82.   & header,

  83.   & hgroup,

  84.   & main,

  85.   & menu,

  86.   & meter,

  87.   & nav,

  88.   & output,

  89.   & progress,

  90.   & ruby,

  91.   & section,

  92.   & summary,

  93.   & time,

  94.   & mark,

  95.   & audio,

  96.   & video,

  97.   & input,

  98.   & select,

  99.   & textarea {

  100.     all: initial;

  101.     box-sizing: border-box;

  102.     text-shadow: none;

  103.     -webkit-font-smoothing: antialiased;

  104.     -webkit-tap-highlight-color: initial;

  105. 

  106.     &:after,

  107.     &:before {

  108.       all: initial;

  109.       box-sizing: border-box;

  110.       text-shadow: none;

  111.       -webkit-font-smoothing: antialiased;

  112.       -webkit-tap-highlight-color: initial;

  113.     }

  114.   }

  115. }

  116. 

  117. /* Reset size and position on elements. */

  118. #drupal-off-canvas a,

  119. #drupal-off-canvas abbr,

  120. #drupal-off-canvas acronym,

  121. #drupal-off-canvas address,

  122. #drupal-off-canvas applet,

  123. #drupal-off-canvas article,

  124. #drupal-off-canvas aside,

  125. #drupal-off-canvas audio,

  126. #drupal-off-canvas b,

  127. #drupal-off-canvas big,

  128. #drupal-off-canvas blockquote,

  129. #drupal-off-canvas body,

  130. #drupal-off-canvas canvas,

  131. #drupal-off-canvas caption,

  132. #drupal-off-canvas cite,

  133. #drupal-off-canvas code,

  134. #drupal-off-canvas dd,

  135. #drupal-off-canvas del,

  136. #drupal-off-canvas dfn,

  137. #drupal-off-canvas dialog,

  138. #drupal-off-canvas dl,

  139. #drupal-off-canvas dt,

  140. #drupal-off-canvas em,

  141. #drupal-off-canvas embed,

  142. #drupal-off-canvas fieldset,

  143. #drupal-off-canvas figcaption,

  144. #drupal-off-canvas figure,

  145. #drupal-off-canvas footer,

  146. #drupal-off-canvas form,

  147. #drupal-off-canvas h1,

  148. #drupal-off-canvas h2,

  149. #drupal-off-canvas h3,

  150. #drupal-off-canvas h4,

  151. #drupal-off-canvas h5,

  152. #drupal-off-canvas h6,

  153. #drupal-off-canvas header,

  154. #drupal-off-canvas hgroup,

  155. #drupal-off-canvas hr,

  156. #drupal-off-canvas html,

  157. #drupal-off-canvas i,

  158. #drupal-off-canvas iframe,

  159. #drupal-off-canvas img,

  160. #drupal-off-canvas ins,

  161. #drupal-off-canvas kbd,

  162. #drupal-off-canvas label,

  163. #drupal-off-canvas legend,

  164. #drupal-off-canvas li,

  165. #drupal-off-canvas main,

  166. #drupal-off-canvas mark,

  167. #drupal-off-canvas menu,

  168. #drupal-off-canvas meter,

  169. #drupal-off-canvas nav,

  170. #drupal-off-canvas object,

  171. #drupal-off-canvas ol,

  172. #drupal-off-canvas output,

  173. #drupal-off-canvas p,

  174. #drupal-off-canvas pre,

  175. #drupal-off-canvas progress,

  176. #drupal-off-canvas q,

  177. #drupal-off-canvas rp,

  178. #drupal-off-canvas rt,

  179. #drupal-off-canvas s,

  180. #drupal-off-canvas samp,

  181. #drupal-off-canvas section,

  182. #drupal-off-canvas small,

  183. #drupal-off-canvas span,

  184. #drupal-off-canvas strike,

  185. #drupal-off-canvas strong,

  186. #drupal-off-canvas sub,

  187. #drupal-off-canvas sup,

  188. #drupal-off-canvas table,

  189. #drupal-off-canvas tbody,

  190. #drupal-off-canvas td,

  191. #drupal-off-canvas tfoot,

  192. #drupal-off-canvas th,

  193. #drupal-off-canvas thead,

  194. #drupal-off-canvas time,

  195. #drupal-off-canvas tr,

  196. #drupal-off-canvas tt,

  197. #drupal-off-canvas u,

  198. #drupal-off-canvas ul,

  199. #drupal-off-canvas var,

  200. #drupal-off-canvas video,

  201. #drupal-off-canvas xmp {

  202.   margin: 0;

  203.   padding: 0;

  204.   border: 0;

  205.   font-size: 100%;

  206. }

  207. 

  208. /*

  209.  * Override the default (display: inline) for browsers that do not recognize HTML5 tags.

  210.  * IE8 (and lower) requires a shiv: http://ejohn.org/blog/html5-shiv

  211.  */

  212. #drupal-off-canvas article,

  213. #drupal-off-canvas aside,

  214. #drupal-off-canvas figcaption,

  215. #drupal-off-canvas figure,

  216. #drupal-off-canvas footer,

  217. #drupal-off-canvas header,

  218. #drupal-off-canvas hgroup,

  219. #drupal-off-canvas main,

  220. #drupal-off-canvas menu,

  221. #drupal-off-canvas nav,

  222. #drupal-off-canvas section {

  223.   display: block;

  224.   border-radius: 0;

  225.   line-height: normal;

  226. }

  227. 

  228. /*

  229.  * Makes browsers agree.

  230.  * IE + Opera = font-weight: bold.

  231.  * Gecko + WebKit = font-weight: bolder.

  232.  */

  233. #drupal-off-canvas b,

  234. #drupal-off-canvas strong {

  235.   font-weight: bold;

  236. }

  237. 

  238. #drupal-off-canvas em,

  239. #drupal-off-canvas i {

  240.   font-style: italic;

  241. }

  242. 

  243. #drupal-off-canvas img {

  244.   vertical-align: middle;

  245.   color: transparent;

  246.   font-size: 0;

  247. }

  248. 

  249. #drupal-off-canvas ul,

  250. #drupal-off-canvas ol {

  251.   list-style: none;

  252. }

  253. 

  254. /* reset table styling. */

  255. #drupal-off-canvas table {

  256.   border-spacing: 0;

  257.   border-collapse: collapse;

  258. }

  259. #drupal-off-canvas table thead,

  260. #drupal-off-canvas table tbody,

  261. #drupal-off-canvas table tbody tr:nth-child(even),

  262. #drupal-off-canvas table tbody tr:nth-child(odd),

  263. #drupal-off-canvas table tfoot {

  264.   border: 0;

  265.   background: transparent none;

  266. }

  267. #drupal-off-canvas th,

  268. #drupal-off-canvas td,

  269. #drupal-off-canvas caption {

  270.   font-weight: normal;

  271. }

  272. #drupal-off-canvas q {

  273.   quotes: none;

  274. }

  275. #drupal-off-canvas q:before,

  276. #drupal-off-canvas q:after {

  277.   content: none;

  278. }

  279. #drupal-off-canvas sub,

  280. #drupal-off-canvas sup,

  281. #drupal-off-canvas small {

  282.   font-size: 75%;

  283. }

  284. #drupal-off-canvas sub,

  285. #drupal-off-canvas sup {

  286.   position: relative;

  287.   vertical-align: baseline;

  288.   line-height: 0;

  289. }

  290. #drupal-off-canvas sub {

  291.   bottom: -0.25em;

  292. }

  293. #drupal-off-canvas sup {

  294.   top: -0.5em;

  295. }

  296. 

  297. /*

  298.  * For IE9. Without, occasionally draws shapes

  299.  * outside the boundaries of  rectangle.

  300.  */

  301. #drupal-off-canvas svg {

  302.   overflow: hidden;

  303. }

  304. 

  305. /* Specific resets for inputs. */

  306. #drupal-off-canvas input[type="search"]::-webkit-search-decoration {

  307.   display: none;

  308. }

  309. #drupal-off-canvas input {

  310.   margin: 0;

  311.   padding: 0;

  312. }

  313. #drupal-off-canvas input[type="checkbox"],

  314. #drupal-off-canvas input[type="radio"] {

  315.   position: static;

  316.   margin: 0;

  317. }

  318. #drupal-off-canvas input:invalid,

  319. #drupal-off-canvas button:invalid,

  320. #drupal-off-canvas select:invalid,

  321. #drupal-off-canvas textarea:invalid,

  322. #drupal-off-canvas input:focus,

  323. #drupal-off-canvas button:focus,

  324. #drupal-off-canvas select:focus,

  325. #drupal-off-canvas textarea:focus,

  326. #drupal-off-canvas input[type="file"]:focus,

  327. #drupal-off-canvas input[type="file"]:active,

  328. #drupal-off-canvas input[type="radio"]:focus,

  329. #drupal-off-canvas input[type="radio"]:active,

  330. #drupal-off-canvas input[type="checkbox"]:focus,

  331. #drupal-off-canvas input[type="checkbox"]:active {

  332.   z-index: 1;

  333.   box-shadow: none;

  334. }

  335. #drupal-off-canvas input[role="button"] {

  336.   cursor: pointer;

  337. }

  338. #drupal-off-canvas button,

  339. #drupal-off-canvas input[type="reset"],

  340. #drupal-off-canvas input[type="submit"],

  341. #drupal-off-canvas input[type="button"] {

  342.   display: inline-block;

  343.   overflow: visible;

  344.   cursor: pointer;

  345.   vertical-align: middle;

  346.   text-decoration: none;

  347.   border: 0;

  348.   outline: 0;

  349.   background-image: none;

  350.   text-shadow: none;

  351.   -webkit-appearance: none;

  352.   -moz-appearance: none;

  353. }

  354. #drupal-off-canvas button:hover,

  355. #drupal-off-canvas input[type="reset"]:hover,

  356. #drupal-off-canvas input[type="submit"]:hover,

  357. #drupal-off-canvas input[type="button"]:hover {

  358.   text-decoration: none;

  359.   background-image: none;

  360. }

  361. #drupal-off-canvas button:active,

  362. #drupal-off-canvas input[type="reset"]:active,

  363. #drupal-off-canvas input[type="submit"]:active,

  364. #drupal-off-canvas input[type="button"]:active {

  365.   border-color: grey;

  366.   background-image: none;

  367.   box-shadow: none;

  368. }

  369. #drupal-off-canvas button::-moz-focus-inner,

  370. #drupal-off-canvas input[type="reset"]::-moz-focus-inner,

  371. #drupal-off-canvas input[type="submit"]::-moz-focus-inner,

  372. #drupal-off-canvas input[type="button"]::-moz-focus-inner {

  373.   padding: 0;

  374.   border: 0;

  375. }

  376. #drupal-off-canvas textarea,

  377. #drupal-off-canvas select,

  378. #drupal-off-canvas input[type="date"],

  379. #drupal-off-canvas input[type="datetime"],

  380. #drupal-off-canvas input[type="datetime-local"],

  381. #drupal-off-canvas input[type="email"],

  382. #drupal-off-canvas input[type="month"],

  383. #drupal-off-canvas input[type="number"],

  384. #drupal-off-canvas input[type="password"],

  385. #drupal-off-canvas input[type="search"],

  386. #drupal-off-canvas input[type="tel"],

  387. #drupal-off-canvas input[type="text"],

  388. #drupal-off-canvas input[type="time"],

  389. #drupal-off-canvas input[type="url"],

  390. #drupal-off-canvas input[type="week"] {

  391.   height: auto;

  392.   vertical-align: middle;

  393.   border-radius: 0;

  394. }

  395. #drupal-off-canvas textarea[disabled],

  396. #drupal-off-canvas select[disabled],

  397. #drupal-off-canvas input[type="date"][disabled],

  398. #drupal-off-canvas input[type="datetime"][disabled],

  399. #drupal-off-canvas input[type="datetime-local"][disabled],

  400. #drupal-off-canvas input[type="email"][disabled],

  401. #drupal-off-canvas input[type="month"][disabled],

  402. #drupal-off-canvas input[type="number"][disabled],

  403. #drupal-off-canvas input[type="password"][disabled],

  404. #drupal-off-canvas input[type="search"][disabled],

  405. #drupal-off-canvas input[type="tel"][disabled],

  406. #drupal-off-canvas input[type="text"][disabled],

  407. #drupal-off-canvas input[type="time"][disabled],

  408. #drupal-off-canvas input[type="url"][disabled],

  409. #drupal-off-canvas input[type="week"][disabled] {

  410.   background-color: grey;

  411. }

  412. #drupal-off-canvas input[type="hidden"] {

  413.   visibility: hidden;

  414. }

  415. #drupal-off-canvas button[disabled],

  416. #drupal-off-canvas input[disabled],

  417. #drupal-off-canvas select[disabled],

  418. #drupal-off-canvas select[disabled] option,

  419. #drupal-off-canvas select[disabled] optgroup,

  420. #drupal-off-canvas textarea[disabled] {

  421.   cursor: default;

  422.   -webkit-user-select: none;

  423.   -moz-user-select: none;

  424.   -ms-user-select: none;

  425.   user-select: none;

  426.   box-shadow: none;

  427. }

  428. #drupal-off-canvas input:placeholder,

  429. #drupal-off-canvas textarea:placeholder {

  430.   color: grey;

  431. }

  432. #drupal-off-canvas textarea,

  433. #drupal-off-canvas select[size],

  434. #drupal-off-canvas select[multiple] {

  435.   height: auto;

  436. }

  437. #drupal-off-canvas select[size="0"],

  438. #drupal-off-canvas select[size="1"] {

  439.   height: auto;

  440. }

  441. #drupal-off-canvas textarea {

  442.   overflow: auto;

  443.   width: 100%;

  444.   min-height: 40px;

  445.   resize: vertical;

  446. }

  447. #drupal-off-canvas optgroup {

  448.   color: black;

  449.   font-weight: normal;

  450.   font-style: normal;

  451. }

  452. #drupal-off-canvas optgroup::-moz-focus-inner {

  453.   padding: 0;

  454.   border: 0;

  455. }

  456. #drupal-off-canvas * button {

  457.   overflow: visible;

  458.   width: auto;

  459.   padding: 0;

  460.   vertical-align: middle;

  461.   text-decoration: none;

  462.   color: black;

  463.   border: 1px solid grey;

  464.   background: none;

  465. }

  466. #drupal-off-canvas * textarea,

  467. #drupal-off-canvas * select,

  468. #drupal-off-canvas *:not(div) textarea,

  469. #drupal-off-canvas *:not(div) select {

  470.   padding: 0;

  471.   vertical-align: top;

  472.   color: black;

  473.   border: 1px solid grey;

  474.   background: white;

  475. }

  476. 

  477. /* To standardize off-canvas selection color. */

  478. #drupal-off-canvas ::-moz-selection,

  479. #drupal-off-canvas ::selection {

  480.   color: inherit;

  481.   background-color: rgba(175, 175, 175, 0.5);

  482. }

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