parent
70d6bc2e54
commit
70c0d85015
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
@ -0,0 +1,35 @@ |
||||
content { |
||||
display: flex; |
||||
justify-content: center; |
||||
} |
||||
|
||||
button { |
||||
padding: 5em; |
||||
} |
||||
|
||||
modal { |
||||
display: flex; |
||||
position: fixed; |
||||
align-items: center; |
||||
justify-content: center; |
||||
top: 0; |
||||
left: 0; |
||||
right: 0; |
||||
bottom: 0; |
||||
z-index: 10; |
||||
background: rgba(244,244,244,0.75); |
||||
padding: 0px; |
||||
} |
||||
|
||||
modal-content { |
||||
flex-direction: column; |
||||
background: white; |
||||
border: 1px solid var(--color-accent); |
||||
border-radius: 5px; |
||||
max-height: 300px; |
||||
min-height: 300px; |
||||
max-width: 300px; |
||||
width: 100%; |
||||
z-index: 20; |
||||
padding: 0.5em; |
||||
} |
||||
@ -0,0 +1,11 @@ |
||||
<button on:click={ () => visible = true }>Click Me!</button> |
||||
|
||||
{#if visible} |
||||
<modal on:click={ () => visible = false }> |
||||
<modal-content> |
||||
<h1>This Is A Modal</h1> |
||||
<p>Designers love modals. Click anywhere to close this.</p> |
||||
</modal-content> |
||||
</modal> |
||||
{/if} |
||||
|
||||
@ -0,0 +1,34 @@ |
||||
content { |
||||
display: flex; |
||||
flex-direction: column; |
||||
} |
||||
|
||||
/* mvp.css aleady has a nav so using this |
||||
name to demonstrate how to make your own. */ |
||||
nav-bar { |
||||
display: flex; |
||||
flex-direction: row; |
||||
width: 100%; |
||||
justify-content: space-evenly; |
||||
|
||||
/* this is just for displaying here */ |
||||
padding: 1em; |
||||
border: 1px solid var(--color-accent); |
||||
margin-bottom: 1em; |
||||
} |
||||
|
||||
nav-bar middle { |
||||
display: flex; |
||||
flex: 2; |
||||
justify-content: center; |
||||
padding-left: 1em; |
||||
padding-right: 1em; |
||||
} |
||||
|
||||
nav-bar middle input { |
||||
width: 100%; |
||||
} |
||||
|
||||
.alternate { |
||||
background-color: #ddd; |
||||
} |
||||
@ -0,0 +1,30 @@ |
||||
<nav-bar> |
||||
<left> |
||||
<b><Icon name="trash" color="var(--color-text)" /> fsck CSS</b> |
||||
</left> |
||||
|
||||
<middle> |
||||
<input placeholder="Search"> |
||||
</middle> |
||||
|
||||
<right> |
||||
<button>Log In</button> |
||||
<a>Sign Up</a> |
||||
</right> |
||||
</nav-bar> |
||||
|
||||
<nav-bar class="alternate"> |
||||
<left> |
||||
<b><Icon name="trash" color="var(--color-text)" /> fsck CSS</b> |
||||
</left> |
||||
|
||||
<middle> |
||||
<!-- you just leave this empty and flexbox |
||||
will expand it for you. --> |
||||
</middle> |
||||
|
||||
<right> |
||||
<button>Log In</button> |
||||
<button id="signup">Sign Up</button> |
||||
</right> |
||||
</nav-bar> |
||||
@ -0,0 +1,53 @@ |
||||
content { |
||||
display: flex; |
||||
flex: flex-shrink; |
||||
flex-grow: 1; |
||||
justify-content: center; |
||||
} |
||||
|
||||
panel { |
||||
display: flex; |
||||
flex-direction: column; |
||||
border: 1px solid #eee; |
||||
width: min-content; |
||||
} |
||||
|
||||
panel top { |
||||
width: 480px; /* sets a header for display */ |
||||
padding: 0.5rem; |
||||
} |
||||
|
||||
panel middle { |
||||
padding-left: 0.5rem; |
||||
padding-right: 0.5rem; |
||||
display: flex; |
||||
flex-direction: column; |
||||
justify-content: flex-start; |
||||
} |
||||
|
||||
panel middle h4 { |
||||
} |
||||
|
||||
panel bottom { |
||||
flex-shrink: 0; |
||||
display: flex; |
||||
flex-direction: row; |
||||
justify-content: space-evenly; |
||||
} |
||||
|
||||
panel bottom button { |
||||
display: flex; |
||||
margin: 0; |
||||
border-radius: unset; |
||||
width: 100%; |
||||
justify-content: space-evenly; |
||||
} |
||||
|
||||
button:hover { |
||||
filter: invert(20%); |
||||
} |
||||
|
||||
button#cancel { |
||||
background: unset; |
||||
color: var(--color-text); |
||||
} |
||||
@ -0,0 +1,20 @@ |
||||
<panel> |
||||
<top> |
||||
<h1>Panel is a Card</h1> |
||||
</top> |
||||
|
||||
<middle> |
||||
<h4> |
||||
Panel Example |
||||
</h4> |
||||
<p>Not sure what the big deal is with the difference between panels and cards |
||||
but I'm doing all the things so here's a panel. Let's say, buttons on a panel |
||||
are different to demonstrate how to make a button strip. </p> |
||||
</middle> |
||||
|
||||
<bottom> |
||||
<button id="cancel"><Icon name="x-circle" color="var(--color-text)" size="24"/> CANCEL</button> |
||||
<button><Icon name="check-circle" color="var(--color-bg)" size="24" /> OK</button> |
||||
</bottom> |
||||
</panel> |
||||
|
||||
@ -0,0 +1,76 @@ |
||||
<script> |
||||
import CodeView from '../components/CodeView.svelte'; |
||||
import Icon from '../components/Icon.svelte'; |
||||
</script> |
||||
<style> |
||||
content { |
||||
display: flex; |
||||
flex-direction: column; |
||||
} |
||||
|
||||
/* mvp.css aleady has a nav so using this |
||||
name to demonstrate how to make your own. */ |
||||
nav-bar { |
||||
display: flex; |
||||
flex-direction: row; |
||||
width: 100%; |
||||
justify-content: space-evenly; |
||||
|
||||
/* this is just for displaying here */ |
||||
padding: 1em; |
||||
border: 1px solid var(--color-accent); |
||||
margin-bottom: 1em; |
||||
} |
||||
|
||||
nav-bar middle { |
||||
display: flex; |
||||
flex: 2; |
||||
justify-content: center; |
||||
padding-left: 1em; |
||||
padding-right: 1em; |
||||
} |
||||
|
||||
nav-bar middle input { |
||||
width: 100%; |
||||
} |
||||
|
||||
.alternate { |
||||
background-color: #ddd; |
||||
} |
||||
</style> |
||||
|
||||
<content> |
||||
<nav-bar> |
||||
<left> |
||||
<b><Icon name="trash" color="var(--color-text)" /> fsck CSS</b> |
||||
</left> |
||||
|
||||
<middle> |
||||
<input placeholder="Search"> |
||||
</middle> |
||||
|
||||
<right> |
||||
<button>Log In</button> |
||||
<a>Sign Up</a> |
||||
</right> |
||||
</nav-bar> |
||||
|
||||
<nav-bar class="alternate"> |
||||
<left> |
||||
<b><Icon name="trash" color="var(--color-text)" /> fsck CSS</b> |
||||
</left> |
||||
|
||||
<middle> |
||||
<!-- you just leave this empty and flexbox |
||||
will expand it for you. --> |
||||
</middle> |
||||
|
||||
<right> |
||||
<button>Log In</button> |
||||
<button id="signup">Sign Up</button> |
||||
</right> |
||||
</nav-bar> |
||||
|
||||
</content> |
||||
|
||||
<CodeView source="/code/NavBar" /> |
||||
@ -0,0 +1,83 @@ |
||||
<script> |
||||
import CodeView from '../components/CodeView.svelte'; |
||||
import Icon from '../components/Icon.svelte'; |
||||
</script> |
||||
<style> |
||||
content { |
||||
display: flex; |
||||
flex: flex-shrink; |
||||
flex-grow: 1; |
||||
justify-content: center; |
||||
} |
||||
|
||||
panel { |
||||
display: flex; |
||||
flex-direction: column; |
||||
border: 1px solid #eee; |
||||
width: min-content; |
||||
} |
||||
|
||||
panel top { |
||||
width: 480px; /* sets a header for display */ |
||||
padding: 0.5rem; |
||||
} |
||||
|
||||
panel middle { |
||||
padding-left: 0.5rem; |
||||
padding-right: 0.5rem; |
||||
display: flex; |
||||
flex-direction: column; |
||||
justify-content: flex-start; |
||||
} |
||||
|
||||
panel middle h4 { |
||||
} |
||||
|
||||
panel bottom { |
||||
flex-shrink: 0; |
||||
display: flex; |
||||
flex-direction: row; |
||||
justify-content: space-evenly; |
||||
} |
||||
|
||||
panel bottom button { |
||||
display: flex; |
||||
margin: 0; |
||||
border-radius: unset; |
||||
width: 100%; |
||||
justify-content: space-evenly; |
||||
} |
||||
|
||||
button:hover { |
||||
filter: invert(20%); |
||||
} |
||||
|
||||
button#cancel { |
||||
background: unset; |
||||
color: var(--color-text); |
||||
} |
||||
</style> |
||||
|
||||
<content> |
||||
<panel> |
||||
<top> |
||||
<h1>Panel is a Card</h1> |
||||
</top> |
||||
|
||||
<middle> |
||||
<h4> |
||||
Panel Example |
||||
</h4> |
||||
<p>Not sure what the big deal is with the difference between panels and cards |
||||
but I'm doing all the things so here's a panel. Let's say, buttons on a panel |
||||
are different to demonstrate how to make a button strip. </p> |
||||
</middle> |
||||
|
||||
<bottom> |
||||
<button id="cancel"><Icon name="x-circle" color="var(--color-text)" size="24"/> CANCEL</button> |
||||
<button><Icon name="check-circle" color="var(--color-bg)" size="24" /> OK</button> |
||||
</bottom> |
||||
</panel> |
||||
</content> |
||||
|
||||
<CodeView source="/code/Panels" /> |
||||
@ -0,0 +1,73 @@ |
||||
<script> |
||||
import CodeView from '../components/CodeView.svelte'; |
||||
import Icon from '../components/Icon.svelte'; |
||||
</script> |
||||
<style> |
||||
content { |
||||
display: flex; |
||||
flex-direction: column; |
||||
} |
||||
|
||||
/* mvp.css aleady has a nav so using this |
||||
name to demonstrate how to make your own. */ |
||||
nav-bar { |
||||
display: flex; |
||||
flex-direction: row; |
||||
width: 100%; |
||||
justify-content: space-evenly; |
||||
padding: 1em; /* this is only for here */ |
||||
border: 1px solid var(--color-accent); |
||||
margin-bottom: 1em; |
||||
} |
||||
|
||||
nav-bar middle { |
||||
display: flex; |
||||
flex: 2; |
||||
justify-content: center; |
||||
padding-left: 1em; |
||||
padding-right: 1em; |
||||
} |
||||
|
||||
nav-bar middle input { |
||||
width: 100%; |
||||
} |
||||
|
||||
.alternate { |
||||
background-color: #ddd; |
||||
} |
||||
</style> |
||||
|
||||
<content> |
||||
<nav-bar> |
||||
<left> |
||||
<b><Icon name="trash" color="var(--color-text)" /> fsck CSS</b> |
||||
</left> |
||||
|
||||
<middle> |
||||
<input placeholder="Search"> |
||||
</middle> |
||||
|
||||
<right> |
||||
<button>Log In</button> |
||||
<a>Sign Up</a> |
||||
</right> |
||||
</nav-bar> |
||||
|
||||
<nav-bar class="alternate"> |
||||
<left> |
||||
<b><Icon name="trash" color="var(--color-text)" /> fsck CSS</b> |
||||
</left> |
||||
|
||||
<middle> |
||||
<!-- you just leave this empty and flexbox |
||||
will expand it for you. --> |
||||
</middle> |
||||
|
||||
<right> |
||||
<button>Log In</button> |
||||
<button id="signup">Sign Up</button> |
||||
</right> |
||||
</nav-bar> |
||||
|
||||
</content> |
||||
|
||||
@ -0,0 +1,81 @@ |
||||
<script> |
||||
import Icon from '../components/Icon.svelte'; |
||||
</script> |
||||
<style> |
||||
content { |
||||
display: flex; |
||||
flex: flex-shrink; |
||||
flex-grow: 1; |
||||
justify-content: center; |
||||
} |
||||
|
||||
panel { |
||||
display: flex; |
||||
flex-direction: column; |
||||
border: 1px solid #eee; |
||||
width: min-content; |
||||
} |
||||
|
||||
panel top { |
||||
width: 480px; /* sets a header for display */ |
||||
padding: 0.5rem; |
||||
} |
||||
|
||||
panel middle { |
||||
padding-left: 0.5rem; |
||||
padding-right: 0.5rem; |
||||
display: flex; |
||||
flex-direction: column; |
||||
justify-content: flex-start; |
||||
} |
||||
|
||||
panel middle h4 { |
||||
} |
||||
|
||||
panel bottom { |
||||
flex-shrink: 0; |
||||
display: flex; |
||||
flex-direction: row; |
||||
justify-content: space-evenly; |
||||
} |
||||
|
||||
panel bottom button { |
||||
display: flex; |
||||
margin: 0; |
||||
border-radius: unset; |
||||
width: 100%; |
||||
justify-content: space-evenly; |
||||
} |
||||
|
||||
button:hover { |
||||
filter: invert(20%); |
||||
} |
||||
|
||||
button#cancel { |
||||
background: unset; |
||||
color: var(--color-text); |
||||
} |
||||
</style> |
||||
|
||||
<content> |
||||
<panel> |
||||
<top> |
||||
<h1>Panel is a Card</h1> |
||||
</top> |
||||
|
||||
<middle> |
||||
<h4> |
||||
Panel Example |
||||
</h4> |
||||
<p>Not sure what the big deal is with the difference between panels and cards |
||||
but I'm doing all the things so here's a panel. Let's say, buttons on a panel |
||||
are different to demonstrate how to make a button strip. </p> |
||||
</middle> |
||||
|
||||
<bottom> |
||||
<button id="cancel"><Icon name="x-circle" color="var(--color-text)" size="24"/> CANCEL</button> |
||||
<button><Icon name="check-circle" color="var(--color-bg)" size="24" /> OK</button> |
||||
</bottom> |
||||
</panel> |
||||
</content> |
||||
|
||||
Loading…
Reference in new issue