homelab/traefik
1
0
Fork 0
Code Activity

New web ui

Browse source
This commit is contained in:
Jan Kuri 2018-04-27 13:12:04 +02:00 • committed by Traefiker Bot
parent e09d5cb4ec
commit 9c651ae913
105 changed files with 7314 additions and 5514 deletions
Download patch file Download diff file Expand all files Collapse all files

26
webui/src/styles/app.sass Normal file
View file

@ -0,0 +1,26 @@
@charset "utf-8"
@import 'typography'
@import 'colors'
@import '../../node_modules/bulma/sass/utilities/all'
@import '../../node_modules/bulma/sass/base/all'
@import '../../node_modules/bulma/sass/grid/columns'
@import '../../node_modules/bulma/sass/elements/container'
@import '../../node_modules/bulma/sass/elements/tag'
@import '../../node_modules/bulma/sass/elements/box'
@import '../../node_modules/bulma/sass/elements/form'
@import '../../node_modules/bulma/sass/elements/table'
@import '../../node_modules/bulma/sass/components/navbar'
@import '../../node_modules/bulma/sass/components/tabs'
@import '../../node_modules/bulma/sass/elements/notification'
@import 'nav'
@import 'content'
@import 'message'
@import 'label'
@import 'charts'
@import 'helper'
html
font-family: $open-sans
height: 100%
background: $background

54
webui/src/styles/charts.sass Normal file
View file

@ -0,0 +1,54 @@
.line-chart
width: 100%
height: 320px
background-color: $white
svg
font: 10px sans-serif
.line
fill: none
stroke: $blue
stroke-width: 3px
shape-rendering: geometricPrecision
.axis line, .axis path
stroke: $text
opacity: .2
shape-rendering: crispEdges
fill: none
.axis path
display: none
.axis text
fill: $text
.bar-chart
width: 100%
height: 320px
background-color: $white
.bar
fill: rgba($blue, 0.91)
&:hover
fill: lighten($blue, 10)
.axis text
fill: $text
font: 10px sans-serif
.axis line, .axis path
fill: none
opacity: .2
stroke: $text
.axis--x
text
font: 12px sans-serif
path
display: none

34
webui/src/styles/colors.sass Normal file
View file

@ -0,0 +1,34 @@
$background: #F1F5F7
$border: #DFE2E5
$border-secondary: #E6EAEE
$text: #7F8FA4
$text-dark: #3D495C
$text-grey: #8A9AAE
$color: #354052
$color-secondary: #7F8FA4
$color-disabled: #C2CAD4
$color-search: #A1A7AF
$border: #DFE2E5
$divider: #DFE2E5
$border-blue: #2EA2F8
$border-light: #f1f3f5
$blue: #0294FF
$blue-secondary: #1991EB
$blue-background: #2EA1F8
$green: #39B54A
$green-secondary: #45B854
$green-bg: #36AF47
$red: #f03e3e
$red-secondary: #ED1C24
$yellow: #ffd43b
$yellow-secondary: #F7981C
$grey: #7F8FA4
$grey-light: #adb5bd
$orange-secondary: #FD9A18
$grey-background: #E8EAF1
$grey-color: #8D909F
$turquoise: #01BCD4

142
webui/src/styles/content.sass Normal file
View file

@ -0,0 +1,142 @@
.content
background: transparent
margin: 40px 0
.subtitle
font-size: 15px
text-transform: uppercase
color: $black
font-weight: $weight-bold
text-transform: uppercase
margin: 10px 0 0 0
.list-title
color: $text-dark
weight: $weight-semibold
margin: 5px 0 0 0
.list-item
width: 100%
display: block
align-items: center
font-size: 12px
padding: 6px 10px
border-top: 1px solid $border-light
.columns
.column
display: flex
align-items: center
.icon
width: 22px
height: 22px
display: block
float: left
margin-right: 10px
.content-item
background: $white
border: 1px solid $border-secondary
margin: 10px 0
border-radius: 4px
box-shadow: 1px 2px 5px rgba($border, 0.4)
h2
color: $text-dark
font-size: 14px
padding: 20px 20px 0 20px
font-weight: $weight-semibold
.content-item-data
padding: 10px 20px
.item-data
display: flex
align-items: center
justify-content: space-between
padding: 5px 10px
&.border-right
border-right: 1px solid #DFE3E9
.data-blue
color: $blue
font-size: 22px
font-weight: $weight-semibold
.data-grey
color: $grey
font-size: 12px
font-weight: $weight-light
.widget-item
min-height: 80px
padding: 20px
h1
color: $text-dark
font-size: 18px
font-weight: $weight-light
img
width: 40px
heught: 40px
display: block
float: left
margin-right: 10px
span
font-size: 13px
display: block
&.mtop12
margin-top: 12px
.loading-text
height: 320px
display: flex
align-items: center
justify-content: center
.main-loader
width: 70px
display: block
margin: 15px auto
.search-container
height: 50px
background: $white
border-radius: 4px
color: $black
margin: 10px 0
display: flex
align-items: center
position: relative
box-shadow: 1px 2px 5px rgba($border, 0.4)
border: 1px solid $border-secondary
.icon
position: absolute
left: 10px
top: 13px
input
font-size: 16px
color: $text
width: 100%
height: 48px
padding-left: 50px
border: none
outline: none
font-weight: $weight-light
border-radius: 4px
.notification
background: $white
border-radius: 4px
color: $text
font-size: 16px
box-shadow: 1px 2px 5px rgba($border, 0.4)
border: 1px solid $border-secondary

