off-canvas.reset.css

Same filename in this branch
  1. 8.9.x core/misc/dialog/off-canvas.reset.css
Same filename in other branches
  1. 9 core/misc/dialog/off-canvas.reset.css
  2. 9 core/themes/stable9/css/core/dialog/off-canvas.reset.css
  3. 9 core/themes/stable/css/core/dialog/off-canvas.reset.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.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. /**

  9.  * @file

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

  11.  *

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

  13.  */

  14. 

  15. /**

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

  17.  * data, svg, map and math.

  18.  *

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

  20.  */

  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.     all: initial;

  109.     box-sizing: border-box;

  110.     text-shadow: none;

  111.     -webkit-font-smoothing: antialiased;

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

  113. 

  114.     &:after,

  115.     &:before {

  116.       all: initial;

  117.       box-sizing: border-box;

  118.       text-shadow: none;

  119.       -webkit-font-smoothing: antialiased;

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

  121.     }

  122.   }

  123. }

  124. 

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

  126. 

  127. #drupal-off-canvas a,

  128. #drupal-off-canvas abbr,

  129. #drupal-off-canvas acronym,

  130. #drupal-off-canvas address,

  131. #drupal-off-canvas applet,

  132. #drupal-off-canvas article,

  133. #drupal-off-canvas aside,

  134. #drupal-off-canvas audio,

  135. #drupal-off-canvas b,

  136. #drupal-off-canvas big,

  137. #drupal-off-canvas blockquote,

  138. #drupal-off-canvas body,

  139. #drupal-off-canvas canvas,

  140. #drupal-off-canvas caption,

  141. #drupal-off-canvas cite,

  142. #drupal-off-canvas code,

  143. #drupal-off-canvas dd,

  144. #drupal-off-canvas del,

  145. #drupal-off-canvas dfn,

  146. #drupal-off-canvas dialog,

  147. #drupal-off-canvas dl,

  148. #drupal-off-canvas dt,

  149. #drupal-off-canvas em,

  150. #drupal-off-canvas embed,

  151. #drupal-off-canvas fieldset,

  152. #drupal-off-canvas figcaption,

  153. #drupal-off-canvas figure,

  154. #drupal-off-canvas footer,

  155. #drupal-off-canvas form,

  156. #drupal-off-canvas h1,

  157. #drupal-off-canvas h2,

  158. #drupal-off-canvas h3,

  159. #drupal-off-canvas h4,

  160. #drupal-off-canvas h5,

  161. #drupal-off-canvas h6,

  162. #drupal-off-canvas header,

  163. #drupal-off-canvas hgroup,

  164. #drupal-off-canvas hr,

  165. #drupal-off-canvas html,

  166. #drupal-off-canvas i,

  167. #drupal-off-canvas iframe,

  168. #drupal-off-canvas img,

  169. #drupal-off-canvas ins,

  170. #drupal-off-canvas kbd,

  171. #drupal-off-canvas label,

  172. #drupal-off-canvas legend,

  173. #drupal-off-canvas li,

  174. #drupal-off-canvas main,

  175. #drupal-off-canvas mark,

  176. #drupal-off-canvas menu,

  177. #drupal-off-canvas meter,

  178. #drupal-off-canvas nav,

  179. #drupal-off-canvas object,

  180. #drupal-off-canvas ol,

  181. #drupal-off-canvas output,

  182. #drupal-off-canvas p,

  183. #drupal-off-canvas pre,

  184. #drupal-off-canvas progress,

  185. #drupal-off-canvas q,

  186. #drupal-off-canvas rp,

  187. #drupal-off-canvas rt,

  188. #drupal-off-canvas s,

  189. #drupal-off-canvas samp,

  190. #drupal-off-canvas section,

  191. #drupal-off-canvas small,

  192. #drupal-off-canvas span,

  193. #drupal-off-canvas strike,

  194. #drupal-off-canvas strong,

  195. #drupal-off-canvas sub,

  196. #drupal-off-canvas sup,

  197. #drupal-off-canvas table,

  198. #drupal-off-canvas tbody,

  199. #drupal-off-canvas td,

  200. #drupal-off-canvas tfoot,

  201. #drupal-off-canvas th,

  202. #drupal-off-canvas thead,

  203. #drupal-off-canvas time,

  204. #drupal-off-canvas tr,

  205. #drupal-off-canvas tt,

  206. #drupal-off-canvas u,

  207. #drupal-off-canvas ul,

  208. #drupal-off-canvas var,

  209. #drupal-off-canvas video,

  210. #drupal-off-canvas xmp {

  211.   margin: 0;

  212.   padding: 0;

  213.   border: 0;

  214.   font-size: 100%;

  215. }

  216. 

  217. /*

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

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

  220.  */

  221. 

  222. #drupal-off-canvas article,

  223. #drupal-off-canvas aside,

  224. #drupal-off-canvas figcaption,

  225. #drupal-off-canvas figure,

  226. #drupal-off-canvas footer,

  227. #drupal-off-canvas header,

  228. #drupal-off-canvas hgroup,

  229. #drupal-off-canvas main,

  230. #drupal-off-canvas menu,

  231. #drupal-off-canvas nav,

  232. #drupal-off-canvas section {

  233.   display: block;

  234.   border-radius: 0;

  235.   line-height: normal;

  236. }

  237. 

  238. /*

  239.  * Makes browsers agree.

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

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

  242.  */

  243. 

  244. #drupal-off-canvas b,

  245. #drupal-off-canvas strong {

  246.   font-weight: bold;

  247. }

  248. 

  249. #drupal-off-canvas em,

  250. #drupal-off-canvas i {

  251.   font-style: italic;

  252. }

  253. 

  254. #drupal-off-canvas img {

  255.   vertical-align: middle;

  256.   color: transparent;

  257.   font-size: 0;

  258. }

  259. 

  260. #drupal-off-canvas ul,

  261. #drupal-off-canvas ol {

  262.   list-style: none;

  263. }

  264. 

  265. /* reset table styling. */

  266. 

  267. #drupal-off-canvas table {

  268.   border-spacing: 0;

  269.   border-collapse: collapse;

  270. }

  271. 

  272. #drupal-off-canvas table thead,

  273. #drupal-off-canvas table tbody,

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

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

  276. #drupal-off-canvas table tfoot {

  277.   border: 0;

  278.   background: transparent none;

  279. }

  280. 

  281. #drupal-off-canvas th,

  282. #drupal-off-canvas td,

  283. #drupal-off-canvas caption {

  284.   font-weight: normal;

  285. }

  286. 

  287. #drupal-off-canvas q {

  288.   quotes: none;

  289. }

  290. 

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

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

  293.   content: none;

  294. }

  295. 

  296. #drupal-off-canvas sub,

  297. #drupal-off-canvas sup,

  298. #drupal-off-canvas small {

  299.   font-size: 75%;

  300. }

  301. 

  302. #drupal-off-canvas sub,

  303. #drupal-off-canvas sup {

  304.   position: relative;

  305.   vertical-align: baseline;

  306.   line-height: 0;

  307. }

  308. 

  309. #drupal-off-canvas sub {

  310.   bottom: -0.25em;

  311. }

  312. 

  313. #drupal-off-canvas sup {

  314.   top: -0.5em;

  315. }

  316. 

  317. /*

  318.  * For IE9. Without, occasionally draws shapes

  319.  * outside the boundaries of  rectangle.

  320.  */

  321. 

  322. #drupal-off-canvas svg {

  323.   overflow: hidden;

  324. }

  325. 

  326. /* Specific resets for inputs. */

  327. 

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

  329.   display: none;

  330. }

  331. 

  332. #drupal-off-canvas input {

  333.   margin: 0;

  334.   padding: 0;

  335. }

  336. 

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

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

  339.   position: static;

  340.   margin: 0;

  341. }

  342. 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  357.   z-index: 1;

  358.   box-shadow: none;

  359. }

  360. 

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

  362.   cursor: pointer;

  363. }

  364. 

  365. #drupal-off-canvas button,

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

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

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

  369.   display: inline-block;

  370.   overflow: visible;

  371.   cursor: pointer;

  372.   vertical-align: middle;

  373.   text-decoration: none;

  374.   border: 0;

  375.   outline: 0;

  376.   background-image: none;

  377.   text-shadow: none;

  378.   -webkit-appearance: none;

  379.   -moz-appearance: none;

  380. }

  381. 

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

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

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

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

  386.   text-decoration: none;

  387.   background-image: none;

  388. }

  389. 

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

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

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

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

  394.   border-color: grey;

  395.   background-image: none;

  396.   box-shadow: none;

  397. }

  398. 

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

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

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

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

  403.   padding: 0;

  404.   border: 0;

  405. }

  406. 

  407. #drupal-off-canvas textarea,

  408. #drupal-off-canvas select,

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

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

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

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

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

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

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

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

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

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

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

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

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

  422.   height: auto;

  423.   vertical-align: middle;

  424.   border-radius: 0;

  425. }

  426. 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  442.   background-color: grey;

  443. }

  444. 

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

  446.   visibility: hidden;

  447. }

  448. 

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

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

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

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

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

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

  455.   cursor: default;

  456.   -webkit-user-select: none;

  457.   -ms-user-select: none;

  458.   user-select: none;

  459.   box-shadow: none;

  460. }

  461. 

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

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

  464.   color: grey;

  465. }

  466. 

  467. #drupal-off-canvas textarea,

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

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

  470.   height: auto;

  471. }

  472. 

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

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

  475.   height: auto;

  476. }

  477. 

  478. #drupal-off-canvas textarea {

  479.   overflow: auto;

  480.   width: 100%;

  481.   min-height: 40px;

  482.   resize: vertical;

  483. }

  484. 

  485. #drupal-off-canvas optgroup {

  486.   color: black;

  487.   font-weight: normal;

  488.   font-style: normal;

  489. }

  490. 

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

  492.   padding: 0;

  493.   border: 0;

  494. }

  495. 

  496. #drupal-off-canvas * button {

  497.   overflow: visible;

  498.   width: auto;

  499.   padding: 0;

  500.   vertical-align: middle;

  501.   text-decoration: none;

  502.   color: black;

  503.   border: 1px solid grey;

  504.   background: none;

  505. }

  506. 

  507. #drupal-off-canvas * textarea,

  508. #drupal-off-canvas * select,

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

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

  511.   padding: 0;

  512.   vertical-align: top;

  513.   color: black;

  514.   border: 1px solid grey;

  515.   background: white;

  516. }

  517. 

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

  519. 

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

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

  522.   color: inherit;

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

  524. }

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