Added compass, finished shapes filter demo
Glen Cheney
11 years ago
parent
c1da3b374d
commit
d2a08407ee
@ -1,3 +1,5 @@
|
||||
|
||||
.DS_Store
|
||||
_site
|
||||
_site
|
||||
.sass_cache/*
|
||||
*.scssc
|
||||
@ -0,0 +1,25 @@
|
||||
# Require any additional compass plugins here.
|
||||
|
||||
# Set this to the root of your project when deployed:
|
||||
http_path = "/"
|
||||
css_dir = "css"
|
||||
sass_dir = "_scss"
|
||||
images_dir = "img"
|
||||
javascripts_dir = "js"
|
||||
|
||||
# You can select your preferred output style here (can be overridden via the command line):
|
||||
# output_style = :expanded or :nested or :compact or :compressed
|
||||
output_style = :expanded
|
||||
|
||||
# To enable relative paths to assets via compass helper functions. Uncomment:
|
||||
# relative_assets = true
|
||||
|
||||
# To disable debugging comments that display the original location of your selectors. Uncomment:
|
||||
line_comments = false
|
||||
|
||||
|
||||
# If you prefer the indented syntax, you might want to regenerate this
|
||||
# project again passing --syntax sass, or you can uncomment this:
|
||||
# preferred_syntax = :sass
|
||||
# and then run:
|
||||
# sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass
|
||||
@ -1,72 +1,144 @@
|
||||
.filter-options {
|
||||
margin-top: 20px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.filter-group .filter-group__label {
|
||||
margin: 0 0 5px;
|
||||
}
|
||||
.filter-group button {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
.filter-group .blue {
|
||||
background-color: #3498db;
|
||||
}
|
||||
.filter-group .red {
|
||||
background-color: #e74c3c;
|
||||
}
|
||||
.filter-group .orange {
|
||||
background-color: #f39c12;
|
||||
}
|
||||
.filter-group .green {
|
||||
background-color: #2ecc71;
|
||||
}
|
||||
|
||||
.shape {
|
||||
margin-left: 0;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.shape .shape__inner {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0; }
|
||||
left: 0;
|
||||
}
|
||||
.shape .shape__space {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: black;
|
||||
border-style: solid;
|
||||
border-width: 0;
|
||||
border-color: transparent; }
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
.shape--blue .shape__space {
|
||||
background-color: #3498db;
|
||||
border-bottom-color: #3498db; }
|
||||
border-bottom-color: #3498db;
|
||||
}
|
||||
|
||||
.shape--red .shape__space {
|
||||
background-color: #e74c3c;
|
||||
border-bottom-color: #e74c3c; }
|
||||
border-bottom-color: #e74c3c;
|
||||
}
|
||||
|
||||
.shape--orange .shape__space {
|
||||
background-color: #f39c12;
|
||||
border-bottom-color: #f39c12; }
|
||||
border-bottom-color: #f39c12;
|
||||
}
|
||||
|
||||
.shape--green .shape__space {
|
||||
background-color: #2ecc71;
|
||||
border-bottom-color: #2ecc71; }
|
||||
border-bottom-color: #2ecc71;
|
||||
}
|
||||
|
||||
.shape--circle .shape__space {
|
||||
border-radius: 50%; }
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.shape--diamond .shape__space {
|
||||
-webkit-transform: rotate(45deg) scale(0.70711);
|
||||
transform: rotate(45deg) scale(0.70711); }
|
||||
transform: rotate(45deg) scale(0.70711);
|
||||
}
|
||||
|
||||
.shape--triangle .shape__space {
|
||||
padding-top: 14.5px;
|
||||
height: 0;
|
||||
width: 0;
|
||||
border-width: 0 83px 166px 83px;
|
||||
background-color: transparent; }
|
||||
border-width: 0 110px 191px 110px;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
.shape--triangle .shape__space {
|
||||
padding-top: 18px;
|
||||
border-width: 0 135px 234px 135px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 768px) and (max-width: 979px) {
|
||||
.shape--triangle .shape__space {
|
||||
padding-top: 11px;
|
||||
border-width: 0 83px 144px 83px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 767px) {
|
||||
.shape--triangle .shape__space {
|
||||
padding-top: 13.5px;
|
||||
border-width: 0 100px 173px 100px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 480px) {
|
||||
.shape--triangle .shape__space {
|
||||
padding-top: 6.5px;
|
||||
border-width: 0 50px 87px 50px;
|
||||
}
|
||||
}
|
||||
body::before {
|
||||
content: 'Default - 940px';
|
||||
position: fixed;
|
||||
z-index: 5;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 25px;
|
||||
background-color: rgba(119, 204, 102, 0.6);
|
||||
-webkit-transition: background .2s ease;
|
||||
-o-transition: background .2s ease;
|
||||
transition: background .2s ease; }
|
||||
transition: background .2s ease;
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
body::before {
|
||||
content: 'Large Desktop - 1200px+';
|
||||
background-color: rgba(204, 119, 102, 0.6); } }
|
||||
background-color: rgba(204, 119, 102, 0.6);
|
||||
}
|
||||
}
|
||||
@media (min-width: 768px) and (max-width: 979px) {
|
||||
body::before {
|
||||
content: 'Portrait tablet to landscape and desktop - > 768px && < 979px';
|
||||
background-color: rgba(204, 187, 102, 0.6); } }
|
||||
background-color: rgba(204, 187, 102, 0.6);
|
||||
}
|
||||
}
|
||||
@media (max-width: 767px) {
|
||||
body::before {
|
||||
content: 'Phones to Tablets - < 767px';
|
||||
background-color: rgba(102, 153, 204, 0.6); } }
|
||||
background-color: rgba(102, 153, 204, 0.6);
|
||||
}
|
||||
}
|
||||
@media (max-width: 480px) {
|
||||
body::before {
|
||||
content: 'Phones - < 480px';
|
||||
background-color: rgba(204, 102, 204, 0.6); } }
|
||||
background-color: rgba(204, 102, 204, 0.6);
|
||||
}
|
||||
}
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
Binary file not shown.
|
After Width: | Height: | Size: 31 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.9 KiB |
Loading…
Reference in New Issue