1
0
Fork 0
mirror of https://github.com/kidoman/embd synced 2025-07-04 20:37:46 +02:00

initial commit

This commit is contained in:
Karan Misra 2014-03-31 06:33:08 +05:30
commit b3bad4e383
114 changed files with 14939 additions and 0 deletions

View file

@ -0,0 +1,25 @@
// Global Gumby Functions
@import "breakpoints";
@import "strip-units";
@import "grid-calc";
@import "height-calc";
@import "em";
@import "even";
// Global Gumby Mixins
@import "clearfix";
@import "typography";
@import "fixed";
@import "palette";
@import "shapes";
@import "palette";
@import "fade";
@import "responsivity";
@import "line-and-height";
@import "semantic-grid";
@import "tooltips";
@import "visibility";
@import "fancytiles";
@import "icons";

View file

@ -0,0 +1,11 @@
@function breakpoint($breakpoint) {
@if $breakpoint == $document-width {
@return $document-width - 1;
}
@if $breakpoint == $tablet-device-width {
@return $tablet-device-width - 1;
}
@if $breakpoint == $min-device-width {
@return $min-device-width + 1;
}
}

View file

@ -0,0 +1,44 @@
@mixin button-size($size) {
$n: 0;
@if $size == xlarge {
$n: $xlarge-button-font-size;
}
@if $size == large {
$n: $large-button-font-size;
}
@if $size == medium {
$n: $medium-button-font-size;
}
@if $size == small {
$n: $small-button-font-size;
}
$button-font-size: $n;
$button-height: ms($ratio, $button-font-size) + 1;
$line-height: $button-height - 2;
@include font-size($button-font-size);
@include line-and-height($button-height);
a {
position:relative;
padding: 0 ms(0, $button-font-size);
}
&.icon-left {
a {
padding-left: $button-height;
&:before {
left: $button-font-size / 1.5;
}
}
}
&.icon-right {
a {
padding-right: $button-height;
&:after {
right: $button-font-size / 1.5;
}
}
}
}

View file

@ -0,0 +1,25 @@
@mixin clearfix() {
*zoom:1;
&:before, &:after {
content: "";
display: table;
}
&:after {
clear: both;
}
}
@mixin mobilefix() {
@include respond(all-phones) {
&:before, &:after {
content: " ";
display: table;
}
&:after {
clear: both;
}
&:last-child {
float: none;
}
}
}

View file

@ -0,0 +1,11 @@
// Convert pixels to ems
@function em($size-in-px, $context: 16) {
@if not unitless($size-in-px) {
$size-in-px: strip-units($size-in-px);
}
@if not unitless($context) {
$context: strip-units($context);
}
@return ($size-in-px / $context) * 1em;
}

View file

@ -0,0 +1,10 @@
// test for even numbers, do something with the result
@function even($number) {
@if ($number % 2 == 0) {
@return true;
}
@else {
@return false;
}
}

View file

@ -0,0 +1,20 @@
// Fade Mixin
$fade-duration: .6s;
@mixin fade($direction: out, $duration: $fade-duration) {
@if $direction != out {
visibility: visible;
@include opacity(1);
}
@else {
visibility: hidden;
@include opacity(0);
}
@include transition-property(opacity);
@include transition-duration($fade-duration);
}

View file

@ -0,0 +1,29 @@
@function divide-cols($colnum) {
@return 100%/$colnum;
}
@mixin fancytiles($desktop-columns, $tablet-columns: $desktop-columns, $mobile-columns: 1, $small-break: 0px, $medium-break: $tablet-device-width, $large-break: $row-max-width) {
// These styles apply to all shift-columns
display: inline-block;
float: left;
padding-left: $gutter / 2;
padding-right: $gutter / 2;
// IE8 fallback
width: divide-cols($mobile-columns);
@include respond("min-width: #{$small-break}") {
width: divide-cols($mobile-columns);
}
@include respond("min-width: #{$medium-break}") {
width: divide-cols($tablet-columns);
}
@include respond("min-width: #{$large-break}") {
width: divide-cols($desktop-columns);
}
}

