<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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 ---------->
<!DOCTYPE html><html class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/justd/pen/dPeKEG" />
<meta name="viewport" content="width=device-width">
<style class="cp-pen-styles">.tab-container {
background: #8dc8fb;
margin: 0;
padding: 0;
max-height: 40px;
}
.tab-container ul.nav-tabs {
margin: 0;
list-style-type: none;
line-height: 40px;
max-height: 40px;
overflow: hidden;
display: inline-block;
display: -webkit-flex;
display: flex;
padding-right: 20px;
border-bottom: 5px solid #f7f7f7;
}
.tab-container ul.nav-tabs > li {
margin: 5px -14px 0;
-moz-border-radius-topleft: 28px 145px;
-webkit-border-top-left-radius: 28px 145px;
border-top-left-radius: 28px 145px;
-moz-border-radius-topright: 28px 145px;
-webkit-border-top-right-radius: 28px 145px;
border-top-right-radius: 28px 145px;
padding: 0 30px 0 25px;
height: 170px;
background: #c3d5e6;
position: relative;
-moz-box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5);
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5);
width: 200px;
max-width: 200px;
min-width: 20px;
border: 1px solid #aaa;
}
.tab-container ul.nav-tabs > li:first-child {
margin-left: 0;
}
.tab-container ul.nav-tabs > li:last-of-type {
margin-right: 0;
}
.tab-container ul.nav-tabs > li > a {
display: block;
max-width: 100%;
text-decoration: none;
color: #222;
padding: 3px 7px;
}
.tab-container ul.nav-tabs > li > a span {
overflow: hidden;
white-space: nowrap;
display: block;
}
.tab-container ul.nav-tabs > li > a:focus, .tab-container ul.nav-tabs > li > a:hover {
background-color: transparent;
border-color: transparent;
}
.tab-container ul.nav-tabs > li > a .glyphicon-remove {
color: #777;
display: inline-block;
padding: 3px;
font-size: 10px;
position: absolute;
z-index: 10;
top: 7px;
right: -10px;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
}
.tab-container ul.nav-tabs > li > a .glyphicon-remove:hover {
background: #d39ea3;
color: white;
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.25);
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.25);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.25);
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
}
.tab-container ul.nav-tabs > li.active {
z-index: 2;
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2Y3ZjdmNyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
background-size: 100%;
background-image: -webkit-gradient(linear, 50% 0%, 50% 30, color-stop(0%, #ffffff), color-stop(100%, #f7f7f7));
background-image: -moz-linear-gradient(#ffffff, #f7f7f7 30px);
background-image: -webkit-linear-gradient(#ffffff, #f7f7f7 30px);
background-image: linear-gradient(#ffffff, #f7f7f7 30px);
}
.tab-container ul.nav-tabs > li.active > a {
background-color: transparent;
border-color: transparent;
border-bottom-color: transparent;
}
.tab-container ul.nav-tabs > li.active > a:focus, .tab-container ul.nav-tabs > li.active > a:hover {
background-color: transparent;
border-color: transparent;
border-bottom-color: transparent;
}
.tab-container ul.nav-tabs .btn {
float: left;
height: 20px;
width: 35px;
min-width: 35px;
max-width: 35px;
margin: 10px 0 0 0;
border-color: #71a0c9;
outline: none;
-moz-transform: skew(30deg);
-ms-transform: skew(30deg);
-webkit-transform: skew(30deg);
transform: skew(30deg);
}
.tab-container ul.nav-tabs .btn.btn-default {
background: #c3d5e6;
}
.tab-container ul.nav-tabs .btn.btn-default:hover {
background: #d2deeb;
}
.tab-container ul.nav-tabs .btn.btn-default:active {
background: #9cb5cc;
}
.tab-container .tab-pane {
padding: 60px 40px;
text-align: center;
}
.tab-container .tab-pane.active {
border-top: 1px solid #ddd;
}
</style></head><body>
<html lang="en" ng-app="chromeTabsApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Chrome tabs with Bootstrap and AngularJS</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
</head>
<body ng-controller="AppCtrl">
<tabset class="tab-container">
<tab ng-repeat="tab in tabs" active="tab.active" tab-highlight>
<tab-heading>
<span>{{tab.title}}</span> <i class="glyphicon glyphicon-remove" ng-click="removeTab($event, $index)"></i>
</tab-heading>
<h1>{{tab.content}}</h1>
</tab>
<button class="btn btn-default" ng-click="addTab()"></button>
</tabset>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.12.1/ui-bootstrap-tpls.min.js"></script>
</body>
</html>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script>
<script >var app = angular.module('chromeTabsApp', ['ui.bootstrap']);
app
.controller('AppCtrl', ['$scope', function ($scope) {
var counter = 1;
$scope.tabs = [];
var addTab = function () {
$scope.tabs.push({ title: 'Tab ' + counter, content: 'Tab ' + counter });
counter++;
$scope.tabs[$scope.tabs.length - 1].active = true;
};
var removeTab = function (event, index) {
event.preventDefault();
event.stopPropagation();
$scope.tabs.splice(index, 1);
};
$scope.addTab = addTab;
$scope.removeTab = removeTab;
for (var i = 0; i < 5; i++) {if (window.CP.shouldStopExecution(1)){break;}
addTab();
}
window.CP.exitedLoop(1);
}])
.directive('tabHighlight', [function(){
return {
restrict: 'A',
link: function(scope, element) {
var x, y, initial_background = '#c3d5e6';
element
.removeAttr('style')
.mousemove(function (e) {
// Add highlight effect on inactive tabs
if(!element.hasClass('active'))
{
x = e.pageX - this.offsetLeft;
y = e.pageY - this.offsetTop;
element
.css({ background: '-moz-radial-gradient(circle at ' + x + 'px ' + y + 'px, rgba(255,255,255,0.4) 0px, rgba(255,255,255,0.0) 45px), ' + initial_background })
.css({ background: '-webkit-radial-gradient(circle at ' + x + 'px ' + y + 'px, rgba(255,255,255,0.4) 0px, rgba(255,255,255,0.0) 45px), ' + initial_background })
.css({ background: 'radial-gradient(circle at ' + x + 'px ' + y + 'px, rgba(255,255,255,0.4) 0px, rgba(255,255,255,0.0) 45px), ' + initial_background });
}
})
.mouseout(function () {
element.removeAttr('style');
});
}
};
}]);
//# sourceURL=pen.js
</script>
</body></html>
