"Fossies" - the Fresh Open Source Software Archive

Member "wordpress/wp-content/themes/twentytwentyone/assets/sass/06-components/pagination.scss" (1 Dec 2020, 4319 Bytes) of package /linux/www/wordpress-5.7-RC1.tar.gz:


As a special service "Fossies" has tried to format the requested source page into HTML format using (guessed) SASS/SCSS source code syntax highlighting (style: standard) with prefixed line numbers. Alternatively you can here view or download the uninterpreted source code file.

    1 /* Next/Previous navigation */
    2 
    3 // All navigation
    4 .navigation {
    5     color: var(--global--color-primary);
    6 
    7     a {
    8         color: var(--global--color-primary);
    9         text-decoration: none;
   10 
   11         &:hover {
   12             color: var(--global--color-primary-hover);
   13             text-decoration: underline;
   14             text-decoration-style: dotted;
   15         }
   16 
   17         &:focus {
   18             color: var(--global--color-secondary);
   19         }
   20 
   21         &:active {
   22             color: var(--global--color-primary);
   23         }
   24     }
   25 
   26     .nav-links {
   27 
   28         > * {
   29             min-width: 44px;
   30             min-height: 44px;
   31         }
   32 
   33         .nav-next a,
   34         .nav-previous a {
   35             display: flex;
   36             flex-direction: column;
   37         }
   38 
   39         .dots {
   40             text-align: center;
   41         }
   42 
   43         @include media(tablet) {
   44             display: flex;
   45             justify-content: center;
   46             flex-wrap: wrap;
   47 
   48             .nav-next,
   49             .nav-previous {
   50                 flex: 0 1 auto;
   51                 margin-bottom: inherit;
   52                 margin-top: inherit;
   53                 max-width: calc(50% - (0.5 * var(--global--spacing-unit)));
   54             }
   55 
   56             .nav-next {
   57                 text-align: right;
   58             }
   59         }
   60     }
   61 
   62     .svg-icon {
   63         display: inline-block;
   64         fill: currentColor;
   65         vertical-align: middle;
   66         position: relative;
   67     }
   68 
   69     .nav-previous .svg-icon,
   70     .prev .svg-icon {
   71         top: -2px;
   72         margin-right: calc(0.25 * var(--global--spacing-unit));
   73     }
   74 
   75     .nav-next .svg-icon,
   76     .next .svg-icon {
   77         top: -1px;
   78         margin-left: calc(0.25 * var(--global--spacing-unit));
   79     }
   80 }
   81 
   82 // Singular navigation
   83 .post-navigation {
   84 
   85     margin: var(--global--spacing-vertical) auto;
   86 
   87     @include media(desktop) {
   88         margin: var(--global--spacing-vertical) auto;
   89     }
   90 
   91     @extend %responsive-alignwide-width;
   92 
   93     .meta-nav {
   94         line-height: var(--global--line-height-body);
   95         color: var(--global--color-primary);
   96     }
   97 
   98     .post-title {
   99         display: inline-block;
  100         font-family: var(--global--font-primary);
  101         font-size: var(--global--font-size-lg);
  102         font-weight: var(--pagination--font-weight-strong);
  103         line-height: var(--global--line-height-heading);
  104         @include media(desktop) {
  105             margin: 5px calc(24px + (0.25 * var(--global--spacing-unit))) 0;
  106         }
  107     }
  108 
  109     .nav-links {
  110         @include media(mobile) {
  111             justify-content: space-between;
  112         }
  113     }
  114 
  115     .nav-next,
  116     .nav-previous {
  117         margin-top: var(--global--spacing-vertical);
  118         margin-bottom: var(--global--spacing-vertical);
  119 
  120         &:first-child {
  121             margin-top: 0;
  122         }
  123 
  124         &:last-child {
  125             margin-bottom: 0;
  126         }
  127     }
  128 }
  129 
  130 // Index/archive navigation
  131 .pagination,
  132 .comments-pagination {
  133 
  134     border-top: 3px solid var(--global--color-border);
  135     padding-top: var(--global--spacing-vertical);
  136     margin: var(--global--spacing-vertical) auto;
  137 
  138     @include media(desktop) {
  139         margin: var(--global--spacing-vertical) auto;
  140     }
  141 
  142     @extend %responsive-alignwide-width;
  143 
  144     // Resets the top margin added to the .nav-links items below.
  145     .nav-links {
  146         margin-top: calc(-1 * var(--global--spacing-vertical));
  147 
  148         a:hover {
  149             color: var(--pagination--color-link-hover);
  150         }
  151 
  152         .is-dark-theme & {
  153 
  154             a:active,
  155             a:hover:active,
  156             a:hover:focus {
  157                 color: var(--global--color-background);
  158             }
  159         }
  160 
  161         .has-background-white & {
  162 
  163             a:active,
  164             a:hover:active,
  165             a:hover:focus {
  166                 color: var(--global--color-white);
  167             }
  168         }
  169     }
  170 
  171     .nav-links > * {
  172         color: var(--pagination--color-text);
  173         font-family: var(--pagination--font-family);
  174         font-size: var(--pagination--font-size);
  175         font-weight: var(--pagination--font-weight);
  176         margin-top: var(--global--spacing-vertical);
  177         margin-left: calc(0.66 * var(--global--spacing-unit));
  178         margin-right: calc(0.66 * var(--global--spacing-unit));
  179 
  180         &.current {
  181             text-decoration: underline;
  182         }
  183 
  184         &:not(.dots):not(.current):hover {
  185             text-decoration-style: dotted;
  186         }
  187 
  188         &:first-child {
  189             margin-left: 0;
  190         }
  191 
  192         &:last-child {
  193             margin-right: 0;
  194         }
  195 
  196         &.next {
  197             margin-left: auto;
  198         }
  199 
  200         &.prev {
  201             margin-right: auto;
  202         }
  203     }
  204 
  205     @include media(desktop-only) {
  206 
  207         .nav-links {
  208             display: flex;
  209             flex-wrap: wrap;
  210         }
  211 
  212         .page-numbers {
  213             display: none;
  214 
  215             &.prev,
  216             &.next {
  217                 display: inline-block;
  218                 flex: 0 1 auto;
  219             }
  220         }
  221     }
  222 
  223     @include media(mobile-only) {
  224 
  225         .nav-short {
  226             display: none;
  227         }
  228     }
  229 }
  230 
  231 // Comments pagination
  232 .comments-pagination {
  233     padding-top: calc(0.66 * var(--global--spacing-vertical));
  234     margin: calc(3 * var(--global--spacing-vertical)) auto;
  235 
  236     @include media(desktop) {
  237         margin: calc(3 * var(--global--spacing-vertical)) auto calc(4 * var(--global--spacing-vertical)) auto;
  238     }
  239 
  240     .nav-links > * {
  241         font-size: var(--global--font-size-md);
  242     }
  243 }