Develop Reference

Why razor.css file not working in Blazor WebAssembly?

I am following one tutorial and CSS worked for Shared razor pages. First example works fine and does everything it needs, but the second does not load CSS. No color changes or image size.
#inject IProductService ProductService
#if(ProductService.Products == null || ProductService.Products.Count == 0)
{
<span>Loading products...</span>
}
else
{
<ul class="list-unstyled">
#foreach (var product in ProductService.Products)
{
<li class="media my-3">
<div class="media-image-wrapper mr-2">
<a href="/product/#product.Id">
<img class="media-img" src="#product.ImageUrl" alt="#product.Title">
</a>
</div>
<div class="media-body">
<a href="#">
<h4 class="mb-0">#product.Title</h4>
</a>
<p>#product.Description</p>
<h5 class="price">$#product.Price</h5>
</div>
</li>
}
</ul>
}
#code {
protected override async Task OnInitializedAsync()
{
await ProductService.GetProducts();
}
}
CSS FILE
.media-img{
max-height: 200px;
max-width: 200px;
border-radius: 6px;
margin-bottom: 10px;
transition: transform .2s;
}
.media-img:hover{
transform: scale(1.1);
}
.media{
display:flex;
align-items: flex-start;
}
.media-body{
flex: 1;
margin-left: 20px;
}
media-img-wrapper{
width: 200px;
text-align: center;
}
#media(max-width: 1023.98px)
{
.media{
flex-direction: column;
}
media-img-wrapper{
width: 100%;
height: auto;
}
}
But when I try to do the same in the Pages folder
#page "/product/{id:int}"
#inject IProductService ProductService
#if(product == null)
{
<span>Message</span>
}
else
{
<div class="media">
<div class="media-img-wrapper mr-2">
<img class="media-img" src="#product.ImageUrl" alt="#product.Title">
</div>
<div class="media-body">
<h2 class="mb-0">#product.Title</h2>
<p>#product.Description</p>
<h4 class="price">
$#product.Price
</h4>
</div>
</div>
}
#code {
private Product? product = null;
private string Message = string.Empty;
[Parameter]
public int Id { get; set; }
protected override async Task OnParametersSetAsync()
{
Message = "Loading Product...";
var result = await ProductService.GetProductAsync(Id);
if(!result.Success)
{
Message = result.Message;
}
else
{
product = result.Data;
}
}
}
}
I added another CSS file and even tried to add wwwroot/css/app.css
.media-img{
max-height: 500px;
max-width: 500px;
border-radius: 6px;
margin: 0 10px 10px 10px;
}
.media-img-wrapper {
max-width: 500px;
max-height: 500px;
text-align: center;
}
#media(max-width: 1023.98px)
{
.media-img {
max-width: 300px;
}
.media-img-wrapper{
width:100%;
height: auto;
}
}
It does not work. The only difference I can spot is that On pages folder files have a green + sign, while in Shared they have a red V.
Files difference

Using JavaScript with asp.net pages

I have probably very simple question.
I have copied that code to my asp.net web application project but i couln't minimize the box.
Is there anything special i should do to use javascript with asp.net projects?
I tried the code tree times.
Put script code in to head block
Put script code to just before div starts
Put script code to just before form tag closes
Javascript code
$("#button").click(function(){
if($(this).html() == "-"){
$(this).html("+");
}
else{
$(this).html("-");
}
$("#box").slideToggle();
});
html code
<div id="widnow">
<div id="title_bar"> Basic information
<div id="button"><img src="http://commons.wikimedia.org/wiki/File:Minus_in_circle.svg"></div>
</div>
<div id="box">
</div>
</div>
css code
#widnow{
width:400px;
border:solid 1px;
}
#title_bar{
background: #FEFEFE;
height: 25px;
width: 100%;
}
#button{
border:solid 1px;
width: 25px;
height: 23px;
float:right;
cursor:pointer;
}
#box{
height: 250px;
background: #DFDFDF;
}

I am assuming you are missing reference to jquery. Replacing your script part with this will solve the problem if that is the case.
<script src="code.jquery.com/jquery-1.10.2.min.js"></script>
// or use any version of jquery library..in your fiddle you used 1.7.2..Try the same instead..
<script>
$("#button").click(function(){
if($(this).html() == "-"){
$(this).html("+");
}
else{
$(this).html("-");
}
$("#box").slideToggle();
});
</script>

Most probably you are missing the jquery file ....try this
<html>
<head runat="server">
<title></title>
<style>
#widnow
{
width: 400px;
border: solid 1px;
}
#title_bar
{
background: #FEFEFE;
height: 25px;
width: 100%;
}
#button
{
border: solid 1px;
width: 25px;
height: 23px;
float: right;
cursor: pointer;
}
#box
{
height: 250px;
background: #DFDFDF;
}
</style>
<script src="Scripts/jquery-1.10.1.js" type="text/javascript"></script>
<script>
$(document).ready(function () {
$("#button").click(function () {
if ($(this).html() == "-") {
$(this).html("+");
}
else {
$(this).html("-");
}
$("#box").slideToggle();
});
});
</script>
</head>
<body>
<div id="widnow">
<div id="title_bar">
Basic information
<div id="button">
<img src="http://commons.wikimedia.org/wiki/File:Minus_in_circle.svg"></div>
</div>
<div id="box">
</div>
</div>
</body>
</html>

Convert from html string to pdf using itextsharp in asp.net

I'm using iTextSharp in my project and using this method to parse html string to pdf
public static MemoryStream MakePdf(string htmlCode)
{
MemoryStream msOutput = new MemoryStream();
TextReader reader = new StringReader(htmlCode);
Document document = new Document(PageSize.A4, 30, 30, 30, 30);
PdfWriter writer = PdfWriter.GetInstance(document, msOutput);
HTMLWorker worker = new HTMLWorker(document);
document.Open();
worker.StartDocument();
worker.Parse(reader); // EXCEPTION IN THIS LINE!!!!
worker.EndDocument();
worker.Close();
document.Close();
return msOutput;
}
And it doesn't work for me. It throws an exception at selected line
URI formats are not supported.
How can I solve this problem?
P.S. Here is html I need to parse
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html" />
<meta name="author" content="Boomer" />
<style type="text/css">
body
{
font: 12px/18px Arial, Tahoma, Verdana, sans-serif;
width: 100%;
font-family: Myriad Pro;
font-style: italic;
background: #f3f3f3;
}
#font-face
{
font-family: 'Myriad Pro';
src: url('../fonts/myriadpro.eot');
src: url('../fonts/myriadpro.eot?#iefix') format('embedded-opentype'),
url('../fonts/myriadpro.woff') format('woff'),
url('../fonts/myriadpro.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
.clear
{
clear: both;
}
a,.blue_text
{
color:#2aa2f6;
text-decoration: none;
}
a:hover
{
text-decoration: underline;
}
.simple_title
{
font-size: 22px;
}
.text750
{
width: 750px;
margin: 20px 0;
}
.full_width_text
{
margin-right: 35px;
text-align: justify;
}
.grey_text
{
color:#afafaf;
}
.email_page
{
width: 1025px;
margin: 20px auto;
background: #fff;
padding: 20px 0;
}
.email_page p
{
font-size: 18px;
}
.email_div
{
margin: 0 auto;
background: #fff;
width: 998px;
border: 1px solid #ebebeb;
border-radius: 10px;
-webkit-border-radius:10px;
-border-radius:10px;
-moz-border-radius:10px;
-o-border-radius:10px;
display: table;
}
.email_content
{
margin-left: 60px;
margin-top: 40px;
}
.email_logo
{
float: left;
}
.email_title
{
float: left;
margin-left: 130px;
font-size: 22px;
color:#f7941d;
margin-top: 50px;
}
.email_img_container
{
float: right;
width: 270px;
}
.email_img_container .text_description
{
font-size: 18px;
color:#000000;
margin-bottom: 15px;
}
.email_img_container img
{
border: 1px solid #ebebeb;
border-radius: 10px;
-webkit-border-radius:10px;
-border-radius:10px;
-moz-border-radius:10px;
-o-border-radius:10px;
}
.text600
{
width: 600px;
float: left;
}
</style>
<title>Voucher</title>
</head>
<body>
<div class="email_page">
<div class="email_div">
<div class="email_content">
<div class="text600">
<div class="email_logo">
<a href="#">
<img src="{EmailLogo}" />
</a>
</div>
<div class="email_title">
Instant Gift Certificate
</div>
<div class="clear"></div>
<div>
<p>To: <span class="blue_text">{RecipientName}</span></p>
<p>
<div>{GiftVoucherName}</div>
<div>{GiftVoucherDescription}</div>
</p>
<p>
This gift is from: <span class="blue_text">{SenderName}</span>
</p>
</div>
</div>
<div class="email_img_container">
<div class="text_description">
<div>SG Code: {SGCode}</div>
<div>Purchased on: {PurchaseDate}</div>
</div>
<img src="{MerchantImage}" alt="" />
</div>
<div class="clear"></div>
<div class="text750">
<p>
This gift must be redeemed by: <span class="blue_text">{Date}</span><br />
Redeemable at the following locations: <span class="blue_text">{Locations}</span><br />
For other details and terms and conditions, please see the other attachment.
</p>
<div class="simple_title">
Disclaimer
</div>
<p>
Test.com is not responsible for the content of the message or the selection of the gift by the sender.
Once the sender enters the information, the instant gift is automatically generated and sent to
the recipient.
</p>
<p>
Visit us at: www.Test.com
</p>
</div>
</div>
</div>
</div>
</body>
</html>

To solve this issue you can add Providers to your HTMLWorker using the SetProviders method which takes an IDictionary the HTMLWorker class has constants for the string keys. In your case have a look at the ILinkProvider and/or IImageProvider. These provide a way to handle the images and URLs inside of your HTML yourself, translating them into usable parts for the PDF.

Why do my pictures in a asp image control look squashed?

I have an asp.net c# web page. On the page I have a image box which will randomly display an image every 5 secs or so. The problem is, some of the pictures appear squashed. All of the pictures have been cropped in photoshop to 350x350 pixels and the size of the image box is 350x350 pixles. If you look at the pictures using another program they look fine, but on the asp.net page they look funny. Can someone show me where I'm going wrong?
Thanks,
Craig
here's the source code rendered in IE, but it looks nothing like what I have in my asp.net default page.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head><title>
Home Page
</title><link href="Styles/Site.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form method="post" action="Default.aspx" id="ctl01">
<div class="aspNetHidden">
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwULLTE5NTc5Mjg4MDYPZBYCZg9kFgICAw9kFgICAw9kFgICAw8WAh4HRW5hYmxlZGdkZESHdPrJrv0fd90yot44IdP2LuG176cv2XyHWiPVlPSh" />
</div>
<script type="text/javascript">
//<![CDATA[
var theForm = document.forms['ctl01'];
if (!theForm) {
theForm = document.ctl01;
}
function __doPostBack(eventTarget, eventArgument) {
if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
theForm.__EVENTTARGET.value = eventTarget;
theForm.__EVENTARGUMENT.value = eventArgument;
theForm.submit();
}
}
//]]>
</script>
<script src="/WebResource.axd?d=DogTP9ciF8js-919lyE5BNUR3gLIy6vQ94IA8ujQqufPbSjgjYs-MB8TFhgGkZbCezg2T7MihOn_QzXNJh8bUbKXvUZPuDq-Zo79nPbUosQ1&t=634856347325009875" type="text/javascript"></script>
<script src="/ScriptResource.axd?d=4jTc4W6vHbFONhMZfZEniQ0ll2ox3vAxSkMzYB-7HtakDqsmhXCZFBXSRwOb1nRWK6CMzP0qyRYdnYMNnTFXhx2r0J9E2ik7kM8XVmq_UBEPDXqK-kLCJqvRQAvq0wv0ZlWQS1gCjlQxcxLhV1XrJQ2&t=150492e7" type="text/javascript"></script>
<script src="/ScriptResource.axd?d=GHu6blHeASt9skHbsJx4uFWYiLKvlA8B1V1ZT8jJM7xJFl3ycZATlv3IHRrGJMm_fpPlBSBh8s1B1E7r9viSf2_vG2Xab8vHZGZqr8izsLUD5pjhbTenZ9dImmZEGONdwrT5ungX3KYzAap2ByhMGQe1RCN4HIeWzLfx9QPaNIL_dFC2Su5ez5Ui0Ux0TCBs0&t=ffffffff940d030f" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
if (typeof(Sys) === 'undefined') throw new Error('ASP.NET Ajax client-side framework failed to load.');
//]]>
</script>
<script src="/ScriptResource.axd?d=k0ZMcbO229cP7tJHdqfAeLLkubS_PB3nLJRGVfbZzo992j-U0QXogHZ9AeLO7yXzYa70OSzRIw-wnFwxHbCbmy30q_MrEaY-iqOTNAQzXLCt0hz--HUsMHJsrrht6bk34EjhwJc7bL5h2KjWTMIm5sDlaERrkzNMJ2CYN7WaxPRUTRyOkbTPleHmC1PMtedi0&t=ffffffff940d030f" type="text/javascript"></script>
<script src="/ScriptResource.axd?d=7Pyyv_WcNl6DPXEjw9wnwQXSTOHSqlXve9fO2VxG4I-t0REk8QlK5V7QxKS7jkGO1CGno7PDXkPN1ApWod5KVH--pObLgj1ukjWVTcpKZZNJKm_Fz0qDQd_RVd2qBcBGOEo0qqVjh1A8QaUZNRMFCx12FzcYFbkEV_4FAwoZHekJoj0b0U3QdytSO2iP-U-F0&t=ffffffff940d030f" type="text/javascript"></script>
<div class="page">
<div class="header">
<div class="title">
<h1>
My Family Web Site
</h1>
</div>
<div class="clear hideSkiplink">
<img alt="Skip Navigation Links" src="/WebResource.axd?d=CEw_ah6x15SB8gE6w0h-5pVp-C_glYrwEoXIAM74CoVRv4LUELJEQWVkcLYtMPI0-_6jQVupgDDSAEIK43VxSf5HH-tcHYeqNWJ2d0U1yuU1&t=634856347325009875" width="0" height="0" style="border-width:0px;" /><div class="menu" id="NavigationMenu">
<ul class="level1">
<li><a class="level1" href="Default.aspx">Home</a></li><li><a class="level1" href="About.aspx">About</a></li><li><a class="level1" href="Daniel.aspx">Daniel</a></li>
</ul>
</div><a id="NavigationMenu_SkipLink"></a>
</div>
</div>
<div class="main">
<h2>
Welcome To The Smith Family Web Site</h2>
<p>
Here you can find out all of the great things going on at the homestead.
</p>
<script type="text/javascript">
//<![CDATA[
Sys.WebForms.PageRequestManager._initialize('ctl00$MainContent$ScriptManager1', 'ctl01', ['tctl00$MainContent$UpdatePanel1','MainContent_UpdatePanel1'], ['ctl00$MainContent$Timer1','MainContent_Timer1'], [], 90, 'ctl00');
//]]>
</script>
<div class="picture">
<span id="MainContent_Timer1" style="visibility:hidden;display:none;"></span>
<div id="MainContent_UpdatePanel1">
<img id="MainContent_Image1" src="Pictures/25.JPG" align="middle" style="height:350px;width:350px;" />
</div>
</div>
</div>
<div class="clear">
</div>
</div>
<div class="footer">
</div>
<script type='text/javascript'>new Sys.WebForms.Menu({ element: 'NavigationMenu', disappearAfter: 500, orientation: 'horizontal', tabIndex: 0, disabled: false });</script>
<script type="text/javascript">
//<![CDATA[
Sys.Application.add_init(function() {
$create(Sys.UI._Timer, {"enabled":true,"interval":1500,"uniqueID":"ctl00$MainContent$Timer1"}, null, null, $get("MainContent_Timer1"));
});
//]]>
</script>
</form>
</body>
</html>
Here's the code in my asp.net page:
<%# Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
CodeBehind="Default.aspx.cs" Inherits="FamilyWebSite._Default" %>
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<h2>
Welcome To The Smith Family Web Site</h2>
<p>
Here you can find out all of the great things going on at the homestead.
</p>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div class="picture">
<asp:Timer ID="Timer1" runat="server" ontick="Timer1_Tick" Interval="1500">
</asp:Timer>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" />
</Triggers>
<ContentTemplate>
<asp:Image ID="Image1" runat="server" ImageUrl="~/Pictures/25.JPG"
Width="350px" Height="350px" ImageAlign="Middle" />
</ContentTemplate>
</asp:UpdatePanel>
</div>
</asp:Content>
here's the Site.css as well
/* DEFAULTS
----------------------------------------------------------*/
body
{
background: #b6b7bc;
font-size: .80em;
font-family: "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif;
margin: 0px;
padding: 0px;
color: #696969;
}
a:link, a:visited
{
color: #034af3;
}
a:hover
{
color: #1d60ff;
text-decoration: none;
}
a:active
{
color: #034af3;
}
p
{
margin-bottom: 10px;
line-height: 1.6em;
}
/* HEADINGS
----------------------------------------------------------*/
h1, h2, h3, h4, h5, h6
{
font-size: 1.5em;
color: #fff;
font-variant: small-caps;
text-transform: none;
font-weight: 200;
margin-bottom: 0px;
text-align: center;
}
h1
{
font-size: 3em;
padding-bottom: 0px;
margin-bottom: 0px;
text-align: center;
}
h2
{
font-size: 1.5em;
font-weight: 600;
}
h3
{
font-size: 1.2em;
}
h4
{
font-size: 1.1em;
}
h5, h6
{
font-size: 1em;
}
p
{
color: #fff;
}
/* this rule styles <h1> and <h2> tags that are the
first child of the left and right table columns */
.rightColumn > h1, .rightColumn > h2, .leftColumn > h1, .leftColumn > h2
{
margin-top: 0px;
}
/* PRIMARY LAYOUT ELEMENTS
----------------------------------------------------------*/
.page
{
width: 960px;
min-height: 800px;
background-color: #778899;
margin: 20px auto 0px auto;
border: 2px solid #787878;
}
.header
{
position: relative;
margin: 2px;
padding: 0px;
background: #ccc;
width: auto;
text-align: center;
border: 2px ridge #787878;
}
.header h1
{
width: auto;
font-weight: 700;
margin: auto;
padding: 4px 4px 4px 4px;
color: Olive;
border: none;
line-height: 2em;
font-size: 2em;
text-align: center;
background: #000;
}
.main
{
padding: 0px 12px;
margin: 12px 8px 8px 8px;
min-height: 420px;
}
.leftCol
{
padding: 6px 0px;
margin: 12px 8px 8px 8px;
width: 200px;
min-height: 200px;
}
.footer
{
color: #4e5766;
padding: 8px 0px 0px 0px;
margin: 0px auto;
text-align: center;
line-height: normal;
}
/* TAB MENU
----------------------------------------------------------*/
div.hideSkiplink
{
background-color:Olive;
width:100%;
}
div.menu
{
padding: 4px 2px 2px 2px;
}
div.menu ul
{
list-style: none;
margin: 0px;
padding: 0px;
width: auto;
}
div.menu ul li a, div.menu ul li a:visited
{
background-color: #465c71;
border: 1px #4e667d solid;
color: #dde4ec;
display: block;
line-height: 1.35em;
padding: 4px 20px;
text-decoration: none;
white-space: nowrap;
}
div.menu ul li a:hover
{
background-color: #000;
color: #465c71;
text-decoration: none;
}
div.menu ul li a:active
{
background-color: #465c71;
color: #cfdbe6;
text-decoration: none;
}
/* FORM ELEMENTS
----------------------------------------------------------*/
fieldset
{
margin: 1em 0px;
padding: 1em;
border: 1px solid #ccc;
}
fieldset p
{
margin: 2px 12px 10px 10px;
}
fieldset.login label, fieldset.register label, fieldset.changePassword label
{
display: block;
}
fieldset label.inline
{
display: inline;
}
legend
{
font-size: 1.1em;
font-weight: 600;
padding: 2px 4px 8px 4px;
}
input.textEntry
{
width: 320px;
border: 1px solid #ccc;
}
input.passwordEntry
{
width: 320px;
border: 1px solid #ccc;
}
div.accountInfo
{
width: 42%;
}
/* MISC
----------------------------------------------------------*/
.clear
{
clear: both;
}
.title
{
display: inline-block;
/*float: left;*/
text-align: center;
width: auto;
border: 2px groove #fff;
padding: 2px 2px 2px 2px;
margin: 2px 2px 2px 2px;
}
.loginDisplay
{
font-size: 1.1em;
display: block;
text-align: right;
padding: 10px;
color: White;
}
.loginDisplay a:link
{
color: white;
}
.loginDisplay a:visited
{
color: white;
}
.loginDisplay a:hover
{
color: white;
}
.failureNotification
{
font-size: 1.2em;
color: Red;
}
.bold
{
font-weight: bold;
}
.submitButton
{
text-align: right;
padding-right: 10px;
}
.picture
{
padding: 2px;
margin: 5px;
border: 3px ridge #fff;
height: auto;
width: inherit;
float: left;
}

Don't set the height and width to asp image tag. As the pictures are already cropped in photoshop to 350x350. asp image tag will render the image with original height and width.

Compiler wasn't seeing the edited picture files. A clean rebuild refreshed the resources.

How to design tabs like Google Chrome tabs?

How can I design a user interface with tabs like the one Google Chrome has, I mean each tab has to be able to:
Maximize
Close
Dragged and be stand alone.
I'm using .net 2.0 (C#)
Thanks,

You may find it useful to look at an open source project such SharpDevelop I'm sure that have tabbed windows.

You could look in the chromium source code. The chromium project also seem to have a lot of resources for developers and many communication channels (http://www.chromium.org/developers)

I did it yesterday, but using sass and my own reset file as this screenshoot show.
You may notice in _widget_tab.scss that it support up to 24 tabs after the active one...
Feel free to customize it.
Also to replace &-active with .active or &:hover or &:focus to match your needs.
The _reset.css is optional but the result will look-like this JsFiddlle
Any how, these are my files :
_reset.scss
/*
Created on : Jun 12, 2015, 8:29:10 AM
Author : Upgrade <Salathiel Genese, Yimga Yimga at salathielgenese#gmail.com>
*/
$tag-inline:span,a,rt,rp,dfn,abbr,q,cite,em,var,time,samp,i,b,sub,sup,small,strong,mark,ruby,ins,del,bdi,bdo,s,kbd,wbr,code;
$tag-form :form,fieldset,meter,select,legend,optgroup,label,option,datalist,input,output,keygen,textarea,button,progress;
$tag-xture :body,aside,section,header,footer,nav,article,hgroup,address,h1,h2,h3,h4,h5,h6;
$tag-media :img,area,map,embeb,object,param,source,iframe,canvas,track,audio,video,device;
$tag-divide:div,pre,br,p,blocquote,hr,ol,dl,figcaption,ul,dt,figure,li,dd;
$tag-table :table,caption,colgroup,col,tbody,thead,tfoot,tr,th,td;
$tag-meta :head,title,meta,base,link,style,noscript,script;
$tag-menu :menu,command,summary,details;
html,#{$tag-inline},#{$tag-form},#{$tag-xture},#{$tag-media},#{$tag-divide},#{$tag-table},#{$tag-meta},#{$tag-menu}
{
margin: 0;
padding: 0;
display: none;
border-radius: 0;
outline-offset: 0;
border-spacing: 0;
border-collapse: collapse;
border: 0 transparent none;
outline: 0 transparent none;
text-indent: 0;
text-align: justify;
text-transform: none;
text-rendering: auto;
text-decoration: none;
text-shadow: 0 0 0 transparent none;
speak: none;
cursor: default;
vertical-align: top;
color: rgba(60,60,60,1);
background-image: none;
background-color: transparent;
font: normal normal normal 0/0 sans-serif;
-webkit-box-shadow: 0 0 0 transparent;
-moz-box-shadow: 0 0 0 transparent;
box-shadow: 0 0 0 transparent;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-margin-before: 0;
-webkit-padding-start: 0;
-webkit-margin-start: 0;
-webkit-margin-after: 0;
-webkit-margin-end: 0;
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
-o-appearance: none;
appearance: none;
}
figure,legend,input,select,button,canvas,object,menu,img,area,map,embeb,audio,video
{
display: inline-block;
}
#{$tag-inline}
{
display: inline;
}
li
{
display: list-item;
}
html,form,fieldset,#{$tag-xture},iframe,div,pre,br,p,blocquote,hr,ol,dl,figcaption,ul,dt,figure,dd,command,summary,details,option
{
display: block;
}
table
{
display: table;
>colgroup
{
display: table-column-group;
>col
{
display: table-column;
}
}
>caption
{
display: table-caption;
}
>thead
{
display: table-header-group;
}
>tbody
{
display: table-row-group;
}
>tfoot
{
display: table-footer-group;
}
>thead,>tbody,>tfoot
{
>tr
{
display: table-row;
>th,td
{
display: table-cell;
}
}
}
}
#{$tag-inline},input,legend,label,button,li,dt,dd,command,summary
{
font: normal normal normal 12px/1 sans-serif;
}
header,h6,h5,h4,h3,h2,h1
{
font: normal normal normal 33px/1 serif;
}
#for $index from 1 through 6
{
h#{$index}
{
$index: 12 + 3 * $index;
font: normal normal normal #{$index}px/1 serif;
}
}
html>body
{
min-width: 100%;
min-height: 100%;
}
_widget_tab.scss
/*
Created on : Jun 12, 2015, 11:46:31 AM
Author : Upgrade <Salathiel Genese, Yimga Yimga at salathielgenese#gmail.com>
*/
#mixin widget-tab()
{
.tab-container
{
display: block;
>.tab-bar
{
display: block;
text-align: right;
}
#content;
}
}
#include widget-tab
{
.tab-bar-chrome-like
{
#extend .tab-bar;
position: relative;
padding: 5px 5px 0 5px;
border-bottom: 7.5px rgba(180,180,180,1) solid;
>.tab
{
margin: 0 5px;
min-width: 75px;
position: relative;
font-family: serif;
display: inline-block;
border-radius: 5px 5px 0px 0px;
padding: 7.5px 25px 7.5px 7.5px;
background-color: rgba(220,220,220,1);
&:before {
width: 0;
bottom: 0;
height: 0;
left: -24px;
content: "";
position: absolute;
border: 12px rgba(220,220,220,1) solid;
border-top-color: transparent;
border-left-color: transparent;
}
&:after {
width: 0;
bottom: 0;
height: 0;
content: "";
right: -23px;
position: absolute;
border: 12px rgba(220,220,220,1) solid;
border-top-color: transparent;
border-right-color: transparent;
}
&:nth-of-type(2n+1) {
background-color: rgba(210,210,210,1);
&:before {
border-right-color: rgba(210,210,210,1);
border-bottom-color: rgba(210,210,210,1);
}
&:after {
border-left-color: rgba(210,210,210,1);
border-bottom-color: rgba(210,210,210,1);
}
}
>[data-sr]
{
right: 5px;
opacity: 0;
z-index: 2;
padding: 2px 4px;
border-radius: 50%;
position: absolute;
top: calc(50% - 8px);
transition-duration: .7s;
background-color: rgba(0,0,0,.05);
&:before {
content: '×';
}
&:hover {
background-color: rgba(0,0,0,.1);
}
}
&:hover>[data-sr] {
opacity: 1;
}
&[data-sr]
{
min-width: 25px;
padding: 7.5px 0;
color: transparent;
}
&-active
{
#extend .tab;
&, &:nth-of-type(n)
{
background-color: rgba(180,180,180,1);
&:before {
border-right-color: rgba(180,180,180,1);
border-bottom-color: rgba(180,180,180,1);
}
&:after {
border-left-color: rgba(180,180,180,1);
border-bottom-color: rgba(180,180,180,1);
}
}
#for $index from 1 through 25
{
&:nth-last-of-type(#{$index}) {
z-index: $index - 1;
#for $sub-index from $index through 1
{
&~.tab:nth-last-of-type(#{$sub-index})
{
z-index: $sub-index - 1;
}
}
}
}
}
}
}
}
index.scss
#import "../libs/reset/scss/_reset.scss";
#import "_widget_tab.scss";
html>body
{
>section
{
margin: 0 15px;
overflow: hidden;
}
}
The main index.html
<!DOCTYPE html>
<html>
<head>
<title>
Choir...
</title>
<meta charset="UTF-8">
<link rel="icon" href="#">
<link rel="stylesheet" href="web/css/sillon.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<aside>
Text...
</aside>
<section class="tab-container">
<nav class="tab-bar-chrome-like">
<a class="tab">
HTML5
<i data-sr></i>
</a>
<a class="tab">
SASS
<i data-sr></i>
</a>
<a class="tab-active">
Angular
<i data-sr></i>
</a>
<a class="tab">
Symfony
<i data-sr></i>
</a>
<a class="tab">
Spring
<i data-sr></i>
</a>
<a href="#" class="tab" data-sr>
.
</a>
</nav>
</section>
</body>
</html>
But Since there is no way yet to self reference code snippet, this the result

Try implementing each tab as a HTMLGenericControl("div") and then apply the following jquery scripts on the client side.
jQuery draggable tabs
As far as the minimising of the tabs, you could simply add a small image to the right of the tab content which toggles the width of the tab based on the jquery click event handler.