Mercurial > zeropaste
diff app/assets/stylesheets/application.scss @ 398:851432f21603
Nope, failing at redesigning.
author | nanaya <me@myconan.net> |
---|---|
date | Sun, 06 Sep 2015 03:52:52 +0900 |
parents | 26f8c634052c |
children | 6bb805283daf |
line wrap: on
line diff
--- a/app/assets/stylesheets/application.scss Sat Jun 27 14:46:01 2015 +0900 +++ b/app/assets/stylesheets/application.scss Sun Sep 06 03:52:52 2015 +0900 @@ -1,224 +1,35 @@ -$spacing: 10px; -$screen-sm: 600px; - -$bg: #fff; -$gray: #eee; -$gray-dark: darken($gray, 20%); -$danger: scale-color(#f00, $lightness: 90%); -$danger-dark: darken($danger, 60%); -$info: scale-color(#0f0, $lightness: 90%); -$info-dark: darken($info, 60%); -$primary: scale-color(#06f, $lightness: 90%); - -$monospace: Consolas, monospace; - -*, ::before, ::after { - position: relative; - box-sizing: border-box; -} - -body, button, input, textarea { - font-family: Segoe UI, Helvetica Neue, Helvetica, Arial, sans-serif; - font-size: 12px; -} - -p, h1 { - margin: 0px; -} - -html { - height: 100%; -} - -body { - height: 100%; - margin: 0px; - display: flex; - flex-direction: column; -} +@import "bootstrap"; +@import "highlightjs"; .input-url1 { display: none !important; } -.monospaced { - font-family: $monospace; -} - -.header { - background-color: $gray; - display: flex; - justify-content: space-between; - align-items: center; - padding: $spacing; - flex: none; -} - -.main { - display: flex; - flex: 1 0 auto; - padding: $spacing; - flex-direction: column; +.paste-paste { + resize: none; + font-family: $font-family-monospace; } -.main-form { - flex: 1; - display: flex; - flex-direction: column; -} - -.main-textarea-container { - flex: 1 0 auto; - display: flex; -} +.paste-show { + padding: $grid-gutter-width/2; + margin-bottom: $grid-gutter-width/2; -.main-textarea { - width: 100%; -} - -.settings { - display: flex; - margin: $spacing (-$spacing/2) 0px; -} + border-width: 0px 1px 1px 1px; + border-style: solid; + border-color: $nav-tabs-active-link-hover-border-color; + border-radius: 0px 0px $border-radius-base $border-radius-base; -.settings-item { - display: flex; - flex-direction: column; - flex: 1; - margin: 0px $spacing/2; - - @media (min-width: $screen-sm) { - flex: none; + &__content { + border: none; + background-color: #fff; + padding: 0px; + margin: 0px; } } -.settings-label { - margin-bottom: $spacing/2; -} - -.actions { - display: flex; -} - -.action { - flex: 1; - @media (min-width: $screen-sm) { - flex: none; - } - margin: 0px $spacing/2; -} - -.alert { - padding: $spacing; - flex: none; -} - -.alert-danger { - background-color: $danger; -} - -.alert-info { - background-color: $info; -} - -.field_with_errors { - display: flex; - width: 100%; - border: 1px solid $danger-dark; -} - -.paste-content { - flex: 1 0 auto; - display: flex; - flex-direction: column; -} - -.paste-nav { - display: flex; - justify-content: space-between; - margin: 0px (-$spacing/2); -} - -.paste-nav-item { - flex: 1 1 0px; - text-align: center; - border: 1px solid $gray-dark; - margin: 0px $spacing/2 $spacing; - padding: $spacing; - - &:hover { - background-color: $gray-dark; - } -} - -.active { - background-color: $gray; +.zp-hl { + background-color: #fff; + padding: 0px; } -.paste-plain { - background-color: $gray; - margin: 0px; - border: 1px solid $gray-dark; - flex: none; -} - -.line { - background-color: $bg; - flex: 1; -} - -.paste-nav--bottom { - margin-top: $spacing; - margin-bottom: 0px; -} - -.settings-item--inline { - flex-direction: row; - flex: 1; -} - -.action--horizontal-minimum { - margin: 0px; - flex: none; +.zp-header { + margin-top: 0px; } - -.settings-group { - display: flex; - flex-direction: column; - width: 100%; - - @media (min-width: $screen-sm) { - flex-direction: row; - justify-content: space-between; - } -} - -.btn { - box-shadow: 0px -2px 0px rgba(0, 0, 0, 0.1) inset; - border: 0px; - background-color: $gray; - cursor: pointer; - padding: $spacing ($spacing*2); -} - -@mixin btn-color($color) { - background-color: $color; - - &:hover { - background-color: darken($color, 10%); - } - - &:focus { - background-color: darken($color, 20%); - } -} - -.btn--primary { - @include btn-color($primary); -} - -.btn--danger { - @include btn-color($danger); -} - -.btn--min-width { - flex: none; -}