2
webui/src/styles/helper.sass Normal file
View file

@ -0,0 +1,2 @@
.padding-5-10
padding: 5px 10px

29
webui/src/styles/label.sass Normal file
View file

@ -0,0 +1,29 @@
.label
padding: 5px 10px
background: $white
color: $color
font-size: 12px
font-family: $weight-semibold
width: 100%
display: flex
align-items: center
justify-content: center
border: 1px solid $border
background: linear-gradient(0deg, #F2F4F7 0%, #FFFFFF 100%)
&.green
background: $green-secondary
&.red
background: $red-secondary
&.yellow
background: $yellow-secondary
&.blue
background: $blue-secondary
span
display: inline-flex
float: left
align-items: center

89
webui/src/styles/message.sass Normal file
View file

@ -0,0 +1,89 @@
.message
display: block
font-size: 14px
margin: 20px 0 30px 0
border: 1px solid $border
background: $white
border-radius: 4px
box-shadow: 1px 2px 5px rgba($border, 0.4)
.message-header
color: $color-secondary
border-bottom: 1px solid $border-secondary
padding: 20px 10px
background: #f8f9fa
border-top-left-radius: 4px
border-top-right-radius: 4px
h2
font-size: 14px
weight: $weight-bold
display: flex
justify-content: space-between
&.red
background: rgba($red-secondary, 0.4)
border-bottom: 1px solid $red-secondary
color: $red-secondary
p
color: $red-secondary
&.green
background-color: rgba($green-secondary, 0.4)
border-bottom: 1px solid $green-secondary
color: $green-secondary
p
color: darken($green-secondary, 10) !important
&.orange
background-color: rgba($orange-secondary, 0.4)
border-bottom: 1px solid $orange-secondary
color: $orange-secondary
p
color: $orange-secondary
&.blue
background-color: rgba($blue-background, 0.4)
border-bottom: 1px solid $blue-background
color: $blue-background
p
color: $blue-background !important
img
margin-right: 15px
.message-body
.field
margin: 5px 10px
padding-bottom: 10px
.tags-list
margin: 5px 10px
.control
width: 100%
margin: 5px 0
.tags
width: 100%
.tag
width: 50%
h2
margin: 10px 10px 0 10px
color: $black
hr
margin: 5px 0
.message-subheader
border-bottom: 1px solid $border-secondary
padding: 10px
margin-bottom: 5px

16
webui/src/styles/nav.sass Normal file
View file

@ -0,0 +1,16 @@
.navbar
border-bottom: 1px solid $border
box-shadow: 1px 2px 5px rgba($border, 0.4)
height: 60px
.navbar-item
font-size: 13px
text-transform: uppercase
font-weight: $weight-semibold
.navbar-logo
width: 40px
min-height: 40px
&:hover
background: transparent

14
webui/src/styles/typography.sass Normal file
View file

@ -0,0 +1,14 @@
=font-face($family, $path, $weight: normal, $style: normal)
@font-face
font-family: $family
src: url('#{$path}.ttf') format('truetype')
font-weight: $weight
font-style: $style
+font-face('Open Sans', '/assets/fonts/OpenSans-Light', 300, 'light')
+font-face('Open Sans', '/assets/fonts/OpenSans-Regular', 400, 'regular')
+font-face('Open Sans', '/assets/fonts/OpenSans-Semibold', 600, 'semibold')
+font-face('Open Sans', '/assets/fonts/OpenSans-Bold', 700, 'bold')
+font-face('Open Sans', '/assets/fonts/OpenSans-ExtraBold', 800, 'extrabold')
$open-sans: 'Open Sans', sans-serif