Accordion

HTML

<div id="accordion">
<div class="d-flex bd-highlight">
<ul class="flex-grow-1 bd-highlight list-group">
<li class="list-group-item">
<a class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true"
aria-controls="collapseOne">
Collapsible Group Item #1
</a>
</li>
<li class="list-group-item">
<a class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTwo"
aria-expanded="false"
aria-controls="collapseTwo">
Collapsible Group Item #2
</a>
</li>
<li class="list-group-item">
<a class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseThree"
aria-expanded="false"
aria-controls="collapseThree">
Collapsible Group Item #3
</a>
</li>
</ul>

<div class="p-2 bd-highlight">
<div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordion">
<div class="card-body">
text 1
</div>
</div>

<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
<div class="card-body">
text 2
</div>
</div>

<div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordion">
<div class="card-body">
text 3
</div>
</div>
</div>
</div>
</div>

Assets

  • http://components.onlean.es/css/css/style.css
  • http://components.onlean.es/css/js/global.css

Buttons

Buttons

HTML

<button href="#" class="ol-primary-btn">Aceptar</button>

<button href="#" class="ol-disabled-btn">Click Me</button>

<button href="#" class="ol-delete-btn">Delete</button>

<button href="#" class="ol-sencondary-btn">Editar</button>

<button href="#" class="ol-primary-btn-lg">Aceptar</button>

<button href="#" class="ol-disabled-button-lg">Click Me</button>

<button href="#" class="ol-delete-btn-lg">Delete</button>

<button href="#" class="ol-secondary-btn-lg">Editar</button>

<button href="#" class="ol-primary-btn-md">Aceptar</button>

<button href="#" class="ol-disalbled-btn-md">Click Me</button>

<button href="#" class="ol-delete-btn-md">Delete</button>

<button href="#" class="ol-secondary-btn-md">Editar</button>

<button href="#" class="ol-primarybutton-sm">Aceptar</button>

<button href="#" class="ol-disalbled-btn-sm">Click Me</button>

<button href="#" class="ol-delete-btn-sm">Delete</button>

<button href="#" class="ol-secondary-button-sm">Editar</button>


Assets

  • http://components.onlean.es/css/css/style.css
  • http://components.onlean.es/css/js/global.css

/* ===============================
primary-btn ****** Primary *****
================================ */
.ol-primary-btn {
background-color: #5db075;
-webkit-border-radius: 28px;
-moz-border-radius: 28px;
border-radius: 28px;
border: 1px solid #5db075;
display: inline-block;
cursor: pointer;
color: #ffffff;
font-family: Arial;
font-size: 12px;
font-weight: bold;
padding: 10px 32px;
text-decoration: none;
outline: transparent;
margin: 20px;
outline: transparent;

&:hover {
background-color: #7db38c;

}

&:active {
position: relative;
top: 1px;
outline: transparent;

}
&:focus {
outline: none !important;
}
}

/* ===============================
disabled-btn
================================ */

.ol-disabled-btn {
background-color: #f6f6f6;
-webkit-border-radius: 28px;
-moz-border-radius: 28px;
border-radius: 28px;
border: 1px solid #f6f6f6;
display: inline-block;
cursor: not-allowed;
color: #bdbdbd;
font-family: Arial;
font-size: 12px;
font-weight: bold;
padding: 10px 32px;
text-decoration: none;
margin: 20px;

&:hover {
background-color: #e7e5e5;
}

&:active {
position: relative;
top: 1px;
}
&:focus {
outline: none !important;
}
}

/* ===============================
delete-btn
================================ */

.ol-delete-btn {
background-color: #f6f6f6;
-webkit-border-radius: 28px;
-moz-border-radius: 28px;
border-radius: 28px;
border: 1px solid #f6f6f6;
display: inline-block;
cursor: pointer;
color: #db5454;
font-family: Arial;
font-size: 12px;
font-weight: bold;
padding: 10px 32px;
text-decoration: none;
margin: 20px;

&:hover {
background-color: #e7e5e5;
}

&:active {
position: relative;
top: 1px;
}
&:focus {
outline: none !important;
}
}

