beapi-frontend-framework/src/scss/login.scss at 13624d52761fe1c7ee6442cfccef9c2ccd978430 · BeAPI/beapi-frontend-framework · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
// SCSS variables to customise the login page styles
// The CSS file generated in dist/ by webpack is called automatically thanks to the WP Login Page mu-plugin present in the WP Skeleton.

$login-logo-path: "../../src/img/static/logo.webp";
$login-logo-size: 312px 43px;
$login-logo-height: 60px;
$login-body-bg-color: #666;
$login-text-color: #fff;
$login-link-color: #fff;
$login-link-hover-color: #eee;
$login-remember-input-check-color: #222;
$login-btn-bg-color: #666;
$login-btn-hover-bg-color: #222;

// Except for specific needs, it is not necessary to modify the SCSS rules below (modification of the SCSS variables is sufficient)

html,
body {

	&::before,
	&::after {
		display: none;
	}
}

body.login {
	// screen background color
	background: $login-body-bg-color;

	// logo (before login form) path and size
	h1 a {
		display: block;
		width: 100%;
		height: $login-logo-height;
		background-image: url(#{$login-logo-path});
		background-repeat: no-repeat;
		background-position: center center;
		background-size: $login-logo-size;
	}

	// default link styles
	a {
		color: $login-link-color;
		text-decoration: none;

		&:hover,
		&:focus {
			color: $login-link-hover-color;
			text-decoration: underline;
		}
	}

	// notice block border-left colo
	/* stylelint-disable-next-line selector-id-pattern */
	#login_error,
	.message,
	.success {
		border-left-color: $login-text-color;
	}

	// remember input checkbox check color
	input[type="checkbox"]:checked::before {
		color: $login-remember-input-check-color;
	}

	// link after login form styles
	#nav,
	#backtoblog {
		a {
			color: $login-link-color;

			&:focus,
			&:hover {
				color: $login-link-hover-color;
				text-decoration: underline;
			}
		}
	}
}

// submit login form button styles
.wp-core-ui {
	.button-primary {
		text-shadow: none;
		background-color: $login-btn-bg-color;
		border: 0;
		box-shadow: none;
		transition: all .2s ease;

		&:hover {
			background-color: $login-btn-hover-bg-color;
		}
	}
}