File: src/index.less

Recommend this page to a friend!
  Classes of Logik group   Angular Moment Picker   src/index.less   Download  
File: src/index.less
Role: Auxiliary data
Content type: text/plain
Description: Auxiliary data
Class: Angular Moment Picker
Pick times and dates in Angular.js applications
Author: By
Last change: Bump up 0.10.2

closes #180, #220
Date: 2 years ago
Size: 3,843 bytes
 

Contents

Class file image Download
@border-color: #f0f3f4; @text-color: #404040; @text-shadow: fade(#fff, 90%); @background: #fff; @box-shadow-color: fade(#000, 7.5%); @today-fg: #404040; @today-fg-shadow: fade(#fff, 90%); @today-bg: #e4eef5; @hover-bg-color: #fafbfb; @hover-bg-image: linear-gradient(#f0f3f4, @hover-bg-color); @disabled-fg: #abbbc7; @highlighted-bg-image: radial-gradient(transparent, fade(#000, 15%)); @selected-fg: #fff; @selected-fg-shadow: 0 -1px 0 fade(#000, 30%); @selected-bg-color: #45b1e8; @selected-bg-image: linear-gradient(#45b1e8, #3097de); @selected-border-color: #3ca0dd; .moment-picker-input { cursor: pointer; } .moment-picker { position: absolute; z-index: 1060; .moment-picker-container { color: @text-color; min-width: 15em; background: @background; padding: 4px; border: 1px solid @border-color; border-radius: 4px; position: absolute; margin-top: 4px; margin-left: -.5em; box-shadow: 0 2px 4px @box-shadow-color; &:before, &:after { content: ''; display: block; width: 0; height: 0; border: 8px solid transparent; border-top: none; position: absolute; top: -9px; left: 15px; } &:before { border-bottom-color: @border-color; border-width: 9px; } &:after { border-bottom-color: @background; margin-top: 1px; margin-left: 1px; } } // inline picker &.inline { display: block; position: relative; .moment-picker-container { position: relative; margin: 0; &:before, &:after { content: none; } } } // picker on top &.top .moment-picker-container { bottom: 100%; margin-top: auto; margin-bottom: 4px; &:before, &:after { border: 8px solid transparent; border-bottom: none; top: auto; bottom: -9px; } &:before { border-top-color: @border-color; border-width: 9px; } &:after { border-top-color: @background; margin-top: auto; margin-bottom: 1px; } } // picker on right &.right .moment-picker-container { right: 0; margin-left: auto; margin-right: -.5em; &:before, &:after { left: auto; right: 15px; } &:after { margin-left: auto; margin-right: 1px; } } // all views table { border-collapse: collapse; border-spacing: 0; min-width: 100%; table-layout: fixed; } th { font-weight: bold; &:first-child, &:last-child { width: 2em; } } th, td { padding: 0; text-align: center; min-width: 2em; height: 2em; text-shadow: 0 1px 0 @text-shadow; cursor: pointer; border-radius: 4px; &:hover { background-color: @hover-bg-color; background-image: @hover-bg-image; } &.disabled, &.disabled:hover { color: @disabled-fg; background: none; cursor: default; } } td { &.today { background: @today-bg; color: @today-fg; text-shadow: 0 1px 0 @today-fg-shadow; } &.selected { color: @selected-fg; text-shadow: @selected-fg-shadow; border-color: @selected-border-color; background-color: @selected-bg-color; background-image: @selected-bg-image; } &.highlighted { background-image: @highlighted-bg-image; } } // decade view, year view .decade-view td, .year-view td { height: 3.4em; } // month view .month-view { .moment-picker-specific-views th { background: none; cursor: default; } td { width: 1.4285714286em; } } // day view, hour view .day-view td, .hour-view td { height: 2.3333333333em; } // minute view .minute-view td { height: 1.8em; } }