GIPainter-base 0.3.3 → 0.4.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 9bebf6e0fa301f3771b8e95d2f8b6e453211f64d
-  data.tar.gz: 5bd5265cc4fe85014dabecb7a578c40a92aa412f
+  metadata.gz: 04554591ab510f805cc3bda693a54b4103470ba5
+  data.tar.gz: 54b0392ae0e3b98394fb174544011891a4bd3e60
 SHA512:
-  metadata.gz: e3ab0fa6550c39d65bde15f99eedee767b3698d08298606434f61f4a7f25b4eae5f5e4ea87b636728b99c5f2accea8d5f6fbbdb6dea160001b4c7f3aa44c2ac1
-  data.tar.gz: 2cf997265d5d109dff17c693142316b4952f94ba922474f0a4b7a7e3093b3bf735f27c32dca3e191450fb53c428a2e02f21d04e637f3996969c9bf593b003dfc
+  metadata.gz: 16a733be7c5acc549d9b895e43ba7e8cc8a0a8d2d1a58222d5b650092ab36fd43a581912d61a7bef9bf765fd0a3109e8e59bace7893b6f29192532a42b13c37e
+  data.tar.gz: 6fdbea8be77166cdab42bfca958a95d5f8c399c00c35e828bc37cba0ef3926ee28afec551ad1af76e60ccbf6bf81bbc3d0ba5d974a3267b03d0ff0d5124299c2

data/assets/stylesheets/Base/_typography.scss

@@ -1,3 +1,51 @@
+*, ::after, ::before {
+  @include box-sizing(border-box);
+}
+
+html {
+  font-family: $font-family-sans-serif;
+  -ms-text-size-adjust: 100%;
+  -webkit-text-size-adjust: 100%;
+}
+
+body {
+  margin: 0;
+}
+
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+main,
+menu,
+nav,
+section,
+summary {
+  display: block;
+}
+
+audio,
+canvas,
+progress,
+video {
+  display: inline-block;
+  vertical-align: baseline;
+}
+
+audio:not([controls]) {
+  display: none;
+  height: 0;
+}
+
+[hidden],
+template {
+  display: none;
+}
+
 h1,
 h2,
 h3,
