diff options
6 files changed, 235 insertions, 26 deletions
| -rw-r--r-- | src/buttons.less | 8 | ||||
| -rw-r--r-- | src/calendars.less | 210 | ||||
| -rw-r--r-- | src/forms.less | 28 | ||||
| -rw-r--r-- | src/layout.less | 4 | ||||
| -rw-r--r-- | src/menus.less | 6 | ||||
| -rw-r--r-- | src/variables.less | 5 |
diff --git a/src/buttons.less b/src/buttons.less index da831ea..6ae9e5f 100644 --- a/src/buttons.less +++ b/src/buttons.less @@ -18,7 +18,7 @@ vertical-align: middle; white-space: nowrap; &:focus { - background: @light-primary-color; + background: @light-secondary-color; text-decoration: none; } &:hover { @@ -41,18 +41,18 @@ color: @light-color; &:focus { background: @dark-primary-color; - border-color: darken(@dark-primary-color, 5%); + border-color: darken(@dark-primary-color, 2%); color: @light-color; } &:hover { background: darken(@dark-primary-color, 2%); - border-color: darken(@dark-primary-color, 5%); + border-color: darken(@dark-primary-color, 7%); color: @light-color; } &:active, &.active { background: darken(@dark-primary-color, 4%); - border-color: darken(@dark-primary-color, 7%); + border-color: darken(@dark-primary-color, 9%); color: @light-color; } &.loading { diff --git a/src/calendars.less b/src/calendars.less new file mode 100644 index 0000000..0a1fc42 --- /dev/null +++ b/src/calendars.less @@ -0,0 +1,210 @@ +// Calendars +.calendar { + border: .1rem solid @border-color; + border-radius: @border-radius; + display: block; + text-align: center; + + .calendar-nav { + align-content: space-between; + align-items: center; + background: @bg-color; + border-top-left-radius: @border-radius; + border-top-right-radius: @border-radius; + display: flex; + font-size: 2rem; + padding: 1rem; + } + + .calendar-header, + .calendar-body { + display: flex; + flex-wrap: wrap; + justify-content: center; + padding: 1rem 0; + + .calendar-date { + flex: 0 0 14.28%; + } + } + + .calendar-header { + background: @bg-color; + border-bottom: .1rem solid @border-color; + color: @gray-color; + font-size: 1.2rem; + } + + .calendar-body { + color: @dark-gray-color; + + .calendar-date { + border: 0; + overflow: hidden; + padding: .5rem; + + .date-item { + color: @dark-gray-color; + } + + &.prev-month, + &.next-month { + .date-item { + opacity: .25; + } + } + } + + .date-item { + appearance: none; + background: transparent; + border: .1rem solid transparent; + border-radius: 50%; + .control-transition(); + cursor: pointer; + display: inline-block; + height: 3.2rem; + line-height: 2rem; + padding: .5rem; + text-align: center; + text-decoration: none; + vertical-align: middle; + white-space: nowrap; + width: 3.2rem; + + &.date-today { + background: @secondary-color; + color: @primary-color; + } + + &:focus, + &:hover { + background: @light-secondary-color; + border-color: @dark-secondary-color; + color: @primary-color; + text-decoration: none; + } + &:active, + &.active { + background: @dark-primary-color; + border-color: darken(@dark-primary-color, 5%); + color: @light-color; + } + + // Calendar badge support + &.badge { + &::after { + position: absolute; + top: .4rem; + right: .4rem; + transform: translate(50%, -50%); + } + } + } + } + + .calendar-range { + position: relative; + + .date-item { + &::before { + background: @secondary-color; + content: ""; + height: 3.2rem; + position: absolute; + top: 50%; + left: 50%; + transform: translateY(-50%); + width: 50%; + z-index: -9; + } + } + + & + .calendar-range { + .date-item { + &::before { + left: 0; + width: 100%; + } + &.active { + &::before { + width: 50%; + } + } + } + } + } + + &.calendar-lg { + .calendar-body { + padding: 0; + + .calendar-date { + border-bottom: .1rem solid @border-color; + border-right: .1rem solid @border-color; + height: 10rem; + text-align: right; + + &:nth-child(7n) { + border-right: 0; + } + &:nth-last-child(-n+7) { + border-bottom: 0; + } + } + + .date-item { + height: 2.4rem; + padding: .1rem; + width: 2.4rem; + + &.badge { + &::after { + top: .25rem; + right: .25rem; + } + } + } + + .calendar-range { + .date-item { + &::before { + height: 2.4rem; + left: auto; + right: 0; + top: 1.7rem; + width: 2.2rem; + } + } + + & + .calendar-range { + .date-item { + &::before { + left: 0; + width: 100%; + } + &.active { + &::before { + right: 1.7rem; + width: auto; + } + } + } + } + } + } + + .calendar-event { + background: @secondary-color; + color: @primary-color; + display: block; + font-size: 1.2rem; + .label-base(); + margin: .2rem auto; + overflow: hidden; + text-align: left; + text-overflow: ellipsis; + white-space: nowrap; + } + } +} diff --git a/src/forms.less b/src/forms.less index 0f33fb5..f9dc328 100644 --- a/src/forms.less +++ b/src/forms.less @@ -53,23 +53,6 @@ line-height: 2rem; } - // Form status - .has-success &, - &.is-success { - border-color: @control-color-success; - &:focus { - .control-shadow(@control-color-success); - } - } - - .has-danger &, - &.is-danger { - border-color: @control-color-danger; - &:focus { - .control-shadow(@control-color-danger); - } - } - // Input types &[type=file] { height: auto; @@ -139,16 +122,25 @@ height: 4rem; padding: .9rem 2.4rem .9rem .8rem; } +} - // Select status +// Form validation states +.form-input, +.form-select { .has-success &, &.is-success { border-color: @control-color-success; + &:focus { + .control-shadow(@control-color-success); + } } .has-danger &, &.is-danger { border-color: @control-color-danger; + &:focus { + .control-shadow(@control-color-danger); + } } } diff --git a/src/layout.less b/src/layout.less index 7ebfea2..ac82e8c 100644 --- a/src/layout.less +++ b/src/layout.less @@ -10,6 +10,10 @@ &.grid-960 { max-width: 96rem + 2 * @layout-gutter; } + + &.grid-480 { + max-width: 48rem + 2 * @layout-gutter; + } } // Responsive grid system diff --git a/src/menus.less b/src/menus.less index 1849a32..99e5194 100644 --- a/src/menus.less +++ b/src/menus.less @@ -28,12 +28,12 @@ text-decoration: none; &:focus, &:hover { - color: @link-color; + color: @primary-color; } &:active, &.active { - background: @light-primary-color; - color: @dark-link-color; + background: @light-secondary-color; + color: @primary-color; } } } diff --git a/src/variables.less b/src/variables.less index 52da248..78ec0b6 100644 --- a/src/variables.less +++ b/src/variables.less @@ -22,7 +22,10 @@ // Core colors @primary-color: #5764c6; @dark-primary-color: darken(@primary-color, 5%); -@light-primary-color: lighten(@primary-color, 42%); +@light-primary-color: lighten(@primary-color, 2%); +@secondary-color: lighten(@primary-color, 40%); +@dark-secondary-color: darken(@secondary-color, 5%); +@light-secondary-color: lighten(@secondary-color, 2%); @dark-color: #333; @dark-gray-color: #666; @gray-color: #999; |