View file

@ -0,0 +1,21 @@
@mixin fixed($removal-breakpoint) {
.fixed {
position: fixed;
&.pinned {
position: absolute;
}
@if $removal-breakpoint != false {
@include respond($removal-breakpoint) {
position: relative !important;
top: auto !important;
left: auto !important;
}
}
}
.unfixed {
position: relative !important;
top: auto !important;
left: auto !important;
}
}

View file

@ -0,0 +1,18 @@
@mixin input-size($size) {
@if $size == xxwide { $size: 100%; }
@if $size == xwide { $size: 82.6666666667%; }
@if $size == wide { $size: 65.3333333333%; }
@if $size == normal { $size: 48%; }
@if $size == narrow { $size: 30.6666666667%; }
@if $size == xnarrow { $size: 13.3333333333%; }
width: $size;
}
@mixin input-sizes-list() {
$sizes: ();
@each $item in $field-sizes {
$sizes: join($sizes, unquote(".#{$item} "), comma);
}
#{$sizes} { @content }
}

View file

@ -0,0 +1,82 @@
// Calculate grid values
$gutter: percentage($gutter-in-px / $row-max-width); // 2.1276596
// Return single column width
@function oneCol($hybrid-grid: false) {
@if ($hybrid-grid == true){
@return (100% - ($gutter * ($hybrid - 1))) / $hybrid;
}
@else{
@return (100% - ($gutter * ($cols - 1))) / $cols;
}
}
// Calculate Grid Column Widths
@function columns($num, $hybrid-grid: false){
@if ($hybrid-grid == true) {
@return (oneCol(true) * $num) + ($gutter * ($num - 1));
}
@else {
@return (oneCol() * $num) + ($gutter * ($num - 1)); // (One column * 'x') + (gutter * ('x' - 1)) = Column Width
}
}
// Calculate the width required to acheive a desired global column number within a nested grid
@function global-columns($desired_cols, $container_cols, $hybrid-grid: false){
@if ($hybrid-grid == true) {
@return (100% * (columns($desired_cols, true) / columns($container_cols, true)));
}
@else {
@return (100% * (columns($desired_cols) / columns($container_cols)));
}
}
// Calculate Push Class Margins
@function push_x($num, $first-child: false, $is-hybrid: false) {
@if $first-child and $is-hybrid {
@return (oneCol(true) * $num) + ($gutter * ($num - 1)) + $gutter; // Column width + gutter
}
@else if $first-child != true and $is_hybrid{
@return (oneCol(true) * $num) + ($gutter * ($num - 1)) + ($gutter * 2); // Column width + (gutter * 2)
}
@else if $first-child and $is_hybrid != true{
@return (oneCol() * $num) + ($gutter * ($num - 1)) + $gutter;
}
@else {
@return (oneCol() * $num) + ($gutter * ($num - 1)) + ($gutter * 2); // Column width + (gutter * 2)
}
}
// Calculate Pull Class Margins
// note absence of first-child; first-child column containers should not be pulled
// $num is number of columns to be pulled
// $width is number of columns of container that is being pulled
@function pull_x($num, $width, $is-hybrid: false) {
@if $is-hybrid {
@return -((oneCol(true) * $num) + ($gutter * ($num - 1)) + (oneCol(true) * $width) + ($gutter * ($width - 1)) + $gutter); // Pull width + column width + gutter
}
@else {
@return -((oneCol() * $num) + ($gutter * ($num - 1)) + (oneCol() * $width) + ($gutter * ($width - 1)) + $gutter); // Pull width + column width + gutter
}
}
// Calculate Centered Class Margins
@function centered($num, $hybrid-grid: false) {
@if $hybrid-grid{
@return 50% - ((($num * (oneCol(true))) + (($num - 1) * $gutter)) / 2);
}
@else{
@return 50% - ((($num * (oneCol())) + (($num - 1) * $gutter)) / 2);
}
}
// Create class names from column count integers
@function number-as-word($number){
$w: "one", "two", "three", "four", "five", "six", "seven", "eight", "nine", "ten", "eleven",
"twelve", "thirteen", "fourteen", "fifteen", "sixteen", "seventeen", "eighteen", "nineteen",
"twenty", "twenty-one", "twenty-two", "twenty-three", "twenty-four", "twenty-five", "twenty-six", "twenty-seven",
"twenty-eight", "twenty-nine", "thirty", "thirty-one", "thirty-two", "thirty-three",
"thirty-four", "thirty-five", "thirty-six";
@return nth($w, $number);
}

View file

@ -0,0 +1,6 @@
// Calculate the height of an object based on its scale
@function height-calc($size) {
@return ms($ratio, $size) + 1;
}

View file

@ -0,0 +1,35 @@
@function match($list, $icon) {
@each $item in $list {
$index: index($item, $icon);
@if $index {
$return: if($index == 1, 2, $index);
@return nth($item, $return);
}
}
@return false;
}
@mixin i($icon) {
.#{$icon}.icon-left a:before,
.#{$icon}.icon-right a:after,
i.#{$icon}:before {
content: "#{match($entypo-icons, $icon)}";
height: inherit;
}
}
@mixin icon($icon) {
@if (type-of($icon) == list) {
@each $i in $icon {
@include i($i);
}
}
@elseif ($icon == all) {
@each $icon in $entypo-icons {
@include i(nth($icon, 1));
}
}
@else {
@include i($icon);
}
}

View file

@ -0,0 +1,7 @@
// Make line-height equal to an element's height
@mixin line-and-height($height) {
height: $height;
line-height: $height - 2;
}

View file

@ -0,0 +1,76 @@
// Color Pallete
@function getColor($key, $state: false, $list: $ui-coloring) {
@each $color in $list {
@if $key == nth($color, 1) and $state == default {
@return nth($color, 2);
}
@else if $key == nth($color, 1) and $state == hover {
@return nth($color, 3);
}
@else if $key == nth($color, 1) {
@return nth($color, 1);
}
}
@return false;
}
@mixin palette($shade, $palette-text-color:false) {
@if $shade == getColor($shade) {
@if $palette-text-color != false {
color: $palette-text-color;
}
@else {
color: lighten(getColor($shade, default), 80%);
}
background: getColor($shade, default);
border: 1px solid getColor($shade, default);
&:hover {
background: getColor($shade, hover);
border: 1px solid darken(getColor($shade, hover), 3%);
}
&:active {
background: darken(getColor($shade, default), 10%);
border: 1px solid darken(getColor($shade, default), 10%);
}
@if $shade == default {
@if $palette-text-color != false {
color: $palette-text-color;
}
@else {
color: darken(getColor($shade, default), 61.5%);
}
border: 1px solid getColor($shade, default);
&:hover {
border: 1px solid darken(getColor($shade, hover), 5%);
}
}
@if $shade == warning {
@if $palette-text-color != false {
color: $palette-text-color;
}
@else {
color: darken(getColor($shade, hover), 40%);
}
}
}
@else {
@if $palette-text-color != false {
color: $palette-text-color;
}
@else {
color: lighten($shade, 80%);
}
background: $shade;
border: 1px solid $shade;
&:hover {
background: lighten($shade, 30%);
border: 1px solid lighten($shade, 27%);
}
&:active {
background: darken($shade, 10%);
border: 1px solid darken($shade, 10%);
}
}
}

View file

@ -0,0 +1,34 @@
// Responsive Mixins
@mixin respond($media) {
@if $media == portrait-phones {
@media only screen and (max-width: $min-device-width) { @content; }
}
@else if $media == landscape-phones {
@media only screen and (min-width: breakpoint($min-device-width)) and (max-width: breakpoint($tablet-device-width)) { @content; }
}
@else if $media == all-phones {
@media only screen and (max-width: breakpoint($tablet-device-width)) { @content; }
}
@else if $media == portrait-tablets {
@media only screen and (max-width: $tablet-device-width) { @content; }
}
@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; }
}
@else if $media == large-screens {
@media only screen and (min-width: $max-device-width) { @content; }
}
@else if $media == print {
@media print { @content; }
}
@else {
@media only screen and ('#{$media}') { @content; }
}
}

