Background problem in ASP.NET using Visual Studio 2017 - c#

I'm creating a website in Visual Studio 2017, and I want to give it background images and colors.
The problem is that it isn't responding when I'm doing it in the design mode or if I'm using HTML.
Hhere's what I've tried - please tell me what I can do:
<style type="text/css">
.auto-style1 {
width: 100%;
margin-left: 64px;
}
.auto-style2 {
width: 315px;
height: 60px;
}
.auto-style6 {
color: #C2C5C5;
background-color: #FF0066;
}
.auto-style7 {
color: #563C24;
background-color: #FF0066;
}
.auto-style8 {
color: #F6AC2A;
background-color: #FF0066;
}
.auto-style9 {
color: #302805;
background-color: #FF0066;
}
.auto-style10 {
width: 178px;
height: 60px;
}
.auto-style11 {
width: 175px;
height: 60px;
}
.auto-style12 {
width: 177px;
height: 60px;
}
.auto-style13 {
background-color: #FF0066;
}
.auto-style14 {
text-align: center;
}
.auto-style15 {
background-image: url(wand.jpg);
}
</style>

Related

Custom InputFile in Blazor

I want to replace the InputFile's rectangle with 'attach Icon'. I tried to set the URL of the icon to 'background-image' of InputFile but it had no effect.
This only demonstrates how to change the color of InputFile, not exactly what I need.

I use something similar for a colour picker.
<label for="fileinput" class="label-wrapper">
<span class="oi oi-paperclip"></span>
<InputFile id="fileinput" class="custom-input-hide" />
</label>
<style>
.label-wrapper:hover {
cursor: pointer;
}
.custom-input-hide {
width: 0;
height: 0;
overflow: hidden;
}
</style>
BlazorRepl

I think maybe this is what you are looking for.
HTML/Razor code
<div class="file-input-zone">
<InputFile />
</div>
CSS
<style>
.file-input-zone {
display: flex;
align-items: center;
justify-content: center;
background-color: transparent;
color: black;
cursor: pointer;
position: relative;
width: 120px;
height: 120px;
background-image: url('paper-clip.png');
}
.file-input-zone:hover {
background-color: lightblue;
}
.file-input-zone input[type=file] {
position: absolute;
width: 100%;
height: 100%;
opacity: 0;
cursor: pointer;
}
</style>
In the CSS code above, the file paper-clip.png is installed in wwwroot directory.
The button will look like a transparent paper-clip. In the image below, color changes on hover as well.

Rotativa HTML to PDF on ASP.NET MVC?

