binda 0.0.7 → 0.1.0

data/app/assets/stylesheets/binda/components/form_item_video.scss

@@ -0,0 +1,25 @@
+.form-item--video--clearfix {
+	margin-bottom: $font-size-base;
+	border-bottom: 1px solid $color-gray-lightest;
+	@extend .clearfix;
+}
+
+.form-item--video--video {
+	max-width: 100%;
+	height: auto;
+	margin-bottom: $font-size-base;
+	float: left;
+	clear: both;
+	video {
+		max-width: 100%;
+		height: auto;
+	}
+}
+
+.form-item--video--uploader {
+	display: inline-block;
+	margin: 0;
+	margin-top: 9px;
+	float: left;
+	clear: both;
+}

data/app/assets/stylesheets/binda/components/main_container.scss

@@ -0,0 +1,3 @@
+#main-container {
+	margin-left: 200px; // This is the width of the sidebar
+}

data/app/assets/stylesheets/binda/components/main_content.scss

@@ -1,5 +1,4 @@
 #main-content {
 	position: relative;
-	background-color: $gray-lighter;
-	padding: 0 $font-size-base * 2;
+	padding: 0 24px;
 }

data/app/assets/stylesheets/binda/components/main_header.scss

@@ -1,25 +1,26 @@
-#main-header {
-	width: 100%;
-	margin-bottom: $font-size-base * 3;
-	background-color: $gray-lighter;
-
-	h3 {
-		display: inline-block;
-		padding: 0 $font-size-base;
-	}
+#main-header
+{
+  width: 100%;
+  padding: 32px 24px;
+}
+.main-header--title
+{
+  @extend .b-h3;
+  display: inline-block;
 }
 
-.main-header--buttons {
-	float: right;
-	margin-top: $font-size-base * 1.5;
-	margin-right: $font-size-base;
+.main-header--buttons
+{
+  float: right;
 }
 
-a.main-header--back {
-	color: $gray-light;
-	font-weight: normal;
+a.main-header--back
+{
+  font-weight: 300;
+  color: $color-gray-light;
 
-	&:hover {
-		color: $gray;
-	}
-}
+  &:hover
+  {
+    color: $color-gray;
+  }
+}

data/app/assets/stylesheets/binda/components/main_sidebar.scss

@@ -0,0 +1,121 @@
+#main-sidebar
+{
+  position: fixed;
+  z-index: 1000;
+  top: 0;
+  left: 0;
+  overflow-y: auto;
+  width: 200px;
+  height: 100%;
+  border-right: 1px solid $color-gray-lighter;
+  background-color: $color-white;
+}
+
+.main-sidebar--brand
+{
+  position: relative;
+  overflow-x: hidden;
+  height: 124px;
+  transition: background-color .3s ease;
+
+  a {
+    height: 100%;
+    width: 100%;
+  }
+
+  &:hover
+  {
+
+    .main-sidebar--view-website
+    {
+      transform: translateX( 0px );
+    }
+    .main-sidebar--website-name
+    {
+      transform: translateX( -200px );
+    }
+  }
+}
+
+.main-sidebar--website-name
+{
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  padding: 0 15px;
+  transition: transform .3s ease;
+}
+
+.main-sidebar--view-website
+{
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  padding: 0 15px;
+  transition: transform .3s ease;
+  transform: translateX(200px);
+
+  i {
+    padding-right: 6px;
+  }
+}
+
+.main-sidebar--nav
+{
+  width: 100%;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+
+  li
+  {
+     > a
+    {
+      font-weight: 300;
+      display: block;
+      padding: 12px;
+      transition: all .3s ease;
+      text-decoration: none;
+      color: $text-color;
+
+      &:hover
+      {
+        padding-left: 16px;
+        text-decoration: none;
+        color: $text-color;
+        border-bottom: none;
+        background-color: $color-gray-lightest;
+      }
+
+      &:active,
+      &:focus
+      {
+        text-decoration: none;
+      }
+    }
+  }
+}
+
+.main-sidebar--nav .glyphicon
+{
+  padding-right: 8px;
+  text-indent: 0;
+}
+
+.main-sidebar--nav li a.main-sidebar--logout
+{
+  color: $color-danger;
+}
+
+.main-sidebar--structure,
+.main-sidebar--nav li:last-child
+{
+  border-bottom: 1px solid $color-gray-lightest;
+}
+
+.main-sidebar--first-structure
+{
+  border-top: 1px solid $color-gray-lightest;
+}

data/app/assets/stylesheets/binda/components/main_table.scss

@@ -1,28 +1,84 @@
-.main-table--row {
-	margin: 0;
-
-	> div {
-		width: 100%;
-		padding-bottom: $font-size-base;
-		margin-bottom: $font-size-base * 2;
-		background-color: #FFF;
-		@extend .box-shadowed;
-	}
-
-	table {
-		border-bottom: 1px solid #CCC;
-
-		td:last-child {
-			text-align: right;
-
-			span {
-				margin-left: $font-size-base;
-
-				&:not(:first-child) {
-					border-left: 1px solid #CCC;
-					padding-left: $font-size-base;
-				}
-			}
-		}
-	}
-}
+.main-table--container
+{
+  table
+  {
+    width: 100%;
+
+    td
+    {
+      padding: 12px;
+      border-top: none !important;
+    }
+
+    td:last-child
+    {
+      text-align: right;
+
+      span
+      {
+        margin-left: $font-size-base;
+
+        &:not(:first-child)
+        {
+          padding-left: $font-size-base;
+          border-left: 1px solid #ccc;
+        }
+      }
+    }
+
+    .no-hover
+    {
+      background: none;
+    }
+
+    tr
+    {
+      border-right: 1px solid $color-gray-darker;
+      border-bottom: 1px solid $color-gray-lighter;
+      border-left: 1px solid $color-gray-darker;
+    }
+
+    tr:last-child
+    {
+      border-bottom: 1px solid $color-gray-darker;
+    }
+
+    tr.ui-sortable-handle:hover {
+      border: 1px solid transparent;
+    }
+  }
+
+  .prev
+  {
+    margin-left: 1%;
+  }
+
+  .next
+  {
+    float: right;
+    margin-right: 1%;
+  }
+
+  .last
+  {
+    float: right;
+  }
+}
+
+.main-table--hover {
+  background: $color-gray-lightest;
+  transition: background .3s ease;
+
+  &:hover
+  {
+    background: $color-white;
+  }
+}
+
+.main-table--actions
+{
+  a
+  {
+    margin-left: 8px;
+  }
+}

data/app/assets/stylesheets/binda/components/popup_warning.scss

@@ -0,0 +1,71 @@
+
+.popup-warning
+{
+  position: fixed;
+  z-index: 9999;
+  top: 50%;
+  left: 50%;
+  width: 40%;
+  padding: 24px;
+  transition: opacity .2s .2s linear;
+  transform: translate(-50%, -50%);
+  text-align: center;
+  pointer-events: none;
+  opacity: 1;
+  background-color: $color-white;
+
+  @extend .box-shadowed-up;
+
+  &.popup-warning--hidden
+  {
+    opacity: 0;
+  }
+  p
+  {
+    margin: 0;
+  }
+}
+
+@keyframes popupWarning
+{
+  0%
+  {
+    transform: scale(1);
+  }
+  25%
+  {
+    transform: scale(1.5);
+  }
+  75% 
+  {
+  	transform: scale(1.01);
+  }
+}
+
+.popup-warning--loader
+{
+  margin-bottom: 16px;
+  span
+  {
+    display: inline-block;
+    width: 1px;
+    height: 24px;
+    margin: 0 3px;
+    transform-origin: center center;
+    animation: popupWarning 1.5s ease-in-out infinite;
+    border-radius: 10px;
+    background-color: $color-gray-light;
+  }
+  span:nth-child(2)
+  {
+    animation-delay: 180ms;
+  }
+  span:nth-child(3)
+  {
+    animation-delay: 360ms;
+  }
+  span:nth-child(4)
+  {
+    animation-delay: 540ms;
+  }
+}

data/app/assets/stylesheets/binda/components/select2.scss

@@ -0,0 +1,126 @@
+.select2-container,
+.select2-selection {
+	// https://stackoverflow.com/a/24222873/1498118
+	&:focus,
+	&:focus:active {
+		box-shadow: none;
+	  border: 1px solid $color-gray-dark;
+	  background-image: none;
+	  outline: none;
+	}
+}
+
+.select2-container--default .select2-selection--multiple,
+.select2-container--default .select2-selection--single
+{
+  border-radius: 0;
+  background-color: $color-white;
+  transition: border .3s ease;
+  border: 1px solid transparent;
+
+  &:hover
+  {
+    border: 1px solid $color-gray-lighter;
+  }
+}
+
+.select2-dropdown
+{
+  border-radius: 0;
+  background-color: $color-white;
+}
+
+.select2-close-mask
+{
+  background-color: $color-white;
+}
+
+.select2-container--default .select2-selection--multiple .select2-selection__placeholder,
+.select2-container--default .select2-selection--single .select2-selection__rendered
+{
+  color: $text-color;
+}
+
+.select2-container--default .select2-selection--single .select2-selection__placeholder
+{
+  color: $color-gray-lighter;
+}
+
+.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b,
+.select2-container--default .select2-selection--single .select2-selection__arrow b
+{
+  border-color: $text-color transparent transparent transparent;
+}
+
+.select2-container--default.select2-container--open .select2-selection--single {
+  border: 1px solid $color-gray-lighter;
+}
+
+.select2-container--default.select2-container--disabled .select2-selection--single
+{
+  color: $color-gray-lighter;
+  background-color: $color-white;
+}
+
+.select2-container--default .select2-selection--multiple .select2-selection__choice
+{
+  color: $color-white;
+  border: 1px solid transparent;
+  border-radius: 0;
+  background-color: $color-gray-darker;
+}
+
+.select2-container--default .select2-selection--multiple .select2-selection__choice__remove
+{
+  transition: color .3s ease;
+  color: $color-white;
+
+  &:hover
+  {
+    color: $color-gray-lighter;
+  }
+}
+
+.select2-container--default.select2-container--focus .select2-selection--multiple
+{
+  border: 1px solid $color-gray-darker;
+}
+
+.select2-container--default.select2-container--disabled .select2-selection--multiple
+{
+  background-color: $color-gray-lightest;
+}
+
+.select2-container--default .select2-search--inline .select2-search__field
+{
+  margin-top: 7px;
+}
+
+.select2-container--default .select2-search--dropdown .select2-search__field
+{
+  border: 1px solid $color-gray-lighter;
+
+  &:focus {
+	  border: 1px solid $color-gray-dark;
+	  box-shadow: none;
+	  background-image: none;
+	  outline: none;
+  }
+}
+
+.select2-container--default .select2-results__option[aria-disabled=true]
+{
+  color: $text-color;
+}
+
+.select2-container--default .select2-results__option[aria-selected=true]
+{
+  background-color: $color-gray-lightest;
+}
+
+.select2-container--default .select2-results__option--highlighted[aria-selected]
+{
+  color: $color-white;
+  background-color: $color-gray-darker;
+}
+