kopia lustrzana https://github.com/wagtail/wagtail
Import SCSS from react-streamfield
Karl Hobley
Matt Westcott
rodzic
0360cf4c2f
commit
caf8a7f2d7
|
|
@ -1,8 +1,7 @@
|
|||
$header-padding-vertical: 6px;
|
||||
$action-font-size: 18px;
|
||||
|
||||
|
||||
@use '../../../../node_modules/react-streamfield/src/scss/index' with (
|
||||
@use './scss/index' with (
|
||||
$teal: $color-teal,
|
||||
$error-color: $color-red,
|
||||
);
|
||||
|
|
|
|||
|
|
@ -0,0 +1,32 @@
|
|||
$grid-gutter-width: 30px !default;
|
||||
$header-padding-horizontal: 4px !default;
|
||||
$header-padding-vertical: 4px !default;
|
||||
$header-gutter: 8px !default;
|
||||
$block-margin-vertical: 4px !default;
|
||||
$block-margin-horizontal: 0 !default;
|
||||
$add-button-size: 34px !default;
|
||||
$add-button-font-size: 24px !default;
|
||||
$type-button-padding-vertical: 10px !default;
|
||||
$type-button-padding-horizontal: 10px !default;
|
||||
$children-container-padding: $add-button-size / 2 !default;
|
||||
$content-padding-horizontal: 24px !default;
|
||||
$content-padding-vertical: 16px !default;
|
||||
$action-font-size: 15px !default;
|
||||
$add-transition-duration: 0.3s !default;
|
||||
$hover-transition-duration: 0.3s !default;
|
||||
$bounce-transition-timing: cubic-bezier(0.175, 0.885, 0.32, 1.275) !default;
|
||||
$border-radius: 3px !default;
|
||||
$teal: #007d7e !default;
|
||||
$header-text-color-focus: #4d4d4d !default;
|
||||
$header-text-color: #585858 !default;
|
||||
$block-border-color: #e6e6e6 !default;
|
||||
$block-border-color-focus: #bbbbbb !default;
|
||||
$block-hover-background: #f5f5f5 !default;
|
||||
$error-color: #cd3238 !default;
|
||||
$error-border-color: #dbc7c8 !default;
|
||||
$error-border-color-focus: #cdb2b3 !default;
|
||||
$error-background-color: #fbefef !default;
|
||||
$screen-xs-max: 799px !default;
|
||||
$screen-sm-min: 800px !default;
|
||||
$screen-l-min: 1075px !default;
|
||||
$add-panel-gutter: 8px !default;
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
.c-sf-add-button {
|
||||
width: 100%;
|
||||
height: $add-button-size;
|
||||
appearance: none;
|
||||
border: 0 none;
|
||||
color: $teal;
|
||||
font-weight: bold;
|
||||
background: none;
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
backface-visibility: hidden;
|
||||
overflow: hidden; // Makes the rotated i box not clickable.
|
||||
user-select: none;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: opacity 100ms ease-in-out;
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
i {
|
||||
display: block;
|
||||
transition: transform $add-transition-duration $bounce-transition-timing;
|
||||
font-style: normal;
|
||||
font-size: $add-button-font-size;
|
||||
line-height: $add-button-size;
|
||||
}
|
||||
|
||||
&--visible {
|
||||
opacity: 0.8;
|
||||
pointer-events: unset;
|
||||
}
|
||||
|
||||
&--close i {
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
.c-sf-add-panel {
|
||||
position: relative;
|
||||
padding: $grid-gutter-width / 4
|
||||
0
|
||||
$grid-gutter-width;
|
||||
border-radius: $border-radius;
|
||||
user-select: none;
|
||||
|
||||
@media (min-width: $screen-l-min) {
|
||||
padding: $grid-gutter-width / 4
|
||||
$grid-gutter-width * 2
|
||||
$add-button-size - $grid-gutter-width / 2;
|
||||
}
|
||||
|
||||
&__group-title {
|
||||
margin: 5px 0;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
&__grid {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
margin-left: -$add-panel-gutter;
|
||||
margin-right: -$add-panel-gutter;
|
||||
margin-bottom: $grid-gutter-width / 2;
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,193 @@
|
|||
// TODO: Reduce nesting further by splitting out more components.
|
||||
//
|
||||
// There's quite a lot of nesting in here which makes parsing some segments difficult.
|
||||
// Some of this is to deal with the fact that .c-sf-block can contain many .c-sf-block's and so is
|
||||
// legitimate. A lot of these would ideally be their own components (eg the actions) however there
|
||||
// is a lot of interdependency of the elements which makes this hard
|
||||
// without fairly intensive rethinking of the HTML.
|
||||
//
|
||||
// However, the new classes adequately sanitise streamfield only CSS so am leaving this for
|
||||
// now to avoid blocking the release of the new Streamfield. -@jonnyscholes
|
||||
|
||||
.c-sf-block {
|
||||
flex: 1 1 auto;
|
||||
margin: $block-margin-vertical $block-margin-horizontal;
|
||||
border: 1px solid $block-border-color;
|
||||
border-radius: $border-radius;
|
||||
background: white;
|
||||
transition: border-color $hover-transition-duration ease-in-out;
|
||||
transition-property: border-color, box-shadow;
|
||||
|
||||
&__header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: $header-padding-vertical $header-padding-horizontal;
|
||||
user-select: none;
|
||||
transition: background-color $hover-transition-duration ease-in-out;
|
||||
cursor: default;
|
||||
border-top-left-radius: $border-radius;
|
||||
border-top-right-radius: $border-radius;
|
||||
min-height: 30px;
|
||||
|
||||
@media (min-width: $screen-sm-min) {
|
||||
padding-left: $content-padding-horizontal - $header-gutter;
|
||||
}
|
||||
|
||||
&--collapsible {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&--sortable {
|
||||
cursor: grab;
|
||||
}
|
||||
|
||||
&__title, &__icon {
|
||||
color: $header-text-color;
|
||||
}
|
||||
|
||||
&__title {
|
||||
display: inline-block;
|
||||
flex: 1 10 auto;
|
||||
margin: 0;
|
||||
font-size: 12px;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
&__icon {
|
||||
margin: 0 $header-gutter;
|
||||
font-size: 20px;
|
||||
transition: color $hover-transition-duration ease-in-out;
|
||||
}
|
||||
}
|
||||
|
||||
&__content {
|
||||
&-inner {
|
||||
padding: $content-padding-vertical $content-padding-horizontal;
|
||||
}
|
||||
}
|
||||
|
||||
&__actions {
|
||||
flex: 0 1 auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
white-space: nowrap;
|
||||
overflow-x: hidden;
|
||||
|
||||
&__single {
|
||||
appearance: none;
|
||||
border: 0 none;
|
||||
background: none;
|
||||
cursor: pointer;
|
||||
color: $header-text-color;
|
||||
opacity: 1;
|
||||
transition: opacity $hover-transition-duration ease-in-out, background-color $hover-transition-duration ease-in-out;
|
||||
transition-property: opacity, color, background-color;
|
||||
font-size: $action-font-size;
|
||||
border-radius: 50%;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
text-align: center;
|
||||
padding: 0 8px;
|
||||
|
||||
&:not(:last-of-type) {
|
||||
margin-right: 3px;
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&:hover {
|
||||
background-color: rgba(0, 0, 0, 0.05);
|
||||
|
||||
i {
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
|
||||
i {
|
||||
font-style: normal;
|
||||
transition: color $hover-transition-duration ease-in-out;
|
||||
|
||||
&:before {
|
||||
vertical-align: top;
|
||||
margin: 0 0 0 -2px;
|
||||
}
|
||||
}
|
||||
|
||||
&[disabled] {
|
||||
opacity: 0.2;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__type {
|
||||
margin: 0 $header-gutter;
|
||||
text-align: right;
|
||||
font-size: 12px;
|
||||
color: $header-text-color;
|
||||
user-select: none;
|
||||
vertical-align: 2px;
|
||||
overflow-x: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
&.c-sf-block--error {
|
||||
border-color: $error-border-color;
|
||||
|
||||
> .c-sf-block__header {
|
||||
background: $error-background-color;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
border-color: $error-border-color-focus;
|
||||
|
||||
> .c-sf-block__header {
|
||||
background: $error-background-color;
|
||||
}
|
||||
}
|
||||
|
||||
// Duplicated because of
|
||||
// https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/16651302/
|
||||
&:focus-within {
|
||||
border-color: $error-border-color-focus;
|
||||
|
||||
> .c-sf-block__header {
|
||||
background: $error-background-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
border-color: $block-border-color-focus;
|
||||
box-shadow: 3px 2px 3px -1px rgba(0, 0, 0, 0.1);
|
||||
|
||||
> .c-sf-block__header {
|
||||
background: $block-hover-background;
|
||||
|
||||
.c-sf-block__header__title,
|
||||
.c-sf-block__actions__single {
|
||||
color: $header-text-color-focus;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Duplicated because of
|
||||
// https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/16651302/
|
||||
&:focus-within {
|
||||
border-color: $block-border-color-focus;
|
||||
box-shadow: 3px 2px 3px -1px rgba(0, 0, 0, 0.1);
|
||||
|
||||
> .c-sf-block__header {
|
||||
background: $block-hover-background;
|
||||
|
||||
.c-sf-block__header__title,
|
||||
.c-sf-block__actions__single {
|
||||
color: $header-text-color-focus;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,58 @@
|
|||
.c-sf-button {
|
||||
$root: &;
|
||||
display: flex;
|
||||
flex: 1 1 200px;
|
||||
margin: $add-panel-gutter;
|
||||
appearance: none;
|
||||
background: #eee;
|
||||
padding: $type-button-padding-vertical $type-button-padding-horizontal;
|
||||
border: 0 none;
|
||||
border-radius: $border-radius;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
transition: background-color $hover-transition-duration ease-in-out;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: $teal;
|
||||
|
||||
#{$root}__icon,
|
||||
#{$root}__label {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
// Fallback for no `grid` support in IE11
|
||||
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
|
||||
display: inline-block;
|
||||
margin: 0 10px 10px 0;
|
||||
}
|
||||
|
||||
&__icon,
|
||||
&__label {
|
||||
display: inline-block;
|
||||
|
||||
// Fixes for label elements getting global `label` styles from Wagtail -@jonnyscholes
|
||||
color: #333;
|
||||
font-weight: 600;
|
||||
font-size: 12px;
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
transition: color $hover-transition-duration ease-in-out;
|
||||
}
|
||||
|
||||
&__icon {
|
||||
font-size: 16px;
|
||||
padding-right: $type-button-padding-horizontal;
|
||||
|
||||
.icon {
|
||||
&::before {
|
||||
vertical-align: initial;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__label {
|
||||
padding-top: 2px;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
.c-sf-container {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
padding: $children-container-padding 0;
|
||||
transition: padding $hover-transition-duration ease-in-out;
|
||||
|
||||
&__block-container {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
}
|
||||
|
||||
&--add-in-gutter {
|
||||
@media (min-width: $screen-sm-min) {
|
||||
padding-left: $add-button-size;
|
||||
|
||||
.c-sf-add-button {
|
||||
width: $add-button-size;
|
||||
height: 0;
|
||||
transform: translate(-100%, -$add-button-size / 2);
|
||||
overflow: visible;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// TODO: Remove these references to classes that are styled by core Wagtail CSS. The best
|
||||
// opportunity for this is propably as part of Wagtails general CSS overhaul. -@jonnyscholes
|
||||
.field {
|
||||
+ .field {
|
||||
padding-top: $grid-gutter-width / 2;
|
||||
}
|
||||
|
||||
&__label {
|
||||
display: block;
|
||||
font-weight: bold;
|
||||
margin-bottom: $grid-gutter-width / 4;
|
||||
}
|
||||
|
||||
&.required > label::after {
|
||||
content: '*';
|
||||
color: #cd3238;
|
||||
font-weight: 700;
|
||||
display: inline-block;
|
||||
margin-left: 0.5em;
|
||||
line-height: 1em;
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
@import 'variables';
|
||||
|
||||
@import 'components/c-sf-add-button';
|
||||
@import 'components/c-sf-add-panel';
|
||||
@import 'components/c-sf-button';
|
||||
@import 'components/c-sf-block';
|
||||
@import 'components/c-sf-container';
|
||||
|
|
@ -284,15 +284,6 @@
|
|||
"regenerator-runtime": "^0.13.4"
|
||||
}
|
||||
},
|
||||
"@babel/runtime-corejs2": {
|
||||
"version": "7.12.1",
|
||||
"resolved": "https://registry.npmjs.org/@babel/runtime-corejs2/-/runtime-corejs2-7.12.1.tgz",
|
||||
"integrity": "sha512-5uSG1M64+OO+DL4U12qTqHDhc1vorwH6suCSPRH+77UVYzxO5TMyziWe/nQNPcPt9Wnl5G7dIYXuZ6MBuW/dFw==",
|
||||
"requires": {
|
||||
"core-js": "^2.6.5",
|
||||
"regenerator-runtime": "^0.13.4"
|
||||
}
|
||||
},
|
||||
"@babel/template": {
|
||||
"version": "7.10.4",
|
||||
"resolved": "https://registry.npmjs.org/@babel/template/-/template-7.10.4.tgz",
|
||||
|
|
@ -2952,11 +2943,6 @@
|
|||
}
|
||||
}
|
||||
},
|
||||
"classnames": {
|
||||
"version": "2.2.6",
|
||||
"resolved": "https://registry.npmjs.org/classnames/-/classnames-2.2.6.tgz",
|
||||
"integrity": "sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q=="
|
||||
},
|
||||
"cliui": {
|
||||
"version": "3.2.0",
|
||||
"resolved": "https://registry.npmjs.org/cliui/-/cliui-3.2.0.tgz",
|
||||
|
|
@ -3452,14 +3438,6 @@
|
|||
}
|
||||
}
|
||||
},
|
||||
"css-box-model": {
|
||||
"version": "1.2.1",
|
||||
"resolved": "https://registry.npmjs.org/css-box-model/-/css-box-model-1.2.1.tgz",
|
||||
"integrity": "sha512-a7Vr4Q/kd/aw96bnJG332W9V9LkJO69JRcaCYDUqjp6/z0w6VcZjgAcTbgFxEPfBgdnAwlh3iwu+hLopa+flJw==",
|
||||
"requires": {
|
||||
"tiny-invariant": "^1.0.6"
|
||||
}
|
||||
},
|
||||
"css-color-names": {
|
||||
"version": "0.0.4",
|
||||
"resolved": "https://registry.npmjs.org/css-color-names/-/css-color-names-0.0.4.tgz",
|
||||
|
|
@ -10296,11 +10274,6 @@
|
|||
}
|
||||
}
|
||||
},
|
||||
"memoize-one": {
|
||||
"version": "5.1.1",
|
||||
"resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.1.1.tgz",
|
||||
"integrity": "sha512-HKeeBpWvqiVJD57ZUAsJNm71eHTykffzcLZVYWiVfQeI1rJtuEaS7hQiEpWfVVk18donPwJEcFKIkCmPJNOhHA=="
|
||||
},
|
||||
"memoizee": {
|
||||
"version": "0.4.14",
|
||||
"resolved": "https://registry.npmjs.org/memoizee/-/memoizee-0.4.14.tgz",
|
||||
|
|
@ -12668,11 +12641,6 @@
|
|||
"performance-now": "^2.1.0"
|
||||
}
|
||||
},
|
||||
"raf-schd": {
|
||||
"version": "4.0.2",
|
||||
"resolved": "https://registry.npmjs.org/raf-schd/-/raf-schd-4.0.2.tgz",
|
||||
"integrity": "sha512-VhlMZmGy6A6hrkJWHLNTGl5gtgMUm+xfGza6wbwnE914yeQ5Ybm18vgM734RZhMgfw4tacUrWseGZlpUrrakEQ=="
|
||||
},
|
||||
"railroad-diagrams": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/railroad-diagrams/-/railroad-diagrams-1.0.0.tgz",
|
||||
|
|
@ -12716,15 +12684,6 @@
|
|||
"prop-types": "^15.6.2"
|
||||
}
|
||||
},
|
||||
"react-animate-height": {
|
||||
"version": "2.0.23",
|
||||
"resolved": "https://registry.npmjs.org/react-animate-height/-/react-animate-height-2.0.23.tgz",
|
||||
"integrity": "sha512-DucSC/1QuxWEFzR9IsHMzrf2nrcZ6qAmLIFoENa2kLK7h72XybcMA9o073z7aHccFzdMEW0/fhAdnQG7a4rDow==",
|
||||
"requires": {
|
||||
"classnames": "^2.2.5",
|
||||
"prop-types": "^15.6.1"
|
||||
}
|
||||
},
|
||||
"react-axe": {
|
||||
"version": "3.5.4",
|
||||
"resolved": "https://registry.npmjs.org/react-axe/-/react-axe-3.5.4.tgz",
|
||||
|
|
@ -12735,21 +12694,6 @@
|
|||
"requestidlecallback": "^0.3.0"
|
||||
}
|
||||
},
|
||||
"react-beautiful-dnd": {
|
||||
"version": "10.1.1",
|
||||
"resolved": "https://registry.npmjs.org/react-beautiful-dnd/-/react-beautiful-dnd-10.1.1.tgz",
|
||||
"integrity": "sha512-TdE06Shfp56wm28EzjgC56EEMgGI5PDHejJ2bxuAZvZr8CVsbksklsJC06Hxf0MSL7FHbflL/RpkJck9isuxHg==",
|
||||
"requires": {
|
||||
"@babel/runtime-corejs2": "^7.4.2",
|
||||
"css-box-model": "^1.1.1",
|
||||
"memoize-one": "^5.0.1",
|
||||
"prop-types": "^15.6.1",
|
||||
"raf-schd": "^4.0.0",
|
||||
"react-redux": "^5.0.7",
|
||||
"redux": "^4.0.1",
|
||||
"tiny-invariant": "^1.0.4"
|
||||
}
|
||||
},
|
||||
"react-dom": {
|
||||
"version": "16.14.0",
|
||||
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.14.0.tgz",
|
||||
|
|
@ -12795,17 +12739,6 @@
|
|||
}
|
||||
}
|
||||
},
|
||||
"react-streamfield": {
|
||||
"version": "0.9.6",
|
||||
"resolved": "https://registry.npmjs.org/react-streamfield/-/react-streamfield-0.9.6.tgz",
|
||||
"integrity": "sha512-HZXN/fO3DzQwH3yUaB4aecWjRsLpGaixFjx1loizdLqYVUldeXHfhZVpDBo0sVjySj6OHJ/5N9wF0tPfab/bvQ==",
|
||||
"requires": {
|
||||
"classnames": "^2.2.6",
|
||||
"react-animate-height": "^2.0.7",
|
||||
"react-beautiful-dnd": "^10.0.2",
|
||||
"uuid": "^3.3.2"
|
||||
}
|
||||
},
|
||||
"react-test-renderer": {
|
||||
"version": "16.13.1",
|
||||
"resolved": "https://registry.npmjs.org/react-test-renderer/-/react-test-renderer-16.13.1.tgz",
|
||||
|
|
@ -14989,11 +14922,6 @@
|
|||
"integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=",
|
||||
"dev": true
|
||||
},
|
||||
"tiny-invariant": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.1.0.tgz",
|
||||
"integrity": "sha512-ytxQvrb1cPc9WBEI/HSeYYoGD0kWnGEOR8RY6KomWLBVhqz0RgTwVO9dLrGz7dC+nN9llyI7OKAgRq8Vq4ZBSw=="
|
||||
},
|
||||
"tmpl": {
|
||||
"version": "1.0.4",
|
||||
"resolved": "https://registry.npmjs.org/tmpl/-/tmpl-1.0.4.tgz",
|
||||
|
|
|
|||
|
|
@ -96,7 +96,6 @@
|
|||
"react": "^16.4.0",
|
||||
"react-dom": "^16.4.0",
|
||||
"react-redux": "^5.0.6",
|
||||
"react-streamfield": "^0.9.6",
|
||||
"react-transition-group": "^1.1.3",
|
||||
"redux": "^4.0.0",
|
||||
"redux-thunk": "^2.3.0",
|
||||
|
|
|
|||
Ładowanie…
Reference in New Issue