diff --git a/app/assets/stylesheets/atoms/_base.scss b/app/assets/stylesheets/atoms/_base.scss index c4b498c..9f66533 100644 --- a/app/assets/stylesheets/atoms/_base.scss +++ b/app/assets/stylesheets/atoms/_base.scss @@ -1,4 +1,16 @@ body { margin: 20px auto; - width: 850px; + width: calc(100% - 20px); +} + +@media screen and (min-width: 769px) { + body { width: 750px; } +} + +@media screen and (min-width: 900px) { + body { width: 850px; } +} + +@media screen and (min-width: 1100px) { + body { width: 1000px; } } diff --git a/app/assets/stylesheets/molecules/_passwords.scss b/app/assets/stylesheets/molecules/_passwords.scss index 1d5bd0f..34b10bb 100644 --- a/app/assets/stylesheets/molecules/_passwords.scss +++ b/app/assets/stylesheets/molecules/_passwords.scss @@ -1,5 +1,6 @@ .passwd { - width: 20em; + min-width: 12em; + font-family: monospace; a, i { diff --git a/app/assets/stylesheets/organisms/_tables.scss b/app/assets/stylesheets/organisms/_tables.scss index eeec69a..ff19325 100644 --- a/app/assets/stylesheets/organisms/_tables.scss +++ b/app/assets/stylesheets/organisms/_tables.scss @@ -1,11 +1,46 @@ table { + // border-collapse: collapse; + border-spacing: 0; width: 100%; } -th { +th, +td { text-align: left; + padding: 10px; } -td { - padding: 5px 0; +thead { + th { + background-color: #888; + border: 1px solid #888; + color: #f5f5f5; + } + + th:first-of-type { border-radius: 5px 0 0 0; } + th:last-of-type { border-radius: 0 5px 0 0; } +} + +tbody { + tr:nth-of-type(odd) { + td { + background-color: #f5f5f5; + } + } + + td:first-of-type { border-left: 1px solid #888;} + td:last-of-type { border-right: 1px solid #888;} + tr:last-of-type { + td { + border-bottom: 1px solid #888; + + &:first-of-type { + border-radius: 0 0 0 5px; + } + + &:last-of-type { + border-radius: 0 0 5px 0; + } + } + } } diff --git a/app/views/accounts/_form.html.erb b/app/views/accounts/_form.html.erb index f4d5ba2..a78e592 100644 --- a/app/views/accounts/_form.html.erb +++ b/app/views/accounts/_form.html.erb @@ -18,7 +18,7 @@