Reordered modules
Switched the ordering of input_control and navigation. Now input_control comes before navigation, improving certain aspects of the code.
This commit is contained in:
Angelos Chalaris
parent
2c37b56ab0
commit
8b007dd20e
228
dist/mini-dark.css
vendored
228
dist/mini-dark.css
vendored
|
|
@ -678,120 +678,6 @@ figcaption {
|
|||
}
|
||||
}
|
||||
|
||||
/*
|
||||
Definitions for navigation elements.
|
||||
*/
|
||||
header {
|
||||
display: block;
|
||||
height: 2.75rem;
|
||||
background: #151c1f;
|
||||
color: #f5f5f5;
|
||||
padding: 0.125rem 0.5rem;
|
||||
white-space: nowrap;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
header .logo {
|
||||
color: #f5f5f5;
|
||||
font-size: 1.75rem;
|
||||
line-height: 1.3125em;
|
||||
margin: 0.0625rem 0.375rem 0.0625rem 0.0625rem;
|
||||
transition: opacity 0.3s;
|
||||
}
|
||||
|
||||
header button, header [type="button"],
|
||||
header a.button, header label.button, header .button,
|
||||
header a[role="button"], header label[role="button"], header [role="button"] {
|
||||
background: #151c1f;
|
||||
color: #f5f5f5;
|
||||
vertical-align: top;
|
||||
margin: 0.125rem 0;
|
||||
}
|
||||
|
||||
header button:hover, header button:focus, header [type="button"]:hover, header [type="button"]:focus,
|
||||
header a.button:hover,
|
||||
header a.button:focus, header label.button:hover, header label.button:focus, header .button:hover, header .button:focus,
|
||||
header a[role="button"]:hover,
|
||||
header a[role="button"]:focus, header label[role="button"]:hover, header label[role="button"]:focus, header [role="button"]:hover, header [role="button"]:focus {
|
||||
background: #192024;
|
||||
}
|
||||
|
||||
header .logo, header a.button, header a[role="button"] {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
nav {
|
||||
display: block;
|
||||
background: #37474f;
|
||||
border: 1px solid #324148;
|
||||
margin: 0.5rem;
|
||||
padding: 0.75rem 1rem;
|
||||
}
|
||||
|
||||
nav a, nav a:visited {
|
||||
display: block;
|
||||
color: #3e79bd;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
nav .sublink-1 {
|
||||
padding-left: 1rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
nav .sublink-1:before {
|
||||
position: absolute;
|
||||
left: 0.1875rem;
|
||||
top: -1px;
|
||||
content: '';
|
||||
height: 100%;
|
||||
border: 1px solid #616161;
|
||||
border-left: 0;
|
||||
}
|
||||
|
||||
nav .sublink-2 {
|
||||
padding-left: 2rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
nav .sublink-2:before {
|
||||
position: absolute;
|
||||
left: 0.1875rem;
|
||||
top: -1px;
|
||||
content: '';
|
||||
height: 100%;
|
||||
border: 1px solid #616161;
|
||||
border-left: 0;
|
||||
}
|
||||
|
||||
footer {
|
||||
display: block;
|
||||
background: #192024;
|
||||
color: #f5f5f5;
|
||||
margin: 1rem 0 0;
|
||||
padding: 1.5rem 0.5rem 0.75rem;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
footer a, footer a:visited {
|
||||
color: #0288d1;
|
||||
}
|
||||
|
||||
header.sticky, footer.sticky {
|
||||
position: -webkit-sticky;
|
||||
position: sticky;
|
||||
z-index: 1101;
|
||||
}
|
||||
|
||||
header.sticky {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
footer.sticky {
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
/*
|
||||
Definitions for forms and input elements.
|
||||
*/
|
||||
|
|
@ -1152,6 +1038,120 @@ button.large, [type="button"].large, [type="submit"].large,
|
|||
padding: 0.75rem 1.125rem;
|
||||
}
|
||||
|
||||
/*
|
||||
Definitions for navigation elements.
|
||||
*/
|
||||
header {
|
||||
display: block;
|
||||
height: 2.75rem;
|
||||
background: #151c1f;
|
||||
color: #f5f5f5;
|
||||
padding: 0.125rem 0.5rem;
|
||||
white-space: nowrap;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
header .logo {
|
||||
color: #f5f5f5;
|
||||
font-size: 1.75rem;
|
||||
line-height: 1.3125em;
|
||||
margin: 0.0625rem 0.375rem 0.0625rem 0.0625rem;
|
||||
transition: opacity 0.3s;
|
||||
}
|
||||
|
||||
header button, header [type="button"],
|
||||
header a.button, header label.button, header .button,
|
||||
header a[role="button"], header label[role="button"], header [role="button"] {
|
||||
background: #151c1f;
|
||||
color: #f5f5f5;
|
||||
vertical-align: top;
|
||||
margin: 0.125rem 0;
|
||||
}
|
||||
|
||||
header button:hover, header button:focus, header [type="button"]:hover, header [type="button"]:focus,
|
||||
header a.button:hover,
|
||||
header a.button:focus, header label.button:hover, header label.button:focus, header .button:hover, header .button:focus,
|
||||
header a[role="button"]:hover,
|
||||
header a[role="button"]:focus, header label[role="button"]:hover, header label[role="button"]:focus, header [role="button"]:hover, header [role="button"]:focus {
|
||||
background: #192024;
|
||||
}
|
||||
|
||||
header .logo, header a.button, header a[role="button"] {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
nav {
|
||||
display: block;
|
||||
background: #37474f;
|
||||
border: 1px solid #324148;
|
||||
margin: 0.5rem;
|
||||
padding: 0.75rem 1rem;
|
||||
}
|
||||
|
||||
nav a, nav a:visited {
|
||||
display: block;
|
||||
color: #3e79bd;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
nav .sublink-1 {
|
||||
padding-left: 1rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
nav .sublink-1:before {
|
||||
position: absolute;
|
||||
left: 0.1875rem;
|
||||
top: -1px;
|
||||
content: '';
|
||||
height: 100%;
|
||||
border: 1px solid #616161;
|
||||
border-left: 0;
|
||||
}
|
||||
|
||||
nav .sublink-2 {
|
||||
padding-left: 2rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
nav .sublink-2:before {
|
||||
position: absolute;
|
||||
left: 0.1875rem;
|
||||
top: -1px;
|
||||
content: '';
|
||||
height: 100%;
|
||||
border: 1px solid #616161;
|
||||
border-left: 0;
|
||||
}
|
||||
|
||||
footer {
|
||||
display: block;
|
||||
background: #192024;
|
||||
color: #f5f5f5;
|
||||
margin: 1rem 0 0;
|
||||
padding: 1.5rem 0.5rem 0.75rem;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
footer a, footer a:visited {
|
||||
color: #0288d1;
|
||||
}
|
||||
|
||||
header.sticky, footer.sticky {
|
||||
position: -webkit-sticky;
|
||||
position: sticky;
|
||||
z-index: 1101;
|
||||
}
|
||||
|
||||
header.sticky {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
footer.sticky {
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
/*
|
||||
Definitions for the responsive table component.
|
||||
*/
|
||||
|
|
|
|||
2
dist/mini-dark.min.css
vendored
2
dist/mini-dark.min.css
vendored
File diff suppressed because one or more lines are too long
228
dist/mini-default.css
vendored
228
dist/mini-default.css
vendored
|
|
@ -679,120 +679,6 @@ figcaption {
|
|||
}
|
||||
}
|
||||
|
||||
/*
|
||||
Definitions for navigation elements.
|
||||
*/
|
||||
header {
|
||||
display: block;
|
||||
height: 2.75rem;
|
||||
background: #12171a;
|
||||
color: #f5f5f5;
|
||||
padding: 0.125rem 0.5rem;
|
||||
white-space: nowrap;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
header .logo {
|
||||
color: #f5f5f5;
|
||||
font-size: 1.75rem;
|
||||
line-height: 1.3125em;
|
||||
margin: 0.0625rem 0.375rem 0.0625rem 0.0625rem;
|
||||
transition: opacity 0.3s;
|
||||
}
|
||||
|
||||
header button, header [type="button"],
|
||||
header a.button, header label.button, header .button,
|
||||
header a[role="button"], header label[role="button"], header [role="button"] {
|
||||
background: #12171a;
|
||||
color: #f5f5f5;
|
||||
vertical-align: top;
|
||||
margin: 0.125rem 0;
|
||||
}
|
||||
|
||||
header button:hover, header button:focus, header [type="button"]:hover, header [type="button"]:focus,
|
||||
header a.button:hover,
|
||||
header a.button:focus, header label.button:hover, header label.button:focus, header .button:hover, header .button:focus,
|
||||
header a[role="button"]:hover,
|
||||
header a[role="button"]:focus, header label[role="button"]:hover, header label[role="button"]:focus, header [role="button"]:hover, header [role="button"]:focus {
|
||||
background: #20292e;
|
||||
}
|
||||
|
||||
header .logo, header a.button, header a[role="button"] {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
nav {
|
||||
display: block;
|
||||
background: #eceff1;
|
||||
border: 1px solid #c9c9c9;
|
||||
margin: 0.5rem;
|
||||
padding: 0.75rem 1rem;
|
||||
}
|
||||
|
||||
nav a, nav a:visited {
|
||||
display: block;
|
||||
color: #145caf;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
nav .sublink-1 {
|
||||
padding-left: 1rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
nav .sublink-1:before {
|
||||
position: absolute;
|
||||
left: 0.1875rem;
|
||||
top: -1px;
|
||||
content: '';
|
||||
height: 100%;
|
||||
border: 1px solid #bdbdbd;
|
||||
border-left: 0;
|
||||
}
|
||||
|
||||
nav .sublink-2 {
|
||||
padding-left: 2rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
nav .sublink-2:before {
|
||||
position: absolute;
|
||||
left: 0.1875rem;
|
||||
top: -1px;
|
||||
content: '';
|
||||
height: 100%;
|
||||
border: 1px solid #bdbdbd;
|
||||
border-left: 0;
|
||||
}
|
||||
|
||||
footer {
|
||||
display: block;
|
||||
background: #192024;
|
||||
color: #f5f5f5;
|
||||
margin: 1rem 0 0;
|
||||
padding: 1.5rem 0.5rem 0.75rem;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
footer a, footer a:visited {
|
||||
color: #0288d1;
|
||||
}
|
||||
|
||||
header.sticky, footer.sticky {
|
||||
position: -webkit-sticky;
|
||||
position: sticky;
|
||||
z-index: 1101;
|
||||
}
|
||||
|
||||
header.sticky {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
footer.sticky {
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
/*
|
||||
Definitions for forms and input elements.
|
||||
*/
|
||||
|
|
@ -1151,6 +1037,120 @@ button.large, [type="button"].large, [type="submit"].large,
|
|||
padding: 0.75rem 1.125rem;
|
||||
}
|
||||
|
||||
/*
|
||||
Definitions for navigation elements.
|
||||
*/
|
||||
header {
|
||||
display: block;
|
||||
height: 2.75rem;
|
||||
background: #12171a;
|
||||
color: #f5f5f5;
|
||||
padding: 0.125rem 0.5rem;
|
||||
white-space: nowrap;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
header .logo {
|
||||
color: #f5f5f5;
|
||||
font-size: 1.75rem;
|
||||
line-height: 1.3125em;
|
||||
margin: 0.0625rem 0.375rem 0.0625rem 0.0625rem;
|
||||
transition: opacity 0.3s;
|
||||
}
|
||||
|
||||
header button, header [type="button"],
|
||||
header a.button, header label.button, header .button,
|
||||
header a[role="button"], header label[role="button"], header [role="button"] {
|
||||
background: #12171a;
|
||||
color: #f5f5f5;
|
||||
vertical-align: top;
|
||||
margin: 0.125rem 0;
|
||||
}
|
||||
|
||||
header button:hover, header button:focus, header [type="button"]:hover, header [type="button"]:focus,
|
||||
header a.button:hover,
|
||||
header a.button:focus, header label.button:hover, header label.button:focus, header .button:hover, header .button:focus,
|
||||
header a[role="button"]:hover,
|
||||
header a[role="button"]:focus, header label[role="button"]:hover, header label[role="button"]:focus, header [role="button"]:hover, header [role="button"]:focus {
|
||||
background: #20292e;
|
||||
}
|
||||
|
||||
header .logo, header a.button, header a[role="button"] {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
nav {
|
||||
display: block;
|
||||
background: #eceff1;
|
||||
border: 1px solid #c9c9c9;
|
||||
margin: 0.5rem;
|
||||
padding: 0.75rem 1rem;
|
||||
}
|
||||
|
||||
nav a, nav a:visited {
|
||||
display: block;
|
||||
color: #145caf;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
nav .sublink-1 {
|
||||
padding-left: 1rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
nav .sublink-1:before {
|
||||
position: absolute;
|
||||
left: 0.1875rem;
|
||||
top: -1px;
|
||||
content: '';
|
||||
height: 100%;
|
||||
border: 1px solid #bdbdbd;
|
||||
border-left: 0;
|
||||
}
|
||||
|
||||
nav .sublink-2 {
|
||||
padding-left: 2rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
nav .sublink-2:before {
|
||||
position: absolute;
|
||||
left: 0.1875rem;
|
||||
top: -1px;
|
||||
content: '';
|
||||
height: 100%;
|
||||
border: 1px solid #bdbdbd;
|
||||
border-left: 0;
|
||||
}
|
||||
|
||||
footer {
|
||||
display: block;
|
||||
background: #192024;
|
||||
color: #f5f5f5;
|
||||
margin: 1rem 0 0;
|
||||
padding: 1.5rem 0.5rem 0.75rem;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
footer a, footer a:visited {
|
||||
color: #0288d1;
|
||||
}
|
||||
|
||||
header.sticky, footer.sticky {
|
||||
position: -webkit-sticky;
|
||||
position: sticky;
|
||||
z-index: 1101;
|
||||
}
|
||||
|
||||
header.sticky {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
footer.sticky {
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
/*
|
||||
Definitions for the responsive table component.
|
||||
*/
|
||||
|
|
|
|||
2
dist/mini-default.min.css
vendored
2
dist/mini-default.min.css
vendored
File diff suppressed because one or more lines are too long
140
dist/mini-lite.css
vendored
140
dist/mini-lite.css
vendored
|
|
@ -677,76 +677,6 @@ figcaption {
|
|||
}
|
||||
}
|
||||
|
||||
/*
|
||||
Definitions for navigation elements.
|
||||
*/
|
||||
header {
|
||||
display: block;
|
||||
height: 2.75rem;
|
||||
background: #12171a;
|
||||
color: #f5f5f5;
|
||||
padding: 0.125rem 0.5rem;
|
||||
white-space: nowrap;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
header .logo {
|
||||
color: #f5f5f5;
|
||||
font-size: 1.75rem;
|
||||
line-height: 1.3125em;
|
||||
margin: 0.0625rem 0.375rem 0.0625rem 0.0625rem;
|
||||
transition: opacity 0.3s;
|
||||
}
|
||||
|
||||
header button, header [type="button"],
|
||||
header a.button, header label.button, header .button,
|
||||
header a[role="button"], header label[role="button"], header [role="button"] {
|
||||
background: #12171a;
|
||||
color: #f5f5f5;
|
||||
vertical-align: top;
|
||||
margin: 0.125rem 0;
|
||||
}
|
||||
|
||||
header button:hover, header button:focus, header [type="button"]:hover, header [type="button"]:focus,
|
||||
header a.button:hover,
|
||||
header a.button:focus, header label.button:hover, header label.button:focus, header .button:hover, header .button:focus,
|
||||
header a[role="button"]:hover,
|
||||
header a[role="button"]:focus, header label[role="button"]:hover, header label[role="button"]:focus, header [role="button"]:hover, header [role="button"]:focus {
|
||||
background: #20292e;
|
||||
}
|
||||
|
||||
header .logo, header a.button, header a[role="button"] {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
footer {
|
||||
display: block;
|
||||
background: #192024;
|
||||
color: #f5f5f5;
|
||||
margin: 1rem 0 0;
|
||||
padding: 1.5rem 0.5rem 0.75rem;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
footer a, footer a:visited {
|
||||
color: #0288d1;
|
||||
}
|
||||
|
||||
header.sticky, footer.sticky {
|
||||
position: -webkit-sticky;
|
||||
position: sticky;
|
||||
z-index: 1101;
|
||||
}
|
||||
|
||||
header.sticky {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
footer.sticky {
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
/*
|
||||
Definitions for forms and input elements.
|
||||
*/
|
||||
|
|
@ -1024,6 +954,76 @@ button.large, [type="button"].large, [type="submit"].large,
|
|||
padding: 0.75rem 1.125rem;
|
||||
}
|
||||
|
||||
/*
|
||||
Definitions for navigation elements.
|
||||
*/
|
||||
header {
|
||||
display: block;
|
||||
height: 2.75rem;
|
||||
background: #12171a;
|
||||
color: #f5f5f5;
|
||||
padding: 0.125rem 0.5rem;
|
||||
white-space: nowrap;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
header .logo {
|
||||
color: #f5f5f5;
|
||||
font-size: 1.75rem;
|
||||
line-height: 1.3125em;
|
||||
margin: 0.0625rem 0.375rem 0.0625rem 0.0625rem;
|
||||
transition: opacity 0.3s;
|
||||
}
|
||||
|
||||
header button, header [type="button"],
|
||||
header a.button, header label.button, header .button,
|
||||
header a[role="button"], header label[role="button"], header [role="button"] {
|
||||
background: #12171a;
|
||||
color: #f5f5f5;
|
||||
vertical-align: top;
|
||||
margin: 0.125rem 0;
|
||||
}
|
||||
|
||||
header button:hover, header button:focus, header [type="button"]:hover, header [type="button"]:focus,
|
||||
header a.button:hover,
|
||||
header a.button:focus, header label.button:hover, header label.button:focus, header .button:hover, header .button:focus,
|
||||
header a[role="button"]:hover,
|
||||
header a[role="button"]:focus, header label[role="button"]:hover, header label[role="button"]:focus, header [role="button"]:hover, header [role="button"]:focus {
|
||||
background: #20292e;
|
||||
}
|
||||
|
||||
header .logo, header a.button, header a[role="button"] {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
footer {
|
||||
display: block;
|
||||
background: #192024;
|
||||
color: #f5f5f5;
|
||||
margin: 1rem 0 0;
|
||||
padding: 1.5rem 0.5rem 0.75rem;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
footer a, footer a:visited {
|
||||
color: #0288d1;
|
||||
}
|
||||
|
||||
header.sticky, footer.sticky {
|
||||
position: -webkit-sticky;
|
||||
position: sticky;
|
||||
z-index: 1101;
|
||||
}
|
||||
|
||||
header.sticky {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
footer.sticky {
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
/*
|
||||
Definitions for the responsive table component.
|
||||
*/
|
||||
|
|
|
|||
2
dist/mini-lite.min.css
vendored
2
dist/mini-lite.min.css
vendored
File diff suppressed because one or more lines are too long
234
dist/mini-nord.css
vendored
234
dist/mini-nord.css
vendored
|
|
@ -683,123 +683,6 @@ figcaption {
|
|||
}
|
||||
}
|
||||
|
||||
/*
|
||||
Definitions for navigation elements.
|
||||
*/
|
||||
header {
|
||||
display: block;
|
||||
height: 44px;
|
||||
background: #2E3440;
|
||||
color: #ECEFF4;
|
||||
padding: 2px 8px;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.18), 0 2px 3px rgba(0, 0, 0, 0.26);
|
||||
white-space: nowrap;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
header .logo {
|
||||
color: #ECEFF4;
|
||||
font-size: 1.75em;
|
||||
line-height: 1.2;
|
||||
margin: 1px 6px 1px 1px;
|
||||
padding: 3px 0 0;
|
||||
transition: opacity 0.3s;
|
||||
}
|
||||
|
||||
header button, header [type="button"],
|
||||
header a.button, header label.button, header .button,
|
||||
header a[role="button"], header label[role="button"], header [role="button"] {
|
||||
background: #2E3440;
|
||||
color: #ECEFF4;
|
||||
vertical-align: top;
|
||||
margin: 2px 0 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
header button:hover, header button:focus, header [type="button"]:hover, header [type="button"]:focus,
|
||||
header a.button:hover,
|
||||
header a.button:focus, header label.button:hover, header label.button:focus, header .button:hover, header .button:focus,
|
||||
header a[role="button"]:hover,
|
||||
header a[role="button"]:focus, header label[role="button"]:hover, header label[role="button"]:focus, header [role="button"]:hover, header [role="button"]:focus {
|
||||
background: #37474f;
|
||||
}
|
||||
|
||||
header .logo, header a.button, header a[role="button"] {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
nav {
|
||||
display: block;
|
||||
border: 1px solid #D8DEE9;
|
||||
margin: 2px;
|
||||
padding: 8px 8px 16px 20px;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 2px 3px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
nav a, nav a:visited {
|
||||
display: block;
|
||||
color: #88C0D0;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
nav .sublink-1 {
|
||||
padding-left: 12px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
nav .sublink-1:before {
|
||||
position: absolute;
|
||||
left: 3px;
|
||||
top: -1px;
|
||||
content: '';
|
||||
height: 100%;
|
||||
border: 1px solid #81A1C1;
|
||||
border-left: 0;
|
||||
}
|
||||
|
||||
nav .sublink-2 {
|
||||
padding-left: 24px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
nav .sublink-2:before {
|
||||
position: absolute;
|
||||
left: 3px;
|
||||
top: -1px;
|
||||
content: '';
|
||||
height: 100%;
|
||||
border: 1px solid #81A1C1;
|
||||
border-left: 0;
|
||||
}
|
||||
|
||||
footer {
|
||||
display: block;
|
||||
background: #434C5E;
|
||||
color: #ECEFF4;
|
||||
margin: 18px 0 0;
|
||||
padding: 22px 10px 12px;
|
||||
font-size: 85%;
|
||||
}
|
||||
|
||||
footer a, footer a:visited {
|
||||
color: #88C0D0;
|
||||
}
|
||||
|
||||
header.sticky, footer.sticky {
|
||||
position: -webkit-sticky;
|
||||
position: sticky;
|
||||
z-index: 1101;
|
||||
}
|
||||
|
||||
header.sticky {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
footer.sticky {
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
/*
|
||||
Definitions for forms and input elements.
|
||||
*/
|
||||
|
|
@ -1163,6 +1046,123 @@ button.large, [type="button"].large, [type="submit"].large,
|
|||
margin: 10px 8px;
|
||||
}
|
||||
|
||||
/*
|
||||
Definitions for navigation elements.
|
||||
*/
|
||||
header {
|
||||
display: block;
|
||||
height: 44px;
|
||||
background: #2E3440;
|
||||
color: #ECEFF4;
|
||||
padding: 2px 8px;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.18), 0 2px 3px rgba(0, 0, 0, 0.26);
|
||||
white-space: nowrap;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
header .logo {
|
||||
color: #ECEFF4;
|
||||
font-size: 1.75em;
|
||||
line-height: 1.2;
|
||||
margin: 1px 6px 1px 1px;
|
||||
padding: 3px 0 0;
|
||||
transition: opacity 0.3s;
|
||||
}
|
||||
|
||||
header button, header [type="button"],
|
||||
header a.button, header label.button, header .button,
|
||||
header a[role="button"], header label[role="button"], header [role="button"] {
|
||||
background: #2E3440;
|
||||
color: #ECEFF4;
|
||||
vertical-align: top;
|
||||
margin: 2px 0 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
header button:hover, header button:focus, header [type="button"]:hover, header [type="button"]:focus,
|
||||
header a.button:hover,
|
||||
header a.button:focus, header label.button:hover, header label.button:focus, header .button:hover, header .button:focus,
|
||||
header a[role="button"]:hover,
|
||||
header a[role="button"]:focus, header label[role="button"]:hover, header label[role="button"]:focus, header [role="button"]:hover, header [role="button"]:focus {
|
||||
background: #37474f;
|
||||
}
|
||||
|
||||
header .logo, header a.button, header a[role="button"] {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
nav {
|
||||
display: block;
|
||||
border: 1px solid #D8DEE9;
|
||||
margin: 2px;
|
||||
padding: 8px 8px 16px 20px;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 2px 3px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
nav a, nav a:visited {
|
||||
display: block;
|
||||
color: #88C0D0;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
nav .sublink-1 {
|
||||
padding-left: 12px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
nav .sublink-1:before {
|
||||
position: absolute;
|
||||
left: 3px;
|
||||
top: -1px;
|
||||
content: '';
|
||||
height: 100%;
|
||||
border: 1px solid #81A1C1;
|
||||
border-left: 0;
|
||||
}
|
||||
|
||||
nav .sublink-2 {
|
||||
padding-left: 24px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
nav .sublink-2:before {
|
||||
position: absolute;
|
||||
left: 3px;
|
||||
top: -1px;
|
||||
content: '';
|
||||
height: 100%;
|
||||
border: 1px solid #81A1C1;
|
||||
border-left: 0;
|
||||
}
|
||||
|
||||
footer {
|
||||
display: block;
|
||||
background: #434C5E;
|
||||
color: #ECEFF4;
|
||||
margin: 18px 0 0;
|
||||
padding: 22px 10px 12px;
|
||||
font-size: 85%;
|
||||
}
|
||||
|
||||
footer a, footer a:visited {
|
||||
color: #88C0D0;
|
||||
}
|
||||
|
||||
header.sticky, footer.sticky {
|
||||
position: -webkit-sticky;
|
||||
position: sticky;
|
||||
z-index: 1101;
|
||||
}
|
||||
|
||||
header.sticky {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
footer.sticky {
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
/*
|
||||
Definitions for the responsive table component.
|
||||
*/
|
||||
|
|
|
|||
2
dist/mini-nord.min.css
vendored
2
dist/mini-nord.min.css
vendored
File diff suppressed because one or more lines are too long
200
dist/mini-sucroa.css
vendored
200
dist/mini-sucroa.css
vendored
|
|
@ -685,106 +685,6 @@ figcaption {
|
|||
}
|
||||
}
|
||||
|
||||
/*
|
||||
Definitions for navigation elements.
|
||||
*/
|
||||
header {
|
||||
display: block;
|
||||
height: 48px;
|
||||
background: #211423;
|
||||
color: #fffddc;
|
||||
padding: 3px 10px;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.18), 0 2px 3px rgba(0, 0, 0, 0.26);
|
||||
white-space: nowrap;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
header .logo {
|
||||
color: #fffddc;
|
||||
font-size: 1.75em;
|
||||
line-height: 1.5;
|
||||
margin: 6px 6px 1px 1px;
|
||||
padding: 6px 0 0;
|
||||
transition: opacity 0.3s;
|
||||
}
|
||||
|
||||
header button, header [type="button"],
|
||||
header a.button, header label.button, header .button,
|
||||
header a[role="button"], header label[role="button"], header [role="button"] {
|
||||
background: #211423;
|
||||
color: #fffddc;
|
||||
vertical-align: top;
|
||||
margin: 3px 0 0;
|
||||
box-shadow: none;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
header button:hover, header button:focus, header [type="button"]:hover, header [type="button"]:focus,
|
||||
header a.button:hover,
|
||||
header a.button:focus, header label.button:hover, header label.button:focus, header .button:hover, header .button:focus,
|
||||
header a[role="button"]:hover,
|
||||
header a[role="button"]:focus, header label[role="button"]:hover, header label[role="button"]:focus, header [role="button"]:hover, header [role="button"]:focus {
|
||||
background: #493e4b;
|
||||
}
|
||||
|
||||
header .logo, header a.button, header a[role="button"] {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
nav {
|
||||
display: block;
|
||||
background: #e8deff;
|
||||
border: 1px solid #a9a2ba;
|
||||
border-radius: 2px;
|
||||
margin: 2px;
|
||||
padding: 12px 10px 18px 22px;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 2px 3px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
nav a, nav a:visited {
|
||||
display: block;
|
||||
color: #6979c6;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
nav .sublink-1 {
|
||||
padding-left: 14px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
nav .sublink-2 {
|
||||
padding-left: 28px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
footer {
|
||||
display: block;
|
||||
background: #211423;
|
||||
color: #fffddc;
|
||||
margin: 22px 0 0;
|
||||
padding: 24px 10px 14px;
|
||||
font-size: 90%;
|
||||
}
|
||||
|
||||
footer a, footer a:visited {
|
||||
color: #7480b3;
|
||||
}
|
||||
|
||||
header.sticky, footer.sticky {
|
||||
position: -webkit-sticky;
|
||||
position: sticky;
|
||||
z-index: 1101;
|
||||
}
|
||||
|
||||
header.sticky {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
footer.sticky {
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
/*
|
||||
Definitions for forms and input elements.
|
||||
*/
|
||||
|
|
@ -1152,6 +1052,106 @@ button.large, [type="button"].large, [type="submit"].large,
|
|||
margin: 10px 8px;
|
||||
}
|
||||
|
||||
/*
|
||||
Definitions for navigation elements.
|
||||
*/
|
||||
header {
|
||||
display: block;
|
||||
height: 48px;
|
||||
background: #211423;
|
||||
color: #fffddc;
|
||||
padding: 3px 10px;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.18), 0 2px 3px rgba(0, 0, 0, 0.26);
|
||||
white-space: nowrap;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
header .logo {
|
||||
color: #fffddc;
|
||||
font-size: 1.75em;
|
||||
line-height: 1.5;
|
||||
margin: 6px 6px 1px 1px;
|
||||
padding: 6px 0 0;
|
||||
transition: opacity 0.3s;
|
||||
}
|
||||
|
||||
header button, header [type="button"],
|
||||
header a.button, header label.button, header .button,
|
||||
header a[role="button"], header label[role="button"], header [role="button"] {
|
||||
background: #211423;
|
||||
color: #fffddc;
|
||||
vertical-align: top;
|
||||
margin: 3px 0 0;
|
||||
box-shadow: none;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
header button:hover, header button:focus, header [type="button"]:hover, header [type="button"]:focus,
|
||||
header a.button:hover,
|
||||
header a.button:focus, header label.button:hover, header label.button:focus, header .button:hover, header .button:focus,
|
||||
header a[role="button"]:hover,
|
||||
header a[role="button"]:focus, header label[role="button"]:hover, header label[role="button"]:focus, header [role="button"]:hover, header [role="button"]:focus {
|
||||
background: #493e4b;
|
||||
}
|
||||
|
||||
header .logo, header a.button, header a[role="button"] {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
nav {
|
||||
display: block;
|
||||
background: #e8deff;
|
||||
border: 1px solid #a9a2ba;
|
||||
border-radius: 2px;
|
||||
margin: 2px;
|
||||
padding: 12px 10px 18px 22px;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 2px 3px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
nav a, nav a:visited {
|
||||
display: block;
|
||||
color: #6979c6;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
nav .sublink-1 {
|
||||
padding-left: 14px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
nav .sublink-2 {
|
||||
padding-left: 28px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
footer {
|
||||
display: block;
|
||||
background: #211423;
|
||||
color: #fffddc;
|
||||
margin: 22px 0 0;
|
||||
padding: 24px 10px 14px;
|
||||
font-size: 90%;
|
||||
}
|
||||
|
||||
footer a, footer a:visited {
|
||||
color: #7480b3;
|
||||
}
|
||||
|
||||
header.sticky, footer.sticky {
|
||||
position: -webkit-sticky;
|
||||
position: sticky;
|
||||
z-index: 1101;
|
||||
}
|
||||
|
||||
header.sticky {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
footer.sticky {
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
/*
|
||||
Definitions for the responsive table component.
|
||||
*/
|
||||
|
|
|
|||
2
dist/mini-sucroa.min.css
vendored
2
dist/mini-sucroa.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -75,7 +75,7 @@
|
|||
</div>
|
||||
<div class="col-sm-6 hidden-md hidden-lg" style="padding: 0;">
|
||||
<div class="button-group" style="border-right: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; margin: 0; height: 100%;">
|
||||
<a href="core.html" class="button small">Core</a><a href="grid.html" class="button small">Grid</a><a href="navigation.html" class="button small">Navigation</a><a href="input_control.html" class="button small">Input Control</a><a href="table.html" class="button small">Table</a>
|
||||
<a href="core.html" class="button small">Core</a><a href="grid.html" class="button small">Grid</a><a href="input_control.html" class="button small">Input Control</a><a href="navigation.html" class="button small">Navigation</a><a href="table.html" class="button small">Table</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-6 hidden-md hidden-lg" style="padding: 0;">
|
||||
|
|
|
|||
2
docs/mini-default.min.css
vendored
2
docs/mini-default.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -99,6 +99,17 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="row box-centered">
|
||||
<div class="col-sm-12 col-lg-6 row">
|
||||
<div class="card fluid">
|
||||
<h2 class="section"><mark class="tertiary"><i class="fa fa-keyboard-o fa-fw" aria-hidden="true"></i></mark> Input Control</h2>
|
||||
<div class="section box-left"><p>The <strong>input_control</strong> module contains rules that affect forms, input elements, buttons, checkboxes and radio buttons. All of these elements's styles are predefined, allowing you to create modern, responsive forms quickly. Layout alternatives are also provided if you want your forms to look a certain way. More specifically, the <strong>input_control</strong> module contains:</p><ul>
|
||||
<li><a href="input_control.html#forms-input" class="sublink-1">Styling for forms and input elements</a></li>
|
||||
<li><a href="input_control.html#checkbox-radio" class="sublink-1">Styling for checkboxes and radio buttons</a></li>
|
||||
<li><a href="input_control.html#buttons" class="sublink-1">Styling and groupping classes for buttons</a></li>
|
||||
<li><a href="input_control.html#file-upload" class="sublink-1">Workarounds for styling file upload buttons</a></li>
|
||||
</ul></div><a href="input_control.html" class="button section">See more</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-12 col-lg-6 row">
|
||||
<div class="card fluid">
|
||||
<h2 class="section"><mark class="primary"><i class="fa fa-compass fa-fw" aria-hidden="true"></i></mark> Navigation</h2>
|
||||
|
|
@ -111,17 +122,6 @@
|
|||
</ul></div><a href="navigation.html" class="button section">See more</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-12 col-lg-6 row">
|
||||
<div class="card fluid">
|
||||
<h2 class="section"><mark class="tertiary"><i class="fa fa-keyboard-o fa-fw" aria-hidden="true"></i></mark> Input Control</h2>
|
||||
<div class="section box-left"><p>The <strong>input_control</strong> module contains rules that affect forms, input elements, buttons, checkboxes and radio buttons. All of these elements's styles are predefined, allowing you to create modern, responsive forms quickly. Layout alternatives are also provided if you want your forms to look a certain way. More specifically, the <strong>input_control</strong> module contains:</p><ul>
|
||||
<li><a href="input_control.html#forms-input" class="sublink-1">Styling for forms and input elements</a></li>
|
||||
<li><a href="input_control.html#checkbox-radio" class="sublink-1">Styling for checkboxes and radio buttons</a></li>
|
||||
<li><a href="input_control.html#buttons" class="sublink-1">Styling and groupping classes for buttons</a></li>
|
||||
<li><a href="input_control.html#file-upload" class="sublink-1">Workarounds for styling file upload buttons</a></li>
|
||||
</ul></div><a href="input_control.html" class="button section">See more</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row box-centered">
|
||||
<div class="col-sm-12 col-lg-6 row">
|
||||
|
|
|
|||
|
|
@ -34,7 +34,7 @@
|
|||
</header>
|
||||
<header class="sticky" style="height:36px;">
|
||||
<a href="#core" class="button">Core</a> <a href="#grid" class="button">Grid</a>
|
||||
<a href="#navigation" class="button">Navigation</a> <a href="#input_control" class="button">Input Control</a>
|
||||
<a href="#input_control" class="button">Input Control</a> <a href="#navigation" class="button">Navigation</a>
|
||||
<a href="#table" class="button">Table</a> <a href="#card" class="button">Card</a>
|
||||
<a href="#tab" class="button">Tab</a> <a href="#contextual" class="button">Contextual</a>
|
||||
<a href="#progress" class="button">Progress</a> <a href="#utility" class="button">Utility</a>
|
||||
|
|
@ -367,95 +367,6 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" id="navigation">
|
||||
<div class="col-sm col-lg-10 col-lg-offset-1">
|
||||
<div class="card fluid">
|
||||
<div class="section"><h2><a href="navigation.html" target="_blank" class="button primary small"><i class="fa fa-compass fa-fw" aria-hidden="true"></i></a> Navigation</h2></div>
|
||||
<div class="section row">
|
||||
<div class="col-sm-12 col-md-6 col-md-first col-sm-first">
|
||||
<h3>Header <a href="https://codepen.io/chalarangelo/pen/NbewvB" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i> View on Codepen</a></h3>
|
||||
<pre><header>
|
||||
<a href="#" class="logo">Logo</a>
|
||||
<button>Home</button>
|
||||
<a href="#" class="button">News</a>
|
||||
<span>|</span>
|
||||
<button>About</button>
|
||||
<button>Contact</button>
|
||||
</header></pre>
|
||||
</div>
|
||||
<div class="col-sm-12 col-md-6">
|
||||
<h3>Notes</h3>
|
||||
<ul>
|
||||
<li>Use the <code>.logo</code> class for the first child (either textual element or image)</li>
|
||||
<li>The rest of the elements inside the <code><header></code> must be button elements (i.e. <code><button></code>, <code><input <span class="fore-secondary">type</span>=<span class="fore-primary">"button"</span>></code>, <code><span class="fore-secondary">role</span>=<span class="fore-primary">"<a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_button_role">button</a>"</span></code> or <code>.button</code>)</li>
|
||||
<li>Use <code><span></code> elements as separators</li>
|
||||
<li>You can mix buttons, links and labels inside the header, as long as all of them are styled as buttons</li>
|
||||
<li>The logo element should not be a <code><button></code> element or of the <code>.button</code> class</li>
|
||||
<li>Header is not displayed as fixed by default</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section row">
|
||||
<div class="col-sm-12 col-md-6 col-md-first col-sm-first">
|
||||
<h3>Navigation bar <a href="https://codepen.io/chalarangelo/pen/ENGbwa" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i> View on Codepen</a></h3>
|
||||
<pre><nav>
|
||||
<a href="#">Home</a>
|
||||
<span>News</span>
|
||||
<a href="#" class="sublink-1">New Courses</a>
|
||||
<a href="#" class="sublink-1">Certifications</a>
|
||||
<span class="sublink-1">Events</span>
|
||||
<a href="#" class="sublink-2">Course Showcase - 12th, Dec</a>
|
||||
<a href="#" class="sublink-2">Staff AMA - 16th, Dec</a>
|
||||
<a href="#" class="sublink-1">Policy Update</a>
|
||||
<a href="#">About</a>
|
||||
<a href="#">Contact</a>
|
||||
</nav></pre>
|
||||
</div>
|
||||
<div class="col-sm-12 col-md-6">
|
||||
<h3>Notes</h3>
|
||||
<ul>
|
||||
<li>Use <code><nav></code> element, populate it with links</li>
|
||||
<li>Use <code>.sublink-1</code> and <code>.sublink-2</code> classes to create subcategories in your navigation menu</li>
|
||||
<li>Combine the navigation bar with grid reordering to display aside from text on larger displays or at the bottom on smaller displays</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section row">
|
||||
<div class="col-sm-12 col-md-6 col-md-first col-sm-first">
|
||||
<h3>Footer <a href="https://codepen.io/chalarangelo/pen/dOwZVO" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i> View on Codepen</a></h3>
|
||||
<pre><footer>
|
||||
<p>&copy; 2001-2016 Web Corporation | <a href="#">About</a> | <a href="#">Terms of use</a></p>
|
||||
</footer></pre>
|
||||
</div>
|
||||
<div class="col-sm-12 col-md-6">
|
||||
<h3>Notes</h3>
|
||||
<ul>
|
||||
<li>Simple syntax and structure, add content as normal</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section row">
|
||||
<div class="col-sm-12 col-md-6 col-md-first col-sm-first">
|
||||
<h3>Sticky headers and footers <a href="https://codepen.io/chalarangelo/pen/ZLVMzX" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i> View on Codepen</a></h3>
|
||||
<pre><header class="sticky">
|
||||
<a href="#" class="logo">Logo</a> <button>Home</button> <button>About</button>
|
||||
</header>
|
||||
|
||||
<footer class="sticky">
|
||||
<p>&copy; 2001-2016 Web Corporation | <a href="#">About</a> | <a href="#">Terms of use</a></p>
|
||||
</footer></pre>
|
||||
</div>
|
||||
<div class="col-sm-12 col-md-6">
|
||||
<h3>Notes</h3>
|
||||
<ul>
|
||||
<li>Use <code>.sticky</code> class to create</li>
|
||||
<li>Compatible with modern browsers, support for <a href="http://caniuse.com/#feat=css-sticky"><code>position:sticky</code></a> is growing</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" id="input_control">
|
||||
<div class="col-sm col-lg-10 col-lg-offset-1">
|
||||
<div class="card fluid">
|
||||
|
|
@ -572,6 +483,95 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" id="navigation">
|
||||
<div class="col-sm col-lg-10 col-lg-offset-1">
|
||||
<div class="card fluid">
|
||||
<div class="section"><h2><a href="navigation.html" target="_blank" class="button primary small"><i class="fa fa-compass fa-fw" aria-hidden="true"></i></a> Navigation</h2></div>
|
||||
<div class="section row">
|
||||
<div class="col-sm-12 col-md-6 col-md-first col-sm-first">
|
||||
<h3>Header <a href="https://codepen.io/chalarangelo/pen/NbewvB" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i> View on Codepen</a></h3>
|
||||
<pre><header>
|
||||
<a href="#" class="logo">Logo</a>
|
||||
<button>Home</button>
|
||||
<a href="#" class="button">News</a>
|
||||
<span>|</span>
|
||||
<button>About</button>
|
||||
<button>Contact</button>
|
||||
</header></pre>
|
||||
</div>
|
||||
<div class="col-sm-12 col-md-6">
|
||||
<h3>Notes</h3>
|
||||
<ul>
|
||||
<li>Use the <code>.logo</code> class for the first child (either textual element or image)</li>
|
||||
<li>The rest of the elements inside the <code><header></code> must be button elements (i.e. <code><button></code>, <code><input <span class="fore-secondary">type</span>=<span class="fore-primary">"button"</span>></code>, <code><span class="fore-secondary">role</span>=<span class="fore-primary">"<a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_button_role">button</a>"</span></code> or <code>.button</code>)</li>
|
||||
<li>Use <code><span></code> elements as separators</li>
|
||||
<li>You can mix buttons, links and labels inside the header, as long as all of them are styled as buttons</li>
|
||||
<li>The logo element should not be a <code><button></code> element or of the <code>.button</code> class</li>
|
||||
<li>Header is not displayed as fixed by default</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section row">
|
||||
<div class="col-sm-12 col-md-6 col-md-first col-sm-first">
|
||||
<h3>Navigation bar <a href="https://codepen.io/chalarangelo/pen/ENGbwa" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i> View on Codepen</a></h3>
|
||||
<pre><nav>
|
||||
<a href="#">Home</a>
|
||||
<span>News</span>
|
||||
<a href="#" class="sublink-1">New Courses</a>
|
||||
<a href="#" class="sublink-1">Certifications</a>
|
||||
<span class="sublink-1">Events</span>
|
||||
<a href="#" class="sublink-2">Course Showcase - 12th, Dec</a>
|
||||
<a href="#" class="sublink-2">Staff AMA - 16th, Dec</a>
|
||||
<a href="#" class="sublink-1">Policy Update</a>
|
||||
<a href="#">About</a>
|
||||
<a href="#">Contact</a>
|
||||
</nav></pre>
|
||||
</div>
|
||||
<div class="col-sm-12 col-md-6">
|
||||
<h3>Notes</h3>
|
||||
<ul>
|
||||
<li>Use <code><nav></code> element, populate it with links</li>
|
||||
<li>Use <code>.sublink-1</code> and <code>.sublink-2</code> classes to create subcategories in your navigation menu</li>
|
||||
<li>Combine the navigation bar with grid reordering to display aside from text on larger displays or at the bottom on smaller displays</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section row">
|
||||
<div class="col-sm-12 col-md-6 col-md-first col-sm-first">
|
||||
<h3>Footer <a href="https://codepen.io/chalarangelo/pen/dOwZVO" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i> View on Codepen</a></h3>
|
||||
<pre><footer>
|
||||
<p>&copy; 2001-2016 Web Corporation | <a href="#">About</a> | <a href="#">Terms of use</a></p>
|
||||
</footer></pre>
|
||||
</div>
|
||||
<div class="col-sm-12 col-md-6">
|
||||
<h3>Notes</h3>
|
||||
<ul>
|
||||
<li>Simple syntax and structure, add content as normal</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section row">
|
||||
<div class="col-sm-12 col-md-6 col-md-first col-sm-first">
|
||||
<h3>Sticky headers and footers <a href="https://codepen.io/chalarangelo/pen/ZLVMzX" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i> View on Codepen</a></h3>
|
||||
<pre><header class="sticky">
|
||||
<a href="#" class="logo">Logo</a> <button>Home</button> <button>About</button>
|
||||
</header>
|
||||
|
||||
<footer class="sticky">
|
||||
<p>&copy; 2001-2016 Web Corporation | <a href="#">About</a> | <a href="#">Terms of use</a></p>
|
||||
</footer></pre>
|
||||
</div>
|
||||
<div class="col-sm-12 col-md-6">
|
||||
<h3>Notes</h3>
|
||||
<ul>
|
||||
<li>Use <code>.sticky</code> class to create</li>
|
||||
<li>Compatible with modern browsers, support for <a href="http://caniuse.com/#feat=css-sticky"><code>position:sticky</code></a> is growing</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" id="table">
|
||||
<div class="col-sm col-lg-10 col-lg-offset-1">
|
||||
<div class="card fluid">
|
||||
|
|
|
|||
|
|
@ -1136,3 +1136,4 @@
|
|||
- `mini-lite` does not support it (in keeping with tradition of the lite flavor's decisions).
|
||||
- `mini-nord` still uses `.alert`s instead of `.toast`s, maintainer should address after update, otherwise I will in the next patch or so.
|
||||
- `mini-sucroa` does not support it (or `.alert` for that matter), might be addressed with author later down the line, for now it's ok to not have either.
|
||||
- Changed order of `input_control` and `navigation` for all flavors and documentation pages.
|
||||
|
|
|
|||
|
|
@ -145,54 +145,6 @@ $grid-large-prefix: 'lg'; // Large screen class prefix for grid
|
|||
// the needed styles. In this case, values should be specified for $grid-extra-small-prefix and $grid-small-breakpoint.
|
||||
// [2] - If the value of $include-parent-layout is `true`, the grid system will contain extra classes that will define the column
|
||||
// layout of their children. In this case, a value should be specified for $grid-row-parent-layout-prefix.
|
||||
// Variables for navigational elements
|
||||
$header-height: 2.75rem; // Height for <header>
|
||||
$header-back-color: #151c1f; // Background color for <header>
|
||||
$header-fore-color: #f5f5f5; // Text color for <header>
|
||||
$header-border-style: 0; // Border style for <header>
|
||||
$header-margin: 0; // Margin for <header>
|
||||
$header-padding: 0.125rem 0.5rem; // Padding for <header>
|
||||
$header-box-shadow: none; // Box shadow for <header>
|
||||
$header-logo-name: 'logo'; // Class name for <header>'s logo
|
||||
$header-logo-font-size: 1.75rem; // Font size for <header>'s logo
|
||||
$header-logo-line-height: 1.3125em; // Line height for <header>'s logo
|
||||
$header-logo-margin: 0.0625rem 0.375rem 0.0625rem 0.0625rem; // Margin for <header>'s logo
|
||||
$header-logo-padding: 0; // Padding for <header>'s logo
|
||||
$header-link-hover-color: #192024; // Hover color for <header>'s links
|
||||
$header-link-margin: 0.125rem 0; // Margin for <header>'s links
|
||||
$include-header-sticky: true; // Should sticky <header> elements be included? (`true`/`false`) [1]
|
||||
$header-sticky-name: 'sticky'; // Class name for sticky <header>
|
||||
$nav-back-color: #37474f; // Background for <nav>
|
||||
$nav-fore-color: $fore-color; // Text color for <nav>
|
||||
$nav-border-style: 1px solid #324148; // Border style for <nav>
|
||||
$nav-border-radius: 0; // Border radius for <nav>
|
||||
$nav-padding: 0.75rem 1rem; // Padding for <nav>
|
||||
$nav-margin: 0.5rem; // Margin for <nav>
|
||||
$nav-box-shadow: none; // Box shadow for <nav>
|
||||
$nav-link-fore-color: #3e79bd; // Text color for links in <nav>
|
||||
$nav-sublink-prefix: 'sublink'; // Prefix for the subcategory links in <nav>
|
||||
$nav-sublink-depth: 2; // Amount of subcategory classes to add
|
||||
$nav-sublink-padding-left: 1rem; // Left padding to add to subcategories
|
||||
$nav-include-sublink-bar: true; // Should a left border bar be added to subcategories (`true`/`false`) [2]
|
||||
$nav-sublink-bar-left-position: 0.1875rem; // Left position of subcategory bar
|
||||
$nav-sublink-bar-width: 1px; // Width of the subcategory bar
|
||||
$nav-sublink-bar-color: #616161; // Subcategory bar color
|
||||
$footer-back-color: #192024; // Background color for <footer>
|
||||
$footer-fore-color: #f5f5f5; // Text color for <footer>
|
||||
$footer-border-style: 0; // Border stye for <footer>
|
||||
$footer-font-size: 0.875rem; // Font size for <footer>
|
||||
$footer-margin: 1rem 0 0; // Margin for <footer>
|
||||
$footer-padding: 1.5rem 0.5rem 0.75rem; // Padding for <footer>
|
||||
$footer-link-fore-color: #0288d1; // Text color for links in <footer>
|
||||
$include-footer-sticky: true; // Should sticky <footer> elements be included (`true`/`false`) [3]
|
||||
$footer-sticky-name: 'sticky'; // Class name for sticky <footer> elements
|
||||
// Notes:
|
||||
// [1] - If the value of $include-header-sticky is `true`, a class will be created that will allow for sticky positioning
|
||||
// of <header> elements, using the value of $header-sticky-name for the name of the class.
|
||||
// [2] - If the value of $nav-include-sublink-bar is `true`, a left-side border bar will appear next to the navigation
|
||||
// subcategories, using the values specified.
|
||||
// [3] - If the value of $include-footer-bottom is `true`, a class will be created that will allow for sticky positioning
|
||||
// of <footer> elements, using the value of $footer-sticky-name for the name of the class.
|
||||
// Variables for forms and inputs
|
||||
$form-back-color: #1c2529; // Background color for forms
|
||||
$form-fore-color: #9e9e9e; // Text color for forms
|
||||
|
|
@ -291,6 +243,54 @@ $checkbox-disabled-opacity: $input-disabled-opacity;// Opacity for disabled chec
|
|||
// allow for universal button styles, even for file input buttons, but can be disabled if the base style is desired.
|
||||
// If the value is `false`, some fixes will be applied to the <input type="file"> element.
|
||||
// [3] - The value of $checkbox-size will determine a few variables like some `margin` values, `height`, `width` etc.
|
||||
// Variables for navigational elements
|
||||
$header-height: 2.75rem; // Height for <header>
|
||||
$header-back-color: #151c1f; // Background color for <header>
|
||||
$header-fore-color: #f5f5f5; // Text color for <header>
|
||||
$header-border-style: 0; // Border style for <header>
|
||||
$header-margin: 0; // Margin for <header>
|
||||
$header-padding: 0.125rem 0.5rem; // Padding for <header>
|
||||
$header-box-shadow: none; // Box shadow for <header>
|
||||
$header-logo-name: 'logo'; // Class name for <header>'s logo
|
||||
$header-logo-font-size: 1.75rem; // Font size for <header>'s logo
|
||||
$header-logo-line-height: 1.3125em; // Line height for <header>'s logo
|
||||
$header-logo-margin: 0.0625rem 0.375rem 0.0625rem 0.0625rem; // Margin for <header>'s logo
|
||||
$header-logo-padding: 0; // Padding for <header>'s logo
|
||||
$header-link-hover-color: #192024; // Hover color for <header>'s links
|
||||
$header-link-margin: 0.125rem 0; // Margin for <header>'s links
|
||||
$include-header-sticky: true; // Should sticky <header> elements be included? (`true`/`false`) [1]
|
||||
$header-sticky-name: 'sticky'; // Class name for sticky <header>
|
||||
$nav-back-color: #37474f; // Background for <nav>
|
||||
$nav-fore-color: $fore-color; // Text color for <nav>
|
||||
$nav-border-style: 1px solid #324148; // Border style for <nav>
|
||||
$nav-border-radius: 0; // Border radius for <nav>
|
||||
$nav-padding: 0.75rem 1rem; // Padding for <nav>
|
||||
$nav-margin: 0.5rem; // Margin for <nav>
|
||||
$nav-box-shadow: none; // Box shadow for <nav>
|
||||
$nav-link-fore-color: #3e79bd; // Text color for links in <nav>
|
||||
$nav-sublink-prefix: 'sublink'; // Prefix for the subcategory links in <nav>
|
||||
$nav-sublink-depth: 2; // Amount of subcategory classes to add
|
||||
$nav-sublink-padding-left: 1rem; // Left padding to add to subcategories
|
||||
$nav-include-sublink-bar: true; // Should a left border bar be added to subcategories (`true`/`false`) [2]
|
||||
$nav-sublink-bar-left-position: 0.1875rem; // Left position of subcategory bar
|
||||
$nav-sublink-bar-width: 1px; // Width of the subcategory bar
|
||||
$nav-sublink-bar-color: #616161; // Subcategory bar color
|
||||
$footer-back-color: #192024; // Background color for <footer>
|
||||
$footer-fore-color: #f5f5f5; // Text color for <footer>
|
||||
$footer-border-style: 0; // Border stye for <footer>
|
||||
$footer-font-size: 0.875rem; // Font size for <footer>
|
||||
$footer-margin: 1rem 0 0; // Margin for <footer>
|
||||
$footer-padding: 1.5rem 0.5rem 0.75rem; // Padding for <footer>
|
||||
$footer-link-fore-color: #0288d1; // Text color for links in <footer>
|
||||
$include-footer-sticky: true; // Should sticky <footer> elements be included (`true`/`false`) [3]
|
||||
$footer-sticky-name: 'sticky'; // Class name for sticky <footer> elements
|
||||
// Notes:
|
||||
// [1] - If the value of $include-header-sticky is `true`, a class will be created that will allow for sticky positioning
|
||||
// of <header> elements, using the value of $header-sticky-name for the name of the class.
|
||||
// [2] - If the value of $nav-include-sublink-bar is `true`, a left-side border bar will appear next to the navigation
|
||||
// subcategories, using the values specified.
|
||||
// [3] - If the value of $include-footer-bottom is `true`, a class will be created that will allow for sticky positioning
|
||||
// of <footer> elements, using the value of $footer-sticky-name for the name of the class.
|
||||
// Variables for responsive tables
|
||||
$table-border-style: 1px solid #1c2529; // Border style for <table> and children
|
||||
$table-border-radius: 0; // Border radius for <table> and children
|
||||
|
|
@ -510,7 +510,6 @@ $include-center-block-name: false; // Should center block be included? (
|
|||
// that module and marked as such below it.
|
||||
@import '../mini/core';
|
||||
@import '../mini/grid';
|
||||
@import '../mini/navigation';
|
||||
@import '../mini/input_control';
|
||||
/*
|
||||
Custom elements for forms and input elements.
|
||||
|
|
@ -527,6 +526,7 @@ $include-center-block-name: false; // Should center block be included? (
|
|||
$button-style1-border-radius, $button-style1-padding, $button-style1-margin);
|
||||
@include make-button-alt-style ($button-style2-name, $button-style2-border-style,
|
||||
$button-style2-border-radius, $button-style2-padding, $button-style2-margin);
|
||||
@import '../mini/navigation';
|
||||
@import '../mini/table';
|
||||
@import '../mini/card';
|
||||
/*
|
||||
|
|
|
|||
|
|
@ -145,54 +145,6 @@ $grid-large-prefix: 'lg'; // Large screen class prefix for grid
|
|||
// the needed styles. In this case, values should be specified for $grid-extra-small-prefix and $grid-small-breakpoint.
|
||||
// [2] - If the value of $include-parent-layout is `true`, the grid system will contain extra classes that will define the column
|
||||
// layout of their children. In this case, a value should be specified for $grid-row-parent-layout-prefix.
|
||||
// Variables for navigational elements
|
||||
$header-height: 2.75rem; // Height for <header>
|
||||
$header-back-color: #12171a; // Background color for <header>
|
||||
$header-fore-color: #f5f5f5; // Text color for <header>
|
||||
$header-border-style: 0; // Border style for <header>
|
||||
$header-margin: 0; // Margin for <header>
|
||||
$header-padding: 0.125rem 0.5rem; // Padding for <header>
|
||||
$header-box-shadow: none; // Box shadow for <header>
|
||||
$header-logo-name: 'logo'; // Class name for <header>'s logo
|
||||
$header-logo-font-size: 1.75rem; // Font size for <header>'s logo
|
||||
$header-logo-line-height: 1.3125em; // Line height for <header>'s logo
|
||||
$header-logo-margin: 0.0625rem 0.375rem 0.0625rem 0.0625rem; // Margin for <header>'s logo
|
||||
$header-logo-padding: 0; // Padding for <header>'s logo
|
||||
$header-link-hover-color: #20292e; // Hover color for <header>'s links
|
||||
$header-link-margin: 0.125rem 0; // Margin for <header>'s links
|
||||
$include-header-sticky: true; // Should sticky <header> elements be included? (`true`/`false`) [1]
|
||||
$header-sticky-name: 'sticky'; // Class name for sticky <header>
|
||||
$nav-back-color: #eceff1; // Background for <nav>
|
||||
$nav-fore-color: $fore-color; // Text color for <nav>
|
||||
$nav-border-style: 1px solid #c9c9c9; // Border style for <nav>
|
||||
$nav-border-radius: 0; // Border radius for <nav>
|
||||
$nav-padding: 0.75rem 1rem; // Padding for <nav>
|
||||
$nav-margin: 0.5rem; // Margin for <nav>
|
||||
$nav-box-shadow: none; // Box shadow for <nav>
|
||||
$nav-link-fore-color: #145caf; // Text color for links in <nav>
|
||||
$nav-sublink-prefix: 'sublink'; // Prefix for the subcategory links in <nav>
|
||||
$nav-sublink-depth: 2; // Amount of subcategory classes to add
|
||||
$nav-sublink-padding-left: 1rem; // Left padding to add to subcategories
|
||||
$nav-include-sublink-bar: true; // Should a left border bar be added to subcategories (`true`/`false`) [2]
|
||||
$nav-sublink-bar-left-position: 0.1875rem; // Left position of subcategory bar
|
||||
$nav-sublink-bar-width: 1px; // Width of the subcategory bar
|
||||
$nav-sublink-bar-color: #bdbdbd; // Subcategory bar color
|
||||
$footer-back-color: #192024; // Background color for <footer>
|
||||
$footer-fore-color: #f5f5f5; // Text color for <footer>
|
||||
$footer-border-style: 0; // Border stye for <footer>
|
||||
$footer-font-size: 0.875rem; // Font size for <footer>
|
||||
$footer-margin: 1rem 0 0; // Margin for <footer>
|
||||
$footer-padding: 1.5rem 0.5rem 0.75rem; // Padding for <footer>
|
||||
$footer-link-fore-color: #0288d1; // Text color for links in <footer>
|
||||
$include-footer-sticky: true; // Should sticky <footer> elements be included (`true`/`false`) [3]
|
||||
$footer-sticky-name: 'sticky'; // Class name for sticky <footer> elements
|
||||
// Notes:
|
||||
// [1] - If the value of $include-header-sticky is `true`, a class will be created that will allow for sticky positioning
|
||||
// of <header> elements, using the value of $header-sticky-name for the name of the class.
|
||||
// [2] - If the value of $nav-include-sublink-bar is `true`, a left-side border bar will appear next to the navigation
|
||||
// subcategories, using the values specified.
|
||||
// [3] - If the value of $include-footer-bottom is `true`, a class will be created that will allow for sticky positioning
|
||||
// of <footer> elements, using the value of $footer-sticky-name for the name of the class.
|
||||
// Variables for forms and inputs
|
||||
$form-back-color: #eeeeee; // Background color for forms
|
||||
$form-fore-color: $fore-color; // Text color for forms
|
||||
|
|
@ -291,6 +243,54 @@ $checkbox-disabled-opacity: $input-disabled-opacity;// Opacity for disabled chec
|
|||
// allow for universal button styles, even for file input buttons, but can be disabled if the base style is desired.
|
||||
// If the value is `false`, some fixes will be applied to the <input type="file"> element.
|
||||
// [3] - The value of $checkbox-size will determine a few variables like some `margin` values, `height`, `width` etc.
|
||||
// Variables for navigational elements
|
||||
$header-height: 2.75rem; // Height for <header>
|
||||
$header-back-color: #12171a; // Background color for <header>
|
||||
$header-fore-color: #f5f5f5; // Text color for <header>
|
||||
$header-border-style: 0; // Border style for <header>
|
||||
$header-margin: 0; // Margin for <header>
|
||||
$header-padding: 0.125rem 0.5rem; // Padding for <header>
|
||||
$header-box-shadow: none; // Box shadow for <header>
|
||||
$header-logo-name: 'logo'; // Class name for <header>'s logo
|
||||
$header-logo-font-size: 1.75rem; // Font size for <header>'s logo
|
||||
$header-logo-line-height: 1.3125em; // Line height for <header>'s logo
|
||||
$header-logo-margin: 0.0625rem 0.375rem 0.0625rem 0.0625rem; // Margin for <header>'s logo
|
||||
$header-logo-padding: 0; // Padding for <header>'s logo
|
||||
$header-link-hover-color: #20292e; // Hover color for <header>'s links
|
||||
$header-link-margin: 0.125rem 0; // Margin for <header>'s links
|
||||
$include-header-sticky: true; // Should sticky <header> elements be included? (`true`/`false`) [1]
|
||||
$header-sticky-name: 'sticky'; // Class name for sticky <header>
|
||||
$nav-back-color: #eceff1; // Background for <nav>
|
||||
$nav-fore-color: $fore-color; // Text color for <nav>
|
||||
$nav-border-style: 1px solid #c9c9c9; // Border style for <nav>
|
||||
$nav-border-radius: 0; // Border radius for <nav>
|
||||
$nav-padding: 0.75rem 1rem; // Padding for <nav>
|
||||
$nav-margin: 0.5rem; // Margin for <nav>
|
||||
$nav-box-shadow: none; // Box shadow for <nav>
|
||||
$nav-link-fore-color: #145caf; // Text color for links in <nav>
|
||||
$nav-sublink-prefix: 'sublink'; // Prefix for the subcategory links in <nav>
|
||||
$nav-sublink-depth: 2; // Amount of subcategory classes to add
|
||||
$nav-sublink-padding-left: 1rem; // Left padding to add to subcategories
|
||||
$nav-include-sublink-bar: true; // Should a left border bar be added to subcategories (`true`/`false`) [2]
|
||||
$nav-sublink-bar-left-position: 0.1875rem; // Left position of subcategory bar
|
||||
$nav-sublink-bar-width: 1px; // Width of the subcategory bar
|
||||
$nav-sublink-bar-color: #bdbdbd; // Subcategory bar color
|
||||
$footer-back-color: #192024; // Background color for <footer>
|
||||
$footer-fore-color: #f5f5f5; // Text color for <footer>
|
||||
$footer-border-style: 0; // Border stye for <footer>
|
||||
$footer-font-size: 0.875rem; // Font size for <footer>
|
||||
$footer-margin: 1rem 0 0; // Margin for <footer>
|
||||
$footer-padding: 1.5rem 0.5rem 0.75rem; // Padding for <footer>
|
||||
$footer-link-fore-color: #0288d1; // Text color for links in <footer>
|
||||
$include-footer-sticky: true; // Should sticky <footer> elements be included (`true`/`false`) [3]
|
||||
$footer-sticky-name: 'sticky'; // Class name for sticky <footer> elements
|
||||
// Notes:
|
||||
// [1] - If the value of $include-header-sticky is `true`, a class will be created that will allow for sticky positioning
|
||||
// of <header> elements, using the value of $header-sticky-name for the name of the class.
|
||||
// [2] - If the value of $nav-include-sublink-bar is `true`, a left-side border bar will appear next to the navigation
|
||||
// subcategories, using the values specified.
|
||||
// [3] - If the value of $include-footer-bottom is `true`, a class will be created that will allow for sticky positioning
|
||||
// of <footer> elements, using the value of $footer-sticky-name for the name of the class.
|
||||
// Variables for responsive tables
|
||||
$table-border-style: 1px solid #c9c9c9; // Border style for <table> and children
|
||||
$table-border-radius: 0; // Border radius for <table> and children
|
||||
|
|
@ -510,7 +510,6 @@ $include-center-block-name: false; // Should center block be included? (
|
|||
// that module and marked as such below it.
|
||||
@import '../mini/core';
|
||||
@import '../mini/grid';
|
||||
@import '../mini/navigation';
|
||||
@import '../mini/input_control';
|
||||
/*
|
||||
Custom elements for forms and input elements.
|
||||
|
|
@ -527,6 +526,7 @@ $include-center-block-name: false; // Should center block be included? (
|
|||
$button-style1-border-radius, $button-style1-padding, $button-style1-margin);
|
||||
@include make-button-alt-style ($button-style2-name, $button-style2-border-style,
|
||||
$button-style2-border-radius, $button-style2-padding, $button-style2-margin);
|
||||
@import '../mini/navigation';
|
||||
@import '../mini/table';
|
||||
@import '../mini/card';
|
||||
/*
|
||||
|
|
|
|||
|
|
@ -136,40 +136,6 @@ $grid-large-prefix: 'lg'; // Large screen class prefix for grid
|
|||
// the needed styles. In this case, values should be specified for $grid-extra-small-prefix and $grid-small-breakpoint.
|
||||
// [2] - If the value of $include-parent-layout is `true`, the grid system will contain extra classes that will define the column
|
||||
// layout of their children. In this case, a value should be specified for $grid-row-parent-layout-prefix.
|
||||
// Variables for navigational elements
|
||||
$header-height: 2.75rem; // Height for <header>
|
||||
$header-back-color: #12171a; // Background color for <header>
|
||||
$header-fore-color: #f5f5f5; // Text color for <header>
|
||||
$header-border-style: 0; // Border style for <header>
|
||||
$header-margin: 0; // Margin for <header>
|
||||
$header-padding: 0.125rem 0.5rem; // Padding for <header>
|
||||
$header-box-shadow: none; // Box shadow for <header>
|
||||
$header-logo-name: 'logo'; // Class name for <header>'s logo
|
||||
$header-logo-font-size: 1.75rem; // Font size for <header>'s logo
|
||||
$header-logo-line-height: 1.3125em; // Line height for <header>'s logo
|
||||
$header-logo-margin: 0.0625rem 0.375rem 0.0625rem 0.0625rem; // Margin for <header>'s logo
|
||||
$header-logo-padding: 0; // Padding for <header>'s logo
|
||||
$header-link-hover-color: #20292e; // Hover color for <header>'s links
|
||||
$header-link-margin: 0.125rem 0; // Margin for <header>'s links
|
||||
$include-header-sticky: true; // Should sticky <header> elements be included? (`true`/`false`) [1]
|
||||
$header-sticky-name: 'sticky'; // Class name for sticky <header>
|
||||
$include-nav-styles: false; // [Hidden flag override] Should <nav> elements by stylized? (`true`/`false`) [2]
|
||||
$footer-back-color: #192024; // Background color for <footer>
|
||||
$footer-fore-color: #f5f5f5; // Text color for <footer>
|
||||
$footer-border-style: 0; // Border stye for <footer>
|
||||
$footer-font-size: 0.875rem; // Font size for <footer>
|
||||
$footer-margin: 1rem 0 0; // Margin for <footer>
|
||||
$footer-padding: 1.5rem 0.5rem 0.75rem; // Padding for <footer>
|
||||
$footer-link-fore-color: #0288d1; // Text color for links in <footer>
|
||||
$include-footer-sticky: true; // Should sticky <footer> elements be included (`true`/`false`) [3]
|
||||
$footer-sticky-name: 'sticky'; // Class name for sticky <footer> elements
|
||||
// Notes:
|
||||
// [1] - If the value of $include-header-sticky is `true`, a class will be created that will allow for sticky positioning
|
||||
// of <header> elements, using the value of $header-sticky-name for the name of the class.
|
||||
// [2] - Due to the fact that the value of $include-nav-styles is set to `false`, <nav> elements will not be stylized. If
|
||||
// you set it to `true`, please refer to a full flavor to find the required variable definitions.
|
||||
// [3] - If the value of $include-footer-bottom is `true`, a class will be created that will allow for sticky positioning
|
||||
// of <footer> elements, using the value of $footer-sticky-name for the name of the class.
|
||||
// Variables for forms and inputs
|
||||
$form-back-color: #eeeeee; // Background color for forms
|
||||
$form-fore-color: $fore-color; // Text color for forms
|
||||
|
|
@ -259,6 +225,40 @@ $checkbox-disabled-opacity: $input-disabled-opacity;// Opacity for disabled chec
|
|||
// allow for universal button styles, even for file input buttons, but can be disabled if the base style is desired.
|
||||
// If the value is `false`, some fixes will be applied to the <input type="file"> element.
|
||||
// [4] - The value of $checkbox-size will determine a few variables like some `margin` values, `height`, `width` etc.
|
||||
// Variables for navigational elements
|
||||
$header-height: 2.75rem; // Height for <header>
|
||||
$header-back-color: #12171a; // Background color for <header>
|
||||
$header-fore-color: #f5f5f5; // Text color for <header>
|
||||
$header-border-style: 0; // Border style for <header>
|
||||
$header-margin: 0; // Margin for <header>
|
||||
$header-padding: 0.125rem 0.5rem; // Padding for <header>
|
||||
$header-box-shadow: none; // Box shadow for <header>
|
||||
$header-logo-name: 'logo'; // Class name for <header>'s logo
|
||||
$header-logo-font-size: 1.75rem; // Font size for <header>'s logo
|
||||
$header-logo-line-height: 1.3125em; // Line height for <header>'s logo
|
||||
$header-logo-margin: 0.0625rem 0.375rem 0.0625rem 0.0625rem; // Margin for <header>'s logo
|
||||
$header-logo-padding: 0; // Padding for <header>'s logo
|
||||
$header-link-hover-color: #20292e; // Hover color for <header>'s links
|
||||
$header-link-margin: 0.125rem 0; // Margin for <header>'s links
|
||||
$include-header-sticky: true; // Should sticky <header> elements be included? (`true`/`false`) [1]
|
||||
$header-sticky-name: 'sticky'; // Class name for sticky <header>
|
||||
$include-nav-styles: false; // [Hidden flag override] Should <nav> elements by stylized? (`true`/`false`) [2]
|
||||
$footer-back-color: #192024; // Background color for <footer>
|
||||
$footer-fore-color: #f5f5f5; // Text color for <footer>
|
||||
$footer-border-style: 0; // Border stye for <footer>
|
||||
$footer-font-size: 0.875rem; // Font size for <footer>
|
||||
$footer-margin: 1rem 0 0; // Margin for <footer>
|
||||
$footer-padding: 1.5rem 0.5rem 0.75rem; // Padding for <footer>
|
||||
$footer-link-fore-color: #0288d1; // Text color for links in <footer>
|
||||
$include-footer-sticky: true; // Should sticky <footer> elements be included (`true`/`false`) [3]
|
||||
$footer-sticky-name: 'sticky'; // Class name for sticky <footer> elements
|
||||
// Notes:
|
||||
// [1] - If the value of $include-header-sticky is `true`, a class will be created that will allow for sticky positioning
|
||||
// of <header> elements, using the value of $header-sticky-name for the name of the class.
|
||||
// [2] - Due to the fact that the value of $include-nav-styles is set to `false`, <nav> elements will not be stylized. If
|
||||
// you set it to `true`, please refer to a full flavor to find the required variable definitions.
|
||||
// [3] - If the value of $include-footer-bottom is `true`, a class will be created that will allow for sticky positioning
|
||||
// of <footer> elements, using the value of $footer-sticky-name for the name of the class.
|
||||
// Variables for responsive tables
|
||||
$table-border-style: 1px solid #c9c9c9; // Border style for <table> and children
|
||||
$table-border-radius: 0; // Border radius for <table> and children
|
||||
|
|
@ -387,7 +387,6 @@ $responsive-visually-hidden-prefix: 'visually-hidden'; // Class name prefix for
|
|||
// help on how to enable them.
|
||||
@import '../mini/core';
|
||||
@import '../mini/grid';
|
||||
@import '../mini/navigation';
|
||||
@import '../mini/input_control';
|
||||
/*
|
||||
Custom elements for forms and input elements.
|
||||
|
|
@ -402,6 +401,7 @@ $responsive-visually-hidden-prefix: 'visually-hidden'; // Class name prefix for
|
|||
$button-style1-border-radius, $button-style1-padding, $button-style1-margin);
|
||||
@include make-button-alt-style ($button-style2-name, $button-style2-border-style,
|
||||
$button-style2-border-radius, $button-style2-padding, $button-style2-margin);
|
||||
@import '../mini/navigation';
|
||||
@import '../mini/table';
|
||||
@import '../mini/card';
|
||||
/*
|
||||
|
|
|
|||
|
|
@ -150,56 +150,6 @@ $grid-large-prefix: 'lg'; // Large screen class prefix for grid
|
|||
// the needed styles. In this case, values should be specified for $grid-extra-small-prefix and $grid-small-breakpoint.
|
||||
// [2] - If the value of $include-parent-layout is `true`, the grid system will contain extra classes that will define the column
|
||||
// layout of their children. In this case, a value should be specified for $grid-row-parent-layout-prefix.
|
||||
// Variables for navigational elements
|
||||
$header-height: 44px; // Height for <header>
|
||||
$header-back-color: #2E3440; // Background color for <header>
|
||||
$header-fore-color: #ECEFF4; // Text color for <header>
|
||||
$header-border-style: 0; // Border style for <header>
|
||||
$header-margin: 0; // Margin for <header>
|
||||
$header-padding: 2px 8px; // Padding for <header>
|
||||
$header-box-shadow: // Box shadow for <header>
|
||||
0 2px 4px rgba(0,0,0, 0.18), 0 2px 3px rgba(0, 0, 0, 0.26);
|
||||
$header-logo-name: 'logo'; // Class name for <header>'s logo
|
||||
$header-logo-font-size: 1.75em; // Font size for <header>'s logo
|
||||
$header-logo-line-height: 1.2; // Line height for <header>'s logo
|
||||
$header-logo-margin: 1px 6px 1px 1px; // Margin for <header>'s logo
|
||||
$header-logo-padding: 3px 0 0; // Padding for <header>'s logo
|
||||
$header-link-hover-color: #37474f; // Hover color for <header>'s links
|
||||
$header-link-margin: 2px 0 0; // Margin for <header>'s links
|
||||
$include-header-sticky: true; // Should sticky <header> elements be included? (`true`/`false`) [1]
|
||||
$header-sticky-name: 'sticky'; // Class name for sticky <header>
|
||||
$nav-back-color: #ECEFF4; // Background for <nav>
|
||||
$nav-fore-color: $fore-color; // Text color for <nav>
|
||||
$nav-border-style: 1px solid #D8DEE9; // Border style for <nav>
|
||||
$nav-border-radius: 0; // Border radius for <nav>
|
||||
$nav-padding: 8px 8px 16px 20px; // Padding for <nav>
|
||||
$nav-margin: 2px; // Margin for <nav>
|
||||
$nav-box-shadow: // Box shadow for <nav>
|
||||
0 2px 4px rgba(0,0,0, 0.1), 0 2px 3px rgba(0, 0, 0, 0.15);
|
||||
$nav-link-fore-color: #88C0D0; // Text color for links in <nav>
|
||||
$nav-sublink-prefix: 'sublink'; // Prefix for the subcategory links in <nav>
|
||||
$nav-sublink-depth: 2; // Amount of subcategory classes to add
|
||||
$nav-sublink-padding-left: 12px; // Left padding to add to subcategories
|
||||
$nav-include-sublink-bar: true; // Should a left border bar be added to subcategories (`true`/`false`) [2]
|
||||
$nav-sublink-bar-left-position: 3px; // Left position of subcategory bar
|
||||
$nav-sublink-bar-width: 1px; // Width of the subcategory bar
|
||||
$nav-sublink-bar-color: #81A1C1; // Subcategory bar color
|
||||
$footer-back-color: #434C5E; // Background color for <footer>
|
||||
$footer-fore-color: #ECEFF4; // Text color for <footer>
|
||||
$footer-border-style: 0; // Border stye for <footer>
|
||||
$footer-font-size: 85%; // Font size for <footer>
|
||||
$footer-margin: 18px 0 0; // Margin for <footer>
|
||||
$footer-padding: 22px 10px 12px; // Padding for <footer>
|
||||
$footer-link-fore-color: #88C0D0; // Text color for links in <footer>
|
||||
$include-footer-sticky: true; // Should sticky <footer> elements be included (`true`/`false`) [3]
|
||||
$footer-sticky-name: 'sticky'; // Class name for sticky <footer> elements
|
||||
// Notes:
|
||||
// [1] - If the value of $include-header-sticky is `true`, a class will be created that will allow for sticky positioning
|
||||
// of <header> elements, using the value of $header-sticky-name for the name of the class.
|
||||
// [2] - If the value of $nav-include-sublink-bar is `true`, a left-side border bar will appear next to the navigation
|
||||
// subcategories, using the values specified.
|
||||
// [3] - If the value of $include-footer-bottom is `true`, a class will be created that will allow for sticky positioning
|
||||
// of <footer> elements, using the value of $footer-sticky-name for the name of the class.
|
||||
// Variables for forms and inputs
|
||||
$form-back-color: #ECEFF4; // Background color for forms
|
||||
$form-fore-color: $fore-color; // Text color for forms
|
||||
|
|
@ -301,6 +251,56 @@ $checkbox-disabled-opacity: $input-disabled-opacity; // Opacity for disabled
|
|||
// allow for universal button styles, even for file input buttons, but can be disabled if the base style is desired.
|
||||
// If the value is `false`, some fixes will be applied to the <input type="file"> element.
|
||||
// [3] - The value of $checkbox-size will determine a few variables like some `margin` values, `height`, `width` etc.
|
||||
// Variables for navigational elements
|
||||
$header-height: 44px; // Height for <header>
|
||||
$header-back-color: #2E3440; // Background color for <header>
|
||||
$header-fore-color: #ECEFF4; // Text color for <header>
|
||||
$header-border-style: 0; // Border style for <header>
|
||||
$header-margin: 0; // Margin for <header>
|
||||
$header-padding: 2px 8px; // Padding for <header>
|
||||
$header-box-shadow: // Box shadow for <header>
|
||||
0 2px 4px rgba(0,0,0, 0.18), 0 2px 3px rgba(0, 0, 0, 0.26);
|
||||
$header-logo-name: 'logo'; // Class name for <header>'s logo
|
||||
$header-logo-font-size: 1.75em; // Font size for <header>'s logo
|
||||
$header-logo-line-height: 1.2; // Line height for <header>'s logo
|
||||
$header-logo-margin: 1px 6px 1px 1px; // Margin for <header>'s logo
|
||||
$header-logo-padding: 3px 0 0; // Padding for <header>'s logo
|
||||
$header-link-hover-color: #37474f; // Hover color for <header>'s links
|
||||
$header-link-margin: 2px 0 0; // Margin for <header>'s links
|
||||
$include-header-sticky: true; // Should sticky <header> elements be included? (`true`/`false`) [1]
|
||||
$header-sticky-name: 'sticky'; // Class name for sticky <header>
|
||||
$nav-back-color: #ECEFF4; // Background for <nav>
|
||||
$nav-fore-color: $fore-color; // Text color for <nav>
|
||||
$nav-border-style: 1px solid #D8DEE9; // Border style for <nav>
|
||||
$nav-border-radius: 0; // Border radius for <nav>
|
||||
$nav-padding: 8px 8px 16px 20px; // Padding for <nav>
|
||||
$nav-margin: 2px; // Margin for <nav>
|
||||
$nav-box-shadow: // Box shadow for <nav>
|
||||
0 2px 4px rgba(0,0,0, 0.1), 0 2px 3px rgba(0, 0, 0, 0.15);
|
||||
$nav-link-fore-color: #88C0D0; // Text color for links in <nav>
|
||||
$nav-sublink-prefix: 'sublink'; // Prefix for the subcategory links in <nav>
|
||||
$nav-sublink-depth: 2; // Amount of subcategory classes to add
|
||||
$nav-sublink-padding-left: 12px; // Left padding to add to subcategories
|
||||
$nav-include-sublink-bar: true; // Should a left border bar be added to subcategories (`true`/`false`) [2]
|
||||
$nav-sublink-bar-left-position: 3px; // Left position of subcategory bar
|
||||
$nav-sublink-bar-width: 1px; // Width of the subcategory bar
|
||||
$nav-sublink-bar-color: #81A1C1; // Subcategory bar color
|
||||
$footer-back-color: #434C5E; // Background color for <footer>
|
||||
$footer-fore-color: #ECEFF4; // Text color for <footer>
|
||||
$footer-border-style: 0; // Border stye for <footer>
|
||||
$footer-font-size: 85%; // Font size for <footer>
|
||||
$footer-margin: 18px 0 0; // Margin for <footer>
|
||||
$footer-padding: 22px 10px 12px; // Padding for <footer>
|
||||
$footer-link-fore-color: #88C0D0; // Text color for links in <footer>
|
||||
$include-footer-sticky: true; // Should sticky <footer> elements be included (`true`/`false`) [3]
|
||||
$footer-sticky-name: 'sticky'; // Class name for sticky <footer> elements
|
||||
// Notes:
|
||||
// [1] - If the value of $include-header-sticky is `true`, a class will be created that will allow for sticky positioning
|
||||
// of <header> elements, using the value of $header-sticky-name for the name of the class.
|
||||
// [2] - If the value of $nav-include-sublink-bar is `true`, a left-side border bar will appear next to the navigation
|
||||
// subcategories, using the values specified.
|
||||
// [3] - If the value of $include-footer-bottom is `true`, a class will be created that will allow for sticky positioning
|
||||
// of <footer> elements, using the value of $footer-sticky-name for the name of the class.
|
||||
// Variables for responsive tables
|
||||
$table-border-style: 1px solid #D8DEE9; // Border style for <table> and children
|
||||
$table-border-radius: 0; // Border radius for <table> and children
|
||||
|
|
@ -545,7 +545,6 @@ $include-center-block-name: false; // Should center block be included? (`
|
|||
// that module and marked as such below it.
|
||||
@import '../mini/core';
|
||||
@import '../mini/grid';
|
||||
@import '../mini/navigation';
|
||||
@import '../mini/input_control';
|
||||
/*
|
||||
Custom elements for forms and input elements.
|
||||
|
|
@ -562,6 +561,7 @@ $include-center-block-name: false; // Should center block be included? (`
|
|||
$button-style1-border-radius, $button-style1-padding, $button-style1-margin);
|
||||
@include make-button-alt-style ($button-style2-name, $button-style2-border-style,
|
||||
$button-style2-border-radius, $button-style2-padding, $button-style2-margin);
|
||||
@import '../mini/navigation';
|
||||
@import '../mini/table';
|
||||
@import '../mini/card';
|
||||
/*
|
||||
|
|
|
|||
|
|
@ -149,53 +149,6 @@ $grid-large-prefix: 'lg'; // Large screen class prefix for grid
|
|||
// the needed styles. In this case, values should be specified for $grid-extra-small-prefix and $grid-small-breakpoint.
|
||||
// [2] - If the value of $include-parent-layout is `true`, the grid system will contain extra classes that will define the column
|
||||
// layout of their children. In this case, a value should be specified for $grid-row-parent-layout-prefix.
|
||||
// Variables for navigational elements
|
||||
$header-height: 48px; // Height for <header>
|
||||
$header-back-color: #211423; // Background color for <header>
|
||||
$header-fore-color: #fffddc; // Text color for <header>
|
||||
$header-border-style: 0; // Border style for <header>
|
||||
$header-margin: 0; // Margin for <header>
|
||||
$header-padding: 3px 10px; // Padding for <header>
|
||||
$header-box-shadow: // Box shadow for <header>
|
||||
0 2px 4px rgba(0,0,0, 0.18), 0 2px 3px rgba(0, 0, 0, 0.26);
|
||||
$header-logo-name: 'logo'; // Class name for <header>'s logo
|
||||
$header-logo-font-size: 1.75em; // Font size for <header>'s logo
|
||||
$header-logo-line-height: 1.5; // Line height for <header>'s logo
|
||||
$header-logo-margin: 6px 6px 1px 1px; // Margin for <header>'s logo
|
||||
$header-logo-padding: 6px 0 0; // Padding for <header>'s logo
|
||||
$header-link-hover-color: #493e4b; // Hover color for <header>'s links
|
||||
$header-link-margin: 3px 0 0; // Margin for <header>'s links
|
||||
$include-header-sticky: true; // Should sticky <header> elements be included? (`true`/`false`) [1]
|
||||
$header-sticky-name: 'sticky'; // Class name for sticky <header>
|
||||
$nav-back-color: #e8deff; // Background for <nav>
|
||||
$nav-fore-color: $fore-color; // Text color for <nav>
|
||||
$nav-border-style: 1px solid #a9a2ba; // Border style for <nav>
|
||||
$nav-border-radius: 2px; // Border radius for <nav>
|
||||
$nav-padding: 12px 10px 18px 22px; // Padding for <nav>
|
||||
$nav-margin: 2px; // Margin for <nav>
|
||||
$nav-box-shadow: // Box shadow for <nav>
|
||||
0 2px 4px rgba(0,0,0, 0.1), 0 2px 3px rgba(0, 0, 0, 0.15);
|
||||
$nav-link-fore-color: #6979c6; // Text color for links in <nav>
|
||||
$nav-sublink-prefix: 'sublink'; // Prefix for the subcategory links in <nav>
|
||||
$nav-sublink-depth: 2; // Amount of subcategory classes to add
|
||||
$nav-sublink-padding-left:14px; // Left padding to add to subcategories
|
||||
$nav-include-sublink-bar: false; // Should a left border bar be added to subcategories (`true`/`false`) [2]
|
||||
$footer-back-color: #211423; // Background color for <footer>
|
||||
$footer-fore-color: #fffddc; // Text color for <footer>
|
||||
$footer-border-style: 0; // Border stye for <footer>
|
||||
$footer-font-size: 90%; // Font size for <footer>
|
||||
$footer-margin: 22px 0 0; // Margin for <footer>
|
||||
$footer-padding: 24px 10px 14px; // Padding for <footer>
|
||||
$footer-link-fore-color: #7480b3; // Text color for links in <footer>
|
||||
$include-footer-sticky: true; // Should sticky <footer> elements be included (`true`/`false`) [3]
|
||||
$footer-sticky-name: 'sticky'; // Class name for sticky <footer> elements
|
||||
// Notes:
|
||||
// [1] - If the value of $include-header-sticky is `true`, a class will be created that will allow for sticky positioning
|
||||
// of <header> elements, using the value of $header-sticky-name for the name of the class.
|
||||
// [2] - If the value of $nav-include-sublink-bar is `true`, a left-side border bar will appear next to the navigation
|
||||
// subcategories, using the values specified.
|
||||
// [3] - If the value of $include-footer-bottom is `true`, a class will be created that will allow for sticky positioning
|
||||
// of <footer> elements, using the value of $footer-sticky-name for the name of the class.
|
||||
// Variables for forms and inputs
|
||||
$form-back-color: #e8deff; // Background color for forms
|
||||
$form-fore-color: $fore-color; // Text color for forms
|
||||
|
|
@ -297,6 +250,53 @@ $checkbox-disabled-opacity: $input-disabled-opacity; // Opacity for disabled
|
|||
// allow for universal button styles, even for file input buttons, but can be disabled if the base style is desired.
|
||||
// If the value is `false`, some fixes will be applied to the <input type="file"> element.
|
||||
// [3] - The value of $checkbox-size will determine a few variables like some `margin` values, `height`, `width` etc.
|
||||
// Variables for navigational elements
|
||||
$header-height: 48px; // Height for <header>
|
||||
$header-back-color: #211423; // Background color for <header>
|
||||
$header-fore-color: #fffddc; // Text color for <header>
|
||||
$header-border-style: 0; // Border style for <header>
|
||||
$header-margin: 0; // Margin for <header>
|
||||
$header-padding: 3px 10px; // Padding for <header>
|
||||
$header-box-shadow: // Box shadow for <header>
|
||||
0 2px 4px rgba(0,0,0, 0.18), 0 2px 3px rgba(0, 0, 0, 0.26);
|
||||
$header-logo-name: 'logo'; // Class name for <header>'s logo
|
||||
$header-logo-font-size: 1.75em; // Font size for <header>'s logo
|
||||
$header-logo-line-height: 1.5; // Line height for <header>'s logo
|
||||
$header-logo-margin: 6px 6px 1px 1px; // Margin for <header>'s logo
|
||||
$header-logo-padding: 6px 0 0; // Padding for <header>'s logo
|
||||
$header-link-hover-color: #493e4b; // Hover color for <header>'s links
|
||||
$header-link-margin: 3px 0 0; // Margin for <header>'s links
|
||||
$include-header-sticky: true; // Should sticky <header> elements be included? (`true`/`false`) [1]
|
||||
$header-sticky-name: 'sticky'; // Class name for sticky <header>
|
||||
$nav-back-color: #e8deff; // Background for <nav>
|
||||
$nav-fore-color: $fore-color; // Text color for <nav>
|
||||
$nav-border-style: 1px solid #a9a2ba; // Border style for <nav>
|
||||
$nav-border-radius: 2px; // Border radius for <nav>
|
||||
$nav-padding: 12px 10px 18px 22px; // Padding for <nav>
|
||||
$nav-margin: 2px; // Margin for <nav>
|
||||
$nav-box-shadow: // Box shadow for <nav>
|
||||
0 2px 4px rgba(0,0,0, 0.1), 0 2px 3px rgba(0, 0, 0, 0.15);
|
||||
$nav-link-fore-color: #6979c6; // Text color for links in <nav>
|
||||
$nav-sublink-prefix: 'sublink'; // Prefix for the subcategory links in <nav>
|
||||
$nav-sublink-depth: 2; // Amount of subcategory classes to add
|
||||
$nav-sublink-padding-left:14px; // Left padding to add to subcategories
|
||||
$nav-include-sublink-bar: false; // Should a left border bar be added to subcategories (`true`/`false`) [2]
|
||||
$footer-back-color: #211423; // Background color for <footer>
|
||||
$footer-fore-color: #fffddc; // Text color for <footer>
|
||||
$footer-border-style: 0; // Border stye for <footer>
|
||||
$footer-font-size: 90%; // Font size for <footer>
|
||||
$footer-margin: 22px 0 0; // Margin for <footer>
|
||||
$footer-padding: 24px 10px 14px; // Padding for <footer>
|
||||
$footer-link-fore-color: #7480b3; // Text color for links in <footer>
|
||||
$include-footer-sticky: true; // Should sticky <footer> elements be included (`true`/`false`) [3]
|
||||
$footer-sticky-name: 'sticky'; // Class name for sticky <footer> elements
|
||||
// Notes:
|
||||
// [1] - If the value of $include-header-sticky is `true`, a class will be created that will allow for sticky positioning
|
||||
// of <header> elements, using the value of $header-sticky-name for the name of the class.
|
||||
// [2] - If the value of $nav-include-sublink-bar is `true`, a left-side border bar will appear next to the navigation
|
||||
// subcategories, using the values specified.
|
||||
// [3] - If the value of $include-footer-bottom is `true`, a class will be created that will allow for sticky positioning
|
||||
// of <footer> elements, using the value of $footer-sticky-name for the name of the class.
|
||||
// Variables for responsive tables
|
||||
$table-border-style: 1px solid #a9a2ba; // Border style for <table> and children
|
||||
$table-border-radius: 2px; // Border radius for <table> and children
|
||||
|
|
@ -518,7 +518,6 @@ $include-center-block-name: false; // Should center block be included? (
|
|||
// that module and marked as such below it.
|
||||
@import '../mini/core';
|
||||
@import '../mini/grid';
|
||||
@import '../mini/navigation';
|
||||
@import '../mini/input_control';
|
||||
/*
|
||||
Custom elements for forms and input elements.
|
||||
|
|
@ -535,6 +534,7 @@ $include-center-block-name: false; // Should center block be included? (
|
|||
$button-style1-border-radius, $button-style1-padding, $button-style1-margin);
|
||||
@include make-button-alt-style ($button-style2-name, $button-style2-border-style,
|
||||
$button-style2-border-radius, $button-style2-padding, $button-style2-margin);
|
||||
@import '../mini/navigation';
|
||||
@import '../mini/table';
|
||||
@import '../mini/card';
|
||||
/*
|
||||
|
|
|
|||
Loading…
Reference in a new issue