deepcrayon
/
lila
1
0
Fork 0
Code Releases Activity

refactor sass with %ellipsis and %nowrap-ellipsis

v2
Thibault Duplessis 2019-05-01 08:50:45 +07:00
parent 0c4aa609a9
commit 3315acb4b7
45 changed files with 197 additions and 239 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
ui/analyse/css/_explorer.scss
View File

@ -103,9 +103,8 @@
max-width: 110px;
}
.games td span {
@extend %ellipsis;
display: block;
overflow: hidden;
text-overflow: ellipsis;
}
.games result {
display: block;

3
ui/analyse/css/embed/_footer.scss
View File

@ -6,9 +6,8 @@ footer {
height: 2.5rem;
padding: 0 2vw;
.left {
@extend %nowrap-hidden;
@extend %nowrap-ellipsis;
flex: 1 1 100%;
text-overflow: ellipsis;
}
h1 {
@extend %base-font;

3
ui/analyse/css/study/_invite.scss
View File

@ -18,9 +18,8 @@
@extend %flex-between;
margin-bottom: 2em;
.button {
@extend %ellipsis;
flex: 0 0 48%;
overflow: hidden;
text-overflow: ellipsis;
margin-bottom: .7em;
text-transform: none;
}

6
ui/analyse/css/study/_list-widget.scss
View File

@ -30,9 +30,8 @@ $c-study: $c-primary;
margin-left: 2%;
}
li {
@extend %nowrap-hidden;
@extend %nowrap-ellipsis;
color: $c-font-dim;
text-overflow: ellipsis;
&::before {
color: $c-font-dimmer;
}
@ -40,13 +39,12 @@ $c-study: $c-primary;
.top {
@extend %flex-center-nowrap, %break-word, %roboto;
.study-name {
@extend %nowrap-hidden;
@extend %nowrap-ellipsis;
font-size: 1.5em;
font-weight: normal;
color: $c-study;
display: block;
margin: 0;
text-overflow: ellipsis;
}
span {
font-size: .9rem;

3
ui/analyse/css/study/_members.scss
View File

@ -7,8 +7,7 @@
overflow: hidden;
}
.user-link {
overflow: hidden;
text-overflow: ellipsis;
@extend %ellipsis;
margin: .5em 0;
}
.status {

3
ui/analyse/css/study/panel/_metadata.scss
View File

@ -9,8 +9,7 @@
white-space: nowrap;
border-bottom: $border;
.name {
overflow: hidden;
text-overflow: ellipsis;
@extend %ellipsis;
}
.liking {
margin-left: 1rem;

3
ui/analyse/css/study/relay/_admin.scss
View File

@ -28,8 +28,7 @@
color: $c-primary-over;
}
> div {
overflow: hidden;
text-overflow: ellipsis;
@extend %ellipsis;
}
.fat {
font-size: 1.5em;

3
ui/ceval/css/_pv.scss
View File

@ -2,11 +2,10 @@
background: $c-bg-box;
font-size: 13px;
.pv {
@extend %nowrap-hidden;
@extend %nowrap-ellipsis;
height: 2em;
line-height: 2em;
border-top: $border;
text-overflow: ellipsis;
&[data-uci]:hover {
background: mix($c-secondary, $c-bg-box, 20%);
cursor: pointer;

3
ui/challenge/css/_challenge.scss
View File

@ -112,14 +112,13 @@
font-size: 2.6em;
}
.content {
@extend %nowrap-hidden;
@extend %nowrap-ellipsis;
position: absolute;
top: 10px;
left: 16px;
display: block;
width: 196px;
text-align: left;
text-overflow: ellipsis;
}
.head {
display: block;

3
ui/chat/css/_chat.mod.scss
View File

@ -67,10 +67,9 @@
margin-right: 5px;
}
.timeout a {
@extend %nowrap-hidden;
@extend %nowrap-ellipsis;
color: $c-accent;
display: block;
text-overflow: ellipsis;
line-height: 1.5em;
@include transition();
margin-left: -10px;

3
ui/chat/css/_tab.scss
View File

@ -27,8 +27,7 @@
display: block;
}
span {
@extend %nowrap-hidden;
text-overflow: ellipsis;
@extend %nowrap-ellipsis;
}
&:last-child {
border-right: none;

3
ui/chess/css/_opening.scss
View File

@ -1,7 +1,6 @@
.opening_box {
@extend %roboto, %nowrap-hidden;
@extend %roboto, %nowrap-ellipsis;
padding: 5px;
border-bottom: $border;
text-overflow: ellipsis;
background: $c-bg-zebra;
}

282
ui/common/css/abstract/_extends.scss
View File

@ -23,150 +23,158 @@
/* text printed directly on the page background
* deserves special treatment (transp theme) */
%page-font {
color: $c-font-page;
}
%page-text {
@extend %page-font, %page-text-shadow !optional;
}
%page-link {
@extend %page-link-font !optional;
@extend %page-text-shadow !optional;
}
%page-font {
color: $c-font-page;
}
%page-text {
@extend %page-font, %page-text-shadow !optional;
}
%page-link {
@extend %page-link-font !optional;
@extend %page-text-shadow !optional;
}
%metal {
@include metal;
}
%metal-hover {
@include metal-hover;
}
%page-metal {
@include page-metal;
}
%page-metal-hover {
@include page-metal;
}
%metal {
@include metal;
}
%metal-hover {
@include metal-hover;
}
%page-metal {
@include page-metal;
}
%page-metal-hover {
@include page-metal;
}
%active-inset-shadow {
box-shadow: 0 3px 4px hsla(0, 0, 0, 0.15) inset;
}
%active-inset-shadow {
box-shadow: 0 3px 4px hsla(0, 0, 0, 0.15) inset;
}
%active {
@extend %active-inset-shadow;
background: $c-accent;
color: #fff;
text-shadow: 0 1px 1px black!important;
}
%active-hover {
background: mix(white, $c-accent, 20%);
}
%active {
@extend %active-inset-shadow;
background: $c-accent;
color: #fff;
text-shadow: 0 1px 1px black!important;
}
%active-hover {
background: mix(white, $c-accent, 20%);
}
%active-soft {
@extend %active-inset-shadow;
background: $c-shade;
color: $c-font-clearer;
text-shadow: 1px 1px 1px $c-font-shadow!important;
font-weight: bold;
}
%active-soft {
@extend %active-inset-shadow;
background: $c-shade;
color: $c-font-clearer;
text-shadow: 1px 1px 1px $c-font-shadow!important;
font-weight: bold;
}
%dropdown-shadow {
box-shadow: -1px 5px 6px rgba(0, 0, 0, 0.3);
}
%popup-shadow {
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}
%button-shadow {
box-shadow: 0 2px 5px 0 hsla(0, 0, 0%, 0.225);
}
%button-raised-shadow {
box-shadow: 0 4px 10px 0px hsla(0, 0, 0, 0.225);
}
%button-none {
background: none;
border: none;
outline: none;
color: $c-font;
}
%nowrap-hidden {
white-space: nowrap;
overflow: hidden;
}
%box-padding {
padding: 5vh var(--box-padding);
}
%box-padding-horiz {
padding: 0 var(--box-padding);
}
%break-word {
overflow-wrap: break-word;
word-break: break-all; /* support: firefox */
word-break: break-word;
}
%break-nope {
overflow-wrap: normal;
word-break: normal;
}
%square {
position: relative;
display: block;
height: 0;
padding-bottom: 100%;
width: 100%;
}
%video {
position: relative;
display: block;
height: 0;
padding-bottom: 56.25%; /* 16/9 */
// padding-bottom: 75%; /* 4/3 */
width: 100%;
> * {
@extend %abs-100;
%dropdown-shadow {
box-shadow: -1px 5px 6px rgba(0, 0, 0, 0.3);
}
%popup-shadow {
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}
%button-shadow {
box-shadow: 0 2px 5px 0 hsla(0, 0, 0%, 0.225);
}
%button-raised-shadow {
box-shadow: 0 4px 10px 0px hsla(0, 0, 0, 0.225);
}
%button-none {
background: none;
border: none;
outline: none;
color: $c-font;
}
}
%data-icon {
font-size: 1.2em;
vertical-align: middle;
font-family: 'lichess';
font-style: normal;
font-weight: normal;
text-transform: none;
speak: none;
content: attr(data-icon);
opacity: 0.9;
}
%data-icon-top {
&::before {
vertical-align: text-top;
%nowrap-hidden {
white-space: nowrap;
overflow: hidden;
}
%nowrap-ellipsis {
@extend %ellipsis;
white-space: nowrap;
}
%box-padding {
padding: 5vh var(--box-padding);
}
%box-padding-horiz {
padding: 0 var(--box-padding);
}
%break-word {
overflow-wrap: break-word;
word-break: break-all; /* support: firefox */
word-break: break-word;
}
%break-nope {
overflow-wrap: normal;
word-break: normal;
}
%ellipsis {
@include ellipsis;
}
%square {
position: relative;
display: block;
height: 0;
padding-bottom: 100%;
width: 100%;
}
%video {
position: relative;
display: block;
height: 0;
padding-bottom: 56.25%; /* 16/9 */
// padding-bottom: 75%; /* 4/3 */
width: 100%;
> * {
@extend %abs-100;
border: none;
}
}
%data-icon {
font-size: 1.2em;
vertical-align: middle;
font-family: 'lichess';
font-style: normal;
font-weight: normal;
text-transform: none;
speak: none;
content: attr(data-icon);
opacity: 0.9;
}
%data-icon-top {
&::before {
vertical-align: text-top;
}
}
%fullscreen-mask {
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: $c-page-mask;
z-index: z('fullscreen-mask');
}
%link-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: z('link-overlay');
}
%abs-100 {
position: absolute;
width: 100%;
height: 100%;
}
}
%fullscreen-mask {
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: $c-page-mask;
z-index: z('fullscreen-mask');
}
%link-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: z('link-overlay');
}
%abs-100 {
position: absolute;
width: 100%;
height: 100%;
}

5
ui/common/css/abstract/_mixins.scss
View File

@ -43,6 +43,11 @@
}
}
@mixin ellipsis {
overflow: hidden;
text-overflow: ellipsis;
}
@mixin crosstable-large {
.crosstable__users { flex: 7 1 auto; }
}

3
ui/common/css/component/_crosstable.scss
View File

@ -23,9 +23,8 @@
@extend %metal;
}
&__users {
@extend %ellipsis;
max-width: 40vw;
overflow: hidden;
text-overflow: ellipsis;
text-align: left;
a {
padding-left: $block-gap;

3
ui/common/css/component/_friend-box.scss
View File

@ -42,9 +42,8 @@
color: $c-font;
}
&.user-link {
@extend %ellipsis;
max-width: 150px;
overflow: hidden;
text-overflow: ellipsis;
.line::before {
color: $c-good;
content: '';

3
ui/common/css/component/_power-tip.scss
View File

@ -28,9 +28,8 @@
margin-left: .5em;
}
.user-link {
@extend %ellipsis;
display: block;
overflow: hidden;
text-overflow: ellipsis;
.line {
vertical-align: middle;
}

3
ui/common/css/component/_vs.scss
View File

@ -8,8 +8,7 @@
}
&__pl,
&__op {
text-overflow: ellipsis;
overflow: hidden;
@extend %ellipsis;
max-width: 45%;
}
&__pl {

7
ui/lobby/css/_box.scss
View File

@ -28,12 +28,10 @@
height: 100%;
}
td {
@extend %nowrap-ellipsis;
padding: .5em .4em;
border-top: $border;
white-space: nowrap;
max-width: 21ch; /* prevent leaderboard overflow due to long usernames */
overflow: hidden;
text-overflow: ellipsis;
&:first-child {
padding-left: .7em;
}
@ -45,8 +43,7 @@
&__leaderboard,
&__winners {
td:first-child {
overflow: hidden;
text-overflow: ellipsis;
@extend %ellipsis;
}
td:last-child {
text-align: right;

3
ui/lobby/css/_stream.scss
View File

@ -1,9 +1,8 @@
.lobby__streams {
.stream {
@extend %roboto, %nowrap-hidden, %page-text;
@extend %roboto, %nowrap-ellipsis, %page-text;
color: $c-font-page;
display: block;
text-overflow: ellipsis;
margin-bottom: .5em;
line-height: .9;
strong {

3
ui/lobby/css/_support.scss
View File

@ -39,8 +39,7 @@ $c-support: $c-brag;
display: block;
}
span {
@extend %nowrap-hidden;
text-overflow: ellipsis;
@extend %nowrap-ellipsis;
display: block;
font-size: .8em;
}

4
ui/lobby/css/app/_hook-filter.scss
View File

@ -16,9 +16,7 @@
padding: 4.3px 0;
}
.checkable {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
@extend %nowrap-ellipsis;
label, input {
vertical-align: middle;
cursor: pointer;

3
ui/notify/css/_notify.scss
View File

@ -81,9 +81,8 @@
@extend %flex-between;
}
.site_notification .content span:last-child {
@extend %ellipsis;
display: block;
text-overflow: ellipsis;
overflow: hidden;
}
.site_notification .content time {
@extend %roboto;

3
ui/perfStat/css/_perf-stat.scss
View File

@ -93,10 +93,9 @@
}
.resultStreak .streak,
.playStreak .streak {
@extend %ellipsis;
margin: 1em 0 1em 1.5em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.playStreak {
white-space: nowrap;

3
ui/round/css/_meta.scss
View File

@ -43,9 +43,8 @@
}
}
.user-tv {
@extend %nowrap-hidden;
@extend %nowrap-ellipsis;
font-size: 1.2em;
text-overflow: ellipsis;
}
}
.game__tournament {

3
ui/round/css/_tour-standing.scss
View File

@ -6,10 +6,9 @@
border-bottom: none;
}
td {
@extend %nowrap-hidden;
@extend %nowrap-ellipsis;
padding: .2em 1em;
line-height: 2em;
text-overflow: ellipsis;
}
.name span {
display: inline-block;

3
ui/round/css/_user.scss
View File

@ -9,9 +9,8 @@
color: $c-font;
}
a {
@extend %ellipsis;
color: $c-font;
overflow: hidden;
text-overflow: ellipsis;
}
&.long a {
letter-spacing: -0.5px;

3
ui/site/css/_blog.scss
View File

@ -106,12 +106,11 @@
font-size: 1.3em;
margin-bottom: 40px;
.button {
@extend %ellipsis;
margin: auto;
text-transform: none;
overflow: hidden;
max-width: 90vw;
display: block;
text-overflow: ellipsis;
&::before {
vertical-align: bottom;
}

3
ui/site/css/_message.scss
View File

@ -18,9 +18,8 @@
@include breakpoint($mq-not-small) {
.date { display: none }
.author {
@include ellipsis;
max-width: 22ch;
overflow: hidden;
text-overflow: ellipsis;
}
}
@include breakpoint($mq-not-xx-small) {

3
ui/site/css/_relation.scss
View File

@ -1,7 +1,6 @@
table td {
@extend %ellipsis;
max-width: 50vw;
overflow: hidden;
text-overflow: ellipsis;
@include breakpoint($mq-not-x-small) {
&:last-child {
display: none;

6
ui/site/css/coach/_review.scss
View File

@ -18,15 +18,13 @@
margin-bottom: 5px;
}
.top .user-link {
@extend %ellipsis;
margin-left: -4px;
text-overflow: ellipsis;
}
.content {
@extend %page-text;
@extend %page-text, %ellipsis;
font-style: italic;
max-height: 10.7em;
overflow: hidden;
text-overflow: ellipsis;
@include transition();
}
.disapprove {

3
ui/site/css/mod/_gamify.scss
View File

@ -16,10 +16,9 @@
opacity: 0.8;
}
.user-link {
@extend %ellipsis;
font-size: 3em;
color: $c-brag;
overflow: hidden;
text-overflow: ellipsis;
margin: 1rem 0 1.6rem 0;
}
table tr td {

4
ui/site/css/mod/_inquiry.scss
View File

@ -274,9 +274,7 @@ body.no-inquiry {
overflow-y: auto;
}
.history li {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
@extend %nowrap-ellipsis;
padding: 6px 0;
}

4
ui/site/css/streamer/_list.scss
View File

@ -77,12 +77,10 @@ $mq-picture: $mq-medium;
}
}
.service {
@extend %nowrap-ellipsis;
display: flex;
font-size: 1.2em;
white-space: nowrap;
padding: 3px 0;
overflow: hidden;
text-overflow: ellipsis;
svg {
width: 1.4em;
height: 1.4em;

4
ui/site/css/streamer/_show.scss
View File

@ -7,10 +7,8 @@ $mq-picture: $mq-large;
overflow: hidden; /* help with responsive overflow of activity */
}
h1 {
@extend %roboto;
@extend %roboto, %ellipsis;
@include fluid-size('font-size', 23px, 40px);
text-overflow: ellipsis;
overflow: hidden;
&::before {
margin-right: .2em;
display: none;

4
ui/site/css/user/_activity.scss
View File

@ -58,9 +58,7 @@ $c-contours: mix($c-brag, $c-shade, 80%);
overflow: hidden;
}
.line {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
@extend %nowrap-ellipsis;
.more {
flex: 0 1 auto;
}

3
ui/site/css/user/_list.scss
View File

@ -26,8 +26,7 @@ $user-list-width: 25ch;
white-space: nowrap;
}
.user-link {
overflow: hidden;
text-overflow: ellipsis;
@extend %ellipsis;
}
}
&__online {

4
ui/site/css/user/_profile.scss
View File

@ -75,10 +75,8 @@
display: flex;
flex-flow: row wrap;
> a {
@extend %nowrap-ellipsis;
flex: 0 0 50%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
.bio {

4
ui/tournament/css/_app-standing.scss
View File

@ -3,13 +3,11 @@
padding-left: 0px;
padding-right: 0px;
.name {
@extend %nowrap-ellipsis;
display:inline-block;
vertical-align: middle;
white-space: nowrap;
padding-right: 5px;
max-width: 140px;
overflow: hidden;
text-overflow: ellipsis;
}
}
.user-link.long {

3
ui/tournament/css/_duel.scss
View File

@ -42,12 +42,11 @@
@extend %flex-between;
}
strong {
@extend %ellipsis;
font-size: 1.2em;
color: $c-font-dim;
display: block;
max-width: 60%;
overflow: hidden;
text-overflow: ellipsis;
}
.title {
color: $c-brag;

3
ui/tournament/css/_player.scss
View File

@ -78,9 +78,8 @@
border-color: $c-bad;
}
td:nth-child(2) {
@extend %nowrap-hidden;
@extend %nowrap-ellipsis;
max-width: 200px;
text-overflow: ellipsis;
}
td:last-child {
font-weight: bold;

3
ui/tournament/css/_podium.scss
View File

@ -1,9 +1,8 @@
.tour__podium {
> div {
@extend %ellipsis;
display: inline-block;
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
}
.first {
width: 44%;

6
ui/tournamentSchedule/css/_schedule.scss
View File

@ -134,8 +134,7 @@ $c-tour-max-rating: #8572ff;
}
}
.name, .body {
@extend %nowrap-hidden;
text-overflow: ellipsis;
@extend %nowrap-ellipsis;
}
.name {
display: inline-block;
@ -150,9 +149,8 @@ $c-tour-max-rating: #8572ff;
display: inline-flex;
}
.infos .text {
@extend %ellipsis;
flex: 1 1;
overflow: hidden;
text-overflow: ellipsis;
}
.infos .nb-players {
flex: 0 0 auto;

3
ui/tournamentSchedule/css/_side.scss
View File

@ -24,9 +24,8 @@
color: $c-font;
}
.user-link {
@extend %ellipsis;
margin: 0 5px 0 -3px;
overflow: hidden;
text-overflow: ellipsis;
}
span {
opacity: 0.7;

3
ui/tree/css/_tree.scss
View File

@ -138,14 +138,13 @@
font-size: 0.9em;
}
comment .by {
@extend %nowrap-hidden, %roboto;
@extend %nowrap-ellipsis, %roboto;
display: inline-block;
vertical-align: -0.3em;
font-size: 0.9em;
opacity: 0.8;
margin-right: 0.4em;
max-width: 9em;
text-overflow: ellipsis;
}
&-column comment.white {
border-left: 3px solid;