payment receipt

This bootstrap snippet called "payment receipt" was created to help web designers,
front-end developers and back-end developer save time. Use it in your project and build your app faster,
You can also download the HTML, CSS, and JS code
tags: receipt

This is the HTML code for this bootstrap snippet

Copy, paste, change, customize and run the following HTML code to get a result like the one shown in the preview tab

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
<div class="row">
		<div class="col-sm-10 col-sm-offset-1">
			<div class="widget-box">
				<div class="widget-header widget-header-large">
					<h3 class="widget-title grey lighter">
						<i class="ace-icon fa fa-leaf green"></i>
						Bootdey receipt
					</h3>

					<div class="widget-toolbar no-border invoice-info">
						<span class="invoice-info-label">Invoice:</span>
						<span class="red">#121212</span>

						<br>
						<span class="invoice-info-label">Date:</span>
						<span class="blue">04/04/2014</span>
					</div>

					<div class="widget-toolbar hidden-480">
						<a href="#">
							<i class="ace-icon fa fa-print"></i>
						</a>
					</div>
				</div>

				<div class="widget-body">
					<div class="widget-main padding-24">
						<div class="row">
							<div class="col-sm-6">
								<div class="row">
									<div class="col-xs-11 label label-lg label-info arrowed-in arrowed-right">
										<b>Company Info</b>
									</div>
								</div>

								<div>
									<ul class="list-unstyled spaced">
										<li>
											<i class="ace-icon fa fa-caret-right blue"></i>Street, City
										</li>

										<li>
											<i class="ace-icon fa fa-caret-right blue"></i>Zip Code
										</li>

										<li>
											<i class="ace-icon fa fa-caret-right blue"></i>State, Country
										</li>

										<li>
											<i class="ace-icon fa fa-caret-right blue"></i>
Phone:
											<b class="red">111-111-111</b>
										</li>

										<li class="divider"></li>

										<li>
											<i class="ace-icon fa fa-caret-right blue"></i>
											Paymant Info
										</li>
									</ul>
								</div>
							</div><!-- /.col -->

							<div class="col-sm-6">
								<div class="row">
									<div class="col-xs-11 label label-lg label-success arrowed-in arrowed-right">
										<b>Customer Info</b>
									</div>
								</div>

								<div>
									<ul class="list-unstyled  spaced">
										<li>
											<i class="ace-icon fa fa-caret-right green"></i>Street, City
										</li>

										<li>
											<i class="ace-icon fa fa-caret-right green"></i>Zip Code
										</li>

										<li>
											<i class="ace-icon fa fa-caret-right green"></i>State, Country
										</li>

										<li class="divider"></li>

										<li>
											<i class="ace-icon fa fa-caret-right green"></i>
											Contact Info
										</li>
									</ul>
								</div>
							</div><!-- /.col -->
						</div><!-- /.row -->

						<div class="space"></div>

						<div>
							<table class="table table-striped table-bordered">
								<thead>
									<tr>
										<th class="center">#</th>
										<th>Product</th>
										<th class="hidden-xs">Description</th>
										<th class="hidden-480">Discount</th>
										<th>Total</th>
									</tr>
								</thead>

								<tbody>
									<tr>
										<td class="center">1</td>

										<td>
											<a href="#">google.com</a>
										</td>
										<td class="hidden-xs">
											1 year domain registration
										</td>
										<td class="hidden-480"> --- </td>
										<td>$10</td>
									</tr>

									<tr>
										<td class="center">2</td>

										<td>
											<a href="#">yahoo.com</a>
										</td>
										<td class="hidden-xs">
											5 year domain registration
										</td>
										<td class="hidden-480"> 5% </td>
										<td>$45</td>
									</tr>

									<tr>
										<td class="center">3</td>
										<td>Hosting</td>
										<td class="hidden-xs"> 1 year basic hosting </td>
										<td class="hidden-480"> 10% </td>
										<td>$90</td>
									</tr>

									<tr>
										<td class="center">4</td>
										<td>Design</td>
										<td class="hidden-xs"> Theme customization </td>
										<td class="hidden-480"> 50% </td>
										<td>$250</td>
									</tr>
								</tbody>
							</table>
						</div>

						<div class="hr hr8 hr-double hr-dotted"></div>

						<div class="row">
							<div class="col-sm-5 pull-right">
								<h4 class="pull-right">
									Total amount :
									<span class="red">$395</span>
								</h4>
							</div>
							<div class="col-sm-7 pull-left"> Extra Information </div>
						</div>

						<div class="space-6"></div>
						<div class="well">
							Thank you for choosing Ace Company products.
