source: OpenWorkouts-current/ow/static/______css/modules/header.css @ 5cbc4a0

currentfeature/docs
Last change on this file since 5cbc4a0 was 5cbc4a0, checked in by Segundo Fdez <segun.2@…>, 5 years ago

Update dashboard and login with less.

  • Property mode set to 100644
File size: 2.7 KB
Line 
1/* ==========================================================================
2   Header
3   ========================================================================== */
4
5.header-content {
6    border-bottom: 1px solid var(--color-main-light);
7    display: flex;
8    padding: 0em 1.5em;
9    justify-content: space-between;
10    align-items: center;
11}
12.
13.header-content a {
14    text-decoration: none;
15}
16
17
18/* Logo
19   ========================================================================== */
20.logo {
21    display: inline-block;
22    font-size: 24px;
23    line-height: 1em;
24    font-weight: 800;
25    text-transform: uppercase;
26    margin: 0;
27}
28.logo a {
29    text-decoration: none;
30}
31
32.logo:hover span{
33    color: var(--color-app);
34}
35
36.logo-open {
37    display: block;
38    color: var(--color-app);
39}
40.logo-work,
41.logo-outs {
42    color: var(--color-app-light);
43}
44
45.description {
46    font-size: 14px;
47    font-weight: 300;
48    letter-spacing: .025em;
49    color: var(--color-main-medium);
50}
51
52/* Navigation
53   ========================================================================== */
54.nav-site {
55    font-size: 13px;
56}
57.nav-site ul {
58    list-style-type: none;
59    padding: 0;
60    margin: 0;
61    display: flex;
62    flex-direction: row;
63    justify-content: space-between;
64}
65.nav-site li {
66    border-left: 1px solid var(--color-main-light);
67    flex-grow: 1;
68    text-align: center;
69}
70.nav-site a {
71    display: block;
72    padding: 1.25rem;
73    color: var(--color-main-medium);
74    text-decoration: none;
75}
76.nav-site a:hover,
77.nav-site .is-active a {
78    color: var(--color-main);
79}
80
81
82/* Add workout button with submenu -------------------------------------------*/
83.add-workout {
84    position: relative;
85}
86.add-workout::before{
87    content: "+";
88    font-weight: 800;
89    font-size: 32px;
90    line-height: 0;
91    position: relative;
92    top: .75em;color: var(--color-app);
93}
94.add-workout span{
95    display: none;
96}
97
98.add-workout:hover::after{
99        content: "";
100        position: absolute;
101        background-color: white;
102        width: 100%;
103        height: 1px;
104        display: block;
105        z-index: 20;
106}
107.add-workout:hover ul{
108    display: inline-block;
109}
110
111/* submenu -------------------------------------------------------------- */
112.add-workout ul{
113    display: none;
114    flex-direction: column;
115    position: absolute;
116    right: -1px;
117    border: 1px solid var(--color-main-light);
118    width: 150px;
119}
120.add-workout ul li{
121    border-left:transparent;
122    text-align: left;
123}
124.add-workout ul a:hover{
125    background-color: var(--color-main-xtralight);
126}
127
128/* States -------------------------------------------------------------- */
129.is-login .description {
130    display: none;
131}
132.is-login .logo-open {
133    display: inline-block;
134}
Note: See TracBrowser for help on using the repository browser.