Added Tabs to edit page
This commit is contained in:
29
sass/framework/_ace.sass
Normal file
29
sass/framework/_ace.sass
Normal file
@@ -0,0 +1,29 @@
|
||||
@use '../abstracts' as *
|
||||
@use 'sass:color' // For color.adjust()—non-deprecated color tweaks
|
||||
@use '../base' as *
|
||||
|
||||
// ACE Editor
|
||||
.editor-container
|
||||
width: 100%
|
||||
min-height: 400px // ~10 rows
|
||||
|
||||
.ace-editor
|
||||
height: 400px // Scrollable
|
||||
border: 1px solid $accent-light
|
||||
font-family: $mono-font // Your monospace
|
||||
|
||||
// Ace internals (dark theme tweaks)
|
||||
.ace_gutter
|
||||
background: $bg-darker !important
|
||||
color: $text-muted !important
|
||||
border-right: 1px solid $accent-light !important
|
||||
|
||||
.ace_scroller
|
||||
background: $bg-dark !important
|
||||
|
||||
.ace_text-layer .ace_print-margin
|
||||
background: transparent !important
|
||||
|
||||
// Selection
|
||||
.ace_marker-layer .ace_selection
|
||||
background: color.adjust($accent-light, $alpha: -0.3) !important // Green tint
|
||||
15
sass/framework/_edit_page.sass
Normal file
15
sass/framework/_edit_page.sass
Normal file
@@ -0,0 +1,15 @@
|
||||
@use '../abstracts' as *
|
||||
@use '../base' as *
|
||||
@use 'sass:color' // Already there for adjusts
|
||||
|
||||
#edit-page-title
|
||||
margin-top: 2rem
|
||||
|
||||
#title
|
||||
width: 100%
|
||||
font-size: 1.9rem
|
||||
padding: 20px
|
||||
|
||||
&>div
|
||||
font-size: 0.8rem
|
||||
margin: 8px 0 0 20px
|
||||
48
sass/framework/_tabs.sass
Normal file
48
sass/framework/_tabs.sass
Normal file
@@ -0,0 +1,48 @@
|
||||
// framework/_tabs.sass
|
||||
|
||||
@use '../abstracts' as *
|
||||
@use 'sass:color' // For color.adjust()—non-deprecated color tweaks
|
||||
|
||||
// Simplified tab styling: Square borders, no rounds
|
||||
.tab-container
|
||||
margin: space('lg') auto
|
||||
background: $bg-dark
|
||||
|
||||
.tab-nav
|
||||
display: flex
|
||||
background-color: $bg-darker
|
||||
border-bottom: 1px solid $border-light
|
||||
|
||||
.tab-button
|
||||
padding: space('sm') space('md')
|
||||
background: $bg-darker
|
||||
border: 1px solid $border-light
|
||||
border-bottom: none
|
||||
cursor: pointer
|
||||
font-size: 14px
|
||||
min-width: 120px // Makes them more square/equal
|
||||
text-align: center
|
||||
color: $text-light
|
||||
font-family: $mono-font // From vars
|
||||
|
||||
&:hover
|
||||
background-color: color.adjust($bg-darker, $lightness: 5%) // Modern, non-deprecated lighten equivalent
|
||||
|
||||
+ .tab-button
|
||||
border-left: none // Shared borders
|
||||
|
||||
&.active
|
||||
background-color: $bg-dark
|
||||
border-bottom: 2px solid $accent-light
|
||||
color: $accent-light
|
||||
font-weight: bold
|
||||
|
||||
.tab-content
|
||||
display: none
|
||||
padding: space('lg')
|
||||
background-color: $bg-dark
|
||||
color: $text-light
|
||||
border: none
|
||||
|
||||
&.active
|
||||
display: block
|
||||
108
sass/framework/_tags.sass
Normal file
108
sass/framework/_tags.sass
Normal file
@@ -0,0 +1,108 @@
|
||||
@use '../abstracts' as *
|
||||
@use 'sass:color' // For color.adjust()—non-deprecated color tweaks
|
||||
@use '../base' as *
|
||||
|
||||
// Tags Dropdown
|
||||
.tags-dropdown
|
||||
position: absolute
|
||||
top: 100%
|
||||
left: 0
|
||||
right: 0
|
||||
max-height: 200px
|
||||
overflow-y: auto
|
||||
background: $bg-darker
|
||||
border: 1px solid $border-light
|
||||
border-top: none
|
||||
border-radius: 0 0 4px 4px
|
||||
list-style: none
|
||||
margin: 0
|
||||
padding: 0
|
||||
z-index: 10
|
||||
opacity: 0
|
||||
visibility: hidden
|
||||
transition: opacity 0.2s
|
||||
|
||||
&[aria-expanded="true"]
|
||||
opacity: 1
|
||||
visibility: visible
|
||||
|
||||
li
|
||||
padding: space('xs') space('sm')
|
||||
cursor: pointer
|
||||
color: $text-light
|
||||
font-size: 14px
|
||||
border-bottom: 1px solid transparent
|
||||
|
||||
&:hover,
|
||||
&.selected
|
||||
background: color.adjust($accent-light, $alpha: -0.1)
|
||||
color: $accent-light
|
||||
|
||||
&:last-child
|
||||
border-bottom: none
|
||||
|
||||
.tags-input
|
||||
position: relative // For absolute dropdown
|
||||
|
||||
// Tags Input
|
||||
.tags-input
|
||||
display: flex
|
||||
flex-wrap: wrap
|
||||
gap: space('xs')
|
||||
align-items: center
|
||||
border: 1px solid $border-light
|
||||
padding: space('xs')
|
||||
background: $bg-darker
|
||||
min-height: 40px
|
||||
grid-column: 2 // Spans input area in .form-row grid
|
||||
|
||||
input
|
||||
border: none
|
||||
background: transparent
|
||||
color: $text-light
|
||||
font-family: $mono-font
|
||||
font-size: 14px
|
||||
flex: 1
|
||||
min-width: 100px
|
||||
outline: none
|
||||
|
||||
&::placeholder
|
||||
color: $text-muted
|
||||
|
||||
.tag-chip
|
||||
display: inline-flex
|
||||
align-items: center
|
||||
background: color.adjust($accent-light, $alpha: -0.2)
|
||||
color: $accent-light
|
||||
padding: space('xs') space('sm')
|
||||
border-radius: 4px
|
||||
font-size: 12px
|
||||
max-width: 150px
|
||||
overflow: hidden
|
||||
text-overflow: ellipsis
|
||||
white-space: nowrap
|
||||
|
||||
.tag-remove
|
||||
background: none
|
||||
border: none
|
||||
color: inherit
|
||||
font-size: 16px
|
||||
margin-left: space('xs')
|
||||
cursor: pointer
|
||||
padding: 0
|
||||
line-height: 1
|
||||
|
||||
&:hover
|
||||
opacity: 0.7
|
||||
|
||||
// Tags Autocomplete (native datalist styling)
|
||||
.tags-input input[list]
|
||||
// Existing input styles apply...
|
||||
|
||||
#tag-suggestions
|
||||
// Native datalist not directly stylable, but options can be influenced via input focus
|
||||
// For custom polyfill, add JS-generated <ul>, but native is fine for now
|
||||
|
||||
// Browser-specific tweaks (Chrome/Firefox)
|
||||
.tags-input input[list]::-webkit-calendar-picker-indicator
|
||||
display: none // Hide arrow if interfering
|
||||
47
sass/framework/_tooltip.sass
Normal file
47
sass/framework/_tooltip.sass
Normal file
@@ -0,0 +1,47 @@
|
||||
@use '../abstracts' as *
|
||||
@use '../base' as *
|
||||
@use 'sass:color' // Already there for adjusts
|
||||
|
||||
// Tooltip styling (mouse-follow version)
|
||||
.tooltip
|
||||
position: relative
|
||||
display: inline-block
|
||||
cursor: help
|
||||
font-size: 16px
|
||||
color: $accent-light // Green accent for ?
|
||||
margin-left: space('xs') // 0.25rem
|
||||
top: 2px
|
||||
|
||||
.tooltiptext
|
||||
visibility: hidden
|
||||
width: 200px
|
||||
background-color: $bg-darker // Darker bg
|
||||
color: $text-light // White text
|
||||
text-align: left // Changed to left-align for better readability
|
||||
border-radius: 0 // Square
|
||||
padding: space('sm') // 0.5rem
|
||||
position: fixed // Fixed to viewport, updated by JS
|
||||
z-index: z('dropdown') // High z-index
|
||||
opacity: 0
|
||||
transition: opacity 0.3s
|
||||
font-size: 14px
|
||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2) // Subtle shadow
|
||||
pointer-events: none // Prevents mouse interference with tooltip
|
||||
|
||||
&::after
|
||||
content: ""
|
||||
position: absolute
|
||||
top: -5px // Arrow above tooltip (points up to mouse)
|
||||
left: 10px // Slight indent from left edge
|
||||
border-width: 5px
|
||||
border-style: solid
|
||||
border-color: $bg-darker transparent transparent transparent // Upward arrow
|
||||
|
||||
&:hover .tooltiptext
|
||||
visibility: visible
|
||||
opacity: 1
|
||||
|
||||
// Accessibility: Hidden tooltip text for screen readers
|
||||
.tooltip-desc
|
||||
position: absolute
|
||||
left: -9999px
|
||||
@@ -2,4 +2,9 @@
|
||||
@forward 'ui';
|
||||
@forward 'forms';
|
||||
@forward 'login_form';
|
||||
@forward 'logo';
|
||||
@forward 'logo';
|
||||
@forward 'tabs';
|
||||
@forward 'edit_page';
|
||||
@forward 'tooltip';
|
||||
@forward 'ace';
|
||||
@forward 'tags';
|
||||
Reference in New Issue
Block a user