217 lines
3.8 KiB
Sass
217 lines
3.8 KiB
Sass
|
|
$add-green: #3AA95E
|
|
$add-green-hover: #3BA85D
|
|
|
|
$add-var-bg: #c2c3c5
|
|
$add-var-color: $white
|
|
$add-var-radius: 4px
|
|
|
|
$deactivate-red: #EB3A3D
|
|
$deactivate-red-hover: #D12F2F
|
|
|
|
$deactivate-bg: #e93d3c
|
|
|
|
$heading-color: #63a4a3
|
|
$heading-size: 18px
|
|
|
|
$input-border: 1px solid #eeedec
|
|
$input-radius: 4px
|
|
$input-color: #8e8f8e
|
|
$input-width: 78px
|
|
$input-height: 32px
|
|
|
|
$setting-section-border: 2px solid #f2f3ef
|
|
|
|
$env-vars-bg: #f2f3ef
|
|
$env-vars-color: #8e8f8e
|
|
$env-vars-size: 16px
|
|
$env-vars-radius: 4px
|
|
$env-vars-pw-bg: #eeedec
|
|
|
|
$input-main-height: 30px
|
|
|
|
|
|
.small-title
|
|
font-size: 18px
|
|
color: $heading-color
|
|
font-weight: 400
|
|
|
|
|
|
.settings
|
|
padding-top: .8em
|
|
|
|
.settings-section
|
|
padding: 0 0 1em
|
|
margin-bottom: 1.5em
|
|
border-bottom: $setting-section-border
|
|
&:last-of-type
|
|
border-bottom: none
|
|
.small-title
|
|
margin-top: 0
|
|
|
|
%settings-list
|
|
padding: 0
|
|
margin: 0
|
|
list-style: none
|
|
li
|
|
margin-bottom: 1rem
|
|
|
|
.settings-list--columns
|
|
@extend %settings-list
|
|
li
|
|
@media #{$medium-up}
|
|
display: inline-block
|
|
width: grid-calc(11, 24)
|
|
|
|
.settings-list--envvars
|
|
@extend %settings-list
|
|
|
|
.settings-input
|
|
display: inline-block
|
|
margin-right: 1rem
|
|
vertical-align: middle
|
|
& + .label
|
|
vertical-align: middle
|
|
input
|
|
display: inline-block
|
|
height: 32px
|
|
width: 80px
|
|
border: 1px solid #eeedec
|
|
border-radius: 4px
|
|
font-size: $font-size-s
|
|
color: #8e8f8e
|
|
text-align: center
|
|
|
|
.settings-envvar
|
|
padding: .6em .5em
|
|
border-radius: 4px
|
|
background-color: #F6F5F5
|
|
|
|
.env-var-name
|
|
display: inline-block
|
|
position: relative
|
|
width: grid-calc(6, 12)
|
|
vertical-align: middle
|
|
overflow: hidden
|
|
&:after
|
|
content: ""
|
|
@include fadeOut(right, -90deg, #F6F5F5)
|
|
|
|
.env-var-value
|
|
display: inline-block
|
|
width: grid-calc(4, 12)
|
|
@media #{$medium-up}
|
|
width: grid-calc(3, 12)
|
|
|
|
input
|
|
display: inline-block
|
|
width: 100%
|
|
padding: 0.7em 0.5em 0.7em 2.2em
|
|
border-radius: 4px
|
|
border: none
|
|
background-color: #eeedec
|
|
color: #8e8f8e
|
|
@extend .icon-lock
|
|
background:
|
|
size: 14px
|
|
repeat: no-repeat
|
|
position: 0.4em 0.7em
|
|
|
|
.env-var-action
|
|
position: relative
|
|
display: inline-block
|
|
line-height: 2
|
|
width: grid-calc(2, 24)
|
|
float: right
|
|
|
|
.icon-delete
|
|
@extend %icon
|
|
@extend .icon-delete
|
|
display: block
|
|
width: 1.1em
|
|
height: 1.3em
|
|
margin: .2em auto 0
|
|
|
|
.tooltip
|
|
display: none
|
|
position: absolute
|
|
right: 0
|
|
left: 0
|
|
top: -2.7em
|
|
width: 4.2em
|
|
margin: auto
|
|
padding: 0 .8em
|
|
z-index: 5
|
|
background-color: #818383
|
|
border-radius: 4px
|
|
color: $white
|
|
&:before
|
|
content: ""
|
|
position: absolute
|
|
bottom: -0.3em
|
|
left: 39%
|
|
width: 1em
|
|
height: 1em
|
|
transform: rotate(45deg)
|
|
z-index: -1
|
|
background-color: #818383
|
|
|
|
&:hover
|
|
.icon-delete
|
|
@extend .icon-delete-hover
|
|
.tooltip
|
|
display: block
|
|
|
|
|
|
.form--envvar
|
|
.form-elem
|
|
display: inline-block
|
|
vertical-align: middle
|
|
|
|
.form-elem:first-of-type,
|
|
.form-elem:nth-of-type(2)
|
|
width: 49.6%
|
|
.form-elem:nth-of-type(3)
|
|
width: 50%
|
|
.form-elem:last-of-type
|
|
width: 50%
|
|
float: right
|
|
text-align: right
|
|
|
|
@media #{$medium-up}
|
|
.form-elem:first-of-type,
|
|
.form-elem:nth-of-type(2)
|
|
width: 32%
|
|
margin-right: 1em
|
|
.form-elem:nth-of-type(3)
|
|
width: 24%
|
|
.form-elem:last-of-type
|
|
width: 6%
|
|
float: right
|
|
text-align: right
|
|
input
|
|
display: inline-block
|
|
height: 32px
|
|
width: 100%
|
|
padding: .2em .4em
|
|
border: 1px solid #eeedec
|
|
border-radius: 4px
|
|
color: #8e8f8e
|
|
font-size: $font-size-sm
|
|
|
|
.form-submit
|
|
padding: .5em .8em
|
|
color: $white
|
|
font-size: $font-size-sm
|
|
&:hover
|
|
background-color: #3BA85D
|
|
cursor: pointer
|
|
//refactor into switch component
|
|
.settings-switch
|
|
.label
|
|
display: inline-block
|
|
width: 7em
|
|
font-size: 12px
|
|
line-height: 1.3
|
|
|