less/modules/pager.less

0001 //
0002 // Pager
0003 // --------------------------------------------------
0004
0005 .pager {
0006   background-color: @base;
0007   border-radius: 6px;
0008   color: @inverse;
0009   font-size: 16px;
0010   font-weight: 700;
0011   .inline-block();
0012
0013   li {
0014     &:first-child {
0015       > a,
0016       > span {
0017         border-left: none;
0018         .border-radius(6px 0 0 6px);
0019       }
0020     }
0021     &.pager-center {
0022       padding: @pager-padding;
0023       padding-left: 0;
0024       padding-right: 0;
0025       .inline-block();
0026     }
0027     > a,
0028     > span {
0029       background: none;
0030       border: none;
0031       border-left: 2px solid mix(@base, black, 85%);
0032       color: @inverse;
0033       padding: @pager-padding;
0034       text-decoration: none;
0035       white-space: nowrap;
0036       .border-radius(0 6px 6px 0);
0037
0038       &:hover, &:focus {
0039         background-color: mix(@base, black, 85%);
0040       }
0041       &:active {
0042         background-color: mix(@base, black, 85%);
0043       }
0044
0045       // Add some spacing between the icon and text
0046       [class*="fui-"] + span {
0047         margin-left: 8px;
0048       }
0049       span + [class*="fui-"] {
0050         margin-left: 8px;
0051       }
0052     }
0053   }
0054 }