53 lines
2.2 KiB
Sass
53 lines
2.2 KiB
Sass
// framework/_login_form.sass
|
|
|
|
@use '../abstracts' as *
|
|
|
|
#login
|
|
// No background or border—use parent's ambient styling
|
|
padding: 0 // Or keep minimal if needed; adjust to 2rem if you want internal space
|
|
// No centering: left-aligned by default
|
|
|
|
// Wrapper for inputs/button to align widths
|
|
input[type="text"],
|
|
input[type="password"],
|
|
button[type="submit"]
|
|
width: 100% // Full width of form (no max cap for flow)
|
|
max-width: 300px // Keep cap for consistency across fields
|
|
padding: 1rem
|
|
margin-bottom: 1rem
|
|
box-sizing: border-box // Include padding in width
|
|
font-size: 1rem
|
|
border: 1px solid $border-light
|
|
border-radius: 4px
|
|
background: $bg-dark
|
|
color: $text-light
|
|
|
|
// Icon backgrounds: Cyber icons via data URI, now in white for visibility
|
|
input[type="text"] // Username input
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E")
|
|
background-repeat: no-repeat
|
|
background-position: 1rem center
|
|
background-size: 20px
|
|
padding-left: 3rem // Space for icon
|
|
|
|
input[type="password"] // Password input
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2' ry='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E")
|
|
background-repeat: no-repeat
|
|
background-position: 1rem center
|
|
background-size: 20px
|
|
padding-left: 3rem // Space for icon
|
|
|
|
button[type="submit"]
|
|
background: $accent-light // Green accent for submit
|
|
border-color: $accent-light
|
|
cursor: pointer
|
|
transition: background 0.2s
|
|
|
|
&:hover
|
|
background: $accent-light
|
|
text-shadow: 0 0 5px rgba($accent-light, 0.5) // Cyber glow
|
|
|
|
// No icon needed for button, but add if you want (e.g., arrow)
|
|
&::after
|
|
content: ' →' // Simple arrow, or swap for Material Icon
|
|
margin-left: 0.5rem |