"Autorizacion especial"
Bootstrap 3.3.0 Snippet by jordonez

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="col-md-12"> <div class="panel panel-primary"> <div class="panel-heading"> <h4 class="panel-title"> Datos Validación ID </h4> </div> <div class="panel-body"> <form class="form-horizontal"> <div class="row"> <div class="col-md-6"> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="textinput">Numero de Transacción</label> <div class="col-md-8"> <input id="textinput" name="textinput" type="text" placeholder="" class="form-control input-sm"> </div> </div> </div> <div class="col-md-6"> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="textinput">Dictamen</label> <div class="col-md-8"> <input id="textinput" name="textinput" type="text" placeholder="" class="form-control input-sm"> </div> </div> </div> </div> <hr /> <div class="row"> <div class="row"> <div class="col-md-4"></div> <div class="col-md-4"> <div class="table-responsive"> <table class="table table-responsive table-striped "> <thead> <tr> <th>Estado</th> <th>Exceptuar</th> </tr> </thead> <tr> <td class="col-md-8"> <div class="error-notice"> <div class="oaerror success"> Validacion<strong>OK</strong> </div> </div> </td> <td class="col-md-4 "> </td> </tr> <tr> <td class="col-md-8"> <div class="error-notice"> <div class="oaerror danger"> Requisitors <strong>NO</strong> </div> </div> </td> <td class="col-md-4 "> <div class="material-switch "> <input id="someSwitchOptionSuccess2" name="someSwitchOption002" type="checkbox" /> <label for="someSwitchOptionSuccess2" class="label-success "></label> </div> </td> </tr> <tr> <td class="col-md-8"> <div class="error-notice"> <div class="oaerror success"> Informe <strong>OK</strong> </div> </div> </td> <td class="col-md-4 "> </td> </tr> <tr> <td class="col-md-8"> <div class="error-notice"> <div class="oaerror success"> Score <strong>OK</strong> </div> </div> </td> <td class="col-md-4 "> </td> </tr> <tr> <td class="col-md-8"> <div class="error-notice"> <div class="oaerror danger"> Limite <strong>NO</strong> </div> </div> </td> <td class="col-md-4 "> <div class="material-switch "> <input id="someSwitchOptionSuccess5" name="someSwitchOption005" type="checkbox" /> <label for="someSwitchOptionSuccess5" class="label-success "></label> </div> </td> </tr> </table> </div> </div> <div class="col-md-4"></div> </div> </div> <hr /> <div class="text-center"> <div class="btn-group" role="group" aria-label="..."> <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-arrow-left" aria-hidden="true"></span> Atras</button> <button type="button" class="btn btn-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Aturoización Especial</button> <button type="button" class="btn btn-danger"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span> Cancela</button> </div> </div> </form> </div> </div> </div> </div>
hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; border-color:#428bca; margin: 1em 0; padding: 0; } .material-switch > input[type="checkbox"] { display: none; } .material-switch > label { cursor: pointer; height: 0px; position: relative; width: 40px; } .material-switch > label::before { background: rgb(0, 0, 0); box-shadow: inset 0px 0px 10px rgba(0, 0, 0, 0.5); border-radius: 8px; content: ''; height: 16px; margin-top: -8px; position:absolute; opacity: 0.3; transition: all 0.4s ease-in-out; width: 40px; } .material-switch > label::after { background: rgb(255, 255, 255); border-radius: 16px; box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3); content: ''; height: 24px; left: -4px; margin-top: -8px; position: absolute; top: -4px; transition: all 0.3s ease-in-out; width: 24px; } .material-switch > input[type="checkbox"]:checked + label::before { background: inherit; opacity: 0.5; } .material-switch > input[type="checkbox"]:checked + label::after { background: inherit; left: 20px; } .error-notice { margin: 2px 2px; /* Making sure to keep some distance from all side */ } .oaerror { width: 100%; /* Configure it fit in your design */ margin: 0 auto; /* Centering Stuff */ background-color: #FFFFFF; /* Default background */ padding: 10px; border: 1px solid #eee; border-left-width: 2px; border-radius: 3px; margin: 0 auto; font-family: 'Open Sans', sans-serif; font-size: 12px; } .danger { border-left-color: #d9534f; /* Left side border color */ background-color: rgba(217, 83, 79, 0.1); /* Same color as the left border with reduced alpha to 0.1 */ } .danger strong { color: #d9534f; } .warning { border-left-color: #f0ad4e; background-color: rgba(240, 173, 78, 0.1); } .warning strong { color: #f0ad4e; } .info { border-left-color: #5bc0de; background-color: rgba(91, 192, 222, 0.1); } .info strong { color: #5bc0de; } .success { border-left-color: #2b542c; background-color: rgba(43, 84, 44, 0.1); } .success strong { color: #2b542c; }

Related: See More


Questions / Comments: