kopia lustrzana https://github.com/wagtail/wagtail
Reproduce Hallo field styles for Draftail, and adapt padding
rodzic
a54d5f0498
commit
5f08013ad2
|
@ -1,5 +1,6 @@
|
||||||
$editor-z-index: $draftail-editor-z-index;
|
$editor-z-index: $draftail-editor-z-index;
|
||||||
|
|
||||||
|
$draftail-editor-text: $color-text-input;
|
||||||
$draftail-editor-chrome: $color-grey-1;
|
$draftail-editor-chrome: $color-grey-1;
|
||||||
$draftail-editor-chrome-text: $color-white;
|
$draftail-editor-chrome-text: $color-white;
|
||||||
$draftail-editor-chrome-active: $color-white;
|
$draftail-editor-chrome-active: $color-white;
|
||||||
|
@ -67,3 +68,34 @@ $draftail-editor-font-family: $font-serif;
|
||||||
.Draftail-Toolbar {
|
.Draftail-Toolbar {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.Draftail-Editor {
|
||||||
|
border-radius: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
// When in a .full container, the editor has a specific appearance
|
||||||
|
// so the whole area appears like a focusable area, and the editor
|
||||||
|
// receives focus on click.
|
||||||
|
.full .Draftail-Editor {
|
||||||
|
padding-top: 2em;
|
||||||
|
padding-bottom: 2em;
|
||||||
|
background-color: $color-fieldset-hover;
|
||||||
|
border-right: 1px solid $color-input-border;
|
||||||
|
|
||||||
|
&--focus {
|
||||||
|
background-color: $color-input-focus;
|
||||||
|
border-color: $color-input-focus-border;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.full .Draftail-Editor .public-DraftEditor-content {
|
||||||
|
@include nice-padding;
|
||||||
|
}
|
||||||
|
|
||||||
|
.full .Draftail-Toolbar {
|
||||||
|
@include nice-margin;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title .Draftail-Editor .public-DraftEditor-content {
|
||||||
|
font-size: 2em;
|
||||||
|
}
|
||||||
|
|
|
@ -56,8 +56,18 @@ $padding: $grid-gutter-width * 0.5;
|
||||||
padding-left: $mobile-nice-padding;
|
padding-left: $mobile-nice-padding;
|
||||||
padding-right: $mobile-nice-padding;
|
padding-right: $mobile-nice-padding;
|
||||||
|
|
||||||
@media screen and (min-width: $breakpoint-mobile) {
|
@include medium {
|
||||||
padding-left: $desktop-nice-padding;
|
padding-left: $desktop-nice-padding;
|
||||||
padding-right: $desktop-nice-padding;
|
padding-right: $desktop-nice-padding;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@mixin nice-margin {
|
||||||
|
margin-left: $mobile-nice-padding;
|
||||||
|
margin-right: $mobile-nice-padding;
|
||||||
|
|
||||||
|
@include medium {
|
||||||
|
margin-left: $desktop-nice-padding;
|
||||||
|
margin-right: $desktop-nice-padding;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
@ -2,6 +2,8 @@
|
||||||
// Mixins
|
// Mixins
|
||||||
// =============================================================================
|
// =============================================================================
|
||||||
|
|
||||||
|
@import '../../../../../client/scss/tools.breakpoints';
|
||||||
|
|
||||||
// Please note that the mixins partial shouldn't include any classes. This is so
|
// Please note that the mixins partial shouldn't include any classes. This is so
|
||||||
// it can be included in any file without accidentally producing output
|
// it can be included in any file without accidentally producing output
|
||||||
|
|
||||||
|
|
|
@ -52,6 +52,7 @@ $color-header-bg: $color-teal; // #ff6a58;
|
||||||
$color-fieldset-hover: $color-grey-5;
|
$color-fieldset-hover: $color-grey-5;
|
||||||
$color-input-border: $color-grey-4;
|
$color-input-border: $color-grey-4;
|
||||||
$color-input-focus: #f4fcfc;
|
$color-input-focus: #f4fcfc;
|
||||||
|
$color-input-focus-border: darken($color-input-focus, 40%);
|
||||||
$color-input-error-bg: #feedee;
|
$color-input-error-bg: #feedee;
|
||||||
$color-button: $color-teal;
|
$color-button: $color-teal;
|
||||||
$color-button-hover: $color-teal-darker;
|
$color-button-hover: $color-teal-darker;
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
.xdsoft_datetimepicker {
|
.xdsoft_datetimepicker {
|
||||||
box-shadow: 0 5px 10px -5px rgba(0, 0, 0, 0.4);
|
box-shadow: 0 5px 10px -5px rgba(0, 0, 0, 0.4);
|
||||||
background: #fff;
|
background: $color-white;
|
||||||
border: 1px solid darken($color-input-focus, 40%);
|
border: 1px solid $color-input-focus-border;
|
||||||
padding: 8px;
|
padding: 8px;
|
||||||
padding-left: 0;
|
padding-left: 0;
|
||||||
padding-top: 2px;
|
padding-top: 2px;
|
||||||
|
|
|
@ -74,9 +74,9 @@ select,
|
||||||
}
|
}
|
||||||
|
|
||||||
&:focus {
|
&:focus {
|
||||||
border-color: darken($color-input-focus, 40%);
|
|
||||||
outline: none;
|
|
||||||
background-color: $color-input-focus;
|
background-color: $color-input-focus;
|
||||||
|
border-color: $color-input-focus-border;
|
||||||
|
outline: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:disabled,
|
&:disabled,
|
||||||
|
|
|
@ -10,6 +10,10 @@
|
||||||
|
|
||||||
.breadcrumb {
|
.breadcrumb {
|
||||||
margin: -1.2em 0 2em;
|
margin: -1.2em 0 2em;
|
||||||
|
|
||||||
|
@include medium {
|
||||||
|
margin-top: -1.8em;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.modal .breadcrumb {
|
.modal .breadcrumb {
|
||||||
|
@ -32,7 +36,7 @@
|
||||||
.header-title {
|
.header-title {
|
||||||
padding-left: 3.1em;
|
padding-left: 3.1em;
|
||||||
|
|
||||||
@media screen and (max-width: $breakpoint-mobile) {
|
@include medium {
|
||||||
padding-left: 0;
|
padding-left: 0;
|
||||||
margin-left: -28px;
|
margin-left: -28px;
|
||||||
// Because it's nested within tab-merged which we've given padding
|
// Because it's nested within tab-merged which we've given padding
|
||||||
|
@ -53,7 +57,7 @@ $object-title-height: 40px;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.focused {
|
&.focused {
|
||||||
border-color: darken($color-input-focus, 40%);
|
border-color: $color-input-focus-border;
|
||||||
}
|
}
|
||||||
|
|
||||||
fieldset {
|
fieldset {
|
||||||
|
@ -146,8 +150,7 @@ $object-title-height: 40px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.halloeditor,
|
.halloeditor {
|
||||||
.Draftail-Editor {
|
|
||||||
padding-top: 1em; // to provide space for editor buttons
|
padding-top: 1em; // to provide space for editor buttons
|
||||||
padding-bottom: 1em;
|
padding-bottom: 1em;
|
||||||
|
|
||||||
|
@ -185,8 +188,7 @@ $object-title-height: 40px;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.halloeditor,
|
.halloeditor {
|
||||||
.Draftail-Editor {
|
|
||||||
padding-top: 3em; // to provide space for editor buttons
|
padding-top: 3em; // to provide space for editor buttons
|
||||||
padding-bottom: 3em;
|
padding-bottom: 3em;
|
||||||
|
|
||||||
|
@ -204,8 +206,7 @@ $object-title-height: 40px;
|
||||||
.error,
|
.error,
|
||||||
.error input,
|
.error input,
|
||||||
.error textarea,
|
.error textarea,
|
||||||
.error .halloeditor,
|
.error .halloeditor {
|
||||||
.error .Draftail-Editor {
|
|
||||||
background-color: $color-input-error-bg;
|
background-color: $color-input-error-bg;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -338,8 +339,7 @@ $object-title-height: 40px;
|
||||||
// Custom styles that make some fields look more important
|
// Custom styles that make some fields look more important
|
||||||
.full input,
|
.full input,
|
||||||
.full textarea,
|
.full textarea,
|
||||||
.full .halloeditor,
|
.full .halloeditor {
|
||||||
.full .Draftail-Editor {
|
|
||||||
@include nice-padding;
|
@include nice-padding;
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
padding-top: 2em;
|
padding-top: 2em;
|
||||||
|
@ -350,8 +350,7 @@ $object-title-height: 40px;
|
||||||
|
|
||||||
.title input,
|
.title input,
|
||||||
.title textarea,
|
.title textarea,
|
||||||
.title .halloeditor,
|
.title .halloeditor {
|
||||||
.title .Draftail-Editor {
|
|
||||||
font-size: 2em;
|
font-size: 2em;
|
||||||
font-family: $font-serif;
|
font-family: $font-serif;
|
||||||
}
|
}
|
||||||
|
@ -402,11 +401,7 @@ footer .preview {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (min-width: $breakpoint-mobile) {
|
@include medium {
|
||||||
.page-editor .breadcrumb {
|
|
||||||
margin-top: -1.8em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.object {
|
.object {
|
||||||
fieldset {
|
fieldset {
|
||||||
@include column(10);
|
@include column(10);
|
||||||
|
|
|
@ -1,4 +1,5 @@
|
||||||
@import 'wagtailadmin/scss/variables';
|
@import 'wagtailadmin/scss/variables';
|
||||||
@import 'wagtailadmin/scss/mixins';
|
@import 'wagtailadmin/scss/mixins';
|
||||||
|
@import 'wagtailadmin/scss/grid';
|
||||||
|
|
||||||
@import '../../../../../../client/src/components/Draftail/Draftail';
|
@import '../../../../../../client/src/components/Draftail/Draftail';
|
||||||
|
|
Ładowanie…
Reference in New Issue