/* ===============================
sencondary-btn
================================ */

.ol-sencondary-btn {
background-color: #f6f6f6;
-webkit-border-radius: 28px;
-moz-border-radius: 28px;
border-radius: 28px;
border: 1px solid #f6f6f6;
display: inline-block;
cursor: pointer;
color: #5db075;
font-family: Arial;
font-size: 12px;
font-weight: bold;
padding: 10px 32px;
text-decoration: none;
margin: 20px;

&:hover {
background-color: #e7e5e5;
}

&:active {
position: relative;
top: 1px;
}
&:focus {
outline: none !important;
}
}
/* ===============================
primary-btn-lg ***** lg *******
================================ */

.ol-primary-btn-lg {
background-color: #5db075;
-webkit-border-radius: 28px;
-moz-border-radius: 28px;
border-radius: 28px;
border: 1px solid #5db075;
display: inline-block;
cursor: pointer;
color: #ffffff;
font-family: Arial;
font-size: 12px;
font-weight: bold;
padding: 10px 95px;
text-decoration: none;
margin: 20px;

&:hover {
background-color: #7db38c;
}

&:active {
position: relative;
top: 1px;
}
&:focus {
outline: none !important;
}
}
/* ===============================
disabled-button-lg
================================ */

.ol-disabled-button-lg {
background-color: #f6f6f6;
-webkit-border-radius: 28px;
-moz-border-radius: 28px;
border-radius: 28px;
border: 1px solid #f6f6f6;
display: inline-block;
cursor: not-allowed;
color: #bdbdbd;
font-family: Arial;
font-size: 12px;
font-weight: bold;
padding: 10px 95px;
text-decoration: none;
margin: 20px;

&:hover {
background-color: #e7e5e5;
}

&:active {
position: relative;
top: 1px;
}

&:focus {
outline: none !important;
}
}
/* ===============================
Delete-btn-lg
================================ */

.ol-delete-btn-lg {
background-color: #f6f6f6;
-webkit-border-radius: 28px;
-moz-border-radius: 28px;
border-radius: 28px;
border: 1px solid #f6f6f6;
display: inline-block;
cursor: pointer;
color: #db5454;
font-family: Arial;
font-size: 12px;
font-weight: bold;
padding: 10px 95px;
text-decoration: none;
margin: 20px;

&:hover {
background-color: #e7e5e5;
}

&:active {
position: relative;
top: 1px;
}
&:focus {
outline: none !important;
}
}
/* ===============================
secondary-btn-lg
================================ */

.ol-secondary-btn-lg {
background-color: #f6f6f6;
-webkit-border-radius: 28px;
-moz-border-radius: 28px;
border-radius: 28px;
border: 1px solid #f6f6f6;
display: inline-block;
cursor: pointer;
color: #5db075;
font-family: Arial;
font-size: 12px;
font-weight: bold;
padding: 10px 95px;
text-decoration: none;
margin: 20px;

&:hover {
background-color: #e7e5e5;
}

&:active {
position: relative;
top: 1px;
}
&:focus {
outline: none !important;
}
}
/* ===============================
primarybutton-md ****** md ******
================================ */

.ol-primary-btn-md {
background-color: #5db075;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
border: 1px solid #5db075;
display: inline-block;
cursor: pointer;
color: #ffffff;
font-family: Arial;
font-size: 12px;
font-weight: bold;
padding: 5px 55px;
text-decoration: none;
margin: 20px;

&:hover {
background-color: #7db38c;
}

&:active {
position: relative;
top: 1px;
}
&:focus {
outline: none !important;
}
}
/* ===============================
disalbled-btn-md
================================ */

