Skip to content

Instantly share code, notes, and snippets.

@KarolinaCzo
Created September 4, 2018 21:40
Show Gist options
  • Save KarolinaCzo/094bb553a3765febe5c836b17bfa9e28 to your computer and use it in GitHub Desktop.
Save KarolinaCzo/094bb553a3765febe5c836b17bfa9e28 to your computer and use it in GitHub Desktop.
1) HTML:
<!-- New case -->
<div class="container card">
<div class="card-body">
<div class="row">
<div class="col-12">
<ngb-tabset class="new-case-details-tabset">
<ngb-tab title="Widok formularza sprawy">
<ng-template ngbTabContent>
<p>Dokument pdf Oli?</p>
</ng-template>
</ngb-tab>
<ngb-tab title="Pliki żródłowe i komentarze">
<ng-template ngbTabContent>
<div class="row">
<div class="col-8">
<p class="center-line"></p>
</div>
<div class="col-4 text-right">
<p>Sprawa<span>MKW/0326/JZ/2018</span><span>sąd</span></p>
</div>
</div>
<form>
<div class="row">
<div class="col-12">
<div class="form-group">
<label for="exampleFormControlTextarea1">Komentarze</label>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
</div>
</div>
</div>
</form>
<div class="row">
<div class="col-12">
<p>Pliki</p>
</div>
</div>
</ng-template>
</ngb-tab>
</ngb-tabset>
</div>
</div>
</div>
</div>
2) CSS:
.container {
margin-top: 5rem;
padding: 0;
}
.card {
margin-top: 5rem;
}
.card-body {
padding: 0;
}
.center-line {
width: 100%;
text-align: center;
border-bottom: 1px solid #000;
line-height: 0.1em;
margin: 10px 0 20px;
}
p span {
background: #fff;
padding: 0 10px;
}
3) MAIN CSS:
body {
background-color: #f8f8f8;
}
.new-case-details-tabset .nav .nav-item .nav-link {
width: 569px;
text-align: center;
color: grey;
border-top: none;
}
.new-case-details-tabset ul li:first-child a {
border-left: none;
}
.new-case-details-tabset ul li:nth-child(2) a {
border-right: none;
}
.new-case-details-tabset .tab-content {
padding: 3rem;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment