Martin Macola / configuracion-imagenes

Download as
Browse Code ยป

Commit 9cd5c7d901043ae1e2e8cb785cfab47aa00de689

Authored by Marcelo Puebla
1 parent e665f15450
Exists in master

Cambios en estilos

Showing 2 changed files with 17 additions and 7 deletions   Show diff stats
src/assets/scss/bootstrap-override.scss
Diff comments   View file @ 9cd5c7d
1 @import "../../../node_modules/bootstrap/scss/functions"; 1 @import "../../../node_modules/bootstrap/scss/functions";
2 @import "../../../node_modules/bootstrap/scss/variables"; 2 @import "../../../node_modules/bootstrap/scss/variables";
3 @import "../../../node_modules/bootstrap/scss/mixins"; 3 @import "../../../node_modules/bootstrap/scss/mixins";
4 4
5 $primary: #2872ae; 5 $primary: #2872ae;
6 6
7 $theme-colors: ( 7 $theme-colors: (
8 primary: $primary, 8 primary: $primary,
9 light: white 9 light: white
10 ); 10 );
11 11
12 .popover { 12 .popover {
13 transform: translate3d(-425px, 0, -34px) !important; 13 transform: translate3d(-425px, 0, -34px) !important;
14 min-width: 350px !important; 14 min-width: 350px !important;
15 max-width: 425px !important; 15 max-width: 425px !important;
16 border: none !important; 16 border: none !important;
17 border-radius: 1.5rem !important; 17 border-radius: 1.5rem !important;
18 padding: 0 !important; 18 padding: 0 !important;
19 background-color: $primary !important; 19 background-color: $primary !important;
20 .popover-body { 20 .popover-body {
21 padding: 0 !important; 21 padding: 0 !important;
22 } 22 }
23 } 23 }
24 24
25 .bs-popover-left .arrow::after, 25 .bs-popover-left .arrow::after,
26 .bs-popover-auto[x-placement^="left"] .arrow::after { 26 .bs-popover-auto[x-placement^="left"] .arrow::after {
27 border-left-color: $primary !important; 27 border-left-color: $primary !important;
28 } 28 }
29 29
30 .bs-popover-right .arrow::after, 30 .bs-popover-right .arrow::after,
31 .bs-popover-auto[x-placement^="right"] .arrow::after { 31 .bs-popover-auto[x-placement^="right"] .arrow::after {
32 border-right-color: $primary !important; 32 border-right-color: $primary !important;
33 } 33 }
34 34
35 .bs-popover-top .arrow::after, 35 .bs-popover-top .arrow::after,
36 .bs-popover-auto[x-placement^="top"] .arrow::after { 36 .bs-popover-auto[x-placement^="top"] .arrow::after {
37 border-top-color: $primary !important; 37 border-top-color: $primary !important;
38 } 38 }
39 39
40 .bs-popover-bottom .arrow::after, 40 .bs-popover-bottom .arrow::after,
41 .bs-popover-auto[x-placement^="bottom"] .arrow::after { 41 .bs-popover-auto[x-placement^="bottom"] .arrow::after {
42 border-bottom-color: $primary !important; 42 border-bottom-color: $primary !important;
43 } 43 }
44 44
45 .list-group-item.active { 45 .list-group-item.active {
46 background-color: $primary !important; 46 background-color: $primary !important;
47 border-color: $primary !important; 47 border-color: $primary !important;
48 } 48 }
49 49
50 .custom-radio .custom-control-label::before { 50 .custom-radio .custom-control-label::before {
51 background-color: $primary !important; 51 background-color: $primary !important;
52 border-color: $white !important; 52 border-color: $white !important;
53 border-width: 2px !important; 53 border-width: 2px !important;
54 } 54 }
55 55
56 .custom-control-input { 56 .custom-control-input {
57 border-color: $white !important; 57 border-color: $white !important;
58 background-color: $primary !important; 58 background-color: $primary !important;
59 color: $primary !important; 59 color: $primary !important;
60 &:checked ~ .custom-control-label::before { 60 &:checked ~ .custom-control-label::before {
61 border-color: $white !important; 61 border-color: $white !important;
62 color: #fff !important; 62 color: #fff !important;
63 background-color: $primary !important; 63 background-color: $primary !important;
64 } 64 }
65 &:focus ~ .custom-control-label::before { 65 &:focus ~ .custom-control-label::before {
66 border-color: $white !important; 66 border-color: $white !important;
67 box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.7) !important; 67 box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.7) !important;
68 } 68 }
69 } 69 }
70 70
71 .carousel-control { 71 .carousel,
72 visibility: hidden !important; 72 .carousel-inner,
73 } 73 .item {
74
75 .carousel, .carousel-inner, .item {
76 height: 100% !important; 74 height: 100% !important;
77 &:focus{ 75 &:focus {
78 outline: none !important; 76 outline: none !important;
79 } 77 }
80 } 78 }
81 79
80 .carousel-control-prev-icon {
81 background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23808080' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E") !important;
82 }
83
84 .carousel-control-next-icon {
85 background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23808080' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E") !important;
86 }
87
88 li {
89 background-color: #808080 !important;
90 }
91
1 @import "./assets/scss/animation.scss"; 1 @import "./assets/scss/animation.scss";
2 @import "./assets/scss/bootstrap-override.scss"; 2 @import "./assets/scss/bootstrap-override.scss";
3 @import "../node_modules/bootstrap/scss/_variables.scss"; 3 @import "../node_modules/bootstrap/scss/_variables.scss";
4 4
5 html, 5 html,
6 body { 6 body {
7 background-color: #f0f0f0; 7 background-color: #f0f0f0;
8 font-family: bahnschrift; 8 font-family: bahnschrift;
9 overflow: hidden !important; 9 // overflow: hidden !important;
10 } 10 }
11 11
12 .disable-user-select { 12 .disable-user-select {
13 -webkit-user-select: none; 13 -webkit-user-select: none;
14 -moz-user-select: none; 14 -moz-user-select: none;
15 -ms-user-select: none; 15 -ms-user-select: none;
16 user-select: none; 16 user-select: none;
17 } 17 }
18 18
19 .blue-gradient { 19 .blue-gradient {
20 background: linear-gradient(0deg, #ffffff00, $white); 20 background: linear-gradient(0deg, #ffffff00, $white);
21 } 21 }
22 22
23 .rounded { 23 .rounded {
24 border-radius: 1.5rem !important; 24 border-radius: 1.5rem !important;
25 } 25 }
26 26
27 .rounded-top-sm { 27 .rounded-top-sm {
28 border-top-left-radius: 0.75rem !important; 28 border-top-left-radius: 0.75rem !important;
29 border-top-right-radius: 0.75rem !important; 29 border-top-right-radius: 0.75rem !important;
30 } 30 }
31 31
32 .rounded-sm { 32 .rounded-sm {
33 border-radius: 0.75rem !important; 33 border-radius: 0.75rem !important;
34 } 34 }
35 35
36 .card-effect { 36 .card-effect {
37 &:active { 37 &:active {
38 background-color: #c9c9c9b3 !important; 38 background-color: #c9c9c9b3 !important;
39 transition: background-color 0.5s; 39 transition: background-color 0.5s;
40 } 40 }
41 &:focus { 41 &:focus {
42 background-color: #c9c9c9b3 !important; 42 background-color: #c9c9c9b3 !important;
43 transition: background-color 0.5s; 43 transition: background-color 0.5s;
44 } 44 }
45 } 45 }
46 46
47 .overflow-scroll { 47 .overflow-scroll {
48 overflow-y: auto !important; 48 overflow-y: auto !important;
49 overflow-x: hidden !important; 49 overflow-x: hidden !important;
50 &::-webkit-scrollbar { 50 &::-webkit-scrollbar {
51 width: 1em; 51 width: 1em;
52 } 52 }
53 &::-webkit-scrollbar-track { 53 &::-webkit-scrollbar-track {
54 border-radius: 10px; 54 border-radius: 10px;
55 box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.4); 55 box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.4);
56 -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.4); 56 -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.4);
57 background-color: $white; 57 background-color: $white;
58 } 58 }
59 &::-webkit-scrollbar-thumb { 59 &::-webkit-scrollbar-thumb {
60 box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.7); 60 box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.7);
61 -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.7); 61 -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.7);
62 outline: 1px solid slategrey; 62 outline: 1px solid slategrey;
63 border-radius: 10px; 63 border-radius: 10px;
64 height: 12px; 64 height: 12px;
65 &:active { 65 &:active {
66 box-shadow: inset 0 0 8px $primary; 66 box-shadow: inset 0 0 8px $primary;
67 -webkit-box-shadow: inset 0 0 8px $primary; 67 -webkit-box-shadow: inset 0 0 8px $primary;
68 } 68 }
69 } 69 }
70 &::-webkit-scrollbar-corner { 70 &::-webkit-scrollbar-corner {
71 border-radius: 10px; 71 border-radius: 10px;
72 } 72 }
73 } 73 }
74 74
75 .bg-gray { 75 .bg-gray {
76 background-color: #e6e6e6; 76 background-color: #e6e6e6;
77 } 77 }
78 78
79 .bg-primary-gradient { 79 .bg-primary-gradient {
80 background: linear-gradient(135deg, rgba(40, 112, 175, 1) 0%, rgba(0, 32, 66, 1) 100%); 80 background: linear-gradient(135deg, rgba(40, 112, 175, 1) 0%, rgba(0, 32, 66, 1) 100%);
81 } 81 }
82 82
83 .bg-primary-gradient-horizontal { 83 .bg-primary-gradient-horizontal {
84 background: linear-gradient(90deg, rgba(40, 112, 175, 1) 0%, rgba(0, 32, 66, 1) 100%); 84 background: linear-gradient(90deg, rgba(40, 112, 175, 1) 0%, rgba(0, 32, 66, 1) 100%);
85 } 85 }
86 86
87 .icon-dim { 87 .icon-dim {
88 height: 40px !important; 88 height: 40px !important;
89 width: auto !important; 89 width: auto !important;
90 background-color: white !important; 90 background-color: white !important;
91 } 91 }
92 92
93 .text-purple { 93 .text-purple {
94 color: $purple; 94 color: $purple;
95 } 95 }
96 96
97 .vh-70 { 97 .vh-70 {
98 min-height: auto !important; 98 min-height: auto !important;
99 max-height: 70vh !important; 99 max-height: 70vh !important;
100 } 100 }
101 101
102 .vh-60 { 102 .vh-60 {
103 min-height: auto !important; 103 min-height: auto !important;
104 max-height: 60vh !important; 104 max-height: 60vh !important;
105 } 105 }
106 106
107 .vh-50 { 107 .vh-50 {
108 min-height: auto !important; 108 min-height: auto !important;
109 max-height: 50vh !important; 109 max-height: 50vh !important;
110 } 110 }
111 111
112 .spinner-lg { 112 .spinner-lg {
113 width: 3rem !important; 113 width: 3rem !important;
114 height: 3rem !important; 114 height: 3rem !important;
115 } 115 }
116 116
117 .sidebar { 117 .sidebar {
118 right: 0; 118 right: 0;
119 } 119 }
120 120
121 .background-image { 121 .background-image {
122 background-repeat: no-repeat; 122 background-repeat: no-repeat;
123 background-size: cover; 123 background-size: cover;
124 position: fixed; 124 position: fixed;
125 } 125 }
126 126
127 .rounded-bottom-right { 127 .rounded-bottom-right {
128 border-bottom-right-radius: 10rem; 128 border-bottom-right-radius: 10rem;
129 &:before { 129 &:before {
130 border-radius: 0 40px 40px 0; 130 border-radius: 0 40px 40px 0;
131 background-color: #fff; 131 background-color: #fff;
132 } 132 }
133 } 133 }
134 134
135 .rounded-top-left { 135 .rounded-top-left {
136 border-top-left-radius: 10rem; 136 border-top-left-radius: 10rem;
137 } 137 }
138 138
139 .bg-gray { 139 .bg-gray {
140 background-color: #cccccc; 140 background-color: #cccccc;
141 } 141 }
142 142
143 .cdk-overlay-container { 143 .cdk-overlay-container {
144 position: absolute; 144 position: absolute;
145 top: 65%; 145 top: 65%;
146 width: 100%; 146 width: 100%;
147 } 147 }
148 148
149 .min-h-40 { 149 .min-h-40 {
150 min-height: 40px; 150 min-height: 40px;
151 } 151 }
152 152
153 .min-h-55 { 153 .min-h-55 {
154 min-height: 55px; 154 min-height: 55px;
155 } 155 }
156 156
157 .pagination { 157 .pagination {
158 justify-content: center !important; 158 justify-content: center !important;
159 display: flex !important; 159 display: flex !important;
160 } 160 }
161 161