first commit

layout/style-scss/_mixins.scss

@@ -0,0 +1,145 @@
+$breakpoints: (
+	xs: 576px,
+	sm: 768px,
+	md: 992px,
+	lg: 1200px,
+);
+@mixin respond-above($breakpoint) {
+	@if map-has-key($breakpoints, $breakpoint) {
+		$breakpoint-value: map-get($breakpoints, $breakpoint);
+		@media (min-width: $breakpoint-value) {
+			@content;
+		}
+	} @else {
+		@warn 'Invalid breakpoint: #{$breakpoint}.';
+	}
+}
+@mixin respond-below($breakpoint) {
+	@if map-has-key($breakpoints, $breakpoint) {
+		$breakpoint-value: map-get($breakpoints, $breakpoint);
+		@media (max-width: ($breakpoint-value - 1)) {
+			@content;
+		}
+	} @else {
+		@warn 'Invalid breakpoint: #{$breakpoint}.';
+	}
+}
+@mixin respond-between($lower, $upper) {
+	@if map-has-key($breakpoints, $lower) and map-has-key($breakpoints, $upper) {
+		$lower-breakpoint: map-get($breakpoints, $lower);
+		$upper-breakpoint: map-get($breakpoints, $upper);
+		@media (min-width: $lower-breakpoint) and (max-width: ($upper-breakpoint - 1)) {
+			@content;
+		}
+	} @else {
+		@if (map-has-key($breakpoints, $lower) == false) {
+			@warn 'Your lower breakpoint was invalid: #{$lower}.';
+		}
+		@if (map-has-key($breakpoints, $upper) == false) {
+			@warn 'Your upper breakpoint was invalid: #{$upper}.';
+		}
+	}
+}
+@mixin border-radius($px: 0) {
+	-webkit-border-radius: $px;
+	-moz-border-radius: $px;
+	border-radius: $px;
+}
+@mixin box-shadow($value) {
+	-webkit-box-shadow: $value;
+	-moz-box-shadow: $value;
+	box-shadow: $value;
+}
+@mixin transition($element: all, $time: 0.5s, $option: ease) {
+	-webkit-transition: $element $time $option !important;
+	transition: $element $time $option !important;
+}
+@mixin opacity($value) {
+	$IEValue: $value * 100;
+	opacity: $value;
+	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=" + $IEValue +
+		")";
+	filter: alpha(opacity=$IEValue);
+}
+@mixin flexbox() {
+	display: -webkit-box;
+	display: -moz-box;
+	display: -ms-flexbox;
+	display: -webkit-flex;
+	display: flex;
+}
+@mixin flex($values) {
+	-webkit-box-flex: $values;
+	-moz-box-flex: $values;
+	-webkit-flex: $values;
+	-ms-flex: $values;
+	flex: $values;
+}
+@mixin flex-direction($direction) {
+	-webkit-flex-direction: $direction;
+	-moz-flex-direction: $direction;
+	-ms-flex-direction: $direction;
+	flex-direction: $direction;
+}
+@mixin flex-wrap($wrap) {
+	-webkit-flex-wrap: $wrap;
+	-moz-flex-wrap: $wrap;
+	-ms-flex-wrap: $wrap;
+	flex-wrap: $wrap;
+}
+@mixin flex-flow($flow) {
+	-webkit-flex-flow: $flow;
+	-moz-flex-flow: $flow;
+	-ms-flex-flow: $flow;
+	flex-flow: $flow;
+}
+@mixin order($val) {
+	-webkit-box-ordinal-group: $val;
+	-moz-box-ordinal-group: $val;
+	-ms-flex-order: $val;
+	-webkit-order: $val;
+	order: $val;
+}
+@mixin flex-grow($grow) {
+	-webkit-flex-grow: $grow;
+	-moz-flex-grow: $grow;
+	-ms-flex-grow: $grow;
+	flex-grow: $grow;
+}
+@mixin flex-shrink($shrink) {
+	-webkit-flex-shrink: $shrink;
+	-moz-flex-shrink: $shrink;
+	-ms-flex-shrink: $shrink;
+	flex-shrink: $shrink;
+}
+@mixin flex-basis($width) {
+	-webkit-flex-basis: $width;
+	-moz-flex-basis: $width;
+	-ms-flex-basis: $width;
+	flex-basis: $width;
+}
+@mixin justify-content($justify) {
+	-webkit-justify-content: $justify;
+	-moz-justify-content: $justify;
+	-ms-justify-content: $justify;
+	justify-content: $justify;
+	-ms-flex-pack: $justify;
+}
+@mixin align-content($align) {
+	-webkit-align-content: $align;
+	-moz-align-content: $align;
+	-ms-align-content: $align;
+	align-content: $align;
+}
+@mixin align-items($align) {
+	-webkit-align-items: $align;
+	-moz-align-items: $align;
+	-ms-align-items: $align;
+	align-items: $align;
+}
+@mixin align-self($align) {
+	-webkit-align-self: $align;
+	-moz-align-self: $align;
+	-ms-align-self: $align;
+	align-self: $align;
+}