We believe you will be satisfied by our services.
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

This is the CSS code for this bootstrap snippet

Copy, paste, change, customize and run the following CSS code to get a result Like the one shown in the preview

body{margin-top:20px;
background:#eee;
}
.label.arrowed-in-right,
.label.arrowed-right {
    margin-right: 5px
}

.label.arrowed,
.label.arrowed-in {
    margin-left: 5px
}

label.arrowed,
.label.arrowed-in {
    position: relative;
    z-index: 1
}

.label.arrowed-in:before,
.label.arrowed:before {
    display: inline-block;
    content: "";
    position: absolute;
    top: 0;
    z-index: -1;
    border: 1px solid transparent;
    border-right-color: #ABBAC3
}

.label.arrowed-in:before {
    border-color: #ABBAC3 #ABBAC3 #ABBAC3 transparent
}

.label.arrowed-in-right,
.label.arrowed-right {
    position: relative;
    z-index: 1
}

.label.arrowed-in-right:after,
.label.arrowed-right:after {
    display: inline-block;
    content: "";
    position: absolute;
    top: 0;
    z-index: -1;
    border: 1px solid transparent;
    border-left-color: #ABBAC3
}

label.arrowed,
.label.arrowed-in {
    position: relative;
    z-index: 1
}

.label.arrowed-in:before,
.label.arrowed:before {
    display: inline-block;
    content: "";
    position: absolute;
    top: 0;
    z-index: -1;
    border: 1px solid transparent;
    border-right-color: #ABBAC3
}

.label.arrowed-in:before {
    border-color: #ABBAC3 #ABBAC3 #ABBAC3 transparent
}

.label.arrowed-in-right,
.label.arrowed-right {
    position: relative;
    z-index: 1
}

.label.arrowed-in-right:after,
.label.arrowed-right:after {
    display: inline-block;
    content: "";
    position: absolute;
    top: 0;
    z-index: -1;
    border: 1px solid transparent;
    border-left-color: #ABBAC3
}

.label.arrowed-in-right:after {
    border-color: #ABBAC3 transparent #ABBAC3 #ABBAC3
}

.label-info.arrowed:before {
    border-right-color: #3A87AD
}

.label-info.arrowed-in:before {
    border-color: #3A87AD #3A87AD #3A87AD transparent
}

.label-info.arrowed-right:after {
    border-left-color: #3A87AD
}

.label-info.arrowed-in-right:after {
    border-color: #3A87AD transparent #3A87AD #3A87AD
}

.label-primary.arrowed:before {
    border-right-color: #428BCA
}

.label-primary.arrowed-in:before {
    border-color: #428BCA #428BCA #428BCA transparent
}

.label-primary.arrowed-right:after {
    border-left-color: #428BCA
}

.label-primary.arrowed-in-right:after {
    border-color: #428BCA transparent #428BCA #428BCA
}

.label-success.arrowed:before {
    border-right-color: #82AF6F
}

.label-success.arrowed-in:before {
    border-color: #82AF6F #82AF6F #82AF6F transparent
}

.label-success.arrowed-right:after {
    border-left-color: #82AF6F
}

.label-success.arrowed-in-right:after {
    border-color: #82AF6F transparent #82AF6F #82AF6F
}

.label-warning.arrowed:before {
    border-right-color: #F89406
}

.label-danger.arrowed:before,
.label-important.arrowed:before {
    border-right-color: #D15B47
}

.label-warning.arrowed-in:before {
    border-color: #F89406 #F89406 #F89406 transparent
}