.ol-disalbled-btn-md {
background-color: #f6f6f6;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
border: 1px solid #f6f6f6;
display: inline-block;
cursor: not-allowed;
color: #bdbdbd;
font-family: Arial;
font-size: 12px;
font-weight: bold;
padding: 5px 55px;
text-decoration: none;
margin: 20px;

&:hover {
background-color: #e7e5e5;
}

&:active {
position: relative;
top: 1px;
}
&:focus {
outline: none !important;
}
}
/* ===============================
delete-btn-md
================================ */

.ol-delete-btn-md {
background-color: #f6f6f6;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
border: 1px solid #f6f6f6;
display: inline-block;
cursor: pointer;
color: #db5454;
font-family: Arial;
font-size: 12px;
font-weight: bold;
padding: 5px 55px;
text-decoration: none;
margin: 20px;

&:hover {
background-color: #e7e5e5;
}

&:active {
position: relative;
top: 1px;
}
&:focus {
outline: none !important;
}
}
/* ===============================
secondary-btn-md
================================ */

.ol-secondary-btn-md {
background-color: #f6f6f6;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
border: 1px solid #f6f6f6;
display: inline-block;
cursor: pointer;
color: #5db075;
font-family: Arial;
font-size: 12px;
font-weight: bold;
padding: 5px 55px;
text-decoration: none;
margin: 20px;

&:hover {
background-color: #e7e5e5;
}

&:active {
position: relative;
top: 1px;
}
&:focus {
outline: none !important;
}
}
/* ===============================
primarybutton-sm ******* sm ****
================================ */

.pl-primarybutton-sm {
background-color: #5db075;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
border: 1px solid #5db075;
display: inline-block;
cursor: pointer;
color: #ffffff;
font-family: Arial;
font-size: 12px;
font-weight: bold;
padding: 8px 25px;
text-decoration: none;
margin: 20px;

&:hover {
background-color: #7db38c;
}

&:active {
position: relative;
top: 1px;
}
&:focus {
outline: none !important;
}
}
/* ===============================
disalbled-btn-sm
================================ */

.ol-disalbled-btn-sm {
background-color: #f6f6f6;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
border: 1px solid #f6f6f6;
display: inline-block;
cursor: not-allowed;
color: #bdbdbd;
font-family: Arial;
font-size: 17px;
font-weight: bold;
padding: 8px 25px;
text-decoration: none;
margin: 20px;

&:hover {
background-color: #e7e5e5;
}

&:active {
position: relative;
top: 1px;
}
&:focus {
outline: none !important;
}
}
/* ===============================
delete-btn-sm
================================ */

.ol-delete-btn-sm {
background-color: #f6f6f6;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
border: 1px solid #f6f6f6;
display: inline-block;
cursor: pointer;
color: #db5454;
font-family: Arial;
font-size: 17px;
font-weight: bold;
padding: 8px 25px;
text-decoration: none;
margin: 20px;

&:hover {
background-color: #e7e5e5;
}

&:active {
position: relative;
top: 1px;
}
&:focus {
outline: none !important;
}
}

/* ===============================
secondary-button-sm
================================ */

.ol-secondary-button-sm {
background-color: #f6f6f6;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
border: 1px solid #f6f6f6;
display: inline-block;
cursor: pointer;
color: #5db075;
font-family: Arial;
font-size: 17px;
font-weight: bold;
padding: 8px 25px;
text-decoration: none;
margin: 20px;

&:hover {
background-color: #e7e5e5;
}

&:active {
position: relative;
top: 1px;
}
&:focus {
outline: none !important;
}
}

/* ===============================
Pop-up Open Form
================================ */

.ol-popuo-form {
background-color: #f6f6f6;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 10px;
border: 1px solid #f6f6f6;
display: inline-block;
cursor: pointer;
color: #7DC5BF;
font-family: Arial;
font-size: 12px;
font-weight: bold;
padding: 5px 55px;
text-decoration: none;
margin: 20px;
box-shadow: 0 4px 4px 0 rgba(0, 0,
0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

&:hover {
background-color: #e7e5e5;
}

&:active {
position: relative;
top: 1px;
}
&:focus {
outline: none !important;
}
}















Card

HTML

<!DOCTYPE html>
<html>

<head>
<link rel="stylesheet" type="text/css" href="../../css/css/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.1/css/all.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"
integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg=="
crossorigin="anonymous"></script>


</head>

<body>

<div class="ol-card">
<div class="ol-card-header">
<div>
<span class="ol-field-label">Field 1</span>
<span class="font-weight-bold">ID</span>
</div>
<div class="ol-titulo ol-truncate">Truncate String with Ellipsis at the end of a sentece</div>
<div>
<span class="ol-field-label">Field2</span>
<span class="font-weight-bold">Field3</span>
</div>
<div>
<span class="ol-field-label">Field4</span>
<span class="font-weight-bold">Field5</span>
</div>
</div>

<div id="bodyItem" class="ol-card-body">
<div id="avatar" class="ol-avatar"></div>
<div>Responsable</div>
<div class="font-weight-bold">Name Surname</div>
<div class="ol-label-rol ol-background-blue"> Label</div>
<br>
<div class="ol-text-centred">
<div><img src="" alt=""></div>
<div>
<span class="tipoFecha ol-grey">DATE</span>:
</div>
<span class="ol-date">00 Aaa.0000</span>
<span class="ol-grey">nº</span>
</div>
</div>

<div id="estadoItem" class="ol-card-footer">
<div class="row">
<div class="col-6">
<div> <i class="fas fa-play" id="iconoEstado"></i></div>
<span class="font-weight-bold">Estado</span>
<div>Tipo Estado</div>
</div>
<div class="ol-centerText col-6">
<div class="font-weight-bold">Date</div>
<div class="ol-date">00 Aaa 0000</div>
</div>
</div>
</div>
</div>

<!-- partial -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js'></script>

</body>


</html>

Assets

  • http://components.onlean.es/css/css/style.css
  • http://components.onlean.es/css/js/global.css
.ol-card {
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
border-radius: 10px 10px 10px 10px;
width: 100%;
margin-bottom: 1vh;
background-color: white;

.ol-card-header {
padding: 19px;

.ol-field-label {
color: $grey-Text;
}

.ol-titulo {
font-weight: bold;
font-size: 24px;


}

.ol-id {
font-weight: bold;
}
}

.ol-card-body {
.ol-avatar {
margin: 10px 20px 5px 0px;
margin-left: 10px;
height: 60px;
width: 60px;
float: left;
border: 2px solid #f2f2f2;
border-radius: 100%;
background-repeat: no-repeat;
background-position: 50%;
background-size: cover;
display: inline-grid;
font-size: 20px;
text-align: center !important;
}
.ol-photoCard {
width: 100%;
max-height: 250px;
}
.ol-label-rol {
width: 100px;
color: white;
text-align: center;
float: left;
border-radius: 5px;
font-size: 12px;
margin: 5px;
}
.ol-text-centred {
text-align: center;
margin-top: 15px;
}
}

.ol-card-footer {
border-radius: 0px 0px 10px 10px;
padding: 5px;
background-color: rgb(32, 138, 156);
color: white;

.fas {
margin: 10px 10px;
float: left;
}
}
}

Error 500

Componente error 500 información con link´s contacto i link resetear cache.

Error 500

HTML

<ul>
<li><a href="card">Card</a></li>
<li><a href="search">Search</a></li>
<li><a href="Hamburger/">Hamburger</a></li>
<li><a href="search/">Search</a></li>
<li><a href="toggle_app_switch/">App toggle_app_switch</a></li>
<li><a href="buttons/">Buttons</a></li></ul>
<li><a href="error500/">error500</a></li></ul>
<!-- partial -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js'></script>

Assets

  • http://components.onlean.es/css/css/style.css
  • http://components.onlean.es/css/js/global.css
.ol-error-500{

padding: 5%;

--main-color: white;
--stroke-color: black;
background: var(--main-color);

.ol-error-content{
padding: 40px;
text-align: center;
}
h1 {

color: var(--stroke-color);
font-family: 'Encode Sans Semi Condensed', Verdana, sans-serif;
font-size: 10rem; line-height: 10rem;
font-weight: 200;
text-align: center;
}
h2 {
margin: 20px auto 30px auto;
font-family: 'Encode Sans Semi Condensed', Verdana, sans-serif;
font-size: 1.5rem;
font-weight: 200;
text-align: center;
}
h1, h2 {
-webkit-transition: opacity 0.5s linear, margin-top 0.5s linear; /* Safari */
transition: opacity 0.5s linear, margin-top 0.5s linear;
}
.loading h1, .loading h2 {
margin-top: 0px;
opacity: 0;
}
.gears {
position: relative;
margin: 0 auto;
width: auto; height: 0;
}
.gear {
position: relative;
z-index: 0;
width: 120px; height: 120px;
margin: 0 auto;
border-radius: 50%;
background: var(--stroke-color);
}
.gear:before{
position: absolute; left: 5px; top: 5px; right: 5px; bottom: 5px;
z-index: 2;
content: "";
border-radius: 50%;
background: var(--main-color);
}
.gear:after {
position: absolute; left: 25px; top: 25px;
z-index: 3;
content: "";
width: 70px; height: 70px;
border-radius: 50%;
border: 5px solid var(--stroke-color);
box-sizing: border-box;
background: var(--main-color);
}
.gear.one {
left: -130px;
}
.gear.two {
top: -75px;
}
.gear.three {
top: -235px;
left: 130px;
}
.gear .bar {
position: absolute; left: -15px; top: 50%;
z-index: 0;
width: 150px; height: 30px;
margin-top: -15px;
border-radius: 5px;
background: var(--stroke-color);
}
.gear .bar:before {
position: absolute; left: 5px; top: 5px; right: 5px; bottom: 5px;
z-index: 1;
content: "";
border-radius: 2px;
background: var(--main-color);
}
.gear .bar:nth-child(2) {
transform: rotate(60deg);
-webkit-transform: rotate(60deg);
}
.gear .bar:nth-child(3) {
transform: rotate(120deg);
-webkit-transform: rotate(120deg);
}
@-webkit-keyframes clockwise {
0% { -webkit-transform: rotate(0deg);}
100% { -webkit-transform: rotate(360deg);}
}
@-webkit-keyframes anticlockwise {
0% { -webkit-transform: rotate(360deg);}
100% { -webkit-transform: rotate(0deg);}
}
@-webkit-keyframes clockwiseError {
0% { -webkit-transform: rotate(0deg);}
20% { -webkit-transform: rotate(30deg);}
40% { -webkit-transform: rotate(25deg);}
60% { -webkit-transform: rotate(30deg);}
100% { -webkit-transform: rotate(0deg);}
}
@-webkit-keyframes anticlockwiseErrorStop {
0% { -webkit-transform: rotate(0deg);}
20% { -webkit-transform: rotate(-30deg);}
60% { -webkit-transform: rotate(-30deg);}
100% { -webkit-transform: rotate(0deg);}
}
@-webkit-keyframes anticlockwiseError {
0% { -webkit-transform: rotate(0deg);}
20% { -webkit-transform: rotate(-30deg);}
40% { -webkit-transform: rotate(-25deg);}
60% { -webkit-transform: rotate(-30deg);}
100% { -webkit-transform: rotate(0deg);}
}
.gear.one {
-webkit-animation: anticlockwiseErrorStop 2s linear infinite;
}
.gear.two {
-webkit-animation: anticlockwiseError 2s linear infinite;
}
.gear.three {
-webkit-animation: clockwiseError 2s linear infinite;
}
.loading .gear.one, .loading .gear.three {
-webkit-animation: clockwise 3s linear infinite;
}
.loading .gear.two {
-webkit-animation: anticlockwise 3s linear infinite;
}
}

Hamburger

Hamburger &  desplegable dinamico con Link

Hamburger

HTML

<!DOCTYPE html>
<html>

<head>
<link rel="stylesheet" type="text/css" href="../../css/css/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.1/css/all.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0" name="viewport">
</head>

<body>
<div class="ol-hamburger">
<div id="menuToggle">
<input type="checkbox" />
<span></span>
<span></span>
<span></span>
<ul id="menu">
<a href="#"><li>Link</li></a>
<a href="#"><li>Link</li></a>
<a href="#"><li>Link</li></a>
</ul>
</div>
</div>


<!-- partial -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js'></script>

</body>

</html>

Assets

  • http://components.onlean.es/css/css/style.css
  • http://components.onlean.es/css/js/global.css
.ol-hamburger {
a {
text-decoration: none;
color: $color-brand;
transition: color 0.3s ease;
&:hover {
color: $grey-Text;
}
}
#menuToggle {
display: block;
position: fixed;
top: 50px;
right: 25px;
z-index: 1;
-webkit-user-select: none;
user-select: none;
input {
display: block;
width: 40px;
height: 32px;
position: absolute;
top: -7px;
left: -5px;
cursor: pointer;
opacity: 0;
z-index: 2;
-webkit-touch-callout: none;
&:checked {
~ {
span {
opacity: 1;
transform: rotate(45deg) translate(-2px, -1px);
background: $color-brand;
&:nth-last-child(3) {
opacity: 0;
transform: rotate(0deg) scale(0.2, 0.2);
}
&:nth-last-child(2) {
opacity: 1;
transform: rotate(-45deg) translate(0, -1px);
}
}
ul {
transform: none;
opacity: 1;
}
}
}
}
span {
display: block;
width: 33px;
height: 4px;
margin-bottom: 5px;
position: relative;
background: $color-brand;
border-radius: 3px;
z-index: 1;
transform-origin: 4px 0px;
transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1),
background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), opacity 0.55s ease;
&:first-child {
transform-origin: 0% 0%;
}
&:nth-last-child(2) {
transform-origin: 0% 100%;
}
}
}
#menu {
position: absolute;
width: 300px;
margin: -100px 0 0 0;
padding: 50px;
padding-top: 125px;
right: -100px;
background: $grey-background;
list-style-type: none;
-webkit-font-smoothing: antialiased;
transform-origin: 0% 0%;
transform: translate(100%, 0);
transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1);
li {
padding: 10px 0;
font-size: 22px;
}
}
}

