├── src
├── sass
│ ├── pages
│ │ └── _home.scss
│ ├── components
│ │ └── _buttons.scss
│ ├── layouts
│ │ ├── _footer.scss
│ │ └── _header.scss
│ ├── abstracts
│ │ └── _variables.scss
│ ├── base
│ │ ├── _typography.scss
│ │ ├── _reset.scss
│ │ └── _normalise.scss
│ └── main.scss
├── style.scss
├── components
│ └── header
│ │ ├── test
│ │ ├── __snapshots__
│ │ │ └── index.js.snap
│ │ └── index.js
│ │ └── index.js
├── index.js
└── App.js
├── .prettierrc.js
├── .eslintignore
├── public
└── index.html
├── .gitignore
├── .babelrc
├── .stylelintrc.json
├── webpack.config.js
├── .eslintrc.json
├── README.md
└── package.json
/src/sass/pages/_home.scss:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/sass/components/_buttons.scss:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/sass/layouts/_footer.scss:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/sass/layouts/_header.scss:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/sass/abstracts/_variables.scss:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/style.scss:
--------------------------------------------------------------------------------
1 | @import "sass/main";
2 |
--------------------------------------------------------------------------------
/.prettierrc.js:
--------------------------------------------------------------------------------
1 | module.exports = require( '@wordpress/prettier-config' );
2 |
--------------------------------------------------------------------------------
/.eslintignore:
--------------------------------------------------------------------------------
1 | **/*.min.js
2 | **/node_modules/**
3 | **/vendor/**
4 | **/build/**
5 |
--------------------------------------------------------------------------------
/src/components/header/test/__snapshots__/index.js.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[`Test Header Component Should match Header snapshot and render correctly 1`] = `
4 |
5 | Header
6 |
7 | `;
8 |
--------------------------------------------------------------------------------
/src/components/header/index.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Header Component.
3 | *
4 | * @package react-app-boilerplate
5 | */
6 |
7 | /**
8 | * Header
9 | */
10 | const Header = () => {
11 | return Header
;
12 | };
13 |
14 | export default Header;
15 |
--------------------------------------------------------------------------------
/src/sass/base/_typography.scss:
--------------------------------------------------------------------------------
1 | body{
2 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
3 | font-size: 16rem;
4 | font-weight: 400;
5 | line-height: 1.3;
6 | color: #222;
7 | }
8 |
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Index file.
3 | *
4 | * @package react-app-boilerplate
5 | */
6 |
7 | /**
8 | * External dependency
9 | */
10 | import ReactDOM from 'react-dom';
11 |
12 | /**
13 | * Internal dependecy
14 | */
15 | import App from './App';
16 |
17 | ReactDOM.render( , document.getElementById( 'root' ) );
18 |
--------------------------------------------------------------------------------
/src/App.js:
--------------------------------------------------------------------------------
1 | /**
2 | * App Component.
3 | *
4 | * @package react-app-boilerplate
5 | */
6 |
7 | /**
8 | * Internal Dependencies.
9 | */
10 | import Header from './components/header';
11 | import './style.scss';
12 |
13 | class App extends React.Component {
14 | render() {
15 | return (
16 |
17 |
18 |
19 | );
20 | }
21 | }
22 |
23 | export default App;
24 |
--------------------------------------------------------------------------------
/src/sass/main.scss:
--------------------------------------------------------------------------------
1 | /* Resets */
2 | @import "base/reset";
3 | @import "base/normalise";
4 |
5 | /* Typography */
6 | @import "base/typography";
7 |
8 | /* Variables */
9 | @import "abstracts/variables";
10 |
11 | /* Components */
12 | @import "components/buttons";
13 |
14 | /* Layouts */
15 | @import "layouts/header";
16 | @import "layouts/footer";
17 |
18 | /* Pages */
19 | @import "pages/home";
20 |
--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
7 |
8 | Dff TV APP
9 |
10 |
11 |
12 |
13 |
14 |
15 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # node/bower and dependency directories
2 | node_modules
3 | bower_components
4 | .sass-cache
5 | .jest-coverage
6 |
7 | # Ignore temporary OS files
8 | *.log
9 | npm-debug.log
10 | yarn-error.log
11 | .DS_Store
12 | .Spotlight-V100
13 | .Trashes
14 | debug.log
15 | Thumbs.db
16 |
17 | # Code Editor files
18 | .idea
19 | .vscode
20 | *.sublime-project
21 | *.sublime-workspace
22 |
23 | # Other files and folders
24 | *.map
25 | .cache
26 | .env
27 |
--------------------------------------------------------------------------------
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "presets": [
3 | [ "@babel/preset-env", {
4 | "modules": false,
5 | "targets": {
6 | "browsers": [
7 | "last 2 Chrome versions",
8 | "last 2 Firefox versions",
9 | "last 2 Safari versions",
10 | "last 2 iOS versions",
11 | "last 1 Android version",
12 | "last 1 ChromeAndroid version",
13 | "ie 11"
14 | ]
15 | }
16 | } ],
17 | "@babel/preset-react"
18 | ],
19 | "plugins": [
20 | "@babel/plugin-proposal-class-properties",
21 | "@babel/plugin-transform-modules-commonjs",
22 | "react-require"
23 | ]
24 | }
25 |
--------------------------------------------------------------------------------
/.stylelintrc.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "stylelint-config-wordpress",
3 | "rules": {
4 | "at-rule-empty-line-before": null,
5 | "at-rule-no-unknown": null,
6 | "comment-empty-line-before": null,
7 | "declaration-property-unit-whitelist": null,
8 | "font-weight-notation": null,
9 | "max-line-length": null,
10 | "no-descending-specificity": null,
11 | "no-duplicate-selectors": null,
12 | "rule-empty-line-before": null,
13 | "selector-class-pattern": null,
14 | "value-keyword-case": null,
15 | "max-empty-lines": 1,
16 | "declaration-no-important": true
17 | }
18 | }
19 |
--------------------------------------------------------------------------------
/src/components/header/test/index.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Test for header component.
3 | *
4 | * @package react-app-boilerplate
5 | */
6 |
7 | /**
8 | * External dependencies
9 | */
10 | import renderer from 'react-test-renderer';
11 |
12 | /**
13 | * Internal dependencies
14 | */
15 | import Header from '../index';
16 |
17 | describe( 'Test Header Component', () => {
18 | it( 'Should match Header snapshot and render correctly', () => {
19 | const component = renderer.create( );
20 |
21 | const tree = component.toJSON();
22 |
23 | expect( tree ).toMatchSnapshot();
24 | } );
25 | } );
26 |
--------------------------------------------------------------------------------
/src/sass/base/_reset.scss:
--------------------------------------------------------------------------------
1 | /*** box sizing border-box for all elements ***/
2 | *,
3 | *::before,
4 | *::after {
5 | box-sizing: border-box;
6 | }
7 |
8 | a {
9 | text-decoration: none;
10 | color: inherit;
11 | cursor: pointer;
12 | }
13 |
14 | button {
15 | background-color: transparent;
16 | color: inherit;
17 | border-width: 0;
18 | padding: 0;
19 | cursor: pointer;
20 | }
21 |
22 | figure {
23 | margin: 0;
24 | }
25 |
26 | input::-moz-focus-inner {
27 | border: 0;
28 | padding: 0;
29 | margin: 0;
30 | }
31 |
32 | ul, ol, dd {
33 | margin: 0;
34 | padding: 0;
35 | list-style: none;
36 | }
37 |
38 | h1, h2, h3, h4, h5, h6 {
39 | margin: 0;
40 | font-size: inherit;
41 | font-weight: inherit;
42 | }
43 |
44 | p {
45 | margin: 0;
46 | }
47 |
48 | cite {
49 | font-style: normal;
50 | }
51 |
52 | fieldset {
53 | border-width: 0;
54 | padding: 0;
55 | margin: 0;
56 | }
57 |
--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
1 | const HtmlWebPackPlugin = require( 'html-webpack-plugin' );
2 | const path = require( 'path' );
3 |
4 | /**
5 | * Webpack module exports.
6 | *
7 | * @type {Object}
8 | */
9 | module.exports = {
10 | context: __dirname,
11 | entry: './src/index.js',
12 | output: {
13 | path: path.resolve( __dirname, 'build' ),
14 | filename: 'main.js',
15 | },
16 | devServer: {
17 | historyApiFallback: true
18 | },
19 | module: {
20 | rules: [
21 | {
22 | test: /\.js?$/,
23 | exclude: /node_module/,
24 | use: 'babel-loader',
25 | },
26 | {
27 | test: /\.s[ac]ss$/i,
28 | use: [
29 | // Creates `style` nodes from JS strings
30 | 'style-loader',
31 | // Translates CSS into CommonJS
32 | 'css-loader',
33 | // Compiles Sass to CSS
34 | 'sass-loader',
35 | ],
36 | },
37 | {
38 | test: /\.(png|jp?g|svg)$/,
39 | use: [{
40 | loader: "file-loader",
41 | options: {
42 | name: '[name].[ext]',
43 | outputPath: 'images/',
44 | publicPath: 'images/'
45 | }
46 | }]
47 | }
48 | ]
49 | },
50 | plugins: [
51 | new HtmlWebPackPlugin( {
52 | template: path.resolve( __dirname, 'public/index.html' ),
53 | filename: 'index.html'
54 | } )
55 | ]
56 | };
57 |
--------------------------------------------------------------------------------
/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": [
3 | "plugin:@wordpress/eslint-plugin/recommended",
4 | "plugin:eslint-comments/recommended"
5 | ],
6 | "parser": "babel-eslint",
7 | "parserOptions": {
8 | "ecmaVersion": 6,
9 | "ecmaFeatures": {
10 | "jsx": true,
11 | "arrowFunctions": true,
12 | "blockBindings": true,
13 | "classes": true,
14 | "defaultParams": true,
15 | "modules": true
16 | },
17 | "sourceType": "module"
18 | },
19 | "env": {
20 | "es6": true,
21 | "browser": true,
22 | "node": true,
23 | "commonjs": true,
24 | "jquery": true
25 | },
26 | "rules": {
27 | "camelcase": [
28 | 1
29 | ],
30 | "space-in-parens": [
31 | 1,
32 | "always"
33 | ],
34 | "no-trailing-spaces": [
35 | 1
36 | ],
37 | "spaced-comment": [
38 | 0
39 | ],
40 | "padded-blocks": [
41 | 0
42 | ],
43 | "prefer-template": [
44 | 0
45 | ],
46 | "max-len": [
47 | 0
48 | ],
49 | "no-else-return": [
50 | 0
51 | ],
52 | "func-names": [
53 | 0
54 | ],
55 | "object-shorthand": [
56 | 0
57 | ],
58 | "indent": [
59 | "error",
60 | "tab"
61 | ],
62 | "space-before-function-paren": 0,
63 | "no-tabs": 0,
64 | "prefer-destructuring": 0,
65 | "no-undef": 0,
66 | "no-param-reassign": 0,
67 | "comma-dangle": 0,
68 | "lines-around-comment": 0
69 | }
70 | }
71 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # React App Boilerplate
2 | [](https://www.repostatus.org/#active) [](https://github.com/prettier/prettier)
3 |
4 |
5 |
6 | ## Maintainer
7 |
8 | | Name | Github Username |
9 | |--------------------------------------------------------|-----------------|
10 | | [Imran Sayed](mailto:codeytek.academy@gmail.com) | @imranhsayed |
11 |
12 | ## Development
13 |
14 | **Install**
15 |
16 | Clone the repo and run
17 |
18 | ```bash
19 | npm install
20 | ```
21 |
22 | **During development**
23 |
24 | Starts webpack dev server at `localhost:8080`
25 |
26 | ```bash
27 | npm run dev
28 | ```
29 |
30 | **Production**
31 |
32 | Creates an `index.html` and JavaScript file in `build` directory.
33 |
34 | ```bash
35 | npm run prod
36 | ```
37 |
38 | **Linting & Formatting**
39 |
40 | The following command will fix most errors and show and remaining ones which cannot be fixed automatically.
41 |
42 | ```bash
43 | npm run eslint:fix
44 | ```
45 |
46 | We follow the stylelint configuration used in WordPress Gutenberg, run the following command to lint and fix styles.
47 |
48 | ```bash
49 | npm run stylelint:fix
50 | ```
51 |
52 | Format code with prettier
53 |
54 | ```bash
55 | npm run format-js
56 | ```
57 |
58 | **precommit**
59 |
60 | You should run precommit to check for any eslint, stylint errors/warnings and to ensure all tests are passing before making a PR ready for review.
61 |
62 | ```bash
63 | npm run precommit
64 | ```
65 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "react-app-boilerplate",
3 | "version": "1.0.0",
4 | "description": ":fire: Front React end application",
5 | "main": "index.js",
6 | "scripts": {
7 | "dev": "webpack-dev-server --mode=development",
8 | "prod": "webpack --mode=production",
9 | "eslint": "eslint ./src/*.js ./src/**/**/**/*.js ./src/**/**/**/**/*.js",
10 | "eslint:fix": "eslint --fix ./src/*.js ./src/**/**/**/*.js ./src/**/**/**/**/*.js",
11 | "stylelint": "stylelint ./src/*.scss",
12 | "stylelint:fix": "stylelint ./src/*.scss --fix",
13 | "format-js": "prettier .prettierrc.js --write ./src/*.js ./src/**/**/**/*.js ./src/**/**/**/**/*.js",
14 | "precommit": "npm run format-js && npm run eslint:fix && npm run stylelint:fix && npm run test",
15 | "test": "jest --verbose",
16 | "test:debug": "jest --runInBand",
17 | "test:watch": "jest --watch",
18 | "test:coverage": "jest --coverage=true",
19 | "test:update": "jest --verbose --updateSnapshot"
20 | },
21 | "repository": {
22 | "type": "git",
23 | "url": "git+https://github.com/imranhsayed/react-app-boilerplate.git"
24 | },
25 | "keywords": [],
26 | "author": "",
27 | "license": "ISC",
28 | "bugs": {
29 | "url": "https://github.com/imranhsayed/react-app-boilerplate/issues"
30 | },
31 | "homepage": "https://github.com/imranhsayed/react-app-boilerplate#readme",
32 | "dependencies": {
33 | "react": "^16.13.1",
34 | "react-dom": "^16.13.1"
35 | },
36 | "devDependencies": {
37 | "@babel/core": "^7.4.3",
38 | "@babel/plugin-proposal-class-properties": "^7.4.0",
39 | "@babel/plugin-transform-modules-commonjs": "^7.9.0",
40 | "@babel/preset-env": "^7.9.5",
41 | "@babel/preset-react": "^7.9.4",
42 | "@wordpress/eslint-plugin": "^4.1.0",
43 | "@wordpress/prettier-config": "^0.1.0",
44 | "babel-eslint": "^10.1.0",
45 | "babel-jest": "^25.3.0",
46 | "babel-loader": "^8.0.5",
47 | "babel-plugin-react-require": "^3.1.3",
48 | "css-loader": "^3.5.0",
49 | "eslint": "^6.8.0",
50 | "eslint-loader": "^4.0.0",
51 | "eslint-plugin-eslint-comments": "^3.1.2",
52 | "eslint-plugin-jsdoc": "^22.1.0",
53 | "html-webpack-plugin": "^3.2.0",
54 | "jest": "^25.3.0",
55 | "node-sass": "^4.13.1",
56 | "path": "^0.12.7",
57 | "prettier": "npm:wp-prettier@^1.19.1",
58 | "react-test-renderer": "^16.13.1",
59 | "sass-loader": "^8.0.2",
60 | "style-loader": "^1.1.3",
61 | "stylelint": "^13.3.0",
62 | "stylelint-config-wordpress": "^16.0.0",
63 | "stylelint-webpack-plugin": "^1.2.3",
64 | "webpack": "^4.42.1",
65 | "webpack-cli": "^3.3.0",
66 | "webpack-dev-server": "^3.2.1"
67 | },
68 | "jest": {
69 | "testMatch": [
70 | "**/test/**/*.[jt]s?(x)"
71 | ],
72 | "testPathIgnorePatterns": [
73 | "/node_modules/"
74 | ]
75 | }
76 | }
77 |
--------------------------------------------------------------------------------
/src/sass/base/_normalise.scss:
--------------------------------------------------------------------------------
1 | /* normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */
2 |
3 | /* HTML5 display definitions
4 | ========================================================================== */
5 |
6 | /**
7 | * Correct `block` display not defined for any HTML5 element in IE 8/9.
8 | * Correct `block` display not defined for `details` or `summary` in IE 10/11
9 | * and Firefox.
10 | * Correct `block` display not defined for `main` in IE 11.
11 | */
12 |
13 | article,
14 | aside,
15 | details,
16 | figcaption,
17 | figure,
18 | footer,
19 | header,
20 | main,
21 | menu,
22 | nav,
23 | section,
24 | summary {
25 | display: block;
26 | }
27 |
28 | /**
29 | * 1. Correct `inline-block` display not defined in IE 8/9.
30 | * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
31 | */
32 |
33 | audio,
34 | canvas,
35 | progress,
36 | video {
37 | display: inline-block;
38 |
39 | /* 1 */
40 | vertical-align: baseline;
41 |
42 | /* 2 */
43 | }
44 |
45 | /**
46 | * Prevent modern browsers from displaying `audio` without controls.
47 | * Remove excess height in iOS 5 devices.
48 | */
49 |
50 | audio:not([controls]) {
51 | display: none;
52 | height: 0;
53 | }
54 |
55 | /**
56 | * Address `[hidden]` styling not present in IE 8/9/10.
57 | * Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22.
58 | */
59 |
60 | [hidden],
61 | template {
62 | display: none;
63 | }
64 |
65 | /* Text-level semantics
66 | ========================================================================== */
67 |
68 | /**
69 | * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
70 | */
71 |
72 | abbr[title] {
73 | border-bottom: 1px dotted;
74 | }
75 |
76 | /**
77 | * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
78 | */
79 |
80 | b,
81 | strong {
82 | font-weight: 700;
83 | }
84 |
85 | /**
86 | * Address styling not present in Safari and Chrome.
87 | */
88 |
89 | dfn {
90 | font-style: italic;
91 | }
92 |
93 | /**
94 | * Address styling not present in IE 8/9.
95 | */
96 |
97 | mark {
98 | background: $gray-200;
99 | color: $black;
100 | }
101 |
102 | /**
103 | * Address inconsistent and variable font size in all browsers.
104 | */
105 |
106 | small {
107 | font-size: 80%;
108 | }
109 |
110 | /**
111 | * Prevent `sub` and `sup` affecting `line-height` in all browsers.
112 | */
113 |
114 | sub,
115 | sup {
116 | font-size: 75%;
117 | line-height: 0;
118 | position: relative;
119 | vertical-align: baseline;
120 | }
121 |
122 | sup {
123 | top: -8px;
124 | }
125 |
126 | sub {
127 | bottom: -4px;
128 | }
129 |
130 | /* Embedded content
131 | ========================================================================== */
132 |
133 | /**
134 | * Correct overflow not hidden in IE 9/10/11.
135 | */
136 |
137 | svg:not(:root) {
138 | overflow: hidden;
139 | }
140 |
141 | /* Forms
142 | ========================================================================== */
143 |
144 | /**
145 | * Known limitation: by default, Chrome and Safari on OS X allow very limited
146 | * styling of `select`, unless a `border` property is set.
147 | */
148 |
149 | /**
150 | * 1. Correct color not being inherited.
151 | * Known issue: affects color of disabled elements.
152 | * 2. Correct font properties not being inherited.
153 | * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
154 | */
155 |
156 | button,
157 | input,
158 | optgroup,
159 | select,
160 | textarea {
161 | color: inherit;
162 |
163 | /* 1 */
164 | font: inherit;
165 |
166 | /* 2 */
167 | margin: 0;
168 |
169 | /* 3 */
170 | }
171 |
172 | /**
173 | * Address `overflow` set to `hidden` in IE 8/9/10/11.
174 | */
175 |
176 | button {
177 | overflow: visible;
178 | }
179 |
180 | /**
181 | * Address inconsistent `text-transform` inheritance for `button` and `select`.
182 | * All other form control elements do not inherit `text-transform` values.
183 | * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
184 | * Correct `select` style inheritance in Firefox.
185 | */
186 |
187 | button,
188 | select {
189 | text-transform: none;
190 | }
191 |
192 | /**
193 | * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
194 | * and `video` controls.
195 | * 2. Correct inability to style clickable `input` types in iOS.
196 | * 3. Improve usability and consistency of cursor style between image-type
197 | * `input` and others.
198 | */
199 |
200 | button,
201 | html input[type="button"],
202 | input[type="reset"],
203 | input[type="submit"] {
204 | -webkit-appearance: button;
205 |
206 | /* 2 */
207 | cursor: pointer;
208 |
209 | /* 3 */
210 | }
211 |
212 | /**
213 | * Re-set default cursor for disabled elements.
214 | */
215 |
216 | button[disabled],
217 | html input[disabled] {
218 | cursor: default;
219 | }
220 |
221 | /**
222 | * Remove inner padding and border in Firefox 4+.
223 | */
224 |
225 | button::-moz-focus-inner,
226 | input::-moz-focus-inner {
227 | border: 0;
228 | padding: 0;
229 | }
230 |
231 | /**
232 | * It's recommended that you don't attempt to style these elements.
233 | * Firefox's implementation doesn't respect box-sizing, padding, or width.
234 | *
235 | * 1. Address box sizing set to `content-box` in IE 8/9/10.
236 | * 2. Remove excess padding in IE 8/9/10.
237 | */
238 |
239 | input[type="checkbox"],
240 | input[type="radio"] {
241 | box-sizing: border-box;
242 |
243 | /* 1 */
244 | padding: 0;
245 |
246 | /* 2 */
247 | }
248 |
249 | /**
250 | * Fix the cursor style for Chrome's increment/decrement buttons. For certain
251 | * `font-size` values of the `input`, it causes the cursor style of the
252 | * decrement button to change from `default` to `text`.
253 | */
254 |
255 | input[type="number"]::-webkit-inner-spin-button,
256 | input[type="number"]::-webkit-outer-spin-button {
257 | height: auto;
258 | }
259 |
260 | /**
261 | * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
262 | */
263 |
264 | input[type="search"] {
265 | -webkit-appearance: textfield;
266 |
267 | /* 1 */
268 | }
269 |
270 | /**
271 | * Remove inner padding and search cancel button in Safari and Chrome on OS X.
272 | * Safari (but not Chrome) clips the cancel button when the search input has
273 | * padding (and `textfield` appearance).
274 | */
275 |
276 | input[type="search"]::-webkit-search-cancel-button,
277 | input[type="search"]::-webkit-search-decoration {
278 | -webkit-appearance: none;
279 | }
280 |
281 | /**
282 | * 1. Correct the inability to style clickable types in iOS and Safari.
283 | * 2. Change font properties to `inherit` in Safari.
284 | */
285 | ::-webkit-file-upload-button {
286 | -webkit-appearance: button; /* 1 */
287 | font: inherit; /* 2 */
288 | }
289 |
290 | /**
291 | * Define consistent border, margin, and padding.
292 | */
293 |
294 | fieldset {
295 | border: 1px solid $color__border-fieldset;
296 | margin: 0 2px;
297 | padding: 6px 10px 12px;
298 | }
299 |
300 | /**
301 | * 1. Correct `color` not being inherited in IE 8/9/10/11.
302 | * 2. Remove padding so people aren't caught out if they zero out fieldsets.
303 | */
304 |
305 | legend {
306 | border: 0;
307 |
308 | /* 1 */
309 | padding: 0;
310 |
311 | /* 2 */
312 | }
313 |
314 | /**
315 | * Don't inherit the `font-weight` (applied by a rule above).
316 | * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
317 | */
318 |
319 | optgroup {
320 | font-weight: 700;
321 | }
322 |
323 | /* Note: This file is updated by Sagar, To remove ducplication of styles. */
324 |
325 | figure {
326 | margin: 0;
327 | max-width: 100%;
328 | }
329 |
--------------------------------------------------------------------------------