Timeselector

timeframe global timepicker

Introduction

The timeselector is a component to select a specific time range.

Timeselector example

We distinguish between the global timeselector and the in-page timeselector.

Global timeselector

The global timeselector affects the whole application. To ensure users are aware of the global usage, this timeselector is always placed on the very top as part of the menu bar.

In-page timeselector

On some use cases, e.g. comparison, it is necessary to select a timeframe besides the global timeframe. The selected time is only valid temporarily, until the user leaves the page. According to the use case the timeselectors features can vary. In general, the in-page timeselector is used in the light version.

Styleguide

Collapsed timeselector

Timeselector collapsed

Normal

font-family: Bernina Sans Regular
font-size: 14px
font-color: #fff
height: same as menu bar
vertical-align: center
icon: 20px
icon-color: #fff
padding-left: 12px
padding-right: 12px
background-color: transparent

Timeselector collapsed hover

Hover

background-color: $gray-800

Timeselector collapsed disabled

Disabled

icon-color: $gray-500
text-color: $gray-500

Expanded timeselector

Timeselector expanded

Timeselector area

font-family: Bernina Sans Regular
font-size: 12px
font-color: #fff
padding: 12px
background-color: $gray-640
border-width: 1px solid //inside
border-color: $gray-640
border-radius: 3px //only on outside corners

Previous and next buttons

Timeselector previous and next buttons

Normal

font-family: Bernina Sans Regular
font-size: 12px
font-color: #fff
margin-bottom: 12px
icon: 20px
icon-color: $turquoise-600

Timeselector previous and next buttons hover state

Hover

font-color: $gray-300
icon-color: $turquoise-700

Timeselector previous and next buttons active state

Active

font-color: $gray-400
icon-color: $turquoise-800

Timeselector previous and next buttons disabled state

Disabled

font-color: $gray-500
icon-color: $gray-500

Toggle buttons

Timeselector toggle buttons

Normal

font-family: Bernina Sans Regular
font-size: 14px
font-color: $gray-100
margin-bottom: 16px
border-width: 1px solid //inside
border-color: $gray-500
border-radius: 3px //only on outside borders
button-padding-left: 16px
button-padding-right: 16px

Timeselector toggle buttons hover state

Hover

border-color: #fff
background-color: rgba(255, 255, 255, 0.2)

Timeselector toggle buttons active state

Active

font-color: #fff
border-color: #fff
background-color: rgba(255, 255, 255, 0.3)

Timeselector toggle buttons disabled state

Disabled

font-color: $gray-500
border-color: $gray-500

Calendar

Timeselector calendar

Timeselector calendar week days

Week days

font-family: Bernina Sans Regular
font-size: 12px
color: #fff
margin-bottom: 8px

Timeselector calendar day buttons

Day buttons normal

height: 32px
width: 32px
column-gap: 4px
row-gap: 4px
font-family: Bernina Sans Regular
font-size: 14px
font-color: #fff
text-align: center
background-color: transparent

Timeselector calendar day buttons hover state

Day buttons hover

border-width: 1px solid //inside
border-color: #fff
background-color: rgba(255, 255, 255, 0.2)

Timeselector calendar day buttons active state

Day buttons active

border-width: 1px solid //inside
border-color: #fff
background-color: rgba(255, 255, 255, 0.3)

Timeselector calendar day buttons disabled state

Day buttons disabled (of previous and next month)

font-color: $gray-500

Start time

Timeselector start time

font-family: Bernina Sans Regular
font-size: 12px
font-color: #fff
margin-bottom: 16px
margin-top: 16px

Please use input fields to type in the start type.

Apply button

Please use the primary button on dark background.

Timeselector on light background

Collapsed

Timeselector collapsed on light background

Normal

height: 32px
font-color: $gray-700
border-width: 1px //inside
border-radius: 3px
border-color: $gray-300
icon-color: $turquoise-600

Timeselector collapsed light hover state

Hover

border-color: $gray-400

Timeselector collapsed light disabled state

Disabled

background-color: $gray-130
border-color: $gray-300
icon-color: $gray-300
text-color: $gray-300

Expanded

Timeselector expanded on light background

Timeselector area

font-color: $gray-700
background-color: #fff
border-color: $gray-300

Previous and next buttons

Timeselector light previous and next buttons

Normal

font-color: $gray-700
icon-color: $turquoise-600

Timeselector light previous and next buttons hover state

Hover

font-color: $gray-800
icon-color: $turquoise-700

Timeselector light previous and next buttons active state

Active

font-color: $gray-860
icon-color: $turquoise-900

Timeselector light previous and next buttons disabled state

Disabled

font-color: $gray-300
icon-color: $gray-300

Toggle buttons

Timeselector light toggle buttons

Normal

font-color: $turquoise-600
border-color: $gray-300

Timeselector light toggle buttons hover state

Hover

border-color: $turquoise-700
background-color: $gray-100

Timeselector light toggle buttons active state

Active

font-color: $turquoise-800
border-color: $turquoise-800
background-color: $gray-100

Timeselector light toggle buttons disabled state

Disabled

font-color: $gray-300
border-color: $gray-300

Calendar

Timeselector light calendar

Timeselector light calendar week days

Week days

font-color: $gray-500

Timeselector light calendar day buttons

Day buttons normal

font-color:$gray-700

Timeselector light calendar day buttons hover state

Day buttons hover

border-width: 1px solid //inside
border-color: $turquoise-700
background-color: $gray-100

Timeselector light calendar day buttons active state

Day buttons active

border-width: 1px solid //inside
border-color: $turquoise-800
background-color: $gray-100

Timeselector light calendar day buttons disabled state

Day buttons disabled (of previous and next month)

font-color: $gray-300

Start time

Timeselector light start time

font-color: $gray-700

Apply button

Please use the primary button.