@@ -60,4 +108,240 @@ h5 {
 
 h6 {
   @include font-size($font-size-h6);
+}
+
+p {
+  margin: 0 0 ($line-height-computed / 2);
+}
+
+a {
+  text-decoration: none;
+  color: $link-color;
+  background-color: transparent;
+  @include transition(color 0.5s ease-in-out);
+
+  &:hover,
+  &:focus {
+    color: darken($link-color, 20%);
+  }
+
+  &:visited {
+    color: darken($link-color, 20%);
+  }
+
+  &:active,
+  &:hover,
+  &:focus  {
+    outline: 0;
+  }
+}
+
+small {
+  font-size: floor((100% * $font-size-small / $font-size-base));
+}
+
+mark{
+  background-color: $brand-warning;
+  padding: .2em;
+}
+
+hr{
+  clear: both;
+  margin: 0;
+  border: 0;
+  height: 2px;
+  background: $gray;
+  @include box-sizing(content-box);
+}
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sup {
+  top: -0.5em;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+strong,
+b{
+  font-family: inherit;
+  font-weight: bold;
+}
+
+em,
+i{
+  font-style: italic;
+}
+
+dfn {
+  font-style: italic;
+}
+
+abbr[title],
+abbr[data-original-title] {
+  cursor: help;
+  border-bottom: 1px dotted $gray;
+}
+
+del,
+s{
+  text-decoration: line-through;
+}
+
+ins,
+u{
+  text-decoration: underline;
+}
+
+pre {
+  overflow: auto;
+}
+
+code,
+kbd,
+pre,
+samp {
+  font-family: $font-family-monospace;
+  font-size: 1em;
+}
+
+blockquote,
+q {
+  padding: ($line-height-computed / 2) $line-height-computed;
+  margin: 0 0 $line-height-computed;
+  @include font-size($font-size-base * 1.25);
+  border-left: 5px solid $gray-light;
+
+  p,
+  ul,
+  ol {
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  footer,
+  small {
+    display: block;
+    font-size: 80%;
+    line-height: $line-height-base;
+    color: $gray;
+
+    &:before {
+      content: '\2014 \00A0';
+    }
+  }
+}
+
+figure {
+  margin: 1em 40px;
+}
+
+img {
+  border: 0;
+  @include image-responsive;
+}
+
+svg:not(:root) {
+  overflow: hidden;
+}
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  color: inherit;
+  font: inherit;
+  margin: 0;
+}
+
+button {
+  overflow: visible;
+}
+
+button,
+select {
+  text-transform: none;
+}
+
+button,
+html input[type="button"],
+input[type="reset"],
+input[type="submit"] {
+  @include appearance(button);
+  cursor: pointer;
+}
+
+button[disabled],
+html input[disabled] {
+  cursor: default;
+}
+
+button::-moz-focus-inner,
+input::-moz-focus-inner {
+  border: 0;
+  padding: 0;
+}
+
+input {
+  line-height: normal;
+}
+
+input[type="checkbox"],
+input[type="radio"] {
+  @include box-sizing(border-box);
+  padding: 0;
+}
+
+input[type="number"]::-webkit-inner-spin-button,
+input[type="number"]::-webkit-outer-spin-button {
+  height: auto;
+}
+
+input[type="search"] {
+  @include appearance(textfield);
+  @include box-sizing(content-box);
+}
+
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-decoration {
+  @include appearance(none);
+}
+
+fieldset {
+  border: 1px solid #c0c0c0;
+  margin: 0 2px;
+  padding: 0.35em 0.625em 0.75em;
+}
+
+legend {
+  border: 0;
+  padding: 0;
+}
+
+textarea {
+  overflow: auto;
+}
+
+optgroup {
+  font-weight: bold;
+}
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+td,
+th {
+  padding: 0;
 }

data/assets/stylesheets/Mixins/_colors.scss

@@ -8,9 +8,9 @@
 /// @type string
 ////
 
-/// Background opacity helper
+/// Mixin helper to set Background opacity
 /// @param {Color} $color - color of your background
-/// @param {int} $opacity - opacity value
+/// @param {Number} $opacity [0.7] - opacity value
 /// @example scss - Usage
 ///   .foo {
 ///     @include background-opacity(#FF0000);
@@ -22,11 +22,15 @@
 ///   }
 
 @mixin background-opacity($color, $opacity: 0.7) {
-  background-color: $color;
-  background-color: rgba($color, $opacity);
+  $rgba: rgba($color, $opacity);
+  $ie-hex-str: ie-hex-str($rgba);
+  background-color: transparent;
+  background-color: $rgba;
+  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#{$ie-hex-str},endColorstr=#{$ie-hex-str});
+  zoom: 1;
 }
 
-/// Contrast color helper
+/// Mixin helper to set text contrast
 /// @param {Color} $color - color of your background
 /// @example scss - Usage
 ///   .foo {

data/assets/stylesheets/Mixins/_image.scss

@@ -0,0 +1,54 @@
+//-----------------------------------
+// IMAGE MIXINS
+//-----------------------------------
+
+////
+/// @access public
+/// @group Mixins
+/// @type string
+////
+
+/// Mixin helper to retina image.
+/// on retina, use image that's scaled by 2
+/// @param {String} $image - image file path
+/// @param {Length} $width - image width
+/// @param {Length} $height - image height
+/// @example scss - Usage
+///   .foo {
+///     @include image-2x('../images/image.png', 100%, auto);
+///   }
+/// @example css - Result
+///   @media (-webkit-min-device-pixel-ratio: 1.3), (min-resolution: 124dpi), (min-resolution: 1.3dppx) {
+///     .foo {
+///       background-image: url('../images/image.png');
+///       background-size: 100% auto;
+///     }
+///   }
+
+@mixin image-2x($image, $width, $height) {
+  background-image: url($image);
+
+  @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
+    background-image: url($image);
+    background-size: $width $height;
+  }
+}
+
+/// Mixin helper to responsive image.
+/// @param {String} $display - display of element
+/// @example scss - Usage
+///   img {
+///     @include image-responsive;
+///   }
+/// @example css - Result
+///   img {
+///     display: block;
+///     max-width: 100%;
+///     height: auto;
+///   }
+
+@mixin image-responsive($display: block) {
+  display: $display;
+  max-width: 100%;
+  height: auto;
+}

data/assets/stylesheets/Mixins/_list.scss

@@ -0,0 +1,70 @@
+//-----------------------------------
+// LIST MIXINS
+//-----------------------------------
+
+////
+/// @access public
+/// @group Mixins
+/// @type string
+////
+
+/// Mixin helper to Remove default styling from a list.
+/// @param {Boolean} $no-margin [true] - If true, top and bottom margins will be removed from the list.
+/// @example scss - Usage
+///   .foo {
+///     @include list-unstyled;
+///   }
+/// @example css - Result
+///   .foo {
+///     list-style-type: none;
+///     padding-left: 0;
+///     margin-top: 0;
+///     margin-bottom: 0;
+///   }
+
+@mixin list-unstyled($no-margin: true) {
+  list-style-type: none;
+  padding-left: 0;
+  @if $no-margin {
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+}
+
+/// Mixin helper to make list inline with separator.
+/// @param {String} $separator [", "] - separator text
+/// @param {String} $display [inline-block] - display of each list item
+/// @param {Boolean} $no-margin [true] - If true, top and bottom margins will be removed from the list.
+/// @example scss - Usage
+///   .foo {
+///     @include list-inline("|");
+///   }
+/// @example css - Result
+///   .foo {
+///     list-style-type: none;
+///     padding-left: 0;
+///     margin-top: 0;
+///     margin-bottom: 0;
+///   }
+///
+///   .foo > li {
+///     display: inline-block;
+///   }
+///
+///   .foo > li:not(:last-child):after {
+///     content: "|";
+///     display: inline-block;
+///     margin: 0 1em;
+///   }
+
+@mixin list-inline ($separator: ",", $display: inline-block, $no-margin: true) {
+  @include list-unstyled($no-margin);
+  & > li {
+    display: $display;
+    &:not(:last-child):after {
+      content: $separator;
+      display: inline-block;
+      margin: 0 1em;
+    }
+  }
+}

data/assets/stylesheets/Mixins/_margin.scss

@@ -0,0 +1,46 @@
+//-----------------------------------
+// MARGIN MIXINS
+//-----------------------------------
+
+////
+/// @access public
+/// @group Mixins
+/// @type string
+////
+
+/// Mixin helper set margin.
+/// @param {Length} $value - value you want set
+/// @param {String} $side [null] - set you side
+/// @example scss - Usage
+///   .foo {
+///     @include margin_set(16px 10px );
+///   }
+/// @example css - Result
+///   .foo {
+///     margin: 16px 10px;
+///   }
+
+@mixin margin-set($value, $side: null) {
+  @if $side {
+    margin: $value;
+  }
+  @else{
+    margin-#{$side}: $value;
+  }
+}
+
+/// Mixin helper set margin auto.
+/// @example scss - Usage
+///   .foo {
+///     @include margin-auto;
+///   }
+/// @example css - Result
+///   .foo {
+///     margin-left: auto;
+///     margin-right: auto;
+///   }
+
+@mixin margin-auto {
+  margin-left: auto;
+  margin-right: auto;
+}

data/assets/stylesheets/Mixins/_media-query.scss

@@ -0,0 +1,49 @@
+//-----------------------------------
+// MEDIA QUERY MIXINS
+//-----------------------------------
+
+////
+/// @access public
+/// @group Mixins
+/// @type string
+////
+
+/// Mixin helper set media query breakpoint.
+/// @param {Length} $width - breakpoint width
+/// @param {String} $type [min] - type of your breakpoint (max, min)
+/// @example scss - Usage
+///   .foo {
+///     @include mquery($screen-md){
+///       background-color: red;
+///     }
+///   }
+/// @example css - Result
+///   @media only screen and (min-width: 992px) {
+///     .foo {
+///       background-color: red;
+///     }
+///   }
+
+@mixin mquery($width, $type: min) {
+  @if $type == max {
+    $width: $width - 1px;
+  }
+  @media only screen and (#{$type}-width: $width) {
+    @content;
+  }
+}
+
+/// Media query helper for declaring media queries by device pixel ratio.
+/// @param {Number} $ratio - Min device pixel ratio
+/// @example scss - Usage
+///   .foo {
+///     @include mquery-r(2) {
+///       width: 100%;
+///     }
+///   }
+
+@mixin mquery-r($ratio) {
+  @media only screen and (-webkit-min-device-pixel-ratio: $ratio), only screen and (min--moz-device-pixel-ratio: $ratio), only screen and (-o-min-device-pixel-ratio: $ratio), only screen and (min-device-pixel-ratio: $ratio) {
+    @content;
+  }
+}

data/assets/stylesheets/Mixins/_miscellaneous.scss

@@ -0,0 +1,42 @@
+//-----------------------------------
+// MISCELLANEOUS MIXINS
+//-----------------------------------
+
+////
+/// @access public
+/// @group Mixins
+/// @type string
+////
+
+/// Mixin helper to hide element
+/// @example scss - Usage
+///   .foo {
+///     @include hidden;
+///   }
+/// @example css - Result
+///   .foo {
+///     display: none;
+///     visibilitty: hidden;
+///   }
+
+@mixin hidden {
+  display: none;
+  visibility: hidden;
+}
+
+/// Mixin helper to show element
+/// @param {String} $state [block] - display element;
+/// @example scss - Usage
+///   .foo {
+///     @include visible(inline-block);
+///   }
+/// @example css - Result
+///   .foo {
+///     display: inline-block
+///     visibility: visible;
+///   }
+
+@mixin visible($state: block) {
+  display: $state;
+  visibility: visible;
+}

data/assets/stylesheets/Mixins/_opacity.scss

@@ -8,8 +8,8 @@
 /// @type string
 ////
 
-/// Opacity helper
-/// @param {int} $opacity - opacity ratio
+/// Mixin helper to set opacity
+/// @param {Number} $opacity [0.7] - opacity ratio
 /// @example scss - Usage
 ///   .foo {
 ///     @include opacity(0.8);

data/assets/stylesheets/Mixins/_padding.scss

@@ -0,0 +1,30 @@
+//-----------------------------------
+// PADDING MIXINS
+//-----------------------------------
+
+////
+/// @access public
+/// @group Mixins
+/// @type string
+////
+
+/// Mixin helper set padding.
+/// @param {Length} $value - value you want set
+/// @param {String} $side [null] - set you side
+/// @example scss - Usage
+///   .foo {
+///     @include padding_set(16px 10px );
+///   }
+/// @example css - Result
+///   .foo {
+///     padding: 16px 10px;
+///   }
+
+@mixin padding-set($value, $side: null) {
+  @if $side {
+    padding: $value;
+  }
+  @else{
+    padding-#{$side}: $value;
+  }
+}