View file

@ -0,0 +1,170 @@
// Gumby Semantic Grid Mixin //
// Mixin for rows
@mixin row($nested: false) {
@if $nested == nested {
@include nestedRow();
}
@else {
width: 100%;
max-width: $row-max-width + 40px;
min-width: $min-device-width;
margin: 0 auto;
padding-left: 20px;
padding-right: 20px;
@extend %clearfix;
}
> *:first-child {
margin-left: 0;
}
@include respond(all-phones) {
width: auto;
min-width: 0;
margin-left: 0;
margin-right: 0;
}
}
// Mixin for rows that are nested within columns
@mixin nestedRow() {
width: auto;
min-width: 0;
max-width: none;
padding-left: 0;
padding-right: 0;
@extend %clearfix;
}
@mixin column($columns:$columns, $alignment: false, $behavior: false, $hybrid: false) {
@extend %columnconfig;
@if $alignment == center {
float: none;
margin-left: auto !important;
margin-right: auto !important;
width: columns($columns, $hybrid);
@include respond(all-phones) {
float: left;
margin-left: 0;
width: 100%;
}
}
@else if $behavior == collapse {
@extend %collapse;
width: columns($columns, $hybrid);
@include respond(all-phones) {
float: left;
width: 100%;
}
}
@else {
width: columns($columns, $hybrid);
@include respond(all-phones) {
float: left;
margin-left: 0;
width: 100%;
}
}
}
@mixin hybrid($columns:$columns, $alignment: false, $behavior: false) {
@include column($columns, $alignment, $behavior, true);
}
@mixin push($columns, $hybrid-grid: false) {
@if $hybrid-grid == hybrid {
margin-left: push_x($columns, false, true);
&:first-child {
margin-left: push_x($columns, true, true);
}
@include respond(all-phones) {
margin-left: 0;
&:first-child {
margin-left: 0;
}
}
}
@else {
margin-left: push_x($columns);
&:first-child {
margin-left: push_x($columns, true);
}
@include respond(all-phones) {
margin-left: 0;
&:first-child {
margin-left: 0;
}
}
}
}
@mixin pull($direction: false, $columns: 0, $width: 0, $hybrid-grid: false) {
@if $direction == left {
@extend %pull-left;
@if ($columns > 0 and $width > 0) {
@if ($hybrid-grid == hybrid) {
margin-left: pull_x($columns, $width, true);
&:first-child {
margin-left: 0;
}
}
@else {
margin-left: pull_x($columns, $width);
&:first-child {
margin-left: 0;
}
}
}
}
@elseif $direction == none {
@extend %pull-none;
}
@else {
@extend %pull-right;
}
}
// Placeholders for the Semantic Grid
%container {
padding: 0 $gutter-in-px + px;
@include respond(all-phones) {
min-width: 0;
margin-left: 0;
margin-right: 0;
}
}
// Clearfix placeholder
%clearfix { @include clearfix(); }
// Clearfix placeholder for mobile
%mobilefix { @include mobilefix(); }
// Row placeholders
%row { @include row(); }
%nestedrow { @include row(); }
// Column Configuration placeholder
%columnconfig {
margin-left: $gutter;
float: $default-float;
min-height: 1px;
position: relative;
@include box-sizing(border-box);
}
%pull-right { float: right; }
%pull-left { float: left; }
%pull-none { float: none; }
// Collapse Gutters
%collapse {
margin-left: 0;
}

View file

