app/styles/pages/_settings.scss
.settings-page {
.global-container {
max-width: 100%;
}
}
.settings--header {
background: $secondary-background-color;
width: 100%;
margin-top: -38px;
margin-bottom: 30px;
padding: 30px 0 0px;
img {
width: 40px;
height: 40px;
}
h2 {
font-weight: normal;
color: #fff;
margin-left: 15px;
margin-bottom: 0;
line-height: 40px;
}
&.feedback {
h2 {
margin-left: 0;
}
}
}
.settings--navigation {
width: 100%;
margin: 0;
margin-top: 20px;
margin-left: -11px;
padding: 0;
list-style-type: none;
@media (max-width: 554px) {
margin-left: 0;
}
a {
font-family: $base-font-family;
text-transform: uppercase;
color: #a793a5;
font-size: 13px;
text-transform: uppercase;
letter-spacing: .8px;
padding: 18px 11px 15px;
display: block;
transition: color .2s;
position: relative;
&:before {
content: "";
height: 5px;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
background: linear-gradient(to right, RGBA(237, 72, 95, 1), RGBA(242, 124, 54, 1));
transform: scaleX(0);
transition: transform 250ms ease;
}
&:hover {
text-decoration: none;
color: $white;
}
}
.list-item {
display: inline-block;
&.active {
a {
color: $white;
&:before {
transform: scaleX(1);
}
}
}
}
}
.nav-counter {
background: rgba(255,255,255,.1);
padding: 0 5px;
border-radius: 3px;
display: inline-block;
}
.settings-container {
width: 100%;
max-width: 500px;
padding-right: 20px;
padding-left: 20px;
margin: 30px auto;
.form-group {
padding-bottom: 20px;
margin-bottom: 0;
}
small {
color: #909090;
display: block;
}
.col-form-label {
font-size: 12px;
font-weight: 700;
}
.rating-type {
.ember-power-select-option, .ember-power-select-selected-item {
display: flex;
align-items: center;
justify-content: flex-start;
svg {
margin-right: 10px;
}
}
}
}
.settings--section-head {
border-bottom: 1px solid $divider-color;
padding-bottom: 5px;
font-size: 12px;
color: #909090;
margin: 20px 0;
}
.notification-settings-container {
max-width: 800px;
}
.notification-settings--table {
list-style-type: none;
margin: 0;
padding: 0;
width: 100%;
}
.notification-settings--right {
width: 25%;
display: flex;
justify-content: space-around;
}
.notification-settings--headers {
display: flex;
justify-content: flex-end;
margin-top: -20px;
background: #eee;
font-size: 12px;
margin-bottom: 15px;
padding: 5px 0;
color: #888;
.button {
@extend .button--primary;
font-size: 12px;
padding: 5px 10px;
}
.form-inline {
display: flex;
position: relative;
top: 3px;
right: -5px;
@media (max-width: 554px) {
right: 15px;
}
}
}
.notification-settings--item {
display: flex;
justify-content: space-between;
border-bottom: 1px solid $divider-color;
margin-bottom: 15px;
padding-bottom: 10px;
&:last-child {
border: none;
}
}
.settings-column {
display: inline-block;
}
.notification-settings-button {
display: flex;
justify-content: center;
margin-top: 10px;
button {
min-width: 300px;
}
}
.blocked-user--list {
width: 100%;
list-style: none;
margin: 0;
padding: 0;
li {
border: 1px solid #eee;
border-radius: 3px;
padding: 15px;
position: relative;
margin-bottom: 15px;
transition: all .2s ease-in;
&:hover {
border-color: $divider-color;
}
}
.stream-item--title-block {
background: none;
padding-bottom: 0;
}
.author-avatar img {
width: 40px;
height: 40px;
}
.author-info {
top: 10px;
}
}
.unblock-cta {
font-size: 12px;
border: 1px solid #d6d6d6;
padding: 5px 10px;
border-radius: 3px;
background: #ebebeb;
color: #747474;
position: absolute;
right: 5px;
top: 5px;
transition: all .2s ease-in;
&:hover {
border-color: #c0392b;
background: #fbdbd8;
color: #c0392b;
}
}