I'm using Rotativa resources to create PDF files from my HTML page on an MVC ASP.NET project. Here is my code
...........
[HttpGet]
public ActionResult DownloadCertificate()
{
return View();
}
public ActionResult DownloadViewPDF()
{
return new Rotativa.ViewAsPdf("DownloadCertificate") { FileName = "TestViewAsPdf.pdf" };
}
priblem is it not generating my desire view's pdf.instate of it its generating my home page pdf..
my view for ActionResult DownloadCertificate() action =>
#{
ViewBag.Title = "DownloadCertificate";
Layout = "";
}
<html>
<head id="Head1">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<title>
Krogarna.se Certificate
</title>
<style type="text/css" media="print">
{
left: 0px !important;
width: 11in !important;
height: 8.5in !important;
font-size: 107% !important;
}
</style>
<style type="text/css" media="all">
#top {
height: 100%;
}
#position_me {
left: 0;
}
.SlideBackGround {
height: 650px;
width: 880px;
position: fixed;
margin: 10px 10px 10px 10px;
background-color: white;
background-image: url(http://dotnet.ondev.com/ft63/content/sections/certificates/upload/krogarnase/frame.png);
background-size: 880px 650px;
background-repeat: no-repeat;
z-index: 2;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://dotnet.ondev.com/ft63/content/sections/certificates/upload/krogarnase/frame.png',sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='frame.png',sizingMethod='scale')";
}
.MiddlePart {
height: 170px;
width: 670px;
position: fixed;
left: 125px;
top: 80px;
background-image: url(http://dotnet.ondev.com/ft63/content/sections/certificates/upload/krogarnase/middle_part.png);
background-size: 670px 170px;
background-repeat: no-repeat;
z-index: 5;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://dotnet.ondev.com/ft63/content/sections/certificates/upload/krogarnase/middle_part.png',sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='middle_part.png',sizingMethod='scale')";
}
.Seal {
height: 90px;
width: 90px;
position: fixed;
left: 415px;
top: 420px;
background-image: url(http://dotnet.ondev.com/ft63/content/sections/certificates/upload/krogarnase/sigill.png);
background-size: 90px 90px;
background-repeat: no-repeat;
z-index: 5;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://dotnet.ondev.com/ft63/content/sections/certificates/upload/krogarnase/sigill.png',sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='sigill.png',sizingMethod='scale')";
}
.Ribbon {
width: 60px;
height: 90px;
position: fixed;
left: 435px;
top: 520px;
background-image: url(http://dotnet.ondev.com/ft63/content/sections/certificates/upload/krogarnase/band.png);
background-size: 60px 90px;
background-repeat: no-repeat;
z-index: 5;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://dotnet.ondev.com/ft63/content/sections/certificates/upload/krogarnase/band.png',sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='band.png',sizingMethod='scale')";
}
.Signature {
width: 180px;
height: 90px;
position: fixed;
left: 582px;
top: 517px;
background-image: url(http://dotnet.ondev.com/ft63/content/sections/certificates/upload/krogarnase/signature.png);
background-size: 180px 90px;
background-repeat: no-repeat;
z-index: 11;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://dotnet.ondev.com/ft63/content/sections/certificates/upload/krogarnase/signature.png',sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='signature.png',sizingMethod='scale')";
}
.DateLine {
width: 300px;
position: fixed;
left: 112px;
top: 570px;
z-index: 11;
}
.ExaminerLine {
width: 300px;
position: fixed;
left: 500px;
top: 570px;
z-index: 11;
}
.ExaminerText {
width: 270px;
position: fixed;
left: 632px;
top: 585px;
color: #8B7B67;
z-index: 11;
}
.DateText {
width: 270px;
position: fixed;
left: 232px;
top: 585px;
z-index: 11;
color: #8B7B67;
}
.ParagraphSmall {
height: 200px;
width: 500px;
position: fixed;
left: 200px;
top: 350px;
font-size: 13px;
text-align: center;
z-index: 11;
color: #8B7B67;
}
.ParagraphMedium {
height: 200px;
width: 420px;
position: fixed;
left: 240px;
top: 260px;
font-size: 14px;
text-align: center;
z-index: 11;
color: #8B7B67;
}
.HeadingLarge {
height: 200px;
width: 600px;
position: fixed;
left: 330px;
top: 130px;
font-size: 66px;
z-index: 11;
color: #8B7B67;
}
.MiddleLine {
width: 720px;
position: fixed;
left: 100px;
top: 330px;
z-index: 11;
color: #8B7B67;
}
.StudentName {
font-weight: bold;
height: 200px;
width: 720px;
position: fixed;
left: 100px;
top: 310px;
font-size: 18px;
text-align: center;
z-index: 11;
color: #8B7B67;
}
.CompletionDate {
position: fixed;
left: 225px;
top: 555px;
z-index: 11;
color: #8B7B67;
text-align: center;
}
</style>
</head>
<body>
<div class="SlideBackGround">
</div>
<div class="MiddlePart">
</div>
<div class="HeadingLarge">Kursintyg</div>
<div class="ParagraphMedium">
HÄRMED INTYGAS
ATT NEDANSTÅENDE PERSON KLARAT UTBILDNINGEN
SERVERINGSTILLSTÅND
</div>
<div class="ParagraphSmall">
Ni har visat prov på förståelse och kunnighet inom området alkoholservering. De 4 delar
som avhandlats är: alkoholpolitik, tillsyn, servering samt mat, lokal och utrustning. Ni har
efter denna utbildning de teoretiska kunskaper som krävs för att servera alkoholhaltiga
drycker.
</div>
<div class="Seal"></div>
<div class="Ribbon"></div>
<hr class="DateLine" />
<hr class="ExaminerLine" />
<hr class="MiddleLine" />
<div class="DateText">Datum</div>
<div class="ExaminerText">Examiner</div>
<div class="Signature"></div>
<div id="CompletionDatePanel" class="CompletionDate">
<span id="CompletionDateLabel">1/1/2014</span>
</div>
<div id="StudentNamePanel" class="StudentName">
<span id="StudentNameLabel">John Doe</span>
</div>
</body>
</html>
now instate of creating above views pdf it is generating my home(login) view ..cant make any sense why ...
if there anyone who can help me about this.or can give me any tip how to get rid of this . or why i have done wrong. this will be greatfull.thanks in advance.....

Maybe Rotativa is running as a different as the one logged into the app, thus, when Rotativa tries to display the page to generate the pdf, asp.mvc tells that that use users is not authenticated and redirects to the home page.
To avoid that issue, you have to autorize all users to excecute the action:
[Authorize]
[HttpGet]
public ActionResult DownloadCertificate()
{
return View();
}

Could use help determining source of 500 (Internal Server Error) here

My method for handling the request is
[HttpPost]
public ActionResult SubmitNew ( SolutionSubmission SS )
{
// Going to move this to model later ..
using ( SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["LocalJsPracticeDb"].ConnectionString) )
{
SqlCommand cmd = new SqlCommand("AddSolution", con);
cmd.CommandType = CommandType.StoredProcedure;
cmd.Parameters.AddWithValue("#problem_id", SS.ProblemId);
cmd.Parameters.AddWithValue("#solver", SS.Solver);
cmd.Parameters.AddWithValue("#solution_code", SS.SolutionCode);
cmd.Parameters.AddWithValue("#test_code", SS.TestCode);
/*
cmd.Parameters.AddWithValue("#problem_id", 1);
cmd.Parameters.AddWithValue("#solver", "Jeff");
cmd.Parameters.AddWithValue("#solution_code", "<span>Hehe</span>");
cmd.Parameters.AddWithValue("#test_code", "<p>Yo</p>"); */
con.Open();
cmd.ExecuteNonQuery();
}
return Json(new { success = true }) ; // TEST
}
// Going to move this to model later ...
public class SolutionSubmission
{
public int ProblemId { get; set; }
public string Solver { get; set; }
public string SolutionCode { get; set; }
public string TestCode { get; set; }
}
and I call the request with
$('#submit-solution').click(function () {
var rowData = {
ProblemId : $('input[name="problem_id"]').val(),
Solver : $('input[name="solver"]').val(),
SolutionCode: $('#solution').html(),
TestCode : $('#testfuncs').html()
};
console.log(rowData); // TEST
$.ajax({
url: 'SubmitNew',
method: 'POST',
data: rowData,
success: function (retobj) {
// ...
},
error: function ( ) {
// ...
}
})
});
I've verified that rowData is valid in my test case: it is (stringified)
{"ProblemId":"1","Solver":"adas","SolutionCode":"\n\n <div class=\"CodeMirror cm-s-default\"><div style=\"overflow: hidden; position: relative; width: 3px; height: 0px; top: 4px; left: 4px;\"><textarea autocorrect=\"off\" autocapitalize=\"off\" spellcheck=\"false\" style=\"position: absolute; padding: 0px; width: 1000px; height: 1em; outline: none;\" tabindex=\"0\"></textarea></div><div class=\"CodeMirror-vscrollbar\" cm-not-content=\"true\"><div style=\"min-width: 1px; height: 0px;\"></div></div><div class=\"CodeMirror-hscrollbar\" cm-not-content=\"true\"><div style=\"height: 100%; min-height: 1px; width: 0px;\"></div></div><div class=\"CodeMirror-scrollbar-filler\" cm-not-content=\"true\"></div><div class=\"CodeMirror-gutter-filler\" cm-not-content=\"true\"></div><div class=\"CodeMirror-scroll\" tabindex=\"-1\"><div class=\"CodeMirror-sizer\" style=\"margin-left: 0px; margin-bottom: -23px; border-right-width: 7px; min-height: 48px; min-width: 253.208px; padding-right: 0px; padding-bottom: 0px;\"><div style=\"position: relative; top: 0px;\"><div class=\"CodeMirror-lines\"><div style=\"position: relative; outline: none;\"><div class=\"CodeMirror-measure\"><span><span>​</span>x</span></div><div class=\"CodeMirror-measure\"></div><div style=\"position: relative; z-index: 1;\"></div><div class=\"CodeMirror-cursors\"><div class=\"CodeMirror-cursor\" style=\"left: 4px; top: 0px; height: 20px;\"> </div></div><div class=\"CodeMirror-code\"><pre class=\" CodeMirror-line \"><span style=\"padding-right: 0.1px;\"><span class=\"cm-keyword\">function</span> <span class=\"cm-def\">myScript</span>(){<span class=\"cm-keyword\">return</span> <span class=\"cm-number\">100</span>;}</span></pre><pre class=\" CodeMirror-line \"><span style=\"padding-right: 0.1px;\"><span cm-text=\"\">​</span></span></pre></div></div></div></div></div><div style=\"position: absolute; height: 7px; width: 1px; top: 48px;\"></div><div class=\"CodeMirror-gutters\" style=\"display: none; height: 308px;\"></div></div></div>","TestCode":"\n\n <div class=\"CodeMirror cm-s-default\"><div style=\"overflow: hidden; position: relative; width: 3px; height: 0px; top: 4px; left: 4px;\"><textarea autocorrect=\"off\" autocapitalize=\"off\" spellcheck=\"false\" style=\"position: absolute; padding: 0px; width: 1000px; height: 1em; outline: none;\" tabindex=\"0\"></textarea></div><div class=\"CodeMirror-vscrollbar\" cm-not-content=\"true\"><div style=\"min-width: 1px; height: 0px;\"></div></div><div class=\"CodeMirror-hscrollbar\" cm-not-content=\"true\"><div style=\"height: 100%; min-height: 1px; width: 0px;\"></div></div><div class=\"CodeMirror-scrollbar-filler\" cm-not-content=\"true\"></div><div class=\"CodeMirror-gutter-filler\" cm-not-content=\"true\"></div><div class=\"CodeMirror-scroll\" tabindex=\"-1\"><div class=\"CodeMirror-sizer\" style=\"margin-left: 0px; margin-bottom: -23px; border-right-width: 7px; min-height: 48px; min-width: 253.208px; padding-right: 0px; padding-bottom: 0px;\"><div style=\"position: relative; top: 0px;\"><div class=\"CodeMirror-lines\"><div style=\"position: relative; outline: none;\"><div class=\"CodeMirror-measure\"></div><div class=\"CodeMirror-measure\"></div><div style=\"position: relative; z-index: 1;\"></div><div class=\"CodeMirror-cursors\"><div class=\"CodeMirror-cursor\" style=\"left: 4px; top: 0px; height: 20px;\"> </div></div><div class=\"CodeMirror-code\"><pre class=\" CodeMirror-line \"><span style=\"padding-right: 0.1px;\"><span class=\"cm-keyword\">function</span> <span class=\"cm-def\">myScript</span>(){<span class=\"cm-keyword\">return</span> <span class=\"cm-number\">100</span>;}</span></pre><pre class=\" CodeMirror-line \"><span style=\"padding-right: 0.1px;\"><span cm-text=\"\">​</span></span></pre></div></div></div></div></div><div style=\"position: absolute; height: 7px; width: 1px; top: 48px;\"></div><div class=\"CodeMirror-gutters\" style=\"display: none; height: 308px;\"></div></div></div>"}
For some reason, though, I'm getting a 500 (Internal Server Error). I get the same error when I substitute in
/*
cmd.Parameters.AddWithValue("#problem_id", SS.ProblemId);
cmd.Parameters.AddWithValue("#solver", SS.Solver);
cmd.Parameters.AddWithValue("#solution_code", SS.SolutionCode);
cmd.Parameters.AddWithValue("#test_code", SS.TestCode);
*/
cmd.Parameters.AddWithValue("#problem_id", 1);
cmd.Parameters.AddWithValue("#solver", "Jeff");
cmd.Parameters.AddWithValue("#solution_code", "<span>Hehe</span>");
cmd.Parameters.AddWithValue("#test_code", "<p>Yo</p>");
Hence there there is some problem with my SubmitNew method that doesn't have to do with the body of the method. Any idea what could be wrong?

Ok, guys. I fixed it by adding
dataType: 'json',
processData: false,
to the JSON I was passing to the server.

Xpath in IE11 not working

I am using Selenium in IE 11 with C# to automate some task. I am able to open URL in IE and click on some button but i stuck in one problem like other xpath i click on one image link but it always show xpath not found.
Here is the HTML code of the link
I tried it with both ID name src etc but no success.
<li>
<INPUT disabled id=ucTicketDetail1_btnClose title="- Cannot close
due to CM stage. Ticket must be in CM Approved or Preproduction Approved stage.
-
You don't have permission to close.
- No longer editable." style="BORDER-LEFT-WIDTH: 0px;
BORDER-RIGHT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: ; BORDER-TOP- WIDTH: 0px" src="../images/tasks_disabled.gif" type=image name=ucTicketDetail1$btnClose>
<li>
Selenium Code
driver.FindElement(By.XPath("//input[#id='ucTicketDetail1_btnClose']")).Click();
Please help how could I write xpath for this as this application only open in IE.
here is the extended code with style
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style>
LI {
margin: 0;
padding: 0;
}
LI {
list-style: none;
}
LI {
float: left;
line-height: 15px;
margin: 0px 0px 0px 5px;
}
LI {
float: left;
line-height: 15px;
margin: 0px 0px 0px 5px;
}
UL {
margin: 0;
padding: 0;
}
UL {
list-style-image: none;
list-style-position: outside;
list-style-type: none;
}
UL {
list-style-image: none;
list-style-position: outside;
list-style-type: none;
}
DIV {
margin: 0;
padding: 0;
}
.TicketDetailHeaderRight {
float: right;
}
.TicketDetailHeader {
margin: 0px;
padding: 0 5px 5px;
min-height: 15px;
}
.SectionBody {
margin: 5px;
}
.Section {
border: 1px solid #000;
}
FORM {
margin: 0;
padding: 0;
}
BODY {
color: #000;
}
BODY {
margin: 0;
padding: 0;
}
BODY {
font: 13px/1.231 arial,helvetica,clean,sans-serif;
font-size: ;
font: x-small;
}
BODY {
margin: 0px;
padding: 0px;
color: #000000;
font-family: Verdana;
font-size: 83%;
line-height: normal;
}
HTML {
margin: 0px;
padding: 0px;
color: #000000;
font-family: Verdana;
font-size: 83%;
line-height: normal;
}
INPUT {
margin: 0;
padding: 0;
}
INPUT {
font-family: inherit;
font-size: inherit;
font-weight: inherit;
}
</style>
</head>
<BODY><FORM id=formTicketDetail method=post name=formTicketDetail action=wfTicketDetail.aspx?TicketId=C110041540 _events="[object Object]">
<DIV class=Section>
<DIV class=SectionBody>
<DIV class=TicketDetailHeader>
<DIV id=ucTicketDetail1_divBtnBar class=TicketDetailHeaderRight>
<DIV id=ucTicketDetail1_updatePanelPostSaveActions>
<DIV id=ucTicketDetail1_divPostSaveActions class=PostSaveActions>
<UL>
<LI><INPUT disabled id=ucTicketDetail1_btnClose title="- Cannot close due to CM stage. Ticket must be in CM Approved or Preproduction Approved stage.
- You don't have permission to close.
- No longer editable." style="BORDER-LEFT-WIDTH: 0px; BORDER-RIGHT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-TOP-WIDTH: 0px" src="../images/tasks_disabled.gif" type=image name=ucTicketDetail1$btnClose> </LI></UL></DIV></DIV></DIV></DIV></DIV></DIV></FORM></BODY>
</html>

i solve this question , actually image button is located under 2 iframe. I switch to Iframe then it start working.
Here is the code
driver.SwitchTo().Frame("wfMainIFrame");
driver.SwitchTo().Frame("wfCaseIFrame");
string atb = driver.FindElement(By.XPath("//input[#id='ucTicketDetail1_btnClose']")).GetAttribute("disabled");
string title = driver.FindElement(By.XPath("//input[#id='ucTicketDetail1_btnClose']")).GetAttribute("title");
Thanks for the help.

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.

Categories

Resources