dotfiles

  1@import "variables";
  2
  3.pagination {
  4  margin-top: 50px;
  5
  6  input {
  7    align-items: center;
  8    height: 30px;
  9    width: 30px;
 10    padding: 8px;
 11    margin: 0 10px 0 2px;
 12
 13    &[type="number"] {
 14      -moz-appearance: textfield;
 15
 16      &::-webkit-inner-spin-button,
 17      &::-webkit-outer-spin-button {
 18        cursor: pointer;
 19        opacity: 1 !important;
 20        text-align: center;
 21        -webkit-appearance: none !important;
 22      }
 23    }
 24  }
 25
 26  button {
 27    background: var(--background);
 28    border-color: var(--accent-secondary);
 29    border-radius: $corner-radius;
 30    color: var(--color);
 31    font-family: inherit;
 32    padding: 3px 8px;
 33
 34    &:active {
 35      background-color: var(--accent-alpha-70);
 36    }
 37
 38    &:focus {
 39      background-color: var(--accent);
 40      outline: 0;
 41    }
 42
 43    &:hover {
 44      background-color: var(--accent-alpha-20);
 45      color: var(--accent-secondary);
 46      cursor: pointer;
 47    }
 48  }
 49
 50  &__buttons {
 51    display: grid;
 52    grid-template-columns: 1fr auto 1fr;
 53    align-items: center;
 54    justify-content: end;
 55
 56    &-input {
 57      grid-column: 2;
 58    }
 59
 60    &-previous {
 61      grid-column: 1;
 62      justify-self: left;
 63    }
 64
 65    &-next {
 66      grid-column: 3;
 67      justify-self: right;
 68    }
 69  }
 70
 71  a {
 72    display: flex;
 73    margin: 10px;
 74    overflow: hidden;
 75    text-decoration: none;
 76    text-overflow: ellipsis;
 77    white-space: nowrap;
 78  }
 79
 80  &__related {
 81    border-top: 3.2px dotted var(--color);
 82    padding-top: 0.5rem;
 83
 84    &-title {
 85      color: var(--accent-secondary-alpha-70);
 86    }
 87
 88    &-posts {
 89      display: flex;
 90      justify-content: space-between;
 91      list-style: none;
 92      padding-left: 0;
 93
 94      h3 {
 95        margin-top: 0;
 96      }
 97
 98      li {
 99        flex: 1;
100
101        &.next {
102          text-align: right;
103        }
104
105        &.previous {
106          text-align: left;
107        }
108      }
109    }
110  }
111}
112
113.button {
114  appearance: none;
115  border-radius: $corner-radius;
116  cursor: pointer;
117  font-size: 1rem;
118  padding: 0;
119
120  + .button {
121    margin-left: 10px;
122  }
123
124  a {
125    display: flex;
126    overflow: hidden;
127    padding: 8px 16px;
128    text-decoration: none;
129    text-overflow: ellipsis;
130    white-space: nowrap;
131  }
132
133  &__text {
134    overflow: hidden;
135    text-overflow: ellipsis;
136    white-space: nowrap;
137  }
138
139  &.next {
140    grid-column: 3;
141    justify-self: left;
142
143    &.button__icon {
144      margin-left: 8px;
145    }
146  }
147
148  &.previous {
149    grid-column: 1;
150    justify-self: right;
151  }
152}