mmoser/sms-pager
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

scss org and parenthood adding

Browse Source
This commit is contained in:
Mark Moser
2015-10-03 15:15:19 -05:00
parent c1f872e9a1
commit 0510f1c4c2
19 changed files with 207 additions and 162 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
app/assets/javascripts/main.js
View File

@ -1,4 +1,4 @@
function getPersonPhone(id, collection){
function getPersonPhone(id, collection) {
for(var i = 0; i < collection.length; i++){
if(collection[i].id == id){
return collection[i].phone;
@ -7,6 +7,7 @@ function getPersonPhone(id, collection){
}
$( document ).ready(function() {
$('[data-id=alert_close]').on('click', function(){
$(this).parent().slideUp();
});

2
app/assets/stylesheets/application.css
View File

@ -10,6 +10,6 @@
* defined in the other CSS/SCSS files in this directory. It is generally better to create a new
* file per style scope.
*
*= require_tree .
*= require main.scss
*= require_self
*/

15
app/assets/stylesheets/atoms/buttons.scss Normal file
View File

@ -0,0 +1,15 @@
.btn {
cursor: pointer;
display: inline-block;
padding: 5px;
&:hover {
color: $grey;
}
&:active {
box-shadow: 0 0 0.1em $grey;
}
}

158
app/assets/stylesheets/main.scss
View File

@ -1,155 +1,19 @@
// maybe this? => https://color.adobe.com/Theme-1-color-theme-6893131/edit/?copy=true
$black: #000;
$white: #fff;
$blue: #211caf;
$dark: #646267;
$grey: #8e969d;
$light: #c7c9cd;
$grey: #8e969d;
$dark: #646267;
$red: #b10001;
$taupe: #f2e8df;
$blue: #211caf;
$red: #b10001;
$white: #fff;
@mixin inline-ul {
display: inline-block;
list-style: none;
margin: 0;
padding: 0;
@import 'mixins';
@import 'reset';
li {
display: inline-block;
float: left;
margin: 0;
padding: 0;
@import 'atoms/buttons';
a {
display: inline-block;
padding: 15px;
text-decoration: none;
}
}
}
@import 'molecules/nav';
html {
background-color: $taupe;
color: $dark;
margin: 0;
padding: 0;
}
body {
margin: 15px;
padding: 0;
}
.nav {
@include inline-ul;
background-color: $dark;
color: $light;
margin: -15px -15px 15px;
width: calc(100% + 30px);
li {
&:hover {
background-color: $grey;
}
a {
color: $light;
}
}
}
.sub-nav {
@include inline-ul;
margin: -19px -15px 0;
a {
color: $dark;
&:hover {
background-color: $light;
}
}
}
form {
width: 100%;
* {
font-size: 14px;
line-height: 1.6em;
}
label {
display: inline-block;
margin: 0.6em 0 0;
width: 100%;
&:after {
content: ": ";
}
}
input {
display: block;
margin: 0 0 0.6em;
padding: 5px;
}
[type=submit] {
margin: 0.6em 0;
}
textarea {
height: 5em;
max-width: 300px;
padding: 5px;
width: calc(100% - 30px);
}
}
.alertbox {
background-color: $white;
border: 2px solid $white;
color: $dark;
left: calc(50% - 125px);
margin-bottom: 15px;
padding: 10px 35px 10px 20px;
position: absolute;
top: 20px;
width: 250px;
z-index: 50;
& + & { position: relative; }
&.box-blue {
background-color: $blue;
border-color: $light;
color: $white;
}
&.box-red {
background-color: $red;
color: $white;
}
.box-close {
cursor: pointer;
display: inline-block;
float: right;
height: 15px;
margin-top: 1px;
position: relative;
right: -25px;
width: 15px;
&:before {
color: $white;
content: "\00d7";
left: 3px;
position: relative;
top: -2px;
}
}
}
@import 'organisms/alerts';
@import 'organisms/forms';

19
app/assets/stylesheets/mixins.scss Normal file
View File

@ -0,0 +1,19 @@
@mixin inline-ul {
display: inline-block;
list-style: none;
margin: 0;
padding: 0;
li {
display: inline-block;
float: left;
margin: 0;
padding: 0;
a {
display: inline-block;
padding: 15px;
text-decoration: none;
}
}
}

31
app/assets/stylesheets/molecules/nav.scss Normal file
View File

@ -0,0 +1,31 @@
.nav {
@include inline-ul;
background-color: $dark;
color: $light;
margin: -15px -15px 15px;
width: calc(100% + 30px);
li {
&:hover {
background-color: $grey;
}
a {
color: $light;
}
}
}
.sub-nav {
@include inline-ul;
margin: -19px -15px 0;
a {
color: $dark;
&:hover {
background-color: $light;
}
}
}

43
app/assets/stylesheets/organisms/alerts.scss Normal file
View File

@ -0,0 +1,43 @@
.alertbox {
background-color: $white;
border: 2px solid $white;
color: $dark;
left: calc(50% - 125px);
margin-bottom: 15px;
padding: 10px 35px 10px 20px;
position: absolute;
top: 20px;
width: 250px;
z-index: 50;
& + & { position: relative; }
&.box-blue {
background-color: $blue;
border-color: $light;
color: $white;
}
&.box-red {
background-color: $red;
color: $white;
}
.box-close {
cursor: pointer;
display: inline-block;
float: right;
height: 15px;
margin-top: 1px;
position: relative;
right: -25px;
width: 15px;
&:before {
color: $white;
content: "\00d7";
left: 3px;
position: relative;
top: -2px;
}
}
}

36
app/assets/stylesheets/organisms/forms.scss Normal file
View File

@ -0,0 +1,36 @@
form {
width: 100%;
* {
font-size: 14px;
line-height: 1.6em;
}
label {
display: inline-block;
margin: 0.6em 0 0;
width: 100%;
&:after {
content: ": ";
}
}
input {
display: block;
margin: 0 0 0.6em;
padding: 5px;
}
[type=submit] {
margin: 0.6em 0;
}
textarea {
height: 5em;
max-width: 300px;
padding: 5px;
width: calc(100% - 30px);
}
}

11
app/assets/stylesheets/reset.scss Normal file
View File

@ -0,0 +1,11 @@
html {
background-color: $taupe;
color: $dark;
margin: 0;
padding: 0;
}
body {
margin: 15px;
padding: 0;
}