shared-components.less 19 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137
  1. dl.flat {
  2. margin-bottom: 1em;
  3. }
  4. dl.flat dt {
  5. float: left;
  6. clear: left;
  7. width: 70px;
  8. padding-bottom: 5px;
  9. }
  10. dl.flat dd {
  11. padding-bottom: 5px;
  12. }
  13. /**
  14. * Flex
  15. * ============================================================================
  16. */
  17. .flex {
  18. display: flex;
  19. &.flex-container {
  20. padding-left: 30px;
  21. padding-right: 30px;
  22. }
  23. &.flex-justify-right {
  24. justify-content: flex-end;
  25. }
  26. &.flex-vertically-centered {
  27. align-items: center;
  28. }
  29. > * {
  30. flex-grow: 1;
  31. }
  32. }
  33. /**
  34. * Buttons
  35. * ============================================================================
  36. */
  37. .btn {
  38. border: 1px solid transparent;
  39. border-radius: 3px;
  40. font-weight: 600;
  41. padding: 8px 16px;
  42. box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
  43. transition: all 0.1s;
  44. &.disabled,
  45. &.disabled:hover {
  46. color: #ced3d6 !important;
  47. border-color: #e3e5e6 !important;
  48. box-shadow: none !important;
  49. pointer-events: none !important;
  50. background: none !important;
  51. }
  52. }
  53. /* Button sizes */
  54. .btn-sm {
  55. font-size: 12px;
  56. padding: 4px 9px;
  57. }
  58. .btn-lg {
  59. font-size: 16px;
  60. padding: 10px 20px;
  61. }
  62. .btn-xs {
  63. font-size: 85%;
  64. padding: 4px 10px;
  65. }
  66. /* Button types */
  67. .btn-default {
  68. color: @gray-dark;
  69. background: #fff;
  70. border-color: lighten(@gray-lighter, 7);
  71. box-shadow: 0 2px 0 rgba(0, 0, 0, 0.03);
  72. &:hover {
  73. color: @gray-darker;
  74. border-color: @gray-lighter;
  75. box-shadow: 0 2px 0 rgba(0, 0, 0, 0.06);
  76. }
  77. &:hover:active,
  78. &:focus,
  79. &:active,
  80. &.active,
  81. &.active:hover {
  82. color: @gray-darker;
  83. background-color: @white-darker;
  84. border-color: @gray-lighter;
  85. box-shadow: inset 0 2px 0 rgba(0, 0, 0, 0.06);
  86. }
  87. }
  88. .open > .dropdown-toggle.btn-default,
  89. .open > .dropdown-toggle.btn-default:hover,
  90. .open > .dropdown-toggle.btn-default:active {
  91. background: @white-darker;
  92. box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
  93. }
  94. .btn-primary {
  95. color: #ffffff;
  96. background: @purple;
  97. border-color: darken(@purple, 18);
  98. text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15);
  99. box-shadow: 0 2px 0 rgba(0, 0, 0, 0.08);
  100. &:hover {
  101. background-color: darken(@purple, 5);
  102. }
  103. &:hover:active,
  104. &:focus,
  105. &:active,
  106. &.active,
  107. &.active:hover {
  108. background: darken(@purple, 5);
  109. border-color: darken(@purple, 22);
  110. box-shadow: inset 0 2px 0 rgba(0, 0, 0, 0.12);
  111. outline: none;
  112. }
  113. }
  114. .btn-danger {
  115. background: @red;
  116. color: #fff;
  117. border-color: darken(@red, 18);
  118. box-shadow: 0 2px 0 rgba(0, 0, 0, 0.1);
  119. &:hover,
  120. &:focus,
  121. &:active {
  122. box-shadow: inset 0 2px 0 rgba(0, 0, 0, 0.12);
  123. }
  124. }
  125. // Disabled buttons
  126. .btn-primary.disabled,
  127. .btn-primary[disabled],
  128. fieldset[disabled] .btn-primary,
  129. .btn-primary.disabled:hover,
  130. .btn-primary[disabled]:hover,
  131. fieldset[disabled] .btn-primary:hover,
  132. .btn-primary.disabled:focus,
  133. .btn-primary[disabled]:focus,
  134. fieldset[disabled] .btn-primary:focus,
  135. .btn-primary.disabled:active,
  136. .btn-primary[disabled]:active,
  137. fieldset[disabled] .btn-primary:active,
  138. .btn-primary.disabled.active,
  139. .btn-primary[disabled].active,
  140. fieldset[disabled] .btn-primary.active,
  141. .btn-danger.disabled,
  142. .btn-danger[disabled],
  143. fieldset[disabled] .btn-danger,
  144. .btn-danger.disabled:hover,
  145. .btn-danger[disabled]:hover,
  146. fieldset[disabled] .btn-danger:hover,
  147. .btn-danger.disabled:focus,
  148. .btn-danger[disabled]:focus,
  149. fieldset[disabled] .btn-danger:focus,
  150. .btn-danger.disabled:active,
  151. .btn-danger[disabled]:active,
  152. fieldset[disabled] .btn-danger:active,
  153. .btn-danger.disabled.active,
  154. .btn-danger[disabled].active,
  155. fieldset[disabled] .btn-danger.active,
  156. .btn-primary.btn-disabled,
  157. .btn-primary.btn-disabled:hover {
  158. color: @gray-light;
  159. border-color: @gray-lightest;
  160. background: #fff;
  161. opacity: 1;
  162. text-shadow: none;
  163. }
  164. /* Small button icons */
  165. .btn-sm {
  166. .icon-arrow-right,
  167. .icon-arrow-left,
  168. .icon-refresh {
  169. position: relative;
  170. font-size: 14px !important;
  171. display: block;
  172. line-height: 18px;
  173. top: 0;
  174. }
  175. }
  176. /**
  177. * Tables
  178. * ============================================================================
  179. */
  180. table.table {
  181. margin-bottom: 20px;
  182. // No overrideable variables available
  183. td,
  184. th {
  185. vertical-align: middle !important;
  186. line-height: 1 !important;
  187. }
  188. th {
  189. font-weight: 600 !important;
  190. border-width: 1px !important;
  191. }
  192. h5 {
  193. font-weight: 600;
  194. font-size: 15px;
  195. margin: 0;
  196. }
  197. .table-user-info {
  198. position: relative;
  199. padding-left: 65px !important;
  200. line-height: 1.2 !important;
  201. font-size: 13px;
  202. h5 {
  203. margin-bottom: 4px;
  204. }
  205. .avatar {
  206. position: absolute;
  207. left: 20px;
  208. }
  209. }
  210. &.closed {
  211. display: none;
  212. }
  213. }
  214. pre.plain {
  215. background-color: inherit;
  216. padding: 0;
  217. border: 0;
  218. white-space: pre-wrap;
  219. word-break: break-all;
  220. box-shadow: none;
  221. }
  222. .external-icon {
  223. transition: 0.1s linear color;
  224. font-size: 11px;
  225. margin: 0 5px;
  226. color: @gray-light;
  227. line-height: 1;
  228. vertical-align: middle;
  229. &:hover {
  230. color: @gray;
  231. }
  232. }
  233. .box-header a:hover .external-icon {
  234. color: @gray;
  235. }
  236. table.table.key-value {
  237. border: none;
  238. td {
  239. padding: 0 !important;
  240. max-width: 500px;
  241. border: 0 !important;
  242. vertical-align: top !important;
  243. pre {
  244. box-sizing: border-box;
  245. white-space: pre-wrap;
  246. margin-top: 2px;
  247. margin-bottom: 2px;
  248. word-break: break-word;
  249. padding: 8px 10px;
  250. font-size: 12px;
  251. overflow: visible;
  252. .val-string:first-child {
  253. padding-left: 0;
  254. }
  255. }
  256. }
  257. td.key {
  258. font-weight: 600;
  259. font-size: 13px;
  260. width: 175px;
  261. max-width: 175px;
  262. word-wrap: break-word;
  263. padding: 10px 15px 10px 0 !important;
  264. line-height: 1.4 !important;
  265. }
  266. }
  267. .event-list {
  268. border: 1px solid @trim;
  269. overflow-x: scroll;
  270. border-radius: 3px;
  271. .table {
  272. border: 0;
  273. margin-bottom: 0;
  274. & > thead > tr > th,
  275. & > tbody > tr > td {
  276. padding: 10px 15px;
  277. }
  278. h5 {
  279. margin-bottom: 0;
  280. font-size: 16px;
  281. small {
  282. margin-top: 5px;
  283. display: block;
  284. color: @gray;
  285. }
  286. }
  287. th {
  288. text-transform: uppercase;
  289. font-size: 14px;
  290. color: #95899f;
  291. }
  292. th,
  293. td {
  294. white-space: nowrap;
  295. }
  296. .table-user-info {
  297. padding-left: 54px !important;
  298. position: relative;
  299. .avatar {
  300. top: 50%;
  301. margin-top: -12px;
  302. }
  303. p {
  304. margin-bottom: 0;
  305. }
  306. }
  307. time {
  308. white-space: nowrap;
  309. }
  310. }
  311. }
  312. /**
  313. * Avatar
  314. * ============================================================================
  315. */
  316. .avatar {
  317. width: 20px;
  318. height: 20px;
  319. vertical-align: middle;
  320. position: relative;
  321. display: inline-block;
  322. }
  323. .org-avatar {
  324. width: 30px;
  325. height: 30px;
  326. background: @red url(../images/sentry-avatar.png);
  327. background-size: cover;
  328. border-radius: 3px;
  329. }
  330. /**
  331. * Loading Indicator
  332. * ============================================================================
  333. */
  334. @loader-size: 64px;
  335. .loading {
  336. margin: 6em auto;
  337. position: relative;
  338. &.overlay {
  339. position: absolute;
  340. top: 0;
  341. bottom: 0;
  342. left: 0;
  343. right: 0;
  344. background-color: rgba(255, 255, 255, 0.8);
  345. display: flex;
  346. align-items: center;
  347. justify-content: center;
  348. margin: 0;
  349. &.dark {
  350. background-color: rgba(0, 0, 0, 0.6);
  351. }
  352. }
  353. .loading-indicator {
  354. position: relative;
  355. border: 6px solid @white-darkest;
  356. border-left-color: @purple;
  357. -webkit-animation: loading 0.5s infinite linear;
  358. animation: loading 0.55s infinite linear;
  359. margin: 0 auto;
  360. }
  361. .loading-indicator,
  362. .loading-indicator:after {
  363. border-radius: 50%;
  364. width: @loader-size;
  365. height: @loader-size;
  366. }
  367. .loading-message {
  368. margin-top: 20px;
  369. text-align: center;
  370. }
  371. }
  372. @-webkit-keyframes loading {
  373. 0% {
  374. -webkit-transform: rotate(0deg);
  375. transform: rotate(0deg);
  376. }
  377. 100% {
  378. -webkit-transform: rotate(360deg);
  379. transform: rotate(360deg);
  380. }
  381. }
  382. @keyframes loading {
  383. 0% {
  384. -webkit-transform: rotate(0deg);
  385. transform: rotate(0deg);
  386. }
  387. 100% {
  388. -webkit-transform: rotate(360deg);
  389. transform: rotate(360deg);
  390. }
  391. }
  392. // mini
  393. .loading.mini {
  394. margin: 4px 0;
  395. font-size: 13px;
  396. height: 24px;
  397. .loading-indicator {
  398. margin: 0;
  399. border-radius: 50%;
  400. width: 24px;
  401. height: 24px;
  402. border-width: 2px;
  403. position: absolute;
  404. left: 0;
  405. top: 0;
  406. &.relative {
  407. position: relative;
  408. left: auto;
  409. top: auto;
  410. }
  411. }
  412. .loading-message {
  413. padding-left: 30px;
  414. margin-top: 1px;
  415. display: inline-block;
  416. }
  417. }
  418. // Spinning logo icon loader
  419. .loading.triangle {
  420. position: absolute;
  421. top: 50%;
  422. left: 50%;
  423. width: 500px;
  424. margin-top: -200px;
  425. margin-left: -250px;
  426. // Nerf the styles of other loading indicators
  427. .loading-indicator {
  428. height: 150px;
  429. width: 150px;
  430. display: flex;
  431. align-items: center;
  432. justify-content: center;
  433. background: #fff;
  434. animation: none;
  435. -webkit-animation: none;
  436. border: 0;
  437. overflow: hidden;
  438. border-radius: 50%;
  439. }
  440. }
  441. /**
  442. * Box
  443. * ============================================================================
  444. */
  445. .box {
  446. background: #fff;
  447. border: 1px solid @trim;
  448. border-radius: 3px;
  449. margin: 0 0 20px;
  450. .box-header {
  451. background: @white-dark;
  452. color: @gray-darker;
  453. line-height: 1;
  454. padding: 0 20px;
  455. border-radius: 3px 3px 0 0;
  456. border-bottom: 1px solid @trim;
  457. padding-top: 9px;
  458. padding-bottom: 8px;
  459. position: relative;
  460. .clearfix;
  461. &:hover .permalink {
  462. display: inline-block;
  463. }
  464. .permalink {
  465. font-size: 12px;
  466. line-height: 27px;
  467. display: none;
  468. position: absolute;
  469. top: -1.5px;
  470. left: -22px;
  471. color: @40;
  472. padding: 2px 5px;
  473. }
  474. a {
  475. color: @gray-dark;
  476. &:hover {
  477. color: @gray-darker;
  478. }
  479. }
  480. h3,
  481. h4,
  482. h5 {
  483. font-size: 14px;
  484. margin: 0;
  485. font-weight: 600;
  486. line-height: inherit;
  487. padding-top: 6px;
  488. padding-bottom: 5px;
  489. max-width: 80%;
  490. line-height: 1.2;
  491. small {
  492. color: @gray-dark;
  493. font-size: 14px;
  494. }
  495. }
  496. .pull-right {
  497. a,
  498. .btn {
  499. margin-left: 6px;
  500. }
  501. }
  502. .nav-tabs {
  503. float: right;
  504. line-height: inherit;
  505. li {
  506. margin: 0 0 0 20px;
  507. font-weight: 400;
  508. &.active a {
  509. font-weight: 600;
  510. border: 0;
  511. box-shadow: inset 0 -3px 0 @blue;
  512. }
  513. }
  514. a {
  515. font-weight: 400;
  516. padding: 0;
  517. font-size: 14px;
  518. line-height: inherit;
  519. }
  520. }
  521. .nav-pills {
  522. position: relative;
  523. right: -6px;
  524. a {
  525. padding: 2px 8px;
  526. font-size: 12px;
  527. border-radius: 4px;
  528. }
  529. .active {
  530. a {
  531. background: @blue;
  532. }
  533. }
  534. }
  535. .checkbox {
  536. margin-top: -4px;
  537. }
  538. }
  539. .box-content {
  540. &.with-padding {
  541. padding: 20px 20px 0;
  542. }
  543. .form-actions {
  544. padding-left: 20px;
  545. padding-right: 20px;
  546. margin-left: -20px;
  547. margin-right: -20px;
  548. margin: 0 -20px 20px;
  549. }
  550. h1,
  551. h2,
  552. h3,
  553. h4,
  554. h5,
  555. h6 {
  556. color: @gray-darker;
  557. }
  558. }
  559. &.box-modal {
  560. box-shadow: 0 1px 12px rgba(0, 0, 0, 0.15);
  561. border-color: darken(@trim, 9);
  562. }
  563. &.empty {
  564. padding: 20px;
  565. text-align: center;
  566. }
  567. &.box-mini {
  568. .box-header {
  569. padding: 10px;
  570. line-height: normal;
  571. height: auto;
  572. font-size: 14px;
  573. }
  574. .with-padding {
  575. padding: 10px 10px 0;
  576. }
  577. }
  578. }
  579. /**
  580. * Global Messages
  581. * ============================================================================
  582. */
  583. .messages-container {
  584. .alert {
  585. color: #fff;
  586. font-weight: bold;
  587. background: darken(@yellow-orange, 2);
  588. border: 0;
  589. .container {
  590. padding: 0;
  591. }
  592. .close {
  593. color: rgba(255, 255, 255, 0.7);
  594. &:hover {
  595. color: rgba(255, 255, 255, 0.9);
  596. }
  597. }
  598. }
  599. .alert-warning {
  600. .icon:before {
  601. content: '\e615';
  602. }
  603. }
  604. .alert-success {
  605. background: @green-light;
  606. }
  607. .alert-info {
  608. background: @blue-light;
  609. }
  610. .alert-error {
  611. background: @red;
  612. }
  613. }
  614. /**
  615. * Alerts
  616. * ============================================================================
  617. */
  618. header + .alert {
  619. margin-top: -31px;
  620. position: relative;
  621. z-index: 2;
  622. border-radius: 0;
  623. }
  624. .alert {
  625. background: @alert-warning-bg-color;
  626. color: rgba(0, 0, 0, 0.7);
  627. border: 1px solid @alert-warning-border-color;
  628. font-weight: 400;
  629. padding: 10px 20px;
  630. border-radius: 0;
  631. margin: 0;
  632. font-size: 15px;
  633. line-height: 1.4;
  634. box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
  635. p:last-child {
  636. margin: 0;
  637. }
  638. .icon {
  639. float: left;
  640. margin: 3px 8px 0 3px;
  641. display: block;
  642. font-size: 15px;
  643. opacity: 0.65;
  644. }
  645. .icon-sentry-logo {
  646. display: block;
  647. }
  648. .close {
  649. font-weight: 600;
  650. position: absolute;
  651. top: -6px;
  652. right: 8px;
  653. box-shadow: none;
  654. transition: color 0.15s;
  655. color: rgba(0, 0, 0, 0.25);
  656. background: 0;
  657. border: 0;
  658. font-size: 22px;
  659. float: right;
  660. &:hover {
  661. box-shadow: none;
  662. color: rgba(0, 0, 0, 0.5);
  663. }
  664. }
  665. a {
  666. color: inherit;
  667. text-decoration: underline;
  668. &:hover {
  669. text-decoration: underline;
  670. }
  671. }
  672. & + .alert {
  673. box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.15);
  674. }
  675. &.alert-block {
  676. margin-bottom: 20px;
  677. border-radius: 3px;
  678. }
  679. .btn-default {
  680. border-color: desaturate(darken(@alert-warning-border-color, 10), 10);
  681. }
  682. }
  683. .alert-block {
  684. .btn {
  685. float: right;
  686. position: relative;
  687. top: -3px;
  688. right: -6px;
  689. }
  690. }
  691. .alert-block ul {
  692. padding-left: 20px;
  693. }
  694. // ugh this is awful
  695. .alert-block p + ul,
  696. .alert-block p + p,
  697. .alert-block ul + p {
  698. margin-top: 10px !important;
  699. }
  700. .alert-error,
  701. .alert-danger {
  702. background: @alert-danger-bg-color;
  703. border-color: @alert-danger-border-color;
  704. .icon:before {
  705. content: '\e615';
  706. }
  707. .btn-default {
  708. border-color: darken(@alert-danger-border-color, 10);
  709. }
  710. }
  711. .alert-info {
  712. background: @alert-info-bg-color;
  713. border-color: @alert-info-border-color;
  714. color: @gray-dark;
  715. .icon {
  716. display: none;
  717. }
  718. .btn-default {
  719. border-color: desaturate(darken(@alert-info-border-color, 10), 10);
  720. }
  721. }
  722. .alert-success {
  723. background: @alert-success-bg-color;
  724. border-color: @alert-success-border-color;
  725. .icon:before {
  726. content: '\e60a';
  727. }
  728. .btn-default {
  729. border-color: darken(@alert-success-border-color, 5);
  730. }
  731. }
  732. /**
  733. * Dropdowns
  734. * ============================================================================
  735. */
  736. .dropdown-menu {
  737. top: 32px;
  738. border: none;
  739. border-radius: 2px;
  740. box-shadow: 0 0 0 1px rgba(52, 60, 69, 0.2), 0 1px 3px rgba(70, 82, 98, 0.25);
  741. -webkit-background-clip: padding-box;
  742. -moz-background-clip: padding;
  743. background-clip: padding-box;
  744. color: @gray-darker;
  745. &.inverted {
  746. top: auto;
  747. bottom: 32px;
  748. }
  749. &:after {
  750. width: 0;
  751. height: 0;
  752. border-left: 8px solid transparent;
  753. border-right: 8px solid transparent;
  754. border-bottom: 8px solid #fff;
  755. content: '';
  756. display: block;
  757. position: absolute;
  758. top: -8px;
  759. left: 12px;
  760. z-index: -1;
  761. }
  762. &.inverted:after {
  763. border-top: 8px solid #fff;
  764. border-bottom: 8px solid transparent;
  765. top: auto;
  766. bottom: -16px;
  767. }
  768. &:before {
  769. width: 0;
  770. height: 0;
  771. border-left: 9px solid transparent;
  772. border-right: 9px solid transparent;
  773. border-bottom: 9px solid rgba(52, 60, 69, 0.35);
  774. content: '';
  775. display: block;
  776. position: absolute;
  777. top: -9px;
  778. left: 11px;
  779. z-index: -2;
  780. }
  781. &.inverted:before {
  782. border-top: 9px solid rgba(52, 60, 69, 0.35);
  783. border-bottom: 9px solid transparent;
  784. top: auto;
  785. bottom: -18px;
  786. }
  787. &.dropdown-menu-right {
  788. &:before {
  789. right: 12px;
  790. left: auto;
  791. }
  792. &:after {
  793. right: 13px;
  794. left: auto;
  795. }
  796. }
  797. li.active a,
  798. li.active a:hover {
  799. background: @purple;
  800. color: #fff !important;
  801. }
  802. .disabled {
  803. opacity: 0.4;
  804. cursor: default;
  805. &:hover {
  806. background: #fff;
  807. color: #7a8188;
  808. }
  809. }
  810. }
  811. .anchor-right {
  812. .dropdown-menu {
  813. left: auto;
  814. right: 0;
  815. &:after {
  816. left: auto;
  817. right: 12px;
  818. }
  819. &:before {
  820. // top caret
  821. left: auto;
  822. right: 11px;
  823. }
  824. }
  825. }
  826. .anchor-middle {
  827. .dropdown-menu {
  828. left: auto;
  829. right: 50%;
  830. transform: translateX(calc(50%));
  831. &:after {
  832. left: calc(50% - 5px);
  833. right: auto;
  834. }
  835. &:before {
  836. // top caret
  837. left: calc(50% - 6px);
  838. right: auto;
  839. }
  840. }
  841. }
  842. .dropdown-actor-title {
  843. display: flex;
  844. align-items: center;
  845. height: 100%;
  846. min-height: 18px;
  847. }
  848. /**
  849. * Navs
  850. * ============================================================================
  851. */
  852. .nav {
  853. margin-bottom: 20px;
  854. .open > a,
  855. .open > a:hover,
  856. .open > a:active {
  857. background: none;
  858. }
  859. }
  860. .nav-pills > li.active > a {
  861. background-color: @blue;
  862. }
  863. /**
  864. * Nav stacked
  865. * ============================================================================
  866. */
  867. .nav-header {
  868. margin-bottom: 8px;
  869. text-transform: uppercase;
  870. font-size: 12px;
  871. color: @gray-light;
  872. letter-spacing: 0.1px;
  873. .clearfix;
  874. a.help-link,
  875. span.help-link a {
  876. color: inherit;
  877. }
  878. .view-more {
  879. color: @gray-dark;
  880. float: right;
  881. text-transform: none;
  882. &:hover {
  883. color: @gray-darkest;
  884. }
  885. }
  886. .btn-xs {
  887. font-size: 11px;
  888. line-height: 14px;
  889. padding: 0 5px;
  890. margin-left: 5px;
  891. }
  892. }
  893. /**
  894. * Nav tabs
  895. * ============================================================================
  896. */
  897. .nav-tabs {
  898. border-bottom: 0;
  899. margin: 0 0 20px;
  900. > li {
  901. margin-right: 20px;
  902. > li.pull-right {
  903. float: right;
  904. }
  905. > a {
  906. display: flex;
  907. align-items: center;
  908. justify-content: center;
  909. padding: 0 0 10px;
  910. margin: 0;
  911. border: 0;
  912. background: none;
  913. color: @60;
  914. min-width: 30px;
  915. text-align: center;
  916. &:hover,
  917. &:active,
  918. &:focus {
  919. background: none;
  920. color: @gray-darker;
  921. }
  922. &.focus-visible {
  923. text-decoration: underline;
  924. outline: none;
  925. }
  926. }
  927. .dropdown-menu {
  928. border-radius: 3px;
  929. }
  930. &.active {
  931. a,
  932. a:hover,
  933. a:focus {
  934. cursor: pointer;
  935. border: 0;
  936. border-bottom: 4px solid @purple;
  937. background: none;
  938. color: @gray-darkest;
  939. font-weight: 400;
  940. }
  941. }
  942. }
  943. &.border-bottom {
  944. border-bottom: 1px solid @trim;
  945. }
  946. &.anchor-right {
  947. li {
  948. margin: 0 0 0 30px;
  949. }
  950. }
  951. }
  952. /**
  953. * Responsive small screens
  954. * ============================================================================
  955. */
  956. @media (max-width: 767px) {
  957. .flex.flex-container {
  958. padding-left: 10px;
  959. padding-right: 10px;
  960. }
  961. }
  962. @media (max-width: 629px) {
  963. .table-user-info {
  964. .avatar {
  965. top: 24px;
  966. }
  967. }
  968. }