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

193 lines
3.7 KiB
SCSS
Raw Normal View History

2019-09-08 18:54:49 +02:00
.collection-container {
padding: #{24 / $base-font-size}rem #{66 / $base-font-size}rem;
position: relative;
flex: 1;
overflow: hidden;
display: flex;
flex-direction:column;
2019-09-08 18:54:49 +02:00
}
.collection {
height: 100%;
display: flex;
flex-direction: column;
}
2019-09-08 18:54:49 +02:00
.collection-metadata {
max-width: #{1012 / $base-font-size}rem;
width: 100%;
margin: 0 auto;
margin-bottom: #{24 / $base-font-size}rem;
2019-09-08 18:54:49 +02:00
}
.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: row;
justify-content: flex-end;
}
.collection-metadata__column--right > * {
margin-left: #{10 / $base-font-size}rem;
}
2019-09-16 22:58:32 +02:00
.collection-metadata__name {
// padding: #{8 / $base-font-size}rem 0;
2019-09-16 22:58:32 +02:00
}
2020-04-27 22:48:55 +02:00
.collection-metadata__name .editable-input__label {
padding: 0.83333rem #{7 / $base-font-size}rem;
2019-09-16 22:58:32 +02:00
}
.collection-metadata__name,
.collection-metadata__name .editable-input__input {
font-size: 1.75rem;
font-weight: bold;
}
2019-09-08 18:54:49 +02:00
.collection-metadata__user {
padding-top: #{8 / $base-font-size}rem;
font-size: 14px;
2019-09-08 18:54:49 +02:00
}
.collection-metadata--is-owner .collection-metadata__user {
padding-left: #{8 / $base-font-size}rem;
}
2019-09-08 18:54:49 +02:00
.collection-metadata__description {
2020-04-27 22:48:55 +02:00
padding-top: #{8 / $base-font-size}rem;
text-align: left;
2020-04-27 22:48:55 +02:00
font-size: #{14 / $base-font-size}rem;
}
.collection-metadata__description .editable-input__label {
text-align: left;
}
.collection-metadata__description .editable-input--has-value .editable-input__label {
@include themify() {
color: getThemifyVariable('primary-text-color');
}
2019-09-16 22:58:32 +02:00
}
.collection-metadata__description .editable-input__input {
width: 100%;
2019-09-08 18:54:49 +02:00
}
.collection-add-sketch {
2019-11-10 20:39:20 +01:00
min-width: #{600 / $base-font-size}rem;
overflow: scroll;
}
.collection-share {
text-align: right;
position: relative;
}
.collection-share__button {
@extend %button;
display: flex;
align-items: center;
}
.collection-share__arrow {
margin-left: #{5 / $base-font-size}rem;
}
.collection-share .copyable-input {
padding-bottom: 0;
}
.collection__share-dropdown {
@extend %dropdown-open-right;
padding: #{20 / $base-font-size}rem;
width: #{350 / $base-font-size}rem;
}
.collection-metadata__add-button {
2019-11-25 14:17:16 +01:00
@extend %button;
flex-grow: 0;
}
2019-11-10 19:35:44 +01:00
.collection-content {
display: flex;
flex-direction: column;
flex: 1;
overflow: hidden;
max-width: #{1012 / $base-font-size}rem;
margin: 0 auto;
width: 100%;
2019-11-10 19:35:44 +01:00
@include themify() {
border: 1px solid getThemifyVariable('modal-border-color');
}
}
.collection-table-wrapper {
overflow-y: auto;
max-width: 100%;
min-height: 100%;
}
// maybe don't need this?
2019-11-10 19:35:44 +01:00
[data-has-items=false] .collection-table-wrapper {
display: flex;
justify-content: center;
align-items: center;
}
.collection-empty-message {
text-align: center;
font-size: #{16 / $base-font-size}rem;
}
.collection-row__action-column {
width: #{60 / $base-font-size}rem;
position: relative;
}
.collection-row__remove-button {
display: inline-block;
width:#{35 / $base-font-size}rem;
height:#{35 / $base-font-size}rem;
@include icon();
@include themify() {
// icon graphic
2020-04-30 00:34:37 +02:00
path {
fill: getThemifyVariable('table-button-color');
}
// icon background circle
2020-04-30 00:34:37 +02:00
path:first-child {
fill: getThemifyVariable('table-button-background-color');
}
& svg {
width:#{35 / $base-font-size}rem;
height:#{35 / $base-font-size}rem;
}
&:hover,
&:focus {
2020-04-30 00:34:37 +02:00
path {
fill: getThemifyVariable('table-button-hover-color');
}
2020-04-30 00:34:37 +02:00
path:first-child {
fill: getThemifyVariable('table-button-background-hover-color');
}
}
}
}