Timeselector

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

Normal

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

Hover

Timeselector previous and next buttons hover state
font-color: $gray-300
icon-color: $turquoise-700

Active

Timeselector previous and next buttons active state
font-color: $gray-400
icon-color: $turquoise-800

Disabled

Timeselector previous and next buttons disabled state
font-color: $gray-500
icon-color: $gray-500

Toggle buttons

Normal

Timeselector toggle buttons
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

Hover

Timeselector toggle buttons hover state
border-color: #fff
background-color: rgba(255, 255, 255, 0.2)

Active

Timeselector toggle buttons active state
font-color: #fff
border-color: #fff
background-color: rgba(255, 255, 255, 0.3)

Disabled

Timeselector toggle buttons disabled state
font-color: $gray-500
border-color: $gray-500

Calendar

Timeselector calendar

Week days

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

Day buttons normal

Timeselector calendar day buttons
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

Day buttons hover

Timeselector calendar day buttons hover state
border-width: 1px solid //inside
border-color: #fff
background-color: rgba(255, 255, 255, 0.2)

Day buttons active

Timeselector calendar day buttons active state
border-width: 1px solid //inside
border-color: #fff
background-color: rgba(255, 255, 255, 0.3)

Day buttons disabled

Timeselector calendar day buttons disabled state
font-color: $gray-500

Day buttons of previous and next month are disabled.

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

Normal

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

Hover

Timeselector collapsed light hover state
border-color: $gray-400

Disabled

Timeselector collapsed light disabled state
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

Normal

Timeselector light previous and next buttons
font-color: $gray-700
icon-color: $turquoise-600

Hover

Timeselector light previous and next buttons hover state
font-color: $gray-800
icon-color: $turquoise-700

Active

Timeselector light previous and next buttons active state
font-color: $gray-860
icon-color: $turquoise-900

Disabled

Timeselector light previous and next buttons disabled state
font-color: $gray-300
icon-color: $gray-300

Toggle buttons

Normal

Timeselector light toggle buttons
font-color: $turquoise-600
border-color: $gray-300

Hover

Timeselector light toggle buttons hover state
border-color: $turquoise-700
background-color: $gray-100

Active

Timeselector light toggle buttons active state
font-color: $turquoise-800
border-color: $turquoise-800
background-color: $gray-100

Disabled

Timeselector light toggle buttons disabled state
font-color: $gray-300
border-color: $gray-300

Calendar

Timeselector light calendar

Week days

Timeselector light calendar week days
font-color: $gray-500

Day buttons normal

Timeselector light calendar day buttons
font-color:$gray-700

Day buttons hover

Timeselector light calendar day buttons hover state
border-width: 1px solid //inside
border-color: $turquoise-700
background-color: $gray-100

Day buttons active

Timeselector light calendar day buttons active state
border-width: 1px solid //inside
border-color: $turquoise-800
background-color: $gray-100

Day buttons disabled

Timeselector light calendar day buttons disabled state
font-color: $gray-300

Day buttons of previous and next month are disabled.

Start time

Timeselector light start time
font-color: $gray-700

Apply button

Please use the primary button.