@ -0,0 +1,22 @@
// Shapes
@mixin shape($shape: square, $shape-radius: false) {
@if $shape == oval {
@include border-radius(1000px);
}
@else if $shape == circle {
@include border-radius(1000px);
}
@else if $shape == pill-left {
@include border-radius(500px 0 0 500px);
}
@else if $shape == pill-right {
@include border-radius(0 500px 500px 0);
}
@else if $shape-radius != false {
@include border-radius($shape-radius);
}
@else {
@include border-radius(0);
}
}

View file

@ -0,0 +1,5 @@
// Strip out units to do math functions.
@function strip-units($number) {
@return $number / ($number * 0 + 1);
}

View file

@ -0,0 +1,98 @@
// CSS Tooltips
@mixin tooltip($tt-min-width, $tt-bgcolor, $tt-position, $tt-align) {
position: relative;
&:after {
display: block;
background: $tt-bgcolor;
border: 1px solid $tt-bgcolor;
border-bottom: 0;
@include border-radius(3px);
padding: em(8) em(12);
width: auto;
min-width: $tt-min-width;
max-width: 500px;
position: absolute;
@if $tt-position == "bottom" {
@if $tt-align == "right" { right: 0 } @else { left: 0; }
top: 101%;
margin-top: 8px;
} @else if $tt-position == "top" {
@if $tt-align == "right" { right: 0 } @else { left: 0; }
bottom: 101%;
margin-bottom: 8px;
} @else if $tt-position == "left" {
right: 101%;
top: -35%;
margin-right: 8px;
} @else if $tt-position == "right" {
left: 101%;
top: -35%;
margin-left: 8px;
}
@if $tt-align == "right" {
text-align: right;
} @else if $tt-align == "left" {
text-align: left;
}
color: #fff;
content: attr(data-tooltip);
line-height: 1.5;
font-size: $norm;
font-weight: normal;
font-style: normal;
@include transition(opacity 0.1s ease);
@include opacity(0);
pointer-events: none;
@if $tt-pretty != "no" {
@include background-image(linear-gradient($tt-position, lighten($tt-bgcolor, 12.5%), $tt-bgcolor));
@include box-shadow(0 0 5px 0 rgba($tt-bgcolor,.25));
}
}
&:before {
content: " ";
width: 0;
height: 0;
position: absolute;
@if $tt-position == "bottom" {
top: 101%;
@if $tt-align == "right" { right: 8px } @else { left: 8px; }
border-bottom: 9px solid $tt-bgcolor !important;
border-left: 9px solid transparent;
border-right: 9px solid transparent;
} @else if $tt-position == "top" {
bottom: 101%;
@if $tt-align == "right" { right: 8px } @else { left: 8px; }
border-top: 9px solid $tt-bgcolor !important;
border-left: 9px solid transparent;
border-right: 9px solid transparent;
} @else if $tt-position == "left" {
top: 3px;
right: 101%;
border-left: 9px solid $tt-bgcolor !important;
border-top: 9px solid transparent;
border-bottom: 9px solid transparent;
} @else if $tt-position == "right" {
top: 3px;
left: 101%;
border-right: 9px solid $tt-bgcolor !important;
border-top: 9px solid transparent;
border-bottom: 9px solid transparent;
}
@include transition(opacity 0.1s ease);
@include opacity(0);
pointer-events: none;
}
&:hover:after,
&:hover:before {
@include transition(opacity 0.1s ease);
@include opacity(1);
}
}

View file

@ -0,0 +1,15 @@
// Typography mixins
// Fonts in rems with px fallback
@mixin font-size($size, $is-important: false) {
$size: if(unitless($size), $size, $size / 1px);
@if $is-important {
font-size: $size + px !important;
font-size: ($size / strip-units($base-font-size)) + rem !important;
} @else {
font-size: $size + px;
font-size: ($size / strip-units($base-font-size)) + rem;
}
}

View file

@ -0,0 +1,17 @@
// Visibility Mixins
// Mixin for hidden
@mixin hidden($media) {
@include respond($media) {
display: none !important;
}
}
// Mixin for visible
@mixin visible($media) {
@include respond($media) {
display: inherit !important;
}
}