6bin/css/bin.css

User interface for 6element sensors

.bin {
	display: flex; flex-direction: column; justify-content: flex-start;
	margin: .7rem; height: 6rem; width: 5rem; padding: .2rem; position: relative;
	border-radius: 10px; box-shadow: 3px 5px 5px #444;
	background-color: #EEE;
	text-align: center; text-transform: capitalize; font-size: .8rem; text-transform: capitalize;
	transition: color .5s ease-in-out;
	z-index: 1; list-style-type: none;
}

.bin.pending {
	background-color: blue;
}

.bins {
	display: flex; padding: 0 1vw;
	flex-direction: row; justify-content: flex-start; flex-wrap: wrap; align-content: center; align-items: center;
}

.edit .bins li {
	font-size: .8rem;
	box-shadow: none;
}

#add-bin {
	position: relative; right: 6.8rem;
	justify-content: center;
	z-index: 0;
	box-shadow: none;
	transition: right .5s, bottom .5s;
}

#add-bin.empty{
	right: 0; bottom: 0;
	display: none;
}

.edit #add-bin.empty {
	display: flex;
}

.edit .bins li.selected {
	box-shadow: 3px 5px 5px #444;
}

.completeLine #add-bin {
	right: 0; bottom: 7.7rem;
}

.edit #add-bin {
	right: 0; bottom: 0;
}

.add #add-bin {
	box-shadow: 3px 5px 5px #444;
}

.position {
	position: absolute; top: 0; left: 0; width: 1.2rem; height: 1.2rem;
	border: 1px solid black; border-radius: 50%;
	background-color: #EEE;
}

svg {
	display: block; margin: 0 auto; width: auto; height: auto;
	border-radius: 10%;
	background-color: #FF2727;
}

svg path{
	stroke: black;
}

.bin.available svg{
	background-color: #28D628;
}

.edit .bin svg {
	background-color: #EEE;
}

.bin.selected, #add-bin.selected {
	box-shadow: 3px 5px 5px #444;
	/*height: 5.5rem; margin-bottom: 0;
	border-bottom-left-radius: 0; border-bottom-right-radius: 0;
*/}

.noselect {
	-webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}