Skip to content

Commit

Permalink
[form-builder] New block editor CSS
Browse files Browse the repository at this point in the history
  • Loading branch information
Kristoffer J. Sivertsen authored and bjoerge committed Dec 18, 2018
1 parent 4a35a09 commit 45cbb2e
Show file tree
Hide file tree
Showing 22 changed files with 931 additions and 0 deletions.
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
.root {
display: inline-block;
}

.iconContainer {
transform: scale(1.5);
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
@import "part:@sanity/base/theme/variables-style";

.root {
display: flex;
}

.buttonWrapper + .buttonWrapper {
margin-left: 0.1em;
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
@import "part:@sanity/base/theme/variables-style";

.item {
display: flex;
padding: var(--extra-small-padding);
align-items: stretch;
}

.icon {
margin-right: var(--small-padding);
display: flex;
align-items: center;
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
.root {
display: inline-block;
}

.iconContainer {
transform: scale(1.5);
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,100 @@
@import "part:@sanity/base/theme/variables-style";

.root {
position: relative;
font-size: 0.8rem;
display: flex;
width: 100%;
justify-content: space-between;
flex-wrap: nowrap;
padding-bottom: var(--small-padding);

@media (--screen-medium) {
font-size: 0.8rem;
}

@nest &.fullscreen {
position: fixed;
box-sizing: border-box;
width: 100vw;
top: 0;
left: 0;
right: 0;
z-index: 1;
padding: var(--small-padding);
background-color: var(--input-bg);
box-shadow: 0 0 8px color(var(--input-border-color) a(35%));

@media (--screen-medium) {
padding: var(--medium-padding--em);
}
}
}

.primary {
display: flex;
}

.secondary {
margin-left: auto;
display: flex;
}

.compactable {
display: none;
}

.expanded {
composes: shadow-12dp from 'part:@sanity/base/theme/shadows-style';
}

.largeContainer .compactable {
display: flex;
}

.root:not(.largeContainer) .compactable.expanded {
display: flex;
flex-wrap: wrap;
z-index: var(--zindex-dropdown);
position: absolute;
max-width: calc(100% - var(--medium-padding) * 2);
top: 0;
left: 0;
background-color: var(--component-bg);
padding: var(--small-padding);
box-sizing: border-box;
margin: var(--medium-padding);
}

.largeContainer .expandButton {
display: none;
}

.blockFormatContainer {
max-width: 5em;
min-width: 4em;
padding-right: 0.5em;

@media (--screen-medium) {
max-width: none;
min-width: 8em;
padding-top: 0.2em;
}
}

.decoratorButtonsContainer {
padding-right: var(--medium-padding--em);
}

.annotationButtonsContainer {
padding-right: var(--medium-padding--em);
}

.fullscreenButtonContainer {
margin-left: auto;
height: 100%;

@nest & svg {
transform: scale(1.5);
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,155 @@
@import 'part:@sanity/base/theme/variables-style';

@keyframes fade {
0% {
opacity: 0;
}

100% {
opacity: 1;
}
}

.root {
composes: default from './Spacing.css';
width: 100%;
}

.previewContainer {
width: 100%;
display: block;
cursor: move;
position: relative;
border-radius: var(--form-builder-block-border-radius);
border: 1px solid var(--form-builder-block-border-color);
box-shadow: var(--form-builder-block-shadow);
box-sizing: border-box;
overflow: hidden;
min-height: 3.5rem;

@nest &:hover {
background-color: var(--form-builder-block-background-hover);
box-shadow: var(--form-builder-block-shadow--hover);
}
}

.root.hasErrors > .previewContainer {
box-shadow: var(--form-builder-block-shadow--invalid);
}

.root.focused > .previewContainer {
border: 1px solid var(--form-builder-block-border-color-focus);
background-color: var(--selectable-item-color-active);
box-shadow: var(--form-builder-block-shadow--focus);
}

.root.selected:not(.focused) > .previewContainer {
background-color: var(--form-builder-block-background-selected);
}

.root.focused.selected > .previewContainer {
border: 1px solid var(--form-builder-block-border-color-focus);
}

.root.selected.hasErrors > .previewContainer {
box-shadow: none;
border: 1px solid color(var(--state-danger-color) blend(var(--form-builder-block-background-selected) 70%));
}

.root.focused.hasErrors > .previewContainer {
box-shadow: var(--form-builder-block-shadow--invalid-focus);
background-color: color(var(--state-danger-color) a(25%));
border: 1px solid var(--state-danger-color);
}

.root.focused.hasErrors > .previewContainer:hover {
background-color: color(var(--state-danger-color) a(45%));
}

.header {
z-index: 1;
position: absolute;
top: var(--small-padding);
right: var(--small-padding);
display: none;
opacity: 0;

@nest .focused & {
display: block !important;
opacity: 1 !important;
}
}

.preview {
@media (hover: hover) {
@nest &:hover .header {
display: block;
opacity: 1;
}
}
}

.type {
display: block;
text-transform: uppercase;
opacity: 1;
padding-right: var(--small-padding);
}

.validationStatus {
display: flex;
align-items: center;
padding-right: var(--small-padding);
}

.linkToReference {
display: flex;
align-items: center;
transition: transform 0.1s linear, opacity 0.1s linear;
margin-right: var(--small-padding);

@nest &:hover {
opacity: 1;
color: var(--link-color);

@nest & svg {
color: var(--link-color);
}
}

@nest &:active {
opacity: 1;
color: var(--text-color);

@nest & svg {
color: var(--text-color);
}
}

@nest & svg {
color: var(--text-color);
}
}

.isDragging {
opacity: 0.15;
}

.functions {
display: flex;
}

.menuContainer {
position: absolute;
}

.menuItem {
display: flex;
align-items: center;
user-select: none;
}

.menuItemDanger {
composes: menuItem;
color: var(--state-danger-color);
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
.root {
composes: default from './Spacing.css';
}

.quote {
composes: blockquote from "part:@sanity/base/theme/typography/text-blocks-style";
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
@import 'part:@sanity/base/theme/variables-style';

.textBlock {
composes: default from './Spacing.css';
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
.root {
display: inline;
}

.strong {
font-weight: bold;
}

.em {
font-style: italic;
}

.underline {
text-decoration: underline;
}

.overline {
text-decoration: overline;
}

.strike-through {
text-decoration: line-through;
}

.code {
font-family: monospace;
background-color: #eee;
color: #333;
padding: 0.1em 0.3em;
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
@import "part:@sanity/base/theme/variables-style";

.root {
composes: default from './Spacing.css';
text-transform: none;
font-family: var(--block-editor-header-font-family);
}

.h1 {
composes: heading1 from "part:@sanity/base/theme/typography/headings-style";
composes: root;
}

.h2 {
composes: heading2 from "part:@sanity/base/theme/typography/headings-style";
composes: root;
}

.h3 {
composes: heading3 from "part:@sanity/base/theme/typography/headings-style";
composes: root;
}

.h4 {
composes: heading4 from "part:@sanity/base/theme/typography/headings-style";
composes: root;
}

.h5 {
composes: heading5 from "part:@sanity/base/theme/typography/headings-style";
composes: root;
}

.h6 {
composes: heading6 from "part:@sanity/base/theme/typography/headings-style";
composes: root;
}

0 comments on commit 45cbb2e

Please sign in to comment.