Search

HTML

<!DOCTYPE html>
<html>

<head>
<link rel="stylesheet" type="text/css" href="../../css/css/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.1/css/all.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>


<form class="ol-search col-md-2">
<input type="text" placeholder="Search.." name="">
<button type="submit"><i class="fa fa-search"></i></button>
</form>




<!-- partial -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js'></script>

</body>

</html>

Assets

  • http://components.onlean.es/css/css/style.css
  • http://components.onlean.es/css/js/global.css
.ol-search {
input[type="text"] {
padding: 5px;
font-size: 17px;
border: 1px solid grey;
float: left;
width: 80%;
background: white;
border-radius: 10px 0px 0px 10px;
outline: none;
}
button {
float: left;
width: 20%;
padding: 5px;
background: #313a46;
color: white;
font-size: 17px;
border: 1px solid grey;
border-left: none;
border-radius: 0px 10px 10px 0px;
outline: none;
cursor: pointer;
&:hover {
background: #6a7a8f;
outline: none;
}
}
&::after {
content: "";
clear: both;
display: table;
outline: none;
}
}

SideBar

SideBar 

Utilizado en vistas desktop de todas las aplicaciones.

 

HTML

<div class="ol-sidebar p-0" id="ol-sidebar">
<div class="p-2 ol-logo">
<a href="/">
<img src="http://academy.onlean.es/themes/custom/serviconsulting/images/logoNegro.png"
class="ol-img"/>
<div class="d-inline ol-sideBar-tag">Application</div>
</a>
</div>
<div class="border-top my-3 m-2"></div>
<div class="pt-2 p-2 ol-switch">
<div class="d-inline ol-sideBar-app">aqui switch component</div>
</div>
<div class="border-top my-3 m-2"></div>
<ul class="ol-sidebar-nav-first d-inline-block nav">
<div class="sidebar-heading m-2">SECTION</div>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="fas fa-briefcase"></i>
About
</a>
</li>
<li class="nav-item">
<a href="#pageSubmenu" data-toggle="collapse" aria-expanded="false" class="nav-link dropdown-toggle">
<i class="fas fa-copy"></i>
Pages
</a>
</li>
<ul class="collapse" id="pageSubmenu">
<li class="nav-item ">
<a href="#">Page 1</a>
</li>
<li class="nav-item">
<a href="#">Page 2</a>
</li>
<li class="nav-item">
<a href="#">Page 3</a>
</li>
</ul>
</ul>
<div class="border-top my-3 m-2"></div>
<ul class="ol-sidebar-nav-second d-inline-block nav">
<div class="sidebar-heading m-2">SECTION</div>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="fas fa-image"></i>
Inicio
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="fas fa-question"></i>
FAQ
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="fas fa-paper-plane"></i>
Contact
</a>
</li>
</ul>
<div id="ol-sidebar-toggle" class="pt-3 text-center">
<div class="container-fluid">
<button type="button" id="sidebarCollapse" class="btn btn-secondary rounded-circle">
<i class="fa fa-chevron-left" aria-hidden="true"></i>
</button>
</div>
</div>
</div>

