UNPKG

angular-ui-grid

Version:

A data grid for Angular

298 lines (269 loc) 6.38 kB
@import "./variables"; @import "./elements"; @btnColor: #eee; @btnBgColor: #dadada; @btnBorderHoverColor: #adadad; @btnActiveColor: #8c8c8c; .ui-grid-pager-panel { display: flex; justify-content: space-between; align-items: center; position: absolute; left: 0; bottom: 0; width: 100%; padding-top: 3px; padding-bottom: 3px; box-sizing: content-box; } .ui-grid-pager-container { float: left; } .ui-grid-pager-control { padding: 5px 0; display: flex; flex-flow: row nowrap; align-items: center; margin-right: 10px; margin-left: 10px; min-width: 135px; float: left; button, span, input { margin-right: 4px; } button { height: 25px; min-width: 26px; display: inline-block; margin-bottom: 0; font-weight: normal; text-align: center; vertical-align: middle; touch-action: manipulation; cursor: pointer; background: #f3f3f3; border: 1px solid #ccc; white-space: nowrap; padding: 6px 12px; font-size: 14px; line-height: 1.42857143; border-radius: 4px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; color: @btnColor; &:hover { border-color: @btnBorderHoverColor; text-decoration: none; } &:focus { border-color: @btnActiveColor; text-decoration: none; outline: 5px auto -webkit-focus-ring-color; outline-offset: -2px; } &:active { border-color: @btnBorderHoverColor; outline: 0; -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); &:focus { outline: 5px auto -webkit-focus-ring-color; outline-offset: -2px; } &:hover, &:focus { background-color: #c8c8c8; border-color: @btnActiveColor; } } &:hover, &:focus, &:active { color: @btnColor; background: @btnBgColor; } &[disabled] { cursor: not-allowed; opacity: 0.65; filter: alpha(opacity=65); -webkit-box-shadow: none; box-shadow: none; &:hover, &:focus { background-color: #f3f3f3; border-color: #ccc; } } } input { display: inline; height: 26px; width: 50px; vertical-align: top; color: #555555; background: #fff; border: 1px solid #ccc; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; padding: 5px 10px; font-size: 12px; line-height: 1.5; border-radius: 3px; &:focus { border-color: #66afe9; outline: 0; -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6); box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6); } &[disabled], &[readonly], &::-moz-placeholder { opacity: 1; } &::-moz-placeholder, &:-ms-input-placeholder, &::-webkit-input-placeholder { color: #999; } &::-ms-expand { border: 0; background-color: transparent; } &[disabled], &[readonly] { background-color: #eeeeee; } &[disabled] { cursor: not-allowed; } } .ui-grid-pager-max-pages-number { vertical-align: bottom; > * { vertical-align: bottom; } abbr { border-bottom: none; text-decoration: none; } } .first-bar { width: 10px; border-left: 2px solid #4d4d4d; margin-top: -6px; height: 12px; margin-left: -3px; } .first-bar-rtl { width: 10px; border-left: 2px solid #4d4d4d; margin-top: -6px; height: 12px; margin-right: -7px; } .first-triangle { width: 0; height: 0; border-style: solid; border-width: 5px 8.7px 5px 0; border-color: transparent #4d4d4d transparent transparent; margin-left: 2px; } .next-triangle { margin-left: 1px; } .prev-triangle { margin-left: 0; } .last-triangle { width: 0; height: 0; border-style: solid; border-width: 5px 0 5px 8.7px; border-color: transparent transparent transparent #4d4d4d; margin-left: -1px; } .last-bar { width: 10px; border-left: 2px solid #4d4d4d; margin-top: -6px; height: 12px; margin-left: 1px; } .last-bar-rtl { width: 10px; border-left: 2px solid #4d4d4d; margin-top: -6px; height: 12px; margin-right: -11px; } } .ui-grid-pager-row-count-picker { float: left; padding: 5px 10px; select { color: #555555; background: #fff; border: 1px solid #ccc; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; padding: 5px 10px; font-size: 12px; line-height: 1.5; border-radius: 3px; height: 25px; width: 67px; display: inline; vertical-align: middle; &:focus { border-color: #66afe9; outline: 0; -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6); box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6); } &[disabled], &[readonly], &::-moz-placeholder { opacity: 1; } &::-moz-placeholder, &:-ms-input-placeholder, &::-webkit-input-placeholder { color: #999; } &::-ms-expand { border: 0; background-color: transparent; } &[disabled], &[readonly] { background-color: #eeeeee; } &[disabled] { cursor: not-allowed; } } .ui-grid-pager-row-count-label { margin-top: 3px; } } .ui-grid-pager-count-container { float: right; margin-top: 4px; min-width: 50px; .ui-grid-pager-count { margin-right: 10px; margin-left: 10px; float: right; abbr { border-bottom: none; text-decoration: none; } } }