layout/style-scss/_stuff.scss

@@ -0,0 +1,218 @@
+.clearfix {
+  &:after {
+    content: "";
+    display: table;
+    clear: both;
+  }
+}
+
+.clear {
+  clear: both;
+}
+
+a {
+  @include transition();
+}
+
+.btn {
+  @include transition();
+  @include border-radius(3px);
+  padding: 0 15px 0 0 !important;
+  border: 0;
+  line-height: 28px !important;
+  font-size: 14px;
+
+  &:focus {
+    @include box-shadow(none);
+  }
+
+  &.disabled {
+    pointer-events: none;
+  }
+
+  i {
+    @include transition();
+    @include border-radius(3px 0 0 3px);
+    display: block;
+    float: left;
+    height: 28px;
+    width: 28px;
+    text-align: center;
+    line-height: 28px;
+    margin-right: 15px;
+
+    @include respond-below(xs) {
+      margin-right: 7px;
+    }
+  }
+}
+
+.btn-success {
+  @extend .btn;
+  background: #5aba47;
+  color: #FFF !important;
+  border: 0 !important;
+
+  i {
+    background: #379126;
+  }
+
+  &:hover,
+  &.acive,
+  &:focus {
+    background: #379126;
+
+    i {
+      background: #257315;
+    }
+  }
+}
+
+.btn-primary {
+  @extend .btn;
+  background: $cBlueLight !important;
+  border: 0 !important;
+  color: #FFF;
+
+  i {
+    background: #1394ce;
+  }
+
+  &:hover,
+  &.active,
+  &.focus {
+    background: #03a9f4 !important;
+    color: #FFF;
+
+    i {
+      background: #1394ce;
+    }
+  }
+}
+
+.btn-dark {
+  @extend .btn;
+  background: #bcbcbc;
+  color: #FFF;
+
+  i {
+    background: #646474;
+  }
+
+  &:hover,
+  &.active,
+  &:focus {
+    background: #646474;
+    color: #FFF;
+
+    i {
+      background: #333333;
+    }
+  }
+}
+
+.btn-danger {
+  @extend .btn;
+  background: #f75b50;
+  color: #FFF;
+
+  i {
+    background: #d24d44;
+  }
+
+  &:hover,
+  &.acive,
+  &:focus {
+    background: #f52d1f;
+
+    i {
+      background: #d0261a;
+    }
+  }
+}
+
+.form-control {
+  @include border-radius(0);
+}
+
+#g-form-container {
+  @include box-shadow(0 13px 25px -2px rgba(0, 0, 0, 0.2));
+  background: #FFF;
+  padding: 15px 25px 25px;
+  border: 1px solid #f1f1f1;
+
+  .col-form-label {
+    font-size: 14px;
+    text-align: right;
+  }
+
+  input,
+  textarea,
+  select {
+    font-size: 14px;
+
+    &.error {
+      border: 1px solid $cRed;
+    }
+
+    &:focus {
+      @include box-shadow(none);
+    }
+  }
+
+  .input-group-addon {
+    @include border-radius(0);
+    text-align: center;
+    line-height: 38px;
+    font-size: 13px;
+    padding: 0;
+    width: 38px;
+    background: $cBlueLight;
+    color: #FFF;
+  }
+
+  .switch {
+    position: relative;
+    top: 2px;
+  }
+}
+
+.alert {
+  background: $cOrange;
+  color: #FFF;
+  border: 0;
+  font-size: 13px;
+
+  &.login {
+    display: none;
+  }
+}
+
+.hidden-xs {
+  @include respond-below(xs) {
+    display: none;
+  }
+}
+
+.text-system {
+  color: $cGreen;
+}
+
+/* autocomplete tagsinput*/
+.label-info {
+  background-color: #5bc0de;
+  display: inline-block;
+  padding: 7px 10px;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 1;
+  color: #fff;
+  text-align: center;
+  white-space: nowrap;
+  vertical-align: baseline;
+}
+
+.vertical-middle {
+  @include flexbox;
+  @include align-items(center);
+}