suzanne.soy/racket
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update sass

Browse Source
This commit is contained in:
Sam Tobin-Hochstadt 2013-08-20 16:39:16 -04:00 committed by Matthew Flatt
parent 54fe7e17e1
commit e0abc63f71
13 changed files with 171 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
new-racket-web/sass/_base.scss
View File

@ -42,11 +42,22 @@ html, body {
.fixed {
position: fixed;
&.pinned {
position: absolute;
}
@include respond(portrait-tablets) {
position: relative !important;
top: auto !important;
left: auto !important;
}
}
.unfixed {
position: relative !important;
top: auto !important;
left: auto !important;
}
.text-center {
text-align: center;
}

2
new-racket-web/sass/_custom.scss
View File

@ -1 +1,3 @@
// Your custom SCSS should be written here...

3
new-racket-web/sass/_fonts.scss
View File

@ -1,8 +1,7 @@
/* Fonts */
// Import Google Web Fonts
@import url(//fonts.googleapis.com/css?family=Open+Sans:500,400,300,600,700);
@import url(//fonts.googleapis.com/css?family=Inconsolata);
@import url(//fonts.googleapis.com/css?family=Open+Sans:400,300,600,700);
// Set local icon font

2
new-racket-web/sass/_grid.scss
View File

@ -240,7 +240,7 @@ img {
}
}
.centered {
margin:0 !important;
margin-left: 0 !important;
}
}
.column, .columns {

3
new-racket-web/sass/functions/_responsivity.scss
View File

@ -16,6 +16,9 @@
@else if $media == tablets {
@media only screen and (min-width: $tablet-device-width) and (max-width: $document-width - 1) { @content; }
}
@else if $media == desktop {
@media only screen and (min-width: $tablet-device-width) { @content; }
}
@else if $media == document-width {
@media only screen and (max-width: $document-width + 20) { @content; }
}

22
new-racket-web/sass/functions/_semantic-grid.scss
View File

@ -45,10 +45,11 @@
@mixin column($columns:$columns, $alignment: false, $behavior: false) {
@if $alignment == center {
float: none;
margin: 0 auto !important;
width: columns($columns);
@extend %columnconfig;
float: none;
margin-left: auto !important;
margin-right: auto !important;
width: columns($columns);
@include respond(all-phones) {
float: left;
margin-left: 0;
@ -56,17 +57,17 @@
}
}
@else if $behavior == collapse {
width: columns($columns);
@extend %columnconfig;
@extend %collapse;
width: columns($columns);
@include respond(all-phones) {
float: left;
width: 100%;
}
}
@else {
width: columns($columns);
@extend %columnconfig;
width: columns($columns);
@include respond(all-phones) {
float: left;
margin-left: 0;
@ -77,10 +78,11 @@
@mixin hybrid($columns:$columns, $alignment: false, $behavior: false) {
@if $alignment == center {
float: none;
margin: 0 auto !important;
width: columns($columns, true);
@extend %columnconfig;
float: none;
margin-left: auto !important;
margin-right: auto !important;
width: columns($columns, true);
@include respond(all-phones) {
float: left;
margin-left: 0;
@ -88,17 +90,17 @@
}
}
@else if $behavior == collapse {
width: columns($columns, true);
@extend %columnconfig;
@extend %collapse;
width: columns($columns, true);
@include respond(all-phones) {
float: left;
width: 100%;
}
}
@else {
width: columns($columns, true);
@extend %columnconfig;
width: columns($columns, true);
@include respond(all-phones) {
float: left;
margin-left: 0;

1
new-racket-web/sass/ui/_all.scss
View File

@ -7,3 +7,4 @@
@import "images";
@import "video";
@import "toggles";
@import "tables";

20
new-racket-web/sass/ui/_forms.scss
View File

@ -3,7 +3,7 @@
@import "../functions/forms";
form {
form {
margin: 0 0 18px;
label {
display: block;
@ -35,7 +35,7 @@ form {
}
}
}
.field {
position: relative;
max-width: 100%;
@ -205,6 +205,10 @@ form {
@include border-radius(0px 4px 4px 0);
}
&.append button, &.prepend button {
display: inline-block;
}
&.append input:first-child {
margin-right: 0;
}
@ -239,6 +243,10 @@ form {
}
}
&.no-icon:after {
display: none;
}
// <input> does not allow :before & :after
// pseudo elements. Removing validation
// icons from those elements to avoid
@ -275,7 +283,7 @@ form {
}
}
}
.radio, & .checkbox {
@each $error in danger $danger-color, warning $warning-color, success $success-color {
&.#{nth($error, 1)} {
@ -316,14 +324,14 @@ form {
line-height: 16px;
}
}
.field .text input[type="search"] {
-webkit-appearance: textfield;
}
/* Form Picker Element (<select>) */
.picker {
position: relative;
width: auto;

25
new-racket-web/sass/ui/_navbar.scss
View File

@ -59,6 +59,9 @@
padding: 0 0 0 $norm;
overflow: hidden;
@include line-and-height(height-calc($larger - 3));
img {
max-height: 95%;
}
}
// Navbar Logo Mobile Styles
@ -132,6 +135,9 @@
0 1px 0 darken($navbar-color, 20%);
@include line-and-height(height-calc($larger - 3));
@include font-size($norm);
i.icon-popup {
position: absolute;
}
}
.btn {
border-color: darken($navbar-color, 30%) !important;
@ -226,7 +232,7 @@
@include background-image(linear-gradient(lighten($navbar-color, 20%),darken($navbar-color, 10%)));
@include box-shadow(inset 0 1px 1px lighten($navbar-color, 20%),
0 1px 2px rgba(0,0,0,0.80) !important); /* Remove this line if you dont want a dropshadow on your navigation*/
// Pretty Nav Toggle Styles
@include respond(all-phones) {
a.toggle {
@ -303,14 +309,15 @@
}
}
.no-touch .navbar ul li:hover > a {
.gumby-no-touch .navbar ul li:hover > a,
.gumby-touch .navbar ul li.active > a {
position: relative;
background: $info-hover-color;
z-index: 1000;
}
.no-touch .navbar ul li:hover .dropdown,
.touch .navbar ul li.active .dropdown {
.gumby-no-touch .navbar ul li:hover .dropdown,
.gumby-touch .navbar ul li.active .dropdown {
min-height: 50px;
max-height: $tablet-device-width - 207;
overflow: visible;
@ -321,7 +328,7 @@
@include box-shadow(0px 3px 4px rgba(0,0,0,.3));
}
.no-touch .navbar ul li:hover .dropdown ul {
.gumby-no-touch .navbar ul li:hover .dropdown ul {
position: relative;
top: 0;
min-height: 50px;
@ -354,8 +361,8 @@
}
}
.no-touch .navbar li .dropdown ul > li:hover .dropdown,
.touch .navbar li .dropdown ul > li.active .dropdown {
.gumby-no-touch .navbar li .dropdown ul > li:hover .dropdown,
.gumby-touch .navbar li .dropdown ul > li.active .dropdown {
border-top: none;
display: block;
position: absolute;
@ -372,11 +379,11 @@
}
}
.no-touch .navbar li .dropdown ul li a:hover {
.gumby-no-touch .navbar li .dropdown ul li a:hover {
background: $default-color;
}
.touch .navbar a:hover {
.gumby-touch .navbar a:hover {
color: $navbar-link-color !important;
}

87
new-racket-web/sass/ui/_tables.scss Normal file
View File

@ -0,0 +1,87 @@
table {
display: table;
background-color: $table-bgcolor;
border-collapse: collapse;
border-spacing: 0;
margin-bottom: 20px;
width: 100%;
border: $table-border-size $table-border-style $table-border-color;
caption {
text-align: center;
font-size: $larger;
padding: .75em;
}
thead th,
tbody td,
tr td {
display: table-cell;
padding: 10px;
vertical-align: top;
text-align: left;
border-top: $table-cell-border-size $table-cell-border-style $table-cell-border-color;
}
tr td, tbody tr td {
font-size: $norm;
}
tr td:first-child {
font-weight: $table-row-first-cell-font-weight;
}
thead {
background-color: $table-thead-bgcolor;
color: #fff;
tr th {
font-size: $norm;
font-weight: bold;
vertical-align: bottom;
}
}
&.striped tr:nth-of-type(even),
table tr.stripe,
table tr.striped {
background-color: $table-stripe-bgcolor;
}
&.rounded {
border-radius: $table-border-radius;
border-collapse: separate;
caption + thead tr:first-child th:first-child,
caption + tr td:first-child,
> thead tr:first-child th:first-child,
> thead tr:first-child td:first-child,
> tr:first-child td:first-child {
border-top-left-radius: $table-border-radius;
}
caption + thead tr:first-child th:last-child,
caption + tr td:last-child,
> thead tr:first-child th:last-child,
> thead tr:first-child td:last-child,
> tr:first-child td:last-child {
border-top-right-radius: $table-border-radius;
}
thead ~ tr:last-child td:last-child,
tbody tr:last-child td:last-child {
border-bottom-right-radius: $table-border-radius;
}
thead ~ tr:last-child td:first-child,
tbody tr:last-child td:first-child {
border-bottom-left-radius: $table-border-radius;
}
thead th, thead td,
caption + tbody tr:first-child td,
> tbody:first-child tr:first-child td {
border-top: 0;
}
}
}

1
new-racket-web/sass/ui/_tabs.scss
View File

@ -40,6 +40,7 @@
&.active > a {
@include line-and-height($tab-height + 1);
background: $white;
cursor: default;
}
&:last-child {
margin-right: 0;

14
new-racket-web/sass/ui/_toggles.scss
View File

@ -24,22 +24,21 @@
top: 0;
left: 0;
z-index: -999999;
display: none;
background: rgb(0, 0, 0);
background: $modal-overlay-color;
> .content {
width: 85%;
width: 50%;
min-height: 50%;
max-height: 95%;
max-height: 65%;
position: relative;
top: 5%;
top: 25%;
margin: 0 auto;
padding: 10px;
padding: $gutter-in-px;
background: $modal-window-color;
z-index: 2;
overflow: auto;
@include respond(portrait-tablets) {
width: 90%;
width: 80%;
min-height: 80%;
max-height: 80%;
top: 10%;
@ -59,10 +58,9 @@
}
&, > .content {
@include opacity(0);
@include transition-duration(.1s);
@include transition-duration(.3s);
}
&.active {
display: block;
z-index: 999999;
&, > .content {
@include opacity(1);

18
new-racket-web/sass/var/_settings.scss
View File

@ -26,13 +26,12 @@ $font-smoothing: antialiased;
// Font Weights
$font-weight-bold: 700;
$font-weight-semibold: 600;
$font-weight-heavy: 500;
$font-weight-medium: 400;
$font-weight-regular: 400;
$font-weight-light: 300;
$font-weight-thin: 300;
$header-font-weight: $font-weight-heavy;
$header-font-weight: $font-weight-thin;
$body-font-weight: $font-weight-regular;
$type-font-weight: $font-weight-regular;
$link-font-weight: $font-weight-regular;
@ -129,6 +128,21 @@ $drawer-inner-shadow-y-offset: 2px;
$drawer-inner-shadow-blur: 5px;
$drawer-inner-shadow-color: #313436;
// Tables
$table-bgcolor: #fff;
$table-thead-bgcolor: $primary-color;
$table-row-first-cell-font-weight: bold;
$table-border-size: 1px;
$table-border-style: solid;
$table-border-color: #e5e5e5;
$table-cell-border-size: 1px;
$table-cell-border-color: #e5e5e5;
$table-cell-border-style: solid;
// .rounded
$table-border-radius: 4px;
// .striped
$table-stripe-bgcolor: #e5e5e5;
// Floats
$default-float: left;
$switch-float: right;