style: make editor more immersive with full-width design
- Remove border and background from full variant composer - Increase padding for better readability - Update toolbar padding to match content area - Make case study panel full-width and transparent 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
parent
75b61021a0
commit
9da64583ba
3 changed files with 19 additions and 7 deletions
|
|
@ -413,12 +413,13 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.panel-case-study {
|
.panel-case-study {
|
||||||
background: white;
|
background: transparent;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
min-height: 80vh;
|
min-height: 80vh;
|
||||||
margin: 0 auto;
|
margin: 0;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
@include breakpoint('phone') {
|
@include breakpoint('phone') {
|
||||||
min-height: 600px;
|
min-height: 600px;
|
||||||
|
|
|
||||||
|
|
@ -353,7 +353,7 @@
|
||||||
.edra-editor {
|
.edra-editor {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: $unit-2x;
|
padding: $unit-4x;
|
||||||
min-height: 100px;
|
min-height: 100px;
|
||||||
outline: none;
|
outline: none;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
|
|
@ -361,6 +361,15 @@
|
||||||
&.with-toolbar {
|
&.with-toolbar {
|
||||||
border-top: none;
|
border-top: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// More generous padding for full variant
|
||||||
|
.composer--full & {
|
||||||
|
padding: $unit-4x $unit-6x;
|
||||||
|
|
||||||
|
@include breakpoint('phone') {
|
||||||
|
padding: $unit-3x $unit-4x;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.edra-loading {
|
.edra-loading {
|
||||||
|
|
@ -390,9 +399,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.composer--full {
|
.composer--full {
|
||||||
background: $white;
|
background: transparent;
|
||||||
border: 1px solid $gray-85;
|
|
||||||
border-radius: $corner-radius;
|
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
@ -162,8 +162,12 @@
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 4px;
|
gap: 4px;
|
||||||
padding: 0 $unit-2x;
|
padding: 0 $unit-6x;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
|
|
||||||
|
@include breakpoint('phone') {
|
||||||
|
padding: 0 $unit-4x;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.text-style-dropdown {
|
.text-style-dropdown {
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue