Skip to content

Instantly share code, notes, and snippets.

@sumitridhal

sumitridhal/angular-curd.markdown

Last active April 28, 2017 06:11
Show Gist options
  • Save sumitridhal/9b8a4504c5120d4c0ffbf37cbee79e17 to your computer and use it in GitHub Desktop.
Save sumitridhal/9b8a4504c5120d4c0ffbf37cbee79e17 to your computer and use it in GitHub Desktop.
Download ZIP
Angular CURD
Raw
index.html
<div class="container" ng-app="App" ng-controller="ctrl"
style="position: absolute; left: 7%;">
<section class="wrapper site-min-height">
<!-- page start-->
<section class="panel">
<!-- header -->
<div class="bg">
<div class="panel-body">
<div class="row">
<div class="col-xs-2">
<div class="panel-body text-center">
<div class="pro-thumb">
<img src="https://angular.io/resources/images/logos/angular/angular.svg" alt="">
</div>
</div>
</div>
<div class="col-xs-8">
<div class="degree">
Angular
</div>
</div>
</div>
</div>
</div>
<!-- header end -->
<header class="panel-heading">
{{appHeadline}}
</header>
<div class="panel-body">
<div class="adv-table editable-table ">
<div class="clearfix">
<div class="btn-group">
<button id="editable-sample_new" class="btn btn-success" ng-click="addToggle()">
Add New <i class="fa fa-plus"></i>
</button>
</div>
<div class="btn-group pull-right">
<button class="btn dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Tools <i class="fa fa-angle-down"></i>
</button>
<ul class="dropdown-menu pull-right">
<li><a href="#">Print</a></li>
<li><a href="#">Save as PDF</a></li>
<li><a href="#">Export to Excel</a></li>
</ul>
</div>
</div>
<div class="space15"></div>
<div class="table-responsive" tabindex="1" style="overflow: hidden; outline: none;">
<div id="editable-sample_wrapper" class="dataTables_wrapper form-inline" role="grid">
<div class="row">
<div class="col-lg-6">
<div id="editable-sample_length" class="dataTables_length"><label>
<select size="1" class="form-control xsmall" ng-options="option.name for option in data.availableOptions track by option.id"
ng-model="data.limit"></select>
records per page</label></div>
</div>
<div class="col-lg-6">
<div class="dataTables_filter" id="editable-sample_filter"><label>Search: <input type="text" class="form-control medium" ng-model="search"></label></div>
</div>
</div>
<table class="table table-striped table-hover table-bordered dataTable" id="editable-sample" aria-describedby="editable-sample_info">
<thead>
<tr role="row">
<th class="sorting_disabled" role="columnheader" rowspan="1" colspan="1" aria-label="Username" style="width: 179px;">Username</th>
<th class="sorting" role="columnheader" tabindex="0" aria-controls="editable-sample" rowspan="1" colspan="1" aria-label="Full Name: activate to sort column ascending" style="width: 263px;">Full Name</th>
<th class="sorting" role="columnheader" tabindex="0" aria-controls="editable-sample" rowspan="1" colspan="1" aria-label="Points: activate to sort column ascending" style="width: 119px;">Points</th>
<th class="sorting" role="columnheader" tabindex="0" aria-controls="editable-sample" rowspan="1" colspan="1" aria-label="Notes: activate to sort column ascending" style="width: 175px;">Notes</th>
<th class="sorting" role="columnheader" tabindex="0" aria-controls="editable-sample" rowspan="1" colspan="1" aria-label="Edit: activate to sort column ascending" style="width: 85px;"></th>
</tr>
</thead>
{{newval}}
<tbody role="alert" aria-live="polite" aria-relevant="all">
<tr ng-show="addIf" add-list=""></tr>
<tr ng-repeat="item in items| filter:search | limitTo: data.limit.value as filteredData track by $index " td-row="item" index="{{$index}}" filter-by="'search'">
</tr>
</tbody>
</table>
<div class="row">
<div class="col-lg-6">
<div class="dataTables_info" id="editable-sample_info">Showing 1 to {{ filteredData.length }} of {{listLength}} entries</div>
</div>
<div class="col-lg-6">
<div class="dataTables_paginate paging_bootstrap pagination">
<ul>
<li ng-class="{disabled: currentPage == 0}">
<a href ng-click="prevPage()">« Prev</a>
</li>
<li ng-repeat="n in range(filteredData.length)" ng-class="{active: n == currentPage}" ng-click="setPage()">
<a href ng-bind="n + 1">1</a>
</li>
<li ng-class="{disabled: currentPage == pagedItems.length - 1}">
<a href ng-click="nextPage()">Next »</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- page end-->
</section>
</div>
<div id="particles-js"></div>
Raw
script.js
var app = angular.module('App', []);
/**
* @name ctrl
* @desc ctrl Controller
**/
app.controller('ctrl', function($scope, $filter) {
$scope.appHeadline = "Angular 1.4x CURD Application";
$scope.addIf = false;
//localStorage.clear();
$scope.saved = localStorage.getItem('items');
$scope.items = ($scope.saved !== null) ? JSON.parse($scope.saved) : [{
username: 'Jondi Rose',
fullname: 'Alfred Jond Rose',
point: 1234,
notes: 'super user'
}, {
username: 'Dulal',
fullname: 'Jonathan Smith',
point: 23,
notes: 'new user'
}];
localStorage.setItem('items', JSON.stringify($scope.items));
$scope.listLength = $scope.items.length;
$scope.data = {
availableOptions: [{
id: '1',
name: '5',
value: 5
}, {
id: '2',
name: '10',
value: 10
}, {
id: '3',
name: '15',
value: 15
}, {
id: '4',
name: 'All',
value: $scope.listLength
}],
limit: {
id: '1',
name: '5',
value: 5
} //This sets the default value of the select in the ui
};
//$scope.sortingOrder = sortingOrder;
$scope.reverse = false;
$scope.filteredItems = [];
$scope.groupedItems = [];
$scope.itemsPerPage = $scope.data.limit;
$scope.pagedItems = [];
$scope.currentPage = 0;
/* $scope.$watch("[search , data.limit]", function(query) {
// $scope.filteredData = $filter("filter")($scope.items, query[0]);
//$scope.limitedData = $filter('limitTo')($scope.filteredData, query[1].value, 0);
});*/
/* $scope.groupToPages = function () {
$scope.pagedItems = [];
for (var i = 0; i < $scope.filteredData.length; i++) {
if (i % $scope.itemsPerPage === 0) {
$scope.pagedItems[Math.floor(i / $scope.itemsPerPage)] = [ $scope.filteredData[i] ];
} else {
$scope.pagedItems[Math.floor(i / $scope.itemsPerPage)].push($scope.filteredData[i]);
}
}
};*/
$scope.range = function(start, end) {
var ret = [];
if (!end) {
end = start;
start = 0;
}
if (end < $scope.data.limit.value) {
end = 1;
} else {
end = Math.ceil(end / $scope.data.limit.value)
}
for (var i = start; i < end; i++) {
ret.push(i);
}
return ret;
};
$scope.prevPage = function() {
if ($scope.currentPage > 0) {
$scope.currentPage--;
}
};
$scope.nextPage = function() {
if ($scope.currentPage < $scope.pagedItems.length - 1) {
$scope.currentPage++;
}
};
$scope.setPage = function() {
$scope.currentPage = this.n;
};
$scope.addToggle = function() {
$scope.addIf = !($scope.addIf);
};
$scope.$on('addItem', function(event, data) {
$scope.items.push(data);
localStorage.setItem('items', JSON.stringify($scope.items));
$scope.addIf = !($scope.addIf);
});
$scope.$on('update', function(event, data, index) {
angular.copy(data, $scope.items[index]);
localStorage.setItem('items', JSON.stringify($scope.items));
});
$scope.$on('deleteItem', function(event, index) {
$scope.items.splice(index, 1);
localStorage.setItem('items', JSON.stringify($scope.items));
});
$scope.$on('cancel', function(event) {
$scope.addIf = !($scope.addIf);
});
});
/**
* @name addList
* @desc <add-list> Directive
*/
function addList() {
return {
scope: {
item: '=addList',
addIf: '=',
addItem: '&',
cancel: '&'
},
restrict: 'EA',
template: '<td class="sorting_1"><input type="text" class="form-control small" ng-model="newval.username" value=""></td><td class=""><input type="text" class="form-control small" value="" ng-model="newval.fullname"></td><td class=""><input type="text" class="form-control small" value="" ng-model="newval.point"></td><td class=""><input type="text" class="form-control small" value="" ng-model="newval.notes"></td><td class=""><button class="btn btn-success btn-xs edit" ng-click="addItem(newval)"><i class="fa fa-user-plus"></i></button><button class="btn btn-danger btn-xs cancel" ng-click="cancel()"><i class="fa fa-times"></i></button></td>',
transclude: true,
controller: function($scope, $element, $transclude) {
$scope.addItem = function(data) {
$scope.$emit('addItem', data);
$scope.newval = {}; //clear the input after adding
};
$scope.cancel = function() {
$scope.$emit('cancel');
$scope.newval = {}; //clear the input on cancel
}
}
};
}
app.directive('addList', addList);
/**
* @name tdRow
* @desc <td-row> Directive
*/
function tdRow() {
var link = function($scope, $element, $attrs) {};
var controller = function($scope, $element, $transclude) {
$scope.edit = false;
$scope.editItem = function(oldData) {
$scope.edit = angular.copy(oldData);
$scope.mode = "edit";
}
$scope.deleteItem = function(index) {
$scope.$emit('deleteItem', index);
}
$scope.cancelUpdateItem = function(index) {
$scope.mode = "default";
}
$scope.updateItem = function(data, index) {
$scope.$emit('update', data, index);
$scope.mode = "default";
}
}
return {
scope: {
item: '=tdRow',
index: '@',
editItem: '&',
updateItem: '&',
deleteItem: '&',
filterBy: '='
},
restrict: 'EA',
template: '<td class="sorting_1" ng-switch="mode"><input type="text" class="form-control small" ng-switch-when="edit" id="edit" ng-model="edit.username"><span ng-switch-default id="item.username">{{item.username}}</span></td><td ng-switch="mode"><input type="text" class="form-control small" ng-switch-when="edit" id="edit" ng-model="edit.fullname"><span ng-switch-default id="item.fullname">{{item.fullname}}</span></td><td ng-switch="mode"><input type="text" class="form-control small" ng-switch-when="edit" id="edit" ng-model="edit.point"><span ng-switch-default id="item.point">{{item.point}}</span></td><td ng-switch="mode"><input type="text" class="form-control small" ng-switch-when="edit" id="edit" ng-model="edit.notes"><span ng-switch-default id="item.notes">{{item.notes}}</span></td><td ng-switch="mode"><button class="btn btn-success btn-xs edit" ng-switch-when="edit" ng-click="updateItem(edit, index)"><i class="fa fa-floppy-o"></i></button><button class="btn btn-success btn-xs" ng-switch-default ng-click="editItem(item)"><i class="fa fa-pencil-square-o "></i></button><button class="btn btn-danger btn-xs edit" ng-switch-when="edit" ng-click="cancelUpdateItem(index)"><i class="fa fa-times"></i></button><button class="btn btn-danger btn-xs" ng-switch-default class="edit" ng-click="deleteItem(index)"><i class="fa fa-trash-o"></i></button></td>',
transclude: true,
controller: controller,
}
}
app.directive('tdRow', tdRow);
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.1/angular.min.js"></script>
Raw
style.css
/* Import fonts */
@import url(//fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic);
/* animation */
@keyframes animate_background {
from {
background-position: 10px 10px;
}
to {
background-position: 100px -200px;
}
}
/* */
body {
color: #797979;
background: #f1f2f7;
font-family: 'Open Sans', sans-serif;
padding: 0px !important;
margin: 0px !important;
font-size: 13px;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
}
ul li {
list-style: none;
}
a,
a:hover,
a:focus {
text-decoration: none;
outline: none;
}
::selection {
background: #FF6C60;
color: #fff;
}
::-moz-selection {
background: #FF6C60;
color: #fff;
}
#container {
width: 100%;
height: 100%;
}
/*main content*/
#main-content {
margin-left: 210px;
}
.header,
.footer {
min-height: 60px;
padding: 0 15px;
}
.header {
position: fixed;
left: 0;
right: 0;
z-index: 1002;
}
.white-bg {
background: #fff;
border-bottom: 1px solid #f1f2f7;
}
.wrapper {
display: inline-block;
margin-top: 60px;
padding: 15px;
width: 100%;
}
a.logo {
font-size: 21px;
color: #2e2e2e;
float: left;
margin-top: 15px;
text-transform: uppercase;
}
a.logo:hover,
a.logo:focus {
text-decoration: none;
outline: none;
}
a.logo span {
color: #FF6C60;
}
/*product post*/
.post-wrap aside {
display: table-cell;
float: none;
height: 100%;
padding: 0;
vertical-align: top;
}
.pro-box {
border-collapse: collapse;
border-spacing: 0;
display: table;
table-layout: fixed;
width: 100%;
}
.post-info {
position: relative;
}
.arrow-pro.right:after {
border-left-color: #FFFFFF;
border-right-width: 0;
top: 85px;
content: " ";
}
.arrow-pro.left:after {
border-right-color: #FFFFFF;
border-left-width: 0;
top: 80px;
content: " ";
}
.arrow-pro.left {
left: -8px;
}
.arrow-pro:after {
border-width: 7px;
content: "";
}
.arrow-pro,
.arrow-pro:after {
border-color: rgba(0, 0, 0, 0);
border-style: solid;
display: block;
height: 0;
position: absolute;
width: 0;
right: -5px;
}
.post-highlight.yellow {
background: #f8d347;
border-radius: 0px 4px 4px 0px;
-webkit-border-radius: 0px 4px 4px 0px;
}
.post-highlight.terques {
background: #41cac0;
border-radius: 4px 0px 0px 04px;
-webkit-border-radius: 4px 0px 0px 04px;
}
.post-info h1 {
margin: 0;
font-size: 18px;
color: #a19899;
font-weight: 300;
}
.post-highlight.terques h2 {
font-size: 16px;
color: #fff;
font-style: italic;
padding: 0 20px;
line-height: 22px;
margin: 0;
font-weight: 300;
}
.post-highlight.terques h2 span,
.post-highlight.terques h2 a {
color: #92faf3;
}
.post-info h1 strong {
text-transform: uppercase;
color: #937b7b;
}
.post-info .desk {
display: inline-block;
}
.post-info .desk h3 {
font-size: 16px;
}
.post-info .desk.yellow h3 {
color: #f8d347;
}
.post-btn {}
.post-btn a {
float: left;
margin-right: 8px;
font-size: 18px;
color: #9a9a9a;
}
.post-btn a:hover {
color: #727272;
}
.pro-thumb {
text-align: center;
display: inline-block;
border-radius: 50%;
-webkit-border-radius: 50%;
border: 10px solid rgba(255, 255, 255, 0.4);
}
.pro-thumb img {
text-align: center;
width: 112px;
height: 112px;
border-radius: 50%;
-webkit-border-radius: 50%;
}
.v-align {
vertical-align: middle !important;
}
.twite h1 {
margin: 50px 0;
}
/*follower*/
.follower {
background: #01a89e;
color: #fff;
text-align: center;
border-radius: 4px 4px 0 0;
-webkit-border-radius: 4px 4px 0 0;
}
.follower-foot {
padding: 8px 5px 5px 5px;
color: #757575;
border-radius: 0 0 4px 4px;
-webkit-border-radius: 0 0 4px 4px;
font-weight: 300;
}
.follower-foot ul {
padding: 0;
margin: 0;
}
.follower-foot ul li {
display: inline-block;
text-align: center;
width: 48%;
line-height: normal;
}
.follower-foot ul li h5 {
margin: 5px 0 0 0;
}
.follower h4 {
margin: 0 0 10px 0;
font-size: 15px;
font-weight: 300;
}
.follow-ava {
border-radius: 50%;
-webkit-border-radius: 50%;
border: 5px solid #18b2a6;
display: inline-block;
}
.follower img {
border-radius: 50%;
-webkit-border-radius: 50%;
width: 62px;
height: 62px;
/*display: inline-block;*/
}
/**/
.bg {
background: #47cf73;
background-image: linear-gradient(33deg, rgb(25, 165, 102) 0%, rgb(12, 109, 193) 100%);
border-radius: 4px 4px 0 0;
-webkit-border-radius: 4px 4px 0 0;
color: #fff;
text-align: center;
font-size: 16px;
font-weight: 300;
}
.bg i {
font-size: 60px;
display: block;
}
.bg .degree {
font-size: 70px;
margin-top: 30px;
font-weight: 300;
}
.bg .panel-body {
background-position: center top 20px;
background-repeat: no-repeat;
animation: animate_background 8s linear 0s infinite
}
.category {
padding: 15px 0;
color: #74829C;
}
.category ul {
padding: 0;
margin: 0;
display: inline-block;
width: 100%;
}
.category ul li {
display: inline-block;
width: 32%;
text-align: center;
border-right: 1px solid #e6e6e6;
display: inline-block;
}
.category ul li h5 {
margin: 0 0 5px 0;
text-transform: uppercase;
font-weight: 300;
}
.category ul li a {}
.category ul li:last-child {
border-right: none;
}
/*fontawesome*/
.fontawesome-icon-list h2 {
margin-top: 0;
font-size: 20px;
font-weight: 300;
}
.fontawesome-icon-list .col-sm-4,
.fontawesome-icon-list .col-md-3,
.fontawesome-icon-list .col-xs-6 {
margin-bottom: 10px;
}
.fontawesome-icon-list .page-header {
border-bottom: 1px solid #C9CDD7;
}
.fontawesome-icon-list a {
color: #797979;
}
.fontawesome-icon-list a:hover {
color: #35404D;
}
.fontawesome-icon-list i {
font-size: 16px;
padding-right: 10px;
}
#web-application,
#text-editor,
#directional,
#video-player,
#brand,
#medical,
#currency {
margin-top: 10px;
}
/*table*/
.table-advance tr td {
vertical-align: middle !important;
}
.no-border {
border-bottom: none;
}
.dataTables_length,
.dataTables_filter {
padding: 15px;
}
.dataTables_info {
padding: 0 15px;
}
.dataTables_filter {
float: right;
}
.dataTables_length select {
width: 65px;
padding: 5px 8px;
}
.dataTables_length label,
.dataTables_filter label {
font-weight: 300;
}
.dataTables_filter label {
width: 100%;
}
.dataTables_filter label input {
width: 78%;
}
.border-top {
border-top: 1px solid #ddd;
}
.dataTables_paginate.paging_bootstrap.pagination li {
float: left;
margin: 0 1px;
border: 1px solid #ddd;
border-radius: 3px;
-webkit-border-radius: 3px;
}
.dataTables_paginate.paging_bootstrap.pagination li.disabled a {
color: #c7c7c7;
}
.dataTables_paginate.paging_bootstrap.pagination li a {
color: #797979;
padding: 5px 10px;
display: inline-block;
}
.dataTables_paginate.paging_bootstrap.pagination li:hover a,
.dataTables_paginate.paging_bootstrap.pagination li.active a {
color: #797979;
background: #eee;
border-radius: 3px;
-webkit-border-radius: 3px;
}
.dataTables_paginate.paging_bootstrap.pagination {
float: right;
margin-top: -5px;
margin-bottom: 15px;
}
.dataTable tr:last-child {
border-bottom: 1px solid #ddd;
}
/*calendar*/
.has-toolbar.fc {
margin-top: 50px;
}
.fc-header-title {
display: inline-block;
margin-top: -50px;
vertical-align: top;
}
.fc-view {
margin-top: -50px;
overflow: hidden;
width: 100%;
}
.fc-state-default,
.fc-state-default .fc-button-inner {
background: #F3F3F3 !important;
border-color: #DDDDDD;
border-style: none solid;
color: #646464;
}
.fc-state-active,
.fc-state-active .fc-button-inner,
.fc-state-hover,
.fc-state-hover .fc-button-inner {
background: #FF6C60 !important;
color: #fff !important;
}
.fc-event-skin {
background-color: #6883a3 !important;
border-color: #6883a3 !important;
color: #FFFFFF !important;
}
.fc-grid th {
height: 30px;
line-height: 30px;
text-align: center;
background: #F3F3F3 !important;
}
.fc-header-title h2 {
font-size: 20px !important;
color: #C8CCD7;
font-weight: 300;
}
.external-event {
cursor: move;
display: inline-block !important;
margin-bottom: 6px !important;
margin-right: 6px !important;
padding: 8px;
}
#external-events p input[type="checkbox"] {
margin: 0;
}
.drg-event-title {
font-weight: 300;
margin-top: 0;
margin-bottom: 15px;
border-bottom: 1px solid #ddd;
padding-bottom: 10px;
}
.fc-content .fc-event {
border-radius: 4px;
webkit-border-radius: 4px;
padding: 4px 6px;
}
.fc-corner-left {
border-radius: 4px 0 0 4px;
-webkit-border-radius: 4px 0 0 4px;
}
.fc-corner-right {
border-radius: 0 4px 4px 0;
-webkit-border-radius: 0 4px 4px 0;
}
.drp-rmv {
padding-top: 10px;
margin-top: 10px;
}
/*button*/
.btn-row {
margin-bottom: 10px;
}
/*tabs*/
.tab-head {
background: #7087a3;
display: inline-block;
width: 100%;
margin-top: 60px;
}
.tab-container {
margin-top: 10px;
}
.tab-head .nav-tabs > li > a {
border-radius: 0;
margin-right: 1px;
color: #fff;
}
.tab-head .nav-tabs > li.active > a,
.tab-head .nav-tabs > li > a:hover,
.tab-head .nav-tabs > li.active > a:hover,
.tab-head .nav-tabs > li.active > a:focus {
background-color: #f1f2f7;
border-color: #f1f2f7;
color: #797979;
}
/*form validation*/
.cmxform .form-group label.error {
display: inline;
margin: 5px 0;
color: #B94A48;
font-weight: 400;
}
input:focus:invalid:focus,
textarea:focus:invalid:focus,
select:focus:invalid:focus,
.cmxform .form-group input.error,
.cmxform .form-group textarea.error {
border-color: #B94A48 !important;
}
#signupForm label.error {
display: inline;
margin: 5px 0px;
width: auto;
color: #B94A48;
}
.checkbox,
.checkbox:hover,
.checkbox:focus {
border: none;
}
/*form wizard*/
.stepy-tab {
text-align: center;
}
.stepy-tab ul {
display: inline-block;
}
.stepy-tab ul li {
float: left;
}
.step legend {
border: none;
}
.button-back {
float: left;
}
.button-next,
.finish {
float: right;
}
.button-back,
.button-next,
.finish {
cursor: pointer;
text-decoration: none;
}
.step {
clear: left;
}
.step label {
display: block;
}
.stepy-titles li {
color: #757575;
cursor: pointer;
float: left;
margin: 10px 15px;
}
.stepy-titles li span {
display: block;
}
.stepy-titles li.current-step div {
color: #fff;
cursor: auto;
background: #A9D86E;
border-radius: 50%;
-webkit-border-radius: 50%;
width: 100px;
height: 100px;
line-height: 100px;
}
.stepy-titles li div {
font-size: 16px;
font-weight: 300;
background: #eee;
border-radius: 50%;
-webkit-border-radius: 50%;
width: 100px;
height: 100px;
line-height: 100px;
}
/*anchor*/
a {
color: #667fa0;
}
a:hover {
color: #2A3542;
}
/*panel*/
.panel {
border: none;
box-shadow: none;
}
.panel-heading {
border-color: #eff2f7;
font-size: 16px;
font-weight: 300;
}
.panel-title {
color: #2A3542;
font-size: 14px;
font-weight: 400;
margin-bottom: 0;
margin-top: 0;
font-family: 'Open Sans', sans-serif;
}
/*label*/
.label {
padding: 0.5em 0.8em;
}
.label-default {
background-color: #a1a1a1;
}
.label-primary {
background-color: #59ace2;
}
.label-success {
background-color: #A9D86E;
}
.label-info {
background-color: #8175c7;
}
.label-warning {
background-color: #FCB322;
}
.label-danger {
background-color: #FF6C60;
}
.label-inverse {
background-color: #344860;
}
/*text color*/
.text-danger {
color: #FF6C60;
}
.text-muted {
color: #a1a1a1;
}
.text-primary {
color: #59ace2;
}
.text-warning {
color: #FCB322;
}
.text-success {
color: #A9D86E;
}
.text-info {
color: #8175c7;
}
.form-control {
color: #777 !important;
}
/*modal*/
.modal-content {
box-shadow: none;
border: none;
}
.modal-header {
background: #00A8B3;
color: #fff;
border-radius: 5px 5px 0 0;
-webkit-border-radius: 5px 5px 0 0;
border-bottom: none;
}
.modal-header .close {
margin-top: 0;
}
/*text input*/
.form-control {
border: 1px solid #e2e2e4;
box-shadow: none;
color: #c2c2c2;
}
.form-control:focus,
#focusedInput {
border: 1px solid #517397;
box-shadow: none;
}
.form-horizontal .control-label {
font-weight: 300;
font-size: 14px;
text-align: left;
}
input,
textarea,
select,
button {
outline: none !important;
}
/*list*/
ul {
padding-left: 0;
}
/*button*/
.btn-default {
background-color: #bec3c7;
border-color: #bec3c7;
color: #fff;
}
.btn-default:hover,
.btn-default:focus,
.btn-default:active,
.btn-default.active,
.open .dropdown-toggle.btn-default {
background-color: #b0b5b9;
border-color: #b0b5b9;
color: #fff;
}
.btn-default:disabled:hover,
.btn-default:disabled:focus,
.btn-default:disabled:active {
color: #333;
}
.btn-primary,
.btn-primary.disabled,
.btn-primary[disabled],
.btn-primary.disabled.active,
.btn-primary.active[disabled] {
background-color: #41cac0;
border-color: #41cac0;
color: #FFFFFF;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.open .dropdown-toggle.btn-primary,
.btn-primary.disabled,
.btn-primary[disabled],
.btn-primary.disabled.active,
.btn-primary.active[disabled] {
background-color: #39b2a9;
border-color: #39b2a9;
color: #FFFFFF;
}
.btn-success {
background-color: #78CD51;
border-color: #78CD51;
color: #FFFFFF;
margin-right: 2px;
}
.btn-success:hover,
.btn-success:focus,
.btn-success:active,
.btn-success.active,
.open .dropdown-toggle.btn-success {
background-color: #6dbb4a;
border-color: #6dbb4a;
color: #FFFFFF;
}
.btn-info {
background-color: #58c9f3;
border-color: #58c9f3;
color: #FFFFFF;
}
.btn-info:hover,
.btn-info:focus,
.btn-info:active,
.btn-info.active,
.open .dropdown-toggle.btn-info {
background-color: #53bee6;
border-color: #53BEE6;
color: #FFFFFF;
}
.btn-warning {
background-color: #f1c500;
border-color: #f1c500;
color: #FFFFFF;
}
.btn-warning:hover,
.btn-warning:focus,
.btn-warning:active,
.btn-warning.active,
.open .dropdown-toggle.btn-warning {
background-color: #e4ba00;
border-color: #e4ba00;
color: #FFFFFF;
}
.btn-danger {
background-color: #ff6c60;
border-color: #ff6c60;
color: #FFFFFF;
}
.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active,
.btn-danger.active,
.open .dropdown-toggle.btn-danger {
background-color: #ec6459;
border-color: #ec6459;
color: #FFFFFF;
}
.btn-white {
box-shadow: none !important;
}
/*Rounded Button*/
.btn-round {
border-radius: 30px;
-webkit-border-radius: 30px;
}
/*shadow button*/
.btn-shadow.btn-default {
box-shadow: 0 4px #9c9c9c;
}
.btn-shadow.btn-primary {
box-shadow: 0 4px #29b392;
}
.btn-shadow.btn-success {
box-shadow: 0 4px #61a642;
}
.btn-shadow.btn-info {
box-shadow: 0 4px #1caadc;
}
.btn-shadow.btn-warning {
box-shadow: 0 4px #cab03f;
}
.btn-shadow.btn-danger {
box-shadow: 0 4px #d1595a;
}
/*dropdown shadow*/
.btn-group.open .dropdown-toggle,
.btn-white.active,
.btn:active,
.btn.active {
box-shadow: none;
}
/*dropdown select bg*/
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
background-color: #495d74;
color: #FFFFFF;
text-decoration: none;
}
/*split dropdown btn*/
.btn-white {
background-clip: padding-box;
background-color: #FFFFFF;
border-color: rgba(150, 160, 180, 0.3);
box-shadow: 0 -1px 1px rgba(0, 0, 0, 0.05) inset;
}
/*breadcrumbs*/
.breadcrumb {
background-color: #fff;
}
/*tab*/
.nav-tabs > li > a {
margin-right: 1px;
}
/*collapse*/
.panel-default > .panel-heading {
background-color: #FFFFFF;
border-color: #DDDDDD;
color: #797979;
}
/*table*/
.table thead > tr > th,
.table tbody > tr > th,
.table tfoot > tr > th,
.table thead > tr > td,
.table tbody > tr > td,
.table tfoot > tr > td {
padding: 10px;
}
.radio input[type="radio"],
.radio-inline input[type="radio"],
.checkbox input[type="checkbox"],
.checkbox-inline input[type="checkbox"] {
margin-left: 0;
position: static;
}
Raw
styles
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
@sumitridhal
Copy link
Author

title

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment