Revize c38f4c3a

Issue #7945 @1h
Oprava redundancí v btn-circle.
Unifikace barev.

resources/sass/_custom.scss

@@ -2 +2 @@
 
 body {
     //font-family: 'Nunito Sans', sans-serif;
-    background-color: $cusBlack;
+    background-color: $theme-color-five;
 
     .head-title h1 {
-        color: $cusWhite;
+        color: $theme-color-one;
         font-family: Avenir;
         font-size: 60pt;
         font-weight: bold;
@@ -69 +69 @@
 
             p {
                 font-size: 8pt;
-                color: $black;
+                color: $theme-color-five;
             }
         }
     }
@@ -93 +93 @@
     }
 
     .card-body {
-    	background-color: $cusBlack;
+    	background-color: $theme-color-five;
     	font-family: Avenir;
-    	color: $cusBrown3;
+    	color: $theme-color-four;
 
 	}
 
     .kaplicky{
-        color: $cusWhite;
+        color: $theme-color-one;
         font-size: 11pt;
         font-family: Avenir Black;
         //width: 100pt;
@@ -108 +108 @@
     }
 
 	.form-control {
-    	background-color: $cusBlack;
+    	background-color: $theme-color-five;
     	margin-top: -1px;
     	//border-bottom: 1px;
-    	border-top-color: $cusBlack;
-    	border-left-color: $cusBlack;
-    	border-right-color: $cusBlack;
-    	border-bottom-color: 0.5pt $cusWhite;
-    	color: $cusWhite;
+    	border-top-color: $theme-color-five;
+    	border-left-color: $theme-color-five;
+    	border-right-color: $theme-color-five;
+    	border-bottom-color: 0.5pt $theme-color-one;
+    	color: $theme-color-one;
         box-shadow: none;
         //transition: none;
         font-size: 8pt;
 	}
 
     .form-control:focus {
-        background-color: $cusBlack;
+        background-color: $theme-color-five;
         margin-top: -1px;
         //border-bottom: 1px;
-        border-top-color: $cusBlack;
-        border-left-color: $cusBlack;
-        border-right-color: $cusBlack;
-        border-bottom-color: 0.5pt $cusWhite;
-        color: $cusWhite;
+        border-top-color: $theme-color-five;
+        border-left-color: $theme-color-five;
+        border-right-color: $theme-color-five;
+        border-bottom-color: 0.5pt $theme-color-one;
+        color: $theme-color-one;
         box-shadow: none;
         //transition: none;
         font-size: 8pt;
@@ -137 +137 @@
 
     .button-square {
         font-size: 8pt;
-        background-color: $cusBlack;
-        color: $white;
-        border: 0.5pt solid $white;
+        background-color: $theme-color-five;
+        color: $theme-color-one;
+        border: 0.5pt solid $theme-color-one;
         border-radius: 0;
         width: 6.5rem;
         height: 2rem;
@@ -175 +175 @@
 
         &:hover {
             background-color: transparent;
-            border-color: $cusBrown3;
+            border-color: $theme-color-four;
         }
 
         &:focus {
             background-color: transparent;
-            border-color: $cusBrown3;
+            border-color: $theme-color-four;
             outline: none !important;
             box-shadow: none !important;
         }
@@ -197 +197 @@
         position: relative;
 
         //Circle style button
-        .btn-circle.rounded-circle.btn-sm {
-            position: absolute;
-            width: 120px;
-            height: 120px;
+            //Toto možná nebude zcela optimální pro ostatní circle buttony. Nehodící se propagujte do btn-categories
+        .btn-circle.rounded-circle {
             padding: 6px 0px;
-            border-radius: 15px;
             font-size: 16px;
             text-align: center;
-            background-color: $cusBlack;
-            border-color: $cusBrown3;
+        }
+        .btn-categories
+        {
+            position: absolute;
             border-width: 5px;
-            color:$cusBrown3;
+            background-color: $theme-color-five;
+            border-color: $theme-color-four;
+            color:$theme-color-four;
             outline: none !important;
             box-shadow: none !important;
 
-            &:active {
+            &:active
+            {
                 background-color: $cusBrown2;
-                border-color: $cusBrown3;
+                border-color: $theme-color-four;
                 outline: none !important;
                 box-shadow: none !important;
-                color:$cusBlack;
+                color:$theme-color-five;
             }
         }
 
-        .btn-circle.rounded-circle.btn-dm
+        .btn-sm
+        {
+            width: 120px;
+            height: 120px;
+        }
+        .btn-dm
         {
-            position: absolute;
             width: 240px;
             height: 240px;
-            padding: 6px 0;
-            border-radius: 15px;
-            font-size: 16px;
-            text-align: center;
-            background-color: $cusBlack;
-            border-color: $cusBrown3;
-            color:$cusBrown3;
-            border-width: 5px;
-            outline: none !important;
-            box-shadow: none !important;
-
-            &:active {
-                background-color: $cusBrown2;
-                border-color: $cusBrown3;
-                outline: none !important;
-                box-shadow: none !important;
-                color:$cusBlack;
-            }
         }
-
-        .btn-circle.rounded-circle.btn-xl
+        .btn-xl
         {
-            position: absolute;
             width: 360px;
             height: 360px;
-            padding: 6px 0px;
-            border-radius: 15px;
-            font-size: 16px;
-            text-align: center;
-            background-color: $cusBlack;
-            border-color: $cusBrown3;
-            color:$cusBrown3;
-            border-width: 5px;
-            outline: none !important;
-            box-shadow: none !important;
-
-            &:active {
-                background-color: $cusBrown2;
-                border-color: $cusBrown3;
-                outline: none !important;
-                box-shadow: none !important;
-                color:$cusBlack;
-            }
         }
+
     }
 }
 
 @media only screen and (max-width: 540px)
 {
+
     .head-title.text-center h1
     {
         font-size: 45pt;
@@ -297 +267 @@
         width: 180px;
         height: 180px;
     }
-}
 
-@media only screen and (max-width: 540px)
-{
     body{
         .carousel {
             .carousel-inner {

resources/sass/_variables.scss

@@ -6 +6 @@
 $font-size-base: 0.9rem;
 $line-height-base: 1.6;
 
-// Colors
+// Colors - nepoužívat!
 $blue: #3490dc;
 $indigo: #6574cd;
 $purple: #9561e2;
@@ -20 +20 @@
 $white: #ffff;
 $black: #000;
 
-// Custom colors
+// Custom colors - deprecated - nepoužívat, odstranit!
 $cusWhite: #ffffff;
 $cusBrown1: #ddd1b9;
 $cusBrown2: #efdab3;
 $cusBrown3: #ead4b0;
 $cusBlack: #272727;
 
+// Design colors - nepoužívat!
+$white: #ffffff;
+$pastel-grey: #ddd1b9;
+$whey: #efdab3;
+$desert-sand: #ead4b0;
+$raisin-black: #272727;
+// Theme colors - TOHLE POUŽÍVAT!, úpravy jen z Design colors
+$theme-color-one: $white;
+$theme-color-two: $pastel-grey;
+$theme-color-three: $whey;
+$theme-color-four: $desert-sand;
+$theme-color-five: $raisin-black;
+

resources/views/categories/index.blade.php

@@ -15 +15 @@
             {{--@for($k = 1; $k <= count($categories);$k++)--}}
             @for($k = 1; $k <= 10;$k++)
                 @if($categorySizes[$k-1] == 1)
-                        <button type="button" class="btn btn-primary btn-circle rounded-circle btn-sm" id="cat-{{$k}}">{{$categoryNames[$k-1]->nameEN}}</button>
+                        <button type="button" class="btn btn-circle rounded-circle btn-categories btn-sm" id="cat-{{$k}}">{{$categoryNames[$k-1]->nameEN}}</button>
                 @elseif($categorySizes[$k-1] == 2)
-                        <button type="button" class="btn btn-primary btn-circle rounded-circle btn-dm" id="cat-{{$k}}">{{$categoryNames[$k-1]->nameEN}}</button>
+                        <button type="button" class="btn btn-circle rounded-circle btn-categories btn-dm" id="cat-{{$k}}">{{$categoryNames[$k-1]->nameEN}}</button>
                 @else
-                        <button type="button" class="btn btn-primary btn-circle rounded-circle btn-xl" id="cat-{{$k}}">{{$categoryNames[$k-1]->nameEN}}</button>
+                        <button type="button" class="btn btn-circle rounded-circle btn-categories btn-xl" id="cat-{{$k}}">{{$categoryNames[$k-1]->nameEN}}</button>
                 @endif
             @endfor
         </div>