Mirror
/
zulip
mirror of https://github.com/zulip/zulip.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

css: Use SCSS nesting in app_components.scss for `.button`.

This commit is contained in:
Vaibhav 2019-06-03 19:12:01 +05:30 committed by Tim Abbott
parent 331f1fc4b7
commit 09791b9c29
1 changed files with 90 additions and 90 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

180
static/styles/app_components.scss
View File

@ -61,116 +61,116 @@
cursor: pointer; cursor: pointer;
transition: all 0.2s ease; transition: all 0.2s ease;
}
/* -- button style variations -- */ /* -- button style variations -- */
.new-style .button.no-style { &.no-style {
padding: 0px; padding: 0px;
background-color: transparent; background-color: transparent;
border: none; border: none;
min-width: 0px; min-width: 0px;
width: auto; width: auto;
outline: none; outline: none;
box-shadow: none !important; box-shadow: none !important;
} }
.new-style .button.rounded { &.rounded {
border-radius: 4px; border-radius: 4px;
} }
.new-style .button.green { &.green {
background-color: hsl(150, 31%, 53%); background-color: hsl(150, 31%, 53%);
} }
.new-style .button.grey { &.grey {
background-color: hsl(0, 0%, 67%); background-color: hsl(0, 0%, 67%);
} }
.new-style .button.standalone { &.standalone {
margin-top: 10px; margin-top: 10px;
} }
.new-style .button.small { &.small {
font-size: 0.8rem; font-size: 0.8rem;
min-width: inherit; min-width: inherit;
padding: 6px 10px; padding: 6px 10px;
} }
.new-style .button.small-flex { &.small-flex {
width: auto; width: auto;
min-width: inherit; min-width: inherit;
} }
.new-style .button:hover, &:hover,
.new-style .button:focus { &:focus {
border-color: hsl(0, 0%, 60%); border-color: hsl(0, 0%, 60%);
} }
.new-style .button:active { &:active {
border-color: hsl(0, 0%, 60%); border-color: hsl(0, 0%, 60%);
color: inherit; color: inherit;
background-color: hsl(0, 0%, 95%); background-color: hsl(0, 0%, 95%);
} }
.new-style .button.sea-green { &.sea-green {
color: hsl(156, 41%, 40%); color: hsl(156, 41%, 40%);
border-color: hsl(156, 28%, 70%); border-color: hsl(156, 28%, 70%);
}
.new-style .button.sea-green:hover, &:hover,
.new-style .button.sea-green:focus { &:focus {
border-color: hsl(156, 30%, 50%); border-color: hsl(156, 30%, 50%);
} }
.new-style .button.sea-green:active { &:active {
border-color: hsl(156, 30%, 40%); border-color: hsl(156, 30%, 40%);
color: hsl(156, 44%, 43%); color: hsl(156, 44%, 43%);
background-color: hsl(154, 33%, 96%); background-color: hsl(154, 33%, 96%);
} }
}
.new-style .button.btn-warning { &.btn-warning {
color: hsl(35, 70%, 56%); color: hsl(35, 70%, 56%);
border-color: hsl(35, 98%, 84%); border-color: hsl(35, 98%, 84%);
}
.new-style .button.btn-warning:hover { &:hover {
border-color: hsl(35, 55%, 70%); border-color: hsl(35, 55%, 70%);
} }
.new-style .button.btn-warning:active { &:active {
color: hsl(35, 82%, 40%); color: hsl(35, 82%, 40%);
border-color: hsl(35, 55%, 70%); border-color: hsl(35, 55%, 70%);
background-color: hsl(33, 48%, 96%); background-color: hsl(33, 48%, 96%);
} }
}
.new-style .button.btn-danger { &.btn-danger {
color: hsl(357, 64%, 72%); color: hsl(357, 64%, 72%);
border-color: hsl(4, 56%, 82%); border-color: hsl(4, 56%, 82%);
}
.new-style .button.btn-danger:hover, &:hover,
.new-style .button.btn-danger:focus { &:focus {
border-color: hsl(2, 46%, 68%); border-color: hsl(2, 46%, 68%);
} }
.new-style .button.btn-danger:active { &:active {
color: hsl(357, 55%, 63%); color: hsl(357, 55%, 63%);
border-color: hsl(2, 46%, 68%); border-color: hsl(2, 46%, 68%);
background-color: hsl(7, 82%, 98%); background-color: hsl(7, 82%, 98%);
} }
}
.new-style .button[disabled="disabled"] { &[disabled="disabled"] {
cursor: not-allowed; cursor: not-allowed;
-moz-filter: saturate(0); -moz-filter: saturate(0);
filter: saturate(0); filter: saturate(0);
background-color: hsl(0, 0%, 93%); background-color: hsl(0, 0%, 93%);
color: hsl(0, 3%, 52%); color: hsl(0, 3%, 52%);
}
.new-style .button[disabled="disabled"]:hover { &:hover {
background-color: hsl(0, 0%, 93%); background-color: hsl(0, 0%, 93%);
color: hsl(156, 39%, 54%); color: hsl(156, 39%, 54%);
border-color: hsl(156, 39%, 77%); border-color: hsl(156, 39%, 77%);
}
}
} }
/* -- tab switcher -- */ /* -- tab switcher -- */