Skip to content

Juan Montilla / TBW2223_equipo12

Go to a project
Commit 70a31849 by Manuel Ruiz Toribio
Options

Cambios en el css de los checkbox

parent 67397558
Inline Side-by-side
Showing with 96 additions and 72 deletions
app/Views/pages/home.php
...@@ -22,15 +22,15 @@ ...@@ -22,15 +22,15 @@
<ul class="ks-cboxtags"> <ul class="ks-cboxtags">
<li> <li>
<input type="checkbox" id="checkboxOne" value="Order one"> <input type="checkbox" id="checkboxOne" value="Order one">
<label for="checkboxOne">News <span>200</span></label> <label for="checkboxOne">News </label>
</li> </li>
<li> <li>
<input type="checkbox" id="checkboxTwo" value="Order Two"> <input type="checkbox" id="checkboxTwo" value="Order Two">
<label for="checkboxTwo">Direct Message <span>234</span></label> <label for="checkboxTwo">Direct Message </label>
</li> </li>
<li> <li>
<input type="checkbox" id="checkboxThree" value="Order Two"> <input type="checkbox" id="checkboxThree" value="Order Two">
<label for="checkboxThree">Followers <span>1,189</span></label> <label for="checkboxThree">Followers </label>
</li> </li>
</ul> </ul>
......
public/css/style.css
...@@ -346,7 +346,7 @@ h6 { ...@@ -346,7 +346,7 @@ h6 {
height: 60px; height: 60px;
box-shadow: 0px 2px 20px rgba(1, 41, 112, 0.1); box-shadow: 0px 2px 20px rgba(1, 41, 112, 0.1);
/*COLOR HEADER*/ /*COLOR HEADER*/
background-image: linear-gradient(to right, #fa6e59 , #f8a055); background-image: linear-gradient(to right, #fa6e59, #f8a055);
padding-left: 20px; padding-left: 20px;
} }
...@@ -574,7 +574,7 @@ h6 { ...@@ -574,7 +574,7 @@ h6 {
scrollbar-color: #aab7cf transparent; scrollbar-color: #aab7cf transparent;
box-shadow: 0px 0px 20px rgba(1, 41, 112, 0.1); box-shadow: 0px 0px 20px rgba(1, 41, 112, 0.1);
/*COLOR SIDEBAR*/ /*COLOR SIDEBAR*/
background-image: linear-gradient(to bottom right, #f8a055, #fa6e59); background-image: linear-gradient(to bottom right, #f8a055, #fa6e59);
} }
@media (max-width: 1199px) { @media (max-width: 1199px) {
...@@ -1199,9 +1199,12 @@ h6 { ...@@ -1199,9 +1199,12 @@ h6 {
/*FILA RECETAS*/ /*FILA RECETAS*/
.imagen-container { .imagen-container {
width: 290px; /*ancho fijo*/ width: 290px;
height: 194px; /*altura fija*/ /*ancho fijo*/
overflow: hidden; /*para recortar la imagen*/ height: 194px;
/*altura fija*/
overflow: hidden;
/*para recortar la imagen*/
} }
.imagen-container img { .imagen-container img {
...@@ -1238,7 +1241,7 @@ h6 { ...@@ -1238,7 +1241,7 @@ h6 {
.card { .card {
margin-bottom: 30px; margin-bottom: 30px;
border: none; border: none;
border-radius: 5pxy ; border-radius: 5pxy;
box-shadow: 0px 0 30px rgba(1, 41, 112, 0.1); box-shadow: 0px 0 30px rgba(1, 41, 112, 0.1);
} }
...@@ -1284,64 +1287,74 @@ h6 { ...@@ -1284,64 +1287,74 @@ h6 {
background-color: rgba(255, 255, 255, 0.6); background-color: rgba(255, 255, 255, 0.6);
} }
/*Checkbox barra lateral*/
ul.ks-cboxtags { ul.ks-cboxtags {
list-style: none; list-style: none;
padding: 20px; } padding: 20px;
ul.ks-cboxtags li {
display: block; } }
ul.ks-cboxtags li label {
display: inline-block; ul.ks-cboxtags li {
background-color: rgba(255, 255, 255, 0.9); display: block;
border: 1px solid rgba(0, 0, 0, 0.1);
color: rgba(0, 0, 0, 0.8); }
font-size: 18px;
border-radius: 4px; ul.ks-cboxtags li label {
white-space: nowrap; display: inline-block;
margin: 0 0 10px 0; background-color: rgba(255, 255, 255, 0.9);
-webkit-touch-callout: none; border: 1px solid rgba(0, 0, 0, 0.1);
-webkit-user-select: none; color: rgba(0, 0, 0, 0.8);
-moz-user-select: none; font-size: 18px;
-ms-user-select: none; border-radius: 4px;
user-select: none; white-space: nowrap;
-webkit-tap-highlight-color: transparent; margin: 0 0 10px 0;
-webkit-transition: all .2s; -webkit-touch-callout: none;
-o-transition: all .2s; -webkit-user-select: none;
transition: all .2s; -moz-user-select: none;
display: block; } -ms-user-select: none;
user-select: none;
-webkit-tap-highlight-color: transparent;
-webkit-transition: all .2s;
-o-transition: all .2s;
transition: all .2s;
display: block;
}
ul.ks-cboxtags li label { ul.ks-cboxtags li label {
padding: 10px 20px; padding: 10px 20px;
cursor: pointer; } cursor: pointer;
ul.ks-cboxtags li label::before {
display: inline-block; }
font-style: normal;
font-variant: normal; ul.ks-cboxtags li label::before {
text-rendering: auto; display: inline-block;
-webkit-font-smoothing: antialiased; font-style: normal;
font-family: "FontAwesome"; font-variant: normal;
font-weight: 900; text-rendering: auto;
font-size: 24px; -webkit-font-smoothing: antialiased;
padding: 0; font-family: "FontAwesome";
margin-right: 15px; font-weight: 900;
content: "\f1db"; font-size: 24px;
color: rgba(0, 0, 0, 0.2); padding: 0;
-webkit-transition: -webkit-transform .3s ease-in-out; margin-right: 15px;
transition: -webkit-transform .3s ease-in-out; content: "\f1db";
-o-transition: transform .3s ease-in-out; color: rgba(0, 0, 0, 0.2);
transition: transform .3s ease-in-out; -webkit-transition: -webkit-transform .3s ease-in-out;
transition: transform .3s ease-in-out, -webkit-transform .3s ease-in-out; transition: -webkit-transform .3s ease-in-out;
position: absolute; -o-transition: transform .3s ease-in-out;
right: 40px; transition: transform .3s ease-in-out;
margin-top: -5px; } transition: transform .3s ease-in-out, -webkit-transform .3s ease-in-out;
ul.ks-cboxtags li label span { position: absolute;
background: #f9e090; right: 40px;
font-size: 12px; margin-top: -5px;
padding: 2px 5px;
border-radius: 30px; }
color: #fff;
margin-left: 10px; }
ul.ks-cboxtags li input[type="checkbox"]:checked + label::before { ul.ks-cboxtags li input[type="checkbox"]:checked+label::before {
content: "\f058"; content: "\f058";
-webkit-transform: rotate(-360deg); -webkit-transform: rotate(-360deg);
-ms-transform: rotate(-360deg); -ms-transform: rotate(-360deg);
...@@ -1351,22 +1364,33 @@ ul.ks-cboxtags li input[type="checkbox"]:checked + label::before { ...@@ -1351,22 +1364,33 @@ ul.ks-cboxtags li input[type="checkbox"]:checked + label::before {
-o-transition: transform .3s ease-in-out; -o-transition: transform .3s ease-in-out;
transition: transform .3s ease-in-out; transition: transform .3s ease-in-out;
transition: transform .3s ease-in-out, -webkit-transform .3s ease-in-out; transition: transform .3s ease-in-out, -webkit-transform .3s ease-in-out;
color: #fff; } color: #fff;
}
ul.ks-cboxtags li input[type="checkbox"]:checked + label { ul.ks-cboxtags li input[type="checkbox"]:checked+label {
border: 1px solid #c400c6; border: 1px solid #98099b;
background-color: #c400c6; background-color: #c400c6;
color: #fff; color: #fff;
-webkit-transition: all .2s; -webkit-transition: all .2s;
-o-transition: all .2s; -o-transition: all .2s;
transition: all .2s; } transition: all .2s;
ul.ks-cboxtags li input[type="checkbox"]:checked + label span {
background: #fff; }
color: #000; }
ul.ks-cboxtags li input[type="checkbox"]:checked+label span {
background: #fff;
color: #000;
}
ul.ks-cboxtags li input[type="checkbox"] { ul.ks-cboxtags li input[type="checkbox"] {
display: absolute; } display: absolute;
}
ul.ks-cboxtags li input[type="checkbox"] { ul.ks-cboxtags li input[type="checkbox"] {
position: absolute; position: absolute;
opacity: 0; } opacity: 0;
\ No newline at end of file
}
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment