theme.css

Claro styles for jQuery UI. Overrides /core/assets/vendor/jquery.ui/themes/base/theme.css.

File

View on git.drupalcode.org

core/themes/claro/css/components/jquery.ui/theme.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.  * Claro styles for jQuery UI.

  11.  * Overrides /core/assets/vendor/jquery.ui/themes/base/theme.css.

  12.  */

  13. 

  14. /**

  15.  * Component containers

  16.  */

  17. 

  18. .ui-widget {

  19.   background: none;

  20. }

  21. 

  22. .ui-widget-content {

  23.   border: none;

  24. }

  25. 

  26. .ui-dialog {

  27.   z-index: 1260;

  28. }

  29. 

  30. /**

  31.  * Interaction states

  32.  */

  33. 

  34. .ui-state-default,

  35. .ui-state-hover,

  36. .ui-state-focus,

  37. .ui-state-active {

  38.   outline: 0;

  39. }

  40. 

  41. .ui-state-highlight {

  42.   font-weight: bold;

  43. }

  44. 

  45. /**

  46.  * Interaction cues

  47.  */

  48. 

  49. .ui-state-active,

  50. .ui-widget-content .ui-state-active {

  51.   color: #840;

  52. }

  53. 

  54. .ui-state-error,

  55. .ui-widget-content .ui-state-error {

  56.   color: #fff;

  57.   border-color: #d52;

  58.   background: #e63;

  59. }

  60. 

  61. .ui-state-disabled,

  62. .ui-widget-content .ui-state-disabled {

  63.   opacity: 0.35;

  64. }

  65. 

  66. .ui-priority-secondary,

  67. .ui-widget-content .ui-priority-secondary {

  68.   opacity: 0.7;

  69. }

  70. 

  71. /**

  72.  * Icons

  73.  */

  74. 

  75. /* states and images */

  76. 

  77. .ui-icon {

  78.   display: block;

  79.   overflow: hidden;

  80.   width: 1rem;

  81.   height: 1rem;

  82.   text-indent: -6249.9375rem;

  83.   background-image: url(../../../images/ui-icons-222222-256x240.png);

  84.   background-repeat: no-repeat;

  85. }

  86. 

  87. .ui-widget-content .ui-icon,

  88. .ui-widget-header .ui-icon {

  89.   background-image: url(../../../images/ui-icons-222222-256x240.png);

  90. }

  91. 

  92. .ui-state-default .ui-icon {

  93.   background-image: url(../../../images/ui-icons-888888-256x240.png);

  94. }

  95. 

  96. .ui-state-hover .ui-icon,

  97. .ui-state-focus .ui-icon,

  98. .ui-state-highlight .ui-icon {

  99.   background-image: url(../../../images/ui-icons-454545-256x240.png);

  100. }

  101. 

  102. .ui-state-active .ui-icon {

  103.   background-image: url(../../../images/ui-icons-800000-256x240.png);

  104. }

  105. 

  106. .ui-state-error .ui-icon,

  107. .ui-state-error-text .ui-icon {

  108.   background-image: url(../../../images/ui-icons-ffffff-256x240.png);

  109. }

  110. 

  111. .ui-widget p .ui-icon {

  112.   margin: 2px 0.1875rem 0 0; /* LTR */

  113. }

  114. 

  115. [dir="rtl"] .ui-widget p .ui-icon {

  116.   margin: 2px 0 0 0.1875rem;

  117. }

  118. 

  119. /* positioning */

  120. 

  121. .ui-icon-carat-1-ne { background-position: -16px 0; }

  122. 

  123. .ui-icon-carat-1-e { background-position: -32px 0; }

  124. 

  125. .ui-icon-carat-1-se { background-position: -48px 0; }

  126. 

  127. .ui-icon-carat-1-s { background-position: -64px 0; }

  128. 

  129. .ui-icon-carat-1-sw { background-position: -80px 0; }

  130. 

  131. .ui-icon-carat-1-w { background-position: -96px 0; }

  132. 

  133. .ui-icon-carat-1-nw { background-position: -112px 0; }

  134. 

  135. .ui-icon-carat-2-n-s { background-position: -128px 0; }

  136. 

  137. .ui-icon-carat-2-e-w { background-position: -144px 0; }

  138. 

  139. .ui-icon-triangle-1-n { background-position: 0 -16px; }

  140. 

  141. .ui-icon-triangle-1-ne { background-position: -16px -16px; }

  142. 

  143. .ui-icon-triangle-1-e { background-position: -32px -16px; }

  144. 

  145. .ui-icon-triangle-1-se { background-position: -48px -16px; }

  146. 

  147. .ui-icon-triangle-1-s { background-position: -64px -16px; }

  148. 

  149. .ui-icon-triangle-1-sw { background-position: -80px -16px; }

  150. 

  151. .ui-icon-triangle-1-w { background-position: -96px -16px; }

  152. 

  153. .ui-icon-triangle-1-nw { background-position: -112px -16px; }

  154. 

  155. .ui-icon-triangle-2-n-s { background-position: -128px -16px; }

  156. 

  157. .ui-icon-triangle-2-e-w { background-position: -144px -16px; }

  158. 

  159. .ui-icon-arrow-1-n { background-position: 0 -32px; }

  160. 

  161. .ui-icon-arrow-1-ne { background-position: -16px -32px; }

  162. 

  163. .ui-icon-arrow-1-e { background-position: -32px -32px; }

  164. 

  165. .ui-icon-arrow-1-se { background-position: -48px -32px; }

  166. 

  167. .ui-icon-arrow-1-s { background-position: -64px -32px; }

  168. 

  169. .ui-icon-arrow-1-sw { background-position: -80px -32px; }

  170. 

  171. .ui-icon-arrow-1-w { background-position: -96px -32px; }

  172. 

  173. .ui-icon-arrow-1-nw { background-position: -112px -32px; }

  174. 

  175. .ui-icon-arrow-2-n-s { background-position: -128px -32px; }

  176. 

  177. .ui-icon-arrow-2-ne-sw { background-position: -144px -32px; }

  178. 

  179. .ui-icon-arrow-2-e-w { background-position: -160px -32px; }

  180. 

  181. .ui-icon-arrow-2-se-nw { background-position: -176px -32px; }

  182. 

  183. .ui-icon-arrowstop-1-n { background-position: -192px -32px; }

  184. 

  185. .ui-icon-arrowstop-1-e { background-position: -208px -32px; }

  186. 

  187. .ui-icon-arrowstop-1-s { background-position: -224px -32px; }

  188. 

  189. .ui-icon-arrowstop-1-w { background-position: -240px -32px; }

  190. 

  191. .ui-icon-arrowthick-1-n { background-position: 0 -48px; }

  192. 

  193. .ui-icon-arrowthick-1-ne { background-position: -16px -48px; }

  194. 

  195. .ui-icon-arrowthick-1-e { background-position: -32px -48px; }

  196. 

  197. .ui-icon-arrowthick-1-se { background-position: -48px -48px; }

  198. 

  199. .ui-icon-arrowthick-1-s { background-position: -64px -48px; }

  200. 

  201. .ui-icon-arrowthick-1-sw { background-position: -80px -48px; }

  202. 

  203. .ui-icon-arrowthick-1-w { background-position: -96px -48px; }

  204. 

  205. .ui-icon-arrowthick-1-nw { background-position: -112px -48px; }

  206. 

  207. .ui-icon-arrowthick-2-n-s { background-position: -128px -48px; }

  208. 

  209. .ui-icon-arrowthick-2-ne-sw { background-position: -144px -48px; }

  210. 

  211. .ui-icon-arrowthick-2-e-w { background-position: -160px -48px; }

  212. 

  213. .ui-icon-arrowthick-2-se-nw { background-position: -176px -48px; }

  214. 

  215. .ui-icon-arrowthickstop-1-n { background-position: -192px -48px; }

  216. 

  217. .ui-icon-arrowthickstop-1-e { background-position: -208px -48px; }

  218. 

  219. .ui-icon-arrowthickstop-1-s { background-position: -224px -48px; }

  220. 

  221. .ui-icon-arrowthickstop-1-w { background-position: -240px -48px; }

  222. 

  223. .ui-icon-arrowreturnthick-1-w { background-position: 0 -64px; }

  224. 

  225. .ui-icon-arrowreturnthick-1-n { background-position: -16px -64px; }

  226. 

  227. .ui-icon-arrowreturnthick-1-e { background-position: -32px -64px; }

  228. 

  229. .ui-icon-arrowreturnthick-1-s { background-position: -48px -64px; }

  230. 

  231. .ui-icon-arrowreturn-1-w { background-position: -64px -64px; }

  232. 

  233. .ui-icon-arrowreturn-1-n { background-position: -80px -64px; }

  234. 

  235. .ui-icon-arrowreturn-1-e { background-position: -96px -64px; }

  236. 

  237. .ui-icon-arrowreturn-1-s { background-position: -112px -64px; }

  238. 

  239. .ui-icon-arrowrefresh-1-w { background-position: -128px -64px; }

  240. 

  241. .ui-icon-arrowrefresh-1-n { background-position: -144px -64px; }

  242. 

  243. .ui-icon-arrowrefresh-1-e { background-position: -160px -64px; }

  244. 

  245. .ui-icon-arrowrefresh-1-s { background-position: -176px -64px; }

  246. 

  247. .ui-icon-arrow-4 { background-position: 0 -80px; }

  248. 

  249. .ui-icon-arrow-4-diag { background-position: -16px -80px; }

  250. 

  251. .ui-icon-extlink { background-position: -32px -80px; }

  252. 

  253. .ui-icon-newwin { background-position: -48px -80px; }

  254. 

  255. .ui-icon-refresh { background-position: -64px -80px; }

  256. 

  257. .ui-icon-shuffle { background-position: -80px -80px; }

  258. 

  259. .ui-icon-transfer-e-w { background-position: -96px -80px; }

  260. 

  261. .ui-icon-transferthick-e-w { background-position: -112px -80px; }

  262. 

  263. .ui-icon-folder-collapsed { background-position: 0 -96px; }

  264. 

  265. .ui-icon-folder-open { background-position: -16px -96px; }

  266. 

  267. .ui-icon-document { background-position: -32px -96px; }

  268. 

  269. .ui-icon-document-b { background-position: -48px -96px; }

  270. 

  271. .ui-icon-note { background-position: -64px -96px; }

  272. 

  273. .ui-icon-mail-closed { background-position: -80px -96px; }

  274. 

  275. .ui-icon-mail-open { background-position: -96px -96px; }

  276. 

  277. .ui-icon-suitcase { background-position: -112px -96px; }

  278. 

  279. .ui-icon-comment { background-position: -128px -96px; }

  280. 

  281. .ui-icon-person { background-position: -144px -96px; }

  282. 

  283. .ui-icon-print { background-position: -160px -96px; }

  284. 

  285. .ui-icon-trash { background-position: -176px -96px; }

  286. 

  287. .ui-icon-locked { background-position: -192px -96px; }

  288. 

  289. .ui-icon-unlocked { background-position: -208px -96px; }

  290. 

  291. .ui-icon-bookmark { background-position: -224px -96px; }

  292. 

  293. .ui-icon-tag { background-position: -240px -96px; }

  294. 

  295. .ui-icon-home { background-position: 0 -112px; }

  296. 

  297. .ui-icon-flag { background-position: -16px -112px; }

  298. 

  299. .ui-icon-calendar { background-position: -32px -112px; }

  300. 

  301. .ui-icon-cart { background-position: -48px -112px; }

  302. 

  303. .ui-icon-pencil { background-position: -64px -112px; }

  304. 

  305. .ui-icon-clock { background-position: -80px -112px; }

  306. 

  307. .ui-icon-disk { background-position: -96px -112px; }

  308. 

  309. .ui-icon-calculator { background-position: -112px -112px; }

  310. 

  311. .ui-icon-zoomin { background-position: -128px -112px; }

  312. 

  313. .ui-icon-zoomout { background-position: -144px -112px; }

  314. 

  315. .ui-icon-search { background-position: -160px -112px; }

  316. 

  317. .ui-icon-wrench { background-position: -176px -112px; }

  318. 

  319. .ui-icon-gear { background-position: -192px -112px; }

  320. 

  321. .ui-icon-heart { background-position: -208px -112px; }

  322. 

  323. .ui-icon-star { background-position: -224px -112px; }

  324. 

  325. .ui-icon-link { background-position: -240px -112px; }

  326. 

  327. .ui-icon-cancel { background-position: 0 -128px; }

  328. 

  329. .ui-icon-plus { background-position: -16px -128px; }

  330. 

  331. .ui-icon-plusthick { background-position: -32px -128px; }

  332. 

  333. .ui-icon-minus { background-position: -48px -128px; }

  334. 

  335. .ui-icon-minusthick { background-position: -64px -128px; }

  336. 

  337. .ui-icon-close { background-position: -80px -128px; }

  338. 

  339. .ui-icon-closethick { background-position: -96px -128px; }

  340. 

  341. .ui-icon-key { background-position: -112px -128px; }

  342. 

  343. .ui-icon-lightbulb { background-position: -128px -128px; }

  344. 

  345. .ui-icon-scissors { background-position: -144px -128px; }

  346. 

  347. .ui-icon-clipboard { background-position: -160px -128px; }

  348. 

  349. .ui-icon-copy { background-position: -176px -128px; }

  350. 

  351. .ui-icon-contact { background-position: -192px -128px; }

  352. 

  353. .ui-icon-image { background-position: -208px -128px; }

  354. 

  355. .ui-icon-video { background-position: -224px -128px; }

  356. 

  357. .ui-icon-script { background-position: -240px -128px; }

  358. 

  359. .ui-icon-alert { background-position: 0 -144px; }

  360. 

  361. .ui-icon-info { background-position: -16px -144px; }

  362. 

  363. .ui-icon-notice { background-position: -32px -144px; }

  364. 

  365. .ui-icon-help { background-position: -48px -144px; }

  366. 

  367. .ui-icon-check { background-position: -64px -144px; }

  368. 

  369. .ui-icon-bullet { background-position: -80px -144px; }

  370. 

  371. .ui-icon-radio-off { background-position: -96px -144px; }

  372. 

  373. .ui-icon-radio-on { background-position: -112px -144px; }

  374. 

  375. .ui-icon-pin-w { background-position: -128px -144px; }

  376. 

  377. .ui-icon-pin-s { background-position: -144px -144px; }

  378. 

  379. .ui-icon-play { background-position: 0 -160px; }

  380. 

  381. .ui-icon-pause { background-position: -16px -160px; }

  382. 

  383. .ui-icon-seek-next { background-position: -32px -160px; }

  384. 

  385. .ui-icon-seek-prev { background-position: -48px -160px; }

  386. 

  387. .ui-icon-seek-end { background-position: -64px -160px; }

  388. 

  389. .ui-icon-seek-first { background-position: -80px -160px; }

  390. 

  391. .ui-icon-stop { background-position: -96px -160px; }

  392. 

  393. .ui-icon-eject { background-position: -112px -160px; }

  394. 

  395. .ui-icon-volume-off { background-position: -128px -160px; }

  396. 

  397. .ui-icon-volume-on { background-position: -144px -160px; }

  398. 

  399. .ui-icon-power { background-position: 0 -176px; }

  400. 

  401. .ui-icon-signal-diag { background-position: -16px -176px; }

  402. 

  403. .ui-icon-signal { background-position: -32px -176px; }

  404. 

  405. .ui-icon-battery-0 { background-position: -48px -176px; }

  406. 

  407. .ui-icon-battery-1 { background-position: -64px -176px; }

  408. 

  409. .ui-icon-battery-2 { background-position: -80px -176px; }

  410. 

  411. .ui-icon-battery-3 { background-position: -96px -176px; }

  412. 

  413. .ui-icon-circle-plus { background-position: 0 -192px; }

  414. 

  415. .ui-icon-circle-minus { background-position: -16px -192px; }

  416. 

  417. .ui-icon-circle-close { background-position: -32px -192px; }

  418. 

  419. .ui-icon-circle-triangle-e { background-position: -48px -192px; }

  420. 

  421. .ui-icon-circle-triangle-s { background-position: -64px -192px; }

  422. 

  423. .ui-icon-circle-triangle-w { background-position: -80px -192px; }

  424. 

  425. .ui-icon-circle-triangle-n { background-position: -96px -192px; }

  426. 

  427. .ui-icon-circle-arrow-e { background-position: -112px -192px; }

  428. 

  429. .ui-icon-circle-arrow-s { background-position: -128px -192px; }

  430. 

  431. .ui-icon-circle-arrow-w { background-position: -144px -192px; }

  432. 

  433. .ui-icon-circle-arrow-n { background-position: -160px -192px; }

  434. 

  435. .ui-icon-circle-zoomin { background-position: -176px -192px; }

  436. 

  437. .ui-icon-circle-zoomout { background-position: -192px -192px; }

  438. 

  439. .ui-icon-circle-check { background-position: -208px -192px; }

  440. 

  441. .ui-icon-circlesmall-plus { background-position: 0 -208px; }

  442. 

  443. .ui-icon-circlesmall-minus { background-position: -16px -208px; }

  444. 

  445. .ui-icon-circlesmall-close { background-position: -32px -208px; }

  446. 

  447. .ui-icon-squaresmall-plus { background-position: -48px -208px; }

  448. 

  449. .ui-icon-squaresmall-minus { background-position: -64px -208px; }

  450. 

  451. .ui-icon-squaresmall-close { background-position: -80px -208px; }

  452. 

  453. .ui-icon-grip-dotted-vertical { background-position: 0 -224px; }

  454. 

  455. .ui-icon-grip-dotted-horizontal { background-position: -16px -224px; }

  456. 

  457. .ui-icon-grip-solid-vertical { background-position: -32px -224px; }

  458. 

  459. .ui-icon-grip-solid-horizontal { background-position: -48px -224px; }

  460. 

  461. .ui-icon-gripsmall-diagonal-se { background-position: -64px -224px; }

  462. 

  463. .ui-icon-grip-diagonal-se { background-position: -80px -224px; }

  464. 

  465. .ui-icon-carat-1-n { background-position: 0 0; }

  466. 

  467. /**

  468.  * Accordion

  469.  */

  470. 

  471. .ui-accordion {

  472.   border: none;

  473. }

  474. 

  475. .ui-accordion .ui-accordion-header {

  476.   text-transform: uppercase;

  477.   border: solid 1px #ccc;

  478. }

  479. 

  480. .ui-accordion h3.ui-accordion-header,

  481. #block-system-main h3.ui-accordion-header {

  482.   margin: 0.625rem 0;

  483.   font-size: 1.1em;

  484. }

  485. 

  486. #block-system-main .ui-accordion h3.ui-state-active,

  487. .ui-accordion h3.ui-state-active {

  488.   margin-bottom: 0;

  489. }

  490. 

  491. .ui-accordion .ui-accordion-header a {

  492.   display: block;

  493. }

  494. 

  495. .ui-accordion .ui-accordion-content {

  496.   padding: 1em 2.2em;

  497.   border: solid 1px #ccc;

  498.   border-top: 0;

  499. }

  500. 

  501. /**

  502.  * Tabs

  503.  */

  504. 

  505. .ui-tabs {

  506.   padding: 0;

  507. }

  508. 

  509. .ui-tabs .ui-tabs-nav {

  510.   margin: 0;

  511.   padding: 0.3125rem 0.625rem 0.25rem;

  512.   border-bottom: solid 1px #ccc;

  513.   border-bottom-right-radius: 0;

  514.   border-bottom-left-radius: 0;

  515.   line-height: 1.25rem;

  516. }

  517. 

  518. .ui-tabs .ui-tabs-nav li {

  519.   margin: 0;

  520.   padding: 0 1em 0 0.625rem; /* LTR */

  521.   list-style: none;

  522. }

  523. 

  524. [dir="rtl"] .ui-tabs .ui-tabs-nav li {

  525.   padding: 0 0.625rem 0 1em;

  526. }

  527. 

  528. .ui-tabs .ui-tabs-nav li a {

  529.   float: none;

  530.   padding: 0 0.625rem;

  531.   border-radius: 0.625rem;

  532. }

  533. 

  534. .ui-tabs .ui-tabs-nav li.ui-tabs-selected a {

  535.   color: #fff;

  536.   background: #666;

  537.   font-weight: normal;

  538. }

  539. 

  540. /**

  541.  * Overlays

  542.  */

  543. 

  544. .ui-widget-overlay {

  545.   z-index: 1259;

  546.   opacity: 0.7;

  547.   background: #232429;

  548. }

  549. 

  550. /**

  551.  * Slider

  552.  */

  553. 

  554. .ui-slider {

  555.   border: solid 1px #ccc;

  556. }

  557. 

  558. .ui-slider .ui-slider-range {

  559.   background: #e4e4e4;

  560. }

  561. 

  562. .ui-slider .ui-slider-handle {

  563.   border: 1px solid #e4e4e4;

  564.   border-right-color: #d2d2d2;

  565.   border-bottom: 1px solid #b4b4b4;

  566.   border-left-color: #d2d2d2;

  567.   border-radius: 0.25rem;

  568.   background-color: #e4e4e4;

  569. }

  570. 

  571. .ui-slider a.ui-state-active,

  572. .ui-slider .ui-slider-handle:active {

  573.   color: #fff;

  574.   border: solid 1px #555;

  575.   background: #666;

  576. }

  577. 

  578. /**

  579.  * Progress Bar

  580.  */

  581. 

  582. .ui-progressbar {

  583.   height: 1.4em;

  584.   background: #e4e4e4;

  585. }

  586. 

  587. .ui-progressbar .ui-progressbar-value {

  588.   height: 1.5em;

  589.   background: #003ecc url(../../../../misc/progress.gif);

  590. }

  591. 

  592. /**

  593.  * Autocomplete

  594.  */

  595. 

  596. .ui-autocomplete {

  597.   color: #55565b;

  598.   border: 1px solid rgba(216, 217, 224, 0.8);

  599.   border-top: 0;

  600.   border-radius: 0 0 0.125rem 0.125rem;

  601.   background: #fff;

  602.   box-shadow: 0 0.125rem 0.25rem rgba(34, 35, 48, 0.1);

  603. }

  604. 

  605. /* Suggestion list */

  606. 

  607. .ui-autocomplete .ui-menu-item {

  608.   list-style: none;

  609. }

  610. 

  611. .ui-autocomplete .ui-menu-item-wrapper {

  612.   display: block;

  613.   padding: 0.75rem 0.9375rem;

  614.   color: inherit;

  615.   background: inherit;

  616. }

  617. 

  618. .ui-autocomplete .ui-menu-item-wrapper:focus,

  619. .ui-autocomplete .ui-menu-item-wrapper:hover {

  620.   text-decoration: none;

  621. }

  622. 

  623. .ui-autocomplete .ui-menu-item-wrapper.ui-state-active {

  624.   margin: 0;

  625.   color: #fff;

  626.   background: #003ecc;

  627. }

  628. 

  629. .ui-autocomplete .ui-menu-item.ui-state-focus,

  630. .autocomplete .ui-menu-item.ui-state-hover {

  631.   margin: 0;

  632.   background: #003ecc;

  633. }

  634. 

  635. .ui-autocomplete .ui-state-focus a,

  636. .autocomplete .ui-state-hover a {

  637.   color: #fff;

  638. }

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