Assets

  • http://components.onlean.es/css/css/style.css
  • http://components.onlean.es/css/js/global.css
.ol-sidebar {
background-color: #313a46;
height: 100%;
width: 14rem !important;

* {
font-size: 14px;
color: white;
}

&.ol-sidebar-active {
width: 7rem !important;
text-align: center;

.ol-switch {
img {
display: block;
margin: auto;
}
}

.ol-logo {
.ol-img {
width: 100%;
height: auto;
}
}

ul {

li {
a {
i {
display: block;
}
}
}
}
}

.ol-logo {
font-size: 18px;

a {
&:hover {
text-decoration: none;
}
}

.ol-img {
width: 100px;
margin-right: 8px;
}
}

ul {
.sidebar-heading {
font-size: .65rem;
color: rgba(255, 255, 255, .3);
}

li {
a {
opacity: 0.7;

&:hover {
color: white;
opacity: 1;
}
}
}
}

}
// SIDEBAR TOGGLE

$(document).ready(function () {
$('#sidebarCollapse').on('click', function () {
$('#ol-sidebar').toggleClass('ol-sidebar-active');
$(this).find('i').toggleClass('fa-chevron-right');
});
});

Toggle

Toogle Switch 

HTML

<div>
<label class="switch">
<input type="checkbox" checked>
<span class="slider round"></span>
</label>
</div>

Assets

  • http://components.onlean.es/css/css/style.css
  • http://components.onlean.es/css/js/global.css
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}

.switch input {
opacity: 0;
width: 0;
height: 0;
}

.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}

.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}

input:checked + .slider {
background-color: #2196F3;
}

input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
border-radius: 34px;
font-family: "robotto-regular", Helvetica, sans-serif;
color: white;
font-size: 12px;
}

.slider.round:before {
border-radius: 50%;
}