section { color: $midgray; flex: 0 0 auto; font-weight: lighter; font-size: 16px; margin-top: $pad-xl; text-align: center; } .items { display: flex; flex-direction: column; flex: 1 0 auto; a.page { display: inline-block; margin: $pad-m; text-decoration: none; color: $purple; font-size: 12px; float: right; } a.page:hover { text-decoration: underline; } a.page.empty { color: $midgray; text-decoration: none; cursor: default; } } .pagination { box-sizing: border-box; display: flex; flex-direction: row; justify-content: space-between; margin-bottom: $pad-l; padding: 0 $pad-xl; width: 100%; } .item { display: flex; flex-direction: column; padding: $pad-m $pad-xl; margin: 0px; border-bottom: 1px solid $midgray; box-sizing: border-box; width: 100%; .committeeAndCost { align-items: center; display: flex; flex-direction: row; justify-content: space-between; } .committee { color: $midgray; font-size: 12px; font-weight: bold; margin: 0px; } a { text-decoration: none; } .details-row { color: $text; font-size: 16px; font-weight: lighter; line-height: 24px; margin: $pad-m 0; padding: 0px; b { color: $darkgray; } em { color: $midgray; margin: 0 $pad-s; } } .status { color: $midgray; font-size: 12px; margin: 0px; } .cost { display: inline-block; text-align: center; width: 120px; height: 24px; font-size: 12px; color: $midgray; border-radius: $pad-s; border: 1px solid $midgray; box-sizing: border-box; padding: 2*$pad-s; margin: 2*$pad-s 0; } .approved { background-color: #ffd9d9; } .processed { background-color: #d9ffd9; } .rejected { background-color: $midgray; color: $lightgray; } .newItem { background-color: #fff7d9; } } .emptyItems { margin: $pad-xl; color: $midgray; font-size: 12px; font-style: italic; text-align: center; } $button-size: 24px; .btn-floating { position: fixed; bottom: $button-size; right: $button-size; padding: $button-size/2; color: $gold; background-color: $purple; text-decoration: none; font-weight: bold; z-index: 1000; border-radius: 50%; text-align: center; box-shadow: 0 0 6px rgba(0,0,0,.16),0 6px 12px rgba(0,0,0,.32); span { display: block; width: 36; height: 36; font-size: 28; } &:hover { background-color: darken($purple, 10%); box-shadow: 0 0 12px rgba(0,0,0,.16),0 12px 12px rgba(0,0,0,.32); } }