diff options
| -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> |