Commit ef60b522 authored by Thodoris Papadopoulos's avatar Thodoris Papadopoulos

examples for buttons and inputs added

parent 27aa0a5f
/*! defaut button */
.btn {
font-size: 1rem;
padding: 15px 25px;
}
.noHover{
pointer-events: none;
}
<!DOCTYPE html>
<html lang="el" class="h-100">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>GOV.GR - Buttons</title>
<link rel="shortcut icon" href="../../images/gov_logo_16x16_favicon.png">
<!-- Custom GOV.GR theme - This already includes Bootstrap 4 -->
<link href="../../css/govgr_bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="./button.css" rel="stylesheet">
</head>
<body class="h-100">
<main role="main" class="flex-shrink-0">
<div class="container">
<div class="d-flex flex-column align-items-start justify-content-center">
<div class="bd-highlight flex-row p-4">
<button type="button" class="btn btn-primary btn-lg font-weight-bold rounded-6" >Primary</button>
<button type="button" class="btn btn-secondary btn-lg font-weight-bold rounded-6">Secondary</button>
<button type="button" class="btn btn-success btn-lg font-weight-bold rounded-6">Success</button>
<button type="button" class="btn btn-warning btn-lg font-weight-bold rounded-6">Warning</button>
<button type="button" class="btn btn-danger btn-lg font-weight-bold rounded-6">Danger</button>
</div>
<div class="bd-highlight flex-row p-4">
<button type="button" class="btn btn-primary font-weight-bold p-2 rounded-6">Primary</button>
<button type="button" class="btn btn-secondary font-weight-bold p-2 rounded-6">Secondary</button>
<button type="button" class="btn btn-success font-weight-bold p-2 rounded-6">Success</button>
<button type="button" class="btn btn-warning font-weight-bold p-2 rounded-6">Warning</button>
<button type="button" class="btn btn-danger font-weight-bold p-2 rounded-6">Danger</button>
</div>
<div class="bd-highlight p-4">
<div class="btn-group rounded-6 noHover" role="group" aria-label="Button with arrow">
<button type="button" class="btn btn-primary">Είσοδος στην υπηρεσία</button>
<button type="button" class="btn btn-primary">
<svg width="2em" height="2em" viewBox="0 0 16 16" class="bi bi-arrow-right-circle-fill" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-8.354 2.646a.5.5 0 0 0 .708.708l3-3a.5.5 0 0 0 0-.708l-3-3a.5.5 0 1 0-.708.708L9.793 7.5H5a.5.5 0 0 0 0 1h4.793l-2.147 2.146z"/>
</svg>
</button>
</div>
</div>
</div>
</div>
</main>
</html>
<!DOCTYPE html>
<html lang="el" class="h-100">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>GOV.GR - Inputs</title>
<link rel="shortcut icon" href="../../images/gov_logo_16x16_favicon.png">
<!-- Custom GOV.GR theme - This already includes Bootstrap 4 -->
<link href="../../css/govgr_bootstrap.min.css" rel="stylesheet">
</head>
<body class="h-100">
<main role="main" class="flex-shrink-0">
<div class="container">
<div class="">
<div id="input-fields" class="p-4">
<form>
<div role="group" class="form-group">
<label for="name" class="d-block">
Όνομα
</label>
<div class="bv-no-focus-ring">
<input id="name" type="text" placeholder="Συμπληρώστε το ονοματεπώνυμό σας" class="form-control is-valid" value="Θοδωρής Παπαδόπουλος"/>
<div class="valid-feedback"> Looks good! </div>
</div>
</div>
<div role="group" class="form-group">
<label for="email" class="d-block">
Email
</label>
<div class="bv-no-focus-ring">
<input id="email" type="text" placeholder="π.χ.: example@gov.gr" class="form-control is-invalid" />
<div class="invalid-feedback"> Παρακαλούμε συμπληρώστε το email σας. </div>
</div>
</div>
<div role="group" class="form-group">
<label for="comments" class="d-block form-label">
Σχόλια
</label>
<div class="bv-no-focus-ring">
<textarea id="comments" placeholder="Γράψτε εδώ..." rows="5" wrap="soft" class="form-control"></textarea>
</div>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
<label class="form-check-label" for="defaultCheck1">
Default checkbox
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="defaultCheck2" disabled>
<label class="form-check-label" for="defaultCheck2">
Disabled checkbox
</label>
</div>
</form>
</div>
</div>
</div>
</main>
</html>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment