mixins.less 19 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614
  1. // Mixins.less
  2. // Snippets of reusable CSS to develop faster and keep code readable
  3. // -----------------------------------------------------------------
  4. // UTILITY MIXINS
  5. // --------------------------------------------------
  6. // Clearfix
  7. // --------
  8. // For clearing floats like a boss h5bp.com/q
  9. .clearfix {
  10. *zoom: 1;
  11. &:before,
  12. &:after {
  13. display: table;
  14. content: "";
  15. }
  16. &:after {
  17. clear: both;
  18. }
  19. }
  20. // Webkit-style focus
  21. // ------------------
  22. .tab-focus() {
  23. // Default
  24. outline: thin dotted #333;
  25. // Webkit
  26. outline: 5px auto -webkit-focus-ring-color;
  27. outline-offset: -2px;
  28. }
  29. // Center-align a block level element
  30. // ----------------------------------
  31. .center-block() {
  32. display: block;
  33. margin-left: auto;
  34. margin-right: auto;
  35. }
  36. // IE7 inline-block
  37. // ----------------
  38. .ie7-inline-block() {
  39. *display: inline; /* IE7 inline-block hack */
  40. *zoom: 1;
  41. }
  42. // IE7 likes to collapse whitespace on either side of the inline-block elements.
  43. // Ems because we're attempting to match the width of a space character. Left
  44. // version is for form buttons, which typically come after other elements, and
  45. // right version is for icons, which come before. Applying both is ok, but it will
  46. // mean that space between those elements will be .6em (~2 space characters) in IE7,
  47. // instead of the 1 space in other browsers.
  48. .ie7-restore-left-whitespace() {
  49. *margin-left: .3em;
  50. &:first-child {
  51. *margin-left: 0;
  52. }
  53. }
  54. .ie7-restore-right-whitespace() {
  55. *margin-right: .3em;
  56. &:last-child {
  57. *margin-left: 0;
  58. }
  59. }
  60. // Sizing shortcuts
  61. // -------------------------
  62. .size(@height: 5px, @width: 5px) {
  63. width: @width;
  64. height: @height;
  65. }
  66. .square(@size: 5px) {
  67. .size(@size, @size);
  68. }
  69. // Placeholder text
  70. // -------------------------
  71. .placeholder(@color: @placeholderText) {
  72. :-moz-placeholder {
  73. color: @color;
  74. }
  75. ::-webkit-input-placeholder {
  76. color: @color;
  77. }
  78. }
  79. // Text overflow
  80. // -------------------------
  81. // Requires inline-block or block for proper styling
  82. .text-overflow() {
  83. overflow: hidden;
  84. text-overflow: ellipsis;
  85. white-space: nowrap;
  86. }
  87. // New image replacement
  88. // -------------------------
  89. // Source: http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/
  90. .hide-text {
  91. overflow: hidden;
  92. text-indent: 100%;
  93. white-space: nowrap;
  94. }
  95. // FONTS
  96. // --------------------------------------------------
  97. #font {
  98. #family {
  99. .serif() {
  100. font-family: Georgia, "Times New Roman", Times, serif;
  101. }
  102. .sans-serif() {
  103. font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  104. }
  105. .monospace() {
  106. font-family: Menlo, Monaco, "Courier New", monospace;
  107. }
  108. }
  109. .shorthand(@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight) {
  110. font-size: @size;
  111. font-weight: @weight;
  112. line-height: @lineHeight;
  113. }
  114. .serif(@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight) {
  115. #font > #family > .serif;
  116. #font > .shorthand(@size, @weight, @lineHeight);
  117. }
  118. .sans-serif(@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight) {
  119. #font > #family > .sans-serif;
  120. #font > .shorthand(@size, @weight, @lineHeight);
  121. }
  122. .monospace(@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight) {
  123. #font > #family > .monospace;
  124. #font > .shorthand(@size, @weight, @lineHeight);
  125. }
  126. }
  127. // FORMS
  128. // --------------------------------------------------
  129. // Block level inputs
  130. .input-block-level {
  131. display: block;
  132. width: 100%;
  133. min-height: 28px; /* Make inputs at least the height of their button counterpart */
  134. /* Makes inputs behave like true block-level elements */
  135. .box-sizing(border-box);
  136. }
  137. // Mixin for form field states
  138. .formFieldState(@textColor: #555, @borderColor: #ccc, @backgroundColor: #f5f5f5) {
  139. // Set the text color
  140. > label,
  141. .help-block,
  142. .help-inline {
  143. color: @textColor;
  144. }
  145. // Style inputs accordingly
  146. input,
  147. select,
  148. textarea {
  149. color: @textColor;
  150. border-color: @borderColor;
  151. &:focus {
  152. border-color: darken(@borderColor, 10%);
  153. .box-shadow(0 0 6px lighten(@borderColor, 20%));
  154. }
  155. }
  156. // Give a small background color for input-prepend/-append
  157. .input-prepend .add-on,
  158. .input-append .add-on {
  159. color: @textColor;
  160. background-color: @backgroundColor;
  161. border-color: @textColor;
  162. }
  163. }
  164. // CSS3 PROPERTIES
  165. // --------------------------------------------------
  166. // Border Radius
  167. .border-radius(@radius: 5px) {
  168. -webkit-border-radius: @radius;
  169. -moz-border-radius: @radius;
  170. border-radius: @radius;
  171. }
  172. // Drop shadows
  173. .box-shadow(@shadow: 0 1px 3px rgba(0,0,0,.25)) {
  174. -webkit-box-shadow: @shadow;
  175. -moz-box-shadow: @shadow;
  176. box-shadow: @shadow;
  177. }
  178. // Transitions
  179. .transition(@transition) {
  180. -webkit-transition: @transition;
  181. -moz-transition: @transition;
  182. -ms-transition: @transition;
  183. -o-transition: @transition;
  184. transition: @transition;
  185. }
  186. // Transformations
  187. .rotate(@degrees) {
  188. -webkit-transform: rotate(@degrees);
  189. -moz-transform: rotate(@degrees);
  190. -ms-transform: rotate(@degrees);
  191. -o-transform: rotate(@degrees);
  192. transform: rotate(@degrees);
  193. }
  194. .scale(@ratio) {
  195. -webkit-transform: scale(@ratio);
  196. -moz-transform: scale(@ratio);
  197. -ms-transform: scale(@ratio);
  198. -o-transform: scale(@ratio);
  199. transform: scale(@ratio);
  200. }
  201. .translate(@x: 0, @y: 0) {
  202. -webkit-transform: translate(@x, @y);
  203. -moz-transform: translate(@x, @y);
  204. -ms-transform: translate(@x, @y);
  205. -o-transform: translate(@x, @y);
  206. transform: translate(@x, @y);
  207. }
  208. .skew(@x: 0, @y: 0) {
  209. -webkit-transform: skew(@x, @y);
  210. -moz-transform: skew(@x, @y);
  211. -ms-transform: skew(@x, @y);
  212. -o-transform: skew(@x, @y);
  213. transform: skew(@x, @y);
  214. }
  215. .translate3d(@x: 0, @y: 0, @z: 0) {
  216. -webkit-transform: translate(@x, @y, @z);
  217. -moz-transform: translate(@x, @y, @z);
  218. -ms-transform: translate(@x, @y, @z);
  219. -o-transform: translate(@x, @y, @z);
  220. transform: translate(@x, @y, @z);
  221. }
  222. // Background clipping
  223. // Heads up: FF 3.6 and under need "padding" instead of "padding-box"
  224. .background-clip(@clip) {
  225. -webkit-background-clip: @clip;
  226. -moz-background-clip: @clip;
  227. background-clip: @clip;
  228. }
  229. // Background sizing
  230. .background-size(@size){
  231. -webkit-background-size: @size;
  232. -moz-background-size: @size;
  233. -o-background-size: @size;
  234. background-size: @size;
  235. }
  236. // Box sizing
  237. .box-sizing(@boxmodel) {
  238. -webkit-box-sizing: @boxmodel;
  239. -moz-box-sizing: @boxmodel;
  240. -ms-box-sizing: @boxmodel;
  241. box-sizing: @boxmodel;
  242. }
  243. // User select
  244. // For selecting text on the page
  245. .user-select(@select) {
  246. -webkit-user-select: @select;
  247. -moz-user-select: @select;
  248. -o-user-select: @select;
  249. user-select: @select;
  250. }
  251. // Resize anything
  252. .resizable(@direction: both) {
  253. resize: @direction; // Options: horizontal, vertical, both
  254. overflow: auto; // Safari fix
  255. }
  256. // CSS3 Content Columns
  257. .content-columns(@columnCount, @columnGap: @gridColumnGutter) {
  258. -webkit-column-count: @columnCount;
  259. -moz-column-count: @columnCount;
  260. column-count: @columnCount;
  261. -webkit-column-gap: @columnGap;
  262. -moz-column-gap: @columnGap;
  263. column-gap: @columnGap;
  264. }
  265. // Opacity
  266. .opacity(@opacity: 100) {
  267. opacity: @opacity / 100;
  268. filter: ~"alpha(opacity=@{opacity})";
  269. }
  270. // BACKGROUNDS
  271. // --------------------------------------------------
  272. // Add an alphatransparency value to any background or border color (via Elyse Holladay)
  273. #translucent {
  274. .background(@color: @white, @alpha: 1) {
  275. background-color: hsla(hue(@color), saturation(@color), lightness(@color), @alpha);
  276. }
  277. .border(@color: @white, @alpha: 1) {
  278. border-color: hsla(hue(@color), saturation(@color), lightness(@color), @alpha);
  279. .background-clip(padding-box);
  280. }
  281. }
  282. // Gradient Bar Colors for buttons and alerts
  283. .gradientBar(@primaryColor, @secondaryColor) {
  284. #gradient > .vertical(@primaryColor, @secondaryColor);
  285. border-color: @secondaryColor @secondaryColor darken(@secondaryColor, 15%);
  286. border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) fadein(rgba(0,0,0,.1), 15%);
  287. }
  288. // Gradients
  289. #gradient {
  290. .horizontal(@startColor: #555, @endColor: #333) {
  291. background-color: @endColor;
  292. background-image: -moz-linear-gradient(left, @startColor, @endColor); // FF 3.6+
  293. background-image: -ms-linear-gradient(left, @startColor, @endColor); // IE10
  294. background-image: -webkit-gradient(linear, 0 0, 100% 0, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+
  295. background-image: -webkit-linear-gradient(left, @startColor, @endColor); // Safari 5.1+, Chrome 10+
  296. background-image: -o-linear-gradient(left, @startColor, @endColor); // Opera 11.10
  297. background-image: linear-gradient(left, @startColor, @endColor); // Le standard
  298. background-repeat: repeat-x;
  299. filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",@startColor,@endColor)); // IE9 and down
  300. }
  301. .vertical(@startColor: #555, @endColor: #333) {
  302. background-color: mix(@startColor, @endColor, 60%);
  303. background-image: -moz-linear-gradient(top, @startColor, @endColor); // FF 3.6+
  304. background-image: -ms-linear-gradient(top, @startColor, @endColor); // IE10
  305. background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+
  306. background-image: -webkit-linear-gradient(top, @startColor, @endColor); // Safari 5.1+, Chrome 10+
  307. background-image: -o-linear-gradient(top, @startColor, @endColor); // Opera 11.10
  308. background-image: linear-gradient(top, @startColor, @endColor); // The standard
  309. background-repeat: repeat-x;
  310. filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@startColor,@endColor)); // IE9 and down
  311. }
  312. .directional(@startColor: #555, @endColor: #333, @deg: 45deg) {
  313. background-color: @endColor;
  314. background-repeat: repeat-x;
  315. background-image: -moz-linear-gradient(@deg, @startColor, @endColor); // FF 3.6+
  316. background-image: -ms-linear-gradient(@deg, @startColor, @endColor); // IE10
  317. background-image: -webkit-linear-gradient(@deg, @startColor, @endColor); // Safari 5.1+, Chrome 10+
  318. background-image: -o-linear-gradient(@deg, @startColor, @endColor); // Opera 11.10
  319. background-image: linear-gradient(@deg, @startColor, @endColor); // The standard
  320. }
  321. .vertical-three-colors(@startColor: #00b3ee, @midColor: #7a43b6, @colorStop: 50%, @endColor: #c3325f) {
  322. background-color: mix(@midColor, @endColor, 80%);
  323. background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), color-stop(@colorStop, @midColor), to(@endColor));
  324. background-image: -webkit-linear-gradient(@startColor, @midColor @colorStop, @endColor);
  325. background-image: -moz-linear-gradient(top, @startColor, @midColor @colorStop, @endColor);
  326. background-image: -ms-linear-gradient(@startColor, @midColor @colorStop, @endColor);
  327. background-image: -o-linear-gradient(@startColor, @midColor @colorStop, @endColor);
  328. background-image: linear-gradient(@startColor, @midColor @colorStop, @endColor);
  329. background-repeat: no-repeat;
  330. filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@startColor,@endColor)); // IE9 and down, gets no color-stop at all for proper fallback
  331. }
  332. .radial(@innerColor: #555, @outerColor: #333) {
  333. background-color: @outerColor;
  334. background-image: -webkit-gradient(radial, center center, 0, center center, 460, from(@innerColor), to(@outerColor));
  335. background-image: -webkit-radial-gradient(circle, @innerColor, @outerColor);
  336. background-image: -moz-radial-gradient(circle, @innerColor, @outerColor);
  337. background-image: -ms-radial-gradient(circle, @innerColor, @outerColor);
  338. background-image: -o-radial-gradient(circle, @innerColor, @outerColor);
  339. background-repeat: no-repeat;
  340. }
  341. .striped(@color, @angle: -45deg) {
  342. background-color: @color;
  343. background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, rgba(255,255,255,.15)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255,255,255,.15)), color-stop(.75, rgba(255,255,255,.15)), color-stop(.75, transparent), to(transparent));
  344. background-image: -webkit-linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
  345. background-image: -moz-linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
  346. background-image: -ms-linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
  347. background-image: -o-linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
  348. background-image: linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
  349. }
  350. }
  351. // Reset filters for IE
  352. .reset-filter() {
  353. filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
  354. }
  355. // COMPONENT MIXINS
  356. // --------------------------------------------------
  357. // Horizontal dividers
  358. // -------------------------
  359. // Dividers (basically an hr) within dropdowns and nav lists
  360. .nav-divider() {
  361. height: 1px;
  362. margin: ((@baseLineHeight / 2) - 1) 1px; // 8px 1px
  363. overflow: hidden;
  364. background-color: #e5e5e5;
  365. border-bottom: 1px solid @white;
  366. // IE7 needs a set width since we gave a height. Restricting just
  367. // to IE7 to keep the 1px left/right space in other browsers.
  368. // It is unclear where IE is getting the extra space that we need
  369. // to negative-margin away, but so it goes.
  370. *width: 100%;
  371. *margin: -5px 0 5px;
  372. }
  373. // Button backgrounds
  374. // ------------------
  375. .buttonBackground(@startColor, @endColor) {
  376. // gradientBar will set the background to a pleasing blend of these, to support IE<=9
  377. .gradientBar(@startColor, @endColor);
  378. .reset-filter();
  379. // in these cases the gradient won't cover the background, so we override
  380. &:hover, &:active, &.active, &.disabled, &[disabled] {
  381. background-color: @endColor;
  382. }
  383. // IE 7 + 8 can't handle box-shadow to show active, so we darken a bit ourselves
  384. &:active,
  385. &.active {
  386. background-color: darken(@endColor, 10%) e("\9");
  387. }
  388. }
  389. // Navbar vertical align
  390. // -------------------------
  391. // Vertically center elements in the navbar.
  392. // Example: an element has a height of 30px, so write out `.navbarVerticalAlign(30px);` to calculate the appropriate top margin.
  393. .navbarVerticalAlign(@elementHeight) {
  394. margin-top: (@navbarHeight - @elementHeight) / 2;
  395. }
  396. // Popover arrows
  397. // -------------------------
  398. // For tipsies and popovers
  399. #popoverArrow {
  400. .top(@arrowWidth: 5px, @color: @black) {
  401. bottom: 0;
  402. left: 50%;
  403. margin-left: -@arrowWidth;
  404. border-left: @arrowWidth solid transparent;
  405. border-right: @arrowWidth solid transparent;
  406. border-top: @arrowWidth solid @color;
  407. }
  408. .left(@arrowWidth: 5px, @color: @black) {
  409. top: 50%;
  410. right: 0;
  411. margin-top: -@arrowWidth;
  412. border-top: @arrowWidth solid transparent;
  413. border-bottom: @arrowWidth solid transparent;
  414. border-left: @arrowWidth solid @color;
  415. }
  416. .bottom(@arrowWidth: 5px, @color: @black) {
  417. top: 0;
  418. left: 50%;
  419. margin-left: -@arrowWidth;
  420. border-left: @arrowWidth solid transparent;
  421. border-right: @arrowWidth solid transparent;
  422. border-bottom: @arrowWidth solid @color;
  423. }
  424. .right(@arrowWidth: 5px, @color: @black) {
  425. top: 50%;
  426. left: 0;
  427. margin-top: -@arrowWidth;
  428. border-top: @arrowWidth solid transparent;
  429. border-bottom: @arrowWidth solid transparent;
  430. border-right: @arrowWidth solid @color;
  431. }
  432. }
  433. // Grid System
  434. // -----------
  435. // Centered container element
  436. .container-fixed() {
  437. margin-left: auto;
  438. margin-right: auto;
  439. .clearfix();
  440. }
  441. // Table columns
  442. .tableColumns(@columnSpan: 1) {
  443. float: none; // undo default grid column styles
  444. width: ((@gridColumnWidth) * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1)) - 16; // 16 is total padding on left and right of table cells
  445. margin-left: 0; // undo default grid column styles
  446. }
  447. // Make a Grid
  448. // Use .makeRow and .makeColumn to assign semantic layouts grid system behavior
  449. .makeRow() {
  450. margin-left: @gridGutterWidth * -1;
  451. .clearfix();
  452. }
  453. .makeColumn(@columns: 1) {
  454. float: left;
  455. margin-left: @gridGutterWidth;
  456. width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1));
  457. }
  458. // The Grid
  459. #grid {
  460. .core (@gridColumnWidth, @gridGutterWidth) {
  461. .spanX (@index) when (@index > 0) {
  462. (~".span@{index}") { .span(@index); }
  463. .spanX(@index - 1);
  464. }
  465. .spanX (0) {}
  466. .offsetX (@index) when (@index > 0) {
  467. (~".offset@{index}") { .offset(@index); }
  468. .offsetX(@index - 1);
  469. }
  470. .offsetX (0) {}
  471. .offset (@columns) {
  472. margin-left: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1)) + (@gridGutterWidth * 2);
  473. }
  474. .span (@columns) {
  475. width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1));
  476. }
  477. .row {
  478. margin-left: @gridGutterWidth * -1;
  479. .clearfix();
  480. }
  481. [class*="span"] {
  482. float: left;
  483. margin-left: @gridGutterWidth;
  484. }
  485. // Set the container width, and override it for fixed navbars in media queries
  486. .container,
  487. .navbar-fixed-top .container,
  488. .navbar-fixed-bottom .container { .span(@gridColumns); }
  489. // generate .spanX and .offsetX
  490. .spanX (@gridColumns);
  491. .offsetX (@gridColumns);
  492. }
  493. .fluid (@fluidGridColumnWidth, @fluidGridGutterWidth) {
  494. .spanX (@index) when (@index > 0) {
  495. (~"> .span@{index}") { .span(@index); }
  496. .spanX(@index - 1);
  497. }
  498. .spanX (0) {}
  499. .span (@columns) {
  500. width: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1));
  501. }
  502. .row-fluid {
  503. width: 100%;
  504. .clearfix();
  505. > [class*="span"] {
  506. float: left;
  507. margin-left: @fluidGridGutterWidth;
  508. }
  509. > [class*="span"]:first-child {
  510. margin-left: 0;
  511. }
  512. // generate .spanX
  513. .spanX (@gridColumns);
  514. }
  515. }
  516. .input(@gridColumnWidth, @gridGutterWidth) {
  517. .spanX (@index) when (@index > 0) {
  518. (~"input.span@{index}, textarea.span@{index}, .uneditable-input.span@{index}") { .span(@index); }
  519. .spanX(@index - 1);
  520. }
  521. .spanX (0) {}
  522. .span(@columns) {
  523. width: ((@gridColumnWidth) * @columns) + (@gridGutterWidth * (@columns - 1)) - 10;
  524. }
  525. input,
  526. textarea,
  527. .uneditable-input {
  528. margin-left: 0; // override margin-left from core grid system
  529. }
  530. // generate .spanX
  531. .spanX (@gridColumns);
  532. }
  533. }