diff options
| author | Teddy Wing | 2015-01-24 04:14:06 -0500 |
|---|---|---|
| committer | Teddy Wing | 2015-01-24 04:14:06 -0500 |
| commit | d5f62176d49800037adb82bac1e50b28952e4911 (patch) | |
| tree | 99c6ae43ca77280ff6f82c03da96ae3f46500c20 | |
| parent | 350792d5fe14e570b3d489148aabcab7cdea4572 (diff) | |
| download | Notes-angular-demo-d5f62176d49800037adb82bac1e50b28952e4911.tar.bz2 | |
main view: Create & style delete link
Made as an "x" button to the right of the note load/edit link.
| -rw-r--r-- | app/assets/stylesheets/layouts/_global.scss | 35 | ||||
| -rw-r--r-- | app/views/home/main.html.erb | 9 |
2 files changed, 39 insertions, 5 deletions
diff --git a/app/assets/stylesheets/layouts/_global.scss b/app/assets/stylesheets/layouts/_global.scss index 621df8d..5113083 100644 --- a/app/assets/stylesheets/layouts/_global.scss +++ b/app/assets/stylesheets/layouts/_global.scss @@ -8,6 +8,10 @@ body { display: block; } +.display-none { + display: none !important; +} + .margin-top-70 { margin-top: 70px; @@ -61,13 +65,13 @@ $sidebar-width: 250px; border-right: 2px solid rgb(234, 224, 224); overflow: auto; - a { + .sidebar-link { border-bottom: 1px solid rgb(213, 202, 202); color: rgb(18, 113, 18); text-decoration: none; } - a:hover, + .sidebar-link:hover, .active { background: #249124; /* Old browsers */ background: -moz-linear-gradient(top, #249124 0%, #127112 100%); /* FF3.6+ */ @@ -80,6 +84,33 @@ $sidebar-width: 250px; color: #ddd; } + + .delete-link { + position: absolute; + display: block; + margin-left: 220px; + margin-top: -34px; + height: 24px; + width: 24px; + background-color: #E75F5F; + border-radius: 50%; + color: #FFFCFC; + font-size: 25px; + text-decoration: none; + + span { + position: relative; + left: 3px; + } + + &:hover { + background-color: #E54343; + } + + &:active { + background-color: #D22121; + } + } } diff --git a/app/views/home/main.html.erb b/app/views/home/main.html.erb index 73ee2b6..84244f6 100644 --- a/app/views/home/main.html.erb +++ b/app/views/home/main.html.erb @@ -8,9 +8,12 @@ <div class="margin-top-70"> <div class="sidebar position-fixed min-height-100%"> - <a href="#" class="display-block padding-13">A Note</a> - <a href="#" class="display-block padding-13">A Note</a> - <a href="#" class="display-block padding-13">A Note</a> + <a href="#" class="sidebar-link display-block padding-13">A Note</a> + <a href="#" class="delete-link display-none"><span>×</span></a> + <a href="#" class="sidebar-link display-block padding-13">A Note</a> + <a href="#" class="delete-link display-none"><span>×</span></a> + <a href="#" class="sidebar-link display-block padding-13">A Note</a> + <a href="#" class="delete-link display-none"><span>×</span></a> </div> <div class="note-editor" contenteditable> |