.folder__image { width: 30px; height: 30px; margin-left: 10px; opacity: 0.7; @media (max-width: $desktop-breakpoint) { // flex-basis: 29%; max-width: 31%; } } .folder__title { color: #373737; margin-right: 2px; margin-top: 25px; margin-left: 4px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; width: 77%; max-width: 50vw; font-weight: 300; text-transform: capitalize; } .folder__title--selected { color: #1967d2; } .folder__item { flex-grow: 1; display: flex; flex-direction: row; /* border: 1px solid #dadce0; */ align-items: center; justify-content: initial; /* border-radius: 10px; */ /* flex-basis: 23%; */ /* max-width: 23%; */ height: 100%; width: 100%; /* margin: 5px; */ /* height: 50px; */ cursor: pointer; /* position: relative; */ -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; } .folder__item__wrapper { flex-grow: 1; display: flex; flex-direction: row; border: 1px solid #dadce0; align-items: center; justify-content: initial; border-radius: 10px; flex-basis: 23%; max-width: 23%; margin: 5px; height: 50px; cursor: pointer; position: relative; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; @media (max-width: $desktop-breakpoint) { flex-basis: 46%; max-width: 47%; position: unset; } } .folder__item--selected { background:#e8f0fe; }