.label-warning.arrowed-right:after {
    border-left-color: #F89406
}

.label-danger.arrowed-right:after,
.label-important.arrowed-right:after {
    border-left-color: #D15B47
}

.label-warning.arrowed-in-right:after {
    border-color: #F89406 transparent #F89406 #F89406
}

.label-important.arrowed-in:before {
    border-color: #D15B47 #D15B47 #D15B47 transparent
}

.label-important.arrowed-in-right:after {
    border-color: #D15B47 transparent #D15B47 #D15B47
}

.label-danger.arrowed-in:before {
    border-color: #D15B47 #D15B47 #D15B47 transparent
}

.label-danger.arrowed-in-right:after {
    border-color: #D15B47 transparent #D15B47 #D15B47
}

.label-inverse.arrowed:before {
    border-right-color: #333
}

.label-inverse.arrowed-in:before {
    border-color: #333 #333 #333 transparent
}

.label-inverse.arrowed-right:after {
    border-left-color: #333
}

.label-inverse.arrowed-in-right:after {
    border-color: #333 transparent #333 #333
}

.label-pink.arrowed:before {
    border-right-color: #D6487E
}

.label-pink.arrowed-in:before {
    border-color: #D6487E #D6487E #D6487E transparent
}

.label-pink.arrowed-right:after {
    border-left-color: #D6487E
}

.label-pink.arrowed-in-right:after {
    border-color: #D6487E transparent #D6487E #D6487E
}

.label-purple.arrowed:before {
    border-right-color: #9585BF
}

.label-purple.arrowed-in:before {
    border-color: #9585BF #9585BF #9585BF transparent
}

.label-purple.arrowed-right:after {
    border-left-color: #9585BF
}

.label-purple.arrowed-in-right:after {
    border-color: #9585BF transparent #9585BF #9585BF
}

.label-yellow.arrowed:before {
    border-right-color: #FEE188
}

.label-yellow.arrowed-in:before {
    border-color: #FEE188 #FEE188 #FEE188 transparent
}

.label-yellow.arrowed-right:after {
    border-left-color: #FEE188
}

.label-yellow.arrowed-in-right:after {
    border-color: #FEE188 transparent #FEE188 #FEE188
}

.label-light.arrowed:before {
    border-right-color: #E7E7E7
}

.label-light.arrowed-in:before {
    border-color: #E7E7E7 #E7E7E7 #E7E7E7 transparent
}

.label-light.arrowed-right:after {
    border-left-color: #E7E7E7
}

.label-light.arrowed-in-right:after {
    border-color: #E7E7E7 transparent #E7E7E7 #E7E7E7
}

.label-grey.arrowed:before {
    border-right-color: #A0A0A0
}

.label-grey.arrowed-in:before {
    border-color: #A0A0A0 #A0A0A0 #A0A0A0 transparent
}

.label-grey.arrowed-right:after {
    border-left-color: #A0A0A0
}

.label-grey.arrowed-in-right:after {
    border-color: #A0A0A0 transparent #A0A0A0 #A0A0A0
}

.label {
    line-height: 1.15;
    height: 20px
}

.label.arrowed:before {
    left: -10px;
    border-width: 10px 5px
}

.label-lg.arrowed,
.label-lg.arrowed-in {
    margin-left: 6px
}

.label.arrowed-in:before {
    left: -5px;
    border-width: 10px 5px
}

.label.arrowed-right:after {
    right: -10px;
    border-width: 10px 5px
}

.label-lg.arrowed-in-right,
.label-lg.arrowed-right {
    margin-right: 6px
}

.label.arrowed-in-right:after {
    right: -5px;
    border-width: 10px 5px
}

.label-lg {
    padding: .3em .6em .4em;
    font-size: 13px;
    line-height: 1.1;
    height: 24px
}

.green {
    color: #69AA46!important;
}

.red {
    color: #DD5A43!important;
}

.hr-8, .hr8 {
    margin: 8px 0;
}
.hr-dotted, .hr.dotted {
    border-style: dotted;
}

.label-info.arrowed-in:before {
    border-color: #3A87AD #3A87AD #3A87AD transparent;
}

.hr-double {
    height: 3px;
    border-top: 1px solid #E3E3E3;
    border-bottom: 1px solid #E3E3E3;
    border-top-color: rgba(0,0,0,.11);
    border-bottom-color: rgba(0,0,0,.11);
}

.spaced>li {
    margin-top: 9px;
    margin-bottom: 9px;
}

.label-lg.arrowed:before {
    left: -12px;
    border-width: 12px 6px
}

.label-xlg.arrowed,
.label-xlg.arrowed-in {
    margin-left: 7px
}

.label-lg.arrowed-in:before {
    left: -6px;
    border-width: 12px 6px
}

.label-lg.arrowed-right:after {
    right: -12px;
    border-width: 12px 6px
}

.label-xlg.arrowed-in-right,
.label-xlg.arrowed-right {
    margin-right: 7px
}

.label-lg.arrowed-in-right:after {
    right: -6px;
    border-width: 12px 6px
}


.widget-box {
    padding: 0;
    box-shadow: none;
    margin: 3px 0;
    border: 1px solid #CCC
}

@media only screen and (max-width:767px) {
    .widget-box {
        margin-top: 7px;
        margin-bottom: 7px
    }
}

.widget-header {
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    position: relative;
    min-height: 38px;
    background: repeat-x #f7f7f7;
    background-image: -webkit-linear-gradient(top, #FFF 0, #EEE 100%);
    background-image: -o-linear-gradient(top, #FFF 0, #EEE 100%);
    background-image: linear-gradient(to bottom, #FFF 0, #EEE 100%);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffeeeeee', GradientType=0);
    color: #669FC7;
    border-bottom: 1px solid #DDD;
    padding-left: 12px
}

.widget-box.transparent>.widget-header,
.widget-header-flat {
    filter: progid: DXImageTransform.Microsoft.gradient(enabled=false)
}

.widget-header:after,
.widget-header:before {
    content: "";
    display: table;
    line-height: 0
}

.widget-header:after {
    clear: right
}

.widget-box.collapsed>.widget-header {
    border-bottom-width: 0
}

.collapsed.fullscreen>.widget-header {
    border-bottom-width: 1px
}

.collapsed>.widget-body {
    display: none
}

.widget-header-flat {
    background: #F7F7F7
}

.widget-header-large {
    min-height: 49px;
    padding-left: 18px
}

.widget-header-small {
    min-height: 31px;
    padding-left: 10px
}

.widget-header>.widget-title {
    line-height: 36px;
    padding: 0;
    margin: 0;
    display: inline
}

.widget-header>.widget-title>.ace-icon {
    margin-right: 5px;
    font-weight: 400;
    display: inline-block
}

.infobox .infobox-content:first-child,
.infobox>.badge,
.infobox>.stat,
.percentage {
    font-weight: 700
}

.widget-header-large>.widget-title {
    line-height: 48px
}

.widget-header-small>.widget-title {
    line-height: 30px
}

.widget-toolbar {
    display: inline-block;
    padding: 0 10px;
    line-height: 37px;
    float: right;
    position: relative
}

.widget-header-large>.widget-toolbar {
    line-height: 48px
}

.widget-header-small>.widget-toolbar {
    line-height: 29px
}

.widget-toolbar.no-padding {
    padding: 0
}

.widget-toolbar.padding-5 {
    padding: 0 5px
}

.widget-toolbar:before {
    display: inline-block;
    content: "";
    position: absolute;
    top: 3px;
    bottom: 3px;
    left: -1px;
    border: 1px solid #D9D9D9;
    border-width: 0 1px 0 0
}

.popover-notitle+.popover .popover-title,
.popover.popover-notitle .popover-title,
.widget-toolbar.no-border:before {
    display: none
}

.widget-header-large>.widget-toolbar:before {
    top: 6px;
    bottom: 6px
}

[class*=widget-color-]>.widget-header>.widget-toolbar:before {
    border-color: #EEE
}

.widget-color-orange>.widget-header>.widget-toolbar:before {
    border-color: #FEA
}

.widget-color-dark>.widget-header>.widget-toolbar:before {
    border-color: #222;
    box-shadow: -1px 0 0 rgba(255, 255, 255, .2), inset 1px 0 0 rgba(255, 255, 255, .1)
}

.widget-toolbar label {
    display: inline-block;
    vertical-align: middle;
    margin-bottom: 0
}

.widget-toolbar>.widget-menu>a,
.widget-toolbar>a {
    font-size: 14px;
    margin: 0 1px;
    display: inline-block;
    padding: 0;
    line-height: 24px
}

.widget-toolbar>.widget-menu>a:hover,
.widget-toolbar>a:hover {
    text-decoration: none
}

.widget-header-large>.widget-toolbar>.widget-menu>a,
.widget-header-large>.widget-toolbar>a {
    font-size: 15px;
    margin: 0 1px
}

.widget-toolbar>.btn {
    line-height: 27px;
    margin-top: -2px
}

.widget-toolbar>.btn.smaller {
    line-height: 26px
}

.widget-toolbar>.btn.bigger {
    line-height: 28px
}

.widget-toolbar>.btn-sm {
    line-height: 24px
}

.widget-toolbar>.btn-sm.smaller {
    line-height: 23px
}

.widget-toolbar>.btn-sm.bigger {
    line-height: 25px
}

.widget-toolbar>.btn-xs {
    line-height: 22px
}

.widget-toolbar>.btn-xs.smaller {
    line-height: 21px
}

.widget-toolbar>.btn-xs.bigger {
    line-height: 23px
}

.widget-toolbar>.btn-minier {
    line-height: 18px
}

.widget-toolbar>.btn-minier.smaller {
    line-height: 17px
}

.widget-toolbar>.btn-minier.bigger {
    line-height: 19px
}

.widget-toolbar>.btn-lg {
    line-height: 36px
}

.widget-toolbar>.btn-lg.smaller {
    line-height: 34px
}

.widget-toolbar>.btn-lg.bigger {
    line-height: 38px
}

.widget-toolbar-dark {
    background: #444
}

.widget-toolbar-light {
    background: rgba(255, 255, 255, .85)
}

.widget-toolbar>.widget-menu {
    display: inline-block;
    position: relative
}

.widget-toolbar>.widget-menu>a[data-action],
.widget-toolbar>a[data-action] {
    -webkit-transition: transform .1s;
    -o-transition: transform .1s;
    transition: transform .1s
}

.widget-toolbar>.widget-menu>a[data-action]>.ace-icon,
.widget-toolbar>a[data-action]>.ace-icon {
    margin-right: 0
}

.widget-toolbar>.widget-menu>a[data-action]:focus,
.widget-toolbar>a[data-action]:focus {
    text-decoration: none;
    outline: 0
}

.widget-toolbar>.widget-menu>a[data-action]:hover,
.widget-toolbar>a[data-action]:hover {
    -moz-transform: scale(1.2);
    -webkit-transform: scale(1.2);
    -o-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2)
}

.widget-body {
    background-color: #FFF
}

.widget-main {
    padding: 12px
}

.widget-main.padding-32 {
    padding: 32px
}

.widget-main.padding-30 {
    padding: 30px
}

.widget-main.padding-28 {
    padding: 28px
}

.widget-main.padding-26 {
    padding: 26px
}

.widget-main.padding-24 {
    padding: 24px
}

.widget-main.padding-22 {
    padding: 22px
}

.widget-main.padding-20 {
    padding: 20px
}

.widget-main.padding-18 {
    padding: 18px
}

.widget-main.padding-16 {
    padding: 16px
}

.widget-main.padding-14 {
    padding: 14px
}

.widget-main.padding-12 {
    padding: 12px
}

.widget-main.padding-10 {
    padding: 10px
}

.widget-main.padding-8 {
    padding: 8px
}

.widget-main.padding-6 {
    padding: 6px
}

.widget-main.padding-4 {
    padding: 4px
}

.widget-main.padding-2 {
    padding: 2px
}

.widget-main.no-padding,
.widget-main.padding-0 {
    padding: 0
}

.widget-toolbar .progress {
    vertical-align: middle;
    display: inline-block;
    margin: 0
}

.widget-toolbar>.dropdown,
.widget-toolbar>.dropup {
    display: inline-block
}

.widget-toolbox.toolbox-vertical,
.widget-toolbox.toolbox-vertical+.widget-main {
    display: table-cell;
    vertical-align: top
}

.widget-box>.widget-header>.widget-toolbar>.widget-menu>[data-action=settings],
.widget-box>.widget-header>.widget-toolbar>[data-action=settings],
.widget-color-dark>.widget-header>.widget-toolbar>.widget-menu>[data-action=settings],
.widget-color-dark>.widget-header>.widget-toolbar>[data-action=settings] {
    color: #99CADB
}

.widget-box>.widget-header>.widget-toolbar>.widget-menu>[data-action=reload],
.widget-box>.widget-header>.widget-toolbar>[data-action=reload],
.widget-color-dark>.widget-header>.widget-toolbar>.widget-menu>[data-action=reload],
.widget-color-dark>.widget-header>.widget-toolbar>[data-action=reload] {
    color: #ACD392
}

.widget-box>.widget-header>.widget-toolbar>.widget-menu>[data-action=collapse],
.widget-box>.widget-header>.widget-toolbar>[data-action=collapse],
.widget-color-dark>.widget-header>.widget-toolbar>.widget-menu>[data-action=collapse],
.widget-color-dark>.widget-header>.widget-toolbar>[data-action=collapse] {
    color: #AAA
}

.widget-box>.widget-header>.widget-toolbar>.widget-menu>[data-action=close],
.widget-box>.widget-header>.widget-toolbar>[data-action=close],
.widget-color-dark>.widget-header>.widget-toolbar>.widget-menu>[data-action=close],
.widget-color-dark>.widget-header>.widget-toolbar>[data-action=close] {
    color: #E09E96
}

.widget-box[class*=widget-color-]>.widget-header {
    color: #FFF;
    filter: progid: DXImageTransform.Microsoft.gradient(enabled=false)
}

.widget-color-blue {
    border-color: #307ECC
}

.widget-color-blue>.widget-header {
    background: #307ECC;
    border-color: #307ECC
}

.widget-color-blue2 {
    border-color: #5090C1
}

.widget-color-blue2>.widget-header {
    background: #5090C1;
    border-color: #5090C1
}

.widget-color-blue3 {
    border-color: #6379AA
}

.widget-color-blue3>.widget-header {
    background: #6379AA;
    border-color: #6379AA
}

.widget-color-green {
    border-color: #82AF6F
}

.widget-color-green>.widget-header {
    background: #82AF6F;
    border-color: #82AF6F
}

.widget-color-green2 {
    border-color: #2E8965
}

.widget-color-green2>.widget-header {
    background: #2E8965;
    border-color: #2E8965
}

.widget-color-green3 {
    border-color: #4EBC30
}

.widget-color-green3>.widget-header {
    background: #4EBC30;
    border-color: #4EBC30
}

.widget-color-red {
    border-color: #E2755F
}

.widget-color-red>.widget-header {
    background: #E2755F;
    border-color: #E2755F
}

.widget-color-red2 {
    border-color: #E04141
}

.widget-color-red2>.widget-header {
    background: #E04141;
    border-color: #E04141
}

.widget-color-red3 {
    border-color: #D15B47
}

.widget-color-red3>.widget-header {
    background: #D15B47;
    border-color: #D15B47
}

.widget-color-purple {
    border-color: #7E6EB0
}

.widget-color-purple>.widget-header {
    background: #7E6EB0;
    border-color: #7E6EB0
}

.widget-color-pink {
    border-color: #CE6F9E
}

.widget-color-pink>.widget-header {
    background: #CE6F9E;
    border-color: #CE6F9E
}

.widget-color-orange {
    border-color: #E8B10D
}

.widget-color-orange>.widget-header {
    color: #855D10!important;
    border-color: #E8B10D;
    background: #FFC657
}

.widget-color-dark {
    border-color: #5a5a5a
}

.widget-color-dark>.widget-header {
    border-color: #666;
    background: #404040
}

.widget-color-grey {
    border-color: #9e9e9e
}

.widget-color-grey>.widget-header {
    border-color: #aaa;
    background: #848484
}

.widget-box.transparent {
    border-width: 0
}

.widget-box.transparent>.widget-header {
    background: 0 0;
    border-width: 0;
    border-bottom: 1px solid #DCE8F1;
    color: #4383B4;
    padding-left: 3px
}

.widget-box.transparent>.widget-header-large {
    padding-left: 5px
}

.widget-box.transparent>.widget-header-small {
    padding-left: 1px
}

.widget-box.transparent>.widget-body {
    border-width: 0;
    background-color: transparent
}

[class*=widget-color-]>.widget-header>.widget-toolbar>.widget-menu>[data-action],
[class*=widget-color-]>.widget-header>.widget-toolbar>[data-action] {
    text-shadow: 0 1px 1px rgba(0, 0, 0, .2)
}

[class*=widget-color-]>.widget-header>.widget-toolbar>.widget-menu>[data-action=settings],
[class*=widget-color-]>.widget-header>.widget-toolbar>[data-action=settings] {
    color: #D3E4ED
}

[class*=widget-color-]>.widget-header>.widget-toolbar>.widget-menu>[data-action=reload],
[class*=widget-color-]>.widget-header>.widget-toolbar>[data-action=reload] {
    color: #DEEAD3
}

[class*=widget-color-]>.widget-header>.widget-toolbar>.widget-menu>[data-action=collapse],
[class*=widget-color-]>.widget-header>.widget-toolbar>[data-action=collapse] {
    color: #E2E2E2
}

[class*=widget-color-]>.widget-header>.widget-toolbar>.widget-menu>[data-action=close],
[class*=widget-color-]>.widget-header>.widget-toolbar>[data-action=close] {
    color: #FFD9D5
}

.widget-color-orange>.widget-header>.widget-toolbar>.widget-menu>[data-action],
.widget-color-orange>.widget-header>.widget-toolbar>[data-action] {
    text-shadow: none
}

.widget-color-orange>.widget-header>.widget-toolbar>.widget-menu>[data-action=settings],
.widget-color-orange>.widget-header>.widget-toolbar>[data-action=settings] {
    color: #559AAB
}

.widget-color-orange>.widget-header>.widget-toolbar>.widget-menu>[data-action=reload],
.widget-color-orange>.widget-header>.widget-toolbar>[data-action=reload] {
    color: #7CA362
}

.widget-color-orange>.widget-header>.widget-toolbar>.widget-menu>[data-action=collapse],
.widget-color-orange>.widget-header>.widget-toolbar>[data-action=collapse] {
    color: #777
}

.widget-color-orange>.widget-header>.widget-toolbar>.widget-menu>[data-action=close],
.widget-color-orange>.widget-header>.widget-toolbar>[data-action=close] {
    color: #A05656
}

.widget-box.light-border[class*=widget-color-]:not(.fullscreen) {
    border-width: 0
}

.widget-box.light-border[class*=widget-color-]:not(.fullscreen)>.widget-header {
    border: 1px solid;
    border-color: inherit
}

.widget-box.light-border[class*=widget-color-]:not(.fullscreen)>.widget-body {
    border: 1px solid #D6D6D6;
    border-width: 0 1px 1px
}

.widget-box.no-border {
    border-width: 0
}

.widget-box.fullscreen {
    position: fixed;
    margin: 0;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #FFF;
    border-width: 3px;
    z-index: 1040!important
}

.widget-box.fullscreen:not([class*=widget-color-]) {
    border-color: #AAA
}

.widget-body .table {
    border-top: 1px solid #E5E5E5
}

.widget-body .table thead:first-child tr {
    background: #FFF
}

                                    

Information about this bootstrap snippet

Creator: Dey Dey

Bootstrap version: 3.3.6

Created: Apr 22nd 2016, 19:49

Views: 535

Rated 5/5 based on 1 reviews