gab-social/app/javascript/gabsocial/components/panel/panel.scss
mgabdev 280dc51d85 Large update for all components
reorganization, linting, updating file imports, consolidation
warning: there will be errors in this commit
todo: update webpack, add missing styles, scss files, consolidate the rest of components within features/*
2019-08-07 01:02:36 -04:00

132 lines
2.2 KiB
SCSS

.panel {
display: flex;
width: 100%;
border-radius: 10px;
flex-direction: column;
height: auto;
box-sizing: border-box;
background: $gab-background-container;
body.theme-gabsocial-light & {
// @include light-theme-shadow();
background: $gab-background-container-light;
}
&:not(:last-of-type) {
margin-bottom: 10px;
}
&__content {
width: 100%;
padding-top: 8px;
}
&__list {
padding: 0 5px;
}
&__subtitle {
display: block;
padding: 0 15px;
color: $secondary-text-color;
}
&__form {
display: block;
padding: 15px;
&.button {
width: 100%;
}
}
.wtf-panel-list-item {
display: block;
padding-bottom: 10px;
&:not(:first-of-type) {
margin-top: 12px;
}
&:not(:last-of-type) {
border-bottom: 1px solid lighten($ui-base-color, 8%);
}
&__content {
display: flex;
flex-direction: row;
min-height: 46px;
margin-left: 58px;
}
&__account-block {
display: flex;
position: relative;
align-items: baseline;
padding-right: 10px;
&__avatar {
height: 46px;
width: 46px;
background-color: red;
left: -58px;
position: absolute;
}
&__name {
display: flex;
flex-wrap: wrap;
flex-direction: column;
margin-top: 6px;
&__name {
color: $primary-text-color;
font-size: 14px;
font-weight: bold;
line-height: 16px;
margin-bottom: 2px;
max-height: 32px; //2 lines of text
overflow: hidden;
}
&__username {
color: $lighter-text-color;
font-size: 12px;
line-height: 14px;
}
}
}
&__follow-block {
margin-left: auto;
padding-top: 6px;
&__button {
display: flex;
}
&__icon {
color: $primary-text-color;
}
}
}
}
.panel-header {
display: flex;
align-items: baseline;
margin-bottom: 10px;
padding: 15px 15px 0 15px;
&__icon {
margin-right: 10px;
}
&__title {
flex: 1 1;
color: $primary-text-color;
font-size: 16px;
font-weight: bold;
line-height: 19px;
}
}