File: D:/HostingSpaces/SBogers10/stempel.komma.pro/resources/sass/kms/blocks/_entities.sass
/* ==========================================================================
Entities navigation KMS
========================================================================== */
#entities
position: absolute
top: 0
left: 0
width: 380px
height: auto
min-height: 100vh
background-color: white
color: $blue
/* Header block
========================================================================== */
.entities-header
padding: 40px 0
border-bottom: 1px solid $lightGray
text-align: center
height: 101px
h1
font-size: 1.2rem
color: $darkBlue
font-weight: medium()
margin: 0
p
font-size: 0.7rem
color: $gray
opacity: 0.5
margin: 0
font-weight: lightest()
.entities-content
> p, h2
padding: 0 20px
> p
font-size: 0.9rem
/* Search block
========================================================================== */
.search
.search-field
height: 45px
border-bottom: 1px solid $lightGray
font-size: 0.9rem
cursor: text
background-color: $dark-white
background-image: url("#{$baseImagePath}/icons/icon_search.svg")
background-repeat: no-repeat
background-position: 7px center
input
width: 100%
height: 45px
padding: 0
margin: 0
border: none
font-size: 0.7rem
line-height: 2.2
text-indent: 60px
background-color: transparent
+attribute-focus
.search-result-text
display: none
height: 50px
width: 100%
border-bottom: 2px solid $blue
transition: background-color 0.2s, color 0.2s
margin: 0
padding: 0 15px 0 60px
color: $medium-gray
font-size: 0.7rem
line-height: 1
span
display: inline-block
//font-size: 0.85rem
margin-left: 5px
color: $blue
.entities-list
display: none
height: calc( 100vh - 235px)
ul
.entities-list-item
display: none
&.active
display: block
> a
background-color: transparent
color: $medium-gray
.icon
background-color: rgba($lightGray, 0.6)
p
margin: 0
width: calc(100% - 65px)
&:before
content: attr(data-breadcrumb)
display: block
color: $medium-gray
font-size: 0.6rem
opacity: 0.5
&.active
.entities-list
display: block
.search-result-text
+flex(flex-start,center)
/* Add new item block
========================================================================== */
.new-item
+flex(flex-start,center)
height: 45px
width: 100%
background-color: transparent
border-bottom: 2px solid $blue
transition: background-color 0.2s, color 0.2s
color: $blue
font-size: 0.7rem
line-height: 1
text-decoration: none
span
display: inline-block
width: 30px
height: 30px
margin: 0 15px 0 15px
border: 1px solid $blue
border-radius: 100%
background-color: white
&:before
content: ''
background-image: url("#{$baseImagePath}/icons/icon_plus.svg")
background-repeat: no-repeat
background-position: center
display: inline-block
width: 30px
height: 30px
&:hover
background-color: $blue
color: white
/* Change order block
========================================================================== */
.entities-order
position: relative
width: 100%
height: 50px
border-top: solid 1px $lightest-gray
.sortable-button
+flex(center, center)
width: 100%
height: 100%
text-decoration: none
color: $blue
font-size: 0.7rem
text-align: center
cursor: pointer
&:before
content: ''
display: inline-block
width: 19px
height: 23px
background-image: url("#{$baseImagePath}/icons/icon_reorder.svg")
background-repeat: no-repeat
vertical-align: middle
margin-right: 10px
&.save-order
position: absolute
left: 0
top: 0
opacity: 0
pointer-events: none
z-index: -1
background-color: $blue
color: white
&.show
z-index: 2
opacity: 1
pointer-events: all
&:before
background-image: url("#{$baseImagePath}/icons/icon_save_order.svg")
/* Entities list
==========================================================================
Entities header: 141px
Search: 50px
New item: 50px
Order: 50px
*/
#main-entities-list
&.hide
display: none
.entities-list
position: relative
height: calc( 100vh - 190px)
overflow: auto
overflow-x: hidden
.js-sortable
height: calc(100% - 100px)
ul
margin: 0
padding: 0
list-style: none
&.ui-sortable, &.sortable
height: 100%
overflow: auto
overflow-x: hidden
// Each ul will be a bit deeper
ul
padding-left: 20px
min-height: 10px
// Sortable placeholder for indication where to drop
.sortable-placeholder
height: 50px
width: 100%
background-color: $almostWhite
border: 1px dashed rgba($brand-primary, 0.4)
// List item styling
.entities-list-item
background-color: white
transition: background-color 0.3s
//Zebra coloring
&:nth-child(even)
background-color: $almostWhite
// Text / placeholder
>a, .tree-node-content
position: relative
+flex(flex-start, center)
height: 50px
width: 100%
text-decoration: none
font-size: 0.7rem
line-height: 1.1
color: $gray
cursor: pointer
font-weight: lightest()
sub
opacity: 0.6
//Hover color
&:hover
background-color: $blueGray
color: $darkBlue
//Active coloring
&.active
>a, >.tree-node-content
background-color: $blue
color: white
.icon
background-color: $lightGray
// Status
.color-status
display: inline-block
height: 100%
width: 5px
background-color: transparent
&[data-status-type="0"]
background-color: $lightGray
&[data-status-type="1"]
background-color: $neonGreen
&[data-status-type="2"]
background-color: $neonRed
&[data-status-type="3"]
background-color: $brand-secondary
&[data-status-type="4"]
background-color: $brand-warning
&[data-status-type="5"]
background-color: $brand-success
p
margin: 0
width: calc(100% - 60px)
// Icon
.icon
+flex(center, center)
width: 30px
height: 30px
margin: 0 15px
border-radius: 100%
background-color: rgba($lightGray, 0.6)
background-position: center
background-size: cover
overflow: hidden
img
width: 30px
height: 30px
span
font-size: 0.8rem
color: $gray
position: relative
top: 1px
// Drop down icon
.triangle
position: absolute
right: 0
top: 0
+flex(center, center)
background-color: rgba(0,0,0, 0.03)
width: 40px
height: 100%
cursor: pointer
&:before
content: ''
display: inline-block
width: 10px
height: 5px
background-image: url("#{$baseImagePath}/icons/icon_triangle_down.svg")
background-position: center center
background-repeat: no-repeat
transition: transform 0.4s
&[collapsed=true]
.triangle
&:before
transform: rotate(180deg)
// Sorting animation
.sorting
.entities-list-item
position: relative
cursor: move
a
cursor: move
animation: shake1 1.5s infinite alternate
.entities-list-item:nth-child(odd)
a
animation: shake2 1.5s infinite alternate
/* Drag and drop styling
========================================================================== */
//.angular-ui-tree-drag.angular-ui-tree-nodes
// position: fixed
// margin: 0
// padding: 0
// list-style: none
// border: 1px solid $lightGray
//
// .entities-list-item
// background-color: white
//
// // Text / placeholder
// >a, .tree-node-content
// position: relative
// +flex(flex-start, center)
// height: 50px
// width: 100%
// text-decoration: none
// font-size: 0.7rem
// color: $darkBlue
// font-weight: lightest()
//
// // Status
// .color-status
// display: inline-block
// height: 100%
// width: 5px
// background-color: $neonRed
// &.active
// background-color: $neonGreen
//
// // Icon
// .icon
// +flex(center, center)
// width: 30px
// height: 30px
// margin: 0 15px
// border-radius: 100%
// background-color: rgba($lightGray, 0.6)
// overflow: hidden
//
// img
// width: 30px
// height: 30px
//
// span
// font-size: 0.8rem
// color: $gray
// position: relative
// top: 1px