%navigate-section-list-text { width: 100%; font-size: 14px; line-height: 20px; color: $welcomePageTitleColor; text-align: left; font-family: 'open_sanslight', Helvetica, sans-serif; } %navigate-section-list-tile-text { @extend %navigate-section-list-text; overflow: hidden; text-overflow: ellipsis; float: left; } .navigate-section-list-tile { background-color: #1754A9; border-radius: 4px; box-sizing: border-box; display: inline-flex; height: 100px; margin-bottom: 8px; margin-right: 8px; padding: 16px; width: 100%; &.with-click-handler { cursor: pointer; } &.with-click-handler:hover { background-color: #1a5dbb; } i { cursor: inherit; } .element-after { display: flex; align-items: center; justify-content: center; } .join-button { display: none; } &:hover .join-button { display: block } } .navigate-section-tile-body { @extend %navigate-section-list-tile-text; font-weight: normal; line-height: 24px; } .navigate-section-list-tile-info { flex: 1; } .navigate-section-tile-title { @extend %navigate-section-list-tile-text; font-weight: bold; line-height: 24px; } .navigate-section-section-header { @extend %navigate-section-list-text; font-weight: bold; margin-bottom: 16px; } .navigate-section-list { position: relative; margin-top: 36px; margin-bottom: 36px; width: 100%; } .navigate-section-list-empty { text-align: center; }