p5.js-web-editor/client/styles/components/_collection.scss

109 lines
2.1 KiB
SCSS
Raw Normal View History

2019-09-08 16:54:49 +00:00
.collection-container {
}
.collection-metadata {
margin: 0px #{56 / $base-font-size}rem;
padding: #{24 / $base-font-size}rem #{10 / $base-font-size}rem;
@include themify() {
background-color: getThemifyVariable('modal-background-color');
border-bottom: 1px dotted getThemifyVariable('modal-border-color');
}
}
.collection-metadata__columns {
display: flex;
}
.collection-metadata__column--left,
.collection-metadata__column--right {
flex: 1;
}
.collection-metadata__column--right {
align-self: flex-end;
display: flex;
flex-direction: column;
align-items: flex-end;
}
.collection-metadata__column--right > * {
margin-top: #{10 / $base-font-size}rem;
}
2019-09-16 20:58:32 +00:00
.collection-metadata__name {
padding: #{12 / $base-font-size}rem 0;
}
.collection-metadata__name .editable-input__label span {
padding: 0.83333rem 0;
@include themify() {
color: getThemifyVariable('primary-text-color');
}
2019-09-16 20:58:32 +00:00
}
.collection-metadata__name,
.collection-metadata__name .editable-input__input {
font-size: 1.75rem;
font-weight: bold;
}
2019-09-08 16:54:49 +00:00
.collection-metadata__user {
padding-top: #{8 / $base-font-size}rem;
2019-09-16 20:58:32 +00:00
padding-left: #{8 / $base-font-size}rem;
font-size: 14px;
2019-09-08 16:54:49 +00:00
}
.collection-metadata__description {
padding-top: #{8 / $base-font-size}rem;
text-align: left;
font-size: 14px;
}
.collection-metadata__description .editable-input__label {
text-align: left;
@include themify() {
color: getThemifyVariable('primary-text-color');
}
2019-09-16 20:58:32 +00:00
}
.collection-metadata__description .editable-input__input {
width: 100%;
2019-09-08 16:54:49 +00:00
}
.collection-table-wrapper {
margin: #{28 / $base-font-size}rem #{56 / $base-font-size}rem;
}
.collection-add-sketch {
padding: #{24 / $base-font-size}rem;
overflow: scroll;
}
.collection-share {
text-align: right;
// padding: #{10 / $base-font-size}rem #{30 / $base-font-size}rem;
}
.collection-share__button {
@extend %button;
}
.collection-share__label {
display: block;
text-align: left;
}
.collection-share .copyable-input {
padding-bottom: 0;
}
.collection-metadata__add-button {
@extend %primary-button;
flex-grow: 0;
}